Annotation of html5/spec-author-view/spec.preprocessed.html, revision 1.629
1.472 mike 1: <!DOCTYPE html PUBLIC "DUMMY" "DUMMY">
1.475 mike 2: <html lang="en-US-x-Hixie"><head><meta http-equiv="Content-Type" content="text/html; charset=ascii">
3: <title>HTML5: Edition for Web Authors</title>
1.346 mike 4:
1.474 mike 5: <link href="style.css" rel="stylesheet">
6: <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
7: <script src="link-fixup.js" type="text/javascript"></script>
1.1 mike 8: <style type="text/css">
9:
10: .applies thead th > * { display: block; }
11: .applies thead code { display: block; }
12: .applies tbody th { whitespace: nowrap; }
13: .applies td { text-align: center; }
14: .applies .yes { background: yellow; }
15:
16: .matrix, .matrix td { border: hidden; text-align: right; }
17: .matrix { margin-left: 2em; }
18:
19: .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
20: .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
21: .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
22:
1.51 mike 23: td.eg { border-width: thin; text-align: center; }
24:
1.1 mike 25: #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
26: #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
27: #table-example-1 caption { padding-bottom: 0.5em; }
28: #table-example-1 thead, #table-example-1 tbody { border: none; }
29: #table-example-1 th, #table-example-1 td { border: solid thin; }
30: #table-example-1 th { font-weight: normal; }
31: #table-example-1 td { border-style: none solid; vertical-align: top; }
32: #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
33: #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
34: #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
35: #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
36: #table-example-1 tbody td:first-child::after { content: leader(". "); }
37: #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
38: #table-example-1 tbody td:first-child + td { width: 10em; }
39: #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
40: #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
41:
42: .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
43: .apple-table-examples * { font-family: "Times", serif; }
44: .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
45: .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
46: .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
47: .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
48: .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
49: .apple-table-examples td { text-align: right; vertical-align: top; }
50: .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
51: .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
52: .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
53: .apple-table-examples sup { line-height: 0; }
54:
55: .details-example img { vertical-align: top; }
56:
1.224 mike 57: #base64-table {
58: white-space: nowrap;
59: font-size: 0.6em;
60: column-width: 6em;
61: column-count: 5;
62: column-gap: 1em;
63: -moz-column-width: 6em;
64: -moz-column-count: 5;
65: -moz-column-gap: 1em;
66: -webkit-column-width: 6em;
67: -webkit-column-count: 5;
68: -webkit-column-gap: 1em;
69: }
70: #base64-table thead { display: none; }
71: #base64-table * { border: none; }
72: #base64-table tbody td:first-child:after { content: ':'; }
73: #base64-table tbody td:last-child { text-align: right; }
74:
1.1 mike 75: #named-character-references-table {
1.95 mike 76: white-space: nowrap;
1.1 mike 77: font-size: 0.6em;
1.95 mike 78: column-width: 30em;
1.1 mike 79: column-gap: 1em;
1.95 mike 80: -moz-column-width: 30em;
1.1 mike 81: -moz-column-gap: 1em;
1.95 mike 82: -webkit-column-width: 30em;
1.1 mike 83: -webkit-column-gap: 1em;
84: }
1.95 mike 85: #named-character-references-table > table > tbody > tr > td:first-child + td,
1.1 mike 86: #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
87: #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; }
1.95 mike 88: #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
1.1 mike 89:
90: .glyph.control { color: red; }
91:
92: @font-face {
93: font-family: 'Essays1743';
94: src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
95: }
96: @font-face {
97: font-family: 'Essays1743';
98: font-weight: bold;
99: src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
100: }
101: @font-face {
102: font-family: 'Essays1743';
103: font-style: italic;
104: src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
105: }
106: @font-face {
107: font-family: 'Essays1743';
108: font-style: italic;
109: font-weight: bold;
110: src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
111: }
112:
1.280 mike 113: </style>
1.238 mike 114: <script type="text/javascript">
115: function getCookie(name) {
116: var params = location.search.substr(1).split("&");
117: for (var index = 0; index < params.length; index++) {
118: if (params[index] == name)
119: return "1";
120: var data = params[index].split("=");
121: if (data[0] == name)
122: return unescape(data[1]);
123: }
124: var cookies = document.cookie.split("; ");
125: for (var index = 0; index < cookies.length; index++) {
126: var data = cookies[index].split("=");
127: if (data[0] == name)
128: return unescape(data[1]);
129: }
130: return null;
131: }
132: function load(script) {
133: var e = document.createElement('script');
134: e.setAttribute('src', script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
135: document.body.appendChild(e);
136: }
137: function init() {
138: if (location.search == '?slow-browser')
139: return;
140: var configUI = document.createElement('div');
141: configUI.id = 'configUI';
142: document.body.appendChild(configUI);
143: if (document.getElementById('head'))
144: load('toc.js');
145: load('dfn.js');
146: if (getCookie('profile') == '1')
147: document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
148: fixBrokenLink();
149: }
150: </script>
1.470 mike 151:
152: <script src="dfn.js" type="text/javascript"></script>
153: <script src="toc.js" type="text/javascript"></script>
1.474 mike 154: </head><body>
1.341 mike 155: <div class="head" id="head">
1.340 mike 156: <div id="jumpIndexA-button" role="button" aria-haspopup="true" tabindex="0">jump
1.447 mike 157: <div id="jumpIndexA"><ul><li><a class="noindex" href="#the-a-element">a</a><a class="noindex" href="#the-abbr-element">abbr</a><a class="noindex" href="#the-address-element">address</a><a class="noindex" href="#the-area-element">area</a><a class="noindex" href="#the-article-element">article</a><a class="noindex" href="#the-aside-element">aside</a><a class="noindex" href="#the-audio-element">audio</a></li></ul><ul><li><a class="noindex" href="#the-b-element">b</a><a class="noindex" href="#the-base-element">base</a><a class="noindex" href="#the-bdi-element">bdi</a><a class="noindex" href="#the-bdo-element">bdo</a><a class="noindex" href="#the-blockquote-element">blockquote</a><a class="noindex" href="#the-body-element">body</a><a class="noindex" href="#the-br-element">br</a><a class="noindex" href="#the-button-element">button</a></li></ul><ul><li><a class="noindex" href="#the-canvas-element">canvas</a><a class="noindex" href="#the-caption-element">caption</a><a class="noindex" href="#the-cite-element">cite</a><a class="noindex" href="#the-code-element">code</a><a class="noindex" href="#the-col-element">col</a><a class="noindex" href="#the-colgroup-element">colgroup</a><a class="noindex" href="#the-command-element">command</a></li></ul><ul><li><a class="noindex" href="#the-datalist-element">datalist</a><a class="noindex" href="#the-dd-element">dd</a><a class="noindex" href="#the-del-element">del</a><a class="noindex" href="#the-details-element">details</a><a class="noindex" href="#the-dfn-element">dfn</a><a class="noindex" href="#the-div-element">div</a><a class="noindex" href="#the-dl-element">dl</a><a class="noindex" href="#the-dt-element">dt</a></li></ul><ul><li><a class="noindex" href="#the-em-element">em</a><a class="noindex" href="#the-embed-element">embed</a><a class="noindex" href="#the-fieldset-element">fieldset</a><a class="noindex" href="#the-figcaption-element">figcaption</a><a class="noindex" href="#the-figure-element">figure</a><a class="noindex" href="#the-footer-element">footer</a><a class="noindex" href="#the-form-element">form</a></li></ul><ul><li><a class="noindex" href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a><a class="noindex" href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a><a class="noindex" href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a><a class="noindex" href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a><a class="noindex" href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a><a class="noindex" href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a><a class="noindex" href="#the-head-element">head</a><a class="noindex" href="#the-header-element">header</a><a class="noindex" href="#the-hgroup-element">hgroup</a><a class="noindex" href="#the-hr-element">hr</a><a class="noindex" href="#the-html-element">html</a></li></ul><ul><li><a class="noindex" href="#the-i-element">i</a><a class="noindex" href="#the-iframe-element">iframe</a><a class="noindex" href="#the-img-element">img</a><a class="noindex" href="#the-input-element">input</a><a class="noindex" href="#the-ins-element">ins</a><a class="noindex" href="#the-kbd-element">kbd</a><a class="noindex" href="#the-keygen-element">keygen</a></li></ul><ul><li><a class="noindex" href="#the-label-element">label</a><a class="noindex" href="#the-legend-element">legend</a><a class="noindex" href="#the-li-element">li</a><a class="noindex" href="#the-link-element">link</a><a class="noindex" href="#the-map-element">map</a><a class="noindex" href="#the-mark-element">mark</a><a class="noindex" href="#the-menu-element">menu</a><a class="noindex" href="#the-meta-element">meta</a><a class="noindex" href="#the-meter-element">meter</a></li></ul><ul><li><a class="noindex" href="#the-nav-element">nav</a><a class="noindex" href="#the-noscript-element">noscript</a><a class="noindex" href="#the-object-element">object</a><a class="noindex" href="#the-ol-element">ol</a><a class="noindex" href="#the-optgroup-element">optgroup</a><a class="noindex" href="#the-option-element">option</a><a class="noindex" href="#the-output-element">output</a></li></ul><ul><li><a class="noindex" href="#the-p-element">p</a><a class="noindex" href="#the-param-element">param</a><a class="noindex" href="#the-pre-element">pre</a><a class="noindex" href="#the-progress-element">progress</a><a class="noindex" href="#the-q-element">q</a><a class="noindex" href="#the-rp-element">rp</a><a class="noindex" href="#the-rt-element">rt</a><a class="noindex" href="#the-ruby-element">ruby</a></li></ul><ul><li><a class="noindex" href="#the-s-element">s</a><a class="noindex" href="#the-samp-element">samp</a><a class="noindex" href="#the-script-element">script</a><a class="noindex" href="#the-section-element">section</a><a class="noindex" href="#the-select-element">select</a><a class="noindex" href="#the-small-element">small</a><a class="noindex" href="#the-source-element">source</a><a class="noindex" href="#the-span-element">span</a></li></ul><ul><li><a class="noindex" href="#the-strong-element">strong</a><a class="noindex" href="#the-style-element">style</a><a class="noindex" href="#the-sub-and-sup-elements">sub</a><a class="noindex" href="#the-summary-element">summary</a><a class="noindex" href="#the-sub-and-sup-elements">sup</a></li></ul><ul><li><a class="noindex" href="#the-table-element">table</a><a class="noindex" href="#the-tbody-element">tbody</a><a class="noindex" href="#the-td-element">td</a><a class="noindex" href="#the-textarea-element">textarea</a><a class="noindex" href="#the-tfoot-element">tfoot</a><a class="noindex" href="#the-th-element">th</a><a class="noindex" href="#the-thead-element">thead</a><a class="noindex" href="#the-time-element">time</a><a class="noindex" href="#the-title-element">title</a></li></ul><ul><li><a class="noindex" href="#the-tr-element">tr</a><a class="noindex" href="#the-track-element">track</a><a class="noindex" href="#the-u-element">u</a><a class="noindex" href="#the-ul-element">ul</a><a class="noindex" href="#the-var-element">var</a><a class="noindex" href="#the-video-element">video</a><a class="noindex" href="#the-wbr-element">wbr</a></li></ul><ul class="jumpIndexA-other"><li><a class="noindex" href="#global-attributes">global attributes</a><a class="noindex" href="#index-of-terms">terms</a></li></ul></div></div>
1.340 mike 158: <script src="jump-indexes.js"></script>
1.343 mike 159:
1.1 mike 160: <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
161:
1.463 mike 162: <h1>HTML5: Edition for Web Authors</h1>
1.343 mike 163:
1.624 mike 164: <h2 class="no-num no-toc" id="editor-s-draft-5-october-2011">Editor's Draft 5 October 2011</h2>
1.474 mike 165: <dl><dt>Latest Published Version:</dt>
1.470 mike 166: <dd><a href="http://www.w3.org/TR/html5-author/">http://www.w3.org/TR/html5-author/</a></dd>
1.274 mike 167: <dt>Latest Editor's Draft:</dt>
1.471 mike 168: <dd><a href="http://dev.w3.org/html5/spec-author-view/">http://dev.w3.org/html5/spec-author-view/</a></dd>
1.355 mike 169:
1.463 mike 170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
1.474 mike 181:
1.268 mike 182: <!-- :ZZZ -->
1.274 mike 183: <dt>Editor:</dt>
1.1 mike 184: <dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.</dd>
1.474 mike 185: </dl><p>This specification is available in the following formats: <a href="spec.html">single page HTML</a>, <a href="Overview.html">multipage HTML</a>, <a href="http://dev.w3.org/html5/spec/">full specification</a>.
1.629 ! mike 186: This is revision 1.5328.</p>
1.1 mike 187: <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
1.355 mike 188: © 2011 <a href="http://www.w3.org/"><abbr title="World Wide
1.1 mike 189: Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
1.478 mike 190: Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research
1.1 mike 191: Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C
192: <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
193: <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
194: and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
195: use</a> rules apply.</p>
196:
197:
1.268 mike 198: <!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
1.1 mike 199: <p class="alt">The bulk of the text of this specification is also
200: available in the WHATWG <a href="http://www.whatwg.org/specs/web-apps/current-work/complete.html">Web Applications 1.0</a> specification, under a license that permits
201: reuse of the specification text.</p>
1.268 mike 202: <!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
1.1 mike 203:
204:
1.462 mike 205: </div><hr class="top">
1.463 mike 206: <h2 class="no-num no-toc" id="abstract">Abstract</h2><p>This document is a strict subset of
1.288 mike 207: the
1.474 mike 208: <a href="http://dev.w3.org/html5/spec/">full HTML5 specification</a>
1.1 mike 209: that omits user-agent (UA) implementation details. It is
210: targeted toward Web authors and others who are not UA
1.462 mike 211: implementors and who want a view of the HTML
1.288 mike 212: specification that focuses more precisely on details relevant to
213: using the HTML language to create Web documents and Web applications.
214: Because this document does not provide implementation conformance
215: criteria, UA implementors should not rely on it, but should instead
1.371 mike 216: refer to the
1.474 mike 217: <a href="http://dev.w3.org/html5/spec/">full HTML5 specification</a>.</p><p>This document is an automated redaction of the
218: <a href="http://dev.w3.org/html5/spec/">full HTML5 specification</a>.
1.462 mike 219: As such, the two documents are supposed to agree on normative matters
220: concerning Web authors. However, if the documents disagree, this is a
221: bug in the redaction process and the unredacted full HTML
222: specification takes precedence. Readers are encouraged to report such
223: discrepancies as bugs in the bug tracking system of the HTML Working
1.463 mike 224: Group.</p><h2 class="no-num no-toc" id="status-of-this-document">Status of This document</h2><p><em>This section describes the status of this document at the
1.1 mike 225: time of its publication. Other documents may supersede this
1.478 mike 226: document. A list of current W3C publications and the
227:
228: most recently formally published <!-- DO NOT CHANGE THIS BACK TO THE STANDARD BOILERPLATE, AS IT IS INACCURATE -->
229:
230: revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at
231: http://www.w3.org/TR/.</em></p><p>If you wish to make comments regarding this document in a manner
1.131 mike 232: that is tracked by the W3C, please submit them via using <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG">our
233: public bug database</a>. If you do not have an account then you can
1.152 mike 234: enter feedback using this form:</p><form action="http://www.whatwg.org/specs/web-apps/current-work/file-spam.cgi" method="post">
1.131 mike 235: <fieldset><legend>Feedback Comments</legend>
1.205 mike 236: <input name="id" type="hidden" value="top"><input name="component" type="hidden" value="HTML5 spec (editor: Ian Hickson)"><input name="response" type="hidden" value="html"><p><label for="feedbackBox">Please enter your feedback, carefully
1.152 mike 237: indicating the title of the section for which you are submitting
238: feedback, quoting the text that's wrong today if appropriate. If
239: you're suggesting a new feature, it's really important to say
240: <em>what</em> the problem you're trying to solve is. That's more
241: important than the solution, in fact.</label></p>
242: <p><textarea cols="79" id="feedbackBox" name="text" rows="10"></textarea></p>
1.158 mike 243: <p class="note">Please don't use section numbers as these tend to
244: change rapidly and make your feedback harder to understand.</p>
1.152 mike 245:
246: <script type="text/javascript">
247: function getCookie(name) {
248: var params = location.search.substr(1).split("&");
249: for (var index = 0; index < params.length; index++) {
250: if (params[index] == name)
251: return "1";
252: var data = params[index].split("=");
253: if (data[0] == name)
254: return unescape(data[1]);
255: }
256: var cookies = document.cookie.split("; ");
257: for (var index = 0; index < cookies.length; index++) {
258: var data = cookies[index].split("=");
259: if (data[0] == name)
260: return unescape(data[1]);
261: }
262: return null;
263: }
264: function load(script) {
265: var e = document.createElement('script');
266: e.setAttribute('src', script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
267: document.body.appendChild(e);
268: }
269: function init() {
270: if (location.search == '?slow-browser')
271: return;
272: var configUI = document.createElement('div');
273: configUI.id = 'configUI';
274: document.body.appendChild(configUI);
275: if (document.getElementById('head'))
276: load('toc.js');
277: load('dfn.js');
278: if (getCookie('profile') == '1')
279: document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
280: fixBrokenLink();
281: }
282: </script>
1.158 mike 283: <p>
1.226 mike 284: <input onclick="return checkFeedbackForm(form)" type="submit" value="Submit feedback"><small>(Note: Your IP address and user agent will be publicly recorded for spam prevention purposes.)</small>
1.158 mike 285: </p>
1.131 mike 286: </fieldset></form><p>If you cannot do this then you can also e-mail feedback to <a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a>
1.1 mike 287: (<a href="mailto:public-html-comments-request@w3.org?subject=subscribe">subscribe</a>,
1.131 mike 288: <a href="http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>),
289: and arrangements will be made to transpose the comments to our
290: public bug database.
1.1 mike 291:
1.268 mike 292: <!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
1.131 mike 293: Alternatively, you can e-mail feedback to <a href="mailto:whatwg@whatwg.org">whatwg@whatwg.org</a> (<a href="http://lists.whatwg.org/listinfo.cgi/whatwg-whatwg.org">subscribe</a>,
294: <a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">archives</a>).
295: The editor guarantees that all substantive feedback sent to this
296: list will receive a reply. However, such feedback is not considered
297: formal feedback for the W3C process.
1.268 mike 298: <!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
1.1 mike 299:
1.268 mike 300: All feedback is welcome.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The working groups maintains <a href="http://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&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=">a
1.1 mike 301: list of all bug reports that the editor has not yet tried to
302: address</a> and <a href="http://www.w3.org/html/wg/tracker/products/1">a list of issues
303: for which the chairs have not yet declared a decision</a>. The
304: editor also maintains <a href="http://www.whatwg.org/issues/">a list
305: of all e-mails that he has not yet tried to address</a>. These bugs,
306: issues, and e-mails apply to multiple HTML-related specifications,
1.268 mike 307: not just this one.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Implementors should be aware that this specification is not
1.1 mike 308: stable. <strong>Implementors who are not taking part in the
309: discussions are likely to find the specification changing out from
310: under them in incompatible ways.</strong> Vendors interested in
311: implementing this specification before it eventually reaches the
312: Candidate Recommendation stage should join the aforementioned
1.166 mike 313: mailing lists and take part in the discussions.</p><div id="multipage-common">
1.474 mike 314: </div><p>The publication of this document by the W3C as a W3C Working
1.1 mike 315: Draft does not imply that all of the participants in the W3C HTML
316: working group endorse the contents of the specification. Indeed, for
317: any section of the specification, one can usually find many members
318: of the working group or of the W3C as a whole who object strongly to
319: the current text, the existence of the section at all, or the idea
320: that the working group should even spend time discussing the concept
1.474 mike 321: of that section.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The latest stable version of the editor's draft of this
1.1 mike 322: specification is always available on <a href="http://dev.w3.org/html5/">the W3C CVS server</a> and in the <a href="http://svn.whatwg.org/webapps/">WHATWG Subversion
323: repository</a>. The <a href="http://www.whatwg.org/specs/web-apps/current-work/complete.html">latest
324: editor's working copy</a> (which may contain unfinished text in the
325: process of being prepared) contains the latest draft text of this
326: specification (amongst others). For more details, please see the <a href="http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F">WHATWG
1.268 mike 327: FAQ</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>There are various ways to follow the change history for the
1.274 mike 328: HTML specifications:</p><dl><dt>E-mail notifications of changes</dt>
1.1 mike 329: <dd>HTML-Diffs mailing list (diff-marked HTML versions for each change): <a href="http://lists.w3.org/Archives/Public/public-html-diffs/latest">http://lists.w3.org/Archives/Public/public-html-diffs/latest</a></dd>
330: <dd>Commit-Watchers mailing list (complete source diffs): <a href="http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org">http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org</a></dd>
1.274 mike 331: <dt>Browsable version-control record of all changes:</dt>
1.1 mike 332: <dd>CVSWeb interface with side-by-side diffs: <a href="http://dev.w3.org/cvsweb/html5/">http://dev.w3.org/cvsweb/html5/</a></dd>
333: <dd>Annotated summary with unified diffs: <a href="http://html5.org/tools/web-apps-tracker">http://html5.org/tools/web-apps-tracker</a></dd>
334: <dd>Raw Subversion interface: <code>svn checkout http://svn.whatwg.org/webapps/</code></dd>
1.268 mike 335: </dl><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working
1.1 mike 336: Group</a> is the W3C working group responsible for this
337: specification's progress along the W3C Recommendation
338: track.
1.624 mike 339: This specification is the 5 October 2011 Editor's Draft.
1.268 mike 340: </p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Work on this specification is also done at the <a href="http://www.whatwg.org/">WHATWG</a>. The W3C HTML working group
1.1 mike 341: actively pursues convergence with the WHATWG, as required by the <a href="http://www.w3.org/2007/03/HTML-WG-charter">W3C HTML working
1.268 mike 342: group charter</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
1.474 mike 343: February 2004 W3C Patent Policy</a>. W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">public list of
1.1 mike 344: any patent disclosures</a> made in connection with the deliverables
345: of the group; that page also includes instructions for disclosing a
346: patent. An individual who has actual knowledge of a patent which the
347: individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
348: Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
1.469 mike 349: 6 of the W3C Patent Policy</a>.</p><h2 class="no-num no-toc" id="contents">Table of Contents</h2>
350: <!--begin-toc-->
351: <!--end-toc-->
352: <hr><h2 id="introduction"><span class="secno">1 </span>Introduction</h2><h3 id="background"><span class="secno">1.1 </span>Background</h3><p><i>This section is non-normative.</i></p><p>The World Wide Web's markup language has always been HTML. HTML
1.1 mike 353: was primarily designed as a language for semantically describing
354: scientific documents, although its general design and adaptations
355: over the years have enabled it to be used to describe a number of
356: other types of documents.</p><p>The main area that has not been adequately addressed by HTML is a
357: vague subject referred to as Web Applications. This specification
358: attempts to rectify this, while at the same time updating the HTML
1.40 mike 359: specifications to address issues raised in the past few years.</p><h3 id="audience"><span class="secno">1.2 </span>Audience</h3><p><i>This section is non-normative.</i></p><p>This specification is intended for authors of documents and
1.1 mike 360: scripts that use the features defined in this specification<span class="impl">, implementors of tools that operate on pages that use
361: the features defined in this specification, and individuals wishing
362: to establish the correctness of documents or implementations with
363: respect to the requirements of this specification</span>.</p><p>This document is probably not suited to readers who do not
364: already have at least a passing familiarity with Web technologies,
365: as in places it sacrifices clarity for precision, and brevity for
366: completeness. More approachable tutorials and authoring guides can
367: provide a gentler introduction to the topic.</p><p>In particular, familiarity with the basics of DOM Core and DOM
368: Events is necessary for a complete understanding of some of the more
369: technical parts of this specification. An understanding of Web IDL,
370: HTTP, XML, Unicode, character encodings, JavaScript, and CSS will
1.40 mike 371: also be helpful in places but is not essential.</p><h3 id="scope"><span class="secno">1.3 </span>Scope</h3><p><i>This section is non-normative.</i></p><p>This specification is limited to providing a semantic-level
1.1 mike 372: markup language and associated semantic-level scripting APIs for
373: authoring accessible pages on the Web ranging from static documents
374: to dynamic applications.</p><p>The scope of this specification does not include providing
375: mechanisms for media-specific customization of presentation
376: (although default rendering rules for Web browsers are included at
377: the end of this specification, and several mechanisms for hooking
378: into CSS are provided as part of the language).</p><p>The scope of this specification is not to describe an entire
379: operating system. In particular, hardware configuration software,
380: image manipulation tools, and applications that users would be
381: expected to use with high-end workstations on a daily basis are out
382: of scope. In terms of applications, this specification is targeted
383: specifically at applications that would be expected to be used by
384: users on an occasional basis, or regularly but from disparate
385: locations, with low CPU requirements. For instance online purchasing
386: systems, searching systems, games (especially multiplayer online
387: games), public telephone books or address books, communications
388: software (e-mail clients, instant messaging clients, discussion
1.40 mike 389: software), document editing software, etc.</p><h3 id="history-1"><span class="secno">1.4 </span>History</h3><p><i>This section is non-normative.</i></p><p>For its first five years (1990-1995), HTML went through a number
1.1 mike 390: of revisions and experienced a number of extensions, primarily
391: hosted first at CERN, and then at the IETF.</p><p>With the creation of the W3C, HTML's development changed venue
392: again. A first abortive attempt at extending HTML in 1995 known as
393: HTML 3.0 then made way to a more pragmatic approach known as HTML
1.561 mike 394: 3.2, which was completed in 1997. HTML4 quicky followed later that
395: same year.</p><p>The following year, the W3C membership decided to stop evolving
396: HTML and instead begin work on an XML-based equivalent, called
397: XHTML. This effort
398: started with a reformulation of HTML4 in XML, known as XHTML 1.0,
399: which added no new features except the new serialization, and which
400: was completed in 2000. After XHTML 1.0, the W3C's focus turned to
401: making it easier for other working groups to extend XHTML, under the
402: banner of XHTML Modularization. In parallel with this, the W3C also
403: worked on a new language that was not compatible with the earlier
404: HTML and XHTML languages, calling it XHTML2.</p><p>Around the time that HTML's evolution was stopped in 1998, parts
1.1 mike 405: of the API for HTML developed by browser vendors were specified and
406: published under the name DOM Level 1 (in 1998) and DOM Level 2 Core
407: and DOM Level 2 HTML (starting in 2000 and culminating in
408: 2003). These efforts then petered out, with some DOM Level 3
409: specifications published in 2004 but the working group being closed
410: before all the Level 3 drafts were completed.</p><p>In 2003, the publication of XForms, a technology which was
411: positioned as the next generation of Web forms, sparked a renewed
412: interest in evolving HTML itself, rather than finding replacements
413: for it. This interest was borne from the realization that XML's
414: deployment as a Web technology was limited to entirely new
415: technologies (like RSS and later Atom), rather than as a replacement
416: for existing deployed technologies (like HTML).</p><p>A proof of concept to show that it was possible to extend HTML4's
417: forms to provide many of the features that XForms 1.0 introduced,
418: without requiring browsers to implement rendering engines that were
419: incompatible with existing HTML Web pages, was the first result of
420: this renewed interest. At this early stage, while the draft was
421: already publicly available, and input was already being solicited
422: from all sources, the specification was only under Opera Software's
423: copyright.</p><p>The idea that HTML's evolution should be reopened was tested at a
424: W3C workshop in 2004, where some of the principles that underlie the
425: HTML5 work (described below), as well as the aforementioned early
426: draft proposal covering just forms-related features, were presented
427: to the W3C jointly by Mozilla and Opera. The proposal was rejected
428: on the grounds that the proposal conflicted with the previously
429: chosen direction for the Web's evolution; the W3C staff and
430: membership voted to continue developing XML-based replacements
431: instead.</p><p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced
432: their intent to continue working on the effort under the umbrella of
433: a new venue called the WHATWG. A public mailing list was created,
434: and the draft was moved to the WHATWG site. The copyright was
435: subsequently amended to be jointly owned by all three vendors, and
436: to allow reuse of the specification.</p><p>The WHATWG was based on several core principles, in particular
437: that technologies need to be backwards compatible, that
438: specifications and implementations need to match even if this means
439: changing the specification rather than the implementations, and that
440: specifications need to be detailed enough that implementations can
441: achieve complete interoperability without reverse-engineering each
442: other.</p><p>The latter requirement in particular required that the scope of
443: the HTML5 specification include what had previously been specified
444: in three separate documents: HTML4, XHTML1, and DOM2 HTML. It also
445: meant including significantly more detail than had previously been
446: considered the norm.</p><p>In 2006, the W3C indicated an interest to participate in the
447: development of HTML5 after all, and in 2007 formed a working group
448: chartered to work with the WHATWG on the development of the HTML5
449: specification. Apple, Mozilla, and Opera allowed the W3C to publish
450: the specification under the W3C copyright, while keeping a version
1.251 mike 451: with the less restrictive license on the WHATWG site.</p><p>Since then, both groups have been working together.</p><p>The <a href="http://www.whatwg.org/specs/web-apps/current-work/">HTML
1.1 mike 452: specification</a> published by the WHATWG is not identical to
1.474 mike 453: this specification. The main differences are that the WHATWG version
454: includes features not included in this W3C version: some features
455: have been omitted as they are considered part of future revisions of
456: HTML, not HTML5; and other features are omitted because at the W3C
457: they are published as separate specifications. There are also some
458: minor differences. For an exact list of differences, please see the
459: WHATWG specification.</p><p>A separate document has been published by the W3C HTML working
1.620 mike 460: group to document the differences between the HTML specified in this
461: document and the language described in the HTML4 specification. <a href="#refsHTMLDIFF">[HTMLDIFF]</a></p><h3 id="design-notes"><span class="secno">1.5 </span>Design notes</h3><p><i>This section is non-normative.</i></p><p>It must be admitted that many aspects of HTML appear at first
1.1 mike 462: glance to be nonsensical and inconsistent.</p><p>HTML, its supporting DOM APIs, as well as many of its supporting
463: technologies, have been developed over a period of several decades
464: by a wide array of people with different priorities who, in many
465: cases, did not know of each other's existence.</p><p>Features have thus arisen from many sources, and have not always
466: been designed in especially consistent ways. Furthermore, because of
467: the unique characteristics of the Web, implementation bugs have
468: often become de-facto, and now de-jure, standards, as content is
469: often unintentionally written in ways that rely on them before they
470: can be fixed.</p><p>Despite all this, efforts have been made to adhere to certain
1.40 mike 471: design goals. These are described in the next few subsections.</p><h4 id="serializability-of-script-execution"><span class="secno">1.5.1 </span>Serializability of script execution</h4><p><i>This section is non-normative.</i></p><p>To avoid exposing Web authors to the complexities of
1.1 mike 472: multithreading, the HTML and DOM APIs are designed such that no
473: script can ever detect the simultaneous execution of other
474: scripts. Even with <span title="Worker">workers</span>, the intent
475: is that the behavior of implementations can be thought of as
476: completely serializing the execution of all scripts in all <a href="#browsing-context" title="browsing context">browsing contexts</a>.</p><p class="note">The <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
477: method, in this model, is equivalent to allowing other scripts to
1.40 mike 478: run while the calling script is blocked.</p><h4 id="compliance-with-other-specifications"><span class="secno">1.5.2 </span>Compliance with other specifications</h4><p><i>This section is non-normative.</i></p><p>This specification interacts with and relies on a wide variety of
1.1 mike 479: other specifications. In certain circumstances, unfortunately,
480: conflicting needs have led to this specification violating the
481: requirements of these other specifications. Whenever this has
1.312 mike 482: occurred, the transgressions have each been noted as a "<dfn id="willful-violation" role="button" tabindex="0" aria-haspopup="true">willful
1.1 mike 483: violation</dfn>", and the reason for the violation has been
1.40 mike 484: noted.</p><h3 id="html-vs-xhtml"><span class="secno">1.6 </span>HTML vs XHTML</h3><p><i>This section is non-normative.</i></p><p>This specification defines an abstract language for describing
1.1 mike 485: documents and applications, and some APIs for interacting with
486: in-memory representations of resources that use this language.</p><p>The in-memory representation is known as "DOM HTML", or "the DOM"
1.483 mike 487: for short.</p><p>There are various concrete syntaxes that can be used to transmit
1.1 mike 488: resources that use this abstract language, two of which are defined
489: in this specification.</p><p>The first such concrete syntax is the HTML syntax. This is the
490: format suggested for most authors. It is compatible with most legacy
491: Web browsers. If a document is transmitted with an <a href="#html-mime-type">HTML MIME
492: type</a>, such as <code><a href="#text-html">text/html</a></code>, then it will be
493: processed as an HTML document by Web browsers.
494:
495:
496: This specification defines version 5 of the HTML syntax, known as
497: "HTML5".
498:
499: </p><p>The second concrete syntax is the XHTML syntax, which is an
500: application of XML. When a document is transmitted with an <a href="#xml-mime-type">XML
501: MIME type</a>, such as <code><a href="#application-xhtml-xml">application/xhtml+xml</a></code>, then
502: it is treated as an XML document by Web browsers, to be parsed by an
503: XML processor. Authors are reminded that the processing for XML and
504: HTML differs; in particular, even minor syntax errors will prevent a
505: document labeled as XML from being rendered fully, whereas they
506: would be ignored in the HTML syntax.
507:
508:
509: This specification defines version 5 of the XHTML syntax, known as
510: "XHTML5".
511:
512: </p><p>The DOM, the HTML syntax, and XML cannot all represent the same
513: content. For example, namespaces cannot be represented using the
514: HTML syntax, but they are supported in the DOM and in XML.
515: Similarly, documents that use the <code><a href="#the-noscript-element">noscript</a></code> feature can
516: be represented using the HTML syntax, but cannot be represented with
1.32 mike 517: the DOM or in XML. Comments that contain the string "<code title="">--></code>" can only be represented in the DOM, not in
1.40 mike 518: the HTML and XML syntaxes.</p><h3 id="structure-of-this-specification"><span class="secno">1.7 </span>Structure of this specification</h3><p><i>This section is non-normative.</i></p><p>This specification is divided into the following major
1.274 mike 519: sections:</p><dl><dt><a href="#infrastructure">Common infrastructure</a></dt>
1.1 mike 520:
521: <dd>The conformance classes, algorithms, definitions, and the
522: common underpinnings of the rest of the specification.</dd>
523:
524:
1.274 mike 525: <dt><a href="#dom">Semantics, structure, and APIs of HTML documents</a></dt>
1.1 mike 526:
527: <dd>Documents are built from elements. These elements form a tree
528: using the DOM. This section defines the features of this DOM, as
529: well as introducing the features common to all elements, and the
530: concepts used in defining elements.</dd>
531:
532:
1.274 mike 533: <dt><a href="#semantics">The elements of HTML</a></dt>
1.1 mike 534:
535: <dd>Each element has a predefined meaning, which is explained in
536: this section. Rules for authors on how to use the element<span class="impl">, along with user agent requirements for how to handle
537: each element,</span> are also given.</dd>
538:
539:
1.274 mike 540: <dt><a href="#browsers">Loading Web pages</a></dt>
1.1 mike 541:
542: <dd>HTML documents do not exist in a vacuum — this section
543: defines many of the features that affect environments that deal
544: with multiple pages.</dd>
545:
1.274 mike 546: <dt><a href="#webappapis">Web application APIs</a></dt>
1.1 mike 547:
548: <dd>This section introduces basic features for scripting of
549: applications in HTML.</dd>
550:
1.274 mike 551: <dt><a href="#editing">User interaction</a></dt>
1.1 mike 552:
553: <dd>HTML documents can provide a number of mechanisms for users to
554: interact with and modify content, which are described in this
555: section.</dd>
556:
557:
558:
559:
560:
1.274 mike 561: <dt><a href="#syntax">The HTML syntax</a></dt>
562: <dt><a href="#xhtml">The XHTML syntax</a></dt>
1.1 mike 563:
564: <dd>All of these features would be for naught if they couldn't be
565: represented in a serialized form and sent to other people, and so
566: these sections define the syntaxes of HTML, along with rules for
567: how to parse content using those syntaxes.</dd>
568:
569:
570: </dl><p>There are also some appendices, defining <a href="#rendering">rendering rules</a> for Web browsers and listing
571: <a href="#obsolete">obsolete features</a> and <a href="#iana">IANA
1.40 mike 572: considerations</a>.</p><h4 id="how-to-read-this-specification"><span class="secno">1.7.1 </span>How to read this specification</h4><p>This specification should be read like all other specifications.
1.1 mike 573: First, it should be read cover-to-cover, multiple times. Then, it
574: should be read backwards at least once. Then it should be read by
575: picking random sections from the contents list and following all the
1.531 mike 576: cross-references.</p><p>As described in the conformance requirements section below, this
577: specification describes conformance criteria for a variety of
578: conformance classes. In particular, there are conformance
579: requirements that apply to <em>producers</em>, for example authors
580: and the documents they create, and there are conformance
581: requirements that apply to <em>consumers</em>, for example Web
582: browsers. They can be distinguished by what they are requiring: a
583: requirement on a producer states what is allowed, while a
584: requirement on a consumer states how software is to act.</p><div class="example">
585:
586: <p>For example, "the <code title="">foo</code> attribute's value
587: must be a <a href="#valid-integer">valid integer</a>" is a requirement on
588: producers, as it lays out the allowed values; in contrast, the
589: requirement "the <code title="">foo</code> attribute's value must
590: be parsed using the <a href="#rules-for-parsing-integers">rules for parsing integers</a>" is a
591: requirement on consumers, as it describes how to process the
592: content.</p>
593:
594: </div><p><strong>Requirements on producers have no bearing whatsoever on
595: consumers.</strong></p><div class="example">
596:
597: <p>Continuing the above example, a requirement stating that a
598: particular attribute's value is constrained to being a <a href="#valid-integer">valid
599: integer</a> emphatically does <em>not</em> imply anything about
600: the requirements on consumers. It might be that the consumers are
601: in fact required to treat the attribute as an opaque string,
602: completely unaffected by whether the value conforms to the
603: requirements or not. It might be (as in the previous example) that
604: the consumers are required to parse the value using specific rules
605: that define how invalid (non-numeric in this case) values are to be
606: processed.</p>
607:
608: </div><h4 id="typographic-conventions"><span class="secno">1.7.2 </span>Typographic conventions</h4><p>This is a definition, requirement, or explanation.</p><p class="note">This is a note.</p><p class="example">This is an example.</p><p class="XXX">This is an open issue.</p><p class="warning">This is a warning.</p><pre class="idl extract">interface <dfn role="button" tabindex="0" aria-haspopup="true">Example</dfn> {
1.1 mike 609: // this is an IDL definition
1.274 mike 610: };</pre><dl class="domintro"><dt><var title="">variable</var> = <var title="">object</var> . <code title="">method</code>( [ <var title="">optionalArgument</var> ] )</dt>
1.1 mike 611:
612: <dd>
613:
614: <p>This is a note to authors describing the usage of an interface.</p>
615:
616: </dd>
617:
1.318 mike 618: </dl><pre class="css">/* this is a CSS fragment */</pre><p>The defining instance of a term is marked up like <dfn id="x-this" role="button" tabindex="0" aria-haspopup="true">this</dfn>. Uses of that term are marked up like
1.1 mike 619: <a href="#x-this" title="x-this">this</a> or like <i title="x-this"><a href="#x-this">this</a></i>.</p><p>The defining instance of an element, attribute, or API is marked
1.318 mike 620: up like <dfn id="x-that" role="button" tabindex="0" aria-haspopup="true"><code>this</code></dfn>. References to
1.1 mike 621: that element, attribute, or API are marked up like <code title="x-that"><a href="#x-that">this</a></code>.</p><p>Other code fragments are marked up <code title="">like
1.40 mike 622: this</code>.</p><p>Variables are marked up like <var title="">this</var>.</p><p class="impl">This is an implementation requirement.</p><h3 id="a-quick-introduction-to-html"><span class="secno">1.8 </span>A quick introduction to HTML</h3><p><i>This section is non-normative.</i></p><p>A basic HTML document looks like this:</p><pre id="intro-early-example"><!DOCTYPE html>
1.1 mike 623: <html>
624: <head>
625: <title>Sample page</title>
626: </head>
627: <body>
628: <h1>Sample page</h1>
629: <p>This is a <a href="demo.html">simple</a> sample.</p>
630: <!-- this is a comment -->
631: </body>
632: </html></pre><p>HTML documents consist of a tree of elements and text. Each
633: element is denoted in the source by a <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a>, such as "<code title=""><body></code>", and an <a href="#syntax-end-tag" title="syntax-end-tag">end
634: tag</a>, such as "<code title=""></body></code>". (Certain
635: 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
636: tags.)</p><p>Tags have to be nested such that elements are all completely
637: within each other, without overlapping:</p><pre class="bad"><p>This is <em>very <strong>wrong</em>!</strong></p></pre><pre><p>This <em>is <strong>correct</strong>.</em></p></pre><p>This specification defines a set of elements that can be used in
638: HTML, along with rules about the ways in which the elements can be
639: nested.</p><p>Elements can have attributes, which control how the elements
640: work. In the example below, there is a <a href="#hyperlink">hyperlink</a>,
641: 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><pre><a href="demo.html">simple</a></pre><p><a href="#syntax-attributes" title="syntax-attributes">Attributes</a> are placed
1.566 mike 642: 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 <a href="#space-character" title="space character">space characters</a> or any of <code title="">"</code> <code title="">'</code> <code title="">`</code>
643: <code title="">=</code> <code title=""><</code> or <code title="">></code>. Otherwise, it has to be quoted using either
644: single or double quotes. The value, along with the "<code title="">=</code>" character, can be omitted altogether if the value
1.1 mike 645: is the empty string.</p><pre><!-- empty attributes -->
646: <input name=address disabled>
647: <input name=address disabled="">
648:
649: <!-- attributes with a value -->
650: <input name=address maxlength=200>
651: <input name=address maxlength='200'>
652: <input name=address maxlength="200"></pre><p>HTML user agents (e.g. Web browsers) then <i>parse</i> this
653: markup, turning it into a DOM (Document Object Model) tree. A DOM
654: tree is an in-memory representation of a document.</p><p>DOM trees contain several kinds of nodes, in particular a DOCTYPE
655: node, elements, text nodes, and comment nodes.</p><p>The <a href="#intro-early-example">markup snippet at the top of
1.295 mike 656: this section</a> would be turned into the following DOM tree:</p><ul class="domTree"><li class="t10">DOCTYPE: <code title="">html</code></li><li class="t1"><code><a href="#the-html-element">html</a></code><ul><li class="t1"><code><a href="#the-head-element">head</a></code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><li class="t1"><code><a href="#the-title-element">title</a></code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣</span></li><li class="t1"><code><a href="#the-body-element">body</a></code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><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></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><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><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></li></ul></li><li class="t3"><code>#text</code>: <span title=""> sample.</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><li class="t8"><code>#comment</code>: <span title=""> this is a comment </span></li><li class="t3"><code>#text</code>: <span title="">⏎␣⏎</span></li></ul></li></ul></li></ul><p>The <a href="#root-element">root element</a> of this tree is the
1.293 mike 657: <code><a href="#the-html-element">html</a></code> element, which is the element always found at the
658: root of HTML documents. It contains two elements, <code><a href="#the-head-element">head</a></code>
1.295 mike 659: and <code><a href="#the-body-element">body</a></code>, as well as a text node between them.</p><p>There are many more text nodes in the DOM tree than one would
1.1 mike 660: initially expect, because the source contains a number of spaces
661: (represented here by "␣") and line breaks ("⏎") that
1.40 mike 662: all end up as text nodes in the DOM. However, for historical reasons
663: not all of the spaces and line breaks in the original markup appear
664: in the DOM. In particular, all the whitespace before
1.293 mike 665: <code><a href="#the-head-element">head</a></code> start tag ends up being dropped silently, and all
1.295 mike 666: the whitespace after the <code><a href="#the-body-element">body</a></code> end tag ends up placed at
667: the end of the <code><a href="#the-body-element">body</a></code>.</p><p>The <code><a href="#the-head-element">head</a></code> element contains a <code><a href="#the-title-element">title</a></code>
1.1 mike 668: element, which itself contains a text node with the text "Sample
1.295 mike 669: page". Similarly, the <code><a href="#the-body-element">body</a></code> element contains an
1.1 mike 670: <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
671: comment.</p><hr><p>This DOM tree can be manipulated from scripts in the
672: page. Scripts (typically in JavaScript) are small programs that can
1.293 mike 673: be embedded using the <code><a href="#the-script-element">script</a></code> element or using
1.1 mike 674: <a href="#event-handler-content-attributes">event handler content attributes</a>. For example, here is
675: a form with a script that sets the value of the form's
676: <code><a href="#the-output-element">output</a></code> element to say "Hello World":</p><pre><<a href="#the-form-element">form</a> <a href="#attr-form-name" title="attr-form-name">name</a>="main">
677: Result: <<a href="#the-output-element">output</a> <a href="#attr-fe-name" title="attr-fe-name">name</a>="result"></output>
1.293 mike 678: <<a href="#the-script-element">script</a>>
1.1 mike 679: <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';
680: </script>
681: </form></pre><p>Each element in the DOM tree is represented by an object, and
682: these objects have APIs so that they can be manipulated. For
683: instance, a link (e.g. the <code><a href="#the-a-element">a</a></code> element in the tree above)
684: can have its "<code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>"
685: attribute changed in several ways:</p><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
686: a.<a href="#dom-a-href" title="dom-a-href">href</a> = 'sample.html'; // change the destination URL of the link
687: a.<a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a> = 'http'; // change just the scheme part of the URL
688: a.setAttribute('href', 'http://example.com/'); // change the content attribute directly</pre><p>Since DOM trees are used as the way to represent HTML documents
689: when they are processed and presented by implementations (especially
690: interactive implementations like Web browsers), this specification
691: is mostly phrased in terms of DOM trees, instead of the markup
692: described above.</p><hr><p>HTML documents represent a media-independent description of
693: interactive content. HTML documents might be rendered to a screen,
694: or through a speech synthesizer, or on a braille display. To
695: influence exactly how such rendering takes place, authors can use a
696: styling language such as CSS.</p><p>In the following example, the page has been made yellow-on-blue
697: using CSS.</p><pre><!DOCTYPE html>
698: <html>
699: <head>
700: <title>Sample styled page</title>
701: <style>
702: body { background: navy; color: yellow; }
703: </style>
704: </head>
705: <body>
706: <h1>Sample styled page</h1>
707: <p>This page is just a demo.</p>
708: </body>
709: </html></pre><p>For more details on how to use HTML, authors are encouraged to
710: consult tutorials and guides. Some of the examples included in this
711: specification might also be of use, but the novice author is
712: cautioned that this specification, by necessity, defines the
713: language with a level of detail that might be difficult to
1.504 mike 714: understand at first.</p><h4 id="writing-secure-applications-with-html"><span class="secno">1.8.1 </span>Writing secure applications with HTML</h4><p><i>This section is non-normative.</i></p><p>When HTML is used to create interactive sites, care needs to be
715: taken to avoid introducing vulnerabilities through which attackers
716: can compromise the integrity of the site itself or of the site's
717: users.</p><p>A comprehensive study of this matter is beyond the scope of this
718: document, and authors are strongly encouraged to study the matter in
719: more detail. However, this section attempts to provide a quick
720: introduction to some common pitfalls in HTML application
721: development.</p><p>The security model of the Web is based on the concept of
722: "origins", and correspondingly many of the potential attacks on the
723: Web involve cross-origin actions. <a href="#refsORIGIN">[ORIGIN]</a></p><dl><dt>Not validating user input</dt>
724: <dt>Cross-site scripting (XSS)</dt>
725: <dt>SQL injection</dt>
726:
727: <dd>
728:
729: <p>When accepting untrusted input, e.g. user-generated content
730: such as text comments, values in URL parameters, messages from
731: third-party sites, etc, it is imperative that the data be
732: validated before use, and properly escaped when displayed. Failing
1.573 mike 733: to do this can allow a hostile user to perform a variety of
1.504 mike 734: attacks, ranging from the potentially benign, such as providing
735: bogus user information like a negative age, to the serious, such
736: as running scripts every time a user looks at a page that includes
737: the information, potentially propagating the attack in the
738: process, to the catastrophic, such as deleting all data in the
739: server.</p>
740:
741: <p>When writing filters to validate user input, it is imperative
742: that filters always be whitelist-based, allowing known-safe
743: constructs and disallowing all other input. Blacklist-based
744: filters that disallow known-bad inputs and allow everything else
745: are not secure, as not everything that is bad is yet known (for
746: example, because it might be invented in the future).</p>
747:
748: <div class="example">
749:
750: <p>For example, suppose a page looked at its URL's query string
751: to determine what to display, and the site then redirected the
752: user to that page to display a message, as in:</p>
753:
754: <pre><ul>
755: <li><a href="message.cgi?say=Hello">Say Hello</a>
756: <li><a href="message.cgi?say=Welcome">Say Welcome</a>
757: <li><a href="message.cgi?say=Kittens">Say Kittens</a>
758: </ul></pre>
759:
760: <p>If the message was just displayed to the user without
761: escaping, a hostile attacker could then craft a URL that
762: contained a script element:</p>
763:
764: <pre>http://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E</pre>
765:
766: <p>If the attacker then convinced a victim user to visit this
767: page, a script of the attacker's choosing would run on the page.
768: Such a script could do any number of hostile actions, limited
769: only by what the site offers: if the site is an e-commerce shop,
770: for instance, such a script could cause the user to unknowingly
771: make arbitrarily many unwanted purchases.</p>
772:
773: <p>This is called a cross-site scripting attack.</p>
774:
775: </div>
776:
777: </dd>
778:
779:
780: <dt>Cross-site request forgery (CSRF)</dt>
781:
782: <dd>
783:
784: <p>If a site allows a user to make form submissions with
785: user-specific side-effects, for example posting messages on a
786: forum under the user's name, making purchases, or applying for a
787: passport, it is important to verify that the request was made by
788: the user intentionally, rather than by another site tricking the
789: user into making the request unknowingly.</p>
790:
791: <p>This problem exists because HTML forms can be submitted to
792: other origins.</p>
793:
794: <p>Sites can prevent such attacks by populating forms with
795: user-specific hidden tokens, or by checking <code title="http-origin">Origin</code> headers on all requests.</p>
796:
797: </dd>
798:
799:
800:
801: <dt>Clickjacking</dt>
802:
803: <dd>
804:
805: <p>A page that provides users with an interface to perform actions
806: that the user might not wish to perform needs to be designed so as
807: to avoid the possibility that users can be tricked into activating
808: the interface.</p>
809:
810: <p>One way that a user could be so tricked is if a hostile site
811: places the victim site in a small <code><a href="#the-iframe-element">iframe</a></code> and then
812: convinces the user to click, for instance by having the user play
813: a reaction game. Once the user is playing the game, the hostile
814: site can quickly position the iframe under the mouse cursor just
815: as the user is about to click, thus tricking the user into
816: clicking the victim site's interface.</p>
817:
818: <p>To avoid this, sites that do not expect to be used in frames
819: are encouraged to only enable their interface if they detect that
820: they are not in a frame (e.g. by comparing the <code title="dom-window"><a href="#dom-window">window</a></code> object to the value of the <code title="dom-top"><a href="#dom-top">top</a></code> attribute).</p>
821:
822: </dd>
823:
1.532 mike 824: </dl><h4 id="common-pitfalls-to-avoid-when-using-the-scripting-apis"><span class="secno">1.8.2 </span>Common pitfalls to avoid when using the scripting APIs</h4><p><i>This section is non-normative.</i></p><p>Scripts in HTML have "run-to-completion" semantics, meaning that
825: the browser will generally run the script uninterrupted before doing
826: anything else, such as firing further events or continuing to parse
827: the document.</p><p>On the other hand, parsing of HTML files happens asynchronously
828: and incrementally, meaning that the parser can pause at any point to
829: let scripts run. This is generally a good thing, but it does mean
830: that authors need to be careful to avoid hooking event handlers
831: after the events could have possibly fired.</p><p>There are two techniques for doing this reliably: use <a href="#event-handler-content-attributes">event
832: handler content attributes</a>, or create the element and add the
833: event handlers in the same script. The latter is safe because, as
834: mentioned earlier, scripts are run to completion before further
835: events can fire.</p><div class="example">
836:
837: <p>One way this could manifest itself is with <code><a href="#the-img-element">img</a></code>
838: elements and the <code title="event-load">load</code> event. The
839: event could fire as soon as the element has been parsed, especially
840: if the image has already been cached (which is common).</p>
841:
842: <p>Here, the author uses the <code title="handler-onload"><a href="#handler-onload">onload</a></code> handler on an <code><a href="#the-img-element">img</a></code>
843: element to catch the <code title="event-load">load</code> event:</p>
844:
845: <pre><img src="games.png" alt="Games" onload="gamesLogoHasLoaded(event)"></pre>
846:
847: <p>If the element is being added by script, then so long as the
848: event handlers are added in the same script, the event will still
849: not be missed:</p>
850:
851: <pre><script>
852: var img = new Image();
853: img.src = 'games.png';
854: img.alt = 'Games';
855: img.onload = gamesLogoHasLoaded;
856: // img.addEventListener('load', gamesLogoHasLoaded, false); // would work also
857: </script></pre>
858:
859: <p>However, if the author first created the <code><a href="#the-img-element">img</a></code>
860: element and then in a separate script added the event listeners,
861: there's a chance that the <code title="event-load">load</code>
862: event would be fired in between, leading it to be missed:</p>
863:
864: <pre class="bad"><!-- Do not use this style, it has a race condition! -->
865: <img id="games" src="games.png" alt="Games">
866: <!-- the 'load' event might fire here while the parser is taking a
867: break, in which case you will not see it! -->
868: <script>
869: var img = document.getElementById('games');
870: img.onload = gamesLogoHasLoaded; // might never fire!
871: </script></pre>
872:
873: </div><h3 id="conformance-requirements-for-authors"><span class="secno">1.9 </span>Conformance requirements for authors</h3><p><i>This section is non-normative.</i></p><p>Unlike previous versions of the HTML specification, this
1.1 mike 874: specification defines in some detail the required processing for
1.251 mike 875: invalid documents as well as valid documents.</p><p>However, even though the processing of invalid content is in most
1.1 mike 876: cases well-defined, conformance requirements for documents are still
877: important: in practice, interoperability (the situation in which all
878: implementations process particular content in a reliable and
879: identical or equivalent way) is not the only goal of document
880: conformance requirements. This section details some of the more
881: common reasons for still distinguishing between a conforming
882: document and one with errors.</p><h4 id="presentational-markup"><span class="secno">1.9.1 </span>Presentational markup</h4><p><i>This section is non-normative.</i></p><p>The majority of presentational features from previous versions of
883: HTML are no longer allowed. Presentational markup in general has
1.274 mike 884: been found to have a number of problems:</p><dl><dt>The use of presentational elements leads to poorer accessibility</dt>
1.1 mike 885:
886: <dd>
887:
888: <p>While it is possible to use presentational markup in a way that
889: provides users of assistive technologies (ATs) with an acceptable
890: experience (e.g. using ARIA), doing so is significantly more
891: difficult than doing so when using semantically-appropriate
892: markup. Furthermore, even using such techniques doesn't help make
893: pages accessible for non-AT non-graphical users, such as users of
894: text-mode browsers.</p>
895:
896: <p>Using media-independent markup, on the other hand, provides an
897: easy way for documents to be authored in such a way that they work
898: for more users (e.g. text browsers).</p>
899:
900: </dd>
901:
902:
1.274 mike 903: <dt>Higher cost of maintenance</dt>
1.1 mike 904:
905: <dd>
906:
907: <p>It is significantly easier to maintain a site written in such a
908: way that the markup is style-independent. For example, changing
909: the color of a site that uses <code><font color=""></code>
910: throughout requires changes across the entire site, whereas a
911: similar change to a site based on CSS can be done by changing a
912: single file.</p>
913:
914: </dd>
915:
916:
1.529 mike 917: <dt>Larger document sizes</dt>
1.1 mike 918:
919: <dd>
920:
921: <p>Presentational markup tends to be much more redundant, and thus
922: results in larger document sizes.</p>
923:
924: </dd>
925:
926: </dl><p>For those reasons, presentational markup has been removed from
927: HTML in this version. This change should not come as a surprise;
928: HTML4 deprecated presentational markup many years ago and provided a
929: mode (HTML4 Transitional) to help authors move away from
930: presentational markup; later, XHTML 1.1 went further and obsoleted
931: those features altogether.</p><p>The only remaining presentational markup features in HTML are the
932: <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute and the
933: <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
934: production environments, but it can be useful for rapid prototyping
935: (where its rules can be directly moved into a separate style sheet
936: later) and for providing specific styles in unusual cases where a
937: separate style sheet would be inconvenient. Similarly, the
938: <code><a href="#the-style-element">style</a></code> element can be useful in syndication or for
939: page-specific styles, but in general an external style sheet is
940: likely to be more convenient when the styles apply to multiple
1.96 mike 941: pages.</p><p>It is also worth noting that some elements that were previously
1.1 mike 942: presentational have been redefined in this specification to be
943: 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>,
1.253 mike 944: <code><a href="#the-s-element">s</a></code>, <code><a href="#the-small-element">small</a></code>, and <code><a href="#the-u-element">u</a></code>.</p><h4 id="syntax-errors"><span class="secno">1.9.2 </span>Syntax errors</h4><p><i>This section is non-normative.</i></p><p>The syntax of HTML is constrained to avoid a wide variety of
1.274 mike 945: problems.</p><dl><dt>Unintuitive error-handling behavior</dt>
1.1 mike 946:
947: <dd>
948:
949: <p>Certain invalid syntax constructs, when parsed, result in DOM
950: trees that are highly unintuitive.</p>
951:
952: <div class="example">
953:
954: <p>For example, the following markup fragment results in a DOM
955: with an <code><a href="#the-hr-element">hr</a></code> element that is an <em>earlier</em>
956: sibling of the corresponding <code><a href="#the-table-element">table</a></code> element:</p>
957:
958: <pre class="bad"><table><hr>...</pre>
959:
960: </div>
961:
962: </dd>
963:
964:
1.274 mike 965: <dt>Errors with optional error recovery</dt>
1.1 mike 966:
967: <dd>
968:
969: <p>To allow user agents to be used in controlled environments
970: without having to implement the more bizarre and convoluted error
971: handling rules, user agents are permitted to fail whenever
972: encountering a <a href="#parse-error">parse error</a>.</p>
973:
974: </dd>
975:
976:
1.274 mike 977: <dt>Errors where the error-handling behavior is not compatible with streaming user agents</dt>
1.1 mike 978:
979: <dd>
980:
981: <p>Some error-handling behavior, such as the behavior for the
982: <code title=""><table><hr>...</code> example mentioned
1.198 mike 983: above, are incompatible with streaming user agents (user agents
984: that process HTML files in one pass, without storing state). To
985: avoid interoperability problems with such user agents, any syntax
1.1 mike 986: resulting in such behavior is considered invalid.</p>
987:
988: </dd>
989:
990:
1.274 mike 991: <dt>Errors that can result in infoset coercion</dt>
1.1 mike 992:
993: <dd>
994:
995: <p>When a user agent based on XML is connected to an HTML parser,
996: it is possible that certain invariants that XML enforces, such as
997: comments never containing two consecutive hyphens, will be
998: violated by an HTML file. Handling this can require that the
999: parser coerce the HTML DOM into an XML-compatible infoset. Most
1000: syntax constructs that require such handling are considered
1001: invalid.</p>
1002:
1003: </dd>
1004:
1005:
1.274 mike 1006: <dt>Errors that result in disproportionally poor performance</dt>
1.1 mike 1007:
1008: <dd>
1009:
1010: <p>Certain syntax constructs can result in disproportionally poor
1011: performance. To discourage the use of such constructs, they are
1012: typically made non-conforming.</p>
1013:
1014: <div class="example">
1015:
1.200 mike 1016: <p>For example, the following markup results in poor performance,
1017: since all the unclosed <code><a href="#the-i-element">i</a></code> elements have to be
1018: reconstructed in each paragraph, resulting in progressively more
1019: elements in each paragraph:</p>
1020:
1021: <pre class="bad"><p><i>He dreamt.
1022: <p><i>He dreamt that he ate breakfast.
1023: <p><i>Then lunch.
1024: <p><i>And finally dinner.</pre>
1.1 mike 1025:
1.200 mike 1026: <p>The resulting DOM for this fragment would be:</p>
1.1 mike 1027:
1.200 mike 1028: <ul class="domTree"><li class="t1"><code><a href="#the-p-element">p</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t3"><code>#text</code>: <span title="">He dreamt.</span></li></ul></li></ul></li><li class="t1"><code><a href="#the-p-element">p</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t3"><code>#text</code>: <span title="">He dreamt that he ate breakfast.</span></li></ul></li></ul></li></ul></li><li class="t1"><code><a href="#the-p-element">p</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t3"><code>#text</code>: <span title="">Then lunch.</span></li></ul></li></ul></li></ul></li></ul></li><li class="t1"><code><a href="#the-p-element">p</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t1"><code><a href="#the-i-element">i</a></code><ul><li class="t3"><code>#text</code>: <span title="">And finally dinner.</span></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div>
1.1 mike 1029:
1030: </dd>
1031:
1032:
1.274 mike 1033: <dt>Errors involving fragile syntax constructs</dt>
1.1 mike 1034:
1035: <dd>
1036:
1037: <p>There are syntax constructs that, for historical reasons, are
1038: relatively fragile. To help reduce the number of users who
1039: accidentally run into such problems, they are made
1040: non-conforming.</p>
1041:
1042: <div class="example">
1043:
1044: <p>For example, the parsing of certain named character references
1045: in attributes happens even with the closing semicolon being
1046: omitted. It is safe to include an ampersand followed by letters
1047: that do not form a named character reference, but if the letters
1048: are changed to a string that <em>does</em> form a named character
1049: reference, they will be interpreted as that character instead.</p>
1050:
1.120 mike 1051: <p>In this fragment, the attribute's value is "<code title="">?bill&ted</code>":</p>
1.1 mike 1052:
1.120 mike 1053: <pre class="bad"><a href="?bill&ted">Bill and Ted</a></pre>
1.1 mike 1054:
1055: <p>In the following fragment, however, the attribute's value is
1.283 mike 1056: actually "<code title="">?art©</code>", <em>not</em> the
1057: intended "<code title="">?art&copy</code>", because even
1058: without the final semicolon, "<code title="">&copy</code>" is
1059: handled the same as "<code title="">&copy;</code>" and thus
1060: gets interpreted as "<code title="">©</code>":</p>
1.1 mike 1061:
1.120 mike 1062: <pre class="bad"><a href="?art&copy">Art and Copy</a></pre>
1.1 mike 1063:
1064: <p>To avoid this problem, all named character references are
1065: required to end with a semicolon, and uses of named character
1066: references without a semicolon are flagged as errors.</p>
1067:
1068: <p>Thus, the correct way to express the above cases is as
1069: follows:</p>
1070:
1.120 mike 1071: <pre><a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference --></pre>
1072: <pre><a href="?art&amp;copy">Art and Copy</a> <!-- the & has to be escaped, since &copy <em>is</em> a named character reference --></pre>
1.1 mike 1073:
1074: </div>
1075:
1076: </dd>
1077:
1078:
1.274 mike 1079: <dt>Errors involving known interoperability problems in legacy user agents</dt>
1.1 mike 1080:
1081: <dd>
1082:
1083: <p>Certain syntax constructs are known to cause especially subtle
1084: or serious problems in legacy user agents, and are therefore
1085: marked as non-conforming to help authors avoid them.</p>
1086:
1087: <div class="example">
1088:
1089: <p>For example, this is why the U+0060 GRAVE ACCENT character (`)
1090: is not allowed in unquoted attributes. In certain legacy user
1.251 mike 1091: agents, it is sometimes treated as a quote
1.1 mike 1092: character.</p>
1093:
1094: </div>
1095:
1096: <div class="example">
1097:
1098: <p>Another example of this is the DOCTYPE, which is required to
1099: trigger <a href="#no-quirks-mode">no-quirks mode</a>, because the behavior of
1100: legacy user agents in <a href="#quirks-mode">quirks mode</a> is often largely
1101: undocumented.</p>
1102:
1103: </div>
1104:
1105: </dd>
1106:
1107:
1.274 mike 1108: <dt>Errors that risk exposing authors to security attacks</dt>
1.1 mike 1109:
1110: <dd>
1111:
1112: <p>Certain restrictions exist purely to avoid known security
1113: problems.</p>
1114:
1115: <div class="example">
1116:
1117: <p>For example, the restriction on using UTF-7 exists purely to
1118: avoid authors falling prey to a known cross-site-scripting attack
1119: using UTF-7.</p>
1120:
1121: </div>
1122:
1123: </dd>
1124:
1125:
1.274 mike 1126: <dt>Cases where the author's intent is unclear</dt>
1.1 mike 1127:
1128: <dd>
1129:
1130: <p>Markup where the author's intent is very unclear is often made
1131: non-conforming. Correcting these errors early makes later
1132: maintenance easier.</p>
1133:
1134: <div class="example">
1135:
1136: <p>For example, it is unclear whether the author intended the
1137: 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>
1138: heading:</p>
1139:
1140: <pre class="bad"><h1>Contact details</h2></pre>
1141:
1142: </div>
1143:
1144: </dd>
1145:
1146:
1.274 mike 1147: <dt>Cases that are likely to be typos</dt>
1.1 mike 1148:
1149: <dd>
1150:
1151: <p>When a user makes a simple typo, it is helpful if the error can
1152: be caught early, as this can save the author a lot of debugging
1153: time. This specification therefore usually considers it an error
1154: to use element names, attribute names, and so forth, that do not
1155: match the names defined in this specification.</p>
1156:
1157: <div class="example">
1158:
1159: <p>For example, if the author typed <code><capton></code>
1160: instead of <code><caption></code>, this would be flagged as an
1161: error and the author could correct the typo immediately.</p>
1162:
1163: </div>
1164:
1165: </dd>
1166:
1167:
1.274 mike 1168: <dt>Errors that could interfere with new syntax in the future</dt>
1.1 mike 1169:
1170: <dd>
1171:
1172: <p>In order to allow the language syntax to be extended in the
1173: future, certain otherwise harmless features are disallowed.</p>
1174:
1175: <div class="example">
1176:
1177: <p>For example, "attributes" in end tags are ignored currently,
1178: but they are invalid, in case a future change to the language
1179: makes use of that syntax feature without conflicting with
1180: already-deployed (and valid!) content.</p>
1181:
1182: </div>
1183:
1184: </dd>
1185:
1186:
1187: </dl><p>Some authors find it helpful to be in the practice of always
1188: quoting all attributes and always including all optional tags,
1189: preferring the consistency derived from such custom over the minor
1190: benefits of terseness afforded by making use of the flexibility of
1191: the HTML syntax. To aid such authors, conformance checkers can
1192: provide modes of operation wherein such conventions are
1193: enforced.</p><h4 id="restrictions-on-content-models-and-on-attribute-values"><span class="secno">1.9.3 </span>Restrictions on content models and on attribute values</h4><p><i>This section is non-normative.</i></p><p>Beyond the syntax of the language, this specification also places
1194: restrictions on how elements and attributes can be specified. These
1.274 mike 1195: restrictions are present for similar reasons:</p><dl><dt>Errors involving content with dubious semantics</dt>
1.1 mike 1196:
1197: <dd>
1198:
1199: <p>To avoid misuse of elements with defined meanings, content
1200: models are defined that restrict how elements can be nested when
1201: such nestings would be of dubious value.</p>
1202:
1203: <p class="example">For example, this specification disallows
1204: nesting a <code><a href="#the-section-element">section</a></code> element inside a <code><a href="#the-kbd-element">kbd</a></code>
1205: element, since it is highly unlikely for an author to indicate
1206: that an entire section should be keyed in.</p>
1207:
1208: </dd>
1209:
1210:
1.274 mike 1211: <dt>Errors that involve a conflict in expressed semantics</dt>
1.1 mike 1212:
1213: <dd>
1214:
1215: <p>Similarly, to draw the author's attention to mistakes in the
1216: use of elements, clear contradictions in the semantics expressed
1217: are also considered conformance errors.</p>
1218:
1219: <div class="example">
1220:
1221: <p>In the fragments below, for example, the semantics are
1.311 mike 1222: nonsensical: a separator cannot simultaneously be a cell, nor can
1223: a radio button be a progress bar.</p>
1.1 mike 1224:
1.311 mike 1225: <pre class="bad"><hr role="cell"></pre>
1.1 mike 1226: <pre class="bad"><input type=radio role=progressbar></pre>
1227:
1228: </div>
1229:
1230: <p class="example">Another example is the restrictions on the
1231: content models of the <code><a href="#the-ul-element">ul</a></code> element, which only allows
1232: <code><a href="#the-li-element">li</a></code> element children. Lists by definition consist just
1233: of zero or more list items, so if a <code><a href="#the-ul-element">ul</a></code> element
1234: contains something other than an <code><a href="#the-li-element">li</a></code> element, it's not
1235: clear what was meant.</p>
1236:
1237: </dd>
1238:
1239:
1.274 mike 1240: <dt>Cases where the default styles are likely to lead to confusion</dt>
1.1 mike 1241:
1242: <dd>
1243:
1244: <p>Certain elements have default styles or behaviors that make
1245: certain combinations likely to lead to confusion. Where these have
1246: equivalent alternatives without this problem, the confusing
1247: combinations are disallowed.</p>
1248:
1249: <p class="example">For example, <code><a href="#the-div-element">div</a></code> elements are
1250: rendered as block boxes, and <code><a href="#the-span-element">span</a></code> elements as inline
1251: boxes. Putting a block box in an inline box is unnecessarily
1252: confusing; since either nesting just <code><a href="#the-div-element">div</a></code> elements, or
1253: nesting just <code><a href="#the-span-element">span</a></code> elements, or nesting
1254: <code><a href="#the-span-element">span</a></code> elements inside <code><a href="#the-div-element">div</a></code> elements all
1255: serve the same purpose as nesting a <code><a href="#the-div-element">div</a></code> element in a
1256: <code><a href="#the-span-element">span</a></code> element, but only the latter involves a block
1257: box in an inline box, the latter combination is disallowed.</p>
1258:
1259: <p class="example">Another example would be the way
1260: <a href="#interactive-content">interactive content</a> cannot be nested. For example, a
1261: <code><a href="#the-button-element">button</a></code> element cannot contain a <code><a href="#the-textarea-element">textarea</a></code>
1262: element. This is because the default behavior of such nesting
1263: interactive elements would be highly confusing to users. Instead
1264: of nesting these elements, they can be placed side by side.</p>
1265:
1266: </dd>
1267:
1268:
1.274 mike 1269: <dt>Errors that indicate a likely misunderstanding of the specification</dt>
1.1 mike 1270:
1271: <dd>
1272:
1273: <p>Sometimes, something is disallowed because allowing it would
1274: likely cause author confusion.</p>
1275:
1276: <p class="example">For example, setting the <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute to the value
1277: "<code title="">false</code>" is disallowed, because despite the
1278: appearance of meaning that the element is enabled, it in fact
1279: means that the element is <em>disabled</em> (what matters for
1280: implementations is the presence of the attribute, not its
1281: value).</p>
1282:
1283: </dd>
1284:
1285:
1.274 mike 1286: <dt>Errors involving limits that have been imposed merely to simplify the language</dt>
1.1 mike 1287:
1288: <dd>
1289:
1290: <p>Some conformance errors simplify the language that authors need
1291: to learn.</p>
1292:
1293: <p class="example">For example, the <code><a href="#the-area-element">area</a></code> element's
1294: <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> attribute, despite
1295: 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
1296: 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
1297: simplify tutorials and other learning aids. There would be no
1298: benefit to allowing both, but it would cause extra confusion when
1299: teaching the language.</p>
1300:
1301: </dd>
1302:
1303:
1.274 mike 1304: <dt>Errors that involve peculiarities of the parser</dt>
1.1 mike 1305:
1306: <dd>
1307:
1308: <p>Certain elements are parsed in somewhat eccentric ways
1309: (typically for historical reasons), and their content model
1310: restrictions are intended to avoid exposing the author to these
1311: issues.</p>
1312:
1313: <div class="example">
1314:
1315: <p>For example, a <code><a href="#the-form-element">form</a></code> element isn't allowed inside
1316: <a href="#phrasing-content">phrasing content</a>, because when parsed as HTML, a
1317: <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>
1318: element's end tag. Thus, the following markup results in two
1319: <a href="#paragraph" title="paragraph">paragraphs</a>, not one:</p>
1320:
1321: <pre><p>Welcome. <form><label>Name:</label> <input></form></pre>
1322:
1323: <p>It is parsed exactly like the following:</p>
1324:
1325: <pre><p>Welcome. </p><form><label>Name:</label> <input></form></pre>
1326:
1327: </div>
1328:
1329: </dd>
1330:
1331:
1.274 mike 1332: <dt>Errors that would likely result in scripts failing in hard-to-debug ways</dt>
1.1 mike 1333:
1334: <dd>
1335:
1336: <p>Some errors are intended to help prevent script problems that
1337: would be hard to debug.</p>
1338:
1339: <p class="example">This is why, for instance, it is non-conforming
1340: to have two <code title="attr-id"><a href="#the-id-attribute">id</a></code> attributes with the
1341: same value. Duplicate IDs lead to the wrong element being
1342: selected, with sometimes disastrous effects whose cause is hard to
1343: determine.</p>
1344:
1345: </dd>
1346:
1347:
1.274 mike 1348: <dt>Errors that waste authoring time</dt>
1.1 mike 1349:
1350: <dd>
1351:
1352: <p>Some constructs are disallowed because historically they have
1353: been the cause of a lot of wasted authoring time, and by
1354: encouraging authors to avoid making them, authors can save time in
1355: future efforts.</p>
1356:
1.293 mike 1357: <p class="example">For example, a <code><a href="#the-script-element">script</a></code> element's
1.1 mike 1358: <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute causes the
1359: element's contents to be ignored. However, this isn't obvious,
1360: especially if the element's contents appear to be executable
1361: script — which can lead to authors spending a lot of time
1362: trying to debug the inline script without realizing that it is not
1363: executing. To reduce this problem, this specification makes it
1.293 mike 1364: non-conforming to have executable script in a <code><a href="#the-script-element">script</a></code>
1.1 mike 1365: element when the <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
1366: attribute is present. This means that authors who are validating
1367: their documents are less likely to waste time with this kind of
1368: mistake.</p>
1369:
1370: </dd>
1371:
1372:
1.274 mike 1373: <dt>Errors that involve areas that affect authors migrating to and from XHTML</dt>
1.1 mike 1374:
1375: <dd>
1376:
1377: <p>Some authors like to write files that can be interpreted as
1378: both XML and HTML with similar results. Though this practice is
1379: discouraged in general due to the myriad of subtle complications
1380: involved (especially when involving scripting, styling, or any
1381: kind of automated serialization), this specification has a few
1382: restrictions intended to at least somewhat mitigate the
1383: difficulties. This makes it easier for authors to use this as a
1384: transitionary step when migrating between HTML and XHTML.</p>
1385:
1386: <p class="example">For example, there are somewhat complicated
1387: rules surrounding the <code title="attr-lang"><a href="#attr-lang">lang</a></code> and
1388: <code title="attr-xml-lang"><a href="#attr-xml-lang">xml:lang</a></code> attributes intended
1389: to keep the two synchronized.</p>
1390:
1391: <p class="example">Another example would be the restrictions on
1392: the values of <code title="">xmlns</code> attributes in the HTML
1393: serialization, which are intended to ensure that elements in
1394: conforming documents end up in the same namespaces whether
1395: processed as HTML or XML.</p>
1396:
1397: </dd>
1398:
1399:
1.274 mike 1400: <dt>Errors that involve areas reserved for future expansion</dt>
1.1 mike 1401:
1402: <dd>
1403:
1404: <p>As with the restrictions on the syntax intended to allow for
1405: new syntax in future revisions of the language, some restrictions
1406: on the content models of elements and values of attributes are
1407: intended to allow for future expansion of the HTML vocabulary.</p>
1408:
1409: <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
1410: with an U+005F LOW LINE character (_) to only specific predefined
1411: values allows new predefined values to be introduced at a future
1412: time without conflicting with author-defined values.</p>
1413:
1414: </dd>
1415:
1416:
1.274 mike 1417: <dt>Errors that indicate a mis-use of other specifications</dt>
1.1 mike 1418:
1419: <dd>
1420:
1421: <p>Certain restrictions are intended to support the restrictions
1422: made by other specifications.</p>
1423:
1424: <p class="example">For example, requiring that attributes that
1425: take media queries use only <em>valid</em> media queries
1426: reinforces the importance of following the conformance rules of
1427: that specification.</p>
1428:
1429: </dd>
1430:
1.40 mike 1431: </dl><h3 id="recommended-reading"><span class="secno">1.10 </span>Recommended reading</h3><p><i>This section is non-normative.</i></p><p>The following documents might be of interest to readers of this
1.274 mike 1432: specification.</p><dl><dt><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite> <a href="#refsCHARMOD">[CHARMOD]</a></dt>
1.1 mike 1433:
1434: <dd><blockquote><p>This Architectural Specification provides
1435: authors of specifications, software developers, and content
1436: developers with a common reference for interoperable text
1437: manipulation on the World Wide Web, building on the Universal
1438: Character Set, defined jointly by the Unicode Standard and ISO/IEC
1439: 10646. Topics addressed include use of the terms 'character',
1440: 'encoding' and 'string', a reference processing model, choice and
1441: identification of character encodings, character escaping, and
1442: string indexing.</p></blockquote></dd>
1443:
1.274 mike 1444: <dt><cite>Unicode Security Considerations</cite> <a href="#refsUTR36">[UTR36]</a></dt>
1.1 mike 1445:
1446: <dd><blockquote><p>Because Unicode contains such a large number of
1447: characters and incorporates the varied writing systems of the
1448: world, incorrect usage can expose programs or systems to possible
1449: security attacks. This is especially important as more and more
1450: products are internationalized. This document describes some of the
1451: security considerations that programmers, system analysts,
1452: standards developers, and users should take into account, and
1453: provides specific recommendations to reduce the risk of
1454: problems.</p></blockquote></dd>
1455:
1.274 mike 1456: <dt><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite> <a href="#refsWCAG">[WCAG]</a></dt>
1.1 mike 1457:
1458: <dd><blockquote><p>Web Content Accessibility Guidelines (WCAG) 2.0
1459: covers a wide range of recommendations for making Web content more
1460: accessible. Following these guidelines will make content accessible
1461: to a wider range of people with disabilities, including blindness
1462: and low vision, deafness and hearing loss, learning disabilities,
1463: cognitive limitations, limited movement, speech disabilities,
1464: photosensitivity and combinations of these. Following these
1465: guidelines will also often make your Web content more usable to
1466: users in general.</p></blockquote></dd>
1467:
1.274 mike 1468: <dt class="impl"><cite>Authoring Tool Accessibility Guidelines (ATAG) 2.0</cite> <a href="#refsATAG">[ATAG]</a></dt>
1.1 mike 1469:
1470: <dd class="impl"><blockquote><p>This specification provides
1471: guidelines for designing Web content authoring tools that are more
1472: accessible for people with disabilities. An authoring tool that
1473: conforms to these guidelines will promote accessibility by
1474: providing an accessible user interface to authors with disabilities
1475: as well as by enabling, supporting, and promoting the production of
1476: accessible Web content by all authors.</p></blockquote></dd>
1477:
1.274 mike 1478: <dt class="impl"><cite>User Agent Accessibility Guidelines (UAAG) 2.0</cite> <a href="#refsUAAG">[UAAG]</a></dt>
1.1 mike 1479:
1480: <dd class="impl"><blockquote><p>This document provides guidelines
1481: for designing user agents that lower barriers to Web accessibility
1482: for people with disabilities. User agents include browsers and
1483: other types of software that retrieve and render Web content. A
1484: user agent that conforms to these guidelines will promote
1485: accessibility through its own user interface and through other
1486: internal facilities, including its ability to communicate with
1487: other technologies (especially assistive
1488: technologies). Furthermore, all users, not just users with
1489: disabilities, should find conforming user agents to be more
1490: usable.</p></blockquote></dd>
1491:
1.274 mike 1492: <dt><cite>Polyglot Markup: HTML-Compatible XHTML Documents</cite> <a href="#refsPOLYGLOT">[POLYGLOT]</a></dt>
1.128 mike 1493:
1.224 mike 1494: <dd><blockquote><p>A document that uses polyglot markup is a document
1.128 mike 1495: that is a stream of bytes that parses into identical document trees
1496: (with the exception of the xmlns attribute on the root element)
1497: when processed as HTML and when processed as XML. Polyglot markup
1498: that meets a well defined set of constraints is interpreted as
1499: compatible, regardless of whether they are processed as HTML or as
1500: XHTML, per the HTML5 specification. Polyglot markup uses a specific
1501: DOCTYPE, namespace declarations, and a specific case —
1502: normally lower case but occasionally camel case — for element
1503: and attribute names. Polyglot markup uses lower case for certain
1504: attribute values. Further constraints include those on empty
1505: elements, named entity references, and the use of scripts and
1506: style.</p></blockquote></dd>
1507:
1.274 mike 1508: <dt><cite>HTML to Platform Accessibility APIs Implementation Guide</cite> <a href="#refsHPAAIG">[HPAAIG]</a></dt>
1.249 mike 1509:
1510: <dd><blockquote><p>This is draft documentation mapping HTML
1511: elements and attributes to accessibility API Roles, States and
1512: Properties on a variety of platforms. It provides recommendations
1513: on deriving the accessible names and descriptions for HTML
1514: elements. It also provides accessible feature implementation
1515: examples.</p></blockquote></dd>
1516:
1.40 mike 1517: </dl><h2 id="infrastructure"><span class="secno">2 </span>Common infrastructure</h2><h3 id="terminology"><span class="secno">2.1 </span>Terminology</h3><p>This specification refers to both HTML and XML attributes and IDL
1.1 mike 1518: attributes, often in the same context. When it is not clear which is
1.318 mike 1519: being referred to, they are referred to as <dfn role="button" tabindex="0" aria-haspopup="true">content
1520: attributes</dfn> for HTML and XML attributes, and <dfn role="button" tabindex="0" aria-haspopup="true">IDL
1.1 mike 1521: attributes</dfn> for those defined on IDL interfaces. Similarly, the
1522: term "properties" is used for both JavaScript object properties and
1.318 mike 1523: CSS properties. When these are ambiguous they are qualified as <dfn role="button" tabindex="0" aria-haspopup="true">object properties</dfn> and <dfn role="button" tabindex="0" aria-haspopup="true">CSS
1.1 mike 1524: properties</dfn> respectively.</p><p>Generally, when the specification states that a feature applies
1525: to <a href="#syntax">the HTML syntax</a> or <a href="#the-xhtml-syntax">the XHTML syntax</a>, it
1526: also includes the other. When a feature specifically only applies to
1527: one of the two languages, it is called out by explicitly stating
1528: that it does not apply to the other format, as in "for HTML,
1.318 mike 1529: ... (this does not apply to XHTML)".</p><p>This specification uses the term <dfn role="button" tabindex="0" aria-haspopup="true">document</dfn> to
1.1 mike 1530: refer to any use of HTML, ranging from short static documents to
1531: long essays or reports with rich multimedia, as well as to
1.318 mike 1532: fully-fledged interactive applications.</p><p>For simplicity, terms such as <dfn role="button" tabindex="0" aria-haspopup="true">shown</dfn>, <dfn role="button" tabindex="0" aria-haspopup="true">displayed</dfn>, and <dfn role="button" tabindex="0" aria-haspopup="true">visible</dfn> might
1.1 mike 1533: sometimes be used when referring to the way a document is rendered
1534: to the user. These terms are not meant to imply a visual medium;
1535: they must be considered to apply to other media in equivalent
1.446 mike 1536: ways.</p><p>The term "transparent black" refers to the color with red, green,
1.318 mike 1537: blue, and alpha channels all set to zero.</p><h4 id="resources"><span class="secno">2.1.1 </span>Resources</h4><p>The specification uses the term <dfn role="button" tabindex="0" aria-haspopup="true">supported</dfn>
1.1 mike 1538: when referring to whether a user agent has an implementation capable
1539: of decoding the semantics of an external resource. A format or type
1540: is said to be <i>supported</i> if the implementation can process an
1541: external resource of that format or type without critical aspects of
1542: the resource being ignored. Whether a specific resource is
1543: <i>supported</i> can depend on what features of the resource's
1544: format are in use.</p><p class="example">For example, a PNG image would be considered to
1545: be in a supported format if its pixel data could be decoded and
1546: rendered, even if, unbeknownst to the implementation, the image also
1547: contained animation data.</p><p class="example">A MPEG4 video file would not be considered to be
1548: in a supported format if the compression format used was not
1549: supported, even if the implementation could determine the dimensions
1550: of the movie from the file's metadata.</p><p>What some specifications, in particular the HTTP and URI
1551: specifications, refer to as a <i>representation</i> is referred to
1.318 mike 1552: in this specification as a <dfn role="button" tabindex="0" aria-haspopup="true">resource</dfn>. <a href="#refsHTTP">[HTTP]</a> <a href="#refsRFC3986">[RFC3986]</a></p><p>The term <dfn id="mime-type" role="button" tabindex="0" aria-haspopup="true">MIME type</dfn> is used to refer to what is
1.1 mike 1553: sometimes called an <i>Internet media type</i> in protocol
1554: literature. The term <i>media type</i> in this specification is used
1555: to refer to the type of media intended for presentation, as used by
1.312 mike 1556: the CSS specifications. <a href="#refsRFC2046">[RFC2046]</a> <a href="#refsMQ">[MQ]</a></p><p>A string is a <dfn id="valid-mime-type" role="button" tabindex="0" aria-haspopup="true">valid MIME type</dfn> if it matches the <code title="">media-type</code> rule defined in section 3.7 "Media Types"
1.1 mike 1557: of RFC 2616. In particular, a <a href="#valid-mime-type">valid MIME type</a> may
1.312 mike 1558: include MIME type parameters. <a href="#refsHTTP">[HTTP]</a></p><p>A string is a <dfn id="valid-mime-type-with-no-parameters" role="button" tabindex="0" aria-haspopup="true">valid MIME type with no parameters</dfn> if it
1.1 mike 1559: matches the <code title="">media-type</code> rule defined in section
1560: 3.7 "Media Types" of RFC 2616, but does not contain any U+003B
1561: SEMICOLON characters (;). In other words, if it consists only of a
1.312 mike 1562: type and subtype, with no MIME Type parameters. <a href="#refsHTTP">[HTTP]</a></p><p>The term <dfn id="html-mime-type" role="button" tabindex="0" aria-haspopup="true">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
1563: <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code>.</p><p>A resource's <dfn id="critical-subresources" role="button" tabindex="0" aria-haspopup="true">critical subresources</dfn> are those that the
1.1 mike 1564: resource needs to have available to be correctly processed. Which
1565: resources are considered critical or not is defined by the
1566: specification that defines the resource's format. For CSS resources,
1567: only <code title="">@import</code> rules introduce <a href="#critical-subresources">critical
1568: subresources</a>; other resources, e.g. fonts or backgrounds, are
1.318 mike 1569: not.</p><p>The term <dfn id="data-protocol" role="button" tabindex="0" aria-haspopup="true"><code title="">data:</code>
1.176 mike 1570: URL</dfn> refers to <a href="#url" title="URL">URLs</a> that use the <code title="">data:</code> scheme. <a href="#refsRFC2397">[RFC2397]</a></p><h4 id="xml"><span class="secno">2.1.2 </span>XML</h4><p id="html-namespace">To ease migration from HTML to XHTML, UAs
1.1 mike 1571: conforming to this specification will place elements in HTML in the
1572: <code>http://www.w3.org/1999/xhtml</code> namespace, at least for
1.312 mike 1573: the purposes of the DOM and CSS. The term "<dfn id="html-elements" role="button" tabindex="0" aria-haspopup="true">HTML
1.1 mike 1574: elements</dfn>", when used in this specification, refers to any
1575: element in that namespace, and thus refers to both HTML and XHTML
1576: elements.</p><p>Except where otherwise stated, all elements defined or mentioned
1.569 mike 1577: in this specification are in the <a href="#html-namespace-0">HTML namespace</a>
1578: ("<code>http://www.w3.org/1999/xhtml</code>"), and all attributes
1579: defined or mentioned in this specification have no namespace.</p><p>The term <dfn id="element-type" role="button" tabindex="0" aria-haspopup="true">element type</dfn> is used to refer to the class of
1580: elements have a given local name and namespace. For example,
1581: <code><a href="#the-button-element">button</a></code> elements are elements with the element type
1582: <code><a href="#the-button-element">button</a></code>, meaning they have the local name "<code title="">button</code>" and (implicitly as defined above) the
1583: <a href="#html-namespace-0">HTML namespace</a>.</p><p>Attribute names are said to be <dfn id="xml-compatible" role="button" tabindex="0" aria-haspopup="true">XML-compatible</dfn> if they
1.1 mike 1584: 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
1585: U+003A COLON characters (:), and their first three characters are
1586: not an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string
1.312 mike 1587: "<code title="">xml</code>". <a href="#refsXML">[XML]</a></p><p>The term <dfn id="xml-mime-type" role="button" tabindex="0" aria-haspopup="true">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>,
1.1 mike 1588: <code title="">application/xml</code>, and any <a href="#mime-type">MIME
1.312 mike 1589: type</a> whose subtype ends with the four characters "<code title="">+xml</code>". <a href="#refsRFC3023">[RFC3023]</a></p><h4 id="dom-trees"><span class="secno">2.1.3 </span>DOM trees</h4><p>The <dfn id="root-element-of-a-document-object" role="button" tabindex="0" aria-haspopup="true">root element of a <code>Document</code> object</dfn> is
1.213 mike 1590: that <code><a href="#document">Document</a></code>'s first element child, if any. If it does
1.312 mike 1591: not have one then the <code><a href="#document">Document</a></code> has no root element.</p><p>The term <dfn id="root-element" role="button" tabindex="0" aria-haspopup="true">root element</dfn>, when not referring to a
1.213 mike 1592: <code><a href="#document">Document</a></code> object's root element, means the furthest
1.1 mike 1593: ancestor element node of whatever node is being discussed, or the
1594: node itself if it has no ancestors. When the node is a part of the
1595: document, then the node's <a href="#root-element">root element</a> is indeed the
1596: document's root element; however, if the node is not currently part
1.213 mike 1597: of the document tree, the root element will be an orphaned node.</p><p>When an element's <a href="#root-element">root element</a> is the <a href="#root-element-of-a-document-object">root
1598: element of a <code>Document</code> object</a>, it is said to be
1.312 mike 1599: <dfn id="in-a-document" role="button" tabindex="0" aria-haspopup="true">in a <code>Document</code></dfn>. An element is said to have
1.318 mike 1600: been <dfn id="insert-an-element-into-a-document" role="button" tabindex="0" aria-haspopup="true">inserted into a
1.1 mike 1601: document</dfn> when its <a href="#root-element">root element</a> changes and is now
1602: the document's <a href="#root-element">root element</a>. Analogously, an element is
1.318 mike 1603: said to have been <dfn id="remove-an-element-from-a-document" role="button" tabindex="0" aria-haspopup="true">removed from a document</dfn> when its <a href="#root-element">root
1.1 mike 1604: element</a> changes from being the document's <a href="#root-element">root
1.312 mike 1605: element</a> to being another element.</p><p>A node's <dfn id="home-subtree" role="button" tabindex="0" aria-haspopup="true">home subtree</dfn> is the subtree rooted at that
1.1 mike 1606: node's <a href="#root-element">root element</a>. When a node is <a href="#in-a-document">in a
1607: <code>Document</code></a>, its <a href="#home-subtree">home subtree</a> is that
1608: <code><a href="#document">Document</a></code>'s tree.</p><p>The <code><a href="#document">Document</a></code> of a <code><a href="#node">Node</a></code> (such as an
1609: element) is the <code><a href="#document">Document</a></code> that the <code><a href="#node">Node</a></code>'s
1610: <code title="dom-Node-ownerDocument"><a href="#dom-node-ownerdocument">ownerDocument</a></code> IDL
1611: attribute returns. When a <code><a href="#node">Node</a></code> is <a href="#in-a-document">in a
1612: <code>Document</code></a> then that <code><a href="#document">Document</a></code> is
1613: always the <code><a href="#node">Node</a></code>'s <code><a href="#document">Document</a></code>, and the
1614: <code><a href="#node">Node</a></code>'s <code title="dom-Node-ownerDocument"><a href="#dom-node-ownerdocument">ownerDocument</a></code> IDL attribute
1.530 mike 1615: thus always returns that <code><a href="#document">Document</a></code>.</p><p>The <code><a href="#document">Document</a></code> of a content attribute is the
1616: <code><a href="#document">Document</a></code> of the attribute's element.</p><p>The term <dfn id="tree-order" role="button" tabindex="0" aria-haspopup="true">tree order</dfn> means a pre-order, depth-first
1.318 mike 1617: 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><p>When it is stated that some element or attribute is <dfn id="ignore" role="button" tabindex="0" aria-haspopup="true">ignored</dfn>, or treated as some other value, or
1.1 mike 1618: handled as if it was something else, this refers only to the
1619: processing of the node after it is in the DOM. <span class="impl">A
1.312 mike 1620: user agent must not mutate the DOM in such situations.</span></p><p>The term <dfn id="text-node" role="button" tabindex="0" aria-haspopup="true">text node</dfn> refers to any <code><a href="#text">Text</a></code>
1.1 mike 1621: node, including <code><a href="#cdatasection">CDATASection</a></code> nodes; specifically, any
1622: <code><a href="#node">Node</a></code> with node type <code title="">TEXT_NODE</code> (3)
1.318 mike 1623: or <code title="">CDATA_SECTION_NODE</code> (4). <a href="#refsDOMCORE">[DOMCORE]</a></p><p>A content attribute is said to <dfn role="button" tabindex="0" aria-haspopup="true">change</dfn> value
1.1 mike 1624: only if its new value is different than its previous value; setting
1.318 mike 1625: an attribute to a value it already has does not change it.</p><p>The term <dfn role="button" tabindex="0" aria-haspopup="true">empty</dfn>, when used of an attribute
1.77 mike 1626: value, text node, or string, means that the length of the text is
1.533 mike 1627: zero (i.e. not even containing spaces or control characters).</p><h4 id="scripting-0"><span class="secno">2.1.4 </span>Scripting</h4><p>The construction "a <code>Foo</code> object", where
1.1 mike 1628: <code>Foo</code> is actually an interface, is sometimes used instead
1629: of the more accurate "an object implementing the interface
1.318 mike 1630: <code>Foo</code>".</p><p>An IDL attribute is said to be <dfn role="button" tabindex="0" aria-haspopup="true">getting</dfn> when
1.1 mike 1631: its value is being retrieved (e.g. by author script), and is said to
1.318 mike 1632: be <dfn role="button" tabindex="0" aria-haspopup="true">setting</dfn> when a new value is assigned to
1.312 mike 1633: it.</p><p>If a DOM object is said to be <dfn id="live" role="button" tabindex="0" aria-haspopup="true">live</dfn>, then the
1.1 mike 1634: attributes and methods on that object <span class="impl">must</span>
1635: operate on the actual underlying data, not a snapshot of the
1.474 mike 1636: data.</p><p>In the contexts of events, the terms <dfn role="button" tabindex="0" aria-haspopup="true">fire</dfn> and
1.622 mike 1637: <dfn id="concept-event-dispatch" role="button" tabindex="0" aria-haspopup="true">dispatch</dfn> are used as
1638: defined in the DOM Core specification: firing an event means to
1639: create and dispatch it, and dispatching an event means to follow the
1640: steps that propagate the event through the tree. The term <dfn id="concept-events-trusted" role="button" tabindex="0" aria-haspopup="true">trusted event</dfn> is used to refer
1.474 mike 1641: to events that have the <span>trusted flag</span> set. <a href="#refsDOMCORE">[DOMCORE]</a></p><h4 id="plugins"><span class="secno">2.1.5 </span>Plugins</h4><p>The term <dfn id="plugin" role="button" tabindex="0" aria-haspopup="true">plugin</dfn> refers to a user-agent defined set of
1.1 mike 1642: content handlers used by the user agent that can take part in the
1643: user agent's rendering of a <code><a href="#document">Document</a></code> object, but that
1644: neither act as <a href="#child-browsing-context" title="child browsing context">child browsing
1645: contexts</a> of the <code><a href="#document">Document</a></code> nor introduce any
1646: <code><a href="#node">Node</a></code> objects to the <code><a href="#document">Document</a></code>'s DOM.</p><p>Typically such content handlers are provided by third parties,
1647: though a user agent can also designate built-in content handlers as
1.446 mike 1648: plugins.</p><p class="example">One example of a plugin would be a PDF viewer
1.1 mike 1649: that is instantiated in a <a href="#browsing-context">browsing context</a> when the
1650: user navigates to a PDF file. This would count as a plugin
1651: regardless of whether the party that implemented the PDF viewer
1652: component was the same as that which implemented the user agent
1653: itself. However, a PDF viewer application that launches separate
1654: from the user agent (as opposed to using the same interface) is not
1655: a plugin by this definition.</p><p class="note">This specification does not define a mechanism for
1656: interacting with plugins, as it is expected to be user-agent- and
1657: platform-specific. Some UAs might opt to support a plugin mechanism
1658: such as the Netscape Plugin API; others might use remote content
1.214 mike 1659: converters or have built-in support for certain types. Indeed, this
1660: specification doesn't require user agents to support plugins at all.
1.599 mike 1661: <a href="#refsNPAPI">[NPAPI]</a></p><p>A plugin can be <dfn id="concept-plugin-secure" role="button" tabindex="0" aria-haspopup="true">secured</dfn>
1662: if it honors the semantics of the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute.</p><p class="example">For example, a secured plugin would prevent its
1663: contents from creating pop-up windows when the plugin is
1664: instantiated inside a sandboxed <code><a href="#the-iframe-element">iframe</a></code>.</p><h4 id="character-encodings"><span class="secno">2.1.6 </span>Character encodings</h4><p>The <dfn id="preferred-mime-name" role="button" tabindex="0" aria-haspopup="true">preferred MIME name</dfn> of a character encoding is the
1.1 mike 1665: name or alias labeled as "preferred MIME name" in the IANA
1666: <cite>Character Sets</cite> registry, if there is one, or the
1.312 mike 1667: encoding's name, if none of the aliases are so labeled. <a href="#refsIANACHARSET">[IANACHARSET]</a></p><p>An <dfn id="ascii-compatible-character-encoding" role="button" tabindex="0" aria-haspopup="true">ASCII-compatible character encoding</dfn> is a
1.1 mike 1668: single-byte or variable-length encoding in which the bytes 0x09,
1669: 0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A,
1.251 mike 1670: and 0x61 - 0x7A, ignoring bytes that
1.1 mike 1671: are the second and later bytes of multibyte sequences, all
1672: correspond to single-byte sequences that map to the same Unicode
1673: characters as those bytes in ANSI_X3.4-1968 (US-ASCII). <a href="#refsRFC1345">[RFC1345]</a></p><p class="note">This includes such encodings as Shift_JIS,
1674: HZ-GB-2312, and variants of ISO-2022, even though it is possible in
1675: these encodings for bytes like 0x70 to be part of longer sequences
1676: that are unrelated to their interpretation as ASCII. It excludes
1.561 mike 1677: such encodings as UTF-7, UTF-16, GSM03.38, and EBCDIC variants.</p><p>The term <dfn id="a-utf-16-encoding" role="button" tabindex="0" aria-haspopup="true">a UTF-16 encoding</dfn> refers to any variant of
1678: UTF-16: self-describing UTF-16 with a BOM, ambiguous UTF-16 without
1679: a BOM, raw UTF-16LE, and raw UTF-16BE. <a href="#refsRFC2781">[RFC2781]</a></p><p>The term <dfn id="unicode-character" role="button" tabindex="0" aria-haspopup="true">Unicode character</dfn> is used to mean a <i title="">Unicode scalar value</i> (i.e. any Unicode code point that
1.474 mike 1680: is not a surrogate code point). <a href="#refsUNICODE">[UNICODE]</a></p><h3 id="conformance-requirements"><span class="secno">2.2 </span>Conformance requirements</h3><p>All diagrams, examples, and notes in this specification are
1.1 mike 1681: non-normative, as are all sections explicitly marked non-normative.
1.252 mike 1682: Everything else in this specification is normative.</p><p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
1.1 mike 1683: "OPTIONAL" in the normative parts of this document are to be
1684: interpreted as described in RFC2119. For readability, these words do
1.446 mike 1685: not appear in all uppercase letters in this specification. <a href="#refsRFC2119">[RFC2119]</a></p><h4 id="extensibility"><span class="secno">2.2.3 </span>Extensibility</h4><p>HTML has a wide number of extensibility mechanisms that can be
1.1 mike 1686: used for adding semantics in a safe manner:</p><ul><li>Authors can use the <code title="attr-class"><a href="#classes">class</a></code>
1687: attribute to extend elements, effectively creating their own
1688: elements, while using the most applicable existing "real" HTML
1689: element, so that browsers and other tools that don't know of the
1690: extension can still support it somewhat well. This is the tack used
1691: by Microformats, for example.</li>
1692:
1693: <li>Authors can include data for inline client-side scripts or
1694: server-side site-wide scripts to process using the <code title="attr-data-*"><a href="#attr-data">data-*=""</a></code> attributes. These are
1695: guaranteed to never be touched by browsers, and allow scripts to
1696: include data on HTML elements that scripts can then look for and
1697: process.</li>
1698:
1.293 mike 1699: <li>Authors can use the <code title="meta"><a href="#the-meta-element"><meta name=""
1.1 mike 1700: content=""></a></code> mechanism to include page-wide metadata by
1701: registering <a href="#concept-meta-extensions" title="concept-meta-extensions">extensions to the
1702: predefined set of metadata names</a>.</li>
1703:
1704: <li>Authors can use the <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel=""</a></code> mechanism to annotate
1.221 mike 1705: links with specific meanings by registering <a href="#concept-rel-extensions" title="concept-rel-extensions">extensions to the predefined set of
1706: link types</a>. This is also used by Microformats.</li>
1.1 mike 1707:
1.293 mike 1708: <li>Authors can embed raw data using the <code title="script"><a href="#the-script-element"><script type=""></a></code> mechanism with a custom
1.81 mike 1709: type, for further handling by inline or server-side scripts.</li>
1.1 mike 1710:
1711: <li>Authors can create <a href="#plugin" title="plugin">plugins</a> and
1712: invoke them using the <code><a href="#the-embed-element">embed</a></code> element. This is how Flash
1713: works.</li>
1714:
1715: <li>Authors can extend APIs using the JavaScript prototyping
1716: mechanism. This is widely used by script libraries, for
1717: instance.</li>
1718:
1719:
1.438 mike 1720: </ul>
1721: <p>When adding new <a href="#reflect" title="reflect">reflecting</a> IDL
1.96 mike 1722: attributes corresponding to content attributes of the form "<code title="">x-<var title="">vendor</var>-<var title="">feature</var></code>", the IDL attribute should be named
1723: "<code title=""><var title="">vendor</var><var title="">Feature</var></code>" (i.e. the "<code title="">x</code>"
1724: is dropped from the IDL attribute's name).</p>
1.438 mike 1725: <h3 id="case-sensitivity-and-string-comparison"><span class="secno">2.3 </span>Case-sensitivity and string comparison</h3><p>Comparing two strings in a <dfn id="case-sensitive" role="button" tabindex="0" aria-haspopup="true">case-sensitive</dfn> manner means
1.312 mike 1726: comparing them exactly, code point for code point.</p><p>Comparing two strings in an <dfn id="ascii-case-insensitive" role="button" tabindex="0" aria-haspopup="true">ASCII case-insensitive</dfn>
1.1 mike 1727: manner means comparing them exactly, code point for code point, except
1728: that the characters in the range U+0041 to U+005A (i.e. LATIN
1729: CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding
1730: characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A
1.312 mike 1731: to LATIN SMALL LETTER Z) are considered to also match.</p><p>Comparing two strings in a <dfn id="compatibility-caseless" role="button" tabindex="0" aria-haspopup="true">compatibility caseless</dfn>
1.1 mike 1732: manner means using the Unicode <i>compatibility caseless match</i>
1733: operation to compare the two strings. <a href="#refsUNICODE">[UNICODE]</a></p><p>Except where otherwise stated, string comparisons must be
1.446 mike 1734: performed in a <a href="#case-sensitive">case-sensitive</a> manner.</p><p>A string <var title="">pattern</var> is a <dfn id="prefix-match" role="button" tabindex="0" aria-haspopup="true">prefix match</dfn>
1.1 mike 1735: for a string <var title="">s</var> when <var title="">pattern</var>
1736: is not longer than <var title="">s</var> and truncating <var title="">s</var> to <var title="">pattern</var>'s length leaves the
1.446 mike 1737: two strings as matches of each other.</p><h3 id="common-microsyntaxes"><span class="secno">2.5 </span>Common microsyntaxes</h3><p>There are various places in HTML that accept particular data
1.1 mike 1738: types, such as dates or numbers. This section describes what the
1739: conformance criteria for content in those formats is, and how to
1.552 mike 1740: parse them.</p><div><h4 id="common-parser-idioms"><span class="secno">2.5.1 </span>Common parser idioms</h4></div><p>The <dfn id="space-character" role="button" tabindex="0" aria-haspopup="true">space characters</dfn>, for the
1.476 mike 1741: purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER
1742: TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and
1.552 mike 1743: U+000D CARRIAGE RETURN (CR).</p><p>The <dfn id="white_space" role="button" tabindex="0" aria-haspopup="true">White_Space characters</dfn> are
1.476 mike 1744: those that have the Unicode property "White_Space" in the Unicode
1745: <code title="">PropList.txt</code> data file. <a href="#refsUNICODE">[UNICODE]</a></p><p class="note">This should not be confused with the "White_Space"
1.552 mike 1746: value (abbreviated "WS") of the "Bidi_Class" property in the <code title="">Unicode.txt</code> data file.</p><h4 id="boolean-attributes"><span class="secno">2.5.2 </span>Boolean attributes</h4><p>A number of attributes are <dfn id="boolean-attribute" role="button" tabindex="0" aria-haspopup="true">boolean
1.545 mike 1747: attributes</dfn>. The presence of a boolean attribute on an element
1748: represents the true value, and the absence of the attribute
1749: represents the false value.</p><p>If the attribute is present, its value must either be the empty
1750: string or a value that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a>
1751: match for the attribute's canonical name, with no leading or
1752: trailing whitespace.</p><p class="note">The values "true" and "false" are not allowed on
1.1 mike 1753: boolean attributes. To represent a false value, the attribute has to
1.545 mike 1754: be omitted altogether.</p><div class="example">
1755:
1756: <p>Here is an example of a checkbox that is checked and disabled.
1757: The <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code> and <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attributes are the
1758: boolean attributes.</p>
1759:
1760: <pre><label><input type=checkbox checked name=cheese disabled> Cheese</label></pre>
1761:
1762: <p>This could be equivalently written as this:
1763:
1764: </p><pre><label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label></pre>
1765:
1766: <p>You can also mix styles; the following is still equivalent:</p>
1767:
1768: <pre><label><input type='checkbox' checked name=cheese disabled=""> Cheese</label></pre>
1769:
1770: </div><h4 id="keywords-and-enumerated-attributes"><span class="secno">2.5.3 </span>Keywords and enumerated attributes</h4><p>Some attributes are defined as taking one of a finite set of
1771: keywords. Such attributes are called <dfn id="enumerated-attribute" role="button" tabindex="0" aria-haspopup="true">enumerated attributes</dfn>. The keywords are each
1772: defined to map to a particular <em>state</em> (several keywords
1773: might map to the same state, in which case some of the keywords are
1774: synonyms of each other; additionally, some of the keywords can be
1775: said to be non-conforming, and are only in the specification for
1776: historical reasons). In addition, two default states can be
1777: given. The first is the <i>invalid value default</i>, the second
1778: is the <i>missing value default</i>.</p><p>If an enumerated attribute is specified, the attribute's value
1779: must be an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for one of the
1780: given keywords that are not said to be non-conforming, with no
1781: leading or trailing whitespace.</p><p>When the attribute is specified, if its value is an <a href="#ascii-case-insensitive">ASCII
1782: case-insensitive</a> match for one of the given keywords then
1783: that keyword's state is the state that the attribute represents. If
1784: the attribute value matches none of the given keywords, but the
1785: attribute has an <i>invalid value default</i>, then the attribute
1786: represents that state. Otherwise, if the attribute value matches
1787: none of the keywords but there is a <i>missing value default</i>
1788: state defined, then <em>that</em> is the state represented by the
1789: attribute. Otherwise, there is no default, and invalid values must
1790: be ignored.</p><p>When the attribute is <em>not</em> specified, if there is a
1791: <i>missing value default</i> state defined, then that is the state
1792: represented by the (missing) attribute. Otherwise, the absence of
1793: the attribute means that there is no state represented.</p><p class="note">The empty string can be a valid keyword.</p><h4 id="numbers"><span class="secno">2.5.4 </span>Numbers</h4><h5 id="non-negative-integers"><span class="secno">2.5.4.1 </span>Non-negative integers</h5><p>A string is a <dfn id="valid-non-negative-integer" role="button" tabindex="0" aria-haspopup="true">valid non-negative integer</dfn> if it
1794: consists of one or more characters in the range U+0030 DIGIT ZERO
1795: (0) to U+0039 DIGIT NINE (9).</p><p>A <a href="#valid-non-negative-integer">valid non-negative integer</a> represents the number
1796: that is represented in base ten by that string of digits.</p><h5 id="signed-integers"><span class="secno">2.5.4.2 </span>Signed integers</h5><p>A string is a <dfn id="valid-integer" role="button" tabindex="0" aria-haspopup="true">valid integer</dfn> if it consists of one or
1797: more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
1798: NINE (9), optionally prefixed with a U+002D HYPHEN-MINUS character
1799: (-).</p><p>A <a href="#valid-integer">valid integer</a> without a U+002D HYPHEN-MINUS (-)
1800: prefix represents the number that is represented in base ten by that
1801: string of digits. A <a href="#valid-integer">valid integer</a> <em>with</em> a
1802: U+002D HYPHEN-MINUS (-) prefix represents the number represented in
1803: base ten by the string of digits that follows the U+002D
1804: HYPHEN-MINUS, subtracted from zero.</p><h5 id="floating-point-numbers"><span class="secno">2.5.4.3 </span>Floating-point numbers</h5><p>A string is a <dfn id="valid-floating-point-number" role="button" tabindex="0" aria-haspopup="true">valid floating point number</dfn> if it
1805: consists of:</p><ol class="brief"><li>Optionally, a U+002D HYPHEN-MINUS character (-).</li>
1806:
1.626 mike 1807: <li>One or both of the following, in the given order:
1.545 mike 1808:
1.626 mike 1809: <ol><li>A series of one or more characters in the range U+0030 DIGIT
1810: ZERO (0) to U+0039 DIGIT NINE (9).</li>
1811:
1812: <li>
1813:
1814: <ol><li>A single U+002E FULL STOP character (.).</li>
1.545 mike 1815:
1.626 mike 1816: <li>A series of one or more characters in the range U+0030 DIGIT
1817: ZERO (0) to U+0039 DIGIT NINE (9).</li>
1.545 mike 1818:
1.626 mike 1819: </ol></li>
1.545 mike 1820:
1821: </ol></li>
1822:
1823: <li>Optionally:
1824:
1825: <ol><li>Either a U+0065 LATIN SMALL LETTER E character (e) or a
1826: U+0045 LATIN CAPITAL LETTER E character (E).</li>
1827:
1828: <li>Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B
1829: PLUS SIGN character (+).</li>
1830:
1831: <li>A series of one or more characters in the range U+0030 DIGIT
1832: ZERO (0) to U+0039 DIGIT NINE (9).</li>
1833:
1834: </ol></li>
1835:
1836: </ol><p>A <a href="#valid-floating-point-number">valid floating point number</a> represents the number
1837: obtained by multiplying the significand by ten raised to the power
1838: of the exponent, where the significand is the first number,
1839: interpreted as base ten (including the decimal point and the number
1840: after the decimal point, if any, and interpreting the significand as
1841: a negative number if the whole string starts with a U+002D
1842: HYPHEN-MINUS character (-) and the number is not zero), and where
1843: the exponent is the number after the E, if any (interpreted as a
1844: negative number if there is a U+002D HYPHEN-MINUS character (-)
1845: between the E and the number and the number is not zero, or else
1846: ignoring a U+002B PLUS SIGN character (+) between the E and the
1847: number if there is one). If there is no E, then the exponent is
1848: treated as zero.</p><p class="note">The Infinity and Not-a-Number (NaN) values are not
1.1 mike 1849: <a href="#valid-floating-point-number" title="valid floating point number">valid floating point
1.545 mike 1850: numbers</a>.</p><h5 id="lists-of-integers"><span class="secno">2.5.4.5 </span>Lists of integers</h5><p>A <dfn id="valid-list-of-integers" role="button" tabindex="0" aria-haspopup="true">valid list of integers</dfn> is a number of <a href="#valid-integer" title="valid integer">valid integers</a> separated by U+002C
1851: COMMA characters, with no other characters (e.g. no <a href="#space-character" title="space character">space characters</a>). In addition, there
1852: might be restrictions on the number of integers that can be given,
1853: or on the range of values allowed.</p><h4 id="dates-and-times"><span class="secno">2.5.5 </span>Dates and times</h4><p>In the algorithms below, the <dfn id="number-of-days-in-month-month-of-year-year" role="button" tabindex="0" aria-haspopup="true">number of days in month <var title="">month</var> of year <var title="">year</var></dfn> is:
1854: <em>31</em> if <var title="">month</var> is 1, 3, 5, 7, 8, 10, or
1855: 12; <em>30</em> if <var title="">month</var> is 4, 6, 9, or 11;
1856: <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
1857: <em>28</em> otherwise. This takes into account leap years in the
1858: Gregorian calendar. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>The <dfn id="concept-datetime-digit" role="button" tabindex="0" aria-haspopup="true">digits</dfn> in the date
1859: and time syntaxes defined in this section must be characters in the
1860: range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), used to
1861: express numbers in base ten.</p><h5 id="months"><span class="secno">2.5.5.1 </span>Months</h5><p>A <dfn id="concept-month" role="button" tabindex="0" aria-haspopup="true">month</dfn> consists of a specific
1862: proleptic Gregorian date with no time-zone information and no date
1863: information beyond a year and a month. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-month-string" role="button" tabindex="0" aria-haspopup="true">valid month string</dfn> representing a year
1864: <var title="">year</var> and month <var title="">month</var> if it
1865: consists of the following components in the given order:</p><ol><li>Four or more <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>, representing <var title="">year</var>, where <var title="">year</var> > 0</li>
1866:
1867: <li>A U+002D HYPHEN-MINUS character (-)</li>
1868:
1869: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1870: representing the month <var title="">month</var>, in the range
1871: 1 ≤ <var title="">month</var> ≤ 12</li>
1872:
1873: </ol><h5 id="dates"><span class="secno">2.5.5.2 </span>Dates</h5><p>A <dfn id="concept-date" role="button" tabindex="0" aria-haspopup="true">date</dfn> consists of a specific
1874: proleptic Gregorian date with no time-zone information, consisting
1875: of a year, a month, and a day. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-date-string" role="button" tabindex="0" aria-haspopup="true">valid date string</dfn> representing a year
1876: <var title="">year</var>, month <var title="">month</var>, and day
1877: <var title="">day</var> if it consists of the following components
1878: in the given order:</p><ol><li>A <a href="#valid-month-string">valid month string</a>, representing <var title="">year</var> and <var title="">month</var></li>
1879:
1880: <li>A U+002D HYPHEN-MINUS character (-)</li>
1881:
1882: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1883: representing <var title="">day</var>, in the range
1884: 1 ≤ <var title="">day</var> ≤ <var title="">maxday</var> where <var title="">maxday</var> is the <a href="#number-of-days-in-month-month-of-year-year" title="number of days in month month of year year">number of days
1885: in the month <var title="">month</var> and year <var title="">year</var></a></li>
1886:
1887: </ol><h5 id="times"><span class="secno">2.5.5.3 </span>Times</h5><p>A <dfn id="concept-time" role="button" tabindex="0" aria-haspopup="true">time</dfn> consists of a specific
1888: time with no time-zone information, consisting of an hour, a minute,
1889: a second, and a fraction of a second.</p><p>A string is a <dfn id="valid-time-string" role="button" tabindex="0" aria-haspopup="true">valid time string</dfn> representing an hour
1890: <var title="">hour</var>, a minute <var title="">minute</var>, and a
1891: second <var title="">second</var> if it consists of the following
1892: components in the given order:</p><ol><li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1893: representing <var title="">hour</var>, in the range
1894: 0 ≤ <var title="">hour</var> ≤ 23</li>
1895:
1896: <li>A U+003A COLON character (:)</li>
1897:
1898: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1899: representing <var title="">minute</var>, in the range
1900: 0 ≤ <var title="">minute</var> ≤ 59</li>
1901:
1902: <li>Optionally (required if <var title="">second</var> is
1903: non-zero):
1904:
1905: <ol><li>A U+003A COLON character (:)</li>
1906:
1907: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1908: representing the integer part of <var title="">second</var>, in
1909: the range 0 ≤ <var title="">s</var> ≤ 59</li>
1910:
1911: <li>Optionally (required if <var title="">second</var> is not an
1912: integer):
1913:
1914: <ol><li>A 002E FULL STOP character (.)</li>
1915:
1916: <li>One or more <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>, representing the
1917: fractional part of <var title="">second</var></li>
1918:
1919: </ol></li>
1920:
1921: </ol></li>
1922:
1923: </ol><p class="note">The <var title="">second</var> component cannot be
1924: 60 or 61; leap seconds cannot be represented.</p><h5 id="local-dates-and-times"><span class="secno">2.5.5.4 </span>Local dates and times</h5><p>A <dfn id="concept-datetime-local" role="button" tabindex="0" aria-haspopup="true">local date and time</dfn>
1925: consists of a specific proleptic Gregorian date, consisting of a
1926: year, a month, and a day, and a time, consisting of an hour, a
1927: minute, a second, and a fraction of a second, but expressed without
1928: a time zone. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-local-date-and-time-string" role="button" tabindex="0" aria-haspopup="true">valid local date and time string</dfn>
1929: representing a date and time if it consists of the following
1930: components in the given order:</p><ol><li>A <a href="#valid-date-string">valid date string</a> representing the date.</li>
1931:
1932: <li>A U+0054 LATIN CAPITAL LETTER T character (T).</li>
1933:
1934: <li>A <a href="#valid-time-string">valid time string</a> representing the time.</li>
1935:
1936: </ol><h5 id="global-dates-and-times"><span class="secno">2.5.5.5 </span>Global dates and times</h5><p>A <dfn id="concept-datetime" role="button" tabindex="0" aria-haspopup="true">global date and time</dfn>
1937: consists of a specific proleptic Gregorian date, consisting of a
1938: year, a month, and a day, and a time, consisting of an hour, a
1939: minute, a second, and a fraction of a second, expressed with a
1940: time-zone offset, consisting of a signed number of hours and
1941: minutes. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-global-date-and-time-string" role="button" tabindex="0" aria-haspopup="true">valid global date and time string</dfn>
1942: representing a date, time, and a time-zone offset if it consists of
1943: the following components in the given order:</p><ol><li>A <a href="#valid-date-string">valid date string</a> representing the date</li>
1944:
1945: <li>A U+0054 LATIN CAPITAL LETTER T character (T)</li>
1946:
1947: <li>A <a href="#valid-time-string">valid time string</a> representing the time</li>
1948:
1949: <li>Either:
1950:
1951: <ul><li>A U+005A LATIN CAPITAL LETTER Z character (Z), allowed only
1952: if the time zone is UTC</li>
1953:
1954: <li>Or:
1955:
1956: <ol><li>Either a U+002B PLUS SIGN character (+) or, if the
1957: time-zone offset is not zero, a U+002D HYPHEN-MINUS character
1958: (-), representing the sign of the time-zone offset</li>
1959:
1960: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1961: representing the hours component <var title="">hour</var> of
1962: the time-zone offset, in the range 0 ≤ <var title="">hour</var> ≤ 23</li>
1963:
1964: <li>A U+003A COLON character (:)</li>
1965:
1966: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
1967: representing the minutes component <var title="">minute</var>
1968: of the time-zone offset, in the range 0 ≤ <var title="">minute</var> ≤ 59</li>
1969:
1970: </ol></li>
1971:
1972: </ul></li>
1973:
1974: </ol><p class="note">This format allows for time-zone offsets from -23:59
1.1 mike 1975: to +23:59. In practice, however, the range of offsets of actual time
1976: zones is -12:00 to +14:00, and the minutes component of offsets of
1.545 mike 1977: actual time zones is always either 00, 30, or 45.</p><p>Times in dates before the formation of UTC in the mid twentieth
1978: century must be expressed and interpreted in terms of UT1
1979: (contemporary Earth solar time at the 0° longitude), not UTC
1980: (the approximation of UT1 that ticks in SI seconds). Time before the
1981: formation of time zones must be expressed and interpeted as UT1
1982: times with explicit time zones that approximate the contemporary
1983: difference between the appropriate local time and the time observed
1984: at the location of Greenwich, London.</p><div class="example">
1985:
1986: <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
1987: time strings</a>.</p>
1988:
1989: <dl><dt>"<code>0037-12-13T00:00Z</code>"</dt>
1990:
1991: <dd>Midnight in areas using London time on the birthday of Nero
1992: (the Roman Emperor). See below for further discussion on which
1993: date this actually corresponds to.</dd>
1994:
1995: <dt>"<code>1979-10-14T12:00:00.001-04:00</code>"</dt>
1996:
1997: <dd>One millisecond after noon on October 14th 1979, in the time
1998: zone in use on the east coast of the USA during daylight saving
1999: time.</dd>
2000:
2001: <dt>"<code>8592-01-01T02:09+02:09</code>"</dt>
2002:
2003: <dd>Midnight UTC on the 1st of January, 8592. The time zone
2004: associated with that time is two hours and nine minutes ahead of
2005: UTC, which is not currently a real time zone, but is nonetheless
2006: allowed.</dd>
2007:
2008: </dl><p>Several things are notable about these dates:</p>
2009:
2010: <ul><li>Years with fewer than four digits have to be
2011: zero-padded. The date "37-12-13" would not be a valid date.</li>
2012:
2013: <li>To unambiguously identify a moment in time prior to the
2014: introduction of the Gregorian calendar (insofar as moments in time
2015: before the formation of UTC can be unambiguously identified), the
2016: date has to be first converted to the Gregorian calendar from the
2017: calendar in use at the time (e.g. from the Julian calendar). The
2018: date of Nero's birth is the 15th of December 37, in the Julian
2019: Calendar, which is the 13th of December 37 in the proleptic
2020: Gregorian Calendar.</li>
2021: <li>The time and time-zone offset components are not optional.</li>
2022:
2023: <li>Dates before the year one can't be represented as a datetime
2024: in this version of HTML.</li>
2025:
2026: <li>Times of specific events in ancient times are, at best,
2027: approximations, since time was not well coordinated or measured
2028: until relatively recent decades.</li>
2029:
2030: <li>Time-zone offsets differ based on daylight savings time.</li>
2031:
2032: </ul></div><p>A string is a <dfn id="valid-forced-utc-global-date-and-time-string" role="button" tabindex="0" aria-haspopup="true">valid forced-UTC global date and time
2033: string</dfn> representing a date, time, and a time-zone offset if it
2034: consists of the following components in the given order:</p><ol><li>A <a href="#valid-date-string">valid date string</a> representing the date converted to the UTC time zone</li>
2035:
2036: <li>A U+0054 LATIN CAPITAL LETTER T character (T)</li>
2037:
2038: <li>A <a href="#valid-time-string">valid time string</a> representing the time converted to the UTC time zone and expressed as the shortest possible string for the given time (e.g. omitting the seconds component entirely if the given time is zero seconds past the minute)</li>
2039:
2040: <li>A U+005A LATIN CAPITAL LETTER Z character (Z)</li>
2041:
2042: </ol><h5 id="weeks"><span class="secno">2.5.5.6 </span>Weeks</h5><p>A <dfn id="concept-week" role="button" tabindex="0" aria-haspopup="true">week</dfn> consists of a week-year
2043: number and a week number representing a seven-day period starting on
2044: a Monday. Each week-year in this calendaring system has either 52 or
2045: 53 such seven-day periods, as defined below. The seven-day period
2046: starting on the Gregorian date Monday December 29th 1969
2047: (1969-12-29) is defined as week number 1 in week-year
2048: 1970. Consecutive weeks are numbered sequentially. The week before
2049: the number 1 week in a week-year is the last week in the previous
2050: week-year, and vice versa. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>A week-year with a number <var title="">year</var> has 53 weeks
2051: if it corresponds to either a year <var title="">year</var> in the
2052: proleptic Gregorian calendar that has a Thursday as its first day
2053: (January 1st), or a year <var title="">year</var> in the proleptic
2054: Gregorian calendar that has a Wednesday as its first day (January
2055: 1st) and where <var title="">year</var> is a number divisible by
2056: 400, or a number divisible by 4 but not by 100. All other week-years
2057: have 52 weeks.</p><p>The <dfn id="week-number-of-the-last-day" role="button" tabindex="0" aria-haspopup="true">week number of the last day</dfn> of a week-year with 53
2058: weeks is 53; the week number of the last day of a week-year with 52
2059: weeks is 52.</p><p class="note">The week-year number of a particular day can be
1.1 mike 2060: different than the number of the year that contains that day in the
2061: proleptic Gregorian calendar. The first week in a week-year <var title="">y</var> is the week that contains the first Thursday of
1.545 mike 2062: the Gregorian year <var title="">y</var>.</p><p>A string is a <dfn id="valid-week-string" role="button" tabindex="0" aria-haspopup="true">valid week string</dfn> representing a
2063: week-year <var title="">year</var> and week <var title="">week</var>
2064: if it consists of the following components in the given order:</p><ol><li>Four or more <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>, representing <var title="">year</var>, where <var title="">year</var> > 0</li>
2065:
2066: <li>A U+002D HYPHEN-MINUS character (-)</li>
2067:
2068: <li>A U+0057 LATIN CAPITAL LETTER W character (W)</li>
2069:
2070: <li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
2071: representing the week <var title="">week</var>, in the range
2072: 1 ≤ <var title="">week</var> ≤ <var title="">maxweek</var>, where <var title="">maxweek</var> is the
2073: <a href="#week-number-of-the-last-day">week number of the last day</a> of week-year <var title="">year</var></li>
2074:
2075: </ol><h5 id="vaguer-moments-in-time"><span class="secno">2.5.5.7 </span>Vaguer moments in time</h5><p>A string is a <dfn id="valid-date-or-time-string" role="button" tabindex="0" aria-haspopup="true">valid date or time string</dfn> if it is also
2076: one of the following:</p><ul><li>A <a href="#valid-date-string">valid date string</a>.</li>
2077:
2078: <li>A <a href="#valid-time-string">valid time string</a>.</li>
2079:
2080: <li>A <a href="#valid-global-date-and-time-string">valid global date and time string</a>.</li>
2081:
2082: </ul><p>A string is a <dfn id="valid-date-or-time-string-in-content" role="button" tabindex="0" aria-haspopup="true">valid date or time string in content</dfn> if
2083: it consists of zero or more <a href="#white_space">White_Space</a> characters,
2084: followed by a <a href="#valid-date-or-time-string">valid date or time string</a>, followed by
2085: zero or more further <a href="#white_space">White_Space</a> characters.</p><hr><p>A string is a <dfn id="valid-date-string-with-optional-time" role="button" tabindex="0" aria-haspopup="true">valid date string with optional time</dfn> if
2086: it is also one of the following:</p><ul><li>A <a href="#valid-date-string">valid date string</a>.</li>
2087:
2088: <li>A <a href="#valid-global-date-and-time-string">valid global date and time string</a>.</li>
2089:
2090: </ul><p>A string is a <dfn id="valid-date-string-in-content-with-optional-time" role="button" tabindex="0" aria-haspopup="true">valid date string in content with optional
2091: time</dfn> if it consists of zero or more <a href="#white_space">White_Space</a>
2092: characters, followed by a <a href="#valid-date-string-with-optional-time">valid date string with optional
2093: time</a>, followed by zero or more further
2094: <a href="#white_space">White_Space</a> characters.</p><h4 id="colors"><span class="secno">2.5.6 </span>Colors</h4><p>A <dfn id="simple-color" role="button" tabindex="0" aria-haspopup="true">simple color</dfn> consists of three 8-bit numbers in the
2095: range 0..255, representing the red, green, and blue components of
2096: the color respectively, in the sRGB color space. <a href="#refsSRGB">[SRGB]</a></p><p>A string is a <dfn id="valid-simple-color" role="button" tabindex="0" aria-haspopup="true">valid simple color</dfn> if it is exactly
2097: seven characters long, and the first character is a U+0023 NUMBER
2098: SIGN character (#), and the remaining six characters are all in the
2099: range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN
2100: CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, U+0061 LATIN
2101: SMALL LETTER A to U+0066 LATIN SMALL LETTER F, with the first two
2102: digits representing the red component, the middle two digits
2103: representing the green component, and the last two digits
2104: representing the blue component, in hexadecimal.</p><p>A string is a <dfn id="valid-lowercase-simple-color" role="button" tabindex="0" aria-haspopup="true">valid lowercase simple color</dfn> if it is a
2105: <a href="#valid-simple-color">valid simple color</a> and doesn't use any characters in
2106: the range U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL
2107: LETTER F.</p><hr><h4 id="space-separated-tokens"><span class="secno">2.5.7 </span>Space-separated tokens</h4><p>A <dfn id="set-of-space-separated-tokens" role="button" tabindex="0" aria-haspopup="true">set of space-separated tokens</dfn> is a string containing
2108: zero or more words (known as tokens) separated by one or more <a href="#space-character" title="space character">space characters</a>, where words consist
2109: of any string of one or more characters, none of which are <a href="#space-character" title="space character">space characters</a>.</p><p>A string containing a <a href="#set-of-space-separated-tokens">set of space-separated tokens</a>
2110: may have leading or trailing <a href="#space-character" title="space character">space
2111: characters</a>.</p><p>An <dfn id="unordered-set-of-unique-space-separated-tokens" role="button" tabindex="0" aria-haspopup="true">unordered set of unique space-separated tokens</dfn> is a
2112: <a href="#set-of-space-separated-tokens">set of space-separated tokens</a> where none of the tokens
2113: are duplicated.</p><p>An <dfn id="ordered-set-of-unique-space-separated-tokens" role="button" tabindex="0" aria-haspopup="true">ordered set of unique space-separated tokens</dfn> is a
2114: <a href="#set-of-space-separated-tokens">set of space-separated tokens</a> where none of the tokens
2115: are duplicated but where the order of the tokens is meaningful.</p><p><a href="#set-of-space-separated-tokens" title="set of space-separated tokens">Sets of
2116: space-separated tokens</a> sometimes have a defined set of
2117: allowed values. When a set of allowed values is defined, the tokens
2118: must all be from that list of allowed values; other values are
2119: non-conforming. If no such set of allowed values is provided, then
2120: all values are conforming.</p><p class="note">How tokens in a <a href="#set-of-space-separated-tokens">set of space-separated
1.103 mike 2121: tokens</a> are to be compared (e.g. case-sensitively or not) is
1.545 mike 2122: defined on a per-set basis.</p><h4 id="comma-separated-tokens"><span class="secno">2.5.8 </span>Comma-separated tokens</h4><p>A <dfn id="set-of-comma-separated-tokens" role="button" tabindex="0" aria-haspopup="true">set of comma-separated tokens</dfn> is a string containing
2123: zero or more tokens each separated from the next by a single U+002C
2124: COMMA character (,), where tokens consist of any string of zero or
2125: more characters, neither beginning nor ending with <a href="#space-character" title="space character">space characters</a>, nor containing any
2126: U+002C COMMA characters (,), and optionally surrounded by <a href="#space-character" title="space character">space characters</a>.</p><p class="example">For instance, the string "<code title=""> a ,b,,d d </code>" consists of four
2127: tokens: "a", "b", the empty string, and "d d". Leading and
2128: trailing whitespace around each token doesn't count as part of the
2129: token, and the empty string can be a token.</p><p><a href="#set-of-comma-separated-tokens" title="set of comma-separated tokens">Sets of
2130: comma-separated tokens</a> sometimes have further restrictions on
2131: what consists a valid token. When such restrictions are defined, the
2132: tokens must all fit within those restrictions; other values are
2133: non-conforming. If no such restrictions are specified, then all
2134: values are conforming.</p><h4 id="syntax-references"><span class="secno">2.5.9 </span>References</h4><p>A <dfn id="valid-hash-name-reference" role="button" tabindex="0" aria-haspopup="true">valid hash-name reference</dfn> to an element of type <var title="">type</var> is a string consisting of a U+0023 NUMBER SIGN
2135: character (#) followed by a string which exactly matches the value
2136: of the <code title="">name</code> attribute of an element with type
2137: <var title="">type</var> in the document.</p><h4 id="mq"><span class="secno">2.5.10 </span>Media queries</h4><p>A string is a <dfn id="valid-media-query" role="button" tabindex="0" aria-haspopup="true">valid media query</dfn> if it matches the
2138: <code title="">media_query_list</code> production of the Media
2139: Queries specification. <a href="#refsMQ">[MQ]</a></p><p>A string <dfn id="matches-the-environment" role="button" tabindex="0" aria-haspopup="true">matches the environment</dfn> of the user if it is
2140: the empty string, a string consisting of only <a href="#space-character" title="space
2141: character">space characters</a>, or is a media query that matches
2142: the user's environment according to the definitions given in the
2143: Media Queries specification. <a href="#refsMQ">[MQ]</a></p><h3 id="urls"><span class="secno">2.6 </span>URLs</h3><p>This specification defines the term <a href="#url">URL</a>, and defines
2144: various algorithms for dealing with URLs, because for historical
2145: reasons the rules defined by the URI and IRI specifications are not
2146: a complete description of what HTML user agents need to implement to
2147: be compatible with Web content.</p><p class="note">The term "URL" in this specification is used in a
1.255 mike 2148: manner distinct from the precise technical meaning it is given in
2149: RFC 3986. Readers familiar with that RFC will find it easier to read
2150: <em>this</em> specification if they pretend the term "URL" as used
2151: herein is really called something else altogether. This is a
1.545 mike 2152: <a href="#willful-violation">willful violation</a> of RFC 3986. <a href="#refsRFC3986">[RFC3986]</a></p><h4 id="terminology-0"><span class="secno">2.6.1 </span>Terminology</h4><p>A <dfn id="url" role="button" tabindex="0" aria-haspopup="true">URL</dfn> is a string used to identify a resource.</p><p>A <a href="#url">URL</a> is a <dfn id="valid-url" role="button" tabindex="0" aria-haspopup="true">valid URL</dfn> if at least one of
2153: the following conditions holds:</p><ul><li><p>The <a href="#url">URL</a> is a valid URI reference <a href="#refsRFC3986">[RFC3986]</a>.</p></li>
2154:
2155: <li><p>The <a href="#url">URL</a> is a valid IRI reference and it has no
2156: query component. <a href="#refsRFC3987">[RFC3987]</a></p></li>
2157:
2158: <li><p>The <a href="#url">URL</a> is a valid IRI reference and its query
2159: component contains no unescaped non-ASCII characters. <a href="#refsRFC3987">[RFC3987]</a></p></li>
2160:
2161: <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
1.561 mike 2162: the URL's <code><a href="#document">Document</a></code> is UTF-8 or <a href="#a-utf-16-encoding">a UTF-16
2163: encoding</a>. <a href="#refsRFC3987">[RFC3987]</a></p></li>
1.545 mike 2164:
2165: </ul><p>A string is a <dfn id="valid-non-empty-url" role="button" tabindex="0" aria-haspopup="true">valid non-empty URL</dfn> if it is a
2166: <a href="#valid-url">valid URL</a> but it is not the empty string.</p><p>A string is a <dfn id="valid-url-potentially-surrounded-by-spaces" role="button" tabindex="0" aria-haspopup="true">valid URL potentially surrounded by
2167: spaces</dfn> if, after <a href="#strip-leading-and-trailing-whitespace" title="strip leading and trailing
2168: whitespace">stripping leading and trailing whitespace</a> from
2169: it, it is a <a href="#valid-url">valid URL</a>.</p><p>A string is a <dfn id="valid-non-empty-url-potentially-surrounded-by-spaces" role="button" tabindex="0" aria-haspopup="true">valid non-empty URL potentially surrounded by
2170: spaces</dfn> if, after <a href="#strip-leading-and-trailing-whitespace" title="strip leading and trailing
2171: whitespace">stripping leading and trailing whitespace</a> from
2172: it, it is a <a href="#valid-non-empty-url">valid non-empty URL</a>.</p><p>This specification defines the URL
2173: <dfn id="about:legacy-compat" role="button" tabindex="0" aria-haspopup="true"><code>about:legacy-compat</code></dfn> as a reserved, though
2174: 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
2175: documents</a> when needed for compatibility with XML tools. <a href="#refsABOUT">[ABOUT]</a></p><p>This specification defines the URL
2176: <dfn id="about:srcdoc" role="button" tabindex="0" aria-haspopup="true"><code>about:srcdoc</code></dfn> as a reserved, though
2177: unresolvable, <code title="">about:</code> URI, that is used as
2178: <a href="#the-document-s-address">the document's address</a> of <a href="#an-iframe-srcdoc-document" title="an iframe srcdoc
2179: document"><code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> documents</a>. <a href="#refsABOUT">[ABOUT]</a></p><h4 id="resolving-urls"><span class="secno">2.6.3 </span>Resolving URLs</h4><p>Resolving a URL is the process of taking a relative URL and
2180: obtaining the absolute URL that it implies.</p><p>A <a href="#url">URL</a> is an <dfn id="absolute-url" role="button" tabindex="0" aria-haspopup="true">absolute URL</dfn> if <a href="#resolve-a-url" title="resolve a url">resolving</a> it results in the same output
2181: regardless of what it is resolved relative to, and that output is
2182: not a failure.</p><p>An <a href="#absolute-url">absolute URL</a> is a <dfn id="hierarchical-url" role="button" tabindex="0" aria-haspopup="true">hierarchical URL</dfn> if,
2183: 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
2184: after the <a href="#url-scheme" title="url-scheme"><scheme></a> component
2185: and it is a U+002F SOLIDUS character (/).</p><p>An <a href="#absolute-url">absolute URL</a> is an <dfn id="authority-based-url" role="button" tabindex="0" aria-haspopup="true">authority-based URL</dfn>
2186: 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
2187: immediately after the <a href="#url-scheme" title="url-scheme"><scheme></a>
2188: component and they are both U+002F SOLIDUS characters (//).</p><h4 id="interfaces-for-url-manipulation"><span class="secno">2.6.6 </span>Interfaces for URL manipulation</h4><p>An interface that has a complement of <dfn id="url-decomposition-idl-attributes" role="button" tabindex="0" aria-haspopup="true">URL decomposition IDL
2189: attributes</dfn> has seven attributes with the following
2190: definitions:</p><pre class="idl extract"> attribute DOMString <a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a>;
2191: attribute DOMString <a href="#dom-uda-host" title="dom-uda-host">host</a>;
2192: attribute DOMString <a href="#dom-uda-hostname" title="dom-uda-hostname">hostname</a>;
2193: attribute DOMString <a href="#dom-uda-port" title="dom-uda-port">port</a>;
2194: attribute DOMString <a href="#dom-uda-pathname" title="dom-uda-pathname">pathname</a>;
2195: attribute DOMString <a href="#dom-uda-search" title="dom-uda-search">search</a>;
2196: attribute DOMString <a href="#dom-uda-hash" title="dom-uda-hash">hash</a>;</pre><dl class="domintro"><dt><var title="">o</var> . <code title="dom-uda-protocol" id="dom-uda-protocol"><a href="#dom-uda-protocol">protocol</a></code> [ = <var title="">value</var> ]</dt>
2197: <dd>
2198: <p>Returns the current scheme of the underlying URL.</p>
2199: <p>Can be set, to change the underlying URL's scheme.</p>
2200: </dd>
2201:
2202: <dt><var title="">o</var> . <code title="dom-uda-host" id="dom-uda-host"><a href="#dom-uda-host">host</a></code> [ = <var title="">value</var> ]</dt>
2203: <dd>
2204: <p>Returns the current host and port (if it's not the default port) in the underlying URL.</p>
2205: <p>Can be set, to change the underlying URL's host and port.</p>
2206: <p>The host and the port are separated by a colon. The port part,
2207: if omitted, will be assumed to be the current scheme's default
2208: port.</p>
2209: </dd>
2210:
2211: <dt><var title="">o</var> . <code title="dom-uda-hostname" id="dom-uda-hostname"><a href="#dom-uda-hostname">hostname</a></code> [ = <var title="">value</var> ]</dt>
2212: <dd>
2213: <p>Returns the current host in the underlying URL.</p>
2214: <p>Can be set, to change the underlying URL's host.</p>
2215: </dd>
2216:
2217: <dt><var title="">o</var> . <code title="dom-uda-port" id="dom-uda-port"><a href="#dom-uda-port">port</a></code> [ = <var title="">value</var> ]</dt>
2218: <dd>
2219: <p>Returns the current port in the underlying URL.</p>
2220: <p>Can be set, to change the underlying URL's port.</p>
2221: </dd>
2222:
2223: <dt><var title="">o</var> . <code title="dom-uda-pathname" id="dom-uda-pathname"><a href="#dom-uda-pathname">pathname</a></code> [ = <var title="">value</var> ]</dt>
2224: <dd>
2225: <p>Returns the current path in the underlying URL.</p>
2226: <p>Can be set, to change the underlying URL's path.</p>
2227: </dd>
2228:
2229: <dt><var title="">o</var> . <code title="dom-uda-search" id="dom-uda-search"><a href="#dom-uda-search">search</a></code> [ = <var title="">value</var> ]</dt>
2230: <dd>
2231: <p>Returns the current query component in the underlying URL.</p>
2232: <p>Can be set, to change the underlying URL's query component.</p>
2233: </dd>
2234:
2235: <dt><var title="">o</var> . <code title="dom-uda-hash" id="dom-uda-hash"><a href="#dom-uda-hash">hash</a></code> [ = <var title="">value</var> ]</dt>
2236: <dd>
2237: <p>Returns the current fragment identifier in the underlying URL.</p>
2238: <p>Can be set, to change the underlying URL's fragment identifier.</p>
2239: </dd>
2240:
2241: </dl><div class="example">
2242:
2243: <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
2244: depending on the exact original syntax of the URL:</p>
2245:
2246: <table id="table-uda-examples"><thead><tr><th> Input URL
2247: </th><th> <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> value
2248: </th><th> Explanation
2249: </th></tr></thead><tbody><tr><td> <code title="">http://example.com/</code>
2250: </td><td> <i>empty string</i>
2251: </td><td> No <a href="#url-query" title="url-query"><query></a> component in input URL.
2252: </td></tr><tr><td> <code title="">http://example.com/?</code>
2253: </td><td> <code title="">?</code>
2254: </td><td> There is a <a href="#url-query" title="url-query"><query></a> component, but it is empty.
2255: <span class="impl">The question mark in the resulting value is the prefix.</span>
2256: </td></tr><tr><td> <code title="">http://example.com/?test</code>
2257: </td><td> <code title="">?test</code>
2258: </td><td> The <a href="#url-query" title="url-query"><query></a> component has the value "<code title="">test</code>".
2259: </td></tr><tr><td> <code title="">http://example.com/?test#</code>
2260: </td><td> <code title="">?test</code>
2261: </td><td> The (empty) <a href="#url-fragment" title="url-fragment"><fragment></a> component is not part of the <a href="#url-query" title="url-query"><query></a> component.
2262: </td></tr></tbody></table></div><div class="example">
2263:
2264: <p>The following table is similar; it provides a list of what each
2265: of the <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a> returns for a
2266: given <var title="">input</var> URL.</p>
2267:
2268: <table><thead><tr><th>Input
2269: </th><th><code title="dom-uda-protocol"><a href="#dom-uda-protocol">protocol</a></code>
2270: </th><th><code title="dom-uda-host"><a href="#dom-uda-host">host</a></code>
2271: </th><th><code title="dom-uda-hostname"><a href="#dom-uda-hostname">hostname</a></code>
2272: </th><th><code title="dom-uda-port"><a href="#dom-uda-port">port</a></code>
2273: </th><th><code title="dom-uda-pathname"><a href="#dom-uda-pathname">pathname</a></code>
2274: </th><th><code title="dom-uda-search"><a href="#dom-uda-search">search</a></code>
2275: </th><th><code title="dom-uda-hash"><a href="#dom-uda-hash">hash</a></code>
2276: </th></tr></thead><tbody><tr><td><code title="">http://example.com/carrot#question%3f</code>
2277: </td><td><code title="">http:</code>
2278: </td><td><code title="">example.com</code>
2279: </td><td><code title="">example.com</code>
2280: </td><td>(empty string)
2281: </td><td><code title="">/carrot</code>
2282: </td><td>(empty string)
2283: </td><td><code title="">#question%3f</code>
2284: </td></tr><tr><td><code title="">http://www.example.com:4443?</code>
2285: </td><td><code title="">http:</code>
2286: </td><td><code title="">www.example.com:4443</code>
2287: </td><td><code title="">www.example.com</code>
2288: </td><td><code title="">4443</code>
2289: </td><td><code title="">/</code>
2290: </td><td><code title="">?</code>
2291: </td><td>(empty string)
2292: </td></tr></tbody></table></div><h4 id="cors-settings-attributes"><span class="secno">2.7.5 </span>CORS settings attributes</h4><p>A <dfn id="cors-settings-attribute" role="button" tabindex="0" aria-haspopup="true">CORS settings attribute</dfn> is an <a href="#enumerated-attribute">enumerated
2293: attribute</a>. The following table lists the keywords and states
2294: for the attribute — the keywords in the left column map to the
2295: states in the cell in the second column on the same row as the
2296: keyword.</p><table><thead><tr><th> Keyword
2297: </th><th> State
2298: </th><th> Brief description
2299: </th></tr></thead><tbody><tr><td><dfn id="attr-crossorigin-anonymous-keyword" role="button" tabindex="0" aria-haspopup="true"><code>anonymous</code></dfn>
2300: </td><td><dfn id="attr-crossorigin-anonymous" role="button" tabindex="0" aria-haspopup="true">Anonymous</dfn>
2301: </td><td>Cross-origin CORS requests for the element will not have the <i>credentials flag</i> set.
2302: </td></tr><tr><td><dfn id="attr-crossorigin-use-credentials-keyword" role="button" tabindex="0" aria-haspopup="true"><code>use-credentials</code></dfn>
2303: </td><td><dfn id="attr-crossorigin-use-credentials" role="button" tabindex="0" aria-haspopup="true">Use Credentials</dfn>
2304: </td><td>Cross-origin CORS requests for the element will have the <i>credentials flag</i> set.
2305: </td></tr></tbody></table><p>The empty string is also a valid keyword, and maps to the <a href="#attr-crossorigin-anonymous" title="attr-crossorigin-anonymous">Anonymous</a> state. The
2306: attribute's <i>invalid value default</i> is the <a href="#attr-crossorigin-anonymous" title="attr-crossorigin-anonymous">Anonymous</a> state. The
2307: <i>missing value default</i>, used when the attribute is omitted, is
2308: the <dfn id="attr-crossorigin-none" role="button" tabindex="0" aria-haspopup="true">No CORS</dfn> state.</p><h3 id="common-dom-interfaces"><span class="secno">2.8 </span>Common DOM interfaces</h3><h4 id="reflecting-content-attributes-in-idl-attributes"><span class="secno">2.8.1 </span>Reflecting content attributes in IDL attributes</h4><p>Some IDL attributes are defined to <dfn id="reflect" role="button" tabindex="0" aria-haspopup="true">reflect</dfn> a
2309: particular content attribute. This means that on getting, the IDL
2310: attribute returns the current value of the content attribute, and on
2311: setting, the IDL attribute changes the value of the content
2312: attribute to the given value.</p><h4 id="collections-0"><span class="secno">2.8.2 </span>Collections</h4><p>The <code><a href="#htmlallcollection">HTMLAllCollection</a></code>,
2313: <code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code>,
2314: <code><a href="#htmloptionscollection">HTMLOptionsCollection</a></code>,
2315: interfaces are <a href="#collections">collections</a> derived from the
2316: <code><a href="#htmlcollection">HTMLCollection</a></code> interface.</p><h5 id="htmlallcollection-0"><span class="secno">2.8.2.1 </span>HTMLAllCollection</h5><p>The <code><a href="#htmlallcollection">HTMLAllCollection</a></code> interface represents a generic
2317: <a href="#collections" title="collections">collection</a> of elements just like
2318: <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
2319: returns an <code><a href="#htmlallcollection">HTMLAllCollection</a></code> object when there are
2320: multiple matching elements.</p><pre class="idl">interface <dfn id="htmlallcollection" role="button" tabindex="0" aria-haspopup="true">HTMLAllCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
2321: // inherits <span title="dom-HTMLCollection-length">length</span> and <span title="dom-HTMLCollection-item">item</span>()
1.588 mike 2322: legacycaller getter object? <a href="#dom-htmlallcollection-nameditem" title="dom-HTMLAllCollection-namedItem">namedItem</a>(DOMString name); // overrides inherited namedItem()
1.562 mike 2323: <a href="#htmlallcollection">HTMLAllCollection</a> <a href="#dom-htmlallcollection-tags" title="dom-HTMLAllCollection-tags">tags</a>(DOMString tagName);
1.545 mike 2324: };</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length" id="dom-htmlcollection-length">length</code></dt>
2325: <dd>
2326: <p>Returns the number of elements in the collection.</p>
2327: </dd>
2328:
2329: <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item" id="dom-htmlcollection-item">item</code>(<var title="">index</var>)</dt>
2330: <dt><var title="">collection</var>[<var title="">index</var>]</dt>
2331: <dt><var title="">collection</var>(<var title="">index</var>)</dt>
2332: <dd>
2333: <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>
2334: </dd>
2335:
2336: <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>
2337: <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>
2338: <dt><var title="">collection</var>[<var title="">name</var>]</dt>
2339: <dt><var title="">collection</var>(<var title="">name</var>)</dt>
2340: <dd>
2341: <p>Returns the item with <a href="#concept-id" title="concept-id">ID</a> or name <var title="">name</var> from the collection.</p>
2342: <p>If there are multiple matching items, then an <code><a href="#htmlallcollection">HTMLAllCollection</a></code> object containing all those elements is returned.</p>
2343: <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>,
2344: <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>,
2345: <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
2346: <code><a href="#the-object-element">object</a></code> elements can have a name for the purpose of
2347: this method; their name is given by the value of their <code title="">name</code> attribute.</p>
2348: </dd>
2349:
2350: <dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-tags" id="dom-htmlallcollection-tags"><a href="#dom-htmlallcollection-tags">tags</a></code>(<var title="">tagName</var>)</dt>
2351: <dd>
2352: <p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p>
2353: </dd>
2354:
2355: </dl><h5 id="htmlformcontrolscollection-0"><span class="secno">2.8.2.2 </span>HTMLFormControlsCollection</h5><p>The <code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code> interface represents
2356: 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>
2357: and <code><a href="#the-fieldset-element">fieldset</a></code> elements.</p><pre class="idl">interface <dfn id="htmlformcontrolscollection" role="button" tabindex="0" aria-haspopup="true">HTMLFormControlsCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
2358: // inherits <span title="dom-HTMLCollection-length">length</span> and <span title="dom-HTMLCollection-item">item</span>()
1.588 mike 2359: legacycaller getter object? <a href="#dom-htmlformcontrolscollection-nameditem" title="dom-HTMLFormControlsCollection-namedItem">namedItem</a>(DOMString name); // overrides inherited namedItem()
1.545 mike 2360: };
2361:
2362: interface <dfn id="radionodelist" role="button" tabindex="0" aria-haspopup="true">RadioNodeList</dfn> : <a href="#nodelist">NodeList</a> {
2363: attribute DOMString <a href="#dom-radionodelist-value" title="dom-RadioNodeList-value">value</a>;
2364: };</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length">length</code></dt>
2365: <dd>
2366: <p>Returns the number of elements in the collection.</p>
2367: </dd>
2368:
2369: <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item">item</code>(<var title="">index</var>)</dt>
2370: <dt><var title="">collection</var>[<var title="">index</var>]</dt>
2371: <dt><var title="">collection</var>(<var title="">index</var>)</dt>
2372: <dd>
2373: <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>
2374: </dd>
2375:
2376: <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLFormControlsCollection-namedItem" id="dom-htmlformcontrolscollection-nameditem"><a href="#dom-htmlformcontrolscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
2377: <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>
2378: <dt><var title="">collection</var>[<var title="">name</var>]</dt>
2379: <dt><var title="">collection</var>(<var title="">name</var>)</dt>
2380: <dd>
2381: <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>
2382: <p>If there are multiple matching items, then a <code><a href="#radionodelist">RadioNodeList</a></code> object containing all those elements is returned.</p>
2383: </dd>
2384:
2385: <dt><var title="">radioNodeList</var> . <var title="">value</var> [ = <var title="">value</var> ]</dt>
2386: <dd>
2387: <p>Returns the value of the first checked radio button represented by the object.</p>
2388: <p>Can be set, to check the first radio button with the given value represented by the object.</p>
2389: </dd>
2390:
2391: </dl><h5 id="htmloptionscollection-0"><span class="secno">2.8.2.3 </span>HTMLOptionsCollection</h5><p>The <code><a href="#htmloptionscollection">HTMLOptionsCollection</a></code> interface represents a
2392: list of <code><a href="#the-option-element">option</a></code> elements. It is always rooted on a
2393: <code><a href="#the-select-element">select</a></code> element and has attributes and methods that
2394: manipulate that element's descendants.</p><pre class="idl">interface <dfn id="htmloptionscollection" role="button" tabindex="0" aria-haspopup="true">HTMLOptionsCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
2395: // inherits <span title="dom-HTMLCollection-item">item</span>()
2396: attribute unsigned long <a href="#dom-htmloptionscollection-length" title="dom-HTMLOptionsCollection-length">length</a>; // overrides inherited length
1.588 mike 2397: legacycaller getter object? <a href="#dom-htmloptionscollection-nameditem" title="dom-HTMLOptionsCollection-namedItem">namedItem</a>(DOMString name); // overrides inherited namedItem()
1.562 mike 2398: <a href="#dom-htmloptionscollection-setter" title="dom-HTMLOptionsCollection-setter">setter creator</a> void (unsigned long index, <a href="#htmloptionelement">HTMLOptionElement</a> option);
2399: void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(<a href="#htmloptionelement">HTMLOptionElement</a> element, optional <a href="#htmlelement">HTMLElement</a>? before);
2400: void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(<a href="#htmloptgroupelement">HTMLOptGroupElement</a> element, optional <a href="#htmlelement">HTMLElement</a>? before);
2401: void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(<a href="#htmloptionelement">HTMLOptionElement</a> element, long before);
2402: void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(<a href="#htmloptgroupelement">HTMLOptGroupElement</a> element, long before);
2403: void <a href="#dom-htmloptionscollection-remove" title="dom-HTMLOptionsCollection-remove">remove</a>(long index);
1.545 mike 2404: attribute long <a href="#dom-htmloptionscollection-selectedindex" title="dom-HTMLOptionsCollection-selectedIndex">selectedIndex</a>;
2405: };</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-length" id="dom-htmloptionscollection-length"><a href="#dom-htmloptionscollection-length">length</a></code> [ = <var title="">value</var> ]</dt>
2406: <dd>
2407: <p>Returns the number of elements in the collection.</p>
2408: <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>
2409: <p>When set to a greater number, adds new blank <code><a href="#the-option-element">option</a></code> elements to that container.</p>
2410: </dd>
2411:
2412: <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item">item</code>(<var title="">index</var>)</dt>
2413: <dt><var title="">collection</var>[<var title="">index</var>]</dt>
2414: <dt><var title="">collection</var>(<var title="">index</var>)</dt>
2415: <dd>
2416: <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>
2417: </dd>
2418:
2419: <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLOptionsCollection-namedItem" id="dom-htmloptionscollection-nameditem"><a href="#dom-htmloptionscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
2420: <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>
2421: <dt><var title="">collection</var>[<var title="">name</var>]</dt>
2422: <dt><var title="">collection</var>(<var title="">name</var>)</dt>
2423: <dd>
2424: <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>
2425: <p>If there are multiple matching items, then a <code><a href="#nodelist">NodeList</a></code> object containing all those elements is returned.</p>
2426: </dd>
2427:
2428: <dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-add" id="dom-htmloptionscollection-add"><a href="#dom-htmloptionscollection-add">add</a></code>(<var title="">element</var> [, <var title="">before</var> ] )</dt>
2429: <dd>
2430: <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
2431: <p>The <var title="">before</var> argument can be a number, in
2432: which case <var title="">element</var> is inserted before the item
2433: with that number, or an element from the collection, in which case
2434: <var title="">element</var> is inserted before that element.</p>
2435: <p>If <var title="">before</var> is omitted, null, or a number out
2436: of range, then <var title="">element</var> will be added at the
2437: end of the list.</p>
1.612 mike 2438: <p>This method will throw a <code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>
1.545 mike 2439: exception if <var title="">element</var> is an ancestor of the
2440: element into which it is to be inserted.</p>
2441: </dd>
2442:
2443: <dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-selectedIndex" id="dom-htmloptionscollection-selectedindex"><a href="#dom-htmloptionscollection-selectedindex">selectedIndex</a></code> [ = <var title="">value</var> ]</dt>
2444:
2445: <dd>
2446:
2447: <p>Returns the index of the first selected item, if any, or
2448: −1 if there is no selected item.</p>
2449:
2450: <p>Can be set, to change the selection.</p>
2451:
2452: </dd>
2453:
2454: </dl><h4 id="domstringmap-0"><span class="secno">2.8.3 </span>DOMStringMap</h4><p>The <code><a href="#domstringmap">DOMStringMap</a></code> interface represents a set of
2455: name-value pairs. It exposes these using the scripting language's
2456: native mechanisms for property access.</p><div class="example">
2457:
2458: <p>The <code title="dom-dataset"><a href="#dom-dataset">dataset</a></code> attribute on
2459: elements exposes the <code title="attr-data-*"><a href="#attr-data">data-*</a></code>
2460: attributes on the element.</p>
2461:
2462: <p>Given the following fragment and elements with similar
2463: constructions:</p>
2464:
2465: <pre><img class="tower" id="tower5" data-x="12" data-y="5"
2466: data-ai="robotarget" data-hp="46" data-ability="flames"
2467: src="towers/rocket.png alt="Rocket Tower"></pre>
2468:
2469: <p>...one could imagine a function <code title="">splashDamage()</code> that takes some arguments, the first
2470: of which is the element to process:</p>
2471:
2472: <pre>function splashDamage(node, x, y, damage) {
2473: if (node.classList.contains('tower') && // checking the 'class' attribute
2474: node.dataset.x == x && // reading the 'data-x' attribute
2475: node.dataset.y == y) { // reading the 'data-y' attribute
2476: var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
2477: hp = hp - damage;
2478: if (hp < 0) {
2479: hp = 0;
2480: node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
2481: delete node.dataset.ability; // removing the 'data-ability' attribute
2482: }
2483: node.dataset.hp = hp; // setting the 'data-hp' attribute
2484: }
2485: }</pre>
2486:
2487: </div><h4 id="transferable-objects"><span class="secno">2.8.4 </span>Transferable objects</h4><p>Some objects support being copied and closed in one operation.
2488: This is called <i>transferring</i> the object, and is used in
2489: particular to transfer ownership of unsharable or expensive
2490: resources across worker boundaries.</p><pre class="idl">[NoInterfaceObject]
2491: interface <dfn id="transferable" role="button" tabindex="0" aria-haspopup="true">Transferable</dfn> { };</pre><p>The following <code><a href="#transferable">Transferable</a></code> types exist:</p><ul class="brief"><li><code>MessagePort</code>
2492:
2493: </li></ul><h4 id="dom-feature-strings"><span class="secno">2.8.6 </span>DOM feature strings</h4><p>DOM3 Core defines mechanisms for checking for interface support,
2494: and for obtaining implementations of interfaces, using <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures">feature
2495: strings</a>. <a href="#refsDOMCORE">[DOMCORE]</a></p><p>Authors are strongly discouraged from using these, as they are
2496: notoriously unreliable and imprecise. Authors are encouraged to rely
2497: on explicit feature testing or the graceful degradation behavior
2498: intrinsic to some of the features in this specification.</p><h3 id="namespaces"><span class="secno">2.9 </span>Namespaces</h3><p>The <dfn id="html-namespace-0" role="button" tabindex="0" aria-haspopup="true">HTML namespace</dfn> is: <code>http://www.w3.org/1999/xhtml</code></p><p>The <dfn id="mathml-namespace" role="button" tabindex="0" aria-haspopup="true">MathML namespace</dfn> is: <code>http://www.w3.org/1998/Math/MathML</code></p><p>The <dfn id="svg-namespace" role="button" tabindex="0" aria-haspopup="true">SVG namespace</dfn> is: <code>http://www.w3.org/2000/svg</code></p><p>The <dfn id="xlink-namespace" role="button" tabindex="0" aria-haspopup="true">XLink namespace</dfn> is: <code>http://www.w3.org/1999/xlink</code></p><p>The <dfn id="xml-namespace" role="button" tabindex="0" aria-haspopup="true">XML namespace</dfn> is: <code>http://www.w3.org/XML/1998/namespace</code></p><p>The <dfn id="xmlns-namespace" role="button" tabindex="0" aria-haspopup="true">XMLNS namespace</dfn> is: <code>http://www.w3.org/2000/xmlns/</code></p><hr><p>Data mining tools and other user agents that perform operations
2499: on content without running scripts, evaluating CSS or XPath
2500: expressions, or otherwise exposing the resulting DOM to arbitrary
2501: content, may "support namespaces" by just asserting that their DOM
2502: node analogues are in certain namespaces, without actually exposing
2503: the above strings.</p><hr><p class="note">In <a href="#syntax">the HTML syntax</a>, namespace prefixes
1.225 mike 2504: and namespace declarations do not have the same effect as in XML.
2505: For instance, the colon has no special meaning in HTML element
1.545 mike 2506: names.</p><h2 id="dom"><span class="secno">3 </span>Semantics, structure, and APIs of HTML documents</h2><h3 id="documents"><span class="secno">3.1 </span>Documents</h3><p>Every XML and HTML document in an HTML UA is represented by a
2507: <code><a href="#document">Document</a></code> object. <a href="#refsDOMCORE">[DOMCORE]</a></p><p><dfn id="the-document-s-address" role="button" tabindex="0" aria-haspopup="true">The document's address</dfn> is an <a href="#absolute-url">absolute URL</a>
2508: that is set when the <code><a href="#document">Document</a></code> is created. <dfn id="the-document-s-current-address" role="button" tabindex="0" aria-haspopup="true">The
2509: document's current address</dfn> is an <a href="#absolute-url">absolute URL</a>
2510: that can change during the lifetime of the <code><a href="#document">Document</a></code>,
2511: for example when the user <a href="#navigate" title="navigate">navigates</a> to
2512: a <a href="#scroll-to-fragid" title="navigate-fragid">fragment identifier</a> on the
2513: page or when the <code title="dom-history-pushState"><a href="#dom-history-pushstate">pushState()</a></code> method is called
2514: with a new <a href="#url">URL</a>. <span class="impl"><a href="#the-document-s-current-address">The document's
2515: current address</a> must be set to <a href="#the-document-s-address">the document's
2516: address</a> when the <code><a href="#document">Document</a></code> is created.</span></p><p class="note">Interactive user agents typically expose <a href="#the-document-s-current-address">the
2517: document's current address</a> in their user interface.</p><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>
2518: or <code title="dom-DOMHTMLImplementation-createHTMLDocument">createHTMLDocument()</code>
2519: APIs, <a href="#the-document-s-address">the document's address</a> is the same as <a href="#the-document-s-address">the
2520: document's address</a> of the <a href="#script-s-document">script's document</a>, and
2521: the <code><a href="#document">Document</a></code> is both <a href="#ready-for-post-load-tasks">ready for post-load
2522: tasks</a> and <a href="#completely-loaded">completely loaded</a> immediately.</p><p>Each <code><a href="#document">Document</a></code> object has a <dfn id="reload-override-flag" role="button" tabindex="0" aria-haspopup="true">reload override
2523: flag</dfn> that is originally unset. The flag is set by the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> and <code title="dom-document-open"><a href="#dom-document-open">document.write()</a></code> methods in certain
2524: situations. When the flag is set, the <code><a href="#document">Document</a></code> also has
2525: a <dfn id="reload-override-buffer" role="button" tabindex="0" aria-haspopup="true">reload override buffer</dfn> which is a Unicode string that
2526: is used as the source of the document when it is reloaded.</p><p>When the user agent is to perform <dfn id="an-overridden-reload" role="button" tabindex="0" aria-haspopup="true">an overridden
2527: reload</dfn>, it must act as follows:</p><ol><li><p>Let <var title="">source</var> be the value of the
2528: <a href="#browsing-context">browsing context</a>'s <a href="#active-document">active document</a>'s
2529: <a href="#reload-override-buffer">reload override buffer</a>.</p></li>
2530:
2531: <li><p><a href="#navigate">Navigate</a> the
2532: <a href="#browsing-context">browsing context</a> to a resource whose source is <var title="">source</var>, with <a href="#replacement-enabled">replacement enabled</a>. When
2533: the <a href="#navigate">navigate</a> algorithm creates a <code><a href="#document">Document</a></code>
2534: object for this purpose, set that <code><a href="#document">Document</a></code>'s
2535: <a href="#reload-override-flag">reload override flag</a> and set its <a href="#reload-override-buffer">reload override
2536: buffer</a> to <var title="">source</var>.</p></li>
2537:
2538: </ol><h4 id="documents-in-the-dom"><span class="secno">3.1.1 </span>Documents in the DOM</h4><p>All <code><a href="#document">Document</a></code> objects (in user agents implementing
2539: this specification) <span class="impl">must</span> also implement
2540: the <code><a href="#htmldocument">HTMLDocument</a></code> interface, available using
2541: binding-specific methods. (This is the case whether or not the
2542: document in question is an <a href="#html-documents" title="HTML documents">HTML
2543: document</a> or indeed whether it contains any <a href="#html-elements">HTML
2544: elements</a> at all.) <code><a href="#document">Document</a></code> objects <span class="impl">must</span> also implement the document-level interface
2545: of any other namespaces that the UA supports.</p><p class="example">For example, if an HTML implementation also
2546: supports SVG, then the <code><a href="#document">Document</a></code> object implements both
2547: <code><a href="#htmldocument">HTMLDocument</a></code> and <code>SVGDocument</code>.</p><p class="note">Because the <code><a href="#htmldocument">HTMLDocument</a></code> interface is
1.1 mike 2548: now obtained using binding-specific casting methods instead of
2549: simply being the primary interface of the document object, it is no
1.545 mike 2550: longer defined as inheriting from <code><a href="#document">Document</a></code>.</p><pre class="idl">[OverrideBuiltins]
2551: interface <dfn id="htmldocument" role="button" tabindex="0" aria-haspopup="true">HTMLDocument</dfn> {
2552: // <a href="#resource-metadata-management">resource metadata management</a>
2553: [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>;
2554: readonly attribute DOMString <a href="#dom-document-url" title="dom-document-URL">URL</a>;
2555: attribute DOMString <a href="#dom-document-domain" title="dom-document-domain">domain</a>;
2556: readonly attribute DOMString <a href="#dom-document-referrer" title="dom-document-referrer">referrer</a>;
2557: attribute DOMString <a href="#dom-document-cookie" title="dom-document-cookie">cookie</a>;
2558: readonly attribute DOMString <a href="#dom-document-lastmodified" title="dom-document-lastModified">lastModified</a>;
2559: readonly attribute DOMString <a href="#dom-document-readystate" title="dom-document-readyState">readyState</a>;
2560:
2561: // <a href="#dom-tree-accessors">DOM tree accessors</a>
1.562 mike 2562: <a href="#dom-document-nameditem" title="dom-document-namedItem">getter</a> object (DOMString name);
1.545 mike 2563: attribute DOMString <a href="#document.title" title="dom-document-title">title</a>;
2564: attribute DOMString <a href="#dom-document-dir" title="dom-document-dir">dir</a>;
2565: attribute <a href="#htmlelement">HTMLElement</a>? <a href="#dom-document-body" title="dom-document-body">body</a>;
2566: readonly attribute <a href="#htmlheadelement">HTMLHeadElement</a>? <a href="#dom-document-head" title="dom-document-head">head</a>;
2567: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-images" title="dom-document-images">images</a>;
2568: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-embeds" title="dom-document-embeds">embeds</a>;
2569: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-plugins" title="dom-document-plugins">plugins</a>;
2570: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-links" title="dom-document-links">links</a>;
2571: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-forms" title="dom-document-forms">forms</a>;
2572: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-scripts" title="dom-document-scripts">scripts</a>;
1.562 mike 2573: NodeList <a href="#dom-document-getelementsbyname" title="dom-document-getElementsByName">getElementsByName</a>(DOMString elementName);
1.545 mike 2574:
2575: // <a href="#dynamic-markup-insertion">dynamic markup insertion</a>
1.562 mike 2576: <a href="#htmldocument">HTMLDocument</a> <a href="#dom-document-open" title="dom-document-open">open</a>(optional DOMString type, optional DOMString replace);
2577: <a href="#windowproxy">WindowProxy</a> <a href="#dom-document-open" title="dom-document-open">open</a>(DOMString url, DOMString name, DOMString features, optional boolean replace);
1.545 mike 2578: void <a href="#dom-document-close" title="dom-document-close">close</a>();
1.562 mike 2579: void <a href="#dom-document-write" title="dom-document-write">write</a>(DOMString... text);
2580: void <a href="#dom-document-writeln" title="dom-document-writeln">writeln</a>(DOMString... text);
1.545 mike 2581:
2582: // <a href="#editing">user interaction</a>
2583: readonly attribute <a href="#windowproxy">WindowProxy</a>? <a href="#dom-document-defaultview" title="dom-document-defaultView">defaultView</a>;
2584: readonly attribute <a href="#element">Element</a>? <a href="#dom-document-activeelement" title="dom-document-activeElement">activeElement</a>;
2585: boolean <a href="#dom-document-hasfocus" title="dom-document-hasFocus">hasFocus</a>();
2586: attribute DOMString <a href="#designMode" title="dom-document-designMode">designMode</a>;
1.562 mike 2587: boolean <a href="#execCommand" title="dom-document-execCommand">execCommand</a>(DOMString commandId);
2588: boolean <a href="#execCommand" title="dom-document-execCommand">execCommand</a>(DOMString commandId, boolean showUI);
2589: boolean <a href="#execCommand" title="dom-document-execCommand">execCommand</a>(DOMString commandId, boolean showUI, DOMString value);
2590: boolean <a href="#dom-document-querycommandenabled" title="dom-document-queryCommandEnabled">queryCommandEnabled</a>(DOMString commandId);
2591: boolean <a href="#dom-document-querycommandindeterm" title="dom-document-queryCommandIndeterm">queryCommandIndeterm</a>(DOMString commandId);
2592: boolean <a href="#dom-document-querycommandstate" title="dom-document-queryCommandState">queryCommandState</a>(DOMString commandId);
2593: boolean <a href="#dom-document-querycommandsupported" title="dom-document-queryCommandSupported">queryCommandSupported</a>(DOMString commandId);
2594: DOMString <a href="#dom-document-querycommandvalue" title="dom-document-queryCommandValue">queryCommandValue</a>(DOMString commandId);
1.545 mike 2595: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-document-commands" title="dom-document-commands">commands</a>;
2596:
2597: // <a href="#event-handler-idl-attributes">event handler IDL attributes</a>
1.610 mike 2598: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onabort" title="handler-onabort">onabort</a>;
2599: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onblur" title="handler-onblur">onblur</a>;
2600: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplay" title="handler-oncanplay">oncanplay</a>;
2601: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>;
2602: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onchange" title="handler-onchange">onchange</a>;
2603: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onclick" title="handler-onclick">onclick</a>;
2604: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>;
2605: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncuechange" title="handler-oncuechange">oncuechange</a>;
2606: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondblclick" title="handler-ondblclick">ondblclick</a>;
2607: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondrag" title="handler-ondrag">ondrag</a>;
2608: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragend" title="handler-ondragend">ondragend</a>;
2609: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragenter" title="handler-ondragenter">ondragenter</a>;
2610: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragleave" title="handler-ondragleave">ondragleave</a>;
2611: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragover" title="handler-ondragover">ondragover</a>;
2612: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragstart" title="handler-ondragstart">ondragstart</a>;
2613: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondrop" title="handler-ondrop">ondrop</a>;
2614: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>;
2615: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onemptied" title="handler-onemptied">onemptied</a>;
2616: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onended" title="handler-onended">onended</a>;
2617: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onerror" title="handler-onerror">onerror</a>;
2618: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onfocus" title="handler-onfocus">onfocus</a>;
2619: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oninput" title="handler-oninput">oninput</a>;
2620: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oninvalid" title="handler-oninvalid">oninvalid</a>;
2621: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeydown" title="handler-onkeydown">onkeydown</a>;
2622: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeypress" title="handler-onkeypress">onkeypress</a>;
2623: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeyup" title="handler-onkeyup">onkeyup</a>;
2624: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onload" title="handler-onload">onload</a>;
2625: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>;
2626: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>;
2627: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadstart" title="handler-onloadstart">onloadstart</a>;
2628: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousedown" title="handler-onmousedown">onmousedown</a>;
2629: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousemove" title="handler-onmousemove">onmousemove</a>;
2630: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseout" title="handler-onmouseout">onmouseout</a>;
2631: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseover" title="handler-onmouseover">onmouseover</a>;
2632: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseup" title="handler-onmouseup">onmouseup</a>;
2633: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>;
2634: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onpause" title="handler-onpause">onpause</a>;
2635: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplay" title="handler-onplay">onplay</a>;
2636: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplaying" title="handler-onplaying">onplaying</a>;
2637: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onprogress" title="handler-onprogress">onprogress</a>;
2638: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onratechange" title="handler-onratechange">onratechange</a>;
2639: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onreset" title="handler-onreset">onreset</a>;
2640: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onscroll" title="handler-onscroll">onscroll</a>;
2641: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onseeked" title="handler-onseeked">onseeked</a>;
2642: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onseeking" title="handler-onseeking">onseeking</a>;
2643: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onselect" title="handler-onselect">onselect</a>;
2644: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onshow" title="handler-onshow">onshow</a>;
2645: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onstalled" title="handler-onstalled">onstalled</a>;
2646: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onsubmit" title="handler-onsubmit">onsubmit</a>;
2647: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onsuspend" title="handler-onsuspend">onsuspend</a>;
2648: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>;
2649: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>;
2650: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onwaiting" title="handler-onwaiting">onwaiting</a>;
1.589 mike 2651:
2652: // special <a href="#event-handler-idl-attributes">event handler IDL attributes</a> that only apply to Document objects
1.610 mike 2653: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onreadystatechange" title="handler-onreadystatechange">onreadystatechange</a>;
1.545 mike 2654: };
2655: <a href="#document">Document</a> implements <a href="#htmldocument">HTMLDocument</a>;</pre><p>Since the <code><a href="#htmldocument">HTMLDocument</a></code> interface holds methods and
2656: attributes related to a number of disparate features, the members of
1.612 mike 2657: this interface are described in various different sections.</p><h4 id="security-document"><span class="secno">3.1.2 </span>Security</h4><p id="security">User agents <span class="impl">must</span> throw a
2658: <code><a href="#securityerror">SecurityError</a></code> exception whenever any properties of a
1.545 mike 2659: <code><a href="#document">Document</a></code> object are accessed by scripts whose
2660: <a href="#effective-script-origin">effective script origin</a> is not the <a href="#same-origin" title="same
2661: origin">same</a> as the <code><a href="#document">Document</a></code>'s <a href="#effective-script-origin">effective
2662: script origin</a>.</p><h4 id="resource-metadata-management"><span class="secno">3.1.3 </span><dfn role="button" tabindex="0" aria-haspopup="true">Resource metadata management</dfn></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-URL" id="dom-document-url"><a href="#dom-document-url">URL</a></code></dt>
2663: <dd>
2664: <p>Returns <a href="#the-document-s-address">the document's address</a>.</p>
2665: </dd>
2666:
2667: <dt><var title="">document</var> . <code title="dom-document-referrer" id="dom-document-referrer"><a href="#dom-document-referrer">referrer</a></code></dt>
2668: <dd>
2669: <p>Returns <a href="#the-document-s-current-address" title="the document's current address">the
2670: address</a> of the <code><a href="#document">Document</a></code> from which the user
2671: navigated to this one, unless it was blocked or there was no such
2672: document, in which case it returns the empty string.</p>
2673: <p>The <code title="rel-noreferrer"><a href="#link-type-noreferrer">noreferrer</a></code> link
2674: type can be used to block the referrer.</p>
2675: </dd>
2676:
2677: </dl><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
1.1 mike 2678: match the <code title="http-referer">Referer</code> (sic) header
2679: that was sent when <a href="#fetch" title="fetch">fetching</a> the current
2680: page.</p><p class="note">Typically user agents are configured to not report
2681: referrers in the case where the referrer uses an encrypted protocol
2682: and the current page does not (e.g. when navigating from an <code title="">http:</code> page to an <code title="">http:</code>
1.545 mike 2683: page).</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-cookie" id="dom-document-cookie"><a href="#dom-document-cookie">cookie</a></code> [ = <var title="">value</var> ]</dt>
2684: <dd>
2685: <p>Returns the HTTP cookies that apply to the
2686: <code><a href="#document">Document</a></code>. If there are no cookies or cookies can't be
2687: applied to this resource, the empty string will be returned.</p>
2688: <p>Can be set, to add a new cookie to the element's set of HTTP
2689: cookies.</p>
2690: <p>If the contents are <a href="#sandboxed-origin-browsing-context-flag" title="sandboxed origin browsing
2691: context flag">sandboxed into a unique origin</a> (in an
2692: <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
2693: resource was labeled as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code>, a
1.612 mike 2694: <code><a href="#securityerror">SecurityError</a></code> exception will be thrown on getting and
1.545 mike 2695: setting.</p>
2696: </dd>
2697:
2698: </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-lastmodified" id="dom-document-lastmodified"><a href="#dom-document-lastmodified">lastModified</a></code></dt>
2699: <dd>
2700: <p>Returns the date of the last modification to the document, as
2701: reported by the server, in the form "<code title="">MM/DD/YYYY hh:mm:ss</code>", in the user's local
2702: time zone.</p>
2703: <p>If the last modification date is not known, the current time is
2704: returned instead.</p>
2705: </dd>
2706:
2707: </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-readyState" id="dom-document-readystate"><a href="#dom-document-readystate">readyState</a></code></dt>
2708: <dd>
2709: <p>Returns "loading" while the <code><a href="#document">Document</a></code> is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.</p>
2710: <p>The <code title="event-readystatechange"><a href="#event-readystatechange">readystatechange</a></code> event fires on the <code><a href="#document">Document</a></code> object when this value changes.</p>
2711: </dd>
2712:
2713: </dl><h4 id="dom-tree-accessors"><span class="secno">3.1.4 </span><dfn role="button" tabindex="0" aria-haspopup="true">DOM tree accessors</dfn></h4><p><dfn id="the-html-element-0" role="button" tabindex="0" aria-haspopup="true">The <code>html</code> element</dfn> of a document is the
2714: document's root element, if there is one and it's an
2715: <code><a href="#the-html-element">html</a></code> element, or null otherwise.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-head" id="dom-document-head"><a href="#dom-document-head">head</a></code></dt>
2716: <dd>
2717: <p>Returns <a href="#the-head-element-0">the <code>head</code> element</a>.</p>
2718: </dd>
2719:
2720: </dl><p><dfn id="the-head-element-0" role="button" tabindex="0" aria-haspopup="true">The <code>head</code> element</dfn> of a document is the
2721: first <code><a href="#the-head-element">head</a></code> element that is a child of <a href="#the-html-element-0">the
2722: <code>html</code> element</a>, if there is one, or null
2723: otherwise.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-title" id="dom-document-title"><a href="#document.title">title</a></code> [ = <var title="">value</var> ]</dt>
2724: <dd>
2725: <p>Returns the document's title, as given by <a href="#the-title-element-0">the
2726: <code>title</code> element</a>.</p>
2727: <p>Can be set, to update the document's title. If there is no
2728: <a href="#the-head-element-0" title="the head element"><code>head</code> element</a>,
2729: the new value is ignored.</p>
2730: <p>In SVG documents, the <code>SVGDocument</code> interface's
2731: <code title="dom-svg-title">title</code> attribute takes
2732: precedence.</p>
2733: </dd>
2734:
2735: </dl><p><dfn id="the-title-element-0" role="button" tabindex="0" aria-haspopup="true">The <code>title</code> element</dfn> of a document is the
2736: first <code><a href="#the-title-element">title</a></code> element in the document (in tree order), if
2737: there is one, or null otherwise.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-body" id="dom-document-body"><a href="#dom-document-body">body</a></code> [ = <var title="">value</var> ]</dt>
2738: <dd>
2739: <p>Returns <a href="#the-body-element-0">the body element</a>.</p>
2740: <p>Can be set, to replace <a href="#the-body-element-0">the body element</a>.</p>
1.612 mike 2741: <p>If the new value is not a <code><a href="#the-body-element">body</a></code> or <code><a href="#frameset">frameset</a></code> element, this will throw a <code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code> exception.</p>
1.545 mike 2742: </dd>
2743:
2744: </dl><p><dfn id="the-body-element-0" role="button" tabindex="0" aria-haspopup="true">The body element</dfn> of a document is the first child of
2745: <a href="#the-html-element-0">the <code>html</code> element</a> that is either a
2746: <code><a href="#the-body-element">body</a></code> element or a <code><a href="#frameset">frameset</a></code> element. If
2747: there is no such element, it is null. <span class="impl">If the body
2748: element is null, then when the specification requires that events be
2749: fired at "the body element", they must instead be fired at the
2750: <code><a href="#document">Document</a></code> object.</span></p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-images" id="dom-document-images"><a href="#dom-document-images">images</a></code></dt>
2751: <dd>
2752: <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>
2753: </dd>
2754:
2755: <dt><var title="">document</var> . <code title="dom-document-embeds" id="dom-document-embeds"><a href="#dom-document-embeds">embeds</a></code></dt>
2756: <dt><var title="">document</var> . <code title="dom-document-plugins" id="dom-document-plugins"><a href="#dom-document-plugins">plugins</a></code></dt>
2757: <dd>
2758: <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>
2759: </dd>
2760:
2761: <dt><var title="">document</var> . <code title="dom-document-links" id="dom-document-links"><a href="#dom-document-links">links</a></code></dt>
2762: <dd>
2763: <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>
2764: </dd>
2765:
2766: <dt><var title="">document</var> . <code title="dom-document-forms" id="dom-document-forms"><a href="#dom-document-forms">forms</a></code></dt>
2767: <dd>
2768: <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>
2769: </dd>
2770:
2771: <dt><var title="">document</var> . <code title="dom-document-scripts" id="dom-document-scripts"><a href="#dom-document-scripts">scripts</a></code></dt>
2772: <dd>
2773: <p>Return an <code><a href="#htmlcollection">HTMLCollection</a></code> of the <code><a href="#the-script-element">script</a></code> elements in the <code><a href="#document">Document</a></code>.</p>
2774: </dd>
2775:
2776: </dl><dl class="domintro"><dt><var title="">collection</var> = <var title="">document</var> . <code title="dom-document-getElementsByName" id="dom-document-getelementsbyname"><a href="#dom-document-getelementsbyname">getElementsByName</a></code>(<var title="">name</var>)</dt>
2777: <dd>
2778: <p>Returns a <code><a href="#nodelist">NodeList</a></code> of elements in the
2779: <code><a href="#document">Document</a></code> that have a <code title="">name</code>
2780: attribute with the value <var title="">name</var>.</p>
2781: </dd>
2782:
2783: </dl><hr><p class="note">The <code title="dom-document-dir"><a href="#dom-document-dir">dir</a></code>
1.1 mike 2784: attribute on the <code><a href="#htmldocument">HTMLDocument</a></code> interface is defined
2785: along with the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> content
1.545 mike 2786: attribute.</p><h3 id="elements"><span class="secno">3.2 </span>Elements</h3><h4 id="semantics-0"><span class="secno">3.2.1 </span>Semantics</h4><p>Elements, attributes, and attribute values in HTML are defined
2787: (by this specification) to have certain meanings (semantics). For
2788: example, the <code><a href="#the-ol-element">ol</a></code> element represents an ordered list, and
2789: the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute represents the
1.555 mike 2790: language of the content.</p><p>These definitions allow HTML processors, such as Web browsers or
2791: search engines, to present and use documents and applications in a
2792: wide variety of contexts that the author might not have
2793: considered.</p><div class="example">
2794:
2795: <p>As a simple example, consider a Web page written by an author
2796: who only considered desktop computer Web browsers. Because HTML
2797: conveys <em>meaning</em>, rather than presentation, the same page
2798: can also be used by a small browser on a mobile phone, without any
2799: change to the page. Instead of headings being in large letters as
2800: on the desktop, for example, the browser on the mobile phone might
2801: use the same size text for the whole the page, but with the
2802: headings in bold.</p>
2803:
2804: <p>But it goes further than just differences in screen size: the
2805: same page could equally be used by a blind user using a browser
2806: based around speech synthesis, which instead of displaying the page
2807: on a screen, reads the page to the user, e.g. using headphones.
2808: Instead of large text for the headings, the speech browser might
2809: use a different volume or a slower voice.</p>
2810:
2811: <p>That's not all, either. Since the browsers know which parts of
2812: the page are the headings, they can create a document outline that
2813: the user can use to quickly navigate around the document, using
2814: keys for "jump to next heading" or "jump to previous heading". Such
2815: features are especially common with speech browsers, where users
2816: would otherwise find quickly navigating a page quite difficult.</p>
2817:
2818: <p>Even beyond browsers, software can make use of this information.
2819: Search engines can use the headings to more effectively index a
2820: page, or to provide quick links to subsections of the page from
2821: their results. Tools can use the headings to create a table of
2822: contents (that is in fact how this very specification's table of
2823: contents is generated).</p>
2824:
2825: <p>This example has focused on headings, but the same principle
2826: applies to all of the semantics in HTML.</p>
2827:
2828: </div><p>Authors must not use elements, attributes, or attribute values
2829: for purposes other than their appropriate intended semantic purpose,
2830: as doing so prevents software from correctly processing the
2831: page.</p><div class="example">
2832:
1.545 mike 2833: <p>For example, the following document is non-conforming, despite
2834: being syntactically correct:</p>
2835:
2836: <pre class="bad"><!DOCTYPE HTML>
2837: <html lang="en-GB">
2838: <head> <title> Demonstration </title> </head>
2839: <body>
2840: <table>
2841: <tr> <td> My favourite animal is the cat. </td> </tr>
2842: <tr>
2843: <td>
2844: —<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>,
2845: in an essay from 1992
2846: </td>
2847: </tr>
2848: </table>
2849: </body>
2850: </html></pre>
2851:
2852: <p>...because the data placed in the cells is clearly not tabular
1.555 mike 2853: data (and the <code><a href="#the-cite-element">cite</a></code> element mis-used). This would make
2854: software that relies on these semantics fail: for example, a speech
2855: browser that allowed a blind user to navigate tables in the
2856: document would report the quote above as a table, confusing the
2857: user; similarly, a tool that extracted titles of works from pages
2858: would extract "Ernest" as the title of a work, even though it's
2859: actually a person's name, not a title.</p>
2860:
2861: <p>A corrected version of this document might be:</p>
1.545 mike 2862:
2863: <pre><!DOCTYPE HTML>
2864: <html lang="en-GB">
2865: <head> <title> Demonstration </title> </head>
2866: <body>
2867: <blockquote>
2868: <p> My favourite animal is the cat. </p>
2869: </blockquote>
2870: <p>
2871: —<a href="http://example.org/~ernest/">Ernest</a>,
2872: in an essay from 1992
2873: </p>
2874: </body>
2875: </html></pre>
2876:
1.555 mike 2877: </div><div class="example">
2878:
1.545 mike 2879: <p>This next document fragment, intended to represent the heading
2880: of a corporate site, is similarly non-conforming because the second
2881: line is not intended to be a heading of a subsection, but merely a
2882: subheading or subtitle (a subordinate heading for the same
2883: section).</p>
2884:
2885: <pre class="bad"><body>
2886: <h1>ABC Company</h1>
2887: <h2>Leading the way in widget design since 1432</h2>
2888: ...</pre>
2889:
2890: <p>The <code><a href="#the-hgroup-element">hgroup</a></code> element is intended for these kinds of
2891: situations:</p>
2892:
2893: <pre><body>
2894: <hgroup>
2895: <h1>ABC Company</h1>
2896: <h2>Leading the way in widget design since 1432</h2>
2897: </hgroup>
2898: ...</pre>
2899:
1.555 mike 2900: </div><p>Authors must not use elements, attributes, or attribute values
2901: that are not permitted by this specification or <a href="#other-applicable-specifications">other
2902: applicable specifications</a>, as doing so makes it significantly
2903: harder for the language to be extended in the future.</p><div class="example">
2904:
1.545 mike 2905: <p>In the next example, there is a non-conforming attribute value
2906: ("carpet") and a non-conforming attribute ("texture"), which
2907: is not permitted by this specification:</p>
2908:
2909: <pre class="bad"><label>Carpet: <input type="carpet" name="c" texture="deep pile"></label></pre>
2910:
2911: <p>Here would be an alternative and correct way to mark this up:</p>
2912:
2913: <pre><label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label></pre>
2914:
2915: </div><p>Through scripting and using other mechanisms, the values of
2916: attributes, text, and indeed the entire structure of the document
2917: may change dynamically while a user agent is processing it. The
2918: semantics of a document at an instant in time are those represented
2919: by the state of the document at that instant in time, and the
2920: semantics of a document can therefore change over time. User agents
2921: <span class="impl">must</span> update their presentation of the
2922: document as this occurs.</p><p class="example">HTML has a <code><a href="#the-progress-element">progress</a></code> element that
2923: describes a progress bar. If its "value" attribute is dynamically
2924: updated by a script, the UA would update the rendering to show the
2925: progress changing.</p><h4 id="elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</h4><p>The nodes representing <a href="#html-elements">HTML elements</a> in the DOM
2926: <span class="impl">must</span> implement, and expose to scripts, the
2927: interfaces listed for them in the relevant sections of this
2928: specification. This includes <a href="#html-elements">HTML elements</a> in <a href="#xml-documents">XML
2929: documents</a>, even when those documents are in another context
2930: (e.g. inside an XSLT transform).</p><p>Elements in the DOM <a href="#represents" title="represents">represent</a>
2931: things; that is, they have intrinsic <em>meaning</em>, also known as
2932: semantics.</p><p class="example">For example, an <code><a href="#the-ol-element">ol</a></code> element
2933: represents an ordered list.</p><p>The basic interface, from which all the <a href="#html-elements">HTML
2934: elements</a>' interfaces inherit, <span class="impl">and which
2935: must be used by elements that have no additional
2936: requirements,</span> is the <code><a href="#htmlelement">HTMLElement</a></code> interface.</p><pre class="idl">interface <dfn id="htmlelement" role="button" tabindex="0" aria-haspopup="true">HTMLElement</dfn> : <a href="#element">Element</a> {
2937: // <span>metadata attributes</span>
2938: attribute DOMString <a href="#dom-title" title="dom-title">title</a>;
2939: attribute DOMString <a href="#dom-lang" title="dom-lang">lang</a>;
2940: attribute DOMString <a href="#dom-dir" title="dom-dir">dir</a>;
2941: attribute <span>DOMString</span> <a href="#dom-classname" title="dom-className">className</a>;
2942: readonly attribute <a href="#domtokenlist">DOMTokenList</a> <a href="#dom-classlist" title="dom-classList">classList</a>;
2943: readonly attribute <a href="#domstringmap">DOMStringMap</a> <a href="#dom-dataset" title="dom-dataset">dataset</a>;
2944:
2945: // <a href="#editing">user interaction</a>
2946: attribute boolean <a href="#dom-hidden" title="dom-hidden">hidden</a>;
2947: void <a href="#dom-click" title="dom-click">click</a>();
2948: attribute long <a href="#dom-tabindex" title="dom-tabindex">tabIndex</a>;
2949: void <a href="#dom-focus" title="dom-focus">focus</a>();
2950: void <a href="#dom-blur" title="dom-blur">blur</a>();
2951: attribute DOMString <a href="#dom-accesskey" title="dom-accessKey">accessKey</a>;
2952: readonly attribute DOMString <a href="#dom-accesskeylabel" title="dom-accessKeyLabel">accessKeyLabel</a>;
2953: attribute boolean <a href="#dom-draggable" title="dom-draggable">draggable</a>;
2954: [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-dropzone" title="dom-dropzone">dropzone</a>;
2955: attribute DOMString <a href="#dom-contenteditable" title="dom-contentEditable">contentEditable</a>;
2956: readonly attribute boolean <a href="#dom-iscontenteditable" title="dom-isContentEditable">isContentEditable</a>;
2957: attribute <a href="#htmlmenuelement">HTMLMenuElement</a>? <a href="#dom-contextmenu" title="dom-contextMenu">contextMenu</a>;
2958: attribute boolean <a href="#dom-spellcheck" title="dom-spellcheck">spellcheck</a>;
2959:
2960: // <a href="#command-api">command API</a>
2961: readonly attribute DOMString? <a href="#dom-command-ro-commandtype" title="dom-command-ro-commandType">commandType</a>;
2962: readonly attribute DOMString? <a href="#dom-command-ro-commandlabel" title="dom-command-ro-commandLabel">commandLabel</a>;
2963: readonly attribute DOMString? <a href="#dom-command-ro-commandicon" title="dom-command-ro-commandIcon">commandIcon</a>;
2964: readonly attribute boolean? <a href="#dom-command-ro-commandhidden" title="dom-command-ro-commandHidden">commandHidden</a>;
2965: readonly attribute boolean? <a href="#dom-command-ro-commanddisabled" title="dom-command-ro-commandDisabled">commandDisabled</a>;
2966: readonly attribute boolean? <a href="#dom-command-ro-commandchecked" title="dom-command-ro-commandChecked">commandChecked</a>;
2967: // <span>styling</span>
2968: readonly attribute <span>CSSStyleDeclaration</span> <a href="#dom-style" title="dom-style">style</a>;
2969:
2970: // <a href="#event-handler-idl-attributes">event handler IDL attributes</a>
1.610 mike 2971: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onabort" title="handler-onabort">onabort</a>;
2972: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onblur" title="handler-onblur">onblur</a>;
2973: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplay" title="handler-oncanplay">oncanplay</a>;
2974: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>;
2975: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onchange" title="handler-onchange">onchange</a>;
2976: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onclick" title="handler-onclick">onclick</a>;
2977: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>;
2978: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncuechange" title="handler-oncuechange">oncuechange</a>;
2979: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondblclick" title="handler-ondblclick">ondblclick</a>;
2980: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondrag" title="handler-ondrag">ondrag</a>;
2981: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragend" title="handler-ondragend">ondragend</a>;
2982: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragenter" title="handler-ondragenter">ondragenter</a>;
2983: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragleave" title="handler-ondragleave">ondragleave</a>;
2984: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragover" title="handler-ondragover">ondragover</a>;
2985: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragstart" title="handler-ondragstart">ondragstart</a>;
2986: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondrop" title="handler-ondrop">ondrop</a>;
2987: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>;
2988: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onemptied" title="handler-onemptied">onemptied</a>;
2989: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onended" title="handler-onended">onended</a>;
2990: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onerror" title="handler-onerror">onerror</a>;
2991: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onfocus" title="handler-onfocus">onfocus</a>;
2992: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oninput" title="handler-oninput">oninput</a>;
2993: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oninvalid" title="handler-oninvalid">oninvalid</a>;
2994: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeydown" title="handler-onkeydown">onkeydown</a>;
2995: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeypress" title="handler-onkeypress">onkeypress</a>;
2996: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeyup" title="handler-onkeyup">onkeyup</a>;
2997: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onload" title="handler-onload">onload</a>;
2998: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>;
2999: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>;
3000: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadstart" title="handler-onloadstart">onloadstart</a>;
3001: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousedown" title="handler-onmousedown">onmousedown</a>;
3002: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousemove" title="handler-onmousemove">onmousemove</a>;
3003: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseout" title="handler-onmouseout">onmouseout</a>;
3004: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseover" title="handler-onmouseover">onmouseover</a>;
3005: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseup" title="handler-onmouseup">onmouseup</a>;
3006: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>;
3007: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onpause" title="handler-onpause">onpause</a>;
3008: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplay" title="handler-onplay">onplay</a>;
3009: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplaying" title="handler-onplaying">onplaying</a>;
3010: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onprogress" title="handler-onprogress">onprogress</a>;
3011: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onratechange" title="handler-onratechange">onratechange</a>;
3012: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onreset" title="handler-onreset">onreset</a>;
3013: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onscroll" title="handler-onscroll">onscroll</a>;
3014: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onseeked" title="handler-onseeked">onseeked</a>;
3015: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onseeking" title="handler-onseeking">onseeking</a>;
3016: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onselect" title="handler-onselect">onselect</a>;
3017: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onshow" title="handler-onshow">onshow</a>;
3018: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onstalled" title="handler-onstalled">onstalled</a>;
3019: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onsubmit" title="handler-onsubmit">onsubmit</a>;
3020: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onsuspend" title="handler-onsuspend">onsuspend</a>;
3021: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>;
3022: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>;
3023: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onwaiting" title="handler-onwaiting">onwaiting</a>;
1.545 mike 3024: };
3025:
3026: interface <dfn id="htmlunknownelement" role="button" tabindex="0" aria-haspopup="true">HTMLUnknownElement</dfn> : <a href="#htmlelement">HTMLElement</a> { };</pre><p>The <code><a href="#htmlelement">HTMLElement</a></code> interface holds methods and
3027: attributes related to a number of disparate features, and the
3028: members of this interface are therefore described in various
3029: different sections of this specification.</p><h4 id="global-attributes"><span class="secno">3.2.3 </span><dfn role="button" tabindex="0" aria-haspopup="true">Global attributes</dfn></h4><p>The following attributes are common to and may be specified on
3030: all <a href="#html-elements">HTML elements</a><span class="impl"> (even those not
3031: defined in this specification)</span>:</p><ul class="brief"><li><code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code></li>
3032: <li><code title="attr-class"><a href="#classes">class</a></code></li>
3033: <li><code title="attr-contenteditable"><a href="#attr-contenteditable">contenteditable</a></code></li>
3034: <li><code title="attr-contextmenu"><a href="#attr-contextmenu">contextmenu</a></code></li>
3035: <li><code title="attr-dir"><a href="#the-dir-attribute">dir</a></code></li>
3036: <li><code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code></li>
3037: <li><code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code></li>
3038: <li><code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code></li>
3039: <li><code title="attr-id"><a href="#the-id-attribute">id</a></code></li>
3040: <li><code title="attr-lang"><a href="#attr-lang">lang</a></code></li>
3041: <li><code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code></li>
3042: <li><code title="attr-style"><a href="#the-style-attribute">style</a></code></li>
3043: <li><code title="attr-tabindex"><a href="#attr-tabindex">tabindex</a></code></li>
3044: <li><code title="attr-title"><a href="#the-title-attribute">title</a></code></li>
3045: </ul><hr><p>The following <a href="#event-handler-content-attributes">event handler content attributes</a> may
3046: be specified on any <a href="#html-elements" title="HTML elements">HTML
3047: element</a>:</p><ul class="brief"><li><code title="handler-onabort"><a href="#handler-onabort">onabort</a></code></li>
3048: <li><code title="handler-onblur"><a href="#handler-onblur">onblur</a></code>*</li>
3049: <li><code title="handler-oncanplay"><a href="#handler-oncanplay">oncanplay</a></code></li>
3050: <li><code title="handler-oncanplaythrough"><a href="#handler-oncanplaythrough">oncanplaythrough</a></code></li>
3051: <li><code title="handler-onchange"><a href="#handler-onchange">onchange</a></code></li>
3052: <li><code title="handler-onclick"><a href="#handler-onclick">onclick</a></code></li>
3053: <li><code title="handler-oncontextmenu"><a href="#handler-oncontextmenu">oncontextmenu</a></code></li>
3054: <li><code title="handler-oncuechange"><a href="#handler-oncuechange">oncuechange</a></code></li>
3055: <li><code title="handler-ondblclick"><a href="#handler-ondblclick">ondblclick</a></code></li>
3056: <li><code title="handler-ondrag"><a href="#handler-ondrag">ondrag</a></code></li>
3057: <li><code title="handler-ondragend"><a href="#handler-ondragend">ondragend</a></code></li>
3058: <li><code title="handler-ondragenter"><a href="#handler-ondragenter">ondragenter</a></code></li>
3059: <li><code title="handler-ondragleave"><a href="#handler-ondragleave">ondragleave</a></code></li>
3060: <li><code title="handler-ondragover"><a href="#handler-ondragover">ondragover</a></code></li>
3061: <li><code title="handler-ondragstart"><a href="#handler-ondragstart">ondragstart</a></code></li>
3062: <li><code title="handler-ondrop"><a href="#handler-ondrop">ondrop</a></code></li>
3063: <li><code title="handler-ondurationchange"><a href="#handler-ondurationchange">ondurationchange</a></code></li>
3064: <li><code title="handler-onemptied"><a href="#handler-onemptied">onemptied</a></code></li>
3065: <li><code title="handler-onended"><a href="#handler-onended">onended</a></code></li>
3066: <li><code title="handler-onerror"><a href="#handler-onerror">onerror</a></code>*</li>
3067: <li><code title="handler-onfocus"><a href="#handler-onfocus">onfocus</a></code>*</li>
3068: <li><code title="handler-oninput"><a href="#handler-oninput">oninput</a></code></li>
3069: <li><code title="handler-oninvalid"><a href="#handler-oninvalid">oninvalid</a></code></li>
3070: <li><code title="handler-onkeydown"><a href="#handler-onkeydown">onkeydown</a></code></li>
3071: <li><code title="handler-onkeypress"><a href="#handler-onkeypress">onkeypress</a></code></li>
3072: <li><code title="handler-onkeyup"><a href="#handler-onkeyup">onkeyup</a></code></li>
3073: <li><code title="handler-onload"><a href="#handler-onload">onload</a></code>*</li>
3074: <li><code title="handler-onloadeddata"><a href="#handler-onloadeddata">onloadeddata</a></code></li>
3075: <li><code title="handler-onloadedmetadata"><a href="#handler-onloadedmetadata">onloadedmetadata</a></code></li>
3076: <li><code title="handler-onloadstart"><a href="#handler-onloadstart">onloadstart</a></code></li>
3077: <li><code title="handler-onmousedown"><a href="#handler-onmousedown">onmousedown</a></code></li>
3078: <li><code title="handler-onmousemove"><a href="#handler-onmousemove">onmousemove</a></code></li>
3079: <li><code title="handler-onmouseout"><a href="#handler-onmouseout">onmouseout</a></code></li>
3080: <li><code title="handler-onmouseover"><a href="#handler-onmouseover">onmouseover</a></code></li>
3081: <li><code title="handler-onmouseup"><a href="#handler-onmouseup">onmouseup</a></code></li>
3082: <li><code title="handler-onmousewheel"><a href="#handler-onmousewheel">onmousewheel</a></code></li>
3083: <li><code title="handler-onpause"><a href="#handler-onpause">onpause</a></code></li>
3084: <li><code title="handler-onplay"><a href="#handler-onplay">onplay</a></code></li>
3085: <li><code title="handler-onplaying"><a href="#handler-onplaying">onplaying</a></code></li>
3086: <li><code title="handler-onprogress"><a href="#handler-onprogress">onprogress</a></code></li>
3087: <li><code title="handler-onratechange"><a href="#handler-onratechange">onratechange</a></code></li>
3088: <li><code title="handler-onreset"><a href="#handler-onreset">onreset</a></code></li>
3089: <li><code title="handler-onscroll"><a href="#handler-onscroll">onscroll</a></code>*</li>
3090: <li><code title="handler-onseeked"><a href="#handler-onseeked">onseeked</a></code></li>
3091: <li><code title="handler-onseeking"><a href="#handler-onseeking">onseeking</a></code></li>
3092: <li><code title="handler-onselect"><a href="#handler-onselect">onselect</a></code></li>
3093: <li><code title="handler-onshow"><a href="#handler-onshow">onshow</a></code></li>
3094: <li><code title="handler-onstalled"><a href="#handler-onstalled">onstalled</a></code></li>
3095: <li><code title="handler-onsubmit"><a href="#handler-onsubmit">onsubmit</a></code></li>
3096: <li><code title="handler-onsuspend"><a href="#handler-onsuspend">onsuspend</a></code></li>
3097: <li><code title="handler-ontimeupdate"><a href="#handler-ontimeupdate">ontimeupdate</a></code></li>
3098: <li><code title="handler-onvolumechange"><a href="#handler-onvolumechange">onvolumechange</a></code></li>
3099: <li><code title="handler-onwaiting"><a href="#handler-onwaiting">onwaiting</a></code></li>
3100: </ul><p class="note">The attributes marked with an asterisk have a
1.295 mike 3101: different meaning when specified on <code><a href="#the-body-element">body</a></code> elements as
1.1 mike 3102: those elements expose <a href="#event-handlers">event handlers</a> of the
3103: <code><a href="#window">Window</a></code> object with the same names.</p><p class="note">While these attributes apply to all elements, they
3104: are not useful on all elements. For example, only <a href="#media-element" title="media
3105: element">media elements</a> will ever receive a <code title="event-media-volumechange"><a href="#event-media-volumechange">volumechange</a></code> event fired by
1.545 mike 3106: the user agent.</p><hr><p><a href="#custom-data-attribute" title="custom data attribute">Custom data attributes</a>
3107: (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
3108: specific to the page.</p><hr><p>In <a href="#html-documents">HTML documents</a>, elements in the <a href="#html-namespace-0">HTML
3109: namespace</a> may have an <code title="">xmlns</code> attribute
3110: specified, if, and only if, it has the exact value
3111: "<code>http://www.w3.org/1999/xhtml</code>". This does not apply to
3112: <a href="#xml-documents">XML documents</a>.</p><p class="note">In HTML, the <code title="">xmlns</code> attribute
1.1 mike 3113: has absolutely no effect. It is basically a talisman. It is allowed
3114: merely to make migration to and from XHTML mildly easier. When
3115: parsed by an <a href="#html-parser">HTML parser</a>, the attribute ends up in no
3116: namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>"
3117: namespace like namespace declaration attributes in XML do.</p><p class="note">In XML, an <code title="">xmlns</code> attribute is
3118: part of the namespace declaration mechanism, and an element cannot
3119: actually have an <code title="">xmlns</code> attribute in no
1.545 mike 3120: namespace specified.</p><hr><p>The XML specification also allows the use of the <code title="attr-xml-space">xml:space</code> attribute in the <a href="#xml-namespace">XML
3121: namespace</a> on any element in an <a href="#xml-documents" title="XML
3122: documents">XML document</a>. This attribute has no effect on
3123: <a href="#html-elements">HTML elements</a>, as the default behavior in HTML is to
3124: preserve whitespace. <a href="#refsXML">[XML]</a></p><p class="note">There is no way to serialize the <code title="attr-xml-space">xml:space</code> attribute on <a href="#html-elements">HTML
3125: elements</a> in the <code><a href="#text-html">text/html</a></code> syntax.</p><hr><p>To enable assistive technology products to expose a more
3126: fine-grained interface than is otherwise possible with HTML elements
3127: and attributes, a set of <a href="#wai-aria" title="WAI-ARIA">annotations for
3128: assistive technology products</a> can be specified (the ARIA
3129: <code title="attr-aria-role">role</code> and <code title="attr-aria-*">aria-*</code> attributes).</p><h5 id="the-id-attribute"><span class="secno">3.2.3.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>id</code></dfn> attribute</h5><p>The <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute specifies its
1.614 mike 3130: element's <a href="#concept-id" title="concept-id">unique identifier (ID)</a>. <a href="#refsDOMCORE">[DOMCORE]</a></p><p>The value must be unique amongst all the <a href="#concept-id" title="concept-id">IDs</a> in the element's <a href="#home-subtree">home
1.545 mike 3131: subtree</a> and must contain at least one character. The value
3132: must not contain any <a href="#space-character" title="space character">space
3133: characters</a>.</p><p class="note">An element's <a href="#concept-id" title="concept-id">unique
1.1 mike 3134: identifier</a> can be used for a variety of purposes, most
3135: notably as a way to link to specific parts of a document using
3136: fragment identifiers, as a way to target an element when scripting,
1.614 mike 3137: and as a way to style a specific element from CSS.</p><h5 id="the-title-attribute"><span class="secno">3.2.3.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn> attribute</h5><p>The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute
1.545 mike 3138: <a href="#represents">represents</a> advisory information for the element, such
3139: as would be appropriate for a tooltip. On a link, this could be the
3140: title or a description of the target resource; on an image, it could
3141: be the image credit or a description of the image; on a paragraph,
3142: it could be a footnote or commentary on the text; on a citation, it
3143: could be further information about the source; and so forth. The
3144: value is text.</p><p>If this attribute is omitted from an element, then it implies
3145: that the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute of the
3146: nearest ancestor <a href="#html-elements" title="HTML elements">HTML element</a>
3147: with a <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute set is also
3148: relevant to this element. Setting the attribute overrides this,
3149: explicitly stating that the advisory information of any ancestors is
3150: not relevant to this element. Setting the attribute to the empty
3151: string indicates that the element has no advisory information.</p><p>If the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute's value
3152: contains U+000A LINE FEED (LF) characters, the content is split into
3153: multiple lines. Each U+000A LINE FEED (LF) character represents a
3154: line break.</p><div class="example">
3155:
3156: <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>
3157:
3158: <p>For instance, the following snippet actually defines an
3159: abbreviation's expansion <em>with a line break in it</em>:</p>
3160:
3161: <pre class="bad"><p>My logs show that there was some interest in <abbr title="Hypertext
3162: Transport Protocol">HTTP</abbr> today.</p></pre>
3163:
3164: </div><p>Some elements, such as <code><a href="#the-link-element">link</a></code>, <code><a href="#the-abbr-element">abbr</a></code>, and
3165: <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
3166: described above.</p>
3167: <p>The <dfn id="dom-title" role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn> IDL attribute
3168: must <a href="#reflect">reflect</a> the <code title="attr-title"><a href="#the-title-attribute">title</a></code>
3169: content attribute.</p>
3170: <h5 id="the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> and <code title="attr-xml-lang"><a href="#attr-xml-lang">xml:lang</a></code> attributes</h5><p>The <dfn id="attr-lang" role="button" tabindex="0" aria-haspopup="true"><code>lang</code></dfn> attribute (in
3171: no namespace) specifies the primary language for the element's
3172: contents and for any of the element's attributes that contain
3173: text. Its value must be a valid BCP 47 language tag, or the empty
3174: string. Setting the attribute to the empty string indicates that the
3175: primary language is unknown. <a href="#refsBCP47">[BCP47]</a></p><p>The <dfn id="attr-xml-lang" role="button" tabindex="0" aria-haspopup="true"><code title="">lang</code></dfn>
3176: attribute in the <a href="#xml-namespace">XML namespace</a> is defined in XML. <a href="#refsXML">[XML]</a></p><p>If these attributes are omitted from an element, then the
3177: language of this element is the same as the language of its parent
3178: element, if any.</p><p>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute in no namespace
3179: may be used on any <a href="#html-elements" title="HTML elements">HTML
3180: element</a>.</p><p>The <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code>
3181: attribute in the <span>XML namespace</span></a> may be used on
3182: <a href="#html-elements">HTML elements</a> in <a href="#xml-documents">XML documents</a>, as well as
3183: elements in other namespaces if the relevant specifications allow it
3184: (in particular, MathML and SVG allow <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attributes in the
3185: <span>XML namespace</span></a> to be specified on their
3186: elements). If both the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute
3187: in no namespace and the <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attribute in the <span>XML
3188: namespace</span></a> are specified on the same element, they must
3189: have exactly the same value when compared in an <a href="#ascii-case-insensitive">ASCII
3190: case-insensitive</a> manner.</p><p>Authors must not use the <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attribute in the <span>XML
3191: namespace</span></a> on <a href="#html-elements">HTML elements</a> in <a href="#html-documents">HTML
3192: documents</a>. To ease migration to and from XHTML, authors may
3193: specify an attribute in no namespace with no prefix and with the
3194: literal localname "<code title="">xml:lang</code>" on <a href="#html-elements">HTML
3195: elements</a> in <a href="#html-documents">HTML documents</a>, but such attributes
3196: must only be specified if a <code title="attr-lang"><a href="#attr-lang">lang</a></code>
3197: attribute in no namespace is also specified, and both attributes
3198: must have the same value when compared in an <a href="#ascii-case-insensitive">ASCII
3199: case-insensitive</a> manner.</p><p class="note">The attribute in no namespace with no prefix and
1.1 mike 3200: with the literal localname "<code title="">xml:lang</code>" has no
1.545 mike 3201: effect on language processing.</p>
3202: <p>The <dfn id="dom-lang" role="button" tabindex="0" aria-haspopup="true"><code>lang</code></dfn> IDL attribute
3203: must <a href="#reflect">reflect</a> the <code title="attr-lang"><a href="#attr-lang">lang</a></code>
3204: content attribute in no namespace.</p>
3205: <h5 id="the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>xml:base</code></dfn>
3206: attribute (XML only)</h5><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute is
3207: defined in XML Base. <a href="#refsXMLBASE">[XMLBASE]</a></p><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute may be
3208: used on elements of <a href="#xml-documents">XML documents</a>. Authors must not
3209: use the <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute in
3210: <a href="#html-documents">HTML documents</a>.</p><h5 id="the-dir-attribute"><span class="secno">3.2.3.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>dir</code></dfn> attribute</h5><p>The <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute specifies the
3211: element's text directionality. The attribute is an <a href="#enumerated-attribute">enumerated
3212: attribute</a> with the following keywords and states:</p><dl><dt>The <dfn id="attr-dir-ltr" role="button" tabindex="0" aria-haspopup="true"><code>ltr</code></dfn> keyword, which maps to the <dfn id="attr-dir-ltr-state" role="button" tabindex="0" aria-haspopup="true">ltr</dfn> state</dt>
3213:
3214: <dd>
3215:
3216: <p>Indicates that the contents of the element are explicitly
3217: directionally embedded left-to-right text.</p>
3218:
3219: </dd>
3220:
3221: <dt>The <dfn id="attr-dir-rtl" role="button" tabindex="0" aria-haspopup="true"><code>rtl</code></dfn> keyword, which maps to the <dfn id="attr-dir-rtl-state" role="button" tabindex="0" aria-haspopup="true">rtl</dfn> state</dt>
3222:
3223: <dd>
3224:
3225: <p>Indicates that the contents of the element are explicitly
3226: directionally embedded right-to-left text.</p>
3227:
3228: </dd>
3229:
3230: <dt>The <dfn id="attr-dir-auto" role="button" tabindex="0" aria-haspopup="true"><code>auto</code></dfn> keyword, which maps to the <dfn id="attr-dir-auto-state" role="button" tabindex="0" aria-haspopup="true">auto</dfn> state</dt>
3231:
3232: <dd>
3233:
3234: <p>Indicates that the contents of the element are explicitly
3235: embedded text, but that the direction is to be determined
3236: programmatically using the contents of the element (as described
3237: below).</p>
3238:
3239: <p class="note">The heuristic used by this state is very crude (it
3240: just looks at the first character with a strong directionality, in
3241: a manner analogous to the Paragraph Level determination in the
3242: bidirectional algorithm). Authors are urged to only use this value
3243: as a last resort when the direction of the text is truly unknown
3244: and no better server-side heuristic can be applied.</p>
3245:
3246: <p class="note">For <code><a href="#the-textarea-element">textarea</a></code> and <code><a href="#the-pre-element">pre</a></code>
3247: elements, the heuristic is applied on a per-paragraph level.</p>
3248:
3249: </dd>
3250:
3251: </dl><p>The attribute has no <i>invalid value default</i> and no
3252: <i>missing value default</i>.</p><p><dfn id="the-directionality" role="button" tabindex="0" aria-haspopup="true">The directionality</dfn> of an element is either '<dfn id="concept-ltr" role="button" tabindex="0" aria-haspopup="true">ltr</dfn>' or '<dfn id="concept-rtl" role="button" tabindex="0" aria-haspopup="true">rtl</dfn>', and is determined as per the first
3253: appropriate set of steps from the following list:</p><dl class="switch"><dt>If the element's <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is
3254: in the <a href="#attr-dir-ltr-state" title="attr-dir-ltr-state">ltr</a> state</dt>
3255:
3256: <dd><p><a href="#the-directionality">The directionality</a> of the element is '<a href="#concept-ltr" title="concept-ltr">ltr</a>'.</p></dd>
3257:
3258:
3259: <dt>If the element's <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is
3260: in the <a href="#attr-dir-rtl-state" title="attr-dir-rtl-state">rtl</a> state</dt>
3261:
3262: <dd><p><a href="#the-directionality">The directionality</a> of the element is '<a href="#concept-rtl" title="concept-rtl">rtl</a>'.</p></dd>
3263:
3264:
3265: <dt>If the element is 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="#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, and the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is in the <a href="#attr-dir-auto-state" title="attr-dir-auto-state">auto</a> state</dt>
3266:
3267: <dt>If the element is a <code><a href="#the-textarea-element">textarea</a></code> element and the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is in the <a href="#attr-dir-auto-state" title="attr-dir-auto-state">auto</a> state</dt>
3268:
3269: <dd>
3270:
3271: <p>If the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>
3272: contains a character of bidirectional character type AL or R, and
3273: there is no character of bidirectional character type L anywhere
3274: before it in the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>, then <a href="#the-directionality">the
3275: directionality</a> of the element is '<a href="#concept-rtl" title="concept-rtl">rtl</a>'. Otherwise, <a href="#the-directionality">the
3276: directionality</a> of the element is '<a href="#concept-ltr" title="concept-ltr">ltr</a>'.</p>
3277:
3278: </dd>
3279:
3280:
3281:
3282: <dt>If the element's <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is
3283: in the <a href="#attr-dir-auto-state" title="attr-dir-auto-state">auto</a> state</dt>
3284:
3285: <dt>If the element is a <code><a href="#the-bdi-element">bdi</a></code> element and the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is not in a defined state
3286: (i.e. it is not present or has an invalid value)</dt>
3287:
3288: <dd>
3289:
3290: <p>Find the first character in <a href="#tree-order">tree order</a> that
3291: matches the following criteria:</p>
3292:
3293: <ul><li><p>The character is from a <a href="#text-node">text node</a> that is a
3294: descendant of the element whose <a href="#the-directionality" title="the
3295: directionality">directionality</a> is being
3296: determined.</p></li>
3297:
3298: <li><p>The character is of bidirectional character type L, AL,
3299: or R. <a href="#refsBIDI">[BIDI]</a></p></li>
3300:
3301: <li>
3302:
3303: <p>The character is not in a text node that has an ancestor
3304: element that is a descendant of the element whose <a href="#the-directionality" title="the directionality">directionality</a> is being
3305: determined and that is either:</p>
3306:
3307: <ul class="brief"><li>A <code><a href="#the-bdi-element">bdi</a></code> element.
3308: </li><li>A <code><a href="#the-script-element">script</a></code> element.
3309: </li><li>A <code><a href="#the-style-element">style</a></code> element.
3310: </li><li>A <code><a href="#the-textarea-element">textarea</a></code> element.
3311: </li><li>An element with a <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute in a defined state.
3312: </li></ul></li>
3313:
3314: </ul><p>If such a character is found and it is of bidirectional
3315: character type AL or R, <a href="#the-directionality">the directionality</a> of the
3316: element is '<a href="#concept-rtl" title="concept-rtl">rtl</a>'.</p>
3317:
3318: <p>Otherwise, <a href="#the-directionality">the directionality</a> of the element is
3319: '<a href="#concept-ltr" title="concept-ltr">ltr</a>'.</p>
3320:
3321: </dd>
3322:
3323:
3324: <dt>If the element is a <a href="#root-element">root element</a> and the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is not in a defined state
3325: (i.e. it is not present or has an invalid value)</dt>
3326:
3327: <dd><p><a href="#the-directionality">The directionality</a> of the element is '<a href="#concept-ltr" title="concept-ltr">ltr</a>'.</p></dd>
3328:
3329:
3330: <dt>If the element has a parent element and the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute is not in a defined state
3331: (i.e. it is not present or has an invalid value)</dt>
3332:
3333: <dd><p><a href="#the-directionality">The directionality</a> of the element is the same
3334: as the element's parent element's <a href="#the-directionality" title="the
3335: directionality">directionality</a>.</p></dd>
3336:
3337:
3338: </dl><p>The effect of this attribute is primarily on the presentation
3339: layer. For example, the rendering section in this specification
3340: defines a mapping from this attribute to the CSS 'direction' and
3341: 'unicode-bidi' properties, and CSS defines rendering in terms of
3342: those properties.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-dir"><a href="#dom-dir">dir</a></code> [ = <var title="">value</var> ]</dt>
3343: <dd>
3344: <p>Returns <a href="#the-html-element-0">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>
3345: <p>Can be set, to either "<code title="">ltr</code>", "<code title="">rtl</code>", or "<code title="">auto</code>" to replace <a href="#the-html-element-0">the <code>html</code> element</a>'s <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute's value.</p>
3346: <p>If there is no <a href="#the-html-element-0" title="the html element"><code>html</code> element</a>, returns the empty string and ignores new values.</p>
3347: </dd>
3348:
3349: </dl>
3350: <p>The <dfn id="dom-dir" role="button" tabindex="0" aria-haspopup="true"><code>dir</code></dfn> IDL attribute on
3351: 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,
3352: <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
3353:
3354: <p>The <dfn id="dom-document-dir" role="button" tabindex="0" aria-haspopup="true"><code>dir</code></dfn> IDL
3355: attribute on <code><a href="#htmldocument">HTMLDocument</a></code> objects must
3356: <a href="#reflect">reflect</a> the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> content
3357: attribute of <a href="#the-html-element-0">the <code>html</code> element</a>, if any,
3358: <a href="#limited-to-only-known-values">limited to only known values</a>. If there is no such
3359: element, then the attribute must return the empty string and do
3360: nothing on setting.</p>
3361: <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
1.544 mike 3362: rather than using CSS, since that way their documents will continue
3363: to render correctly even in the absence of CSS (e.g. as interpreted
1.545 mike 3364: by search engines).</p><div class="example">
3365:
3366: <p>This markup fragment is of an IM conversation.</p>
3367:
3368: <pre><p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
3369: <p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
3370: <p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
3371: <p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
3372: <p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
3373: <p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p></pre>
3374:
3375:
3376: <p>Given a suitable style sheet and the default alignment styles
3377: for the <code><a href="#the-p-element">p</a></code> element, namely to align the text to the
3378: <i>start edge</i> of the paragraph, the resulting rendering could
3379: be as follows:</p>
3380:
3381: <p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." src="http://dev.w3.org/html5/spec/images/im.png"></p>
3382:
3383: <p>As noted earlier, the <code title="attr-dir-auto"><a href="#attr-dir-auto">auto</a></code>
3384: value is not a panacea. The final paragraph in this example is
3385: misinterpreted as being right-to-left text, since it begins with an
3386: Arabic character, which causes the "right?" to be to the left of
3387: the Arabic text.</p>
3388:
3389: </div><h5 id="classes"><span class="secno">3.2.3.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>class</code></dfn> attribute</h5><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have a
3390: <code title="attr-class"><a href="#classes">class</a></code> attribute specified.</p><p>The attribute, if specified, must have a value that is a
3391: <a href="#set-of-space-separated-tokens">set of space-separated tokens</a> representing the various
3392: classes that the element belongs to.</p><p class="note">Assigning classes to an element affects class
1.544 mike 3393: matching in selectors in CSS, the <code title="dom-document-getElementsByClassName">getElementsByClassName()</code>
1.545 mike 3394: method in the DOM, and other such features.</p><p>There are no additional restrictions on the tokens authors can
3395: use in the <code title="attr-class"><a href="#classes">class</a></code> attribute, but
3396: authors are encouraged to use values that describe the nature of the
3397: content, rather than values that describe the desired presentation
3398: of the content.</p>
3399: <p>The <dfn id="dom-classname" role="button" tabindex="0" aria-haspopup="true"><code>className</code></dfn> and
3400: <dfn id="dom-classlist" role="button" tabindex="0" aria-haspopup="true"><code>classList</code></dfn> IDL
3401: attributes must both <a href="#reflect">reflect</a> the <code title="attr-class"><a href="#classes">class</a></code> content attribute.</p>
3402: <h5 id="the-style-attribute"><span class="secno">3.2.3.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>style</code></dfn> attribute</h5><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
3403: <span>CSS styling attribute</span> as defined by the CSS Styling
3404: Attribute Syntax specification. <a href="#refsCSSATTR">[CSSATTR]</a></p><p>Documents that use <code title="attr-style"><a href="#the-style-attribute">style</a></code>
3405: attributes on any of their elements must still be comprehensible and
3406: usable if those attributes were removed.</p><p class="note">In particular, using the <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute to hide and show content,
1.544 mike 3407: or to convey meaning that is otherwise not included in the document,
1.545 mike 3408: is non-conforming. (To hide and show content, use the <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute.)</p><hr><dl class="domintro"><dt><var title="">element</var> . <code title="dom-style" id="dom-style"><a href="#dom-style">style</a></code></dt>
3409: <dd>
3410: <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>
3411: </dd>
3412:
3413: </dl><div class="example">
3414:
3415: <p>In the following example, the words that refer to colors are
3416: 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
3417: up in the relevant colors in visual media.</p>
3418:
3419: <pre><p>My sweat suit is <span style="color: green; background:
3420: transparent">green</span> and my eyes are <span style="color: blue;
3421: background: transparent">blue</span>.</p></pre>
3422:
3423: </div><h5 id="embedding-custom-non-visible-data-with-the-data-attributes"><span class="secno">3.2.3.8 </span><dfn role="button" tabindex="0" aria-haspopup="true">Embedding custom non-visible data</dfn> with the <code title="attr-data-*"><a href="#attr-data">data-*</a></code> attributes</h5><p>A <dfn id="custom-data-attribute" role="button" tabindex="0" aria-haspopup="true">custom data attribute</dfn> is an attribute in no
3424: namespace whose name starts with the string "<dfn id="attr-data" role="button" tabindex="0" aria-haspopup="true"><code>data-</code></dfn>", has at least one
3425: character after the hyphen, is <a href="#xml-compatible">XML-compatible</a>, and
3426: contains no characters in the range U+0041 to U+005A (LATIN CAPITAL
3427: LETTER A to LATIN CAPITAL LETTER Z).</p><p class="note">All attributes on <a href="#html-elements">HTML elements</a> in
1.544 mike 3428: <a href="#html-documents">HTML documents</a> get ASCII-lowercased automatically, so
3429: the restriction on ASCII uppercase letters doesn't affect such
1.545 mike 3430: documents.</p><p><a href="#custom-data-attribute" title="custom data attribute">Custom data attributes</a>
3431: are intended to store custom data private to the page or
3432: application, for which there are no more appropriate attributes or
3433: elements.</p><p>These attributes are not intended for use by software that is
3434: independent of the site that uses the attributes.</p><div class="example">
3435:
3436: <p>For instance, a site about music could annotate list items
3437: representing tracks in an album with custom data attributes
3438: containing the length of each track. This information could then be
3439: used by the site itself to allow the user to sort the list by track
3440: length, or to filter the list for tracks of certain lengths.</p>
3441:
3442: <pre><ol>
3443: <li data-length="2m11s">Beyond The Sea</li>
3444: ...
3445: </ol></pre>
3446:
3447: <p>It would be inappropriate, however, for the user to use generic
3448: software not associated with that music site to search for tracks
3449: of a certain length by looking at this data.</p>
3450:
3451: <p>This is because these attributes are intended for use by the
3452: site's own scripts, and are not a generic extension mechanism for
3453: publicly-usable metadata.</p>
3454:
3455: </div><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have
3456: any number of <a href="#custom-data-attribute" title="custom data attribute">custom data
3457: attributes</a> specified, with any value.</p><hr><dl class="domintro"><dt><var title="">element</var> . <code title="dom-dataset" id="dom-dataset"><a href="#dom-dataset">dataset</a></code></dt>
3458: <dd>
3459:
3460: <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>
3461:
3462: <p>Hyphenated names become camel-cased. For example, <code title="">data-foo-bar=""</code> becomes <code title="">element.dataset.fooBar</code>.</p>
3463:
3464: </dd>
3465:
3466: </dl><div class="example">
3467:
3468: <p>If a Web page wanted an element to represent a space ship,
3469: 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>
3470:
3471: <pre><div class="spaceship" data-ship-id="92432"
3472: data-weapons="laser 2" data-shields="50%"
3473: data-x="30" data-y="10" data-z="90">
3474: <button class="fire"
3475: onclick="spaceships[this.parentNode.dataset.shipId].fire()">
3476: Fire
3477: </button>
3478: </div></pre>
3479:
3480: <p>Notice how the hyphenated attribute name becomes camel-cased in
3481: the API.</p>
3482:
3483: </div><p>Authors should carefully design such extensions so that when the
3484: attributes are ignored and any associated CSS dropped, the page is
3485: still usable.</p><p>JavaScript libraries may use the <a href="#custom-data-attribute" title="custom data
3486: attribute">custom data attributes</a>, as they are considered to
3487: be part of the page on which they are used. Authors of libraries
3488: that are reused by many authors are encouraged to include their name
3489: in the attribute names, to reduce the risk of clashes. Where it
3490: makes sense, library authors are also encouraged to make the exact
3491: name used in the attribute names customizable, so that libraries
3492: whose authors unknowingly picked the same name can be used on the
3493: same page, and so that multiple versions of a particular library can
3494: be used on the same page even when those versions are not mutually
3495: compatible.</p><div class="example">
3496:
3497: <p>For example, a library called "DoQuery" could use attribute
3498: names like <code title="">data-doquery-range</code>, and a library
3499: called "jJo" could use attributes names like <code title="">data-jjo-range</code>. The jJo library could also provide
3500: an API to set which prefix to use (e.g. <code title="">J.setDataPrefix('j2')</code>, making the attributes have
3501: names like <code title="">data-j2-range</code>).</p>
3502:
3503: </div><h4 id="element-definitions"><span class="secno">3.2.4 </span>Element definitions</h4><p>Each element in this specification has a definition that includes
3504: the following information:</p><dl><dt>Categories</dt>
3505:
3506: <dd><p>A list of <a href="#content-categories" title="content categories">categories</a>
3507: to which the element belongs. These are used when defining the
3508: <a href="#content-models">content models</a> for each element.</p></dd>
3509:
3510:
3511: <dt>Contexts in which this element can be used</dt>
3512:
3513: <dd>
3514:
3515: <p>A <em>non-normative</em> description of where the element can
3516: be used. This information is redundant with the content models of
3517: elements that allow this one as a child, and is provided only as a
3518: convenience.</p>
3519:
3520: <p class="note">For simplicity, only the most specific
3521: expectations are listed. For example, an element that is both
3522: <a href="#flow-content">flow content</a> and <a href="#phrasing-content">phrasing content</a> can be
3523: used anywhere that either <a href="#flow-content">flow content</a> or
3524: <a href="#phrasing-content">phrasing content</a> is expected, but since anywhere that
3525: <a href="#flow-content">flow content</a> is expected, <a href="#phrasing-content">phrasing
3526: content</a> is also expected (since all <a href="#phrasing-content">phrasing
3527: content</a> is <a href="#flow-content">flow content</a>), only "where
3528: <a href="#phrasing-content">phrasing content</a> is expected" will be listed.</p>
3529:
3530: </dd>
3531:
3532:
3533: <dt>Content model</dt>
3534:
3535: <dd><p>A normative description of what content must be included as
3536: children and descendants of the element.</p></dd>
3537:
3538:
3539: <dt>Content attributes</dt>
3540:
3541: <dd><p>A normative list of attributes that may be specified on the
3542: element (except where otherwise disallowed).</p></dd>
3543:
3544:
3545: <dt>DOM interface</dt>
3546:
3547: <dd><p>A normative definition of a DOM interface that such elements
3548: must implement.</p></dd>
3549:
3550: </dl><p>This is then followed by a description of what the element
3551: <a href="#represents">represents</a>, along with any additional normative
3552: conformance criteria that may apply to authors<span class="impl" title=""> and implementations</span>. Examples are sometimes
3553: also included.</p><h5 id="attributes"><span class="secno">3.2.4.1 </span>Attributes</h5><p id="attribute-text">Except where otherwise specified, attributes
3554: on <a href="#html-elements">HTML elements</a> may have any string value, including
3555: the empty string. Except where explicitly stated, there is no
3556: restriction on what text can be specified in such attributes.</p><h4 id="content-models"><span class="secno">3.2.5 </span><dfn role="button" tabindex="0" aria-haspopup="true">Content models</dfn></h4><p>Each element defined in this specification has a content model: a
3557: description of the element's expected contents. An <a href="#html-elements" title="HTML
3558: elements">HTML element</a> must have contents that match the
3559: requirements described in the element's content model.</p><p class="note">As noted in the conformance and terminology
1.544 mike 3560: sections, for the purposes of determining if an element matches its
3561: content model or not, <a href="#text-node" title="text
3562: node"><code>CDATASection</code> nodes in the DOM are treated as
3563: equivalent to <code>Text</code> nodes</a>, and <a href="#entity-references">entity reference nodes are treated as if
1.545 mike 3564: they were expanded in place</a>.</p><p>The <a href="#space-character" title="space character">space characters</a> are
3565: always allowed between elements. User agents represent these
3566: characters between elements in the source markup as text nodes in
3567: the DOM. 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
3568: those characters are considered <dfn id="inter-element-whitespace" role="button" tabindex="0" aria-haspopup="true">inter-element
3569: whitespace</dfn>.</p><p><a href="#inter-element-whitespace">Inter-element whitespace</a>, comment nodes, and
3570: processing instruction nodes must be ignored when establishing
3571: whether an element's contents match the element's content model or
3572: not, and must be ignored when following algorithms that define
3573: document and element semantics.</p><p class="note">Thus, an element <var title="">A</var> is said to be
1.544 mike 3574: <i>preceded or followed</i> by a second element <var title="">B</var> if <var title="">A</var> and <var title="">B</var>
3575: have the same parent node and there are no other element nodes or
3576: text nodes (other than <a href="#inter-element-whitespace">inter-element whitespace</a>)
3577: between them. Similarly, a node is the <i>only child</i> of an
3578: element if that element contains no other nodes other than
3579: <a href="#inter-element-whitespace">inter-element whitespace</a>, comment nodes, and processing
1.545 mike 3580: instruction nodes.</p><p>Authors must not use <a href="#html-elements">HTML elements</a> anywhere except
3581: where they are explicitly allowed, as defined for each element, or
3582: as explicitly required by other specifications. For XML compound
3583: documents, these contexts could be inside elements from other
3584: namespaces, if those elements are defined as providing the relevant
3585: contexts.</p><div class="example">
3586: <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
3587: contain a single HTML <code><a href="#the-div-element">div</a></code> element. Thus, a
3588: <code><a href="#the-div-element">div</a></code> element is allowed in that context, even though
3589: this is not explicitly normatively stated by this specification. <a href="#refsATOM">[ATOM]</a></p>
3590: </div><p>In addition, <a href="#html-elements">HTML elements</a> may be orphan nodes
3591: (i.e. without a parent node).</p><div class="example">
3592:
3593: <p>For example, creating a <code><a href="#the-td-element">td</a></code> element and storing it
3594: in a global variable in a script is conforming, even though
3595: <code><a href="#the-td-element">td</a></code> elements are otherwise only supposed to be used
3596: inside <code><a href="#the-tr-element">tr</a></code> elements.</p>
3597:
3598: <pre>var data = {
3599: name: "Banana",
3600: cell: document.createElement('td'),
3601: };</pre>
3602:
3603: </div><h5 id="kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</h5><p>Each element in HTML falls into zero or more <dfn id="content-categories" role="button" tabindex="0" aria-haspopup="true">categories</dfn> that group elements with similar
3604: characteristics together. The following broad categories are used in
3605: this specification:</p><ul class="brief"><li><a href="#metadata-content">Metadata content</a></li>
3606: <li><a href="#flow-content">Flow content</a></li>
3607: <li><a href="#sectioning-content">Sectioning content</a></li>
3608: <li><a href="#heading-content">Heading content</a></li>
3609: <li><a href="#phrasing-content">Phrasing content</a></li>
3610: <li><a href="#embedded-content">Embedded content</a></li>
3611: <li><a href="#interactive-content">Interactive content</a></li>
3612: </ul><p class="note">Some elements also fall into other categories, which
3613: are defined in other parts of this specification.</p><p>These categories are related as follows:</p><p><object data="images/content-venn.svg" height="288" width="1000"><img alt="Sectioning content, heading content, phrasing content, and
3614: embedded content are all types of flow content. Embedded content is
3615: also a type of phrasing content." src="http://dev.w3.org/html5/spec/images/content-venn.png"></object></p><p>Other categories are also used for specific purposes, e.g. form
3616: controls are specified using a number of categories to define common
3617: requirements. Some elements have unique requirements and do not fit
3618: into any particular category.</p><h6 id="metadata-content-0"><span class="secno">3.2.5.1.1 </span>Metadata content</h6><p><dfn id="metadata-content" role="button" tabindex="0" aria-haspopup="true">Metadata content</dfn> is content that sets up the
3619: presentation or behavior of the rest of the content, or that sets
3620: up the relationship of the document with other documents, or that
3621: conveys other "out of band" information.</p><ul class="brief category-list"><li><code><a href="#the-base-element">base</a></code></li>
3622: <li><code><a href="#the-command-element">command</a></code></li>
3623: <li><code><a href="#the-link-element">link</a></code></li>
3624: <li><code><a href="#the-meta-element">meta</a></code></li>
3625: <li><code><a href="#the-noscript-element">noscript</a></code></li>
3626: <li><code><a href="#the-script-element">script</a></code></li>
3627: <li><code><a href="#the-style-element">style</a></code></li>
3628: <li><code><a href="#the-title-element">title</a></code></li>
3629: </ul><p>Elements from other namespaces whose semantics are primarily
3630: metadata-related (e.g. RDF) are also <a href="#metadata-content">metadata
3631: content</a>.</p><div class="example">
3632:
3633: <p>Thus, in the XML serialization, one can use RDF, like this:</p>
3634:
3635: <pre><html xmlns="http://www.w3.org/1999/xhtml"
3636: xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
3637: <head>
3638: <title>Hedral's Home Page</title>
3639: <r:RDF>
3640: <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
3641: r:about="http://hedral.example.com/#">
3642: <fullName>Cat Hedral</fullName>
3643: <mailbox r:resource="mailto:hedral@damowmow.com"/>
3644: <personalTitle>Sir</personalTitle>
3645: </Person>
3646: </r:RDF>
3647: </head>
3648: <body>
3649: <h1>My home page</h1>
3650: <p>I like playing with string, I guess. Sister says squirrels are fun
3651: too so sometimes I follow her to play with them.</p>
3652: </body>
3653: </html></pre>
3654:
3655: <p>This isn't possible in the HTML serialization, however.</p>
3656:
3657: </div><h6 id="flow-content-0"><span class="secno">3.2.5.1.2 </span>Flow content</h6><p>Most elements that are used in the body of documents and
3658: applications are categorized as <dfn id="flow-content" role="button" tabindex="0" aria-haspopup="true">flow content</dfn>.</p><ul class="brief category-list"><li><code><a href="#the-a-element">a</a></code></li>
3659: <li><code><a href="#the-abbr-element">abbr</a></code></li>
3660: <li><code><a href="#the-address-element">address</a></code></li>
3661: <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>
3662: <li><code><a href="#the-article-element">article</a></code></li>
3663: <li><code><a href="#the-aside-element">aside</a></code></li>
3664: <li><code><a href="#the-audio-element">audio</a></code></li>
3665: <li><code><a href="#the-b-element">b</a></code></li>
3666: <li><code><a href="#the-bdi-element">bdi</a></code></li>
3667: <li><code><a href="#the-bdo-element">bdo</a></code></li>
3668: <li><code><a href="#the-blockquote-element">blockquote</a></code></li>
3669: <li><code><a href="#the-br-element">br</a></code></li>
3670: <li><code><a href="#the-button-element">button</a></code></li>
3671: <li><code><a href="#the-canvas-element">canvas</a></code></li>
3672: <li><code><a href="#the-cite-element">cite</a></code></li>
3673: <li><code><a href="#the-code-element">code</a></code></li>
3674: <li><code><a href="#the-command-element">command</a></code></li>
3675: <li><code><a href="#the-datalist-element">datalist</a></code></li>
3676: <li><code><a href="#the-del-element">del</a></code></li>
3677: <li><code><a href="#the-details-element">details</a></code></li>
3678: <li><code><a href="#the-dfn-element">dfn</a></code></li>
3679: <li><code><a href="#the-div-element">div</a></code></li>
3680: <li><code><a href="#the-dl-element">dl</a></code></li>
3681: <li><code><a href="#the-em-element">em</a></code></li>
3682: <li><code><a href="#the-embed-element">embed</a></code></li>
3683: <li><code><a href="#the-fieldset-element">fieldset</a></code></li>
3684: <li><code><a href="#the-figure-element">figure</a></code></li>
3685: <li><code><a href="#the-footer-element">footer</a></code></li>
3686: <li><code><a href="#the-form-element">form</a></code></li>
3687: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code></li>
3688: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code></li>
3689: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code></li>
3690: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code></li>
3691: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code></li>
3692: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code></li>
3693: <li><code><a href="#the-header-element">header</a></code></li>
3694: <li><code><a href="#the-hgroup-element">hgroup</a></code></li>
3695: <li><code><a href="#the-hr-element">hr</a></code></li>
3696: <li><code><a href="#the-i-element">i</a></code></li>
3697: <li><code><a href="#the-iframe-element">iframe</a></code></li>
3698: <li><code><a href="#the-img-element">img</a></code></li>
3699: <li><code><a href="#the-input-element">input</a></code></li>
3700: <li><code><a href="#the-ins-element">ins</a></code></li>
3701: <li><code><a href="#the-kbd-element">kbd</a></code></li>
3702: <li><code><a href="#the-keygen-element">keygen</a></code></li>
3703: <li><code><a href="#the-label-element">label</a></code></li>
3704: <li><code><a href="#the-map-element">map</a></code></li>
3705: <li><code><a href="#the-mark-element">mark</a></code></li>
3706: <li><code><a href="#math">math</a></code></li>
3707: <li><code><a href="#the-menu-element">menu</a></code></li>
3708: <li><code><a href="#the-meter-element">meter</a></code></li>
3709: <li><code><a href="#the-nav-element">nav</a></code></li>
3710: <li><code><a href="#the-noscript-element">noscript</a></code></li>
3711: <li><code><a href="#the-object-element">object</a></code></li>
3712: <li><code><a href="#the-ol-element">ol</a></code></li>
3713: <li><code><a href="#the-output-element">output</a></code></li>
3714: <li><code><a href="#the-p-element">p</a></code></li>
3715: <li><code><a href="#the-pre-element">pre</a></code></li>
3716: <li><code><a href="#the-progress-element">progress</a></code></li>
3717: <li><code><a href="#the-q-element">q</a></code></li>
3718: <li><code><a href="#the-ruby-element">ruby</a></code></li>
3719: <li><code><a href="#the-s-element">s</a></code></li>
3720: <li><code><a href="#the-samp-element">samp</a></code></li>
3721: <li><code><a href="#the-script-element">script</a></code></li>
3722: <li><code><a href="#the-section-element">section</a></code></li>
3723: <li><code><a href="#the-select-element">select</a></code></li>
3724: <li><code><a href="#the-small-element">small</a></code></li>
3725: <li><code><a href="#the-span-element">span</a></code></li>
3726: <li><code><a href="#the-strong-element">strong</a></code></li>
3727: <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>
3728: <li><code><a href="#the-sub-and-sup-elements">sub</a></code></li>
3729: <li><code><a href="#the-sub-and-sup-elements">sup</a></code></li>
3730: <li><code><a href="#svg">svg</a></code></li>
3731: <li><code><a href="#the-table-element">table</a></code></li>
3732: <li><code><a href="#the-textarea-element">textarea</a></code></li>
3733: <li><code><a href="#the-time-element">time</a></code></li>
3734: <li><code><a href="#the-u-element">u</a></code></li>
3735: <li><code><a href="#the-ul-element">ul</a></code></li>
3736: <li><code><a href="#the-var-element">var</a></code></li>
3737: <li><code><a href="#the-video-element">video</a></code></li>
3738: <li><code><a href="#the-wbr-element">wbr</a></code></li>
3739: <li><a href="#text-content" title="text content">Text</a></li>
1.629 ! mike 3740: </ul><h6 id="sectioning-content-0"><span class="secno">3.2.5.1.3 </span>Sectioning content</h6><p><dfn id="sectioning-content" role="button" tabindex="0" aria-haspopup="true">Sectioning content</dfn> is content that defines the scope
1.545 mike 3741: of <a href="#heading-content" title="heading content">headings</a> and <a href="#the-footer-element" title="footer">footers</a>.</p><ul class="brief category-list"><li><code><a href="#the-article-element">article</a></code></li>
3742: <li><code><a href="#the-aside-element">aside</a></code></li>
3743: <li><code><a href="#the-nav-element">nav</a></code></li>
3744: <li><code><a href="#the-section-element">section</a></code></li>
3745: </ul><p>Each <a href="#sectioning-content">sectioning content</a> element potentially has a
3746: heading and an <a href="#outline">outline</a>. See the section on
3747: <a href="#headings-and-sections">headings and sections</a> for further details.</p><p class="note">There are also certain elements that are <a href="#sectioning-root" title="sectioning root">sectioning roots</a>. These are distinct
1.544 mike 3748: from <a href="#sectioning-content">sectioning content</a>, but they can also have an
1.545 mike 3749: <a href="#outline">outline</a>.</p><h6 id="heading-content-0"><span class="secno">3.2.5.1.4 </span>Heading content</h6><p><dfn id="heading-content" role="button" tabindex="0" aria-haspopup="true">Heading content</dfn> defines the header of a section
3750: (whether explicitly marked up using <a href="#sectioning-content">sectioning content</a>
3751: elements, or implied by the heading content itself).</p><ul class="brief category-list"><li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code></li>
3752: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code></li>
3753: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code></li>
3754: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code></li>
3755: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code></li>
3756: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code></li>
3757: <li><code><a href="#the-hgroup-element">hgroup</a></code></li>
3758: </ul><h6 id="phrasing-content-0"><span class="secno">3.2.5.1.5 </span>Phrasing content</h6><p><dfn id="phrasing-content" role="button" tabindex="0" aria-haspopup="true">Phrasing content</dfn> is the text of the document, as well
3759: as elements that mark up that text at the intra-paragraph
3760: level. Runs of <a href="#phrasing-content">phrasing content</a> form <a href="#paragraph" title="paragraph">paragraphs</a>.</p><ul class="brief category-list"><li><code><a href="#the-a-element">a</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
3761: <li><code><a href="#the-abbr-element">abbr</a></code></li>
3762: <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>
3763: <li><code><a href="#the-audio-element">audio</a></code></li>
3764: <li><code><a href="#the-b-element">b</a></code></li>
3765: <li><code><a href="#the-bdi-element">bdi</a></code></li>
3766: <li><code><a href="#the-bdo-element">bdo</a></code></li>
3767: <li><code><a href="#the-br-element">br</a></code></li>
3768: <li><code><a href="#the-button-element">button</a></code></li>
3769: <li><code><a href="#the-canvas-element">canvas</a></code></li>
3770: <li><code><a href="#the-cite-element">cite</a></code></li>
3771: <li><code><a href="#the-code-element">code</a></code></li>
3772: <li><code><a href="#the-command-element">command</a></code></li>
3773: <li><code><a href="#the-datalist-element">datalist</a></code></li>
3774: <li><code><a href="#the-del-element">del</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
3775: <li><code><a href="#the-dfn-element">dfn</a></code></li>
3776: <li><code><a href="#the-em-element">em</a></code></li>
3777: <li><code><a href="#the-embed-element">embed</a></code></li>
3778: <li><code><a href="#the-i-element">i</a></code></li>
3779: <li><code><a href="#the-iframe-element">iframe</a></code></li>
3780: <li><code><a href="#the-img-element">img</a></code></li>
3781: <li><code><a href="#the-input-element">input</a></code></li>
3782: <li><code><a href="#the-ins-element">ins</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
3783: <li><code><a href="#the-kbd-element">kbd</a></code></li>
3784: <li><code><a href="#the-keygen-element">keygen</a></code></li>
3785: <li><code><a href="#the-label-element">label</a></code></li>
3786: <li><code><a href="#the-map-element">map</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
3787: <li><code><a href="#the-mark-element">mark</a></code></li>
3788: <li><code><a href="#math">math</a></code></li>
3789: <li><code><a href="#the-meter-element">meter</a></code></li>
3790: <li><code><a href="#the-noscript-element">noscript</a></code></li>
3791: <li><code><a href="#the-object-element">object</a></code></li>
3792: <li><code><a href="#the-output-element">output</a></code></li>
3793: <li><code><a href="#the-progress-element">progress</a></code></li>
3794: <li><code><a href="#the-q-element">q</a></code></li>
3795: <li><code><a href="#the-ruby-element">ruby</a></code></li>
3796: <li><code><a href="#the-s-element">s</a></code></li>
3797: <li><code><a href="#the-samp-element">samp</a></code></li>
3798: <li><code><a href="#the-script-element">script</a></code></li>
3799: <li><code><a href="#the-select-element">select</a></code></li>
3800: <li><code><a href="#the-small-element">small</a></code></li>
3801: <li><code><a href="#the-span-element">span</a></code></li>
3802: <li><code><a href="#the-strong-element">strong</a></code></li>
3803: <li><code><a href="#the-sub-and-sup-elements">sub</a></code></li>
3804: <li><code><a href="#the-sub-and-sup-elements">sup</a></code></li>
3805: <li><code><a href="#svg">svg</a></code></li>
3806: <li><code><a href="#the-textarea-element">textarea</a></code></li>
3807: <li><code><a href="#the-time-element">time</a></code></li>
3808: <li><code><a href="#the-u-element">u</a></code></li>
3809: <li><code><a href="#the-var-element">var</a></code></li>
3810: <li><code><a href="#the-video-element">video</a></code></li>
3811: <li><code><a href="#the-wbr-element">wbr</a></code></li>
3812: <li><a href="#text-content" title="text content">Text</a></li>
3813: </ul><p>As a general rule, elements whose content model allows any
3814: <a href="#phrasing-content">phrasing content</a> should have either at least one
3815: descendant <a href="#text-node">text node</a> that is not <a href="#inter-element-whitespace">inter-element
3816: whitespace</a>, or at least one descendant element node that is
3817: <a href="#embedded-content">embedded content</a>. For the purposes of this requirement,
3818: nodes that are descendants of <code><a href="#the-del-element">del</a></code> elements must not be
3819: counted as contributing to the ancestors of the <code><a href="#the-del-element">del</a></code>
3820: element.</p><p class="note">Most elements that are categorized as phrasing
1.544 mike 3821: content can only contain elements that are themselves categorized as
1.545 mike 3822: phrasing content, not any flow content.</p><p><dfn id="text-content" role="button" tabindex="0" aria-haspopup="true">Text</dfn>, in the context of content
3823: 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
3824: model on its own, but is also <a href="#phrasing-content">phrasing content</a>, and can
3825: be <a href="#inter-element-whitespace">inter-element whitespace</a> (if the <a href="#text-node" title="text
3826: node">text nodes</a> are empty or contain just <a href="#space-character" title="space
3827: character">space characters</a>).</p><h6 id="embedded-content-0"><span class="secno">3.2.5.1.6 </span>Embedded content</h6><p><dfn id="embedded-content" role="button" tabindex="0" aria-haspopup="true">Embedded content</dfn> is content that imports another
3828: resource into the document, or content from another vocabulary that
3829: is inserted into the document.</p><ul class="brief category-list"><li><code><a href="#the-audio-element">audio</a></code></li>
3830: <li><code><a href="#the-canvas-element">canvas</a></code></li>
3831: <li><code><a href="#the-embed-element">embed</a></code></li>
3832: <li><code><a href="#the-iframe-element">iframe</a></code></li>
3833: <li><code><a href="#the-img-element">img</a></code></li>
3834: <li><code><a href="#math">math</a></code></li>
3835: <li><code><a href="#the-object-element">object</a></code></li>
3836: <li><code><a href="#svg">svg</a></code></li>
3837: <li><code><a href="#the-video-element">video</a></code></li>
3838: </ul><p>Elements that are from namespaces other than the <a href="#html-namespace-0">HTML
3839: namespace</a> and that convey content but not metadata, are
3840: <a href="#embedded-content">embedded content</a> for the purposes of the content models
3841: defined in this specification. (For example, MathML, or SVG.)</p><p>Some embedded content elements can have <dfn id="fallback-content" role="button" tabindex="0" aria-haspopup="true">fallback
3842: content</dfn>: content that is to be used when the external resource
3843: cannot be used (e.g. because it is of an unsupported format). The
3844: element definitions state what the fallback is, if any.</p><h6 id="interactive-content-0"><span class="secno">3.2.5.1.7 </span>Interactive content</h6><p><dfn id="interactive-content" role="button" tabindex="0" aria-haspopup="true">Interactive content</dfn> is content that is specifically
3845: intended for user interaction.</p><ul class="brief category-list"><li><code><a href="#the-a-element">a</a></code></li>
3846: <li><code><a href="#the-audio-element">audio</a></code> (if the <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute is present)</li>
3847: <li><code><a href="#the-button-element">button</a></code></li>
3848: <li><code><a href="#the-details-element">details</a></code></li>
3849: <li><code><a href="#the-embed-element">embed</a></code></li>
3850: <li><code><a href="#the-iframe-element">iframe</a></code></li>
3851: <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>
3852: <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>
3853: <li><code><a href="#the-keygen-element">keygen</a></code></li>
3854: <li><code><a href="#the-label-element">label</a></code></li>
3855: <li><code><a href="#the-menu-element">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>
3856: <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)</li>
3857: <li><code><a href="#the-select-element">select</a></code></li>
3858: <li><code><a href="#the-textarea-element">textarea</a></code></li>
3859: <li><code><a href="#the-video-element">video</a></code> (if the <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute is present)</li>
3860: </ul><p>Certain elements in HTML have an <a href="#activation-behavior">activation
3861: behavior</a>, which means that the user can activate them. This
3862: triggers a sequence of events dependent on the activation mechanism,
3863: and normally culminating in a <code title="event-click"><a href="#event-click">click</a></code>
1.629 ! mike 3864: event<span class="impl">, as described below</span>.</p><h6 id="palpable-content-0"><span class="secno">3.2.5.1.8 </span>Palpable content</h6><p>As a general rule, elements whose content model allows any
! 3865: <a href="#flow-content">flow content</a> or <a href="#phrasing-content">phrasing content</a> should
! 3866: have at least one child node that is <dfn id="palpable-content" role="button" tabindex="0" aria-haspopup="true">palpable content</dfn>
! 3867: and that does not have the <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code>
! 3868: attribute specified.</p><p>This requirement is not a hard requirement, however, as there are
! 3869: many cases where an element can be empty legitimately, for example
! 3870: when it is used as a placeholder which will later be filled in by a
! 3871: script, or when the element is part of a template and would on most
! 3872: pages be filled in but on some pages is not relevant.</p><p>Conformance checkers are encouraged to provide a mechanism for
! 3873: authors to find elements that fail to fulfill this requirement, as
! 3874: an authoring aid.</p><p>The following elements are palpable content:</p><ul class="brief category-list"><li><code><a href="#the-a-element">a</a></code></li>
! 3875: <li><code><a href="#the-abbr-element">abbr</a></code></li>
! 3876: <li><code><a href="#the-address-element">address</a></code></li>
! 3877: <li><code><a href="#the-article-element">article</a></code></li>
! 3878: <li><code><a href="#the-aside-element">aside</a></code></li>
! 3879: <li><code><a href="#the-audio-element">audio</a></code> (if the <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute is present)</li>
! 3880: <li><code><a href="#the-b-element">b</a></code></li>
! 3881: <li><code><a href="#the-bdi-element">bdi</a></code></li>
! 3882: <li><code><a href="#the-bdo-element">bdo</a></code></li>
! 3883: <li><code><a href="#the-blockquote-element">blockquote</a></code></li>
! 3884: <li><code><a href="#the-button-element">button</a></code></li>
! 3885: <li><code><a href="#the-canvas-element">canvas</a></code></li>
! 3886: <li><code><a href="#the-cite-element">cite</a></code></li>
! 3887: <li><code><a href="#the-code-element">code</a></code></li>
! 3888: <li><code><a href="#the-details-element">details</a></code></li>
! 3889: <li><code><a href="#the-dfn-element">dfn</a></code></li>
! 3890: <li><code><a href="#the-div-element">div</a></code></li>
! 3891: <li><code><a href="#the-dl-element">dl</a></code> (if the element's children include at least one name-value group)</li>
! 3892: <li><code><a href="#the-em-element">em</a></code></li>
! 3893: <li><code><a href="#the-embed-element">embed</a></code></li>
! 3894: <li><code><a href="#the-fieldset-element">fieldset</a></code></li>
! 3895: <li><code><a href="#the-figure-element">figure</a></code></li>
! 3896: <li><code><a href="#the-footer-element">footer</a></code></li>
! 3897: <li><code><a href="#the-form-element">form</a></code></li>
! 3898: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code></li>
! 3899: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code></li>
! 3900: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code></li>
! 3901: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code></li>
! 3902: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code></li>
! 3903: <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code></li>
! 3904: <li><code><a href="#the-header-element">header</a></code></li>
! 3905: <li><code><a href="#the-hgroup-element">hgroup</a></code></li>
! 3906: <li><code><a href="#the-i-element">i</a></code></li>
! 3907: <li><code><a href="#the-iframe-element">iframe</a></code></li>
! 3908: <li><code><a href="#the-img-element">img</a></code></li>
! 3909: <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>
! 3910: <li><code><a href="#the-ins-element">ins</a></code></li>
! 3911: <li><code><a href="#the-kbd-element">kbd</a></code></li>
! 3912: <li><code><a href="#the-keygen-element">keygen</a></code></li>
! 3913: <li><code><a href="#the-label-element">label</a></code></li>
! 3914: <li><code><a href="#the-map-element">map</a></code></li>
! 3915: <li><code><a href="#the-mark-element">mark</a></code></li>
! 3916: <li><code><a href="#math">math</a></code></li>
! 3917: <li><code><a href="#the-menu-element">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 or the <a href="#list-state" title="list state">list</a> state)</li>
! 3918: <li><code><a href="#the-meter-element">meter</a></code></li>
! 3919: <li><code><a href="#the-nav-element">nav</a></code></li>
! 3920: <li><code><a href="#the-object-element">object</a></code></li>
! 3921: <li><code><a href="#the-ol-element">ol</a></code> (if the element's children include at least one <code><a href="#the-li-element">li</a></code> element)</li>
! 3922: <li><code><a href="#the-output-element">output</a></code></li>
! 3923: <li><code><a href="#the-p-element">p</a></code></li>
! 3924: <li><code><a href="#the-pre-element">pre</a></code></li>
! 3925: <li><code><a href="#the-progress-element">progress</a></code></li>
! 3926: <li><code><a href="#the-q-element">q</a></code></li>
! 3927: <li><code><a href="#the-ruby-element">ruby</a></code></li>
! 3928: <li><code><a href="#the-s-element">s</a></code></li>
! 3929: <li><code><a href="#the-samp-element">samp</a></code></li>
! 3930: <li><code><a href="#the-section-element">section</a></code></li>
! 3931: <li><code><a href="#the-select-element">select</a></code></li>
! 3932: <li><code><a href="#the-small-element">small</a></code></li>
! 3933: <li><code><a href="#the-span-element">span</a></code></li>
! 3934: <li><code><a href="#the-strong-element">strong</a></code></li>
! 3935: <li><code><a href="#the-sub-and-sup-elements">sub</a></code></li>
! 3936: <li><code><a href="#the-sub-and-sup-elements">sup</a></code></li>
! 3937: <li><code><a href="#svg">svg</a></code></li>
! 3938: <li><code><a href="#the-table-element">table</a></code></li>
! 3939: <li><code><a href="#the-textarea-element">textarea</a></code></li>
! 3940: <li><code><a href="#the-time-element">time</a></code></li>
! 3941: <li><code><a href="#the-u-element">u</a></code></li>
! 3942: <li><code><a href="#the-ul-element">ul</a></code> (if the element's children include at least one <code><a href="#the-li-element">li</a></code> element)</li>
! 3943: <li><code><a href="#the-var-element">var</a></code></li>
! 3944: <li><code><a href="#the-video-element">video</a></code></li>
! 3945: <li><a href="#text-content" title="text content">Text</a> that is not <a href="#inter-element-whitespace">inter-element whitespace</a></li>
! 3946: </ul><h5 id="transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</h5><p>Some elements are described as <dfn id="transparent" role="button" tabindex="0" aria-haspopup="true">transparent</dfn>; they have
1.545 mike 3947: "transparent" in the description of their content model. The content
3948: model of a <a href="#transparent">transparent</a> element is derived from the
3949: content model of its parent element: the elements required in the
3950: part of the content model that is "transparent" are the same
3951: elements as required in the part of the content model of the parent
3952: of the transparent element in which the transparent element finds
3953: itself.</p><div class="example">
3954:
3955: <p>For instance, an <code><a href="#the-ins-element">ins</a></code> element inside a
3956: <code><a href="#the-ruby-element">ruby</a></code> element cannot contain an <code><a href="#the-rt-element">rt</a></code>
3957: element, because the part of the <code><a href="#the-ruby-element">ruby</a></code> element's
3958: content model that allows <code><a href="#the-ins-element">ins</a></code> elements is the part
3959: that allows <a href="#phrasing-content">phrasing content</a>, and the <code><a href="#the-rt-element">rt</a></code>
3960: element is not <a href="#phrasing-content">phrasing content</a>.</p>
3961:
3962: </div><p class="note">In some cases, where transparent elements are nested
3963: in each other, the process has to be applied iteratively.</p><div class="example">
3964:
3965: <p>Consider the following markup fragment:</p>
3966:
3967: <pre><p><object><param><ins><map><a href="/">Apples</a></map></ins></object></p></pre>
3968:
3969: <p>To check whether "Apples" is allowed inside the <code><a href="#the-a-element">a</a></code>
3970: element, the content models are examined. The <code><a href="#the-a-element">a</a></code>
3971: element's content model is transparent, as is the <code><a href="#the-map-element">map</a></code>
3972: element's, as is the <code><a href="#the-ins-element">ins</a></code> element's, as is the part of
3973: the <code><a href="#the-object-element">object</a></code> element's in which the <code><a href="#the-ins-element">ins</a></code>
3974: element is found. The <code><a href="#the-object-element">object</a></code> element is found in the
3975: <code><a href="#the-p-element">p</a></code> element, whose content model is <a href="#phrasing-content">phrasing
3976: content</a>. Thus, "Apples" is allowed, as text is phrasing
3977: content.</p>
3978:
3979: </div><p>When a transparent element has no parent, then the part of its
3980: content model that is "transparent" must instead be treated as
3981: accepting any <a href="#flow-content">flow content</a>.</p><h5 id="paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</h5><p class="note">The term <a href="#paragraph">paragraph</a> as defined in this
1.544 mike 3982: section is distinct from (though related to) the <code><a href="#the-p-element">p</a></code>
3983: element defined later. The <a href="#paragraph">paragraph</a> concept defined
1.545 mike 3984: here is used to describe how to interpret documents.</p><p>A <dfn id="paragraph" role="button" tabindex="0" aria-haspopup="true">paragraph</dfn> is typically a run of <a href="#phrasing-content">phrasing
3985: content</a> that forms a block of text with one or more sentences
3986: that discuss a particular topic, as in typography, but can also be
3987: used for more general thematic grouping. For instance, an address is
3988: also a paragraph, as is a part of a form, a byline, or a stanza in a
3989: poem.</p><div class="example">
3990:
3991: <p>In the following example, there are two paragraphs in a
3992: section. There is also a heading, which contains phrasing content
3993: that is not a paragraph. Note how the comments and
3994: <a href="#inter-element-whitespace">inter-element whitespace</a> do not form paragraphs.</p>
3995:
3996: <pre><section>
3997: <h1>Example of paragraphs</h1>
3998: This is the <em>first</em> paragraph in this example.
3999: <p>This is the second.</p>
4000: <!-- This is not a paragraph. -->
4001: </section></pre>
4002:
4003: </div><p>Paragraphs in <a href="#flow-content">flow content</a> are defined relative to
4004: what the document looks like without the <code><a href="#the-a-element">a</a></code>,
4005: <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
4006: complicating matters, since those elements, with their hybrid
4007: content models, can straddle paragraph boundaries, as shown in the
4008: first two examples below.</p><p class="note">Generally, having elements straddle paragraph
1.544 mike 4009: boundaries is best avoided. Maintaining such markup can be
1.545 mike 4010: difficult.</p><div class="example">
4011:
4012: <p>The following example takes the markup from the earlier example
4013: and puts <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements around some
4014: of the markup to show that the text was changed (though in this
4015: case, the changes admittedly don't make much sense). Notice how
4016: this example has exactly the same paragraphs as the previous one,
4017: despite the <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements —
4018: the <code><a href="#the-ins-element">ins</a></code> element straddles the heading and the first
4019: paragraph, and the <code><a href="#the-del-element">del</a></code> element straddles the boundary
4020: between the two paragraphs.</p>
4021:
4022: <pre><section>
4023: <ins><h1>Example of paragraphs</h1>
4024: This is the <em>first</em> paragraph in</ins> this example<del>.
4025: <p>This is the second.</p></del>
4026: <!-- This is not a paragraph. -->
4027: </section></pre>
4028:
4029: </div><p>A <a href="#paragraph">paragraph</a> is also formed explicitly by
4030: <code><a href="#the-p-element">p</a></code> elements.</p><p class="note">The <code><a href="#the-p-element">p</a></code> element can be used to wrap
1.544 mike 4031: individual paragraphs when there would otherwise not be any content
4032: other than phrasing content to separate the paragraphs from each
1.545 mike 4033: other.</p><div class="example">
4034:
4035: <p>In the following example, the link spans half of the first
4036: paragraph, all of the heading separating the two paragraphs, and
4037: half of the second paragraph. It straddles the paragraphs and the
4038: heading.</p>
4039:
4040: <pre><aside>
4041: Welcome!
4042: <a href="about.html">
4043: This is home of...
4044: <h1>The Falcons!</h1>
4045: The Lockheed Martin multirole jet fighter aircraft!
4046: </a>
4047: This page discusses the F-16 Fighting Falcon's innermost secrets.
4048: </aside></pre>
4049:
4050: <p>Here is another way of marking this up, this time showing the
4051: paragraphs explicitly, and splitting the one link element into
4052: three:</p>
4053:
4054: <pre><aside>
4055: <p>Welcome! <a href="about.html">This is home of...</a></p>
4056: <h1><a href="about.html">The Falcons!</a></h1>
4057: <p><a href="about.html">The Lockheed Martin multirole jet
4058: fighter aircraft!</a> This page discusses the F-16 Fighting
4059: Falcon's innermost secrets.</p>
4060: </aside></pre>
4061:
4062: </div><div class="example">
4063:
4064:
4065: <p>It is possible for paragraphs to overlap when using certain
4066: elements that define fallback content. For example, in the
4067: following section:</p>
4068:
4069: <pre><section>
4070: <h1>My Cats</h1>
4071: You can play with my cat simulator.
4072: <object data="cats.sim">
4073: To see the cat simulator, use one of the following links:
4074: <ul>
4075: <li><a href="cats.sim">Download simulator file</a>
4076: <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
4077: </ul>
4078: Alternatively, upgrade to the Mellblom Browser.
4079: </object>
4080: I'm quite proud of it.
4081: </section></pre>
4082:
4083: <p>There are five paragraphs:</p>
4084:
4085: <ol class="brief"><li>The paragraph that says "You can play with my cat
4086: simulator. <i title="">object</i> I'm quite proud of it.", where
4087: <i title="">object</i> is the <code><a href="#the-object-element">object</a></code> element.</li>
4088:
4089: <li>The paragraph that says "To see the cat simulator, use one of
4090: the following links:".</li>
4091:
4092: <li>The paragraph that says "Download simulator file".</li>
4093:
4094: <li>The paragraph that says "Use online simulator".</li>
4095:
4096: <li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</li>
4097:
4098: </ol><p>The first paragraph is overlapped by the other four. A user
4099: agent that supports the "cats.sim" resource will only show the
4100: first one, but a user agent that shows the fallback will
4101: confusingly show the first sentence of the first paragraph as
4102: if it was in the same paragraph as the second one, and will show
4103: the last paragraph as if it was at the start of the second sentence
4104: of the first paragraph.</p>
4105:
4106: <p>To avoid this confusion, explicit <code><a href="#the-p-element">p</a></code> elements can be
4107: used.</p>
4108:
4109: </div><h4 id="requirements-relating-to-bidirectional-algorithm-formatting-characters"><span class="secno">3.2.6 </span>Requirements relating to bidirectional-algorithm formatting
4110: characters</h4><p><a href="#text-content">Text content</a> in <a href="#html-elements">HTML elements</a> with
4111: child <a href="#text-node" title="text node">text nodes</a>, and text in
4112: attributes of <a href="#html-elements">HTML elements</a> that allow free-form text,
4113: may contain characters in the range U+202A to U+202E (the
4114: bidirectional-algorithm formatting characters). However, the use of
4115: these characters is restricted so that any embedding or overrides
4116: generated by these characters do not start and end with different
4117: parent elements, and so that all such embeddings and overrides are
4118: explicitly terminated by a U+202C POP DIRECTIONAL FORMATTING
4119: character. This helps reduce incidences of text being reused in a
4120: manner that has unforeseen effects on the bidirectional
4121: algorithm.</p><p>The aforementioned restrictions are defined by specifying that
4122: certain parts of documents form <a href="#bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm
4123: formatting character ranges</a>, and then imposing a requirement
1.578 mike 4124: on such ranges.</p><p>The strings resulting from applying the following algorithm to an
4125: <a href="#html-elements" title="HTML elements">HTML element</a> <var title="">element</var> are <a href="#bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm formatting
1.558 mike 4126: character ranges</a>:</p><ol><li><p>Let <var title="">output</var> be an empty list of strings.</p></li>
4127:
4128: <li><p>Let <var title="">string</var> be an empty string.</p></li>
4129:
4130: <li><p>Let <var title="">node</var> be the first child node of <var title="">element</var>, if any, or null otherwise.</p></li>
4131:
4132:
4133: <li><p><i>Loop</i>: If <var title="">node</var> is null, jump to
4134: the step labeled <i>end</i>.</p></li>
4135:
4136: <li>
4137:
4138: <p>Process <var title="">node</var> according to the first
4139: matching step from the following list:</p>
4140:
4141: <dl class="switch"><dt>If <var title="">node</var> is a <a href="#text-node">text node</a></dt>
4142:
4143: <dd><p>Append the text data of <var title="">node</var> to <var title="">string</var>.</p></dd>
4144:
4145:
1.578 mike 4146: <dt>If <var title="">node</var> is a <code><a href="#the-br-element">br</a></code> element</dt>
1.558 mike 4147: <dt>If <var title="">node</var> is an <a href="#html-elements" title="HTML elements">HTML element</a> that is <a href="#flow-content">flow content</a> but that is not also <a href="#phrasing-content">phrasing content</a></dt>
4148:
4149: <dd><p>If <var title="">string</var> is not the empty string,
4150: push <var title="">string</var> onto <var title="">output</var>,
4151: and let <var title="">string</var> be empty string.</p></dd>
4152:
4153:
4154: <dt>Otherwise</dt>
4155:
4156: <dd>Do nothing.</dd>
4157:
4158: </dl></li>
4159:
4160: <li><p>Let <var title="">node</var> be <var title="">node</var>'s
4161: next sibling, if any, or null otherwise.</p></li>
4162:
4163: <li><p>Jump to the step labeled <i>loop</i>.</p></li>
4164:
4165:
4166: <li><p><i>End</i>: If <var title="">string</var> is not the empty
4167: string, push <var title="">string</var> onto <var title="">output</var>.</p></li>
4168:
4169: <li><p>Return <var title="">output</var> as the
4170: <a href="#bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm formatting character
4171: ranges</a>.</p></li>
4172:
4173: </ol><p>The value of a namespace-less attribute of an <a href="#html-elements" title="HTML
1.545 mike 4174: elements">HTML element</a> is a <a href="#bidirectional-algorithm-formatting-character-ranges" title="bidirectional-algorithm formatting character
4175: ranges">bidirectional-algorithm formatting character
4176: range</a>.</p><p>Any strings that, as described above, are
4177: <dfn id="bidirectional-algorithm-formatting-character-ranges" role="button" tabindex="0" aria-haspopup="true">bidirectional-algorithm formatting character ranges</dfn> must
4178: match the <code title="">string</code> production in the following
4179: ABNF, the character set for which is Unicode. <a href="#refsABNF">[ABNF]</a></p><pre>string = *( plaintext ( embedding / override ) ) plaintext
4180: embedding = ( lre / rle ) string pdf
4181: override = ( lro / rlo ) string pdf
4182: lre = %x202A ; U+202A LEFT-TO-RIGHT EMBEDDING
4183: rle = %x202B ; U+202B RIGHT-TO-LEFT EMBEDDING
4184: lro = %x202D ; U+202D LEFT-TO-RIGHT OVERRIDE
4185: rlo = %x202E ; U+202E RIGHT-TO-LEFT OVERRIDE
4186: pdf = %x202C ; U+202C POP DIRECTIONAL FORMATTING
4187: plaintext = *( %x0000-2029 / %x202F-10FFFF )
1.558 mike 4188: ; any string with no bidirectional-algorithm formatting characters</pre><p class="note">Authors are encouraged to use the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute, the <code><a href="#the-bdo-element">bdo</a></code> element,
4189: and the <code><a href="#the-bdi-element">bdi</a></code> element, rather than maintaining the
4190: bidirectional-algorithm formatting characters manually. The
4191: bidirectional-algorithm formatting characters interact poorly with
4192: CSS.</p><h4 id="wai-aria"><span class="secno">3.2.7 </span><dfn role="button" tabindex="0" aria-haspopup="true">WAI-ARIA</dfn></h4><p>Authors may use the ARIA <code title="attr-aria-role">role</code>
1.545 mike 4193: and <code title="attr-aria-*">aria-*</code> attributes on <a href="#html-elements">HTML
4194: elements</a>, in accordance with the requirements described in
4195: the ARIA specifications, except where these conflict with the
4196: <span>strong native semantics</span>
4197: described below. These exceptions are intended to prevent authors
4198: from making assistive technology products report nonsensical states
4199: that do not represent the actual state of the document. <a href="#refsARIA">[ARIA]</a></p><p>The following table defines the <span>strong native
4200: semantics</span> and corresponding <span>default implicit ARIA
4201: semantics</span> that apply to <a href="#html-elements">HTML elements</a>. Each
4202: language feature (element or attribute) in a cell in the first
4203: column implies the ARIA semantics (role, states, and/or properties)
4204: given in the cell in the second column of the same row. <span class="impl">When multiple rows apply to an element, the role from
4205: the last row to define a role must be applied, and the states and
4206: properties from all the rows must be combined.</span></p><table id="table-aria-strong"><thead><tr><th>Language feature
4207: </th><th><span>Strong native semantics</span> and <span>default implied ARIA semantics</span>
4208:
4209: </th></tr></thead><tbody><tr><td><code><a href="#the-area-element">area</a></code> element that creates a <a href="#hyperlink">hyperlink</a>
4210: </td><td><code title="attr-aria-role-link">link</code> role
4211:
4212: </td></tr><tr><td><code><a href="#the-base-element">base</a></code> element
4213: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4214:
4215: </td></tr><tr><td><code><a href="#the-datalist-element">datalist</a></code> element
4216: </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"
4217:
4218: </td></tr><tr><td><code><a href="#the-details-element">details</a></code> element
4219: </td><td><code title="attr-aria-expanded">aria-expanded</code> state set to "true" if the element's <code title="attr-details-open"><a href="#attr-details-open">open</a></code> attribute is present, and set to "false" otherwise
4220:
4221: </td></tr><tr><td><code><a href="#the-head-element">head</a></code> element
4222: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4223:
4224: </td></tr><tr><td><code><a href="#the-hgroup-element">hgroup</a></code> element
4225: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
4226:
4227: </td></tr><tr><td><code><a href="#the-hr-element">hr</a></code> element
4228: </td><td><code title="attr-aria-role-separator">separator</code> role
4229:
4230: </td></tr><tr><td><code><a href="#the-html-element">html</a></code> element
4231: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4232:
4233: </td></tr><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
4234: </td><td><code title="attr-aria-role-presentation">presentation</code> role
4235:
4236: </td></tr><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
4237: </td><td><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
4238:
4239: </td></tr><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
4240: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4241:
4242: </td></tr><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
4243: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4244:
4245: </td></tr><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
4246: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4247:
4248: </td></tr><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
4249: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4250:
4251: </td></tr><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>
4252: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4253:
4254: </td></tr><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
4255: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4256:
4257: </td></tr><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
4258: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4259:
4260: </td></tr><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
4261: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4262:
4263: </td></tr><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
4264: </td><td><code title="attr-aria-role-spinbutton">spinbutton</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property 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
4265:
4266: </td></tr><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
4267: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4268:
4269: </td></tr><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
4270: </td><td><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
4271:
4272: </td></tr><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
4273: </td><td><code title="attr-aria-role-slider">slider</code> role, with the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="#concept-input-min" title="concept-input-min">minimum</a>, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the result of applying the <a href="#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if that results in a number, or the <a href="#concept-input-value-default-range" title="concept-input-value-default-range">default value</a> otherwise
4274:
4275: </td></tr><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
4276: </td><td><code title="attr-aria-role-button">button</code> role
4277:
4278: </td></tr><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>
4279: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4280:
4281: </td></tr><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
4282: </td><td><code title="attr-aria-role-button">button</code> role
4283:
4284: </td></tr><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>
4285: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4286:
4287: </td></tr><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>
4288: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4289:
4290: </td></tr><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>
4291: </td><td><code title="attr-aria-role-combobox">combobox</code> role, with the <code title="attr-aria-owns">aria-owns</code> property set to the same value as the <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute, and the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4292:
4293: </td></tr><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
4294: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4295:
4296: </td></tr><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>
4297: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4298:
4299: </td></tr><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
4300: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>, with the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute
4301:
4302: </td></tr><tr><td><code><a href="#the-input-element">input</a></code> element that is <a href="#concept-input-required" title="concept-input-required">required</a>
4303: </td><td>The <code title="title-aria-required">aria-required</code> state set to "true"
4304:
4305: </td></tr><tr><td><code><a href="#the-keygen-element">keygen</a></code> element
4306: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4307:
4308: </td></tr><tr><td><code><a href="#the-label-element">label</a></code> element
4309: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4310:
4311: </td></tr><tr><td><code><a href="#the-link-element">link</a></code> element that creates a <a href="#hyperlink">hyperlink</a>
4312: </td><td><code title="attr-aria-role-link">link</code> role
4313:
4314: </td></tr><tr><td><code><a href="#the-menu-element">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
4315: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4316:
4317: </td></tr><tr><td><code><a href="#the-menu-element">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
4318: </td><td><code title="attr-aria-role-menu">menu</code> role
4319:
4320: </td></tr><tr><td><code><a href="#the-menu-element">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
4321: </td><td><code title="attr-aria-role-toolbar">toolbar</code> role
4322:
4323: </td></tr><tr><td><code><a href="#the-meta-element">meta</a></code> element
4324: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4325:
4326: </td></tr><tr><td><code><a href="#the-meter-element">meter</a></code> element
4327: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4328:
4329: </td></tr><tr><td><code><a href="#the-nav-element">nav</a></code> element
4330: </td><td><code title="attr-aria-role-navigation">navigation</code> role
4331:
4332: </td></tr><tr><td><code><a href="#the-noscript-element">noscript</a></code> element
4333: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4334:
4335: </td></tr><tr><td><code><a href="#the-optgroup-element">optgroup</a></code> element
4336: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4337:
4338: </td></tr><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
4339: </td><td><code title="attr-aria-role-option">option</code> role, with the <code title="attr-aria-selected">aria-selected</code> state set to "true" if the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, or "false" otherwise.
4340:
4341: </td></tr><tr><td><code><a href="#the-param-element">param</a></code> element
4342: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4343:
4344: </td></tr><tr><td><code><a href="#the-progress-element">progress</a></code> element
4345: </td><td><code title="attr-aria-role-progressbar">progressbar</code> role, with, if the progress bar is determinate, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the maximum value of the progress bar, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to zero, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the current value of the progress bar
4346:
4347: </td></tr><tr><td><code><a href="#the-script-element">script</a></code> element
4348: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4349:
4350: </td></tr><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
4351: </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "true"
4352:
4353: </td></tr><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
4354: </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"
4355:
4356: </td></tr><tr><td><code><a href="#the-select-element">select</a></code> element with a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute
4357: </td><td>The <code title="title-aria-required">aria-required</code> state set to "true"
4358:
4359: </td></tr><tr><td><code><a href="#the-source-element">source</a></code> element
4360: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4361:
4362: </td></tr><tr><td><code><a href="#the-style-element">style</a></code> element
4363: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4364:
4365: </td></tr><tr><td><code><a href="#the-summary-element">summary</a></code> element
4366: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4367:
4368: </td></tr><tr><td><code><a href="#the-textarea-element">textarea</a></code> element
4369: </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="attr-aria-multiline">aria-multiline</code> property set to "true", and the <code title="title-aria-readonly">aria-readonly</code> property set to "true" if the element has a <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> attribute
4370:
4371: </td></tr><tr><td><code><a href="#the-textarea-element">textarea</a></code> element with a <code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code> attribute
4372: </td><td>The <code title="title-aria-required">aria-required</code> state set to "true"
4373:
4374: </td></tr><tr><td><code><a href="#the-title-element">title</a></code> element
4375: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4376:
4377: </td></tr><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="#the-menu-element">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
4378: </td><td><code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise
4379:
4380: </td></tr><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="#the-menu-element">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
4381: </td><td><code title="attr-aria-role-menuitem">menuitem</code> role
4382:
4383: </td></tr><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="#the-menu-element">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
4384: </td><td><code title="attr-aria-role-menuitemradio">menuitemradio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise
4385:
4386: </td></tr><tr><td>Element that is <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>
4387: </td><td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"
4388:
4389: </td></tr><tr><td>Element with a <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute
4390: </td><td>The <code title="title-aria-hidden">aria-hidden</code> state set to "true"
4391:
4392: </td></tr><tr><td>Element that is a <a href="#candidate-for-constraint-validation">candidate for constraint validation</a> but that does not <a href="#concept-fv-valid" title="concept-fv-valid">satisfy its constraints</a>
4393: </td><td>The <code title="title-aria-invalid">aria-invalid</code> state set to "true"
4394:
4395: </td></tr></tbody></table><p>Some <a href="#html-elements">HTML elements</a> have native semantics that can be
4396: overridden. The following table lists these elements and their
4397: <span>default implicit ARIA semantics</span>, along with the
4398: restrictions that apply to those elements. Each language feature
4399: (element or attribute) in a cell in the first column implies, unless
4400: otherwise overridden, the ARIA semantic (role, state, or property)
4401: given in the cell in the second column of the same row, but this
4402: semantic may be overridden under the conditions listed in the cell
4403: in the third column of that row. In addition, any element may be
4404: given the <code title="attr-aria-role-presentation">presentation</code> role,
4405: regardless of the restrictions below.</p><table id="table-aria-weak"><thead><tr><th>Language feature
4406: </th><th>Default implied ARIA semantic
4407: </th><th>Restrictions
4408:
4409: </th></tr></thead><tbody><tr><td><code><a href="#the-a-element">a</a></code> element that creates a <a href="#hyperlink">hyperlink</a>
4410: </td><td><code title="attr-aria-role-link">link</code> role
1.625 mike 4411: </td><td>Role must be either <code title="attr-aria-role-link">link</code>, <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-checkbox">checkbox</code>, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code>
1.545 mike 4412:
4413: </td></tr><tr><td><code><a href="#the-address-element">address</a></code> element
4414: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4415: </td><td>If specified, role must be <code title="attr-aria-role-contentinfo">contentinfo</code>
4416:
4417: </td></tr><tr><td><code><a href="#the-article-element">article</a></code> element
4418: </td><td><code title="attr-aria-role-article">article</code> role
4419: </td><td>Role must be either <code title="attr-aria-role-article">article</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, or <code title="attr-aria-role-main">main</code>
4420:
4421: </td></tr><tr><td><code><a href="#the-aside-element">aside</a></code> element
4422: </td><td><code title="attr-aria-role-note">note</code> role
4423: </td><td>Role must be either <code title="attr-aria-role-note">note</code>, <code title="attr-aria-role-complementary">complementary</code>, or <code title="attr-aria-role-search">search</code>
4424:
4425: </td></tr><tr><td><code><a href="#the-audio-element">audio</a></code> element
4426: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4427: </td><td>If specified, role must be <code title="attr-aria-role-application">application</code>
4428:
4429: </td></tr><tr><td><code><a href="#the-button-element">button</a></code> element
4430: </td><td><code title="attr-aria-role-button">button</code> role
1.600 mike 4431: </td><td>Role must be either <code title="attr-aria-role-button">button</code> or <code title="attr-aria-role-menuitem">menuitem</code>
1.545 mike 4432:
4433: </td></tr><tr><td><code><a href="#the-details-element">details</a></code> element
4434: </td><td><code title="attr-aria-role-group">group</code> role
4435: </td><td>Role must be a role that supports <code title="attr-aria-expanded">aria-expanded</code>
4436:
4437: </td></tr><tr><td><code><a href="#the-embed-element">embed</a></code> element
4438: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4439: </td><td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>
4440:
4441: </td></tr><tr><td><code><a href="#the-footer-element">footer</a></code> element
4442: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4443: </td><td>If specified, role must be <code title="attr-aria-role-contentinfo">contentinfo</code>
4444:
4445: </td></tr><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
4446: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
1.553 mike 4447: </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>
1.545 mike 4448:
4449: </td></tr><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
4450: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
1.553 mike 4451: </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>
1.545 mike 4452:
4453: </td></tr><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
4454: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
1.553 mike 4455: </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>
1.545 mike 4456:
4457: </td></tr><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
4458: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
1.553 mike 4459: </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>
1.545 mike 4460:
4461: </td></tr><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
4462: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
1.553 mike 4463: </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>
1.545 mike 4464:
4465: </td></tr><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
4466: </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
1.553 mike 4467: </td><td>Role must be either <code title="attr-aria-role-heading">heading</code> or <code title="attr-aria-role-tab">tab</code>
1.545 mike 4468:
4469: </td></tr><tr><td><code><a href="#the-header-element">header</a></code> element
4470: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4471: </td><td>If specified, role must be <code title="attr-aria-role-banner">banner</code>
4472:
4473: </td></tr><tr><td><code><a href="#the-iframe-element">iframe</a></code> element
4474: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4475: </td><td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>
4476:
4477: </td></tr><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 absent
4478: </td><td><code title="attr-aria-role-img">img</code> role
4479: </td><td>No restrictions
4480:
4481: </td></tr><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 present and not empty
4482: </td><td><code title="attr-aria-role-img">img</code> role
4483: </td><td>No restrictions
4484:
4485: </td></tr><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
4486: </td><td><code title="attr-aria-role-button">button</code> role
4487: </td><td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code>, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-radio">radio</code>
4488:
4489: </td></tr><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
4490: </td><td><code title="attr-aria-role-checkbox">checkbox</code> role
4491: </td><td>Role must be either <code title="attr-aria-role-checkbox">checkbox</code> or <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>
4492:
4493: </td></tr><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
4494: </td><td><code title="attr-aria-role-button">button</code> role
4495: </td><td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code>, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-radio">radio</code>
4496:
4497: </td></tr><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
4498: </td><td><code title="attr-aria-role-radio">radio</code> role
4499: </td><td>Role must be either <code title="attr-aria-role-radio">radio</code> or <code title="attr-aria-role-menuitemradio">menuitemradio</code>
4500:
4501: </td></tr><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
4502: </td><td><code title="attr-aria-role-listitem">listitem</code> role
4503: </td><td>Role must be either <code title="attr-aria-role-listitem">listitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-option">option</code>, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code>
4504:
4505: </td></tr><tr><td><code><a href="#the-object-element">object</a></code> element
4506: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4507: </td><td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>
4508:
4509: </td></tr><tr><td><code><a href="#the-ol-element">ol</a></code> element
4510: </td><td><code title="attr-aria-role-list">list</code> role
4511: </td><td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title="attr-aria-role-tree">tree</code>
4512:
4513: </td></tr><tr><td><code><a href="#the-output-element">output</a></code> element
4514: </td><td><code title="attr-aria-role-status">status</code> role
4515: </td><td>No restrictions
4516:
4517: </td></tr><tr><td><code><a href="#the-section-element">section</a></code> element
4518: </td><td><code title="attr-aria-role-region">region</code> role
4519: </td><td>Role must be either
4520: <code title="attr-aria-role-alert">alert</code>,
4521: <code title="attr-aria-role-alertdialog">alertdialog</code>,
4522: <code title="attr-aria-role-application">application</code>,
4523: <code title="attr-aria-role-contentinfo">contentinfo</code>,
4524: <code title="attr-aria-role-dialog">dialog</code>,
4525: <code title="attr-aria-role-document">document</code>,
4526: <code title="attr-aria-role-log">log</code>,
4527: <code title="attr-aria-role-main">main</code>,
4528: <code title="attr-aria-role-marquee">marquee</code>,
4529: <code title="attr-aria-role-region">region</code>,
4530: <code title="attr-aria-role-search">search</code>, or
4531: <code title="attr-aria-role-status">status</code>
4532:
4533: </td></tr><tr><td><code><a href="#the-ul-element">ul</a></code> element
4534: </td><td><code title="attr-aria-role-list">list</code> role
4535: </td><td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title="attr-aria-role-tree">tree</code>
4536:
4537: </td></tr><tr><td><code><a href="#the-video-element">video</a></code> element
4538: </td><td><a href="#concept-role-none" title="concept-role-none">No role</a>
4539: </td><td>If specified, role must be <code title="attr-aria-role-application">application</code>
4540:
4541: </td></tr><tr><td><a href="#the-body-element-0">The body element</a>
4542: </td><td><code title="attr-aria-role-document">document</code> role
4543: </td><td>Role must be either <code title="attr-aria-role-document">document</code> or <code title="attr-aria-role-application">application</code>
4544:
4545: </td></tr></tbody></table><p>The entry "<dfn id="concept-role-none" role="button" tabindex="0" aria-haspopup="true">no role</dfn>", when
4546: used as a <span title="strong native semantics">strong native
4547: semantic</span>, means that no role other than <code title="attr-aria-role-presentation">presentation</code> can be used.
4548: When used as a <span title="default implied ARIA semantics">default
4549: implied ARIA semantic</span>, it means the user agent has no default
4550: mapping to ARIA roles. (However, it probably will have its own
4551: mappings to the accessibility layer.)</p><div class="example">
4552:
4553: <p>These features can be used to make accessibility tools render
4554: content to their users in more useful ways. For example, ASCII art,
4555: which is really an image, appears to be text, and in the absence of
4556: appropriate annotations would end up being rendered by screen
4557: readers as a very painful reading of lots of punctuation. Using the
4558: features described in this section, one can instead make the ATs
4559: skip the ASCII art and just read the caption:</p>
4560:
4561: <pre><figure <strong>role="img" aria-labelledby="fish-caption"</strong>>
4562: <pre>
4563: o .'`/
4564: ' / (
4565: O .-'` ` `'-._ .')
4566: _/ (o) '. .' /
4567: ) ))) >< <
4568: `\ |_\ _.' '. \
4569: '-._ _ .-' '.)
4570: jgs `\__\
4571: </pre>
4572: <figcaption <strong>id="fish-caption"</strong>>
4573: Joan G. Stark, "<cite>fish</cite>".
4574: October 1997. ASCII on electrons. 28×8.
4575: </figcaption>
4576: </figure>
4577: </pre>
4578:
4579:
4580:
4581: </div><h3 id="dynamic-markup-insertion"><span class="secno">3.4 </span><dfn role="button" tabindex="0" aria-haspopup="true">Dynamic markup insertion</dfn></h3><p class="note">APIs for dynamically inserting markup into the
1.544 mike 4582: document interact with the parser, and thus their behavior varies
1.1 mike 4583: depending on whether they are used with <a href="#html-documents">HTML documents</a>
4584: (and the <a href="#html-parser">HTML parser</a>) or XHTML in <a href="#xml-documents">XML
1.545 mike 4585: documents</a> (and the <a href="#xml-parser">XML parser</a>).</p><h4 id="opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</h4><p>The <dfn id="dom-document-open" role="button" tabindex="0" aria-haspopup="true"><code>open()</code></dfn>
4586: method comes in several variants with different numbers of
4587: arguments.</p><dl class="domintro"><dt><var title="">document</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt>
4588:
4589: <dd>
4590:
4591: <p>Causes the <code><a href="#document">Document</a></code> to be replaced in-place, as if
4592: it was a new <code><a href="#document">Document</a></code> object, but reusing the
4593: previous object, which is then returned.</p>
4594:
4595: <p>If the <var title="">type</var> argument is omitted or has the
4596: value "<code><a href="#text-html">text/html</a></code>", then the resulting
4597: <code><a href="#document">Document</a></code> has an HTML parser associated with it, which
4598: can be given data to parse using <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code>. Otherwise, all
4599: content passed to <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> will be parsed
4600: as plain text.</p>
4601:
4602: <p>If the <var title="">replace</var> argument is present and has
4603: the value "<code title="">replace</code>", the existing entries in
4604: the session history for the <code><a href="#document">Document</a></code> object are
4605: removed.</p>
4606:
4607: <p>The method has no effect if the <code><a href="#document">Document</a></code> is still
4608: being parsed.</p>
4609:
1.612 mike 4610: <p>Throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if the
1.545 mike 4611: <code><a href="#document">Document</a></code> is an <a href="#xml-documents" title="XML documents">XML
4612: document</a>.</p>
4613:
4614: </dd>
4615:
4616: <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>
4617:
4618: <dd>
4619:
4620: <p>Works like the <code title="dom-open"><a href="#dom-open">window.open()</a></code>
4621: method.</p>
4622:
4623: </dd>
4624:
4625: </dl><h4 id="closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-close" id="dom-document-close"><a href="#dom-document-close">close</a></code>()</dt>
4626:
4627: <dd>
4628:
4629: <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>
4630:
1.612 mike 4631: <p>Throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if the
1.545 mike 4632: <code><a href="#document">Document</a></code> is an <a href="#xml-documents" title="XML documents">XML
4633: document</a>.</p>
4634:
4635: </dd>
4636:
4637: </dl><h4 id="document.write"><span class="secno">3.4.3 </span><code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-write" id="dom-document-write"><a href="#dom-document-write">write</a></code>(<var title="">text</var>...)</dt>
4638:
4639: <dd>
4640:
4641: <p>In general, adds the given string(s) to the
4642: <code><a href="#document">Document</a></code>'s input stream.</p>
4643:
4644: <p class="warning">This method has very idiosyncratic behavior. In
4645: some cases, this method can affect the state of the <a href="#html-parser">HTML
4646: parser</a> while the parser is running, resulting in a DOM that
4647: does not correspond to the source of the document. In other cases,
4648: the call can clear the current page first, as if <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> had been called.
4649: In yet more cases, the method is simply ignored, or throws an
4650: exception. To make matters worse, the exact behavior of this
4651: method can in some cases be dependent on network latency, which
4652: can lead to failures that are very hard to debug. <strong>For all
4653: these reasons, use of this method is strongly
4654: discouraged.</strong></p>
4655:
1.612 mike 4656: <p>This method throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception
1.545 mike 4657: when invoked on <a href="#xml-documents">XML documents</a>.</p>
4658:
4659: </dd>
4660:
4661: </dl><h4 id="document.writeln"><span class="secno">3.4.4 </span><code title="dom-document-writeln"><a href="#dom-document-writeln">document.writeln()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-writeln" id="dom-document-writeln"><a href="#dom-document-writeln">writeln</a></code>(<var title="">text</var>...)</dt>
4662:
4663: <dd>
4664:
4665: <p>Adds the given string(s) to the <code><a href="#document">Document</a></code>'s input
4666: stream, followed by a newline character. If necessary, calls the
4667: <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method implicitly
4668: first.</p>
4669:
1.612 mike 4670: <p>This method throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception
1.545 mike 4671: when invoked on <a href="#xml-documents">XML documents</a>.</p>
4672:
4673: </dd>
4674:
4675: </dl><h2 id="semantics"><span class="secno">4 </span>The elements of HTML</h2><h3 id="the-root-element"><span class="secno">4.1 </span>The root element</h3><p>The <a href="#the-html-element">html</a> element.</p><h4 id="the-html-element"><span class="secno">4.1.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>html</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
4676: <dd>None.</dd>
4677: <dt>Contexts in which this element can be used:</dt>
4678: <dd>As the root element of a document.</dd>
4679: <dd>Wherever a subdocument fragment is allowed in a compound document.</dd>
4680: <dt>Content model:</dt>
4681: <dd>A <code><a href="#the-head-element">head</a></code> element followed by a <code><a href="#the-body-element">body</a></code> element.</dd>
4682: <dt>Content attributes:</dt>
4683: <dd><a href="#global-attributes">Global attributes</a></dd>
4684: <dd><code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code></dd>
4685: <dt>DOM interface:</dt>
4686: <dd>
4687: <pre class="idl">interface <dfn id="htmlhtmlelement" role="button" tabindex="0" aria-haspopup="true">HTMLHtmlElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
4688: </dd>
4689: </dl><p>The <code><a href="#the-html-element">html</a></code> element <a href="#represents">represents</a> the root of
4690: an HTML document.</p><p>The <dfn id="attr-html-manifest" role="button" tabindex="0" aria-haspopup="true"><code>manifest</code></dfn>
4691: attribute gives the address of the document's <a href="#application-cache">application
4692: cache</a> <a href="#concept-appcache-manifest" title="concept-appcache-manifest">manifest</a>, if there is
4693: one. If the attribute is present, the attribute's value must be a
4694: <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
4695: spaces</a>.</p><p>The <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
4696: only <a href="#concept-appcache-init" title="concept-appcache-init">has an effect</a> during
4697: the early stages of document load. Changing the attribute
4698: dynamically thus has no effect (and thus, no DOM API is provided for
4699: this attribute).</p><p class="note">For the purposes of <a href="#concept-appcache-init" title="concept-appcache-init">application cache selection</a>,
1.544 mike 4700: 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
4701: attributes are processed before those elements are seen.</p><p class="note">The <code title="dom-applicationCache"><a href="#dom-applicationcache">window.applicationCache</a></code> IDL
4702: attribute provides scripted access to the offline <a href="#application-cache">application
1.545 mike 4703: cache</a> mechanism.</p><div class="example">
4704:
4705: <p>The <code><a href="#the-html-element">html</a></code> element in the following example declares
4706: that the document's language is English.</p>
4707:
4708: <pre><!DOCTYPE html>
4709: <strong><html lang="en"></strong>
4710: <head>
4711: <title>Swapping Songs</title>
4712: </head>
4713: <body>
4714: <h1>Swapping Songs</h1>
4715: <p>Tonight I swapped some of the songs I wrote with some friends, who
4716: gave me some of the songs they wrote. I love sharing my music.</p>
4717: </body>
4718: <strong></html></strong></pre>
4719:
4720: </div><h3 id="document-metadata"><span class="secno">4.2 </span>Document metadata</h3><h4 id="the-head-element"><span class="secno">4.2.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>head</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
4721: <dd>None.</dd>
4722: <dt>Contexts in which this element can be used:</dt>
4723: <dd>As the first element in an <code><a href="#the-html-element">html</a></code> element.</dd>
4724: <dt>Content model:</dt>
4725: <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>
4726: <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">title</a></code> element.</dd>
4727: <dt>Content attributes:</dt>
4728: <dd><a href="#global-attributes">Global attributes</a></dd>
4729: <dt>DOM interface:</dt>
4730: <dd>
4731: <pre class="idl">interface <dfn id="htmlheadelement" role="button" tabindex="0" aria-haspopup="true">HTMLHeadElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
4732: </dd>
4733: </dl><p>The <code><a href="#the-head-element">head</a></code> element <a href="#represents">represents</a> a
4734: collection of metadata for the <code><a href="#document">Document</a></code>.</p><div class="example">
4735:
4736: <p>The collection of metadata in a <code><a href="#the-head-element">head</a></code> element can be
4737: large or small. Here is an example of a very short one:</p>
4738:
4739: <pre><!doctype html>
4740: <html>
4741: <head>
4742: <title>A document with a short head</title>
4743: </head>
4744: <body>
4745: ...</pre>
4746:
4747: <p>Here is an example of a longer one:</p>
4748:
4749: <pre><!DOCTYPE HTML>
4750: <HTML>
4751: <HEAD>
4752: <META CHARSET="UTF-8">
4753: <BASE HREF="http://www.example.com/">
4754: <TITLE>An application with a long head</TITLE>
4755: <LINK REL="STYLESHEET" HREF="default.css">
4756: <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
4757: <SCRIPT SRC="support.js"></SCRIPT>
4758: <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
4759: </HEAD>
4760: <BODY>
4761: ...</pre>
4762:
4763: </div><p class="note">The <code><a href="#the-title-element">title</a></code> element is a required child
1.544 mike 4764: in most situations, but when a higher-level protocol provides title
4765: information, e.g. in the Subject line of an e-mail when HTML is used
1.293 mike 4766: as an e-mail authoring format, the <code><a href="#the-title-element">title</a></code> element can be
1.545 mike 4767: omitted.</p><h4 id="the-title-element"><span class="secno">4.2.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
4768: <dd><a href="#metadata-content">Metadata content</a>.</dd>
4769: <dt>Contexts in which this element can be used:</dt>
4770: <dd>In a <code><a href="#the-head-element">head</a></code> element containing no other <code><a href="#the-title-element">title</a></code> elements.</dd>
4771: <dt>Content model:</dt>
4772: <dd><a href="#text-content" title="text content">Text</a>.</dd>
4773: <dt>Content attributes:</dt>
4774: <dd><a href="#global-attributes">Global attributes</a></dd>
4775: <dt>DOM interface:</dt>
4776: <dd>
4777: <pre class="idl">interface <dfn id="htmltitleelement" role="button" tabindex="0" aria-haspopup="true">HTMLTitleElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
4778: attribute DOMString <a href="#dom-title-text" title="dom-title-text">text</a>;
4779: };</pre>
4780: </dd>
4781: </dl><p>The <code><a href="#the-title-element">title</a></code> element <a href="#represents">represents</a> the
4782: document's title or name. Authors should use titles that identify
4783: their documents even when they are used out of context, for example
4784: in a user's history or bookmarks, or in search results. The
4785: document's title is often different from its first heading, since the
4786: first heading does not have to stand alone when taken out of
4787: context.</p><p>There must be no more than one <code><a href="#the-title-element">title</a></code> element per
4788: document.</p><dl class="domintro"><dt><var title="">title</var> . <code title="dom-title-text" id="dom-title-text"><a href="#dom-title-text">text</a></code> [ = <var title="">value</var> ]</dt>
4789:
4790: <dd>
4791:
4792: <p>Returns the contents of the element, ignoring child nodes that
4793: aren't <a href="#text-node" title="text node">text nodes</a>.</p>
4794:
4795: <p>Can be set, to replace the element's children with the given
4796: value.</p>
4797:
4798: </dd>
4799:
4800: </dl><div class="example">
4801:
4802: <p>Here are some examples of appropriate titles, contrasted with
4803: the top-level headings that might be used on those same pages.</p>
4804:
4805: <pre> <title>Introduction to The Mating Rituals of Bees</title>
4806: ...
4807: <h1>Introduction</h1>
4808: <p>This companion guide to the highly successful
4809: <cite>Introduction to Medieval Bee-Keeping</cite> book is...</pre>
4810:
4811: <p>The next page might be a part of the same site. Note how the
4812: title describes the subject matter unambiguously, while the first
4813: heading assumes the reader knows what the context is and therefore
4814: won't wonder if the dances are Salsa or Waltz:</p>
4815:
4816: <pre> <title>Dances used during bee mating rituals</title>
4817: ...
4818: <h1>The Dances</h1></pre>
4819:
4820: </div><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 attribute.</p><h4 id="the-base-element"><span class="secno">4.2.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>base</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
4821: <dd><a href="#metadata-content">Metadata content</a>.</dd>
4822: <dt>Contexts in which this element can be used:</dt>
4823: <dd>In a <code><a href="#the-head-element">head</a></code> element containing no other <code><a href="#the-base-element">base</a></code> elements.</dd>
4824: <dt>Content model:</dt>
4825: <dd>Empty.</dd>
4826: <dt>Content attributes:</dt>
4827: <dd><a href="#global-attributes">Global attributes</a></dd>
4828: <dd><code title="attr-base-href"><a href="#attr-base-href">href</a></code></dd>
4829: <dd><code title="attr-base-target"><a href="#attr-base-target">target</a></code></dd>
4830: <dt>DOM interface:</dt>
4831: <dd>
4832: <pre class="idl">interface <dfn id="htmlbaseelement" role="button" tabindex="0" aria-haspopup="true">HTMLBaseElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
4833: attribute DOMString <a href="#dom-base-href" title="dom-base-href">href</a>;
4834: attribute DOMString <a href="#dom-base-target" title="dom-base-target">target</a>;
4835: };</pre>
4836: </dd>
4837: </dl><p>The <code><a href="#the-base-element">base</a></code> element allows authors to specify the
4838: <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
4839: of the default <a href="#browsing-context">browsing context</a> for the purposes of
4840: <a href="#following-hyperlinks">following hyperlinks</a>. The element does not <a href="#represents" title="represents">represent</a> any content beyond this
4841: information.</p><p>There must be no more than one <code><a href="#the-base-element">base</a></code> element per
4842: document.</p><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><p>The <dfn id="attr-base-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn> content
4843: attribute, if specified, must contain a <a href="#valid-url-potentially-surrounded-by-spaces">valid URL potentially
4844: surrounded by spaces</a>.</p><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
4845: other elements in the tree that have attributes defined as taking
4846: <a href="#url" title="URL">URLs</a>, except the <code><a href="#the-html-element">html</a></code> element
4847: (its <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
4848: isn't affected by <code><a href="#the-base-element">base</a></code> elements).</p><p>The <dfn id="attr-base-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn>
4849: attribute, if specified, must contain a <a href="#valid-browsing-context-name-or-keyword">valid browsing context
4850: name or keyword</a>, which specifies which <a href="#browsing-context">browsing
4851: 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><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
4852: any elements in the tree that represent <a href="#hyperlink" title="hyperlink">hyperlinks</a>.</p>
4853: <p>The <dfn id="dom-base-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn> IDL
4854: attribute, on getting, must return the page's <a href="#document-base-url">document base
4855: URL</a>, and on setting, it must set the <code title="attr-base-href"><a href="#attr-base-href">href</a></code> content attribute to the given
4856: new value.</p>
4857:
4858: <p>The <dfn id="dom-base-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn> IDL
4859: attribute must <a href="#reflect">reflect</a> the content attribute of the
4860: same name.</p>
4861: <div class="example">
4862:
4863: <p>In this example, a <code><a href="#the-base-element">base</a></code> element is used to set the
4864: <a href="#document-base-url">document base URL</a>:</p>
4865:
4866: <pre><!DOCTYPE html>
4867: <html>
4868: <head>
4869: <title>This is an example for the &lt;base&gt; element</title>
4870: <base href="http://www.example.com/news/index.html">
4871: </head>
4872: <body>
4873: <p>Visit the <a href="archives.html">archives</a>.</p>
4874: </body>
4875: </html></pre>
4876:
4877: <p>The link in the above example would be a link to "<code title="">http://www.example.com/news/archives.html</code>".</p>
4878:
4879: </div><h4 id="the-link-element"><span class="secno">4.2.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>link</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
4880: <dd><a href="#metadata-content">Metadata content</a>.</dd>
4881: <dt>Contexts in which this element can be used:</dt>
4882: <dd>Where <a href="#metadata-content">metadata content</a> is expected.</dd>
4883: <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">head</a></code> element.</dd>
4884: <dt>Content model:</dt>
4885: <dd>Empty.</dd>
4886: <dt>Content attributes:</dt>
4887: <dd><a href="#global-attributes">Global attributes</a></dd>
4888: <dd><code title="attr-link-href"><a href="#attr-link-href">href</a></code></dd>
4889: <dd><code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code></dd>
4890: <dd><code title="attr-link-media"><a href="#attr-link-media">media</a></code></dd>
4891: <dd><code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code></dd>
4892: <dd><code title="attr-link-type"><a href="#attr-link-type">type</a></code></dd>
4893: <dd><code title="attr-link-sizes"><a href="#attr-link-sizes">sizes</a></code></dd>
4894: <dd>Also, the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute has special semantics on this element.</dd>
4895: <dt>DOM interface:</dt>
4896: <dd>
4897: <pre class="idl">interface <dfn id="htmllinkelement" role="button" tabindex="0" aria-haspopup="true">HTMLLinkElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
4898: attribute boolean <a href="#dom-link-disabled" title="dom-link-disabled">disabled</a>;
4899: attribute DOMString <a href="#dom-link-href" title="dom-link-href">href</a>;
4900: attribute DOMString <a href="#dom-link-rel" title="dom-link-rel">rel</a>;
4901: readonly attribute <a href="#domtokenlist">DOMTokenList</a> <a href="#dom-link-rellist" title="dom-link-relList">relList</a>;
4902: attribute DOMString <a href="#dom-link-media" title="dom-link-media">media</a>;
4903: attribute DOMString <a href="#dom-link-hreflang" title="dom-link-hreflang">hreflang</a>;
4904: attribute DOMString <a href="#dom-link-type" title="dom-link-type">type</a>;
4905: [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-link-sizes" title="dom-link-sizes">sizes</a>;
4906: };
4907: <a href="#htmllinkelement">HTMLLinkElement</a> implements <span>LinkStyle</span>;</pre>
4908: </dd>
4909: </dl><p>The <code><a href="#the-link-element">link</a></code> element allows authors to link their
4910: document to other resources.</p><p>The destination of the link(s) is given by the <dfn id="attr-link-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn> attribute, which must
4911: be present and must contain a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially
4912: 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
4913: element does not define a link.</span></p><p>A <code><a href="#the-link-element">link</a></code> element must have <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute.</p><p>The types of link indicated (the relationships) are given by the
4914: value of the <dfn id="attr-link-rel" role="button" tabindex="0" aria-haspopup="true"><code>rel</code></dfn>
4915: attribute, which, if present, must have a value that is a <a href="#set-of-space-separated-tokens">set
4916: of space-separated tokens</a>. The <a href="#linkTypes">allowed
4917: keywords and their meanings</a> are defined in a later
4918: section. <span class="impl">If the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute is absent, has no
4919: keywords, or if none of the keywords used are allowed according to
4920: the definitions in this specification, then the element does not
4921: create any links.</span></p><p>Two categories of links can be created using the
4922: <code><a href="#the-link-element">link</a></code> element: <a href="#external-resource-link" title="external resource
4923: link">Links to external resources</a> and <a href="#hyperlink" title="hyperlink">hyperlinks</a>. The <a href="#linkTypes">link
4924: types section</a> defines whether a particular link type is an
4925: external resource or a hyperlink. One <code><a href="#the-link-element">link</a></code> element can
4926: create multiple links (of which some might be external resource
4927: links and some might be hyperlinks); exactly which and how many
4928: links are created depends on the keywords given in the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute. User agents must process
4929: the links on a per-link basis, not a per-element basis.</p><p class="note">Each link created for a <code><a href="#the-link-element">link</a></code> element is
1.1 mike 4930: handled separately. For instance, if there are two <code><a href="#the-link-element">link</a></code>
4931: elements with <code title="">rel="stylesheet"</code>, they each
4932: count as a separate external resource, and each is affected by its
4933: own attributes independently. Similarly, if a single
4934: <code><a href="#the-link-element">link</a></code> element has a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute with the value <code title="">next stylesheet</code>, it creates both a
4935: <a href="#hyperlink">hyperlink</a> (for the <code title="rel-next"><a href="#link-type-next">next</a></code>
4936: keyword) and an <a href="#external-resource-link">external resource link</a> (for the <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code> keyword), and they are
1.545 mike 4937: affected by other attributes (such as <code title="attr-link-media"><a href="#attr-link-media">media</a></code> or <code title="attr-link-title"><a href="#attr-link-title">title</a></code>) differently.</p><div class="example">
4938:
4939: <p>For example, the following <code><a href="#the-link-element">link</a></code> element creates two
4940: hyperlinks (to the same page):</p>
4941:
4942: <pre><link rel="author license" href="/about"></pre>
4943:
4944: <p>The two links created by this element are one whose semantic is
4945: that the target page has information about the current page's
4946: author, and one whose semantic is that the target page has
4947: information regarding the license under which the current page is
4948: provided.</p>
4949:
4950: </div><p>The exact behavior for links to external resources depends on the
4951: exact relationship, as defined for the relevant link type. Some of
4952: the attributes control whether or not the external resource is to be
4953: applied (as defined below).</p><p class="note">Hyperlinks created with the <code><a href="#the-link-element">link</a></code>
1.1 mike 4954: element and its <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute
4955: 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>
4956: and <code><a href="#the-area-element">area</a></code> elements, which indicates the type of a link
4957: whose context is given by the link's location within the
1.545 mike 4958: document.</p><p>The <dfn id="attr-link-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>
4959: attribute says which media the resource applies to. The value must
4960: be a <a href="#valid-media-query">valid media query</a>.</p><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
4961: media.</p><p>The <dfn id="attr-link-hreflang" role="button" tabindex="0" aria-haspopup="true"><code>hreflang</code></dfn>
4962: attribute on the <code><a href="#the-link-element">link</a></code> element has the same semantics as
4963: the <a href="#attr-hyperlink-hreflang" title="attr-hyperlink-hreflang"><code>hreflang</code>
4964: attribute on <code>a</code> and <code>area</code>
4965: elements</a>.</p><p>The <dfn id="attr-link-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> attribute
4966: gives the <a href="#mime-type">MIME type</a> of the linked resource. It is
4967: purely advisory. The value must be a <a href="#valid-mime-type">valid MIME
4968: type</a>.</p><p>For <a href="#external-resource-link" title="external resource link">external resource
4969: links</a>, the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute
4970: is used as a hint to user agents so that they can avoid fetching
4971: resources they do not support. <span class="impl">If the attribute
4972: is present, then the user agent must assume that the resource is of
4973: the given type (even if that is not a <a href="#valid-mime-type">valid MIME type</a>,
4974: e.g. the empty string). If the attribute is omitted, but the
4975: external resource link type has a default type defined, then the
4976: user agent must assume that the resource is of that type. If the UA
4977: does not support the given <a href="#mime-type">MIME type</a> for the given link
4978: relationship, then the UA should not <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource; if the UA
4979: does support the given <a href="#mime-type">MIME type</a> for the given link
4980: relationship, then the UA should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource at the
4981: appropriate time as specified for the <a href="#external-resource-link">external resource
4982: link</a>'s particular type. If the attribute is omitted, and the
4983: external resource link type does not have a default type defined,
4984: but the user agent would <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource if the type
4985: was known and supported, then the user agent should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource under the
4986: assumption that it will be supported.</span></p><p>The <dfn id="attr-link-title" role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn>
4987: attribute gives the title of the link. With one exception, it is
4988: purely advisory. The value is text. The exception is for style sheet
4989: links, where the <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
4990: attribute defines <span>alternative style sheet sets</span>.</p><p class="note">The <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
1.1 mike 4991: attribute on <code><a href="#the-link-element">link</a></code> elements differs from the global
4992: <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute of most other
4993: elements in that a link without a title does not inherit the title
1.545 mike 4994: of the parent element: it merely has no title.</p><p>The <code title="attr-link-sizes"><a href="#attr-link-sizes">sizes</a></code> attribute is used
4995: with the <code title="rel-icon"><a href="#rel-icon">icon</a></code> link type. The attribute
4996: must not be specified on <code><a href="#the-link-element">link</a></code> elements that do not have
4997: a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute that specifies
4998: the <code title="rel-icon"><a href="#rel-icon">icon</a></code> keyword.</p>
4999: <p>The IDL attributes <dfn id="dom-link-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn>, <dfn id="dom-link-rel" role="button" tabindex="0" aria-haspopup="true"><code>rel</code></dfn>, <dfn id="dom-link-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>, <dfn id="dom-link-hreflang" role="button" tabindex="0" aria-haspopup="true"><code>hreflang</code></dfn>, and <dfn id="dom-link-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>, and <dfn id="dom-link-sizes" role="button" tabindex="0" aria-haspopup="true"><code>sizes</code></dfn> each must
5000: <a href="#reflect">reflect</a> the respective content attributes of the same
5001: name.</p>
5002:
5003: <p>The IDL attribute <dfn id="dom-link-rellist" role="button" tabindex="0" aria-haspopup="true"><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>
5004: <p>The IDL attribute <dfn id="dom-link-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn> only applies
5005: to style sheet links. When the <code><a href="#the-link-element">link</a></code> element defines a
5006: style sheet link, then the <code title="dom-link-disabled"><a href="#dom-link-disabled">disabled</a></code> attribute behaves as
5007: defined <a href="#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative
5008: style sheets DOM</a>. For all other <code><a href="#the-link-element">link</a></code> elements it
5009: always return false and does nothing on setting.</p><p>The <code>LinkStyle</code> interface is also implemented by
5010: this element; the <a href="#styling">styling processing model</a> defines
5011: how. <a href="#refsCSSOM">[CSSOM]</a></p><div class="example">
5012:
5013: <p>Here, a set of <code><a href="#the-link-element">link</a></code> elements provide some style
5014: sheets:</p>
5015:
5016: <pre><!-- a persistent style sheet -->
5017: <link rel="stylesheet" href="default.css">
5018:
5019: <!-- the preferred alternate style sheet -->
5020: <link rel="stylesheet" href="green.css" title="Green styles">
5021:
5022: <!-- some alternate style sheets -->
5023: <link rel="alternate stylesheet" href="contrast.css" title="High contrast">
5024: <link rel="alternate stylesheet" href="big.css" title="Big fonts">
5025: <link rel="alternate stylesheet" href="wide.css" title="Wide screen"></pre>
5026:
5027: </div><div class="example">
5028:
5029: <p>The following example shows how you can specify versions of the
5030: page that use alternative formats, are aimed at other languages,
5031: and that are intended for other media:</p>
5032:
5033: <pre><link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
5034: <link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
5035: <link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
5036: <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
5037: <link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
5038: <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"></pre>
5039:
5040: </div><h4 id="the-meta-element"><span class="secno">4.2.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>meta</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
5041: <dd><a href="#metadata-content">Metadata content</a>.</dd>
5042: <dt>Contexts in which this element can be used:</dt>
5043: <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">head</a></code> element.</dd>
5044: <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">head</a></code> element.</dd>
5045: <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">head</a></code> element.</dd>
5046: <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>
5047: <dt>Content model:</dt>
5048: <dd>Empty.</dd>
5049: <dt>Content attributes:</dt>
5050: <dd><a href="#global-attributes">Global attributes</a></dd>
5051: <dd><code title="attr-meta-name"><a href="#attr-meta-name">name</a></code></dd>
5052: <dd><code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code></dd>
5053: <dd><code title="attr-meta-content"><a href="#attr-meta-content">content</a></code></dd>
5054: <dd><code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code></dd>
5055: <dt>DOM interface:</dt>
5056: <dd>
5057: <pre class="idl">interface <dfn id="htmlmetaelement" role="button" tabindex="0" aria-haspopup="true">HTMLMetaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
5058: attribute DOMString <a href="#dom-meta-name" title="dom-meta-name">name</a>;
5059: attribute DOMString <a href="#dom-meta-httpequiv" title="dom-meta-httpEquiv">httpEquiv</a>;
5060: attribute DOMString <a href="#dom-meta-content" title="dom-meta-content">content</a>;
5061: };</pre>
5062: </dd>
5063: </dl><p>The <code><a href="#the-meta-element">meta</a></code> element <a href="#represents">represents</a> various
5064: kinds of metadata that cannot be expressed using the
5065: <code><a href="#the-title-element">title</a></code>, <code><a href="#the-base-element">base</a></code>, <code><a href="#the-link-element">link</a></code>,
5066: <code><a href="#the-style-element">style</a></code>, and <code><a href="#the-script-element">script</a></code> elements.</p><p>The <code><a href="#the-meta-element">meta</a></code> element can represent document-level
5067: metadata with the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>
5068: attribute, pragma directives with the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute, and the
5069: file's <a href="#character-encoding-declaration">character encoding declaration</a> when an HTML
5070: document is serialized to string form (e.g. for transmission over
5071: the network or for disk storage) with the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute.</p><p>Exactly one of the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>,
5072: <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>, and <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attributes must be
5073: specified.</p><p>If either <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> or <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> is specified, then
5074: the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must
5075: also be specified. Otherwise, it must be omitted.</p><p>The <dfn id="attr-meta-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn>
5076: attribute specifies the character encoding used by the
5077: document. This is a <a href="#character-encoding-declaration">character encoding declaration</a>. If
5078: the attribute is present in an <a href="#xml-documents" title="XML documents">XML
5079: document</a>, its value must be an <a href="#ascii-case-insensitive">ASCII
5080: case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
5081: UTF-8 as its encoding).</p><p class="note">The <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code>
1.293 mike 5082: attribute on the <code><a href="#the-meta-element">meta</a></code> element has no effect in XML
1.1 mike 5083: documents, and is only allowed in order to facilitate migration to
1.545 mike 5084: and from XHTML.</p><p>There must not be more than one <code><a href="#the-meta-element">meta</a></code> element with a
5085: <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute per
5086: document.</p><p>The <dfn id="attr-meta-content" role="button" tabindex="0" aria-haspopup="true"><code>content</code></dfn>
5087: attribute gives the value of the document metadata or pragma
5088: directive when the element is used for those purposes. The allowed
5089: values depend on the exact context, as described in subsequent
5090: sections of this specification.</p><p>If a <code><a href="#the-meta-element">meta</a></code> element has a <dfn id="attr-meta-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> attribute, it sets
5091: document metadata. Document metadata is expressed in terms of
5092: name-value pairs, the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>
5093: attribute on the <code><a href="#the-meta-element">meta</a></code> element giving the name, and the
5094: <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute on the same
5095: element giving the value. The name specifies what aspect of metadata
5096: is being set; valid names and the meaning of their values are
5097: described in the following sections. If a <code><a href="#the-meta-element">meta</a></code> element
5098: has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute,
5099: then the value part of the metadata name-value pair is the empty
5100: string.</p>
5101: <p>The <dfn id="dom-meta-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> and <dfn id="dom-meta-content" role="button" tabindex="0" aria-haspopup="true"><code>content</code></dfn> IDL attributes
5102: must <a href="#reflect">reflect</a> the respective content attributes of the
5103: same name. The IDL attribute <dfn id="dom-meta-httpequiv" role="button" tabindex="0" aria-haspopup="true"><code>httpEquiv</code></dfn> must
5104: <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>
5105: <h5 id="standard-metadata-names"><span class="secno">4.2.5.1 </span>Standard metadata names</h5><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
5106: <code><a href="#the-meta-element">meta</a></code> element.</p><p>Names are case-insensitive<span class="impl">, and must be compared
5107: in an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> manner</span>.</p><dl><dt><dfn id="meta-application-name" role="button" tabindex="0" aria-haspopup="true"><code>application-name</code></dfn></dt>
5108:
5109: <dd><p>The value must be a short free-form string giving the name
5110: of the Web application that the page represents. If the page is not
5111: a Web application, the <code title="meta-application-name"><a href="#meta-application-name">application-name</a></code> metadata name
5112: must not be used. There must not be more than one <code><a href="#the-meta-element">meta</a></code>
5113: element with its <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute
5114: set to the value <code title="meta-application-name"><a href="#meta-application-name">application-name</a></code> per
5115: document. <span class="impl">User agents may use the application
5116: name in UI in preference to the page's <code><a href="#the-title-element">title</a></code>, since
5117: the title might include status messages and the like relevant to
5118: the status of the page at a particular moment in time instead of
5119: just being the name of the application.</span></p></dd>
5120:
5121: <dt><dfn id="meta-author" role="button" tabindex="0" aria-haspopup="true"><code>author</code></dfn></dt>
5122:
5123: <dd><p>The value must be a free-form string giving the name of one
5124: of the page's authors.</p></dd>
5125:
5126: <dt><dfn id="meta-description" role="button" tabindex="0" aria-haspopup="true"><code>description</code></dfn></dt>
5127:
5128: <dd><p>The value must be a free-form string that describes the
5129: page. The value must be appropriate for use in a directory of
5130: pages, e.g. in a search engine. There must not be more than one
5131: <code><a href="#the-meta-element">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.</p></dd>
5132:
5133: <dt><dfn id="meta-generator" role="button" tabindex="0" aria-haspopup="true"><code>generator</code></dfn></dt>
5134:
5135: <dd>
5136:
5137: <p>The value must be a free-form string that identifies one of the
5138: software packages used to generate the document. This value must
5139: not be used on hand-authored pages.</p>
5140:
5141: <div class="example">
5142:
5143: <p>Here is what a tool called "Frontweaver" could include in its
5144: output, in the page's <code><a href="#the-head-element">head</a></code> element, to identify
5145: itself as the tool used to generate the page:</p>
5146:
5147: <pre><meta name=generator content="Frontweaver 8.2"></pre>
5148:
5149: </div>
5150:
5151: </dd>
5152:
5153: <dt><dfn id="meta-keywords" role="button" tabindex="0" aria-haspopup="true"><code>keywords</code></dfn></dt>
5154:
5155: <dd>
5156:
5157: <p>The value must be a <a href="#set-of-comma-separated-tokens">set of comma-separated tokens</a>,
5158: each of which is a keyword relevant to the page.</p>
5159:
5160: <div class="example">
5161:
5162: <p>This page about typefaces on British motorways uses a
5163: <code><a href="#the-meta-element">meta</a></code> element to specify some keywords that users
5164: might use to look for the page:</p>
5165:
5166: <pre><!DOCTYPE HTML>
5167: <html>
5168: <head>
5169: <title>Typefaces on UK motorways</title>
5170: <meta name="keywords" content="british,type face,font,fonts,highway,highways">
5171: </head>
5172: <body>
5173: ...</pre>
5174:
5175: </div>
5176:
5177: <p class="note">Many search engines do not consider such keywords,
5178: because this feature has historically been used unreliably and
5179: even misleadingly as a way to spam search engine results in a way
5180: that is not helpful for users.</p>
5181:
5182:
5183:
5184: </dd>
5185:
5186: </dl><h5 id="other-metadata-names"><span class="secno">4.2.5.2 </span>Other metadata names</h5><p><dfn id="concept-meta-extensions" role="button" tabindex="0" aria-haspopup="true">Extensions to the predefined
5187: set of metadata names</dfn> may be registered in the <a href="http://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki
5188: MetaExtensions page</a>. <a href="#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any
5189: time to add a type. These new names must be specified with the
5190: following information:</p><dl><dt>Keyword</dt>
5191:
5192: <dd><p>The actual name being defined. The name should not be
5193: confusingly similar to any other defined name (e.g. differing only
5194: in case).</p></dd>
5195:
5196:
5197: <dt>Brief description</dt>
5198:
5199: <dd><p>A short non-normative description of what the metadata
5200: name's meaning is, including the format the value is required to be
5201: in.</p></dd>
5202:
5203:
5204: <dt>Specification</dt>
5205:
5206: <dd>A link to a more detailed description of the metadata name's
5207: semantics and requirements. It could be another page on the Wiki,
5208: or a link to an external page.</dd>
5209:
5210:
5211: <dt>Synonyms</dt>
5212:
5213: <dd><p>A list of other names that have exactly the same processing
5214: requirements. Authors should not use the names defined to be
5215: synonyms, they are only intended to allow user agents to support
5216: legacy content. Anyone may remove synonyms that are not used in
5217: practice; only names that need to be processed as synonyms for
5218: compatibility with legacy content are to be registered in this
5219: way.</p></dd>
5220:
5221:
5222: <dt>Status</dt>
5223:
5224: <dd>
5225:
5226: <p>One of the following:</p>
5227:
5228: <dl><dt>Proposed</dt>
5229:
5230: <dd>The name has not received wide peer review and
5231: approval. Someone has proposed it and is, or soon will be, using
5232: it.</dd>
5233:
5234: <dt>Ratified</dt>
5235:
5236: <dd>The name has received wide peer review and approval. It has a
5237: specification that unambiguously defines how to handle pages that
5238: use the name, including when they use it in incorrect ways.</dd>
5239:
5240: <dt>Discontinued</dt>
5241:
5242: <dd>The metadata name has received wide peer review and it has
5243: been found wanting. Existing pages are using this metadata name,
5244: but new pages should avoid it. The "brief description" and
5245: "specification" entries will give details of what authors should
5246: use instead, if anything.</dd>
5247:
5248: </dl><p>If a metadata name is found to be redundant with existing
5249: values, it should be removed and listed as a synonym for the
5250: existing value.</p>
5251:
5252: <p>If a metadata name is registered in the "proposed" state for a
5253: period of a month or more without being used or specified, then it
5254: may be removed from the registry.</p>
5255:
5256: <p>If a metadata name is added with the "proposed" status and
5257: found to be redundant with existing values, it should be removed
5258: and listed as a synonym for the existing value. If a metadata name
5259: is added with the "proposed" status and found to be harmful, then
5260: it should be changed to "discontinued" status.</p>
5261:
5262: <p>Anyone can change the status at any time, but should only do so
5263: in accordance with the definitions above.</p>
5264:
5265: </dd>
5266:
5267: </dl><p>Metadata names whose values are to be <a href="#url" title="URL">URLs</a> must not be proposed or accepted. Links must
5268: be represented using the <code><a href="#the-link-element">link</a></code> element, not the
5269: <code><a href="#the-meta-element">meta</a></code> element.</p><h5 id="pragma-directives"><span class="secno">4.2.5.3 </span>Pragma directives</h5><p>When the <dfn id="attr-meta-http-equiv" role="button" tabindex="0" aria-haspopup="true"><code>http-equiv</code></dfn> attribute
5270: is specified on a <code><a href="#the-meta-element">meta</a></code> element, the element is a pragma
5271: directive.</p><p>The <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>
5272: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The following
5273: table lists the keywords defined for this attribute. The states
5274: given in the first cell of the rows with keywords give the states to
5275: which those keywords map. <span class="impl">Some of the keywords
5276: are non-conforming, as noted in the last column.</span></p><table id="table-http-equiv"><thead><tr><th>State
5277: </th><th>Keyword
5278: </th><th>Notes
5279: </th></tr></thead><tbody><tr class="impl"><td><a href="#attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content Language</a>
5280: </td><td><code title="">content-language</code>
5281: </td><td>Non-conforming
5282: </td></tr><tr><td><a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration</a>
5283: </td><td><code title="">content-type</code>
5284: </td><td>
5285: </td></tr><tr><td><a href="#attr-meta-http-equiv-default-style" title="attr-meta-http-equiv-default-style">Default style</a>
5286: </td><td><code title="">default-style</code>
5287: </td><td>
5288: </td></tr><tr><td><a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh</a>
5289: </td><td><code title="">refresh</code>
5290: </td><td>
5291: </td></tr><tr class="impl"><td><a href="#attr-meta-http-equiv-set-cookie" title="attr-meta-http-equiv-set-cookie">Cookie setter</a>
5292: </td><td><code title="">set-cookie</code>
5293: </td><td>Non-conforming
5294: </td></tr></tbody></table><dl><dt class="impl"><dfn id="attr-meta-http-equiv-content-language" role="button" tabindex="0" aria-haspopup="true">Content language state</dfn> (<code title="">http-equiv="content-language"</code>)
5295:
5296: </dt><dd class="impl">
5297:
5298: <p class="note">This feature is non-conforming. Authors are
5299: encouraged to use the <code title="attr-lang"><a href="#attr-lang">lang</a></code>
5300: attribute instead.</p>
5301:
5302: <p>This pragma sets the <dfn id="pragma-set-default-language" role="button" tabindex="0" aria-haspopup="true">pragma-set default
5303: language</dfn>. Until the pragma is successfully processed, there
5304: is no <a href="#pragma-set-default-language">pragma-set default language</a>.</p>
5305:
5306: <ol><li><p>If another <code><a href="#the-meta-element">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
5307: <a href="#attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content
5308: Language state</a> has already been successfully processed
5309: (i.e. when it was inserted the user agent processed it and
5310: reached the last step of this list of steps), then abort these
5311: steps.</p></li>
5312:
5313: <li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
5314: attribute's value is the empty string, then abort these
5315: steps.</p></li>
5316:
5317: <li><p>If the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute contains a
5318: U+002C COMMA character (,) then abort these steps.</p></li>
5319: <li><p>Let <var title="">input</var> be the value of the
5320: element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code>
5321: attribute.</p></li>
5322:
5323: <li><p>Let <var title="">position</var> point at the first
5324: character of <var title="">input</var>.</p></li>
5325:
5326: <li><p><a href="#skip-whitespace">Skip whitespace</a>.</p></li>
5327:
5328: <li><p><a href="#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
5329: sequence of characters</a> that are not <a href="#space-character" title="space character">space characters</a>.</p></li>
5330:
5331: <li><p>Let the <a href="#pragma-set-default-language">pragma-set default language</a> be the
5332: string that resulted from the previous step.</p></li>
5333:
5334: </ol><p class="note">This pragma is not exactly equivalent to the HTTP
5335: <code>Content-Language</code> header. <a href="#refsHTTP">[HTTP]</a></p>
5336:
5337: </dd>
5338:
5339: <dt><dfn id="attr-meta-http-equiv-content-type" role="button" tabindex="0" aria-haspopup="true">Encoding declaration state</dfn> (<code title="">http-equiv="content-type"</code>)
5340:
5341: </dt><dd>
5342:
5343: <p>The <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
5344: declaration state</a> is just an alternative form of setting
5345: the <code title="meta-charset">charset</code> attribute: it is a
5346: <a href="#character-encoding-declaration">character encoding declaration</a>. <span class="impl">This state's user agent requirements are all handled
5347: by the parsing section of the specification.</span></p>
5348:
5349: <p>For <code><a href="#the-meta-element">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
5350: <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
5351: declaration state</a>, the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must have a
5352: value that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for a
5353: string that consists of: the literal string "<code title="">text/html;</code>", optionally followed by any number of
5354: <a href="#space-character" title="space character">space characters</a>, followed by
5355: the literal string "<code title="">charset=</code>", followed by
5356: the character encoding name of the <a href="#character-encoding-declaration">character encoding
5357: declaration</a>.</p>
5358:
5359: <p>A document must not contain both a <code><a href="#the-meta-element">meta</a></code> element
5360: with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>
5361: attribute in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
5362: state</a> and a <code><a href="#the-meta-element">meta</a></code> element with the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute present.</p>
5363:
5364: <p>The <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
5365: declaration state</a> may be used in <a href="#html-documents">HTML
5366: 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
5367: state must not be used in <a href="#xml-documents">XML documents</a>.</p>
5368:
5369: </dd>
5370:
5371: <dt><dfn id="attr-meta-http-equiv-default-style" role="button" tabindex="0" aria-haspopup="true">Default style state</dfn> (<code title="">http-equiv="default-style"</code>)
5372:
5373: </dt><dd>
5374:
5375: <p>This pragma sets the name of the default <span title="alternative style sheet sets">alternative style sheet
5376: set</span>.</p>
5377:
5378:
5379:
5380: </dd>
5381:
5382: <dt><dfn id="attr-meta-http-equiv-refresh" role="button" tabindex="0" aria-haspopup="true">Refresh state</dfn> (<code title="">http-equiv="refresh"</code>)
5383:
5384: </dt><dd>
5385:
5386: <p>This pragma acts as timed redirect.</p>
5387:
5388:
5389:
5390: <p>For <code><a href="#the-meta-element">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
5391: <a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</a>,
5392: the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must
5393: have a value consisting either of:</p>
5394:
5395: <ul><li>just a <a href="#valid-non-negative-integer">valid non-negative integer</a>, or</li>
5396:
5397: <li>a <a href="#valid-non-negative-integer">valid non-negative integer</a>, followed by a
5398: U+003B SEMICOLON character (;), followed by one or more <a href="#space-character" title="space character">space characters</a>, followed by a
5399: substring that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match
5400: for the string "<code title="">URL</code>", followed by a U+003D
5401: EQUALS SIGN character (=), followed by a <a href="#valid-url">valid URL</a>
5402: that does not start with a literal U+0027 APOSTROPHE (') or
5403: U+0022 QUOTATION MARK (") character.</li>
5404:
5405: </ul><p>In the former case, the integer represents a number of seconds
5406: before the page is to be reloaded; in the latter case the integer
5407: represents a number of seconds before the page is to be replaced
5408: by the page at the given <a href="#url">URL</a>.</p>
5409:
5410: <div class="example">
5411:
5412: <p>A news organization's front page could include the following
5413: markup in the page's <code><a href="#the-head-element">head</a></code> element, to ensure that
5414: the page automatically reloads from the server every five
5415: minutes:</p>
5416:
5417: <pre><meta http-equiv="Refresh" content="300"></pre>
5418:
5419: </div>
5420:
5421: <div class="example">
5422:
5423: <p>A sequence of pages could be used as an automated slide show
5424: by making each page refresh to the next page in the sequence,
5425: using markup such as the following:</p>
5426:
5427: <pre><meta http-equiv="Refresh" content="20; URL=page4.html"></pre>
5428:
5429: </div>
5430:
5431: </dd>
5432:
5433: <dt class="impl"><dfn id="attr-meta-http-equiv-set-cookie" role="button" tabindex="0" aria-haspopup="true">Cookie setter</dfn> (<code title="">http-equiv="set-cookie"</code>)
5434:
5435: </dt><dd class="impl">
5436:
5437: <p>This pragma sets an HTTP cookie. <a href="#refsCOOKIES">[COOKIES]</a></p>
5438:
5439: <p>It is non-conforming. Real HTTP headers should be used instead.</p>
5440:
5441: <ol><li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
5442: attribute's value is the empty string, then abort these
5443: steps.</p></li>
5444:
5445: <li><p><a href="#obtain-the-storage-mutex">Obtain the storage mutex</a>.</p></li>
5446:
5447: <li><p>Act as if <a href="#receives-a-set-cookie-string" title="receives a
5448: set-cookie-string">receiving a set-cookie-string</a> for
5449: <a href="#the-document-s-address">the document's address</a> via a "non-HTTP" API,
5450: consisting of the value of the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute encoded as
5451: UTF-8. <a href="#refsCOOKIES">[COOKIES]</a> <a href="#refsRFC3629">[RFC3629]</a></p></li>
5452:
5453: </ol></dd>
5454:
5455: </dl><p>There must not be more than one <code><a href="#the-meta-element">meta</a></code> element with
5456: any particular state in the document at a time.</p><h5 id="other-pragma-directives"><span class="secno">4.2.5.4 </span>Other pragma directives</h5><p><dfn id="concept-http-equiv-extensions" role="button" tabindex="0" aria-haspopup="true">Extensions to the
5457: predefined set of pragma directives</dfn> may, under certain
5458: conditions, be registered in the <a href="http://wiki.whatwg.org/wiki/PragmaExtensions">WHATWG Wiki
5459: PragmaExtensions page</a>. <a href="#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Such extensions must use a name that is identical to an HTTP
5460: header registered in the Permanent Message Header Field Registry,
5461: and must have behavior identical to that described for the HTTP
5462: header. <a href="#refsIANAPERMHEADERS">[IANAPERMHEADERS]</a></p><p>Pragma directives corresponding to headers describing metadata,
5463: or not requiring specific user agent processing, must not be
5464: registered; instead, use <a href="#concept-meta-extensions" title="concept-meta-extensions">metadata names</a>. Pragma
5465: directives corresponding to headers that affect the HTTP processing
5466: model (e.g. caching) must not be registered, as they would result in
5467: HTTP-level behavior being different for user agents that implement
5468: HTML than for user agents that do not.</p><p>Anyone is free to edit the WHATWG Wiki PragmaExtensions page at
5469: any time to add a pragma directive satisfying these conditions. Such
5470: registrations must specify the following information:</p><dl><dt>Keyword</dt>
5471:
5472: <dd><p>The actual name being defined. The name must match a
5473: previously-registered HTTP name with the same
5474: requirements.</p></dd>
5475:
5476:
5477: <dt>Brief description</dt>
5478:
5479: <dd><p>A short non-normative description of the purpose of the
5480: pragma directive.</p></dd>
5481:
5482:
5483: <dt>Specification</dt>
5484:
5485: <dd>A link to the specification defining the corresponding HTTP
5486: header.</dd>
5487:
5488: </dl><h5 id="charset"><span class="secno">4.2.5.5 </span>Specifying the document's character encoding</h5><p>A <dfn id="character-encoding-declaration" role="button" tabindex="0" aria-haspopup="true">character encoding declaration</dfn> is a mechanism by
5489: which the character encoding used to store or transmit a document is
5490: specified.</p><p>The following restrictions apply to character encoding
5491: declarations:</p><ul><li>The character encoding name given must be the name of the
5492: character encoding used to serialize the file.</li>
5493:
5494: <li>The value must be a valid character encoding name, and must be
5495: an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the
5496: <a href="#preferred-mime-name">preferred MIME name</a> for that encoding. <a href="#refsIANACHARSET">[IANACHARSET]</a></li>
5497:
5498: <li>The character encoding declaration must be serialized without
5499: the use of <a href="#syntax-charref" title="syntax-charref">character references</a>
5500: or character escapes of any kind.</li>
5501:
5502: <li id="charset1024"><span id="charset512" title="">The element
5503: containing the character encoding declaration must be serialized
5504: completely within the first 1024 bytes of the document.</span></li>
5505:
5506:
5507: </ul><p>In addition, due to a number of restrictions on <code><a href="#the-meta-element">meta</a></code>
5508: elements, there can only be one <code><a href="#the-meta-element">meta</a></code>-based character
5509: encoding declaration per document.</p><p>If an <a href="#html-documents" title="HTML documents">HTML document</a> does not
5510: start with a BOM, and if its encoding is not explicitly given by
5511: <a href="#content-type" title="Content-Type">Content-Type metadata</a>, and the
5512: document is not <a href="#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, then the
5513: character encoding used must be an <a href="#ascii-compatible-character-encoding">ASCII-compatible character
5514: encoding</a>, and, in addition, if that encoding isn't US-ASCII
5515: itself, then the encoding must be specified using a
5516: <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute or a
5517: <code><a href="#the-meta-element">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
5518: <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
5519: state</a>.</p><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
5520: document must not have a <a href="#character-encoding-declaration">character encoding
5521: declaration</a>. (In this case, the source is already decoded,
5522: since it is part of the document that contained the
5523: <code><a href="#the-iframe-element">iframe</a></code>.)</p><p>If an <a href="#html-documents" title="HTML documents">HTML document</a> contains
5524: a <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute or a
5525: <code><a href="#the-meta-element">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
5526: <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
5527: state</a>, then the character encoding used must be an
5528: <a href="#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>.</p><p>Authors are encouraged to use UTF-8. Conformance checkers may
5529: advise authors against using legacy encodings. <a href="#refsRFC3629">[RFC3629]</a></p><p>Encodings in which a series of bytes in the range 0x20 to 0x7E
5530: can encode characters other than the corresponding characters in the
5531: range U+0020 to U+007E represent a potential security vulnerability:
5532: a user agent that does not support the encoding (or does not support
5533: the label used to declare the encoding, or does not use the same
5534: mechanism to detect the encoding of unlabelled content as another
5535: user agent) might end up interpreting technically benign plain text
5536: content as HTML tags and JavaScript. For example, this applies to
5537: encodings in which the bytes corresponding to "<code title=""><script></code>" in ASCII can encode a different
5538: string. Authors should not use such encodings, which are known to
5539: include JIS_C6226-1983,
5540: JIS_X0212-1990, HZ-GB-2312, JOHAB (Windows code
5541: page 1361), encodings based on ISO-2022, and encodings based on EBCDIC. Furthermore, authors must not
5542: use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall
5543: into this category, because these encodings were never intended for
5544: use for Web content.
5545: <a href="#refsRFC1345">[RFC1345]</a>
5546: <a href="#refsRFC1842">[RFC1842]</a><!-- HZ-GB-2312 -->
5547: <a href="#refsRFC1468">[RFC1468]</a><!-- ISO-2022-JP -->
5548: <a href="#refsRFC2237">[RFC2237]</a><!-- ISO-2022-JP-1 -->
5549: <a href="#refsRFC1554">[RFC1554]</a><!-- ISO-2022-JP-2 -->
5550: <a href="#refsRFC1922">[RFC1922]</a>
5551: <a href="#refsRFC1557">[RFC1557]</a><!-- ISO-2022-KR -->
5552: <a href="#refsCESU8">[CESU8]</a>
5553: <a href="#refsUTF7">[UTF7]</a>
5554: <a href="#refsBOCU1">[BOCU1]</a>
5555: <a href="#refsSCSU">[SCSU]</a>
5556:
5557: </p><p>Authors should not use UTF-32, as the encoding detection
5558: algorithms described in this specification intentionally do not
5559: distinguish it from UTF-16. <a href="#refsUNICODE">[UNICODE]</a></p><p class="note">Using non-UTF-8 encodings can have unexpected
1.1 mike 5560: results on form submission and URL encodings, which use the
1.545 mike 5561: <a href="#document-s-character-encoding">document's character encoding</a> by default.</p><p>In XHTML, the XML declaration should be used for inline character
5562: encoding information, if necessary.</p><div class="example">
5563:
5564: <p>In HTML, to declare that the character encoding is UTF-8, the
5565: author could include the following markup near the top of the
5566: document (in the <code><a href="#the-head-element">head</a></code> element):</p>
5567:
5568: <pre><meta charset="utf-8"></pre>
5569:
5570: <p>In XML, the XML declaration would be used instead, at the very
5571: top of the markup:</p>
5572:
5573: <pre><?xml version="1.0" encoding="utf-8"?></pre>
5574:
5575: </div><h4 id="the-style-element"><span class="secno">4.2.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>style</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
5576: <dd><a href="#metadata-content">Metadata content</a>.</dd>
5577: <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>
5578: <dt>Contexts in which this element can be used:</dt>
5579: <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>
5580: <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">head</a></code> element.</dd>
1.629 ! mike 5581: <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 <a href="#inter-element-whitespace">inter-element whitespace</a>, and not as the child of an element whose content model is <a href="#transparent">transparent</a>.</dd>
1.545 mike 5582: <dt>Content model:</dt>
5583: <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>
5584: <dt>Content attributes:</dt>
5585: <dd><a href="#global-attributes">Global attributes</a></dd>
5586: <dd><code title="attr-style-media"><a href="#attr-style-media">media</a></code></dd>
5587: <dd><code title="attr-style-type"><a href="#attr-style-type">type</a></code></dd>
5588: <dd><code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code></dd>
5589: <dd>Also, the <code title="attr-style-title"><a href="#attr-style-title">title</a></code> attribute has special semantics on this element.</dd>
5590: <dt>DOM interface:</dt>
5591: <dd>
5592: <pre class="idl">interface <dfn id="htmlstyleelement" role="button" tabindex="0" aria-haspopup="true">HTMLStyleElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
5593: attribute boolean <a href="#dom-style-disabled" title="dom-style-disabled">disabled</a>;
5594: attribute DOMString <a href="#dom-style-media" title="dom-style-media">media</a>;
5595: attribute DOMString <a href="#dom-style-type" title="dom-style-type">type</a>;
5596: attribute boolean <a href="#dom-style-scoped" title="dom-style-scoped">scoped</a>;
5597: };
5598: <a href="#htmlstyleelement">HTMLStyleElement</a> implements <span>LinkStyle</span>;</pre>
5599: </dd>
5600: </dl><p>The <code><a href="#the-style-element">style</a></code> element allows authors to embed style
5601: information in their documents. The <code><a href="#the-style-element">style</a></code> element is
5602: one of several inputs to the <a href="#styling">styling processing
5603: model</a>. The element does not <a href="#represents" title="represents">represent</a> content for the user.</p><p>The <dfn id="attr-style-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
5604: attribute gives the styling language. If the attribute is present,
5605: its value must be a <a href="#valid-mime-type">valid MIME type</a> that designates a
5606: styling language. The <code title="">charset</code> parameter must
5607: not be specified. The default value for the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, which is used if the
5608: attribute is absent, is "<code title="">text/css</code>". <a href="#refsRFC2318">[RFC2318]</a></p><p>The <dfn id="attr-style-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>
5609: attribute says which media the styles apply to. The value must be a
5610: <a href="#valid-media-query">valid media query</a>. <span class="impl">The user agent
5611: must apply the styles when the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute's value
5612: <a href="#matches-the-environment">matches the environment</a> and the other relevant
5613: conditions apply, and must not apply them otherwise.</span></p><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
5614: "<code title="">all</code>", meaning that by default styles apply to
5615: all media.</p><p>The <dfn id="attr-style-scoped" role="button" tabindex="0" aria-haspopup="true"><code>scoped</code></dfn>
1.565 mike 5616: attribute is a <a href="#boolean-attribute">boolean attribute</a>. If present, it
5617: indicates that the styles are intended just for the subtree rooted
5618: at the <code><a href="#the-style-element">style</a></code> element's parent element, as opposed to
1.629 ! mike 5619: the whole <code><a href="#document">Document</a></code>.</p><p>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is
! 5620: present and the element has a parent element, then the
! 5621: <code><a href="#the-style-element">style</a></code> element must be the first node of <a href="#flow-content">flow
! 5622: content</a> in its parent element other than <a href="#inter-element-whitespace">inter-element
! 5623: whitespace</a>, and the parent element's content model must not
! 5624: have a <a href="#transparent">transparent</a> component.</p><p class="note">This implies that only one scoped <code><a href="#the-style-element">style</a></code>
! 5625: element is allowed at a time, and that such elements cannot be
! 5626: children of, e.g., <code><a href="#the-a-element">a</a></code> or <code><a href="#the-ins-element">ins</a></code> elements, even
! 5627: when those are used as <a href="#flow-content">flow content</a> containers.</p><p id="title-on-style">The <dfn id="attr-style-title" role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn> attribute on
1.545 mike 5628: <code><a href="#the-style-element">style</a></code> elements defines <span>alternative style sheet
5629: 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
5630: title; the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute of
5631: ancestors does not apply to the <code><a href="#the-style-element">style</a></code> element. <a href="#refsCSSOM">[CSSOM]</a></p><p class="note">The <code title="attr-style-title"><a href="#attr-style-title">title</a></code>
1.1 mike 5632: 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>
5633: elements, differs from the global <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute in that a
5634: <code><a href="#the-style-element">style</a></code> block without a title does not inherit the title
1.545 mike 5635: of the parent element: it merely has no title.</p><p>The <code><a href="#textcontent">textContent</a></code> of a <code><a href="#the-style-element">style</a></code> element must
5636: match the <code title="">style</code> production in the following
5637: ABNF, the character set for which is Unicode. <a href="#refsABNF">[ABNF]</a></p><pre>style = no-c-start *( c-start no-c-end c-end no-c-start )
5638: no-c-start = <any string that doesn't contain a substring that matches c-start >
5639: c-start = "<!--"
5640: no-c-end = <any string that doesn't contain a substring that matches c-end >
5641: c-end = "-->"</pre><p class="note">This specification does not specify a style system,
5642: but CSS is expected to be supported by most Web browsers. <a href="#refsCSS">[CSS]</a></p>
5643: <p>The <dfn id="dom-style-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>, <dfn id="dom-style-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> and <dfn id="dom-style-scoped" role="button" tabindex="0" aria-haspopup="true"><code>scoped</code></dfn> IDL attributes
5644: must <a href="#reflect">reflect</a> the respective content attributes of the
5645: same name.</p>
5646: <p>The <dfn id="dom-style-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn>
5647: IDL attribute behaves as defined <a href="#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative style sheets
5648: DOM</a>.</p><p>The <code>LinkStyle</code> interface is also implemented by
5649: this element; the <a href="#styling">styling processing model</a> defines
5650: how. <a href="#refsCSSOM">[CSSOM]</a></p><div class="example">
5651:
5652: <p>The following document has its emphasis styled as bright red
5653: text rather than italics text, while leaving titles of works and
5654: Latin words in their default italics. It shows how using
5655: appropriate elements enables easier restyling of documents.</p>
5656:
5657: <pre><!DOCTYPE html>
5658: <html lang="en-US">
5659: <head>
5660: <title>My favorite book</title>
5661: <style>
5662: body { color: black; background: white; }
5663: em { font-style: normal; color: red; }
5664: </style>
5665: </head>
5666: <body>
5667: <p>My <em>favorite</em> book of all time has <em>got</em> to be
5668: <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
5669: about the <i lang="la">Felis Catus</i> in modern human society.</p>
5670: </body>
5671: </html></pre>
5672:
5673: </div><h4 id="styling"><span class="secno">4.2.7 </span><dfn role="button" tabindex="0" aria-haspopup="true">Styling</dfn></h4><p>The <code><a href="#the-link-element">link</a></code> and <code><a href="#the-style-element">style</a></code> elements can provide
5674: styling information for the user agent to use when rendering the
5675: document. The DOM Styling specification specifies what styling
5676: information is to be used by the user agent and how it is to be
5677: used. <a href="#refsCSSOM">[CSSOM]</a></p><p>The <code><a href="#the-style-element">style</a></code> and <code><a href="#the-link-element">link</a></code> elements implement
5678: the <code>LinkStyle</code> interface. <a href="#refsCSSOM">[CSSOM]</a></p><h3 id="scripting-1"><span class="secno">4.3 </span>Scripting</h3><p>Scripts allow authors to add interactivity to their documents.</p><p>Authors are encouraged to use declarative alternatives to
5679: scripting where possible, as declarative mechanisms are often more
5680: maintainable, and many users disable scripting.</p><div class="example">
5681: <p>For example, instead of using script to show or hide a section
5682: to show more details, the <code><a href="#the-details-element">details</a></code> element could be
5683: used.</p>
5684: </div><p>Authors are also encouraged to make their applications degrade
5685: gracefully in the absence of scripting support.</p><div class="example">
5686: <p>For example, if an author provides a link in a table header to
5687: dynamically resort the table, the link could also be made to
5688: function without scripts by requesting the sorted table from the
5689: server.</p>
5690: </div><h4 id="the-script-element"><span class="secno">4.3.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>script</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
5691: <dd><a href="#metadata-content">Metadata content</a>.</dd>
5692: <dd><a href="#flow-content">Flow content</a>.</dd>
5693: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
5694: <dt>Contexts in which this element can be used:</dt>
5695: <dd>Where <a href="#metadata-content">metadata content</a> is expected.</dd>
5696: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
5697: <dt>Content model:</dt>
5698: <dd>If there is no <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
5699: attribute, depends on the value of the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, but must match
5700: <a href="#restrictions-for-contents-of-script-elements">script content restrictions</a>.</dd>
5701: <dd>If there <em>is</em> a <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
5702: attribute, the element must be either empty or contain only
5703: <a href="#inline-documentation-for-external-scripts">script documentation</a> that also matches <a href="#restrictions-for-contents-of-script-elements">script
5704: content restrictions</a>.</dd>
5705: <dt>Content attributes:</dt>
5706: <dd><a href="#global-attributes">Global attributes</a></dd>
5707: <dd><code title="attr-script-src"><a href="#attr-script-src">src</a></code></dd>
5708: <dd><code title="attr-script-async"><a href="#attr-script-async">async</a></code></dd>
5709: <dd><code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code></dd>
5710: <dd><code title="attr-script-type"><a href="#attr-script-type">type</a></code></dd>
5711: <dd><code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code></dd>
5712: <dt>DOM interface:</dt>
5713: <dd>
5714: <pre class="idl">interface <dfn id="htmlscriptelement" role="button" tabindex="0" aria-haspopup="true">HTMLScriptElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
5715: attribute DOMString <a href="#dom-script-src" title="dom-script-src">src</a>;
5716: attribute boolean <a href="#dom-script-async" title="dom-script-async">async</a>;
5717: attribute boolean <a href="#dom-script-defer" title="dom-script-defer">defer</a>;
5718: attribute DOMString <a href="#dom-script-type" title="dom-script-type">type</a>;
5719: attribute DOMString <a href="#dom-script-charset" title="dom-script-charset">charset</a>;
5720: attribute DOMString <a href="#dom-script-text" title="dom-script-text">text</a>;
5721: };</pre>
5722: </dd>
5723: </dl><p>The <code><a href="#the-script-element">script</a></code> element allows authors to include dynamic
5724: script and data blocks in their documents. The element does not
5725: <a href="#represents" title="represents">represent</a> content for the user.</p><p>When used to include dynamic scripts, the scripts may either be
5726: embedded inline or may be imported from an external file using the
5727: <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute. If the language
5728: is not that described by "<code title="">text/javascript</code>",
5729: then the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute must
5730: be present, as described below. Whatever language is used, the
5731: contents of the <code><a href="#the-script-element">script</a></code> element must conform with the
5732: requirements of that language's specification.</p><p>When used to include data blocks (as opposed to scripts), the
5733: data must be embedded inline, the format of the data must be given
5734: using the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, the
5735: <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute must not be
5736: specified, and the contents of the <code><a href="#the-script-element">script</a></code> element must
5737: conform to the requirements defined for the format used.</p><p>The <dfn id="attr-script-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
5738: attribute gives the language of the script or format of the data. If
5739: the attribute is present, its value must be a <a href="#valid-mime-type">valid MIME
5740: type</a>. The <code title="">charset</code> parameter must not be
5741: specified. The default, which is used if the attribute is absent,
5742: is "<code title="">text/javascript</code>".</p><p>The <dfn id="attr-script-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn>
5743: attribute, if specified, gives the address of the external script
5744: resource to use. The value of the attribute must be a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid
5745: non-empty URL potentially surrounded by spaces</a> identifying a
5746: 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
5747: present, or of the type "<code title="">text/javascript</code>", if
5748: the attribute is absent. A resource is a script resource of a given
5749: type if that type identifies a scripting language and the resource
5750: conforms with the requirements of that language's specification.</p><p>The <dfn id="attr-script-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn>
5751: attribute gives the character encoding of the external script
5752: 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
5753: attribute is set, its value must be a valid character encoding name,
5754: must be an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the
5755: <a href="#preferred-mime-name">preferred MIME name</a> for that encoding, and must match
5756: the encoding given in the <code title="">charset</code> parameter of
5757: the <a href="#content-type" title="Content-Type">Content-Type metadata</a> of the
5758: external file, if any. <a href="#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-script-async" role="button" tabindex="0" aria-haspopup="true"><code>async</code></dfn> and
5759: <dfn id="attr-script-defer" role="button" tabindex="0" aria-haspopup="true"><code>defer</code></dfn> attributes
5760: are <a href="#boolean-attribute" title="boolean attribute">boolean attributes</a> that
5761: 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
5762: specified if the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute
5763: is not present.</p><p>There are three possible modes that can be selected using these
5764: attributes. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code>
5765: attribute is present, then the script will be executed
5766: 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
5767: the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute is
5768: present, then the script is executed when the page has finished
5769: parsing. If neither attribute is present, then the script is
5770: fetched and executed immediately, before the user agent continues
5771: parsing the page.</p><p class="note">The exact processing details for these attributes
1.544 mike 5772: are, for mostly historical reasons, somewhat non-trivial, involving
1.1 mike 5773: a number of aspects of HTML. The implementation requirements are
5774: therefore by necessity scattered throughout the specification. The
5775: algorithms below (in this section) describe the core of this
5776: processing, but these algorithms reference and are referenced by the
1.293 mike 5777: parsing rules for <code><a href="#the-script-element">script</a></code> <a href="#scriptTag">start</a>
1.1 mike 5778: 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
1.545 mike 5779: handling of <a href="#scripting">scripting</a>, etc.</p><p>The <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute may be
5780: specified even if the <code title="attr-script-async"><a href="#attr-script-async">async</a></code>
5781: attribute is specified, to cause legacy Web browsers that only
5782: 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
5783: synchronous blocking behavior that is the default.</p><p>Changing the <code title="attr-script-src"><a href="#attr-script-src">src</a></code>, <code title="attr-script-type"><a href="#attr-script-type">type</a></code>, <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code>, <code title="attr-script-async"><a href="#attr-script-async">async</a></code>, and <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attributes dynamically has no
5784: direct effect; these attribute are only used at specific times
5785: described below.</p>
5786: <p>The IDL attributes <dfn id="dom-script-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn>, <dfn id="dom-script-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>, <dfn id="dom-script-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn>, and <dfn id="dom-script-defer" role="button" tabindex="0" aria-haspopup="true"><code>defer</code></dfn>, each must
5787: <a href="#reflect">reflect</a> the respective content attributes of the same
5788: name.</p>
5789:
5790: <p>The <dfn id="dom-script-async" role="button" tabindex="0" aria-haspopup="true"><code>async</code></dfn> IDL
5791: attribute controls whether the element will execute asynchronously
5792: or not. If the element's <a href="#force-async">"force-async"</a> flag is set,
5793: then, on getting, the <code title="dom-script-async"><a href="#dom-script-async">async</a></code>
5794: IDL attribute must return true, and on setting, the
5795: <a href="#force-async">"force-async"</a> flag must first be unset, and then the
5796: content attribute must be removed if the IDL attribute's new value
5797: is false, and must be set to the empty string if the IDL attribute's
5798: new value is true. If the element's <a href="#force-async">"force-async"</a> flag
5799: is <em>not</em> set, the IDL attribute must <a href="#reflect">reflect</a> the
5800: <code title="attr-script-async"><a href="#attr-script-async">async</a></code> content attribute.</p>
5801: <dl class="domintro"><dt><var title="">script</var> . <code title="dom-script-text" id="dom-script-text"><a href="#dom-script-text">text</a></code> [ = <var title="">value</var> ]</dt>
5802:
5803: <dd>
5804:
5805: <p>Returns the contents of the element, ignoring child nodes that
5806: aren't <a href="#text-node" title="text node">text nodes</a>.</p>
5807:
5808: <p>Can be set, to replace the element's children with the given
5809: value.</p>
5810:
5811: </dd>
5812:
5813: </dl><p class="note">When inserted using the <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> method,
1.293 mike 5814: <code><a href="#the-script-element">script</a></code> elements execute (typically synchronously), but
1.578 mike 5815: when inserted using <code title="dom-innerHTML">innerHTML</code> and <code title="dom-outerHTML">outerHTML</code> attributes, they do not
1.545 mike 5816: execute at all.</p><div class="example">
5817:
5818: <p>In this example, two <code><a href="#the-script-element">script</a></code> elements are used. One
5819: embeds an external script, and the other includes some data.</p>
5820:
5821: <pre><script src="game-engine.js"></script>
5822: <script type="text/x-game-map">
5823: ........U.........e
5824: o............A....e
5825: .....A.....AAA....e
5826: .A..AAA...AAAAA...e
5827: </script></pre>
5828:
5829: <p>The data in this case might be used by the script to generate
5830: the map of a video game. The data doesn't have to be used that way,
5831: though; maybe the map data is actually embedded in other parts of
5832: the page's markup, and the data block here is just used by the
5833: site's search engine to help users who are looking for particular
5834: features in their game maps.</p>
5835:
5836: </div><div class="example">
5837:
5838: <p>The following sample shows how a script element can be used to
5839: define a function that is then used by other parts of the
5840: document. It also shows how a <code><a href="#the-script-element">script</a></code> element can be
5841: used to invoke script while the document is being parsed, in this
5842: case to initialize the form's output.</p>
5843:
5844: <pre><script>
5845: function calculate(form) {
5846: var price = 52000;
5847: if (form.elements.brakes.checked)
5848: price += 1000;
5849: if (form.elements.radio.checked)
5850: price += 2500;
5851: if (form.elements.turbo.checked)
5852: price += 5000;
5853: if (form.elements.sticker.checked)
5854: price += 250;
5855: form.elements.result.value = price;
5856: }
5857: </script>
5858: <form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
5859: <fieldset>
5860: <legend>Work out the price of your car</legend>
5861: <p>Base cost: £52000.</p>
5862: <p>Select additional options:</p>
5863: <ul>
5864: <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
5865: <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
5866: <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
5867: <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
5868: </ul>
5869: <p>Total: £<output name=result></output></p>
5870: </fieldset>
5871: <script>
5872: calculate(document.forms.pricecalc);
5873: </script>
5874: </form></pre>
5875:
5876: </div><h5 id="scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</h5><p>The following lists some <a href="#mime-type">MIME type</a> strings and the
5877: languages to which they refer:</p><dl><dt>"<code>application/ecmascript</code>"</dt>
5878: <dt>"<code>application/javascript</code>"</dt>
5879: <dt>"<code>application/x-ecmascript</code>"</dt>
5880: <dt>"<code>application/x-javascript</code>"</dt>
5881: <dt>"<code>text/ecmascript</code>"</dt>
5882: <dt>"<code>text/javascript</code>"</dt>
5883: <dt>"<code>text/javascript1.0</code>"</dt>
5884: <dt>"<code>text/javascript1.1</code>"</dt>
5885: <dt>"<code>text/javascript1.2</code>"</dt>
5886: <dt>"<code>text/javascript1.3</code>"</dt>
5887: <dt>"<code>text/javascript1.4</code>"</dt>
5888: <dt>"<code>text/javascript1.5</code>"</dt>
5889: <dt>"<code>text/jscript</code>"</dt>
5890: <dt>"<code>text/livescript</code>"</dt>
5891: <dt>"<code>text/x-ecmascript</code>"</dt>
5892: <dt>"<code>text/x-javascript</code>"</dt>
5893: <dd>JavaScript. <a href="#refsECMA262">[ECMA262]</a></dd>
5894:
5895: <dt>"<code>text/javascript;e4x=1</code>"</dt>
5896: <dd>JavaScript with ECMAScript for XML. <a href="#refsECMA357">[ECMA357]</a></dd>
5897:
5898: </dl><h5 id="restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span><dfn role="button" tabindex="0" aria-haspopup="true">Restrictions for contents of <code>script</code> elements</dfn></h5><p>The <code><a href="#textcontent">textContent</a></code> of a <code><a href="#the-script-element">script</a></code> element
5899: must match the <code title="">script</code> production in the
5900: following ABNF, the character set for which is Unicode. <a href="#refsABNF">[ABNF]</a></p><pre>script = data1 *( escape [ script-start data3 ] "-->" data1 ) [ escape ]
5901: escape = "<!--" data2 *( script-start data3 script-end data2 )
5902:
5903: data1 = <any string that doesn't contain a substring that matches not-data1>
5904: not-data1 = "<!--"
5905:
5906: data2 = <any string that doesn't contain a substring that matches not-data2>
5907: not-data2 = script-start / "-->"
5908:
5909: data3 = <any string that doesn't contain a substring that matches not-data3>
5910: not-data3 = script-end / "-->"
5911:
5912: script-start = lt s c r i p t tag-end
5913: script-end = lt slash s c r i p t tag-end
5914:
5915: lt = %x003C ; U+003C LESS-THAN SIGN character (<)
5916: slash = %x002F ; U+002F SOLIDUS character (/)
5917:
5918: s = %x0053 ; U+0053 LATIN CAPITAL LETTER S
5919: s =/ %x0073 ; U+0073 LATIN SMALL LETTER S
5920: c = %x0043 ; U+0043 LATIN CAPITAL LETTER C
5921: c =/ %x0063 ; U+0063 LATIN SMALL LETTER C
5922: r = %x0052 ; U+0052 LATIN CAPITAL LETTER R
5923: r =/ %x0072 ; U+0072 LATIN SMALL LETTER R
5924: i = %x0049 ; U+0049 LATIN CAPITAL LETTER I
5925: i =/ %x0069 ; U+0069 LATIN SMALL LETTER I
5926: p = %x0050 ; U+0050 LATIN CAPITAL LETTER P
5927: p =/ %x0070 ; U+0070 LATIN SMALL LETTER P
5928: t = %x0054 ; U+0054 LATIN CAPITAL LETTER T
5929: t =/ %x0074 ; U+0074 LATIN SMALL LETTER T
5930:
5931: tag-end = %x0009 ; U+0009 CHARACTER TABULATION (tab)
5932: tag-end =/ %x000A ; U+000A LINE FEED (LF)
5933: tag-end =/ %x000C ; U+000C FORM FEED (FF)
5934: tag-end =/ %x0020 ; U+0020 SPACE
5935: tag-end =/ %x002F ; U+002F SOLIDUS (/)
5936: tag-end =/ %x003E ; U+003E GREATER-THAN SIGN (>)</pre><p>When a <code><a href="#the-script-element">script</a></code> element contains <a href="#inline-documentation-for-external-scripts">script
5937: documentation</a>, there are further restrictions on the contents
5938: of the element, as described in the section below.</p><h5 id="inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span><dfn role="button" tabindex="0" aria-haspopup="true">Inline documentation for external scripts</dfn></h5><p>If a <code><a href="#the-script-element">script</a></code> element's <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is specified, then the
5939: contents of the <code><a href="#the-script-element">script</a></code> element, if any, must be such
5940: that the value of the <code title="dom-script-text"><a href="#dom-script-text">text</a></code> IDL
5941: attribute, which is derived from the element's contents, matches the
5942: <code title="">documentation</code> production in the following
5943: ABNF, the character set for which is Unicode. <a href="#refsABNF">[ABNF]</a></p><pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline )
5944: comment = slash star *( not-star / star not-slash ) 1*star slash
5945: line-comment = slash slash *not-newline
5946:
5947: ; characters
5948: tab = %x0009 ; U+0009 CHARACTER TABULATION (tab)
5949: newline = %x000A ; U+000A LINE FEED (LF)
5950: space = %x0020 ; U+0020 SPACE
5951: star = %x002A ; U+002A ASTERISK (*)
5952: slash = %x002F ; U+002F SOLIDUS (/)
5953: not-newline = %x0000-0009 / %x000B-10FFFF
5954: ; a <a href="#unicode-character">Unicode character</a> other than U+000A LINE FEED (LF)
5955: not-star = %x0000-0029 / %x002B-10FFFF
5956: ; a <a href="#unicode-character">Unicode character</a> other than U+002A ASTERISK (*)
5957: not-slash = %x0000-002E / %x0030-10FFFF
5958: ; a <a href="#unicode-character">Unicode character</a> other than U+002F SOLIDUS (/)</pre><p class="note">This corresponds to putting the contents of the
1.1 mike 5959: element in JavaScript comments.</p><p class="note">This requirement is in addition to the earlier
1.293 mike 5960: restrictions on the syntax of contents of <code><a href="#the-script-element">script</a></code>
1.545 mike 5961: elements.</p><div class="example">
5962:
5963: <p>This allows authors to include documentation, such as license
5964: information or API information, inside their documents while still
5965: referring to external script files. The syntax is constrained so
5966: that authors don't accidentally include what looks like valid
5967: script while also providing a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute.</p>
5968:
5969: <pre><script src="cool-effects.js">
5970: // create new instances using:
5971: // var e = new Effect();
5972: // start the effect using .play, stop using .stop:
5973: // e.play();
5974: // e.stop();
5975: </script></pre>
5976:
5977: </div><h4 id="the-noscript-element"><span class="secno">4.3.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>noscript</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
5978: <dd><a href="#metadata-content">Metadata content</a>.</dd>
5979: <dd><a href="#flow-content">Flow content</a>.</dd>
5980: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
5981: <dt>Contexts in which this element can be used:</dt>
5982: <dd>In a <code><a href="#the-head-element">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>
5983: <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>
5984: <dt>Content model:</dt>
5985: <dd>When <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, in a <code><a href="#the-head-element">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="#the-meta-element">meta</a></code> elements.</dd>
5986: <dd>When <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, not in a <code><a href="#the-head-element">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>
5987: <dd>Otherwise: text that conforms to the requirements given in the prose.</dd>
5988: <dt>Content attributes:</dt>
5989: <dd><a href="#global-attributes">Global attributes</a></dd>
5990: <dt>DOM interface:</dt>
5991: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
5992: </dl><p>The <code><a href="#the-noscript-element">noscript</a></code> element <a href="#represents">represents</a> nothing
5993: if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a>, and
5994: <a href="#represents">represents</a> its children if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>. It is used
5995: to present different markup to user agents that support scripting
5996: and those that don't support scripting, by affecting how the
5997: document is parsed.</p><p>When used in <a href="#html-documents">HTML documents</a>, the allowed content
5998: model is as follows:</p><dl><dt>In a <code><a href="#the-head-element">head</a></code> element, if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
5999: <code><a href="#the-noscript-element">noscript</a></code> element</dt>
6000:
6001: <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only
6002: <code><a href="#the-link-element">link</a></code>, <code><a href="#the-style-element">style</a></code>, and <code><a href="#the-meta-element">meta</a></code>
6003: elements.</p></dd>
6004:
6005: <dt>In a <code><a href="#the-head-element">head</a></code> element, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
6006: <code><a href="#the-noscript-element">noscript</a></code> element</dt>
6007:
6008: <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
6009: except that invoking the <a href="#html-fragment-parsing-algorithm">HTML fragment parsing
6010: algorithm</a> with
6011: the <code><a href="#the-noscript-element">noscript</a></code> element as the <var title="concept-frag-parse-context"><a href="#concept-frag-parse-context">context</a></var> element and the
6012: text contents as the <var title="">input</var> must result in a
6013: list of nodes that consists only of <code><a href="#the-link-element">link</a></code>,
6014: <code><a href="#the-style-element">style</a></code>, and <code><a href="#the-meta-element">meta</a></code> elements that would be
6015: conforming if they were children of the <code><a href="#the-noscript-element">noscript</a></code>
6016: element, and no <a href="#parse-error" title="parse error">parse
6017: errors</a>.</p></dd>
6018:
6019: <dt>Outside of <code><a href="#the-head-element">head</a></code> elements, if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
6020: <code><a href="#the-noscript-element">noscript</a></code> element</dt>
6021:
6022: <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element's content model is
6023: <a href="#transparent">transparent</a>, with the additional restriction that a
6024: <code><a href="#the-noscript-element">noscript</a></code> element must not have a <code><a href="#the-noscript-element">noscript</a></code>
6025: element as an ancestor (that is, <code><a href="#the-noscript-element">noscript</a></code> can't be
6026: nested).</p></dd>
6027:
6028: <dt>Outside of <code><a href="#the-head-element">head</a></code> elements, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
6029: <code><a href="#the-noscript-element">noscript</a></code> element</dt>
6030:
6031: <dd>
6032:
6033: <p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
6034: except that the text must be such that running the following
6035: algorithm results in a conforming document with no
6036: <code><a href="#the-noscript-element">noscript</a></code> elements and no <code><a href="#the-script-element">script</a></code>
6037: elements, and such that no step in the algorithm causes an
6038: <a href="#html-parser">HTML parser</a> to flag a <a href="#parse-error">parse error</a>:</p>
6039:
6040: <ol><li>Remove every <code><a href="#the-script-element">script</a></code> element from the
6041: document.</li>
6042:
6043: <li>Make a list of every <code><a href="#the-noscript-element">noscript</a></code> element in the
6044: document. For every <code><a href="#the-noscript-element">noscript</a></code> element in that list,
6045: perform the following steps:
6046:
6047: <ol><li>Let the <var title="">parent element</var> be the parent
6048: element of the <code><a href="#the-noscript-element">noscript</a></code> element.</li>
6049:
6050: <li>Take all the children of the <var title="">parent element</var>
6051: that come before the <code><a href="#the-noscript-element">noscript</a></code> element, and call these
6052: elements <var title="">the before children</var>.</li>
6053:
6054: <li>Take all the children of the <var title="">parent element</var>
6055: that come <em>after</em> the <code><a href="#the-noscript-element">noscript</a></code> element, and
6056: call these elements <var title="">the after children</var>.</li>
6057:
6058: <li>Let <var title="">s</var> be the concatenation of all the
6059: <a href="#text-node">text node</a> children of the <code><a href="#the-noscript-element">noscript</a></code>
6060: element.</li>
6061:
1.578 mike 6062: <li>Set the <code title="dom-innerHTML">innerHTML</code>
1.545 mike 6063: attribute of the <var title="">parent element</var> to the value
6064: of <var title="">s</var>. (This, as a side-effect, causes the
6065: <code><a href="#the-noscript-element">noscript</a></code> element to be removed from the
6066: document.)</li>
6067:
6068: <li>Insert <var title="">the before children</var> at the start of
6069: the <var title="">parent element</var>, preserving their original
6070: relative order.</li>
6071:
6072: <li>Insert <var title="">the after children</var> at the end of the
6073: <var title="">parent element</var>, preserving their original
6074: relative order.</li>
6075:
6076: </ol></li>
6077:
6078: </ol></dd>
6079:
6080: </dl><p class="note">All these contortions are required because, for
1.1 mike 6081: historical reasons, the <code><a href="#the-noscript-element">noscript</a></code> element is handled
6082: 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
1.545 mike 6083: parser was invoked.</p><p>The <code><a href="#the-noscript-element">noscript</a></code> element must not be used in <a href="#xml-documents">XML
6084: documents</a>.</p><p class="note">The <code><a href="#the-noscript-element">noscript</a></code> element is only effective
1.474 mike 6085: in <a href="#syntax">the HTML syntax</a>, it has no effect in <a href="#the-xhtml-syntax">the XHTML
6086: syntax</a>. This is because the way it works is by essentially
6087: "turning off" the parser when scripts are enabled, so that the
6088: contents of the element are treated as pure text and not as real
1.545 mike 6089: elements. XML does not define a mechanism by which to do this.</p><div class="example">
6090:
6091: <p>In the following example, a <code><a href="#the-noscript-element">noscript</a></code> element is
6092: used to provide fallback for a script.</p>
6093:
6094: <pre><form action="calcSquare.php">
6095: <p>
6096: <label for=x>Number</label>:
6097: <input id="x" name="x" type="number">
6098: </p>
6099: <script>
6100: var x = document.getElementById('x');
6101: var output = document.createElement('p');
6102: output.textContent = 'Type a number; it will be squared right then!';
6103: x.form.appendChild(output);
6104: x.form.onsubmit = function () { return false; }
6105: x.oninput = function () {
6106: var v = x.valueAsNumber;
6107: output.textContent = v + ' squared is ' + v * v;
6108: };
6109: </script>
6110: <noscript>
6111: <input type=submit value="Calculate Square">
6112: </noscript>
6113: </form></pre>
6114:
6115: <p>When script is disabled, a button appears to do the calculation
6116: on the server side. When script is enabled, the value is computed
6117: on-the-fly instead.</p>
6118:
6119: <p>The <code><a href="#the-noscript-element">noscript</a></code> element is a blunt
6120: instrument. Sometimes, scripts might be enabled, but for some
6121: reason the page's script might fail. For this reason, it's
6122: generally better to avoid using <code><a href="#the-noscript-element">noscript</a></code>, and to
6123: instead design the script to change the page from being a
6124: scriptless page to a scripted page on the fly, as in the next
6125: example:</p>
6126:
6127: <pre><form action="calcSquare.php">
6128: <p>
6129: <label for=x>Number</label>:
6130: <input id="x" name="x" type="number">
6131: </p>
6132: <strong><input id="submit" type=submit value="Calculate Square"></strong>
6133: <script>
6134: var x = document.getElementById('x');
6135: var output = document.createElement('p');
6136: output.textContent = 'Type a number; it will be squared right then!';
6137: x.form.appendChild(output);
6138: x.form.onsubmit = function () { return false; }
6139: x.oninput = function () {
6140: var v = x.valueAsNumber;
6141: output.textContent = v + ' squared is ' + v * v;
6142: };
6143: <strong> var submit = document.getElementById('submit');
6144: submit.parentNode.removeChild(submit);</strong>
6145: </script>
6146: </form></pre>
6147:
6148: <p>The above technique is also useful in XHTML, since
6149: <code><a href="#the-noscript-element">noscript</a></code> is not supported in <a href="#the-xhtml-syntax">the XHTML
6150: syntax</a>.</p>
6151:
6152: </div><h3 id="sections"><span class="secno">4.4 </span>Sections</h3><p>The
6153: <a href="#the-body-element">body</a>,
6154: <a href="#the-section-element">section</a>,
6155: <a href="#the-nav-element">nav</a>,
6156: <a href="#the-article-element">article</a>,
6157: <a href="#the-aside-element">aside</a>,
6158: <a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1, h2, h3, h4, h5, h6</a>,
6159: <a href="#the-hgroup-element">hgroup</a>,
6160: <a href="#the-header-element">header</a>,
6161: <a href="#the-footer-element">footer</a>,
6162: and
6163: <a href="#the-address-element">address</a>
6164: elements.</p><h4 id="the-body-element"><span class="secno">4.4.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>body</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6165: <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
6166: <dt>Contexts in which this element can be used:</dt>
6167: <dd>As the second element in an <code><a href="#the-html-element">html</a></code> element.</dd>
6168: <dt>Content model:</dt>
6169: <dd><a href="#flow-content">Flow content</a>.</dd>
6170: <dt>Content attributes:</dt>
6171: <dd><a href="#global-attributes">Global attributes</a></dd>
6172: <dd><code title="handler-window-onafterprint"><a href="#handler-window-onafterprint">onafterprint</a></code></dd>
6173: <dd><code title="handler-window-onbeforeprint"><a href="#handler-window-onbeforeprint">onbeforeprint</a></code></dd>
6174: <dd><code title="handler-window-onbeforeunload"><a href="#handler-window-onbeforeunload">onbeforeunload</a></code></dd>
6175: <dd><code title="handler-window-onblur"><a href="#handler-window-onblur">onblur</a></code></dd>
6176: <dd><code title="handler-window-onerror"><a href="#handler-window-onerror">onerror</a></code></dd>
6177: <dd><code title="handler-window-onfocus"><a href="#handler-window-onfocus">onfocus</a></code></dd>
6178: <dd><code title="handler-window-onhashchange"><a href="#handler-window-onhashchange">onhashchange</a></code></dd>
6179: <dd><code title="handler-window-onload"><a href="#handler-window-onload">onload</a></code></dd>
6180: <dd><code title="handler-window-onmessage"><a href="#handler-window-onmessage">onmessage</a></code></dd>
6181: <dd><code title="handler-window-onoffline"><a href="#handler-window-onoffline">onoffline</a></code></dd>
6182: <dd><code title="handler-window-ononline"><a href="#handler-window-ononline">ononline</a></code></dd>
6183: <dd><code title="handler-window-onpagehide"><a href="#handler-window-onpagehide">onpagehide</a></code></dd>
6184: <dd><code title="handler-window-onpageshow"><a href="#handler-window-onpageshow">onpageshow</a></code></dd>
6185: <dd><code title="handler-window-onpopstate"><a href="#handler-window-onpopstate">onpopstate</a></code></dd>
6186: <dd><code title="handler-window-onresize"><a href="#handler-window-onresize">onresize</a></code></dd>
6187: <dd><code title="handler-window-onscroll"><a href="#handler-window-onscroll">onscroll</a></code></dd>
6188: <dd><code title="handler-window-onstorage"><a href="#handler-window-onstorage">onstorage</a></code></dd>
6189: <dd><code title="handler-window-onunload"><a href="#handler-window-onunload">onunload</a></code></dd>
6190: <dt>DOM interface:</dt>
6191: <dd>
6192: <pre class="idl">interface <dfn id="htmlbodyelement" role="button" tabindex="0" aria-haspopup="true">HTMLBodyElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
1.610 mike 6193: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onafterprint" title="handler-window-onafterprint">onafterprint</a>;
6194: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onbeforeprint" title="handler-window-onbeforeprint">onbeforeprint</a>;
6195: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onbeforeunload" title="handler-window-onbeforeunload">onbeforeunload</a>;
6196: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onblur" title="handler-window-onblur">onblur</a>;
6197: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onerror" title="handler-window-onerror">onerror</a>;
6198: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onfocus" title="handler-window-onfocus">onfocus</a>;
6199: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onhashchange" title="handler-window-onhashchange">onhashchange</a>;
6200: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onload" title="handler-window-onload">onload</a>;
6201: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onmessage" title="handler-window-onmessage">onmessage</a>;
6202: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onoffline" title="handler-window-onoffline">onoffline</a>;
6203: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-ononline" title="handler-window-ononline">ononline</a>;
6204: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onpopstate" title="handler-window-onpopstate">onpopstate</a>;
6205: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onpagehide" title="handler-window-onpagehide">onpagehide</a>;
6206: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onpageshow" title="handler-window-onpageshow">onpageshow</a>;
6207: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onresize" title="handler-window-onresize">onresize</a>;
6208: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onscroll" title="handler-window-onscroll">onscroll</a>;
6209: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onstorage" title="handler-window-onstorage">onstorage</a>;
6210: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onunload" title="handler-window-onunload">onunload</a>;
1.545 mike 6211: };</pre>
6212: </dd>
6213: </dl><p>The <code><a href="#the-body-element">body</a></code> element <a href="#represents">represents</a> the main
6214: content of the document.</p><p>In conforming documents, there is only one <code><a href="#the-body-element">body</a></code>
6215: element. The <code title="dom-document-body"><a href="#dom-document-body">document.body</a></code>
6216: IDL attribute provides scripts with easy access to a document's
6217: <code><a href="#the-body-element">body</a></code> element.</p><p>The <code><a href="#the-body-element">body</a></code> element exposes as <a href="#event-handler-content-attributes">event handler
6218: content attributes</a> a number of the <a href="#event-handlers">event
6219: handlers</a> of the <code><a href="#window">Window</a></code> object. It also mirrors
6220: their <a href="#event-handler-idl-attributes">event handler IDL attributes</a>.</p><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>, <code title="handler-window-onload"><a href="#handler-window-onload">onload</a></code>, and <code title="handler-window-onscroll"><a href="#handler-window-onscroll">onscroll</a></code> <a href="#event-handlers">event
6221: handlers</a> of the <code><a href="#window">Window</a></code> object, exposed on the
6222: <code><a href="#the-body-element">body</a></code> element, shadow the generic <a href="#event-handlers">event
6223: handlers</a> with the same names normally supported by <a href="#html-elements">HTML
6224: elements</a>.</p><p class="example">Thus, for example, a bubbling <code title="event-error">error</code> event dispatched on a child of
6225: <a href="#the-body-element-0">the body element</a> of a <code><a href="#document">Document</a></code> would first
6226: trigger the <code title="handler-onerror"><a href="#handler-onerror">onerror</a></code> <a href="#event-handler-content-attributes">event
6227: handler content attributes</a> of that element, then that of the
6228: root <code><a href="#the-html-element">html</a></code> element, and only <em>then</em> would it
6229: trigger the <code title="handler-window-onerror"><a href="#handler-window-onerror">onerror</a></code>
6230: <a href="#event-handler-content-attributes" title="event handler content attributes">event handler content
6231: attribute</a> on the <code><a href="#the-body-element">body</a></code> element. This is because
6232: the event would bubble from the target, to the <code><a href="#the-body-element">body</a></code>, to
6233: the <code><a href="#the-html-element">html</a></code>, to the <code><a href="#document">Document</a></code>, to the
6234: <code><a href="#window">Window</a></code>, and the <a href="#event-handlers" title="event handlers">event
6235: handler</a> on the <code><a href="#the-body-element">body</a></code> is watching the
6236: <code><a href="#window">Window</a></code> not the <code><a href="#the-body-element">body</a></code>. A regular event
6237: listener attached to the <code><a href="#the-body-element">body</a></code> using <code title="">addEventListener()</code>, however, would be run when the
6238: event bubbled through the <code><a href="#the-body-element">body</a></code> and not when it reaches
6239: the <code><a href="#window">Window</a></code> object.</p><div class="example">
6240:
6241: <p>This page updates an indicator to show whether or not the user
6242: is online:</p>
6243:
6244: <pre><!DOCTYPE HTML>
6245: <html>
6246: <head>
6247: <title>Online or offline?</title>
6248: <script>
6249: function update(online) {
6250: document.getElementById('status').textContent =
6251: online ? 'Online' : 'Offline';
6252: }
6253: </script>
6254: </head>
6255: <body ononline="update(true)"
6256: onoffline="update(false)"
6257: onload="update(navigator.onLine)">
6258: <p>You are: <span id="status">(Unknown)</span></p>
6259: </body>
6260: </html></pre>
6261:
6262: </div><h4 id="the-section-element"><span class="secno">4.4.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>section</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6263: <dd><a href="#flow-content">Flow content</a>.</dd>
6264: <dd><a href="#sectioning-content">Sectioning content</a>.</dd>
1.629 ! mike 6265: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6266: <dt>Contexts in which this element can be used:</dt>
6267: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6268: <dt>Content model:</dt>
6269: <dd><a href="#flow-content">Flow content</a>.</dd>
6270: <dt>Content attributes:</dt>
6271: <dd><a href="#global-attributes">Global attributes</a></dd>
6272: <dt>DOM interface:</dt>
6273: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6274: </dl><p>The <code><a href="#the-section-element">section</a></code> element <a href="#represents">represents</a> a
6275: generic section of a document or application. A section, in this
6276: context, is a thematic grouping of content, typically with a
6277: heading.</p><p class="example">Examples of sections would be chapters, the
6278: various tabbed pages in a tabbed dialog box, or the numbered
6279: sections of a thesis. A Web site's home page could be split into
6280: sections for an introduction, news items, and contact
6281: information.</p><p class="note">Authors are encouraged to use the
6282: <code><a href="#the-article-element">article</a></code> element instead of the <code><a href="#the-section-element">section</a></code>
6283: element when it would make sense to syndicate the contents of the
6284: element.</p><p class="note" id="use-div-for-wrappers">The <code><a href="#the-section-element">section</a></code>
6285: element is not a generic container element. When an element is
6286: needed for styling purposes or as a convenience for scripting,
6287: authors are encouraged to use the <code><a href="#the-div-element">div</a></code> element
6288: instead. A general rule is that the <code><a href="#the-section-element">section</a></code> element is
6289: appropriate only if the element's contents would be listed
6290: explicitly in the document's <a href="#outline">outline</a>.</p><div class="example">
6291:
6292: <p>In the following example, we see an article (part of a larger
6293: Web page) about apples, containing two short sections.</p>
6294:
6295: <pre><article>
6296: <hgroup>
6297: <h1>Apples</h1>
6298: <h2>Tasty, delicious fruit!</h2>
6299: </hgroup>
6300: <p>The apple is the pomaceous fruit of the apple tree.</p>
6301: <section>
6302: <h1>Red Delicious</h1>
6303: <p>These bright red apples are the most common found in many
6304: supermarkets.</p>
6305: </section>
6306: <section>
6307: <h1>Granny Smith</h1>
6308: <p>These juicy, green apples make a great filling for
6309: apple pies.</p>
6310: </section>
6311: </article></pre>
6312:
6313: <p>Notice how the use of <code><a href="#the-section-element">section</a></code> means that the author
6314: can use <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> elements throughout, without having to
6315: worry about whether a particular section is at the top level, the
6316: second level, the third level, and so on.</p>
6317:
6318: </div><div class="example">
6319:
6320: <p>Here is a graduation programme with two sections, one for the
6321: list of people graduating, and one for the description of the
6322: ceremony.</p>
6323:
6324: <pre><!DOCTYPE Html>
6325: <Html
6326: ><Head
6327: ><Title
6328: >Graduation Ceremony Summer 2022</Title
6329: ></Head
6330: ><Body
6331: ><H1
6332: >Graduation</H1
6333: ><Section
6334: ><H1
6335: >Ceremony</H1
6336: ><P
6337: >Opening Procession</P
6338: ><P
6339: >Speech by Validactorian</P
6340: ><P
6341: >Speech by Class President</P
6342: ><P
6343: >Presentation of Diplomas</P
6344: ><P
6345: >Closing Speech by Headmaster</P
6346: ></Section
6347: ><Section
6348: ><H1
6349: >Graduates</H1
6350: ><Ul
6351: ><Li
6352: >Molly Carpenter</Li
6353: ><Li
6354: >Anastasia Luccio</Li
6355: ><Li
6356: >Ebenezar McCoy</Li
6357: ><Li
6358: >Karrin Murphy</Li
6359: ><Li
6360: >Thomas Raith</Li
6361: ><Li
6362: >Susan Rodriguez</Li
6363: ></Ul
6364: ></Section
6365: ></Body
6366: ></Html></pre>
6367:
6368: </div><h4 id="the-nav-element"><span class="secno">4.4.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>nav</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6369: <dd><a href="#flow-content">Flow content</a>.</dd>
6370: <dd><a href="#sectioning-content">Sectioning content</a>.</dd>
1.629 ! mike 6371: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6372: <dt>Contexts in which this element can be used:</dt>
6373: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6374: <dt>Content model:</dt>
6375: <dd><a href="#flow-content">Flow content</a>.</dd>
6376: <dt>Content attributes:</dt>
6377: <dd><a href="#global-attributes">Global attributes</a></dd>
6378: <dt>DOM interface:</dt>
6379: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6380: </dl><p>The <code><a href="#the-nav-element">nav</a></code> element <a href="#represents">represents</a> a section of
6381: a page that links to other pages or to parts within the page: a
6382: section with navigation links.</p><p class="note">Not all groups of links on a page need to be in a
6383: <code><a href="#the-nav-element">nav</a></code> element — the element is primarily intended
6384: for sections that consist of major navigation blocks. In particular,
6385: it is common for footers to have a short list of links to various
6386: pages of a site, such as the terms of service, the home page, and a
6387: copyright page. The <code><a href="#the-footer-element">footer</a></code> element alone is sufficient
6388: for such cases; while a <code><a href="#the-nav-element">nav</a></code> element can be used in such
6389: cases, it is usually unnecessary.</p><p class="note">User agents (such as screen readers) that are
6390: targeted at users who can benefit from navigation information being
6391: omitted in the initial rendering, or who can benefit from navigation
6392: information being immediately available, can use this element as a
6393: way to determine what content on the page to initially skip and/or
6394: provide on request.</p><div class="example">
6395:
6396: <p>In the following example, the page has several places where
6397: links are present, but only one of those places is considered a
6398: navigation section.</p>
6399:
6400: <pre><body>
6401: <header>
6402: <h1>Wake up sheeple!</h1>
6403: <p><a href="news.html">News</a> -
6404: <a href="blog.html">Blog</a> -
6405: <a href="forums.html">Forums</a></p>
6406: <p>Last Modified: <time>2009-04-01</time></p>
6407: <nav>
6408: <h1>Navigation</h1>
6409: <ul>
6410: <li><a href="articles.html">Index of all articles</a></li>
6411: <li><a href="today.html">Things sheeple need to wake up for today</a></li>
6412: <li><a href="successes.html">Sheeple we have managed to wake</a></li>
6413: </ul>
6414: </nav>
6415: </header>
6416: <div>
6417: <article>
6418: <header>
6419: <h1>My Day at the Beach</h1>
6420: </header>
6421: <div>
6422: <p>Today I went to the beach and had a lot of fun.</p>
6423: <em>...more content...</em>
6424: </div>
6425: <footer>
6426: <p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
6427: </footer>
6428: </article>
6429: <em>...more blog posts...</em>
6430: </div>
6431: <footer>
6432: <p>Copyright © 2006 The Example Company</p>
6433: <p><a href="about.html">About</a> -
6434: <a href="policy.html">Privacy Policy</a> -
6435: <a href="contact.html">Contact Us</a></p>
6436: </footer>
6437: </body></pre>
6438:
6439: <p>Notice the <code><a href="#the-div-element">div</a></code> elements being used to wrap all the
6440: contents of the page other than the header and footer, and all the
6441: contents of the blog entry other than its header and footer.</p>
6442:
6443: </div><div class="example">
6444:
6445: <p>In the following example, there are two <code><a href="#the-nav-element">nav</a></code>
6446: elements, one for primary navigation around the site, and one for
6447: secondary navigation around the page itself.</p>
6448:
6449: <pre><body>
6450: <h1>The Wiki Center Of Exampland</h1>
6451: <nav>
6452: <ul>
6453: <li><a href="/">Home</a></li>
6454: <li><a href="/events">Current Events</a></li>
6455: <em>...more...</em>
6456: </ul>
6457: </nav>
6458: <article>
6459: <header>
6460: <h1>Demos in Exampland</h1>
6461: <p>Written by A. N. Other.</p>
6462: </header>
6463: <nav>
6464: <ul>
6465: <li><a href="#public">Public demonstrations</a></li>
6466: <li><a href="#destroy">Demolitions</a></li>
6467: <em>...more...</em>
6468: </ul>
6469: </nav>
6470: <div>
6471: <section id="public">
6472: <h1>Public demonstrations</h1>
6473: <p><em>...more...</em></p>
6474: </section>
6475: <section id="destroy">
6476: <h1>Demolitions</h1>
6477: <p><em>...more...</em></p>
6478: </section>
6479: <em>...more...</em>
6480: </div>
6481: <footer>
6482: <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
6483: </footer>
6484: </article>
6485: <footer>
6486: <p><small>© copyright 1998 Exampland Emperor</small></p>
6487: </footer>
6488: </body></pre>
6489:
6490: </div><div class="example">
6491:
6492: <p>A <code><a href="#the-nav-element">nav</a></code> element doesn't have to contain a list, it
6493: can contain other kinds of content as well. In this navigation
6494: block, links are provided in prose:</p>
6495:
6496: <pre><nav>
6497: <h1>Navigation</h1>
6498: <p>You are on my home page. To the north lies <a href="/blog">my
6499: blog</a>, from whence the sounds of battle can be heard. To the east
6500: you can see a large mountain, upon which many <a
6501: href="/school">school papers</a> are littered. Far up thus mountain
6502: you can spy a little figure who appears to be me, desperately
6503: scribbling a <a href="/school/thesis">thesis</a>.</p>
6504: <p>To the west are several exits. One fun-looking exit is labeled <a
6505: href="http://games.example.com/">"games"</a>. Another more
6506: boring-looking exit is labeled <a
6507: href="http://isp.example.net/">ISP™</a>.</p>
6508: <p>To the south lies a dark and dank <a href="/about">contacts
6509: page</a>. Cobwebs cover its disused entrance, and at one point you
6510: see a rat run quickly out of the page.</p>
6511: </nav></pre>
6512:
6513: </div><h4 id="the-article-element"><span class="secno">4.4.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>article</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6514: <dd><a href="#flow-content">Flow content</a>.</dd>
6515: <dd><a href="#sectioning-content">Sectioning content</a>.</dd>
1.629 ! mike 6516: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6517: <dt>Contexts in which this element can be used:</dt>
6518: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6519: <dt>Content model:</dt>
6520: <dd><a href="#flow-content">Flow content</a>.</dd>
6521: <dt>Content attributes:</dt>
6522: <dd><a href="#global-attributes">Global attributes</a></dd>
6523: <dt>DOM interface:</dt>
6524: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6525: </dl><p>The <code><a href="#the-article-element">article</a></code> element <a href="#represents">represents</a> a
6526: self-contained composition in a document, page, application, or site
6527: and that is, in principle, independently distributable or reusable,
6528: e.g. in syndication. This could be a forum post, a magazine or
6529: newspaper article, a blog entry, a user-submitted comment, an
6530: interactive widget or gadget, or any other independent item of
6531: content.</p><p>When <code><a href="#the-article-element">article</a></code> elements are nested, the inner
6532: <code><a href="#the-article-element">article</a></code> elements represent articles that are in
6533: principle related to the contents of the outer article. For
6534: instance, a blog entry on a site that accepts user-submitted
6535: comments could represent the comments as <code><a href="#the-article-element">article</a></code>
6536: elements nested within the <code><a href="#the-article-element">article</a></code> element for the blog
6537: entry.</p><p>Author information associated with an <code><a href="#the-article-element">article</a></code>
6538: element (q.v. the <code><a href="#the-address-element">address</a></code> element) does not apply to
6539: nested <code><a href="#the-article-element">article</a></code> elements.</p><p class="note">When used specifically with content to be
6540: redistributed in syndication, the <code><a href="#the-article-element">article</a></code> element is
6541: similar in purpose to the <code title="">entry</code> element in
6542: Atom. <a href="#refsATOM">[ATOM]</a>
1.1 mike 6543:
6544: </p><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
6545: provide the publication date for an <code><a href="#the-article-element">article</a></code>
1.545 mike 6546: element.</p><div class="example" id="article-example">
6547:
6548: <p>This example shows a blog post using the <code><a href="#the-article-element">article</a></code>
6549: element:</p>
6550:
6551: <pre><article>
6552: <header>
6553: <h1>The Very First Rule of Life</h1>
6554: <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
6555: </header>
6556: <p>If there's a microphone anywhere near you, assume it's hot and
6557: sending whatever you're saying to the world. Seriously.</p>
6558: <p><em>...</em></p>
6559: <footer>
6560: <a href="?comments=1">Show comments...</a>
6561: </footer>
6562: </article></pre>
6563:
6564: <p>Here is that same blog post, but showing some of the comments:</p>
6565:
6566: <pre><article>
6567: <header>
6568: <h1>The Very First Rule of Life</h1>
6569: <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
6570: </header>
6571: <p>If there's a microphone anywhere near you, assume it's hot and
6572: sending whatever you're saying to the world. Seriously.</p>
6573: <p><em>...</em></p>
6574: <section>
6575: <h1>Comments</h1>
6576: <article>
6577: <footer>
6578: <p>Posted by: George Washington</p>
6579: <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
6580: </footer>
6581: <p>Yeah! Especially when talking about your lobbyist friends!</p>
6582: </article>
6583: <article>
6584: <footer>
6585: <p>Posted by: George Hammond</p>
6586: <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
6587: </footer>
6588: <p>Hey, you have the same first name as me.</p>
6589: </article>
6590: </section>
6591: </article></pre>
6592:
6593: <p>Notice the use of <code><a href="#the-footer-element">footer</a></code> to give the information
6594: for each comment (such as who wrote it and when): the
6595: <code><a href="#the-footer-element">footer</a></code> element <em>can</em> appear at the start of its
6596: section when appropriate, such as in this case. (Using
6597: <code><a href="#the-header-element">header</a></code> in this case wouldn't be wrong either; it's
6598: mostly a matter of authoring preference.)</p>
6599:
6600: </div><h4 id="the-aside-element"><span class="secno">4.4.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>aside</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6601: <dd><a href="#flow-content">Flow content</a>.</dd>
6602: <dd><a href="#sectioning-content">Sectioning content</a>.</dd>
1.629 ! mike 6603: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6604: <dt>Contexts in which this element can be used:</dt>
6605: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6606: <dt>Content model:</dt>
6607: <dd><a href="#flow-content">Flow content</a>.</dd>
6608: <dt>Content attributes:</dt>
6609: <dd><a href="#global-attributes">Global attributes</a></dd>
6610: <dt>DOM interface:</dt>
6611: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6612: </dl><p>The <code><a href="#the-aside-element">aside</a></code> element <a href="#represents">represents</a> a section
6613: of a page that consists of content that is tangentially related to
6614: the content around the <code><a href="#the-aside-element">aside</a></code> element, and which could
6615: be considered separate from that content. Such sections are often
6616: represented as sidebars in printed typography.</p><p>The element can be used for typographical effects like pull
6617: quotes or sidebars, for advertising, for groups of <code><a href="#the-nav-element">nav</a></code>
6618: elements, and for other content that is considered separate from the
6619: main content of the page.</p><p class="note">It's not appropriate to use the <code><a href="#the-aside-element">aside</a></code>
1.1 mike 6620: element just for parentheticals, since those are part of the main
1.545 mike 6621: flow of the document.</p><div class="example">
6622:
6623: <p>The following example shows how an aside is used to mark up
6624: background material on Switzerland in a much longer news story on
6625: Europe.</p>
6626:
6627: <pre><aside>
6628: <h1>Switzerland</h1>
6629: <p>Switzerland, a land-locked country in the middle of geographic
6630: Europe, has not joined the geopolitical European Union, though it is
6631: a signatory to a number of European treaties.</p>
6632: </aside></pre>
6633:
6634: </div><div class="example">
6635:
6636: <p>The following example shows how an aside is used to mark up
6637: a pull quote in a longer article.</p>
6638:
6639: <pre>...
6640:
6641: <p>He later joined a large company, continuing on the same work.
6642: <q>I love my job. People ask me what I do for fun when I'm not at
6643: work. But I'm paid to do my hobby, so I never know what to
6644: answer. Some people wonder what they would do if they didn't have to
6645: work... but I know what I would do, because I was unemployed for a
6646: year, and I filled that time doing exactly what I do now.</q></p>
6647:
6648: <aside>
6649: <q> People ask me what I do for fun when I'm not at work. But I'm
6650: paid to do my hobby, so I never know what to answer. </q>
6651: </aside>
6652:
6653: <p>Of course his work — or should that be hobby? —
6654: isn't his only passion. He also enjoys other pleasures.</p>
6655:
6656: ...</pre>
6657:
6658: </div><div class="example">
6659:
6660: <p>The following extract shows how <code><a href="#the-aside-element">aside</a></code> can be used
6661: for blogrolls and other side content on a blog:</p>
6662:
6663: <pre><body>
6664: <header>
6665: <h1>My wonderful blog</h1>
6666: <p>My tagline</p>
6667: </header>
6668: <aside>
6669: <!-- <em>this aside contains two sections that are tangentially related
6670: to the page, namely, links to other blogs, and links to blog posts
6671: from this blog</em> -->
6672: <nav>
6673: <h1>My blogroll</h1>
6674: <ul>
6675: <li><a href="http://blog.example.com/">Example Blog</a>
6676: </ul>
6677: </nav>
6678: <nav>
6679: <h1>Archives</h1>
6680: <ol reversed>
6681: <li><a href="/last-post">My last post</a>
6682: <li><a href="/first-post">My first post</a>
6683: </ol>
6684: </nav>
6685: </aside>
6686: <aside>
6687: <!-- <em>this aside is tangentially related to the page also, it
6688: contains twitter messages from the blog author</em> -->
6689: <h1>Twitter Feed</h1>
6690: <blockquote cite="http://twitter.example.net/t31351234">
6691: I'm on vacation, writing my blog.
6692: </blockquote>
6693: <blockquote cite="http://twitter.example.net/t31219752">
6694: I'm going to go on vacation soon.
6695: </blockquote>
6696: </aside>
6697: <article>
6698: <!-- <em>this is a blog post</em> -->
6699: <h1>My last post</h1>
6700: <p>This is my last post.</p>
6701: <footer>
6702: <p><a href="/last-post" rel=bookmark>Permalink</a>
6703: </footer>
6704: </article>
6705: <article>
6706: <!-- <em>this is also a blog post</em> -->
6707: <h1>My first post</h1>
6708: <p>This is my first post.</p>
6709: <aside>
6710: <!-- <em>this aside is about the blog post, since it's inside the
6711: <article> element; it would be wrong, for instance, to put the
6712: blogroll here, since the blogroll isn't really related to this post
6713: specifically, only to the page as a whole</em> -->
6714: <h1>Posting</h1>
6715: <p>While I'm thinking about it, I wanted to say something about
6716: posting. Posting is fun!</p>
6717: </aside>
6718: <footer>
6719: <p><a href="/first-post" rel=bookmark>Permalink</a>
6720: </footer>
6721: </article>
6722: <footer>
6723: <nav>
6724: <a href="/archives">Archives</a> —
6725: <a href="/about">About me</a> —
6726: <a href="/copyright">Copyright</a>
6727: </nav>
6728: </footer>
6729: </body></pre>
6730:
6731: </div><h4 id="the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.4.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>h1</code></dfn>, <dfn role="button" tabindex="0" aria-haspopup="true"><code>h2</code></dfn>, <dfn role="button" tabindex="0" aria-haspopup="true"><code>h3</code></dfn>, <dfn role="button" tabindex="0" aria-haspopup="true"><code>h4</code></dfn>, <dfn role="button" tabindex="0" aria-haspopup="true"><code>h5</code></dfn>, and <dfn role="button" tabindex="0" aria-haspopup="true"><code>h6</code></dfn> elements</h4><dl class="element"><dt>Categories</dt>
6732: <dd><a href="#flow-content">Flow content</a>.</dd>
6733: <dd><a href="#heading-content">Heading content</a>.</dd>
1.629 ! mike 6734: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6735: <dt>Contexts in which this element can be used:</dt>
6736: <dd>As a child of an <code><a href="#the-hgroup-element">hgroup</a></code> element.</dd>
6737: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6738: <dt>Content model:</dt>
6739: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
6740: <dt>Content attributes:</dt>
6741: <dd><a href="#global-attributes">Global attributes</a></dd>
6742: <dt>DOM interface:</dt>
6743: <dd>
6744: <pre class="idl">interface <dfn id="htmlheadingelement" role="button" tabindex="0" aria-haspopup="true">HTMLHeadingElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
6745: </dd>
6746: </dl><p>These elements <a href="#represents" title="represents">represent</a> headings
6747: for their sections.</p><p>The semantics and meaning of these elements are defined in the
6748: section on <a href="#headings-and-sections">headings and sections</a>.</p><p>These elements have a <dfn id="rank" role="button" tabindex="0" aria-haspopup="true">rank</dfn> given by the number in
6749: 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
6750: rank, the <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element has the lowest rank, and two
6751: elements with the same name have equal rank.</p><div class="example">
6752:
6753: <p>These two snippets are equivalent:</p>
6754:
6755: <pre><body>
6756: <h1>Let's call it a draw(ing surface)</h1>
6757: <h2>Diving in</h2>
6758: <h2>Simple shapes</h2>
6759: <h2>Canvas coordinates</h2>
6760: <h3>Canvas coordinates diagram</h3>
6761: <h2>Paths</h2>
6762: </body></pre>
6763:
6764: <pre><body>
6765: <h1>Let's call it a draw(ing surface)</h1>
6766: <section>
6767: <h1>Diving in</h1>
6768: </section>
6769: <section>
6770: <h1>Simple shapes</h1>
6771: </section>
6772: <section>
6773: <h1>Canvas coordinates</h1>
6774: <section>
6775: <h1>Canvas coordinates diagram</h1>
6776: </section>
6777: </section>
6778: <section>
6779: <h1>Paths</h1>
6780: </section>
6781: </body></pre>
6782:
6783: </div><h4 id="the-hgroup-element"><span class="secno">4.4.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>hgroup</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6784: <dd><a href="#flow-content">Flow content</a>.</dd>
6785: <dd><a href="#heading-content">Heading content</a>.</dd>
1.629 ! mike 6786: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6787: <dt>Contexts in which this element can be used:</dt>
6788: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6789: <dt>Content model:</dt>
6790: <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>
6791: <dt>Content attributes:</dt>
6792: <dd><a href="#global-attributes">Global attributes</a></dd>
6793: <dt>DOM interface:</dt>
6794: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6795: </dl><p>The <code><a href="#the-hgroup-element">hgroup</a></code> element <a href="#represents">represents</a> the
6796: heading of a section. The element is used to group a set of
6797: <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">h6</a></code> elements when the heading has
6798: multiple levels, such as subheadings, alternative titles, or
6799: taglines.</p><p>For the purposes of document summaries, outlines, and the like,
6800: the text of <code><a href="#the-hgroup-element">hgroup</a></code> elements is defined to be the text
6801: of the highest <a href="#rank" title="rank">ranked</a>
6802: <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">h6</a></code> element descendant of the
6803: <code><a href="#the-hgroup-element">hgroup</a></code> element, if there are any such elements, and the
6804: first such element if there are multiple elements with that
6805: <a href="#rank">rank</a>. If there are no such elements, then the text of
6806: the <code><a href="#the-hgroup-element">hgroup</a></code> element is the empty string.</p><p>Other elements of <a href="#heading-content">heading content</a> in the
6807: <code><a href="#the-hgroup-element">hgroup</a></code> element indicate subheadings or subtitles.</p><p>The <a href="#rank">rank</a> of an <code><a href="#the-hgroup-element">hgroup</a></code> element is the
6808: rank of the highest-ranked <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">h6</a></code>
6809: element descendant of the <code><a href="#the-hgroup-element">hgroup</a></code> element, if there are
6810: 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>
6811: element (the highest rank).</p><p>The section on <a href="#headings-and-sections">headings and sections</a>
6812: defines how <code><a href="#the-hgroup-element">hgroup</a></code> elements are assigned to individual
6813: sections.</p><div class="example">
6814:
6815: <p>Here are some examples of valid headings. In each case, the
6816: emphasized text represents the text that would be used as the
6817: heading in an application extracting heading data and ignoring
6818: subheadings.</p>
6819:
6820: <pre><hgroup>
6821: <h1><strong>The reality dysfunction</strong></h1>
6822: <h2>Space is not the only void</h2>
6823: </hgroup></pre>
6824:
6825: <pre><hgroup>
6826: <h1><strong>Dr. Strangelove</strong></h1>
6827: <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
6828: </hgroup></pre>
6829:
6830: <p>The point of using <code><a href="#the-hgroup-element">hgroup</a></code> in these examples is to
6831: mask the <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element (which acts as a secondary title)
6832: from the <a href="#outline">outline</a> algorithm.</p>
6833: </div><h4 id="the-header-element"><span class="secno">4.4.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>header</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6834: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 6835: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6836: <dt>Contexts in which this element can be used:</dt>
6837: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6838: <dt>Content model:</dt>
6839: <dd><a href="#flow-content">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code> or
6840: <code><a href="#the-footer-element">footer</a></code> element descendants.</dd>
6841: <dt>Content attributes:</dt>
6842: <dd><a href="#global-attributes">Global attributes</a></dd>
6843: <dt>DOM interface:</dt>
6844: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6845: </dl><p>The <code><a href="#the-header-element">header</a></code> element <a href="#represents">represents</a> a group
6846: of introductory or navigational aids.</p><p class="note">A <code><a href="#the-header-element">header</a></code> element is intended to usually
1.299 mike 6847: contain the section's heading (an
6848: <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">h6</a></code> element or an
6849: <code><a href="#the-hgroup-element">hgroup</a></code> element), but this is not required. The
6850: <code><a href="#the-header-element">header</a></code> element can also be used to wrap a section's
1.545 mike 6851: table of contents, a search form, or any relevant logos.</p><div class="example">
6852:
6853: <p>Here are some sample headers. This first one is for a game:</p>
6854:
6855: <pre><header>
6856: <p>Welcome to...</p>
6857: <h1>Voidwars!</h1>
6858: </header></pre>
6859:
6860: <p>The following snippet shows how the element can be used to mark
6861: up a specification's header:</p>
6862:
6863: <pre><header>
6864: <hgroup>
6865: <h1>Scalable Vector Graphics (SVG) 1.2</h1>
6866: <h2>W3C Working Draft 27 October 2004</h2>
6867: </hgroup>
6868: <dl>
6869: <dt>This version:</dt>
6870: <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
6871: <dt>Previous version:</dt>
6872: <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
6873: <dt>Latest version of SVG 1.2:</dt>
6874: <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
6875: <dt>Latest SVG Recommendation:</dt>
6876: <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
6877: <dt>Editor:</dt>
6878: <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
6879: <dt>Authors:</dt>
6880: <dd>See <a href="#authors">Author List</a></dd>
6881: </dl>
6882: <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
6883: </header></pre>
6884:
6885: </div><p class="note">The <code><a href="#the-header-element">header</a></code> element is not
1.1 mike 6886: <a href="#sectioning-content">sectioning content</a>; it doesn't introduce a new
1.545 mike 6887: section.</p><div class="example">
6888:
6889: <p>In this example, the page has a page heading given by the
6890: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element, and two subsections whose headings are
6891: given by <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> elements. The content after the
6892: <code><a href="#the-header-element">header</a></code> element is still part of the last subsection
6893: started in the <code><a href="#the-header-element">header</a></code> element, because the
6894: <code><a href="#the-header-element">header</a></code> element doesn't take part in the
6895: <a href="#outline">outline</a> algorithm.</p>
6896:
6897: <pre><body>
6898: <header>
6899: <h1>Little Green Guys With Guns</h1>
6900: <nav>
6901: <ul>
6902: <li><a href="/games">Games</a>
6903: <li><a href="/forum">Forum</a>
6904: <li><a href="/download">Download</a>
6905: </ul>
6906: </nav>
6907: <h2>Important News</h2> <!-- this starts a second subsection -->
6908: <!-- this is part of the subsection entitled "Important News" -->
6909: <p>To play today's games you will need to update your client.</p>
6910: <h2>Games</h2> <!-- this starts a third subsection -->
6911: </header>
6912: <p>You have three active games:</p>
6913: <!-- this is still part of the subsection entitled "Games" -->
6914: ...</pre>
6915:
6916: </div><h4 id="the-footer-element"><span class="secno">4.4.9 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>footer</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
6917: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 6918: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 6919: <dt>Contexts in which this element can be used:</dt>
6920: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
6921: <dt>Content model:</dt>
6922: <dd><a href="#flow-content">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code> or
6923: <code><a href="#the-footer-element">footer</a></code> element descendants.</dd>
6924: <dt>Content attributes:</dt>
6925: <dd><a href="#global-attributes">Global attributes</a></dd>
6926: <dt>DOM interface:</dt>
6927: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
6928: </dl><p>The <code><a href="#the-footer-element">footer</a></code> element <a href="#represents">represents</a> a footer
6929: for its nearest ancestor <a href="#sectioning-content">sectioning content</a> or
6930: <a href="#sectioning-root">sectioning root</a> element. A footer typically contains
6931: information about its section such as who wrote it, links to related
6932: documents, copyright data, and the like.</p><p>When the <code><a href="#the-footer-element">footer</a></code> element contains entire sections,
6933: they <a href="#represents" title="represents">represent</a> appendices, indexes,
6934: long colophons, verbose license agreements, and other such
6935: content.</p><p class="note">Contact information for the author or editor of a
1.1 mike 6936: section belongs in an <code><a href="#the-address-element">address</a></code> element, possibly itself
1.545 mike 6937: inside a <code><a href="#the-footer-element">footer</a></code>.</p><p>Footers don't necessarily have to appear at the <em>end</em> of a
6938: section, though they usually do.</p><p>When the nearest ancestor <a href="#sectioning-content">sectioning content</a> or
6939: <a href="#sectioning-root">sectioning root</a> element is <a href="#the-body-element-0">the body
6940: element</a>, then it applies to the whole page.</p><p class="note">The <code><a href="#the-footer-element">footer</a></code> element is not
1.1 mike 6941: <a href="#sectioning-content">sectioning content</a>; it doesn't introduce a new
1.545 mike 6942: section.</p><div class="example">
6943:
6944: <p>Here is a page with two footers, one at the top and one at the
6945: bottom, with the same content:</p>
6946:
6947: <pre><body>
6948: <footer><a href="../">Back to index...</a></footer>
6949: <hgroup>
6950: <h1>Lorem ipsum</h1>
6951: <h2>The ipsum of all lorems</h2>
6952: </hgroup>
6953: <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
6954: tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
6955: veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
6956: ea commodo consequat. Duis aute irure dolor in reprehenderit in
6957: voluptate velit esse cillum dolore eu fugiat nulla
6958: pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
6959: culpa qui officia deserunt mollit anim id est laborum.</p>
6960: <footer><a href="../">Back to index...</a></footer>
6961: </body></pre>
6962:
6963: </div><div class="example">
6964:
6965: <p>Here is an example which shows the <code><a href="#the-footer-element">footer</a></code> element
6966: being used both for a site-wide footer and for a section
6967: footer.</p>
6968:
6969: <pre><!DOCTYPE HTML>
6970: <HTML><HEAD>
6971: <TITLE>The Ramblings of a Scientist</TITLE>
6972: <BODY>
6973: <H1>The Ramblings of a Scientist</H1>
6974: <ARTICLE>
6975: <H1>Episode 15</H1>
6976: <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
6977: <P><A HREF="/fm/015.ogv">Download video</A>.</P>
6978: </VIDEO>
6979: <FOOTER> <!-- footer for article -->
6980: <P>Published <TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"></TIME></P>
6981: </FOOTER>
6982: </ARTICLE>
6983: <ARTICLE>
6984: <H1>My Favorite Trains</H1>
6985: <P>I love my trains. My favorite train of all time is a Köf.</P>
6986: <P>It is fun to see them pull some coal cars because they look so
6987: dwarfed in comparison.</P>
6988: <FOOTER> <!-- footer for article -->
6989: <P>Published <TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"></TIME></P>
6990: </FOOTER>
6991: </ARTICLE>
6992: <FOOTER> <!-- site wide footer -->
6993: <NAV>
6994: <P><A HREF="/credits.html">Credits</A> —
6995: <A HREF="/tos.html">Terms of Service</A> —
6996: <A HREF="/index.html">Blog Index</A></P>
6997: </NAV>
6998: <P>Copyright © 2009 Gordon Freeman</P>
6999: </FOOTER>
7000: </BODY>
7001: </HTML></pre>
7002:
7003: </div><div class="example">
7004:
7005: <p>Some site designs have what is sometimes referred to as "fat
7006: footers" — footers that contain a lot of material, including
7007: images, links to other articles, links to pages for sending
7008: feedback, special offers... in some ways, a whole "front page" in
7009: the footer.</p>
7010:
7011: <p>This fragment shows the bottom of a page on a site with a "fat
7012: footer":</p>
7013:
7014: <pre>...
7015: <footer>
7016: <nav>
7017: <section>
7018: <h1>Articles</h1>
7019: <p><img src="http://dev.w3.org/html5/spec/images/somersaults.jpeg" alt=""> Go to the gym with
7020: our somersaults class! Our teacher Jim takes you through the paces
7021: in this two-part article. <a href="articles/somersaults/1">Part
7022: 1</a> · <a href="articles/somersaults/1">Part 2</a></p>
7023: <p><img src="http://dev.w3.org/html5/spec/images/kindplus.jpeg"> Tired of walking on the edge of
7024: a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
7025: your way through the bars. <a href="articles/kindplus/1">Read
7026: more...</a></p>
7027: <p><img src="http://dev.w3.org/html5/spec/images/crisps.jpeg"> The chips are down, now all
7028: that's left is a potato. What can you do with it? <a
7029: href="articles/crisps/1">Read more...</a></p>
7030: </section>
7031: <ul>
7032: <li> <a href="/about">About us...</a>
7033: <li> <a href="/feedback">Send feedback!</a>
7034: <li> <a href="/sitemap">Sitemap</a>
7035: </ul>
7036: </nav>
7037: <p><small>Copyright © 2015 The Snacker —
7038: <a href="/tos">Terms of Service</a></small></p>
7039: </footer>
7040: </body></pre>
7041:
7042: </div><h4 id="the-address-element"><span class="secno">4.4.10 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>address</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7043: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 7044: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7045: <dt>Contexts in which this element can be used:</dt>
7046: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7047: <dt>Content model:</dt>
7048: <dd><a href="#flow-content">Flow content</a>, but with no <a href="#heading-content">heading
7049: content</a> descendants, no <a href="#sectioning-content">sectioning content</a>
7050: descendants, and no <code><a href="#the-header-element">header</a></code>, <code><a href="#the-footer-element">footer</a></code>, or
7051: <code><a href="#the-address-element">address</a></code> element descendants.</dd>
7052: <dt>Content attributes:</dt>
7053: <dd><a href="#global-attributes">Global attributes</a></dd>
7054: <dt>DOM interface:</dt>
7055: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
7056: </dl><p>The <code><a href="#the-address-element">address</a></code> element <a href="#represents">represents</a> the
7057: contact information for its nearest <code><a href="#the-article-element">article</a></code> or
7058: <code><a href="#the-body-element">body</a></code> element ancestor. If that is <a href="#the-body-element-0">the body
7059: element</a>, then the contact information applies to the document
7060: as a whole.</p><div class="example">
7061: <p>For example, a page at the W3C Web site related to HTML might
7062: include the following contact information:</p>
7063: <pre><ADDRESS>
7064: <A href="../People/Raggett/">Dave Raggett</A>,
7065: <A href="../People/Arnaud/">Arnaud Le Hors</A>,
7066: contact persons for the <A href="Activity">W3C HTML Activity</A>
7067: </ADDRESS></pre>
7068: </div><p>The <code><a href="#the-address-element">address</a></code> element must not be used to represent
7069: arbitrary addresses (e.g. postal addresses), unless those addresses
7070: are in fact the relevant contact information. (The <code><a href="#the-p-element">p</a></code>
7071: element is the appropriate element for marking up postal addresses
7072: in general.)</p><p>The <code><a href="#the-address-element">address</a></code> element must not contain information
7073: other than contact information.</p><div class="example">
7074: <p>For example, the following is non-conforming use of the
7075: <code><a href="#the-address-element">address</a></code> element:</p>
7076: <pre class="bad"><ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS></pre>
7077: </div><p>Typically, the <code><a href="#the-address-element">address</a></code> element would be included
7078: along with other information in a <code><a href="#the-footer-element">footer</a></code> element.</p><div class="example">
7079:
7080: <p>In this example the footer contains contact information and a
7081: copyright notice.</p>
7082:
7083: <pre><footer>
7084: <address>
7085: For more details, contact
7086: <a href="mailto:js@example.com">John Smith</a>.
7087: </address>
7088: <p><small>© copyright 2038 Example Corp.</small></p>
7089: </footer></pre>
7090:
7091: </div><h4 id="headings-and-sections"><span class="secno">4.4.11 </span><dfn role="button" tabindex="0" aria-haspopup="true">Headings and sections</dfn></h4><p>The <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">h6</a></code> elements and the
7092: <code><a href="#the-hgroup-element">hgroup</a></code> element are headings.</p><p>The first element of <a href="#heading-content">heading content</a> in an element
7093: of <a href="#sectioning-content">sectioning content</a> <a href="#represents">represents</a> the
7094: heading for that section. Subsequent headings of equal or higher
7095: <a href="#rank">rank</a> start new (implied) sections, headings of lower
7096: <a href="#rank">rank</a> start implied subsections that are part of the
7097: previous one. In both cases, the element <a href="#represents">represents</a> the
7098: heading of the implied section.</p><p>Certain elements are said to be <dfn id="sectioning-root" role="button" tabindex="0" aria-haspopup="true">sectioning roots</dfn>, including <code><a href="#the-blockquote-element">blockquote</a></code> and
7099: <code><a href="#the-td-element">td</a></code> elements. These elements can have their own
7100: outlines, but the sections and headings inside these elements do not
7101: contribute to the outlines of their ancestors.</p><ul class="brief category-list"><li><code><a href="#the-blockquote-element">blockquote</a></code></li>
7102: <li><code><a href="#the-body-element">body</a></code></li>
7103: <li><code><a href="#the-details-element">details</a></code></li>
7104: <li><code><a href="#the-fieldset-element">fieldset</a></code></li>
7105: <li><code><a href="#the-figure-element">figure</a></code></li>
7106: <li><code><a href="#the-td-element">td</a></code></li>
7107: </ul><p><a href="#sectioning-content">Sectioning content</a> elements are always considered
7108: subsections of their nearest ancestor <a href="#sectioning-root">sectioning root</a>
7109: or their nearest ancestor element of <a href="#sectioning-content">sectioning
7110: content</a>, whichever is nearest, regardless of what implied
7111: sections other headings may have created.</p><div class="example">
7112: <p>For the following fragment:</p>
7113: <pre><body>
7114: <h1>Foo</h1>
7115: <h2>Bar</h2>
7116: <blockquote>
7117: <h3>Bla</h3>
7118: </blockquote>
7119: <p>Baz</p>
7120: <h2>Quux</h2>
7121: <section>
7122: <h3>Thud</h3>
7123: </section>
7124: <p>Grunt</p>
7125: </body></pre>
7126: <p>...the structure would be:</p>
7127: <ol><li>
7128: Foo (heading of explicit <code><a href="#the-body-element">body</a></code> section, containing the "Grunt" paragraph)
7129: <ol><li>
7130: Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
7131: </li>
7132: <li>
7133: Quux (heading starting implied section with no content other than the heading itself)
7134: </li>
7135: <li>
7136: Thud (heading of explicit <code><a href="#the-section-element">section</a></code> section)
7137: </li>
7138: </ol></li>
7139: </ol><p>Notice how the <code><a href="#the-section-element">section</a></code> ends the earlier implicit
7140: section so that a later paragraph ("Grunt") is back at the top
7141: level.</p>
7142: </div><p>Sections may contain headings of any <a href="#rank">rank</a>, but
7143: authors are strongly encouraged to either use only <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>
7144: elements, or to use elements of the appropriate <a href="#rank">rank</a>
7145: for the section's nesting level.</p><p>Authors are also encouraged to explicitly wrap sections in
7146: elements of <a href="#sectioning-content">sectioning content</a>, instead of relying on
7147: the implicit sections generated by having multiple headings in one
7148: element of <a href="#sectioning-content">sectioning content</a>.</p><div class="example">
7149: <p>For example, the following is correct:</p>
7150:
7151: <pre><body>
7152: <h4>Apples</h4>
7153: <p>Apples are fruit.</p>
7154: <section>
7155: <h2>Taste</h2>
7156: <p>They taste lovely.</p>
7157: <h6>Sweet</h6>
7158: <p>Red apples are sweeter than green ones.</p>
7159: <h1>Color</h1>
7160: <p>Apples come in various colors.</p>
7161: </section>
7162: </body></pre>
7163:
7164: <p>However, the same document would be more clearly expressed
7165: as:</p>
7166:
7167: <pre><body>
7168: <h1>Apples</h1>
7169: <p>Apples are fruit.</p>
7170: <section>
7171: <h2>Taste</h2>
7172: <p>They taste lovely.</p>
7173: <section>
7174: <h3>Sweet</h3>
7175: <p>Red apples are sweeter than green ones.</p>
7176: </section>
7177: </section>
7178: <section>
7179: <h2>Color</h2>
7180: <p>Apples come in various colors.</p>
7181: </section>
7182: </body></pre>
7183:
7184: <p>Both of the documents above are semantically identical and would
7185: produce the same outline in compliant user agents.</p>
7186:
7187: <p>This third example is also semantically identical, and might be
7188: easier to maintain (e.g. if sections are often moved around in
7189: editing):</p>
7190:
7191: <pre><body>
7192: <h1>Apples</h1>
7193: <p>Apples are fruit.</p>
7194: <section>
7195: <h1>Taste</h1>
7196: <p>They taste lovely.</p>
7197: <section>
7198: <h1>Sweet</h1>
7199: <p>Red apples are sweeter than green ones.</p>
7200: </section>
7201: </section>
7202: <section>
7203: <h1>Color</h1>
7204: <p>Apples come in various colors.</p>
7205: </section>
7206: </body></pre>
7207:
7208: <p>This final example would need explicit style rules to be
7209: rendered well in legacy browsers. Legacy browsers without CSS
7210: support would render all the headings as top-level headings.</p>
7211:
7212: </div><h5 id="outlines"><span class="secno">4.4.11.1 </span>Creating an outline</h5><p>The <dfn id="outline" role="button" tabindex="0" aria-haspopup="true">outline</dfn> for a <a href="#sectioning-content">sectioning content</a>
7213: element or a <a href="#sectioning-root">sectioning root</a> element consists of a list
7214: of one or more potentially nested <a href="#concept-section" title="concept-section">sections</a>. A <dfn id="concept-section" role="button" tabindex="0" aria-haspopup="true">section</dfn> is a container that
7215: corresponds to some nodes in the original DOM tree. Each section can
7216: have one heading associated with it, and can contain any number of
7217: further nested sections. <span class="impl">The algorithm for the
7218: outline also associates each node in the DOM tree with a particular
7219: section and potentially a heading.</span> (The sections in the
7220: outline aren't <code><a href="#the-section-element">section</a></code> elements, though some may
7221: correspond to such elements — they are merely conceptual
7222: sections.)</p><div class="example">
7223:
7224: <p>The following markup fragment:</p>
7225:
7226: <pre><body>
7227: <h1>A</h1>
7228: <p>B</p>
7229: <h2>C</h2>
7230: <p>D</p>
7231: <h2>E</h2>
7232: <p>F</p>
7233: </body></pre>
7234:
7235: <p>...results in the following outline being created for the
7236: <code><a href="#the-body-element">body</a></code> node (and thus the entire document):</p>
7237:
7238: <ol class="brief"><li>
7239: <p>Section created for <code><a href="#the-body-element">body</a></code> node.</p>
7240: <p>Associated with heading "A".</p>
7241: <p>Also associated with paragraph "B".</p>
7242: <p>Nested sections:</p>
7243: <ol class="brief"><li>
7244: <p>Section implied for first <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element.</p>
7245: <p>Associated with heading "C".</p>
7246: <p>Also associated with paragraph "D".</p>
7247: <p>No nested sections.</p>
7248: </li>
7249: <li>
7250: <p>Section implied for second <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element.</p>
7251: <p>Associated with heading "E".</p>
7252: <p>Also associated with paragraph "F".</p>
7253: <p>No nested sections.</p>
7254: </li>
7255: </ol></li>
7256: </ol></div><h3 id="grouping-content"><span class="secno">4.5 </span>Grouping content</h3><p>The
7257: <a href="#the-p-element">p</a>,
7258: <a href="#the-hr-element">hr</a>,
7259: <a href="#the-pre-element">pre</a>,
7260: <a href="#the-blockquote-element">blockquote</a>,
7261: <a href="#the-ol-element">ol</a>,
7262: <a href="#the-ul-element">ul</a>,
7263: <a href="#the-li-element">li</a>,
7264: <a href="#the-dl-element">dl</a>,
7265: <a href="#the-dt-element">dt</a>,
7266: <a href="#the-dd-element">dd</a>,
7267: <a href="#the-figure-element">figure</a>,
7268: <a href="#the-figcaption-element">figcaption</a>,
7269: and
7270: <a href="#the-div-element">div</a>
7271: elements.</p><h4 id="the-p-element"><span class="secno">4.5.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>p</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7272: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 7273: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7274: <dt>Contexts in which this element can be used:</dt>
7275: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7276: <dt>Content model:</dt>
7277: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
7278: <dt>Content attributes:</dt>
7279: <dd><a href="#global-attributes">Global attributes</a></dd>
7280: <dt>DOM interface:</dt>
7281: <dd>
7282: <pre class="idl">interface <dfn id="htmlparagraphelement" role="button" tabindex="0" aria-haspopup="true">HTMLParagraphElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
7283: </dd>
7284: </dl><p>The <code><a href="#the-p-element">p</a></code> element <a href="#represents">represents</a> a
7285: <a href="#paragraph">paragraph</a>.</p><p class="note">While paragraphs are usually represented in visual
1.25 mike 7286: media by blocks of text that are physically separated from adjacent
7287: blocks through blank lines, a style sheet or user agent would be
7288: equally justified in presenting paragraph breaks in a different
1.545 mike 7289: manner, for instance using inline pilcrows (¶).</p><div class="example">
7290: <p>The following examples are conforming HTML fragments:</p>
7291: <pre><p>The little kitten gently seated himself on a piece of
7292: carpet. Later in his life, this would be referred to as the time the
7293: cat sat on the mat.</p></pre>
7294: <pre><fieldset>
7295: <legend>Personal information</legend>
7296: <p>
7297: <label>Name: <input name="n"></label>
7298: <label><input name="anon" type="checkbox"> Hide from other users</label>
7299: </p>
7300: <p><label>Address: <textarea name="a"></textarea></label></p>
7301: </fieldset></pre>
7302: <pre><p>There was once an example from Femley,<br>
7303: Whose markup was of dubious quality.<br>
7304: The validator complained,<br>
7305: So the author was pained,<br>
7306: To move the error from the markup to the rhyming.</p></pre>
7307: </div><p>The <code><a href="#the-p-element">p</a></code> element should not be used when a more
7308: specific element is more appropriate.</p><div class="example">
7309:
7310: <p>The following example is technically correct:</p>
7311:
7312: <pre><section>
7313: <!-- ... -->
7314: <p>Last modified: 2001-04-23</p>
7315: <p>Author: fred@example.com</p>
7316: </section></pre>
7317:
7318: <p>However, it would be better marked-up as:</p>
7319:
7320: <pre><section>
7321: <!-- ... -->
7322: <footer>Last modified: 2001-04-23</footer>
7323: <address>Author: fred@example.com</address>
7324: </section></pre>
7325:
7326: <p>Or:</p>
7327:
7328: <pre><section>
7329: <!-- ... -->
7330: <footer>
7331: <p>Last modified: 2001-04-23</p>
7332: <address>Author: fred@example.com</address>
7333: </footer>
7334: </section></pre>
7335:
7336: </div><h4 id="the-hr-element"><span class="secno">4.5.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>hr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7337: <dd><a href="#flow-content">Flow content</a>.</dd>
7338: <dt>Contexts in which this element can be used:</dt>
7339: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7340: <dt>Content model:</dt>
7341: <dd>Empty.</dd>
7342: <dt>Content attributes:</dt>
7343: <dd><a href="#global-attributes">Global attributes</a></dd>
7344: <dt>DOM interface:</dt>
7345: <dd>
7346: <pre class="idl">interface <dfn id="htmlhrelement" role="button" tabindex="0" aria-haspopup="true">HTMLHRElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
7347: </dd>
7348: </dl><p>The <code><a href="#the-hr-element">hr</a></code> element <a href="#represents">represents</a> a
7349: <a href="#paragraph">paragraph</a>-level thematic break, e.g. a scene change in
7350: a story, or a transition to another topic within a section of a
7351: reference book.</p><div class="example">
7352:
7353: <p>The following fictional extract from a project manual shows two
7354: sections that use the <code><a href="#the-hr-element">hr</a></code> element to separate topics
7355: within the section.</p>
7356:
7357: <pre><section>
7358: <h1>Communication</h1>
7359: <p>There are various methods of communication. This section
7360: covers a few of the important ones used by the project.</p>
7361: <strong><hr></strong>
7362: <p>Communication stones seem to come in pairs and have mysterious
7363: properties:</p>
7364: <ul>
7365: <li>They can transfer thoughts in two directions once activated
7366: if used alone.</li>
7367: <li>If used with another device, they can transfer one's
7368: consciousness to another body.</li>
7369: <li>If both stones are used with another device, the
7370: consciousnesses switch bodies.</li>
7371: </ul>
7372: <strong><hr></strong>
7373: <p>Radios use the electromagnetic spectrum in the meter range and
7374: longer.</p>
7375: <strong><hr></strong>
7376: <p>Signal flares use the electromagnetic spectrum in the
7377: nanometer range.</p>
7378: </section>
7379: <section>
7380: <h1>Food</h1>
7381: <p>All food at the project is rationed:</p>
7382: <dl>
7383: <dt>Potatoes</dt>
7384: <dd>Two per day</dd>
7385: <dt>Soup</dt>
7386: <dd>One bowl per day</dd>
7387: </dl>
7388: <strong><hr></strong>
7389: <p>Cooking is done by the chefs on a set rotation.</p>
7390: </section></pre>
7391:
7392: <p>There is no need for an <code><a href="#the-hr-element">hr</a></code> element between the
7393: sections themselves, since the <code><a href="#the-section-element">section</a></code> elements and
7394: the <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> elements imply thematic changes themselves.</p>
7395:
7396: </div><div class="example">
7397:
7398: <p>The following extract from <cite>Pandora's Star</cite> by Peter
7399: F. Hamilton shows two paragraphs that precede a scene change and
7400: the paragraph that follows it. The scene change, represented in the
7401: printed book by a gap containing a solitary centered star between
7402: the second and third paragraphs, is here represented using the
7403: <code><a href="#the-hr-element">hr</a></code> element.</p>
7404:
7405:
7406:
7407: <pre lang="en-GB"><p>Dudley was ninety-two, in his second life, and fast approaching
7408: time for another rejuvenation. Despite his body having the physical
7409: age of a standard fifty-year-old, the prospect of a long degrading
7410: campaign within academia was one he regarded with dread. For a
7411: supposedly advanced civilization, the Intersolar Commonwealth could be
7412: appallingly backward at times, not to mention cruel.</p>
7413: <p><i>Maybe it won't be that bad</i>, he told himself. The lie was
7414: comforting enough to get him through the rest of the night's
7415: shift.</p>
7416: <strong><hr></strong>
7417: <p>The Carlton AllLander drove Dudley home just after dawn. Like the
7418: astronomer, the vehicle was old and worn, but perfectly capable of
7419: doing its job. It had a cheap diesel engine, common enough on a
7420: semi-frontier world like Gralmond, although its drive array was a
7421: thoroughly modern photoneural processor. With its high suspension and
7422: deep-tread tyres it could plough along the dirt track to the
7423: observatory in all weather and seasons, including the metre-deep snow
7424: of Gralmond's winters.</p></pre>
7425:
7426: </div><p class="note">The <code><a href="#the-hr-element">hr</a></code> element does not affect the
7427: document's <a href="#outline">outline</a>.</p><h4 id="the-pre-element"><span class="secno">4.5.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>pre</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7428: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 7429: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7430: <dt>Contexts in which this element can be used:</dt>
7431: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7432: <dt>Content model:</dt>
7433: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
7434: <dt>Content attributes:</dt>
7435: <dd><a href="#global-attributes">Global attributes</a></dd>
7436: <dt>DOM interface:</dt>
7437: <dd>
7438: <pre class="idl">interface <dfn id="htmlpreelement" role="button" tabindex="0" aria-haspopup="true">HTMLPreElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
7439: </dd>
7440: </dl><p>The <code><a href="#the-pre-element">pre</a></code> element <a href="#represents">represents</a> a block of
7441: preformatted text, in which structure is represented by typographic
7442: conventions rather than by elements.</p><p class="note">In <a href="#syntax">the HTML syntax</a>, a leading
1.1 mike 7443: newline character immediately following the <code><a href="#the-pre-element">pre</a></code> element
1.545 mike 7444: start tag is stripped.</p><p>Some examples of cases where the <code><a href="#the-pre-element">pre</a></code> element could
7445: be used:</p><ul><li>Including an e-mail, with paragraphs indicated by blank lines,
7446: lists indicated by lines prefixed with a bullet, and so on.</li>
7447:
7448: <li>Including fragments of computer code, with structure indicated
7449: according to the conventions of that language.</li>
7450:
7451: <li>Displaying ASCII art.</li>
7452:
7453: </ul><p class="note">Authors are encouraged to consider how preformatted
1.1 mike 7454: text will be experienced when the formatting is lost, as will be the
7455: case for users of speech synthesizers, braille displays, and the
7456: like. For cases like ASCII art, it is likely that an alternative
7457: presentation, such as a textual description, would be more
1.545 mike 7458: universally accessible to the readers of the document.</p><p>To represent a block of computer code, the <code><a href="#the-pre-element">pre</a></code>
7459: element can be used with a <code><a href="#the-code-element">code</a></code> element; to represent a
7460: block of computer output the <code><a href="#the-pre-element">pre</a></code> element can be used
7461: with a <code><a href="#the-samp-element">samp</a></code> element. Similarly, the <code><a href="#the-kbd-element">kbd</a></code>
7462: element can be used within a <code><a href="#the-pre-element">pre</a></code> element to indicate
7463: text that the user is to enter.</p><div class="example">
7464:
7465: <p>In the following snippet, a sample of computer code is
7466: presented.</p>
7467:
7468: <pre><p>This is the <code>Panel</code> constructor:</p>
7469: <pre><code>function Panel(element, canClose, closeHandler) {
7470: this.element = element;
7471: this.canClose = canClose;
7472: this.closeHandler = function () { if (closeHandler) closeHandler() };
7473: }</code></pre></pre>
7474:
7475: </div><div class="example">
7476:
7477: <p>In the following snippet, <code><a href="#the-samp-element">samp</a></code> and <code><a href="#the-kbd-element">kbd</a></code>
7478: elements are mixed in the contents of a <code><a href="#the-pre-element">pre</a></code> element to
7479: show a session of Zork I.</p>
7480:
7481: <pre><pre><samp>You are in an open field west of a big white house with a boarded
7482: front door.
7483: There is a small mailbox here.
7484:
7485: ></samp> <kbd>open mailbox</kbd>
7486:
7487: <samp>Opening the mailbox reveals:
7488: A leaflet.
7489:
7490: ></samp></pre></pre>
7491:
7492: </div><div class="example">
7493:
7494: <p>The following shows a contemporary poem that uses the
7495: <code><a href="#the-pre-element">pre</a></code> element to preserve its unusual formatting, which
7496: forms an intrinsic part of the poem itself.</p>
7497:
7498: <pre><pre> maxling
7499:
7500: it is with a heart
7501: heavy
7502:
7503: that i admit loss of a feline
7504: so loved
7505:
7506: a friend lost to the
7507: unknown
7508: (night)
7509:
7510: ~cdr 11dec07</pre></pre>
7511:
7512: </div><h4 id="the-blockquote-element"><span class="secno">4.5.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>blockquote</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7513: <dd><a href="#flow-content">Flow content</a>.</dd>
7514: <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
1.629 ! mike 7515: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7516: <dt>Contexts in which this element can be used:</dt>
7517: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7518: <dt>Content model:</dt>
7519: <dd><a href="#flow-content">Flow content</a>.</dd>
7520: <dt>Content attributes:</dt>
7521: <dd><a href="#global-attributes">Global attributes</a></dd>
7522: <dd><code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code></dd>
7523: <dt>DOM interface:</dt>
7524: <dd>
7525: <pre class="idl">interface <dfn id="htmlquoteelement" role="button" tabindex="0" aria-haspopup="true">HTMLQuoteElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
7526: attribute DOMString <a href="#dom-quote-cite" title="dom-quote-cite">cite</a>;
7527: };</pre>
7528: <p class="note">The <code><a href="#htmlquoteelement">HTMLQuoteElement</a></code> interface is
7529: also used by the <code><a href="#the-q-element">q</a></code> element.</p>
7530: </dd>
7531: </dl><p>The <code><a href="#the-blockquote-element">blockquote</a></code> element <a href="#represents">represents</a> a
7532: section that is quoted from another source.</p><p>Content inside a <code><a href="#the-blockquote-element">blockquote</a></code> must be quoted from
7533: another source, whose address, if it has one, may be cited in the
7534: <dfn id="attr-blockquote-cite" role="button" tabindex="0" aria-haspopup="true"><code>cite</code></dfn>
7535: attribute.</p><p>If the <code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code> attribute
7536: is present, it must be a <a href="#valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
7537: spaces</a>. <span class="impl">To obtain the corresponding
7538: 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
7539: agents should allow users to follow such citation links.</span></p>
7540: <p>The <dfn id="dom-quote-cite" role="button" tabindex="0" aria-haspopup="true"><code>cite</code></dfn> IDL
7541: attribute must <a href="#reflect">reflect</a> the element's <code title="">cite</code> content attribute.</p>
7542: <div class="example">
7543:
1.628 mike 7544: <p>Here a <code><a href="#the-blockquote-element">blockquote</a></code> element is used in conjunction
7545: with a <code><a href="#the-figure-element">figure</a></code> element and its <code><a href="#the-figcaption-element">figcaption</a></code>
7546: to clearly relate a quote to its attribution (which is not part of
7547: the quote and therefore doesn't belong inside the
7548: <code><a href="#the-blockquote-element">blockquote</a></code> itself):</p>
7549:
7550: <pre><figure>
7551: <blockquote>
7552: <p>The truth may be puzzling. It may take some work to grapple with.
7553: It may be counterintuitive. It may contradict deeply held
7554: prejudices. It may not be consonant with what we desperately want to
7555: be true. But our preferences do not determine what's true. We have a
7556: method, and that method helps us to reach not absolute truth, only
7557: asymptotic approaches to the truth — never there, just closer
7558: and closer, always finding vast new oceans of undiscovered
7559: possibilities. Cleverly designed experiments are the key.</p>
7560: </blockquote>
7561: <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
7562: the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February
7563: 1995)</cite></figcaption>
7564: </figure></pre>
7565:
7566: </div><div class="example">
7567:
1.545 mike 7568: <p>This next example shows the use of <code><a href="#the-cite-element">cite</a></code> alongside
7569: <code><a href="#the-blockquote-element">blockquote</a></code>:</p>
7570:
7571: <pre><p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
7572: <blockquote cite="http://quotes.example.org/s/sonnet130.html">
7573: <p>My mistress' eyes are nothing like the sun,<br>
7574: Coral is far more red, than her lips red,<br>
7575: ...</pre>
7576:
7577: </div><div class="example">
7578:
7579: <p>This example shows how a forum post could use
7580: <code><a href="#the-blockquote-element">blockquote</a></code> to show what post a user is replying
7581: to. The <code><a href="#the-article-element">article</a></code> element is used for each post, to mark
7582: up the threading.</p>
7583:
7584: <pre><article>
7585: <h1><a href="http://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
7586: <article>
7587: <header><strong>t3yw</strong> 12 points 1 hour ago</header>
7588: <p>I bet a narwhal would love that.</p>
7589: <footer><a href="?pid=29578">permalink</a></footer>
7590: <article>
7591: <header><strong>greg</strong> 8 points 1 hour ago</header>
7592: <blockquote><p>I bet a narwhal would love that.</p></blockquote>
7593: <p>Dude narwhals don't eat bacon.</p>
7594: <footer><a href="?pid=29579">permalink</a></footer>
7595: <article>
7596: <header><strong>t3yw</strong> 15 points 1 hour ago</header>
7597: <blockquote>
7598: <blockquote><p>I bet a narwhal would love that.</p></blockquote>
7599: <p>Dude narwhals don't eat bacon.</p>
7600: </blockquote>
7601: <p>Next thing you'll be saying they don't get capes and wizard
7602: hats either!</p>
7603: <footer><a href="?pid=29580">permalink</a></footer>
7604: <article>
7605: <article>
7606: <header><strong>boing</strong> -5 points 1 hour ago</header>
7607: <p>narwhals are worse than ceiling cat</p>
7608: <footer><a href="?pid=29581">permalink</a></footer>
7609: </article>
7610: </article>
7611: </article>
7612: </article>
7613: <article>
7614: <header><strong>fred</strong> 1 points 23 minutes ago</header>
7615: <blockquote><p>I bet a narwhal would love that.</p></blockquote>
7616: <p>I bet they'd love to peel a banana too.</p>
7617: <footer><a href="?pid=29582">permalink</a></footer>
7618: </article>
7619: </article>
7620: </article></pre>
7621:
7622: </div><div class="example">
7623:
7624: <p>This example shows the use of a <code><a href="#the-blockquote-element">blockquote</a></code> for
7625: short snippets, demonstrating that one does not have to use
7626: <code><a href="#the-p-element">p</a></code> elements inside <code><a href="#the-blockquote-element">blockquote</a></code>
7627: elements:</p>
7628:
7629: <pre><p>He began his list of "lessons" with the following:</p>
7630: <blockquote>One should never assume that his side of
7631: the issue will be recognized, let alone that it will
7632: be conceded to have merits.</blockquote>
7633: <p>He continued with a number of similar points, ending with:</p>
7634: <blockquote>Finally, one should be prepared for the threat
7635: of breakdown in negotiations at any given moment and not
7636: be cowed by the possiblity.</blockquote>
7637: <p>We shall now discuss these points...</pre>
7638:
7639: </div><p class="note"><a href="#conversations">Examples of how to
1.1 mike 7640: represent a conversation</a> are shown in a later section; it is not
7641: appropriate to use the <code><a href="#the-cite-element">cite</a></code> and <code><a href="#the-blockquote-element">blockquote</a></code>
1.545 mike 7642: elements for this purpose.</p><h4 id="the-ol-element"><span class="secno">4.5.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>ol</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7643: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 7644: <dd>If the element's children include at least one <code><a href="#the-li-element">li</a></code> element: <a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7645: <dt>Contexts in which this element can be used:</dt>
7646: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7647: <dt>Content model:</dt>
7648: <dd>Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd>
7649: <dt>Content attributes:</dt>
7650: <dd><a href="#global-attributes">Global attributes</a></dd>
7651: <dd><code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code></dd>
7652: <dd><code title="attr-ol-start"><a href="#attr-ol-start">start</a></code></dd>
7653: <dd><code title="attr-ol-type"><a href="#attr-ol-type">type</a></code></dd>
7654: <dt>DOM interface:</dt>
7655: <dd>
7656: <pre class="idl">interface <dfn id="htmlolistelement" role="button" tabindex="0" aria-haspopup="true">HTMLOListElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
7657: attribute boolean <a href="#dom-ol-reversed" title="dom-ol-reversed">reversed</a>;
7658: attribute long <a href="#dom-ol-start" title="dom-ol-start">start</a>;
7659: attribute DOMString <a href="#dom-ol-type" title="dom-ol-type">type</a>;
7660: };</pre>
7661: </dd>
7662: </dl><p>The <code><a href="#the-ol-element">ol</a></code> element <a href="#represents">represents</a> a list of
7663: items, where the items have been intentionally ordered, such that
7664: changing the order would change the meaning of the document.</p><p>The items of the list are the <code><a href="#the-li-element">li</a></code> element child nodes
7665: of the <code><a href="#the-ol-element">ol</a></code> element, in <a href="#tree-order">tree order</a>.</p><p>The <dfn id="attr-ol-reversed" role="button" tabindex="0" aria-haspopup="true"><code>reversed</code></dfn>
7666: attribute is a <a href="#boolean-attribute">boolean attribute</a>. If present, it
7667: indicates that the list is a descending list (..., 3, 2, 1). If the
7668: attribute is omitted, the list is an ascending list (1, 2, 3,
7669: ...).</p><p>The <dfn id="attr-ol-start" role="button" tabindex="0" aria-haspopup="true"><code>start</code></dfn>
7670: attribute, if present, must be a <a href="#valid-integer">valid integer</a> giving
7671: the <a href="#ordinal-value">ordinal value</a> of the first list item.</p><p>The <dfn id="attr-ol-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> attribute
7672: can be used to specify the kind of marker to use in the list, in the
7673: cases where that matters (e.g. because items are to be referenced by
7674: their number/letter). The attribute, if specified, must have a value
7675: that is a <a href="#case-sensitive">case-sensitive</a> match for one of the
7676: characters given in the first cell of one of the rows of the
7677: following table. <span class="impl">The <code title="attr-ol-type"><a href="#attr-ol-type">type</a></code> attribute represents the state
7678: given in the cell in the second column of the row whose first cell
7679: matches the attribute's value; if none of the cells match, or if the
7680: attribute is omitted, then the attribute represents the <a href="#attr-ol-type-state-decimal" title="attr-ol-type-state-decimal">decimal</a> state.</span></p><table><thead><tr><th>Keyword
7681: </th><th>State
7682: </th><th>Description
7683: </th><th colspan="8">Examples for values 1-3 and 3999-4001
7684: </th></tr></thead><tbody><tr><td><dfn id="attr-ol-type-keyword-decimal" role="button" tabindex="0" aria-haspopup="true"><code>1</code></dfn> (U+0031)
7685: </td><td><dfn id="attr-ol-type-state-decimal" role="button" tabindex="0" aria-haspopup="true">decimal</dfn>
7686: </td><td>Decimal numbers
7687: </td><td class="eg"><samp>1.</samp> </td><td class="eg"><samp>2.</samp> </td><td class="eg"><samp>3.</samp> </td><td class="eg">... </td><td class="eg"><samp>3999.</samp> </td><td class="eg"><samp>4000.</samp> </td><td class="eg"><samp>4001.</samp> </td><td class="eg">...
7688: </td></tr><tr><td><dfn id="attr-ol-type-keyword-lower-alpha" role="button" tabindex="0" aria-haspopup="true"><code>a</code></dfn> (U+0061)
7689: </td><td><dfn id="attr-ol-type-state-lower-alpha" role="button" tabindex="0" aria-haspopup="true">lower-alpha</dfn>
7690: </td><td>Lowercase latin alphabet
7691: </td><td class="eg"><samp>a.</samp> </td><td class="eg"><samp>b.</samp> </td><td class="eg"><samp>c.</samp> </td><td class="eg">... </td><td class="eg"><samp>ewu.</samp> </td><td class="eg"><samp>ewv.</samp> </td><td class="eg"><samp>eww.</samp> </td><td class="eg">...
7692: </td></tr><tr><td><dfn id="attr-ol-type-keyword-upper-alpha" role="button" tabindex="0" aria-haspopup="true"><code>A</code></dfn> (U+0041)
7693: </td><td><dfn id="attr-ol-type-state-upper-alpha" role="button" tabindex="0" aria-haspopup="true">upper-alpha</dfn>
7694: </td><td>Uppercase latin alphabet
7695: </td><td class="eg"><samp>A.</samp> </td><td class="eg"><samp>B.</samp> </td><td class="eg"><samp>C.</samp> </td><td class="eg">... </td><td class="eg"><samp>EWU.</samp> </td><td class="eg"><samp>EWV.</samp> </td><td class="eg"><samp>EWW.</samp> </td><td class="eg">...
7696: </td></tr><tr><td><dfn id="attr-ol-type-keyword-lower-roman" role="button" tabindex="0" aria-haspopup="true"><code>i</code></dfn> (U+0069)
7697: </td><td><dfn id="attr-ol-type-state-lower-roman" role="button" tabindex="0" aria-haspopup="true">lower-roman</dfn>
7698: </td><td>Lowercase roman numerals
7699: </td><td class="eg"><samp>i.</samp> </td><td class="eg"><samp>ii.</samp> </td><td class="eg"><samp>iii.</samp> </td><td class="eg">... </td><td class="eg"><samp>mmmcmxcix.</samp> </td><td class="eg"><samp>i̅v̅.</samp> </td><td class="eg"><samp>i̅v̅i.</samp> </td><td class="eg">...
7700: </td></tr><tr><td><dfn id="attr-ol-type-keyword-upper-roman" role="button" tabindex="0" aria-haspopup="true"><code>I</code></dfn> (U+0049)
7701: </td><td><dfn id="attr-ol-type-state-upper-roman" role="button" tabindex="0" aria-haspopup="true">upper-roman</dfn>
7702: </td><td>Uppercase roman numerals
7703: </td><td class="eg"><samp>I.</samp> </td><td class="eg"><samp>II.</samp> </td><td class="eg"><samp>III.</samp> </td><td class="eg">... </td><td class="eg"><samp>MMMCMXCIX.</samp> </td><td class="eg"><samp>I̅V̅.</samp> </td><td class="eg"><samp>I̅V̅I.</samp> </td><td class="eg">...
7704: </td></tr></tbody></table>
7705: <p>The <dfn id="dom-ol-reversed" role="button" tabindex="0" aria-haspopup="true"><code>reversed</code></dfn>,
7706: <dfn id="dom-ol-start" role="button" tabindex="0" aria-haspopup="true"><code>start</code></dfn>, and <dfn id="dom-ol-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL attributes must
7707: <a href="#reflect">reflect</a> the respective content attributes of the same
7708: name. The <code title="dom-ol-start"><a href="#dom-ol-start">start</a></code> IDL attribute has
7709: the same default as its content attribute.</p>
7710: <div class="example">
7711:
7712: <p>The following markup shows a list where the order matters, and
7713: where the <code><a href="#the-ol-element">ol</a></code> element is therefore appropriate. Compare
7714: this list to the equivalent list in the <code><a href="#the-ul-element">ul</a></code> section to
7715: see an example of the same items using the <code><a href="#the-ul-element">ul</a></code>
7716: element.</p>
7717:
7718: <pre><p>I have lived in the following countries (given in the order of when
7719: I first lived there):</p>
7720: <ol>
7721: <li>Switzerland
7722: <li>United Kingdom
7723: <li>United States
7724: <li>Norway
7725: </ol></pre>
7726:
7727: <p>Note how changing the order of the list changes the meaning of
7728: the document. In the following example, changing the relative order
7729: of the first two items has changed the birthplace of the
7730: author:</p>
7731:
7732: <pre><p>I have lived in the following countries (given in the order of when
7733: I first lived there):</p>
7734: <ol>
7735: <li>United Kingdom
7736: <li>Switzerland
7737: <li>United States
7738: <li>Norway
7739: </ol></pre>
7740:
7741: </div><h4 id="the-ul-element"><span class="secno">4.5.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>ul</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7742: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 7743: <dd>If the element's children include at least one <code><a href="#the-li-element">li</a></code> element: <a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7744: <dt>Contexts in which this element can be used:</dt>
7745: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7746: <dt>Content model:</dt>
7747: <dd>Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd>
7748: <dt>Content attributes:</dt>
7749: <dd><a href="#global-attributes">Global attributes</a></dd>
7750: <dt>DOM interface:</dt>
7751: <dd>
7752: <pre class="idl">interface <dfn id="htmlulistelement" role="button" tabindex="0" aria-haspopup="true">HTMLUListElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
7753: </dd>
7754: </dl><p>The <code><a href="#the-ul-element">ul</a></code> element <a href="#represents">represents</a> a list of
7755: items, where the order of the items is not important — that
7756: is, where changing the order would not materially change the meaning
7757: of the document.</p><p>The items of the list are the <code><a href="#the-li-element">li</a></code> element child nodes
7758: of the <code><a href="#the-ul-element">ul</a></code> element.</p><div class="example">
7759:
7760: <p>The following markup shows a list where the order does not
7761: matter, and where the <code><a href="#the-ul-element">ul</a></code> element is therefore
7762: appropriate. Compare this list to the equivalent list in the
7763: <code><a href="#the-ol-element">ol</a></code> section to see an example of the same items using
7764: the <code><a href="#the-ol-element">ol</a></code> element.</p>
7765:
7766: <pre><p>I have lived in the following countries:</p>
7767: <ul>
7768: <li>Norway
7769: <li>Switzerland
7770: <li>United Kingdom
7771: <li>United States
7772: </ul></pre>
7773:
7774: <p>Note that changing the order of the list does not change the
7775: meaning of the document. The items in the snippet above are given
7776: in alphabetical order, but in the snippet below they are given in
7777: order of the size of their current account balance in 2007, without
7778: changing the meaning of the document whatsoever:</p>
7779:
7780: <pre><p>I have lived in the following countries:</p>
7781: <ul>
7782: <li>Switzerland
7783: <li>Norway
7784: <li>United Kingdom
7785: <li>United States
7786: </ul></pre>
7787:
7788: </div><h4 id="the-li-element"><span class="secno">4.5.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>li</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7789: <dd>None.</dd>
7790: <dt>Contexts in which this element can be used:</dt>
7791: <dd>Inside <code><a href="#the-ol-element">ol</a></code> elements.</dd>
7792: <dd>Inside <code><a href="#the-ul-element">ul</a></code> elements.</dd>
7793: <dd>Inside <code><a href="#the-menu-element">menu</a></code> elements.</dd>
7794: <dt>Content model:</dt>
7795: <dd><a href="#flow-content">Flow content</a>.</dd>
7796: <dt>Content attributes:</dt>
7797: <dd><a href="#global-attributes">Global attributes</a></dd>
7798: <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>
7799: <dt>DOM interface:</dt>
7800: <dd>
7801: <pre class="idl">interface <dfn id="htmllielement" role="button" tabindex="0" aria-haspopup="true">HTMLLIElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
7802: attribute long <a href="#dom-li-value" title="dom-li-value">value</a>;
7803: };</pre>
7804: </dd>
7805: </dl><p>The <code><a href="#the-li-element">li</a></code> element <a href="#represents">represents</a> a list
7806: 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>,
7807: or <code><a href="#the-menu-element">menu</a></code> element, then the element is an item of the
7808: parent element's list, as defined for those elements. Otherwise, the
7809: list item has no defined list-related relationship to any other
7810: <code><a href="#the-li-element">li</a></code> element.</p><p>If the parent element is an <code><a href="#the-ol-element">ol</a></code> element, then the
7811: <code><a href="#the-li-element">li</a></code> element has an <dfn id="ordinal-value" role="button" tabindex="0" aria-haspopup="true">ordinal value</dfn>.</p><p>The <dfn id="attr-li-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn>
7812: attribute, if present, must be a <a href="#valid-integer">valid integer</a> giving
7813: the <a href="#ordinal-value">ordinal value</a> of the list item.</p>
7814: <p>The <dfn id="dom-li-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> IDL
7815: 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>
7816: <div class="example">
7817: <p>The following example, the top ten movies are listed (in reverse
7818: order). Note the way the list is given a title by using a
7819: <code><a href="#the-figure-element">figure</a></code> element and its <code><a href="#the-figcaption-element">figcaption</a></code>
7820: element.</p>
7821: <pre><figure>
7822: <figcaption>The top 10 movies of all time</figcaption>
7823: <ol>
7824: <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
7825: <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
7826: <li value="8"><cite>A Bug's Life</cite>, 1998</li>
7827: <li value="7"><cite>Toy Story</cite>, 1995</li>
7828: <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
7829: <li value="5"><cite>Cars</cite>, 2006</li>
7830: <li value="4"><cite>Toy Story 2</cite>, 1999</li>
7831: <li value="3"><cite>Finding Nemo</cite>, 2003</li>
7832: <li value="2"><cite>The Incredibles</cite>, 2004</li>
7833: <li value="1"><cite>Ratatouille</cite>, 2007</li>
7834: </ol>
7835: </figure></pre>
7836:
7837: <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
7838: <code><a href="#the-ol-element">ol</a></code> element:</p>
7839:
7840: <pre><figure>
7841: <figcaption>The top 10 movies of all time</figcaption>
7842: <ol reversed>
7843: <li><cite>Josie and the Pussycats</cite>, 2001</li>
7844: <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
7845: <li><cite>A Bug's Life</cite>, 1998</li>
7846: <li><cite>Toy Story</cite>, 1995</li>
7847: <li><cite>Monsters, Inc</cite>, 2001</li>
7848: <li><cite>Cars</cite>, 2006</li>
7849: <li><cite>Toy Story 2</cite>, 1999</li>
7850: <li><cite>Finding Nemo</cite>, 2003</li>
7851: <li><cite>The Incredibles</cite>, 2004</li>
7852: <li><cite>Ratatouille</cite>, 2007</li>
7853: </ol>
7854: </figure></pre>
7855: </div><p class="note">If the <code><a href="#the-li-element">li</a></code> element is the child of a
1.293 mike 7856: <code><a href="#the-menu-element">menu</a></code> element and itself has a child that defines a
1.1 mike 7857: <a href="#concept-command" title="concept-command">command</a>, then the
7858: <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
1.545 mike 7859: same way as the first such child element does.</p><h4 id="the-dl-element"><span class="secno">4.5.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>dl</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7860: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 7861: <dd>If the element's children include at least one name-value group: <a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 7862: <dt>Contexts in which this element can be used:</dt>
7863: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
7864: <dt>Content model:</dt>
7865: <dd>Zero or more groups each consisting of one or more
7866: <code><a href="#the-dt-element">dt</a></code> elements followed by one or more <code><a href="#the-dd-element">dd</a></code>
7867: elements.</dd>
7868: <dt>Content attributes:</dt>
7869: <dd><a href="#global-attributes">Global attributes</a></dd>
7870: <dt>DOM interface:</dt>
7871: <dd>
7872: <pre class="idl">interface <dfn id="htmldlistelement" role="button" tabindex="0" aria-haspopup="true">HTMLDListElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
7873: </dd>
7874: </dl><p>The <code><a href="#the-dl-element">dl</a></code> element <a href="#represents">represents</a> an
7875: association list consisting of zero or more name-value groups (a
7876: description list). Each group must consist of one or more names
7877: (<code><a href="#the-dt-element">dt</a></code> elements) followed by one or more values
7878: (<code><a href="#the-dd-element">dd</a></code> elements). Within a single <code><a href="#the-dl-element">dl</a></code> element,
7879: there should not be more than one <code><a href="#the-dt-element">dt</a></code> element for each
7880: name.</p><p>Name-value groups may be terms and definitions, metadata topics
7881: and values, questions and answers, or any other groups of name-value
7882: data.</p><p>The values within a group are alternatives; multiple paragraphs
7883: forming part of the same value must all be given within the same
7884: <code><a href="#the-dd-element">dd</a></code> element.</p><p>The order of the list of groups, and of the names and values
7885: within each group, may be significant.</p><div class="example">
7886: <p>In the following example, one entry ("Authors") is linked to two
7887: values ("John" and "Luke").</p>
7888: <pre><dl>
7889: <dt> Authors
7890: <dd> John
7891: <dd> Luke
7892: <dt> Editor
7893: <dd> Frank
7894: </dl></pre>
7895: </div><div class="example">
7896: <p>In the following example, one definition is linked to two
7897: terms.</p>
7898: <pre><dl>
7899: <dt lang="en-US"> <dfn>color</dfn> </dt>
7900: <dt lang="en-GB"> <dfn>colour</dfn> </dt>
7901: <dd> A sensation which (in humans) derives from the ability of
7902: the fine structure of the eye to distinguish three differently
7903: filtered analyses of a view. </dd>
7904: </dl></pre>
7905: </div><div class="example">
7906: <p>The following example illustrates the use of the <code><a href="#the-dl-element">dl</a></code>
7907: element to mark up metadata of sorts. At the end of the example,
7908: one group has two metadata labels ("Authors" and "Editors") and two
7909: values ("Robert Rothman" and "Daniel Jackson").</p>
7910: <pre><dl>
7911: <dt> Last modified time </dt>
7912: <dd> 2004-12-23T23:33Z </dd>
7913: <dt> Recommended update interval </dt>
7914: <dd> 60s </dd>
7915: <dt> Authors </dt>
7916: <dt> Editors </dt>
7917: <dd> Robert Rothman </dd>
7918: <dd> Daniel Jackson </dd>
7919: </dl></pre>
7920: </div><div class="example">
7921:
7922: <p>The following example shows the <code><a href="#the-dl-element">dl</a></code> element used to
7923: give a set of instructions. The order of the instructions here is
7924: important (in the other examples, the order of the blocks was not
7925: important).</p>
7926:
7927: <pre><p>Determine the victory points as follows (use the
7928: first matching case):</p>
7929: <dl>
7930: <dt> If you have exactly five gold coins </dt>
7931: <dd> You get five victory points </dd>
7932: <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
7933: <dd> You get two victory points </dd>
7934: <dt> If you have one or more silver coins </dt>
7935: <dd> You get one victory point </dd>
7936: <dt> Otherwise </dt>
7937: <dd> You get no victory points </dd>
7938: </dl></pre>
7939: </div><div class="example">
7940: <p>The following snippet shows a <code><a href="#the-dl-element">dl</a></code> element being used
7941: as a glossary. Note the use of <code><a href="#the-dfn-element">dfn</a></code> to indicate the
7942: word being defined.</p>
7943: <pre><dl>
7944: <dt><dfn>Apartment</dfn>, n.</dt>
7945: <dd>An execution context grouping one or more threads with one or
7946: more COM objects.</dd>
7947: <dt><dfn>Flat</dfn>, n.</dt>
7948: <dd>A deflated tire.</dd>
7949: <dt><dfn>Home</dfn>, n.</dt>
7950: <dd>The user's login directory.</dd>
7951: </dl></pre>
7952: </div><p class="note">The <code><a href="#the-dl-element">dl</a></code> element is inappropriate for
1.1 mike 7953: marking up dialogue. <a href="#conversations">Examples of how to
1.545 mike 7954: mark up dialogue</a> are shown below.</p><h4 id="the-dt-element"><span class="secno">4.5.9 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>dt</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7955: <dd>None.</dd>
7956: <dt>Contexts in which this element can be used:</dt>
7957: <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>
7958: <dt>Content model:</dt>
1.620 mike 7959: <dd><a href="#flow-content">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code>, <code><a href="#the-footer-element">footer</a></code>, <a href="#sectioning-content">sectioning content</a>, or <a href="#heading-content">heading content</a> descendants.</dd>
1.545 mike 7960: <dt>Content attributes:</dt>
7961: <dd><a href="#global-attributes">Global attributes</a></dd>
7962: <dt>DOM interface:</dt>
7963: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
7964: </dl><p>The <code><a href="#the-dt-element">dt</a></code> element <a href="#represents">represents</a> the term, or
7965: name, part of a term-description group in a description list
7966: (<code><a href="#the-dl-element">dl</a></code> element).</p><p class="note">The <code><a href="#the-dt-element">dt</a></code> element itself, when used in a
1.1 mike 7967: <code><a href="#the-dl-element">dl</a></code> element, does not indicate that its contents are a
7968: term being defined, but this can be indicated using the
1.545 mike 7969: <code><a href="#the-dfn-element">dfn</a></code> element.</p><div class="example">
7970:
7971: <p>This example shows a list of frequently asked questions (a FAQ)
7972: marked up using the <code><a href="#the-dt-element">dt</a></code> element for questions and the
7973: <code><a href="#the-dd-element">dd</a></code> element for answers.</p>
7974:
7975: <pre><article>
7976: <h1>FAQ</h1>
7977: <dl>
7978: <dt>What do we want?</dt>
7979: <dd>Our data.</dd>
7980: <dt>When do we want it?</dt>
7981: <dd>Now.</dd>
7982: <dt>Where is it?</dt>
7983: <dd>We are not sure.</dd>
7984: </dl>
7985: </article></pre>
7986:
7987: </div><h4 id="the-dd-element"><span class="secno">4.5.10 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>dd</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
7988: <dd>None.</dd>
7989: <dt>Contexts in which this element can be used:</dt>
7990: <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>
7991: <dt>Content model:</dt>
7992: <dd><a href="#flow-content">Flow content</a>.</dd>
7993: <dt>Content attributes:</dt>
7994: <dd><a href="#global-attributes">Global attributes</a></dd>
7995: <dt>DOM interface:</dt>
7996: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
7997: </dl><p>The <code><a href="#the-dd-element">dd</a></code> element <a href="#represents">represents</a> the
7998: description, definition, or value, part of a term-description group
7999: in a description list (<code><a href="#the-dl-element">dl</a></code> element).</p><div class="example">
8000:
8001: <p>A <code><a href="#the-dl-element">dl</a></code> can be used to define a vocabulary list, like
8002: in a dictionary. In the following example, each entry, given by a
8003: <code><a href="#the-dt-element">dt</a></code> with a <code><a href="#the-dfn-element">dfn</a></code>, has several
8004: <code><a href="#the-dd-element">dd</a></code>s, showing the various parts of the definition.</p>
8005:
8006:
8007: <pre><dl>
8008: <dt><dfn>happiness</dfn></dt>
8009: <dd class="pronunciation">/'hæ p. nes/</dd>
8010: <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
8011: <dd>The state of being happy.</dd>
8012: <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
8013: <dt><dfn>rejoice</dfn></dt>
8014: <dd class="pronunciation">/ri jois'/</dd>
8015: <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
8016: <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
8017: </dl></pre>
8018: </div><h4 id="the-figure-element"><span class="secno">4.5.11 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>figure</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8019: <dd><a href="#flow-content">Flow content</a>.</dd>
8020: <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
1.629 ! mike 8021: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8022: <dt>Contexts in which this element can be used:</dt>
8023: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
8024: <dt>Content model:</dt>
8025: <dd>Either: One <code><a href="#the-figcaption-element">figcaption</a></code> element followed by <a href="#flow-content">flow content</a>.</dd>
8026: <dd>Or: <a href="#flow-content">Flow content</a> followed by one <code><a href="#the-figcaption-element">figcaption</a></code> element.</dd>
8027: <dd>Or: <a href="#flow-content">Flow content</a>.</dd>
8028: <dt>Content attributes:</dt>
8029: <dd><a href="#global-attributes">Global attributes</a></dd>
8030: <dt>DOM interface:</dt>
8031: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8032: </dl><p>The <code><a href="#the-figure-element">figure</a></code> element <a href="#represents">represents</a> some
8033: <a href="#flow-content">flow content</a>, optionally with a caption, that is
8034: self-contained and is typically referenced as a single unit from the
8035: main flow of the document.</p><p>The element can thus be used to annotate illustrations, diagrams,
8036: photos, code listings, etc, that are referred to from the main
8037: content of the document, but that could, without affecting the flow
8038: of the document, be moved away from that primary content, e.g. to
8039: the side of the page, to dedicated pages, or to an appendix.</p><p>The <span class="impl">first</span> <code><a href="#the-figcaption-element">figcaption</a></code>
8040: element child of the element, if any, represents the caption of the
8041: <code><a href="#the-figure-element">figure</a></code> element's contents. If there is no child
8042: <code><a href="#the-figcaption-element">figcaption</a></code> element, then there is no caption.</p><div class="example">
8043:
8044: <p>This example shows the <code><a href="#the-figure-element">figure</a></code> element to mark up a
8045: code listing.</p>
8046:
8047: <pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
8048: API declaration.</p>
8049: <figure id="l4">
8050: <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
8051: <pre><code>interface PrimaryCore {
8052: boolean verifyDataLine();
8053: void sendData(in sequence&lt;byte> data);
8054: void initSelfDestruct();
8055: }</code></pre>
8056: </figure>
8057: <p>The API is designed to use UTF-8.</p></pre>
8058:
8059: </div><div class="example">
8060:
8061: <p>Here we see a <code><a href="#the-figure-element">figure</a></code> element to mark up a
8062: photo.</p>
8063:
8064: <pre><figure>
8065: <img src="bubbles-work.jpeg"
8066: alt="Bubbles, sitting in his office chair, works on his
8067: latest project intently.">
8068: <figcaption>Bubbles at work</figcaption>
8069: </figure></pre>
8070:
8071: </div><div class="example">
8072:
8073: <p>In this example, we see an image that is <em>not</em>
8074: a figure, as well as an image and a video that are.</p>
8075:
8076: <pre><h2>Malinko's comics</h2>
8077:
8078: <p>This case centered on some sort of "intellectual property"
8079: infringement related to a comic (see Exhibit A). The suit started
8080: after a trailer ending with these words:
8081:
8082: <blockquote>
8083: <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
8084: </blockquote>
8085:
8086: <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
8087: preemptive strike using snowballs. A complete copy of the trailer is
8088: included with Exhibit B.
8089:
8090: <figure>
8091: <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
8092: <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
8093: </figure>
8094:
8095: <figure>
8096: <video src="ex-b.mov"></video>
8097: <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
8098: </figure>
8099:
8100: <p>The case was resolved out of court.</pre>
8101:
8102: </div><div class="example">
8103:
8104: <p>Here, a part of a poem is marked up using
8105: <code><a href="#the-figure-element">figure</a></code>.</p>
8106:
8107: <pre><figure>
8108: <p>'Twas brillig, and the slithy toves<br>
8109: Did gyre and gimble in the wabe;<br>
8110: All mimsy were the borogoves,<br>
8111: And the mome raths outgrabe.</p>
8112: <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
8113: </figure></pre>
8114:
8115: </div><div class="example">
8116:
8117: <p>In this example, which could be part of a much larger work
8118: discussing a castle, the figure has three images in it.</p>
8119:
8120: <pre><figure>
8121: <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
8122: alt="The castle has one tower, and a tall wall around it.">
8123: <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
8124: alt="The castle now has two towers and two walls.">
8125: <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
8126: alt="The castle lies in ruins, the original tower all that remains in one piece.">
8127: <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
8128: </figure></pre>
8129:
8130: </div><h4 id="the-figcaption-element"><span class="secno">4.5.12 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>figcaption</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8131: <dd>None.</dd>
8132: <dt>Contexts in which this element can be used:</dt>
8133: <dd>As the first or last child of a <code><a href="#the-figure-element">figure</a></code> element.</dd>
8134: <dt>Content model:</dt>
8135: <dd><a href="#flow-content">Flow content</a>.</dd>
8136: <dt>Content attributes:</dt>
8137: <dd><a href="#global-attributes">Global attributes</a></dd>
8138: <dt>DOM interface:</dt>
8139: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8140: </dl><p>The <code><a href="#the-figcaption-element">figcaption</a></code> element <a href="#represents">represents</a> a
8141: caption or legend for the rest of the contents of the
8142: <code><a href="#the-figcaption-element">figcaption</a></code> element's parent <code><a href="#the-figure-element">figure</a></code>
8143: element<span class="impl">, if any</span>.</p><h4 id="the-div-element"><span class="secno">4.5.13 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>div</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8144: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 8145: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8146: <dt>Contexts in which this element can be used:</dt>
8147: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
8148: <dt>Content model:</dt>
8149: <dd><a href="#flow-content">Flow content</a>.</dd>
8150: <dt>Content attributes:</dt>
8151: <dd><a href="#global-attributes">Global attributes</a></dd>
8152: <dt>DOM interface:</dt>
8153: <dd>
8154: <pre class="idl">interface <dfn id="htmldivelement" role="button" tabindex="0" aria-haspopup="true">HTMLDivElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
8155: </dd>
8156: </dl><p>The <code><a href="#the-div-element">div</a></code> element has no special meaning at all. It
8157: <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
8158: common to a group of consecutive elements.</p><p class="note">Authors are strongly encouraged to view the
1.1 mike 8159: <code><a href="#the-div-element">div</a></code> element as an element of last resort, for when no
1.532 mike 8160: other element is suitable. Use of more appropriate elements instead
8161: of the <code><a href="#the-div-element">div</a></code> element leads to better accessibility for
1.545 mike 8162: readers and easier maintainability for authors.</p><div class="example">
8163:
8164: <p>For example, a blog post would be marked up using
8165: <code><a href="#the-article-element">article</a></code>, a chapter using <code><a href="#the-section-element">section</a></code>, a
8166: page's navigation aids using <code><a href="#the-nav-element">nav</a></code>, and a group of form
8167: controls using <code><a href="#the-fieldset-element">fieldset</a></code>.</p>
8168:
8169: <p>On the other hand, <code><a href="#the-div-element">div</a></code> elements can be useful for
8170: stylistic purposes or to wrap multiple paragraphs within a section
8171: that are all to be annotated in a similar way. In the following
8172: example, we see <code><a href="#the-div-element">div</a></code> elements used as a way to set the
8173: language of two paragraphs at once, instead of setting the language
8174: on the two paragraph elements separately:</p>
8175:
8176: <pre><article lang="en-US">
8177: <h1>My use of language and my cats</h1>
8178: <p>My cat's behavior hasn't changed much since her absence, except
8179: that she plays her new physique to the neighbors regularly, in an
8180: attempt to get pets.</p>
8181: <div lang="en-GB">
8182: <p>My other cat, coloured black and white, is a sweetie. He followed
8183: us to the pool today, walking down the pavement with us. Yesterday
8184: he apparently visited our neighbours. I wonder if he recognises that
8185: their flat is a mirror image of ours.</p>
8186: <p>Hm, I just noticed that in the last paragraph I used British
8187: English. But I'm supposed to write in American English. So I
8188: shouldn't say "pavement" or "flat" or "colour"...</p>
8189: </div>
8190: <p>I should say "sidewalk" and "apartment" and "color"!</p>
8191: </article></pre>
8192:
8193: </div><h3 id="text-level-semantics"><span class="secno">4.6 </span>Text-level semantics</h3><p>The
8194: <a href="#the-a-element">a</a>,
8195: <a href="#the-em-element">em</a>,
8196: <a href="#the-strong-element">strong</a>,
8197: <a href="#the-small-element">small</a>,
8198: <a href="#the-s-element">s</a>,
8199: <a href="#the-cite-element">cite</a>,
8200: <a href="#the-q-element">q</a>,
8201: <a href="#the-dfn-element">dfn</a>,
8202: <a href="#the-abbr-element">abbr</a>,
8203: <a href="#the-time-element">time</a>,
8204: <a href="#the-code-element">code</a>,
8205: <a href="#the-var-element">figure</a>,
8206: <a href="#the-samp-element">samp</a>,
8207: <a href="#the-kbd-element">kbd</a>,
8208: <a href="#the-sub-and-sup-elements">sub, sup</a>,
8209: <a href="#the-i-element">i</a>,
8210: <a href="#the-b-element">b</a>,
8211: <a href="#the-u-element">u</a>,
8212: <a href="#the-mark-element">mark</a>,
8213: <a href="#the-ruby-element">ruby</a>,
8214: <a href="#the-rt-element">rt</a>,
8215: <a href="#the-rp-element">rp</a>,
8216: <a href="#the-bdi-element">bdi</a>,
8217: <a href="#the-bdo-element">bdo</a>,
8218: <a href="#the-span-element">span</a>,
8219: <a href="#the-br-element">br</a>,
8220: and
8221: <a href="#the-wbr-element">wbr</a>
8222: elements.</p><h4 id="the-a-element"><span class="secno">4.6.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>a</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8223: <dd><a href="#flow-content">Flow content</a>.</dd>
8224: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: <a href="#phrasing-content">phrasing content</a>.</dd>
8225: <dd><a href="#interactive-content">Interactive content</a>.</dd>
1.629 ! mike 8226: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8227: <dt>Contexts in which this element can be used:</dt>
8228: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8229: <dd>Otherwise: where <a href="#flow-content">flow content</a> is expected.</dd>
8230: <dt>Content model:</dt>
8231: <dd><a href="#transparent">Transparent</a>, but there must be no <a href="#interactive-content">interactive content</a> descendant.</dd>
8232: <dt>Content attributes:</dt>
8233: <dd><a href="#global-attributes">Global attributes</a></dd>
8234: <dd><code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code></dd>
8235: <dd><code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">target</a></code></dd>
8236: <dd><code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code></dd>
8237: <dd><code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code></dd>
8238: <dd><code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code></dd>
8239: <dd><code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code></dd>
8240: <dt>DOM interface:</dt>
8241: <dd>
8242: <pre class="idl">interface <dfn id="htmlanchorelement" role="button" tabindex="0" aria-haspopup="true">HTMLAnchorElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
8243: stringifier attribute DOMString <a href="#dom-a-href" title="dom-a-href">href</a>;
8244: attribute DOMString <a href="#dom-a-target" title="dom-a-target">target</a>;
8245: attribute DOMString <a href="#dom-a-rel" title="dom-a-rel">rel</a>;
8246: readonly attribute <a href="#domtokenlist">DOMTokenList</a> <a href="#dom-a-rellist" title="dom-a-relList">relList</a>;
8247: attribute DOMString <a href="#dom-a-media" title="dom-a-media">media</a>;
8248: attribute DOMString <a href="#dom-a-hreflang" title="dom-a-hreflang">hreflang</a>;
8249: attribute DOMString <a href="#dom-a-type" title="dom-a-type">type</a>;
8250:
8251: attribute DOMString <a href="#dom-a-text" title="dom-a-text">text</a>;
8252:
8253: // <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>
8254: attribute DOMString <a href="#dom-a-protocol" title="dom-a-protocol">protocol</a>;
8255: attribute DOMString <a href="#dom-a-host" title="dom-a-host">host</a>;
8256: attribute DOMString <a href="#dom-a-hostname" title="dom-a-hostname">hostname</a>;
8257: attribute DOMString <a href="#dom-a-port" title="dom-a-port">port</a>;
8258: attribute DOMString <a href="#dom-a-pathname" title="dom-a-pathname">pathname</a>;
8259: attribute DOMString <a href="#dom-a-search" title="dom-a-search">search</a>;
8260: attribute DOMString <a href="#dom-a-hash" title="dom-a-hash">hash</a>;
8261: };</pre>
8262: </dd>
8263: </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
8264: <a href="#represents">represents</a> a <a href="#hyperlink">hyperlink</a> (a hypertext
8265: anchor).</p><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
8266: <a href="#represents">represents</a> a placeholder for where a link might
8267: otherwise have been placed, if it had been relevant.</p><p>The <code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">target</a></code>,
8268: <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
8269: if the <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute is
8270: not present.</p><div class="example">
8271: <p>If a site uses a consistent navigation toolbar on every page,
8272: then the link that would normally link to the page itself could be
8273: marked up using an <code><a href="#the-a-element">a</a></code> element:</p>
8274: <pre><nav>
8275: <ul>
8276: <li> <a href="/">Home</a> </li>
8277: <li> <a href="/news">News</a> </li>
8278: <li> <a>Examples</a> </li>
8279: <li> <a href="/legal">Legal</a> </li>
8280: </ul>
8281: </nav></pre>
8282: </div><dl class="domintro"><dt><var title="">a</var> . <code title="dom-a-text" id="dom-a-text"><a href="#dom-a-text">text</a></code></dt>
8283:
8284: <dd>
8285:
8286: <p>Same as <code><a href="#textcontent">textContent</a></code>.</p>
8287:
8288: </dd>
8289:
8290: </dl>
8291: <p>The IDL attributes
8292: <dfn id="dom-a-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn>,
8293: <dfn id="dom-a-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn>, <dfn id="dom-a-rel" role="button" tabindex="0" aria-haspopup="true"><code>rel</code></dfn>, <dfn id="dom-a-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>, <dfn id="dom-a-hreflang" role="button" tabindex="0" aria-haspopup="true"><code>hreflang</code></dfn>, and <dfn id="dom-a-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>, must
8294: <a href="#reflect">reflect</a> the respective content attributes of the same
8295: name.</p>
8296:
8297: <p>The IDL attribute <dfn id="dom-a-rellist" role="button" tabindex="0" aria-haspopup="true"><code>relList</code></dfn> must
8298: <a href="#reflect">reflect</a> the <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code>
8299: content attribute.</p>
8300:
8301: <p>The <code><a href="#the-a-element">a</a></code> element also supports the complement of
8302: <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-a-protocol" role="button" tabindex="0" aria-haspopup="true"><code>protocol</code></dfn>, <dfn id="dom-a-host" role="button" tabindex="0" aria-haspopup="true"><code>host</code></dfn>, <dfn id="dom-a-port" role="button" tabindex="0" aria-haspopup="true"><code>port</code></dfn>, <dfn id="dom-a-hostname" role="button" tabindex="0" aria-haspopup="true"><code>hostname</code></dfn>, <dfn id="dom-a-pathname" role="button" tabindex="0" aria-haspopup="true"><code>pathname</code></dfn>, <dfn id="dom-a-search" role="button" tabindex="0" aria-haspopup="true"><code>search</code></dfn>, and <dfn id="dom-a-hash" role="button" tabindex="0" aria-haspopup="true"><code>hash</code></dfn>. These must follow the
8303: rules given for <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, with
8304: the <a href="#concept-uda-input" title="concept-uda-input">input</a> being the result of
8305: <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
8306: element, if there is such an attribute and resolving it is
8307: successful, or the empty string otherwise; and the <a href="#concept-uda-setter" title="concept-uda-setter">common setter action</a> being the
8308: same as setting the element's <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute to the new output
8309: value.</p>
8310: <div class="example">
8311:
8312: <p>The <code><a href="#the-a-element">a</a></code> element may be wrapped around entire
8313: paragraphs, lists, tables, and so forth, even entire sections, so
8314: long as there is no interactive content within (e.g. buttons or
8315: other links). This example shows how this can be used to make an
8316: entire advertising block into a link:</p>
8317:
8318: <pre><aside class="advertising">
8319: <h1>Advertising</h1>
8320: <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
8321: <section>
8322: <h1>Mellblomatic 9000!</h1>
8323: <p>Turn all your widgets into mellbloms!</p>
8324: <p>Only $9.99 plus shipping and handling.</p>
8325: </section>
8326: </a>
8327: <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
8328: <section>
8329: <h1>The Mellblom Browser</h1>
8330: <p>Web browsing at the speed of light.</p>
8331: <p>No other browser goes faster!</p>
8332: </section>
8333: </a>
8334: </aside></pre>
8335:
8336: </div><h4 id="the-em-element"><span class="secno">4.6.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>em</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8337: <dd><a href="#flow-content">Flow content</a>.</dd>
8338: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8339: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8340: <dt>Contexts in which this element can be used:</dt>
8341: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8342: <dt>Content model:</dt>
8343: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8344: <dt>Content attributes:</dt>
8345: <dd><a href="#global-attributes">Global attributes</a></dd>
8346: <dt>DOM interface:</dt>
8347: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8348: </dl><p>The <code><a href="#the-em-element">em</a></code> element <a href="#represents">represents</a> stress
8349: emphasis of its contents.</p><p>The level of emphasis that a particular piece of content has is
8350: given by its number of ancestor <code><a href="#the-em-element">em</a></code> elements.</p><p>The placement of emphasis changes the meaning of the sentence.
8351: The element thus forms an integral part of the content. The precise
8352: way in which emphasis is used in this way depends on the
8353: language.</p><div class="example">
8354:
8355: <p>These examples show how changing the emphasis changes the
8356: meaning. First, a general statement of fact, with no emphasis:</p>
8357:
8358: <pre><p>Cats are cute animals.</p></pre>
8359:
8360: <p>By emphasizing the first word, the statement implies that the
8361: kind of animal under discussion is in question (maybe someone is
8362: asserting that dogs are cute):</p>
8363:
8364: <pre><p><em>Cats</em> are cute animals.</p></pre>
8365:
8366: <p>Moving the emphasis to the verb, one highlights that the truth
8367: of the entire sentence is in question (maybe someone is saying cats
8368: are not cute):</p>
8369:
8370: <pre><p>Cats <em>are</em> cute animals.</p></pre>
8371:
8372: <p>By moving it to the adjective, the exact nature of the cats
8373: is reasserted (maybe someone suggested cats were <em>mean</em>
8374: animals):</p>
8375:
8376: <pre><p>Cats are <em>cute</em> animals.</p></pre>
8377:
8378: <p>Similarly, if someone asserted that cats were vegetables,
8379: someone correcting this might emphasize the last word:</p>
8380:
8381: <pre><p>Cats are cute <em>animals</em>.</p></pre>
8382:
8383: <p>By emphasizing the entire sentence, it becomes clear that the
8384: speaker is fighting hard to get the point across. This kind of
8385: emphasis also typically affects the punctuation, hence the
8386: exclamation mark here.</p>
8387:
8388: <pre><p><em>Cats are cute animals!</em></p></pre>
8389:
8390: <p>Anger mixed with emphasizing the cuteness could lead to markup
8391: such as:</p>
8392:
8393: <pre><p><em>Cats are <em>cute</em> animals!</em></p></pre>
8394:
8395: </div><div class="note">
8396:
8397: <p>The <code><a href="#the-em-element">em</a></code> element isn't a generic "italics"
8398: element. Sometimes, text is intended to stand out from the rest of
8399: the paragraph, as if it was in a different mood or voice. For this,
8400: the <code><a href="#the-i-element">i</a></code> element is more appropriate.</p>
8401:
8402: <p>The <code><a href="#the-em-element">em</a></code> element also isn't intended to convey
8403: importance; for that purpose, the <code><a href="#the-strong-element">strong</a></code> element is
8404: more appropriate.</p>
8405:
8406:
8407: </div><h4 id="the-strong-element"><span class="secno">4.6.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>strong</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8408: <dd><a href="#flow-content">Flow content</a>.</dd>
8409: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8410: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8411: <dt>Contexts in which this element can be used:</dt>
8412: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8413: <dt>Content model:</dt>
8414: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8415: <dt>Content attributes:</dt>
8416: <dd><a href="#global-attributes">Global attributes</a></dd>
8417: <dt>DOM interface:</dt>
8418: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8419: </dl><p>The <code><a href="#the-strong-element">strong</a></code> element <a href="#represents">represents</a> strong
8420: importance for its contents.</p><p>The relative level of importance of a piece of content is given
8421: by its number of ancestor <code><a href="#the-strong-element">strong</a></code> elements; each
8422: <code><a href="#the-strong-element">strong</a></code> element increases the importance of its
8423: contents.</p><p>Changing the importance of a piece of text with the
8424: <code><a href="#the-strong-element">strong</a></code> element does not change the meaning of the
8425: sentence.</p><div class="example">
8426: <p>Here is an example of a warning notice in a game, with the
8427: various parts marked up according to how important they are:</p>
8428:
8429: <pre><p><strong>Warning.</strong> This dungeon is dangerous.
8430: <strong>Avoid the ducks.</strong> Take any gold you find.
8431: <strong><strong>Do not take any of the diamonds</strong>,
8432: they are explosive and <strong>will destroy anything within
8433: ten meters.</strong></strong> You have been warned.</p></pre>
8434: </div><h4 id="the-small-element"><span class="secno">4.6.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>small</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8435: <dd><a href="#flow-content">Flow content</a>.</dd>
8436: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8437: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8438: <dt>Contexts in which this element can be used:</dt>
8439: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8440: <dt>Content model:</dt>
8441: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8442: <dt>Content attributes:</dt>
8443: <dd><a href="#global-attributes">Global attributes</a></dd>
8444: <dt>DOM interface:</dt>
8445: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8446: </dl><p>The <code><a href="#the-small-element">small</a></code> element <a href="#represents">represents</a> side
8447: comments such as small print.</p><p class="note">Small print typically features disclaimers, caveats,
1.1 mike 8448: legal restrictions, or copyrights. Small print is also sometimes
8449: used for attribution, or for satisfying licensing requirements.</p><p class="note">The <code><a href="#the-small-element">small</a></code> element does not
8450: "de-emphasize" or lower the importance of text emphasized by the
8451: <code><a href="#the-em-element">em</a></code> element or marked as important with the
8452: <code><a href="#the-strong-element">strong</a></code> element. To mark text as not emphasized or
8453: important, simply do not mark it up with the <code><a href="#the-em-element">em</a></code> or
1.545 mike 8454: <code><a href="#the-strong-element">strong</a></code> elements respectively.</p><p>The <code><a href="#the-small-element">small</a></code> element should not be used for extended
8455: spans of text, such as multiple paragraphs, lists, or sections of
8456: text. It is only intended for short runs of text. The text of a page
8457: listing terms of use, for instance, would not be a suitable
8458: candidate for the <code><a href="#the-small-element">small</a></code> element: in such a case, the
8459: text is not a side comment, it is the main content of the page.</p><div class="example">
8460:
8461: <p>In this example, the <code><a href="#the-small-element">small</a></code> element is used to
8462: indicate that value-added tax is not included in a price of a hotel
8463: room:</p>
8464:
8465: <pre class="example"><dl>
8466: <dt>Single room
8467: <dd>199 € <small>breakfast included, VAT not included</small>
8468: <dt>Double room
8469: <dd>239 € <small>breakfast included, VAT not included</small>
8470: </dl></pre>
8471:
8472: </div><div class="example">
8473:
8474: <p>In this second example, the <code><a href="#the-small-element">small</a></code> element is used
8475: for a side comment in an article.</p>
8476:
8477: <pre><p>Example Corp today announced record profits for the
8478: second quarter <small>(Full Disclosure: Foo News is a subsidiary of
8479: Example Corp)</small>, leading to speculation about a third quarter
8480: merger with Demo Group.</p></pre>
8481:
8482: <p>This is distinct from a sidebar, which might be multiple
8483: paragraphs long and is removed from the main flow of text. In the
8484: following example, we see a sidebar from the same article. This
8485: sidebar also has small print, indicating the source of the
8486: information in the sidebar.</p>
8487:
8488: <pre><aside>
8489: <h1>Example Corp</h1>
8490: <p>This company mostly creates small software and Web
8491: sites.</p>
8492: <p>The Example Corp company mission is "To provide entertainment
8493: and news on a sample basis".</p>
8494: <p><small>Information obtained from <a
8495: href="http://example.com/about.html">example.com</a> home
8496: page.</small></p>
8497: </aside></pre>
8498:
8499: </div><div class="example">
8500:
8501: <p>In this last example, the <code><a href="#the-small-element">small</a></code> element is marked
8502: as being <em>important</em> small print.</p>
8503:
8504: <pre><p><strong><small>Continued use of this service will result in a kiss.</small></strong></p></pre>
8505:
8506: </div><h4 id="the-s-element"><span class="secno">4.6.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>s</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8507: <dd><a href="#flow-content">Flow content</a>.</dd>
8508: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8509: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8510: <dt>Contexts in which this element can be used:</dt>
8511: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8512: <dt>Content model:</dt>
8513: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8514: <dt>Content attributes:</dt>
8515: <dd><a href="#global-attributes">Global attributes</a></dd>
8516: <dt>DOM interface:</dt>
8517: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8518: </dl><p>The <code><a href="#the-s-element">s</a></code> element <a href="#represents">represents</a> contents that
8519: are no longer accurate or no longer relevant.</p><p class="note">The <code><a href="#the-s-element">s</a></code> element is not appropriate when
1.96 mike 8520: indicating document edits; to mark a span of text as having been
1.545 mike 8521: removed from a document, use the <code><a href="#the-del-element">del</a></code> element.</p><div class="example">
8522:
8523: <p>In this example a recommended retail price has been marked as no
8524: longer relevant as the product in question has a new sale
8525: price.</p>
8526:
8527: <pre><p>Buy our Iced Tea and Lemonade!</p>
8528: <p><s>Recommended retail price: $3.99 per bottle</s></p>
8529: <p><strong>Now selling for just $2.99 a bottle!</strong></p></pre>
8530:
8531: </div><h4 id="the-cite-element"><span class="secno">4.6.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>cite</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8532: <dd><a href="#flow-content">Flow content</a>.</dd>
8533: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8534: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8535: <dt>Contexts in which this element can be used:</dt>
8536: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8537: <dt>Content model:</dt>
8538: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8539: <dt>Content attributes:</dt>
8540: <dd><a href="#global-attributes">Global attributes</a></dd>
8541: <dt>DOM interface:</dt>
8542: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8543: </dl><p>The <code><a href="#the-cite-element">cite</a></code> element <a href="#represents">represents</a> the title
8544: of a work (e.g.
8545: a book,
8546: a paper,
8547: an essay,
8548: a poem,
8549: a score,
8550: a song,
8551: a script,
8552: a film,
8553: a TV show,
8554: a game,
8555: a sculpture,
8556: a painting,
8557: a theatre production,
8558: a play,
8559: an opera,
8560: a musical,
8561: an exhibition,
8562: a legal case report,
8563: etc). This can be a work that is being quoted or
8564: referenced in detail (i.e. a citation), or it can just be a work
8565: that is mentioned in passing.</p><p>A person's name is not the title of a work — even if people
8566: call that person a piece of work — and the element must
8567: therefore not be used to mark up people's names. (In some cases, the
8568: <code><a href="#the-b-element">b</a></code> element might be appropriate for names; e.g. in a
8569: gossip article where the names of famous people are keywords
8570: rendered with a different style to draw attention to them. In other
8571: cases, if an element is <em>really</em> needed, the
8572: <code><a href="#the-span-element">span</a></code> element can be used.)</p><div class="example">
8573:
8574: <p>This next example shows a typical use of the <code><a href="#the-cite-element">cite</a></code>
8575: element:</p>
8576:
8577: <pre><p>My favorite book is <cite>The Reality Dysfunction</cite> by
8578: Peter F. Hamilton. My favorite comic is <cite>Pearls Before
8579: Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
8580: Samba</cite> by the Cannonball Adderley Sextet.</p></pre>
8581:
8582: </div><div class="example">
8583:
8584: <p>This is correct usage:</p>
8585:
8586: <pre><p>According to the Wikipedia article <cite>HTML</cite>, as it
8587: stood in mid-February 2008, leaving attribute values unquoted is
8588: unsafe. This is obviously an over-simplification.</p></pre>
8589:
8590: <p>The following, however, is incorrect usage, as the
8591: <code><a href="#the-cite-element">cite</a></code> element here is containing far more than the
8592: title of the work:</p>
8593:
8594: <pre class="bad"><!-- do not copy this example, it is an example of bad usage! -->
8595: <p>According to <cite>the Wikipedia article on HTML</cite>, as it
8596: stood in mid-February 2008, leaving attribute values unquoted is
8597: unsafe. This is obviously an over-simplification.</p></pre>
8598:
8599: </div><div class="example">
8600:
8601: <p>The <code><a href="#the-cite-element">cite</a></code> element is obviously a key part of any
8602: citation in a bibliography, but it is only used to mark the
8603: title:</p>
8604:
8605: <pre><p><cite>Universal Declaration of Human Rights</cite>, United Nations,
8606: December 1948. Adopted by General Assembly resolution 217 A (III).</p></pre>
8607:
8608: </div><p class="note">A <em>citation</em> is not a <em>quote</em> (for
8609: which the <code><a href="#the-q-element">q</a></code> element is appropriate).</p><div class="example">
8610:
8611: <p>This is incorrect usage, because <code><a href="#the-cite-element">cite</a></code> is not for
8612: quotes:</p>
8613:
1.574 mike 8614: <pre class="bad"><p><cite>This is wrong!</cite>, said Ian.</p></pre>
1.545 mike 8615:
8616: <p>This is also incorrect usage, because a person is not a
8617: work:</p>
8618:
1.574 mike 8619: <pre class="bad"><p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p></pre>
1.545 mike 8620:
8621: <p>The correct usage does not use a <code><a href="#the-cite-element">cite</a></code> element:</p>
8622:
8623: <pre><p><q>This is correct</q>, said Ian.</p></pre>
8624:
8625: <p>As mentioned above, the <code><a href="#the-b-element">b</a></code> element might be relevant
8626: for marking names as being keywords in certain kinds of
8627: documents:</p>
8628:
8629: <pre><p>And then <b>Ian</b> said <q>this might be right, in a
8630: gossip column, maybe!</q>.</p></pre>
8631:
8632: </div><h4 id="the-q-element"><span class="secno">4.6.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>q</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8633: <dd><a href="#flow-content">Flow content</a>.</dd>
8634: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8635: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8636: <dt>Contexts in which this element can be used:</dt>
8637: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8638: <dt>Content model:</dt>
8639: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8640: <dt>Content attributes:</dt>
8641: <dd><a href="#global-attributes">Global attributes</a></dd>
8642: <dd><code title="attr-q-cite"><a href="#attr-q-cite">cite</a></code></dd>
8643: <dt>DOM interface:</dt>
8644: <dd>Uses <code><a href="#htmlquoteelement">HTMLQuoteElement</a></code>.</dd>
8645: </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
8646: source.</p><p>Quotation punctuation (such as quotation marks) that is quoting
8647: the contents of the element must not appear immediately before,
8648: after, or inside <code><a href="#the-q-element">q</a></code> elements; they will be inserted into
8649: the rendering by the user agent.</p><p>Content inside a <code><a href="#the-q-element">q</a></code> element must be quoted from
8650: another source, whose address, if it has one, may be cited in the
8651: <dfn id="attr-q-cite" role="button" tabindex="0" aria-haspopup="true"><code>cite</code></dfn> attribute. The
8652: source may be fictional, as when quoting characters in a novel or
8653: screenplay.</p><p>If the <code title="attr-q-cite"><a href="#attr-q-cite">cite</a></code> attribute is
8654: present, it must be a <a href="#valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
8655: spaces</a>. <span class="impl">To obtain the corresponding
8656: 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
8657: agents should allow users to follow such citation links.</span></p><p>The <code><a href="#the-q-element">q</a></code> element must not be used in place of quotation
8658: marks that do not represent quotes; for example, it is inappropriate
8659: to use the <code><a href="#the-q-element">q</a></code> element for marking up sarcastic
8660: statements.</p><p>The use of <code><a href="#the-q-element">q</a></code> elements to mark up quotations is
8661: entirely optional; using explicit quotation punctuation without
8662: <code><a href="#the-q-element">q</a></code> elements is just as correct.</p><div class="example">
8663:
8664: <p>Here is a simple example of the use of the <code><a href="#the-q-element">q</a></code>
8665: element:</p>
8666:
8667: <pre><p>The man said <q>Things that are impossible just take
8668: longer</q>. I disagreed with him.</p></pre>
8669:
8670: </div><div class="example">
8671:
8672: <p>Here is an example with both an explicit citation link in the
8673: <code><a href="#the-q-element">q</a></code> element, and an explicit citation outside:</p>
8674:
8675: <pre><p>The W3C page <cite>About W3C</cite> says the W3C's
8676: mission is <q cite="http://www.w3.org/Consortium/">To lead the
8677: World Wide Web to its full potential by developing protocols and
8678: guidelines that ensure long-term growth for the Web</q>. I
8679: disagree with this mission.</p></pre>
8680:
8681: </div><div class="example">
8682:
8683: <p>In the following example, the quotation itself contains a
8684: quotation:</p>
8685:
8686: <pre><p>In <cite>Example One</cite>, he writes <q>The man
8687: said <q>Things that are impossible just take longer</q>. I
8688: disagreed with him</q>. Well, I disagree even more!</p></pre>
8689:
8690: </div><div class="example">
8691:
8692: <p>In the following example, quotation marks are used instead of
8693: the <code><a href="#the-q-element">q</a></code> element:</p>
8694:
8695: <pre><p>His best argument was ❝I disagree❞, which
8696: I thought was laughable.</p></pre>
8697:
8698: </div><div class="example">
8699:
8700: <p>In the following example, there is no quote — the
8701: quotation marks are used to name a word. Use of the <code><a href="#the-q-element">q</a></code>
8702: element in this case would be inappropriate.</p>
8703:
8704: <pre><p>The word "ineffable" could have been used to describe the disaster
8705: resulting from the campaign's mismanagement.</p></pre>
8706:
8707: </div><h4 id="the-dfn-element"><span class="secno">4.6.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>dfn</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8708: <dd><a href="#flow-content">Flow content</a>.</dd>
8709: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8710: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8711: <dt>Contexts in which this element can be used:</dt>
8712: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8713: <dt>Content model:</dt>
8714: <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>
8715: <dt>Content attributes:</dt>
8716: <dd><a href="#global-attributes">Global attributes</a></dd>
8717: <dd>Also, the <code title="attr-dfn-title"><a href="#attr-dfn-title">title</a></code> attribute has special semantics on this element.</dd>
8718: <dt>DOM interface:</dt>
8719: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8720: </dl><p>The <code><a href="#the-dfn-element">dfn</a></code> element <a href="#represents">represents</a> the defining
8721: instance of a term. The <a href="#paragraph" title="paragraph">paragraph</a>,
8722: <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
8723: ancestor of the <code><a href="#the-dfn-element">dfn</a></code> element must also contain the
8724: definition(s) for the <a href="#defining-term" title="defining term">term</a> given
8725: by the <code><a href="#the-dfn-element">dfn</a></code> element.</p><p><dfn id="defining-term" role="button" tabindex="0" aria-haspopup="true">Defining term</dfn>: If the <code><a href="#the-dfn-element">dfn</a></code> element has a
8726: <dfn id="attr-dfn-title" role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn> attribute, then
8727: the exact value of that attribute is the term being defined.
8728: Otherwise, if it contains exactly one element child node and no
8729: child <a href="#text-node" title="text node">text nodes</a>, and that child
8730: 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
8731: of <em>that</em> attribute is the term being defined. Otherwise, it
8732: is the exact <code><a href="#textcontent">textContent</a></code> of the <code><a href="#the-dfn-element">dfn</a></code>
8733: element that gives the term being defined.</p><p>If the <code title="attr-dfn-title"><a href="#attr-dfn-title">title</a></code> attribute of the
8734: <code><a href="#the-dfn-element">dfn</a></code> element is present, then it must contain only the
8735: term being defined.</p><p class="note">The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute
8736: of ancestor elements does not affect <code><a href="#the-dfn-element">dfn</a></code> elements.</p><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>
8737: element represents an instance of the term defined by the
8738: <code><a href="#the-dfn-element">dfn</a></code> element.</p><div class="example">
8739:
8740: <p>In the following fragment, the term "Garage Door Opener" is
8741: first defined in the first paragraph, then used in the second. In
8742: both cases, its abbreviation is what is actually displayed.</p>
8743:
8744: <pre><p>The <strong><dfn><abbr title="Garage Door Opener">GDO</abbr></dfn></strong>
8745: is a device that allows off-world teams to open the iris.</p>
8746: <!-- ... later in the document: -->
8747: <p>Teal'c activated his <strong><abbr title="Garage Door Opener">GDO</abbr></strong>
8748: and so Hammond ordered the iris to be opened.</p></pre>
8749:
8750: <p>With the addition of an <code><a href="#the-a-element">a</a></code> element, the reference
8751: can be made explicit:</p>
8752:
8753: <pre><p>The <dfn <strong>id=gdo</strong>><abbr title="Garage Door Opener">GDO</abbr></dfn>
8754: is a device that allows off-world teams to open the iris.</p>
8755: <!-- ... later in the document: -->
8756: <p>Teal'c activated his <strong><a href=#gdo></strong><abbr title="Garage Door Opener">GDO</abbr><strong></a></strong>
8757: and so Hammond ordered the iris to be opened.</p></pre>
8758:
8759: </div><h4 id="the-abbr-element"><span class="secno">4.6.9 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>abbr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8760: <dd><a href="#flow-content">Flow content</a>.</dd>
8761: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8762: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8763: <dt>Contexts in which this element can be used:</dt>
8764: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8765: <dt>Content model:</dt>
8766: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
8767: <dt>Content attributes:</dt>
8768: <dd><a href="#global-attributes">Global attributes</a></dd>
8769: <dd>Also, the <code title="attr-abbr-title"><a href="#attr-abbr-title">title</a></code> attribute has special semantics on this element.</dd>
8770: <dt>DOM interface:</dt>
8771: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
8772: </dl><p>The <code><a href="#the-abbr-element">abbr</a></code> element <a href="#represents">represents</a> an
8773: abbreviation or acronym, optionally with its expansion. The <dfn id="attr-abbr-title" role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn> attribute may be
8774: used to provide an expansion of the abbreviation. The attribute, if
8775: specified, must contain an expansion of the abbreviation, and
8776: nothing else.</p><div class="example">
8777: <p>The paragraph below contains an abbreviation marked up with the
8778: <code><a href="#the-abbr-element">abbr</a></code> element. This paragraph <a href="#defining-term" title="defining
8779: term">defines the term</a> "Web Hypertext Application Technology
8780: Working Group".</p>
8781: <pre><p>The <dfn id=whatwg><abbr
8782: title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
8783: is a loose unofficial collaboration of Web browser manufacturers and
8784: interested parties who wish to develop new technologies designed to
8785: allow authors to write and deploy Applications over the World Wide
8786: Web.</p></pre>
8787: <p>An alternative way to write this would be:</p>
8788: <pre><p>The <dfn id=whatwg>Web Hypertext Application Technology
8789: Working Group</dfn> (<abbr
8790: title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
8791: is a loose unofficial collaboration of Web browser manufacturers and
8792: interested parties who wish to develop new technologies designed to
8793: allow authors to write and deploy Applications over the World Wide
8794: Web.</p></pre>
8795: </div><div class="example">
8796: <p>This paragraph has two abbreviations. Notice how only one is
8797: defined; the other, with no expansion associated with it, does not
8798: use the <code><a href="#the-abbr-element">abbr</a></code> element.</p>
8799: <pre><p>The
8800: <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
8801: started working on HTML5 in 2004.</p></pre>
8802: </div><div class="example">
8803: <p>This paragraph links an abbreviation to its definition.</p>
8804: <pre><p>The <a href="#whatwg"><abbr
8805: title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
8806: community does not have much representation from Asia.</p></pre>
8807: </div><div class="example">
8808: <p>This paragraph marks up an abbreviation without giving an
8809: expansion, possibly as a hook to apply styles for abbreviations
8810: (e.g. smallcaps).</p>
8811: <pre><p>Philip` and Dashiva both denied that they were going to
8812: get the issue counts from past revisions of the specification to
8813: backfill the <abbr>WHATWG</abbr> issue graph.</p></pre>
8814: </div><p>If an abbreviation is pluralized, the expansion's grammatical
8815: number (plural vs singular) must match the grammatical number of the
8816: contents of the element.</p><div class="example">
8817:
8818: <p>Here the plural is outside the element, so the expansion is in
8819: the singular:</p>
8820:
8821: <pre><p>Two <abbr title="Working Group">WG</abbr>s worked on
8822: this specification: the <abbr>WHATWG</abbr> and the
8823: <abbr>HTMLWG</abbr>.</p></pre>
8824:
8825: <p>Here the plural is inside the element, so the expansion is in
8826: the plural:</p>
8827:
8828: <pre><p>Two <abbr title="Working Groups">WGs</abbr> worked on
8829: this specification: the <abbr>WHATWG</abbr> and the
8830: <abbr>HTMLWG</abbr>.</p></pre>
8831:
8832: </div><p>Abbreviations do not have to be marked up using this element. It
8833: is expected to be useful in the following cases:</p><ul><li>Abbreviations for which the author wants to give expansions,
8834: 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
8835: including the expansion inline (e.g. in parentheses).</li>
8836:
8837: <li>Abbreviations that are likely to be unfamiliar to the
8838: document's readers, for which authors are encouraged to either mark
8839: 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
8840: inline in the text the first time the abbreviation is used.</li>
8841:
8842: <li>Abbreviations whose presence needs to be semantically
8843: annotated, e.g. so that they can be identified from a style sheet
8844: and given specific styles, for which the <code><a href="#the-abbr-element">abbr</a></code> element
8845: can be used without a <code title="attr-title"><a href="#the-title-attribute">title</a></code>
8846: attribute.</li>
8847:
8848: </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
8849: cause other <code><a href="#the-abbr-element">abbr</a></code> elements in the same document with the
8850: same contents but without a <code title="attr-title"><a href="#the-title-attribute">title</a></code>
8851: attribute to behave as if they had the same expansion. Every
8852: <code><a href="#the-abbr-element">abbr</a></code> element is independent.</p><h4 id="the-time-element"><span class="secno">4.6.10 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>time</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
8853: <dd><a href="#flow-content">Flow content</a>.</dd>
8854: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 8855: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 8856: <dt>Contexts in which this element can be used:</dt>
8857: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
8858: <dt>Content model:</dt>
8859: <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>
8860: <dt>Content attributes:</dt>
8861: <dd><a href="#global-attributes">Global attributes</a></dd>
8862: <dd><code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code></dd>
8863: <dd><code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code></dd>
8864: <dt>DOM interface:</dt>
8865: <dd>
8866: <pre class="idl">interface <dfn id="htmltimeelement" role="button" tabindex="0" aria-haspopup="true">HTMLTimeElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
8867: attribute DOMString <a href="#dom-time-datetime" title="dom-time-datetime">dateTime</a>;
8868: attribute boolean <a href="#dom-time-pubdate" title="dom-time-pubDate">pubDate</a>;
8869: readonly attribute <span>Date</span>? <a href="#dom-time-valueasdate" title="dom-time-valueAsDate">valueAsDate</a>;
8870: };</pre>
8871: </dd>
8872: </dl><p>The <code><a href="#the-time-element">time</a></code> element <a href="#represents">represents</a> either a
8873: time on a 24 hour clock, or a precise date in the proleptic
8874: Gregorian calendar, optionally with a time and a time-zone
8875: offset. <a href="#refsGREGORIAN">[GREGORIAN]</a></p><p>This element is intended as a way to encode modern dates and
8876: times in a machine-readable way so that, for example, user agents
8877: can offer to add birthday reminders or scheduled events to the
8878: user's calendar.</p><div class="note">
8879:
8880: <p>The <code><a href="#the-time-element">time</a></code> element is not intended for encoding times
8881: for which a precise date or time cannot be established. For
8882: example, it would be inappropriate for encoding times like "one
8883: millisecond after the big bang", "the early part of the Jurassic
8884: period", or "a winter around 250 BCE".</p>
8885:
8886: <p>For dates before the introduction of the Gregorian calendar,
8887: authors are encouraged to not use the <code><a href="#the-time-element">time</a></code> element, or
8888: else to be very careful about converting dates and times from the
8889: period to the Gregorian calendar. This is complicated by the manner
8890: in which the Gregorian calendar was phased in, which occurred at
8891: different times in different countries, ranging from partway
8892: through the 16th century all the way to early in the 20th.</p>
8893:
8894: </div><p>The <dfn id="attr-time-pubdate" role="button" tabindex="0" aria-haspopup="true"><code>pubdate</code></dfn>
8895: attribute is a <a href="#boolean-attribute">boolean attribute</a>. If specified, it
8896: indicates that the date and time given by the element is the
8897: publication date and time of the nearest ancestor
8898: <code><a href="#the-article-element">article</a></code> element, or, if the element has no ancestor
8899: <code><a href="#the-article-element">article</a></code> element, of the document as a whole. If the
8900: element has a <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code>
8901: attribute specified, then the element <dfn id="needs-a-date" role="button" tabindex="0" aria-haspopup="true">needs a date</dfn>. For
8902: each <code><a href="#the-article-element">article</a></code> element, there must be no more than one
8903: <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
8904: ancestor is that <code><a href="#the-article-element">article</a></code> element. Furthermore, for each
8905: <code><a href="#document">Document</a></code>, there must be no more than one
8906: <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
8907: have an ancestor <code><a href="#the-article-element">article</a></code> element.</p><p>The <dfn id="attr-time-datetime" role="button" tabindex="0" aria-haspopup="true"><code>datetime</code></dfn>
8908: attribute, if present, gives the date or time being
8909: specified. Otherwise, the date or time is given by the element's
8910: contents.</p><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,
8911: then the attribute's value must be a <a href="#valid-date-string-with-optional-time">valid date string with
8912: optional time</a>.</p><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,
8913: 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
8914: date string in content with optional time</a>.</p><p>If the element does not <i title="needs a date"><a href="#needs-a-date">need a date</a></i>,
8915: and the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
8916: is present, then the attribute's value must be a <a href="#valid-date-or-time-string">valid date or
8917: time string</a>.</p><p>If the element does not <i title="needs a date"><a href="#needs-a-date">need a date</a></i>,
8918: but the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> attribute
8919: is not present, then the element's <code><a href="#textcontent">textContent</a></code> must be
8920: a <a href="#valid-date-or-time-string-in-content">valid date or time string in content</a>.</p><p>The date, if any, must be expressed using the Gregorian
8921: calendar.</p><div class="example">
8922:
8923: <p>The <code><a href="#the-time-element">time</a></code> element can be used to encode dates, for
8924: example in Microformats. The following shows a hypothetical way of
8925: encoding an event using a variant on hCalendar that uses the
8926: <code><a href="#the-time-element">time</a></code> element:</p>
8927:
8928: <pre><div class="vevent">
8929: <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
8930: <span class="summary">Web 2.0 Conference</span>:
8931: <time class="dtstart" datetime="2007-10-05">October 5</time> -
8932: <time class="dtend" datetime="2007-10-20">19</time>,
8933: at the <span class="location">Argent Hotel, San Francisco, CA</span>
8934: </div></pre>
8935:
8936: <p>(The end date is encoded as one day after the last date of the
8937: event because in the iCalendar format, end dates are
8938: <em>exclusive</em>, not inclusive.)</p>
8939:
8940: </div><div class="example">
8941:
8942: <p>The <code><a href="#the-time-element">time</a></code> element is not necessary for encoding
8943: dates or times. In the following snippet, the time is encoded using
8944: <code><a href="#the-time-element">time</a></code>, so that it can be restyled (e.g. using XBL2) to
8945: match local conventions, while the year is not marked up at all,
8946: since marking it up would not be particularly useful, and doing so
8947: is thus not allowed.</p>
8948:
8949: <pre><p>I usually have a snack at <time>16:00</time>.</p>
8950: <p>I've liked model trains since at least 1983.</p></pre>
8951:
8952: <p>Using a styling technology that supports restyling times, the
8953: first paragraph from the above snippet could be rendered as follows:</p>
8954:
8955: <blockquote><p>I usually have a snack at 4pm.</p></blockquote>
8956:
8957: <p>Or it could be rendered as follows:</p>
8958:
8959: <blockquote><p>I usually have a snack at 16h00.</p></blockquote>
8960:
8961: </div>
8962: <p>The <dfn id="dom-time-datetime" role="button" tabindex="0" aria-haspopup="true"><code>dateTime</code></dfn> IDL
8963: attribute must <a href="#reflect">reflect</a> the <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code> content attribute.</p>
8964:
8965: <p>The <dfn id="dom-time-pubdate" role="button" tabindex="0" aria-haspopup="true"><code>pubDate</code></dfn> IDL
8966: attribute must <a href="#reflect">reflect</a> the <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code> content attribute.</p>
8967: <dl class="domintro"><dt><var title="">time</var> . <code title="dom-time-valueAsDate" id="dom-time-valueasdate"><a href="#dom-time-valueasdate">valueAsDate</a></code></dt>
8968:
8969: <dd>
8970:
8971: <p>Returns a <code>Date</code> object representing the specified date and time.</p>
8972:
8973: </dd>
8974:
8975: </dl><div class="example">
8976:
8977: <p>In the following snippet:</p>
8978:
8979: <pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
8980:
8981: <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
8982: have the value 1,158,969,600,000ms.</p>
8983:
8984: </div><div class="example">
8985:
8986: <p>In the following snippet:</p>
8987:
8988: <pre><p>Many people get up at <time>08:00</time>.</p></pre>
8989:
8990: <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
8991: have the value 28,800,000ms.</p>
8992:
8993: </div><div class="example">
8994:
8995: <p>In this example, an article's publication date is marked up
8996: using <code><a href="#the-time-element">time</a></code>:</p>
8997:
8998: <pre><article>
8999: <h1>Small tasks</h1>
9000: <footer>Published <time pubdate>2009-08-30</time>.</footer>
9001: <p>I put a bike bell on his bike.</p>
9002: </article></pre>
9003:
9004: <p>Here is another way that could be marked up. In this example,
9005: legacy user agents would say "today", while newer user agents would
9006: render the time in a locale-specific manner based on the value of
9007: the attribute.</p>
9008:
9009: <pre><article>
9010: <h1>Small tasks</h1>
9011: <footer>Published <time pubdate datetime="2009-08-30">today</time>.</footer>
9012: <p>I put a bike bell on his bike.</p>
9013: </article></pre>
9014:
9015: <p>Here is the same thing but with the time included only. Because
9016: the element is empty, legacy user agents will not show anything
9017: useful; user agents that implement this specification, on the other
9018: hand, would show the date and time in a locale-specific manner.</p>
9019:
9020: <pre><article>
9021: <h1>Small tasks</h1>
9022: <footer>Published <time pubdate datetime="2009-08-30T07:13Z"></time>.</footer>
9023: <p>I put a bike bell on his bike.</p>
9024: </article></pre>
9025:
9026: </div><h4 id="the-code-element"><span class="secno">4.6.11 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>code</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9027: <dd><a href="#flow-content">Flow content</a>.</dd>
9028: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9029: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9030: <dt>Contexts in which this element can be used:</dt>
9031: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9032: <dt>Content model:</dt>
9033: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9034: <dt>Content attributes:</dt>
9035: <dd><a href="#global-attributes">Global attributes</a></dd>
9036: <dt>DOM interface:</dt>
9037: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9038: </dl><p>The <code><a href="#the-code-element">code</a></code> element <a href="#represents">represents</a> a fragment
9039: of computer code. This could be an XML element name, a filename, a
9040: computer program, or any other string that a computer would
9041: recognize.</p><p>Although there is no formal way to indicate the language of
9042: computer code being marked up, authors who wish to mark
9043: <code><a href="#the-code-element">code</a></code> elements with the language used, e.g. so that
9044: syntax highlighting scripts can use the right rules, may do so by
9045: adding a class prefixed with "<code title="">language-</code>" to
9046: the element.</p><div class="example">
9047:
9048: <p>The following example shows how the element can be used in a
9049: paragraph to mark up element names and computer code, including
9050: punctuation.</p>
9051:
9052: <pre><p>The <code>code</code> element represents a fragment of computer
9053: code.</p>
9054:
9055: <p>When you call the <code>activate()</code> method on the
9056: <code>robotSnowman</code> object, the eyes glow.</p>
9057:
9058: <p>The example below uses the <code>begin</code> keyword to indicate
9059: the start of a statement block. It is paired with an <code>end</code>
9060: keyword, which is followed by the <code>.</code> punctuation character
9061: (full stop) to indicate the end of the program.</p></pre>
9062:
9063: </div><div class="example">
9064:
9065: <p>The following example shows how a block of code could be marked
9066: up using the <code><a href="#the-pre-element">pre</a></code> and <code><a href="#the-code-element">code</a></code> elements.</p>
9067:
9068: <pre><pre><code class="language-pascal">var i: Integer;
9069: begin
9070: i := 1;
9071: end.</code></pre></pre>
9072:
9073: <p>A class is used in that example to indicate the language
9074: used.</p>
9075:
9076: </div><p class="note">See the <code><a href="#the-pre-element">pre</a></code> element for more details.</p><h4 id="the-var-element"><span class="secno">4.6.12 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>var</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9077: <dd><a href="#flow-content">Flow content</a>.</dd>
9078: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9079: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9080: <dt>Contexts in which this element can be used:</dt>
9081: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9082: <dt>Content model:</dt>
9083: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9084: <dt>Content attributes:</dt>
9085: <dd><a href="#global-attributes">Global attributes</a></dd>
9086: <dt>DOM interface:</dt>
9087: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9088: </dl><p>The <code><a href="#the-var-element">var</a></code> element <a href="#represents">represents</a> a variable.
9089: This could be an actual variable in a mathematical expression or
9090: programming context, an identifier representing a constant, a
9091: function parameter, or just be a term used as a placeholder in
9092: prose.</p><div class="example">
9093: <p>In the paragraph below, the letter "n" is being used as a
9094: variable in prose:</p>
9095: <pre><p>If there are <var>n</var> pipes leading to the ice
9096: cream factory then I expect at <em>least</em> <var>n</var>
9097: flavors of ice cream to be available for purchase!</p></pre>
9098: </div><p>For mathematics, in particular for anything beyond the simplest
9099: of expressions, MathML is more appropriate. However, the
9100: <code><a href="#the-var-element">var</a></code> element can still be used to refer to specific
9101: variables that are then mentioned in MathML expressions.</p><div class="example">
9102:
9103: <p>In this example, an equation is shown, with a legend that
9104: references the variables in the equation. The expression itself is
9105: marked up with MathML, but the variables are mentioned in the
9106: figure's legend using <code><a href="#the-var-element">var</a></code>.</p>
9107:
9108: <pre><figure>
9109: <math>
9110: <mi>a</mi>
9111: <mo>=</mo>
9112: <msqrt>
9113: <msup><mi>b</mi><mn>2</mn></msup>
9114: <mi>+</mi>
9115: <msup><mi>c</mi><mn>2</mn></msup>
9116: </msqrt>
9117: </math>
9118: <figcaption>
9119: Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
9120: a triangle with sides <var>b</var> and <var>c</var>
9121: </figcaption>
9122: </figure></pre>
9123:
9124: </div><div class="example">
9125:
9126: <p>Here, the equation describing mass-energy equivalence is used in
9127: a sentence, and the <code><a href="#the-var-element">var</a></code> element is used to mark the
9128: variables and constants in that equation:</p>
9129:
9130: <pre><p>Then he turned to the blackboard and picked up the chalk. After a few moment's
9131: thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
9132: looked pleased.</p></pre>
9133:
9134: </div><h4 id="the-samp-element"><span class="secno">4.6.13 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>samp</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9135: <dd><a href="#flow-content">Flow content</a>.</dd>
9136: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9137: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9138: <dt>Contexts in which this element can be used:</dt>
9139: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9140: <dt>Content model:</dt>
9141: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9142: <dt>Content attributes:</dt>
9143: <dd><a href="#global-attributes">Global attributes</a></dd>
9144: <dt>DOM interface:</dt>
9145: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9146: </dl><p>The <code><a href="#the-samp-element">samp</a></code> element <a href="#represents">represents</a> (sample)
9147: output from a program or computing system.</p><p class="note">See the <code><a href="#the-pre-element">pre</a></code> and <code><a href="#the-kbd-element">kbd</a></code>
9148: elements for more details.</p><div class="example">
9149: <p>This example shows the <code><a href="#the-samp-element">samp</a></code> element being used
9150: inline:</p>
9151: <pre><p>The computer said <samp>Too much cheese in tray
9152: two</samp> but I didn't know what that meant.</p></pre>
9153:
9154: <p>This second example shows a block of sample output. Nested
9155: <code><a href="#the-samp-element">samp</a></code> and <code><a href="#the-kbd-element">kbd</a></code> elements allow for the
9156: styling of specific elements of the sample output using a
9157: style sheet.</p>
9158:
9159: <pre><pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
9160: Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
9161: 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
9162:
9163: <span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre></pre>
9164: </div><h4 id="the-kbd-element"><span class="secno">4.6.14 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>kbd</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9165: <dd><a href="#flow-content">Flow content</a>.</dd>
9166: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9167: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9168: <dt>Contexts in which this element can be used:</dt>
9169: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9170: <dt>Content model:</dt>
9171: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9172: <dt>Content attributes:</dt>
9173: <dd><a href="#global-attributes">Global attributes</a></dd>
9174: <dt>DOM interface:</dt>
9175: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9176: </dl><p>The <code><a href="#the-kbd-element">kbd</a></code> element <a href="#represents">represents</a> user input
9177: (typically keyboard input, although it may also be used to represent
9178: other input, such as voice commands).</p><p>When the <code><a href="#the-kbd-element">kbd</a></code> element is nested inside a
9179: <code><a href="#the-samp-element">samp</a></code> element, it represents the input as it was echoed
9180: by the system.</p><p>When the <code><a href="#the-kbd-element">kbd</a></code> element <em>contains</em> a
9181: <code><a href="#the-samp-element">samp</a></code> element, it represents input based on system
9182: output, for example invoking a menu item.</p><p>When the <code><a href="#the-kbd-element">kbd</a></code> element is nested inside another
9183: <code><a href="#the-kbd-element">kbd</a></code> element, it represents an actual key or other
9184: single unit of input as appropriate for the input mechanism.</p><div class="example">
9185: <p>Here the <code><a href="#the-kbd-element">kbd</a></code> element is used to indicate keys to press:</p>
9186: <pre><p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p></pre>
9187:
9188: <p>In this second example, the user is told to pick a particular
9189: menu item. The outer <code><a href="#the-kbd-element">kbd</a></code> element marks up a block of
9190: input, with the inner <code><a href="#the-kbd-element">kbd</a></code> elements representing each
9191: individual step of the input, and the <code><a href="#the-samp-element">samp</a></code> elements
9192: inside them indicating that the steps are input based on something
9193: being displayed by the system, in this case menu labels:</p>
9194:
9195: <pre><p>To make George eat an apple, select
9196: <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
9197: </p></pre>
9198:
9199: <p>Such precision isn't necessary; the following is equally fine:</p>
9200:
9201: <pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre>
9202:
9203: </div><h4 id="the-sub-and-sup-elements"><span class="secno">4.6.15 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>sub</code></dfn> and <dfn role="button" tabindex="0" aria-haspopup="true"><code>sup</code></dfn> elements</h4><dl class="element"><dt>Categories</dt>
9204: <dd><a href="#flow-content">Flow content</a>.</dd>
9205: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9206: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9207: <dt>Contexts in which this element can be used:</dt>
9208: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9209: <dt>Content model:</dt>
9210: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9211: <dt>Content attributes:</dt>
9212: <dd><a href="#global-attributes">Global attributes</a></dd>
9213: <dt>DOM interface:</dt>
9214: <dd>Use <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9215: </dl><p>The <code><a href="#the-sub-and-sup-elements">sup</a></code> element <a href="#represents">represents</a> a
9216: superscript and the <code><a href="#the-sub-and-sup-elements">sub</a></code> element <a href="#represents">represents</a>
9217: a subscript.</p><p>These elements must be used only to mark up typographical
9218: conventions with specific meanings, not for typographical
9219: presentation for presentation's sake. For example, it would be
9220: 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
9221: to be used in the name of the LaTeX document preparation system. In
9222: general, authors should use these elements only if the
9223: <em>absence</em> of those elements would change the meaning of the
9224: content.</p><p>In certain languages, superscripts are part of the typographical
9225: conventions for some abbreviations.</p><div class="example">
9226: <pre><p>The most beautiful women are
9227: <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
9228: <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p></pre>
9229: </div><p>The <code><a href="#the-sub-and-sup-elements">sub</a></code> element can be used inside a
9230: <code><a href="#the-var-element">var</a></code> element, for variables that have subscripts.</p><div class="example">
9231:
9232: <p>Here, the <code><a href="#the-sub-and-sup-elements">sub</a></code> element is used to represents the
9233: subscript that identifies the variable in a family of
9234: variables:</p>
9235:
9236: <pre><p>The coordinate of the <var>i</var>th point is
9237: (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
9238: For example, the 10th point has coordinate
9239: (<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p></pre>
9240: </div><p>Mathematical expressions often use subscripts and superscripts.
9241: Authors are encouraged to use MathML for marking up mathematics, but
9242: 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
9243: detailed mathematical markup is not desired. <a href="#refsMATHML">[MATHML]</a></p><div class="example">
9244: <pre><var>E</var>=<var>m</var><var>c</var><sup>2</sup></pre>
9245: <pre>f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup></pre>
9246: </div><h4 id="the-i-element"><span class="secno">4.6.16 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>i</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9247: <dd><a href="#flow-content">Flow content</a>.</dd>
9248: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9249: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9250: <dt>Contexts in which this element can be used:</dt>
9251: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9252: <dt>Content model:</dt>
9253: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9254: <dt>Content attributes:</dt>
9255: <dd><a href="#global-attributes">Global attributes</a></dd>
9256: <dt>DOM interface:</dt>
9257: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9258: </dl><p>The <code><a href="#the-i-element">i</a></code> element <a href="#represents">represents</a> a span of text
9259: in an alternate voice or mood, or otherwise offset from the normal
9260: prose in a manner indicating a different quality of text, such as a
9261: taxonomic designation, a technical term, an idiomatic phrase from
9262: another language, a thought, or a ship name in Western texts.</p><p>Terms in languages different from the main text should be
9263: annotated with <code title="attr-lang"><a href="#attr-lang">lang</a></code> attributes (or,
9264: in XML, <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code>
9265: attributes in the <span>XML namespace</span></a>).</p><div class="example">
9266: <p>The examples below show uses of the <code><a href="#the-i-element">i</a></code> element:</p>
9267: <pre><p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
9268: <p>The term <i>prose content</i> is defined above.</p>
9269: <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p></pre>
9270: <p>In the following example, a dream sequence is marked up using
9271: <code><a href="#the-i-element">i</a></code> elements.</p>
9272: <pre><p>Raymond tried to sleep.</p>
9273: <p><i>The ship sailed away on Thursday</i>, he
9274: dreamt. <i>The ship had many people aboard, including a beautiful
9275: princess called Carey. He watched her, day-in, day-out, hoping she
9276: would notice him, but she never did.</i></p>
9277: <p><i>Finally one night he picked up the courage to speak with
9278: her—</i></p>
9279: <p>Raymond woke with a start as the fire alarm rang out.</p></pre>
9280: </div><p>Authors can use the <code title="attr-class"><a href="#classes">class</a></code>
9281: attribute on the <code><a href="#the-i-element">i</a></code> element to identify why the element
9282: is being used, so that if the style of a particular use (e.g. dream
9283: sequences as opposed to taxonomic terms) is to be changed at a later
9284: date, the author doesn't have to go through the entire document (or
9285: series of related documents) annotating each use.</p><p>Authors are encouraged to consider whether other elements might
9286: be more applicable than the <code><a href="#the-i-element">i</a></code> element, for instance the
9287: <code><a href="#the-em-element">em</a></code> element for marking up stress emphasis, or the
9288: <code><a href="#the-dfn-element">dfn</a></code> element to mark up the defining instance of a
9289: term.</p><p class="note">Style sheets can be used to format <code><a href="#the-i-element">i</a></code>
1.544 mike 9290: elements, just like any other element can be restyled. Thus, it is
9291: not the case that content in <code><a href="#the-i-element">i</a></code> elements will
1.545 mike 9292: necessarily be italicized.</p><h4 id="the-b-element"><span class="secno">4.6.17 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>b</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9293: <dd><a href="#flow-content">Flow content</a>.</dd>
9294: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9295: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9296: <dt>Contexts in which this element can be used:</dt>
9297: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9298: <dt>Content model:</dt>
9299: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9300: <dt>Content attributes:</dt>
9301: <dd><a href="#global-attributes">Global attributes</a></dd>
9302: <dt>DOM interface:</dt>
9303: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9304: </dl><p>The <code><a href="#the-b-element">b</a></code> element <a href="#represents">represents</a> a span of text
9305: to which attention is being drawn for utilitarian purposes without
9306: conveying any extra importance and with no implication of an
9307: alternate voice or mood, such as key words in a document abstract,
9308: product names in a review, actionable words in interactive
9309: text-driven software, or an article lede.</p><div class="example">
9310: <p>The following example shows a use of the <code><a href="#the-b-element">b</a></code> element
9311: to highlight key words without marking them up as important:</p>
9312: <pre><p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p></pre>
9313: </div><div class="example">
9314: <p>In the following example, objects in a text adventure are
9315: highlighted as being special by use of the <code><a href="#the-b-element">b</a></code>
9316: element.</p>
9317: <pre><p>You enter a small room. Your <b>sword</b> glows
9318: brighter. A <b>rat</b> scurries past the corner wall.</p></pre>
9319: </div><div class="example">
9320: <p>Another case where the <code><a href="#the-b-element">b</a></code> element is appropriate is
9321: in marking up the lede (or lead) sentence or paragraph. The
9322: following example shows how a <a href="http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">BBC
9323: article about kittens adopting a rabbit as their own</a> could be
9324: marked up:</p>
9325: <pre><article>
9326: <h2>Kittens 'adopted' by pet rabbit</h2>
9327: <p><b class="lede">Six abandoned kittens have found an
9328: unexpected new mother figure — a pet rabbit.</b></p>
9329: <p>Veterinary nurse Melanie Humble took the three-week-old
9330: kittens to her Aberdeen home.</p>
9331: <i>[...]</i></pre>
9332: </div><p>As with the <code><a href="#the-i-element">i</a></code> element, authors can use the <code title="attr-class"><a href="#classes">class</a></code> attribute on the <code><a href="#the-b-element">b</a></code>
9333: element to identify why the element is being used, so that if the
9334: style of a particular use is to be changed at a later date, the
9335: author doesn't have to go through annotating each use.</p><p>The <code><a href="#the-b-element">b</a></code> element should be used as a last resort when
9336: no other element is more appropriate. In particular, headings should
9337: 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
9338: should use the <code><a href="#the-em-element">em</a></code> element, importance should be denoted
9339: with the <code><a href="#the-strong-element">strong</a></code> element, and text marked or highlighted
9340: should use the <code><a href="#the-mark-element">mark</a></code> element.</p><div class="example">
9341: <p>The following would be <em>incorrect</em> usage:</p>
9342: <pre class="bad"><p><b>WARNING!</b> Do not frob the barbinator!</p></pre>
9343: <p>In the previous example, the correct element to use would have
9344: been <code><a href="#the-strong-element">strong</a></code>, not <code><a href="#the-b-element">b</a></code>.</p>
9345: </div><p class="note">Style sheets can be used to format <code><a href="#the-b-element">b</a></code>
1.1 mike 9346: elements, just like any other element can be restyled. Thus, it is
9347: not the case that content in <code><a href="#the-b-element">b</a></code> elements will
1.545 mike 9348: necessarily be boldened.</p><h4 id="the-u-element"><span class="secno">4.6.18 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>u</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9349: <dd><a href="#flow-content">Flow content</a>.</dd>
9350: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9351: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9352: <dt>Contexts in which this element can be used:</dt>
9353: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9354: <dt>Content model:</dt>
9355: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9356: <dt>Content attributes:</dt>
9357: <dd><a href="#global-attributes">Global attributes</a></dd>
9358: <dt>DOM interface:</dt>
9359: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9360: </dl><p>The <code><a href="#the-u-element">u</a></code> element <a href="#represents">represents</a> a span of text
9361: with an unarticulated, though explicitly rendered, non-textual
9362: annotation, such as labeling the text as being a proper name in
9363: Chinese text (a Chinese proper name mark), or labeling the text as
9364: being misspelt.</p><p>In most cases, another element is likely to be more appropriate:
9365: for marking stress emphasis, the <code><a href="#the-em-element">em</a></code> element should be
9366: used; for marking key words or phrases either the <code><a href="#the-b-element">b</a></code>
9367: element or the <code><a href="#the-mark-element">mark</a></code> element should be used, depending
9368: on the context; for marking book titles, the <code><a href="#the-cite-element">cite</a></code>
9369: element should be used; for labeling text with explicit textual
9370: annotations, the <code><a href="#the-ruby-element">ruby</a></code> element should be used; for
9371: labeling ship names in Western texts, the <code><a href="#the-i-element">i</a></code> element
9372: should be used.</p><p class="note">The default rendering of the <code><a href="#the-u-element">u</a></code> element
1.253 mike 9373: in visual presentations clashes with the conventional rendering of
9374: hyperlinks (underlining). Authors are encouraged to avoid using the
9375: <code><a href="#the-u-element">u</a></code> element where it could be confused for a
1.545 mike 9376: hyperlink.</p><h4 id="the-mark-element"><span class="secno">4.6.19 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>mark</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9377: <dd><a href="#flow-content">Flow content</a>.</dd>
9378: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9379: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9380: <dt>Contexts in which this element can be used:</dt>
9381: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9382: <dt>Content model:</dt>
9383: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9384: <dt>Content attributes:</dt>
9385: <dd><a href="#global-attributes">Global attributes</a></dd>
9386: <dt>DOM interface:</dt>
9387: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9388: </dl><p>The <code><a href="#the-mark-element">mark</a></code> element <a href="#represents">represents</a> a run of
9389: text in one document marked or highlighted for reference purposes,
9390: due to its relevance in another context. When used in a quotation or
9391: other block of text referred to from the prose, it indicates a
9392: highlight that was not originally present but which has been added
9393: to bring the reader's attention to a part of the text that might not
9394: have been considered important by the original author when the block
9395: was originally written, but which is now under previously unexpected
9396: scrutiny. When used in the main prose of a document, it indicates a
9397: part of the document that has been highlighted due to its likely
9398: relevance to the user's current activity.</p><div class="example">
9399: <p>This example shows how the <code><a href="#the-mark-element">mark</a></code> element can be used
9400: to bring attention to a particular part of a quotation:</p>
9401: <pre><p lang="en-US">Consider the following quote:</p>
9402: <blockquote lang="en-GB">
9403: <p>Look around and you will find, no-one's really
9404: <mark>colour</mark> blind.</p>
9405: </blockquote>
9406: <p lang="en-US">As we can tell from the <em>spelling</em> of the word,
9407: the person writing this quote is clearly not American.</p></pre>
9408: <p>(If the goal was to mark the element as misspelt, however, the
9409: <code><a href="#the-u-element">u</a></code> element, possibly with a class, would be more
9410: appropriate.)</p>
9411: </div><div class="example">
9412:
9413: <p>Another example of the <code><a href="#the-mark-element">mark</a></code> element is highlighting
9414: parts of a document that are matching some search string. If
9415: someone looked at a document, and the server knew that the user was
9416: searching for the word "kitten", then the server might return the
9417: document with one paragraph modified as follows:</p>
9418:
9419: <pre><p>I also have some <mark>kitten</mark>s who are visiting me
9420: these days. They're really cute. I think they like my garden! Maybe I
9421: should adopt a <mark>kitten</mark>.</p></pre>
9422:
9423: </div><div class="example">
9424:
9425: <p>In the following snippet, a paragraph of text refers to a
9426: specific part of a code fragment.</p>
9427:
9428: <pre><p>The highlighted part below is where the error lies:</p>
9429: <pre><code>var i: Integer;
9430: begin
9431: i := <mark>1.1</mark>;
9432: end.</code></pre></pre>
9433:
9434: <p>This is separate from <em>syntax highlighting</em>, for which
9435: <code><a href="#the-span-element">span</a></code> is more appropriate. Combining both, one would
9436: get:</p>
9437:
9438: <pre><p>The highlighted part below is where the error lies:</p>
9439: <pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
9440: <span class=keyword>begin</span>
9441: <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
9442: <span class=keyword>end</span>.</code></pre></pre>
9443:
9444: </div><div class="example">
9445:
9446: <p>This is another example showing the use of <code><a href="#the-mark-element">mark</a></code> to
9447: highlight a part of quoted text that was originally not
9448: emphasized. In this example, common typographic conventions have
9449: led the author to explicitly style <code><a href="#the-mark-element">mark</a></code> elements in
9450: quotes to render in italics.</p>
9451:
9452: <pre><article>
9453: <style scoped>
9454: blockquote mark, q mark {
9455: font: inherit; font-style: italic;
9456: text-decoration: none;
9457: background: transparent; color: inherit;
9458: }
9459: .bubble em {
9460: font: inherit; font-size: larger;
9461: text-decoration: underline;
9462: }
9463: </style>
9464: <h1>She knew</h1>
9465: <p>Did you notice the subtle joke in the joke on panel 4?</p>
9466: <blockquote>
9467: <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
9468: on some level I realized it was a known-plaintext attack.</mark> But I
9469: couldn't admit it until I saw for myself.</p>
9470: </blockquote>
9471: <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
9472: explains everything neatly.</p>
9473: </article></pre>
9474:
9475: <p>Note, incidentally, the distinction between the <code><a href="#the-em-element">em</a></code>
9476: element in this example, which is part of the original text being
9477: quoted, and the <code><a href="#the-mark-element">mark</a></code> element, which is highlighting a
9478: part for comment.</p>
9479:
9480: </div><div class="example">
9481:
9482: <p>The following example shows the difference between denoting the
9483: <em>importance</em> of a span of text (<code><a href="#the-strong-element">strong</a></code>) as
9484: opposed to denoting the <em>relevance</em> of a span of text
9485: (<code><a href="#the-mark-element">mark</a></code>). It is an extract from a textbook, where the
9486: extract has had the parts relevant to the exam highlighted. The
9487: safety warnings, important though they may be, are apparently not
9488: relevant to the exam.</p>
9489:
9490: <pre><h3>Wormhole Physics Introduction</h3>
9491:
9492: <p><mark>A wormhole in normal conditions can be held open for a
9493: maximum of just under 39 minutes.</mark> Conditions that can increase
9494: the time include a powerful energy source coupled to one or both of
9495: the gates connecting the wormhole, and a large gravity well (such as a
9496: black hole).</p>
9497:
9498: <p><mark>Momentum is preserved across the wormhole. Electromagnetic
9499: radiation can travel in both directions through a wormhole,
9500: but matter cannot.</mark></p>
9501:
9502: <p>When a wormhole is created, a vortex normally forms.
9503: <strong>Warning: The vortex caused by the wormhole opening will
9504: annihilate anything in its path.</strong> Vortexes can be avoided when
9505: using sufficiently advanced dialing technology.</p>
9506:
9507: <p><mark>An obstruction in a gate will prevent it from accepting a
9508: wormhole connection.</mark></p></pre>
9509:
9510: </div><h4 id="the-ruby-element"><span class="secno">4.6.20 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>ruby</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9511: <dd><a href="#flow-content">Flow content</a>.</dd>
9512: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9513: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9514: <dt>Contexts in which this element can be used:</dt>
9515: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9516: <dt>Content model:</dt>
9517: <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>
9518: <dt>Content attributes:</dt>
9519: <dd><a href="#global-attributes">Global attributes</a></dd>
9520: <dt>DOM interface:</dt>
9521: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9522: </dl><p>The <code><a href="#the-ruby-element">ruby</a></code> element allows one or more spans of
9523: phrasing content to be marked with ruby annotations. Ruby
9524: annotations are short runs of text presented alongside base text,
9525: primarily used in East Asian typography as a guide for
9526: pronunciation or to include other annotations. In Japanese, this
9527: form of typography is also known as <i>furigana</i>.</p><p>A <code><a href="#the-ruby-element">ruby</a></code> element <a href="#represents">represents</a> the spans of
9528: phrasing content it contains, ignoring all the child <code><a href="#the-rt-element">rt</a></code>
9529: and <code><a href="#the-rp-element">rp</a></code> elements and their descendants. Those spans of
9530: phrasing content have associated annotations created using the
9531: <code><a href="#the-rt-element">rt</a></code> element.</p><div class="example">
9532:
9533:
9534:
9535:
9536: <p>In this example, each ideograph in the Japanese text <span lang="ja" title="">漢字</span> is annotated with its
9537: reading in hiragana.</p>
9538:
9539: <pre lang="ja">...
9540: <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
9541: ...</pre>
9542:
9543: <p>This might be rendered as:</p>
9544:
9545: <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height="78" src="http://dev.w3.org/html5/spec/images/sample-ruby-ja.png" width="171"></p>
9546:
9547: </div><div class="example">
9548:
9549:
9550:
9551: <p>In this example, each ideograph in the traditional Chinese text
9552: <span lang="zh-TW" title="">漢字</span> is annotated
9553: with its bopomofo reading.</p>
9554:
9555: <pre lang="zh-TW"><ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby></pre>
9556:
9557: <p>This might be rendered as:</p>
9558:
9559: <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height="100" src="http://dev.w3.org/html5/spec/images/sample-ruby-bopomofo.png" width="78"></p>
9560:
9561: </div><div class="example">
9562:
9563:
9564:
9565: <p>In this example, each ideograph in the simplified Chinese text
9566: <span lang="zh-CN" title="">汉字</span> is annotated
9567: with its pinyin reading.</p>
9568:
9569: <pre lang="zh-CN">...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...</pre>
9570:
9571: <p>This might be rendered as:</p>
9572:
9573: <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height="79" src="http://dev.w3.org/html5/spec/images/sample-ruby-pinyin.png" width="173"></p>
9574:
9575: </div><h4 id="the-rt-element"><span class="secno">4.6.21 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>rt</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9576: <dd>None.</dd>
9577: <dt>Contexts in which this element can be used:</dt>
9578: <dd>As a child of a <code><a href="#the-ruby-element">ruby</a></code> element.</dd>
9579: <dt>Content model:</dt>
9580: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9581: <dt>Content attributes:</dt>
9582: <dd><a href="#global-attributes">Global attributes</a></dd>
9583: <dt>DOM interface:</dt>
9584: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9585: </dl><p>The <code><a href="#the-rt-element">rt</a></code> element marks the ruby text component of a
9586: ruby annotation.</p><p>An <code><a href="#the-rt-element">rt</a></code> element <span class="impl">that is a child of
9587: a <code><a href="#the-ruby-element">ruby</a></code> element</span> <a href="#represents">represents</a> an
9588: annotation (given by its children) for the zero or more nodes of
9589: phrasing content that immediately precedes it in the
9590: <code><a href="#the-ruby-element">ruby</a></code> element, ignoring <code><a href="#the-rp-element">rp</a></code> elements.</p><h4 id="the-rp-element"><span class="secno">4.6.22 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>rp</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9591: <dd>None.</dd>
9592: <dt>Contexts in which this element can be used:</dt>
9593: <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>
9594: <dt>Content model:</dt>
9595: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9596: <dt>Content attributes:</dt>
9597: <dd><a href="#global-attributes">Global attributes</a></dd>
9598: <dt>DOM interface:</dt>
9599: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9600: </dl><p>The <code><a href="#the-rp-element">rp</a></code> element can be used to provide parentheses
9601: around a ruby text component of a ruby annotation, to be shown by
9602: user agents that don't support ruby annotations.</p><p>An <code><a href="#the-rp-element">rp</a></code> element <span class="impl">that is a child of
9603: a <code><a href="#the-ruby-element">ruby</a></code> element</span> <a href="#represents">represents</a>
9604: nothing<span class="impl"> and its contents must be
9605: ignored</span>. <span class="impl">An <code><a href="#the-rp-element">rp</a></code> element whose
9606: parent element is not a <code><a href="#the-ruby-element">ruby</a></code> element
9607: <a href="#represents">represents</a> its children.</span></p><div class="example">
9608:
9609: <p>The example above, in which each ideograph in the text <span lang="ja" title="">漢字</span> is annotated with its
9610: phonetic reading, could be expanded to use <code><a href="#the-rp-element">rp</a></code> so that in
9611: legacy user agents the readings are in parentheses:</p>
9612:
9613: <pre lang="ja">...
9614: <ruby>
9615: 漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
9616: 字 <rp>(</rp><rt>じ</rt><rp>)</rp>
9617: </ruby>
9618: ...</pre>
9619:
9620: <p>In conforming user agents the rendering would be as above, but
9621: in user agents that do not support ruby, the rendering would
9622: be:</p>
9623:
9624: <pre lang="ja">... 漢 (かん) 字 (じ) ...</pre>
9625:
9626: </div><h4 id="the-bdi-element"><span class="secno">4.6.23 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>bdi</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9627: <dd><a href="#flow-content">Flow content</a>.</dd>
9628: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9629: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9630: <dt>Contexts in which this element can be used:</dt>
9631: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9632: <dt>Content model:</dt>
9633: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9634: <dt>Content attributes:</dt>
9635: <dd><a href="#global-attributes">Global attributes</a></dd>
9636: <dd>Also, the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> global attribute has special semantics on this element.</dd>
9637: <dt>DOM interface:</dt>
9638: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9639: </dl><p>The <code><a href="#the-bdi-element">bdi</a></code> element <a href="#represents">represents</a> a span of
9640: text that is to be isolated from its surroundings for the purposes
9641: of bidirectional text formatting. <a href="#refsBIDI">[BIDI]</a></p><p class="note">The <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> global
1.159 mike 9642: attribute defaults to <code title="attr-dir-auto"><a href="#attr-dir-auto">auto</a></code> on
9643: this element (it never inherits from the parent element like with
1.545 mike 9644: other elements).</p><div class="example">
9645:
9646: <p>This element is especially useful when embedding user-generated
9647: content with an unknown directionality.</p>
9648:
9649: <p>In this example, usernames are shown along with the number of
9650: posts that the user has submitted. If the <code><a href="#the-bdi-element">bdi</a></code> element
9651: were not used, the username of the Arabic user would end up
9652: confusing the text (the bidirectional algorithm would put the colon
9653: and the number "3" next to the word "User" rather than next to the
9654: word "posts").</p>
9655:
9656: <pre><ul>
9657: <li>User <bdi>jcranmer</bdi>: 12 posts.
9658: <li>User <bdi>hober</bdi>: 5 posts.
9659: <li>User <bdi><bdo dir="rtl">إيان</bdo></bdi>: 3 posts.
9660: </ul></pre>
9661:
9662: </div><h4 id="the-bdo-element"><span class="secno">4.6.24 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>bdo</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9663: <dd><a href="#flow-content">Flow content</a>.</dd>
9664: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9665: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9666: <dt>Contexts in which this element can be used:</dt>
9667: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9668: <dt>Content model:</dt>
9669: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9670: <dt>Content attributes:</dt>
9671: <dd><a href="#global-attributes">Global attributes</a></dd>
9672: <dd>Also, the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> global attribute has special semantics on this element.</dd>
9673: <dt>DOM interface:</dt>
9674: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9675: </dl><p>The <code><a href="#the-bdo-element">bdo</a></code> element <a href="#represents">represents</a> explicit
9676: text directionality formatting control for its children. It allows
9677: authors to override the Unicode bidirectional algorithm by
9678: explicitly specifying a direction override. <a href="#refsBIDI">[BIDI]</a></p><p>Authors must specify the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code>
9679: attribute on this element, with the value <code>ltr</code> to
9680: specify a left-to-right override and with the value <code>rtl</code>
9681: to specify a right-to-left override.</p><h4 id="the-span-element"><span class="secno">4.6.25 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>span</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9682: <dd><a href="#flow-content">Flow content</a>.</dd>
9683: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
1.629 ! mike 9684: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9685: <dt>Contexts in which this element can be used:</dt>
9686: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9687: <dt>Content model:</dt>
9688: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9689: <dt>Content attributes:</dt>
9690: <dd><a href="#global-attributes">Global attributes</a></dd>
9691: <dt>DOM interface:</dt>
9692: <dd>
9693: <pre class="idl">interface <dfn id="htmlspanelement" role="button" tabindex="0" aria-haspopup="true">HTMLSpanElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
9694: </dd>
9695: </dl><p>The <code><a href="#the-span-element">span</a></code> element doesn't mean anything on its own,
9696: but can be useful when used together with the <a href="#global-attributes">global
9697: attributes</a>, 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>.
9698: It <a href="#represents">represents</a> its children.</p><div class="example">
9699:
9700: <p>In this example, a code fragment is marked up using
9701: <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
9702: identifiers can be color-coded from CSS:</p>
9703:
9704:
9705:
9706: <pre><pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
9707: <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
9708: <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
9709: <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
9710: <span class="keyword">break</span>;
9711: }</code></pre></pre>
9712:
9713: </div><h4 id="the-br-element"><span class="secno">4.6.26 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>br</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9714: <dd><a href="#flow-content">Flow content</a>.</dd>
9715: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9716: <dt>Contexts in which this element can be used:</dt>
9717: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9718: <dt>Content model:</dt>
9719: <dd>Empty.</dd>
9720: <dt>Content attributes:</dt>
9721: <dd><a href="#global-attributes">Global attributes</a></dd>
9722: <dt>DOM interface:</dt>
9723: <dd>
9724: <pre class="idl">interface <dfn id="htmlbrelement" role="button" tabindex="0" aria-haspopup="true">HTMLBRElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
9725: </dd>
9726: </dl><p>The <code><a href="#the-br-element">br</a></code> element <a href="#represents">represents</a> a line
9727: break.</p><p class="note">While line breaks are usually represented in visual
1.25 mike 9728: media by physically moving subsequent text to a new line, a style
9729: sheet or user agent would be equally justified in causing line
9730: breaks to be rendered in a different manner, for instance as green
1.545 mike 9731: dots, or as extra spacing.</p><p><code><a href="#the-br-element">br</a></code> elements must be used only for line breaks that
9732: are actually part of the content, as in poems or addresses.</p><div class="example">
9733:
9734: <p>The following example is correct usage of the <code><a href="#the-br-element">br</a></code>
9735: element:</p>
9736:
9737: <pre><p>P. Sherman<br>
9738: 42 Wallaby Way<br>
9739: Sydney</p></pre>
9740:
9741: </div><p><code><a href="#the-br-element">br</a></code> elements must not be used for separating thematic
9742: groups in a paragraph.</p><div class="example">
9743:
9744: <p>The following examples are non-conforming, as they abuse the
9745: <code><a href="#the-br-element">br</a></code> element:</p>
9746:
9747: <pre><p><a ...>34 comments.</a><br>
9748: <a ...>Add a comment.</a></p></pre>
9749:
9750: <pre><p><label>Name: <input name="name"></label><br>
9751: <label>Address: <input name="address"></label></p></pre>
9752:
9753: <p>Here are alternatives to the above, which are correct:</p>
9754:
9755: <pre><p><a ...>34 comments.</a></p>
9756: <p><a ...>Add a comment.</a></p></pre>
9757:
9758: <pre><p><label>Name: <input name="name"></label></p>
9759: <p><label>Address: <input name="address"></label></p></pre>
9760:
9761: </div><p>If a <a href="#paragraph">paragraph</a> consists of nothing but a single
9762: <code><a href="#the-br-element">br</a></code> element, it represents a placeholder blank line
9763: (e.g. as in a template). Such blank lines must not be used for
9764: presentation purposes.</p><h4 id="the-wbr-element"><span class="secno">4.6.27 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>wbr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9765: <dd><a href="#flow-content">Flow content</a>.</dd>
9766: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
9767: <dt>Contexts in which this element can be used:</dt>
9768: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9769: <dt>Content model:</dt>
9770: <dd>Empty.</dd>
9771: <dt>Content attributes:</dt>
9772: <dd><a href="#global-attributes">Global attributes</a></dd>
9773: <dt>DOM interface:</dt>
9774: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
9775: </dl><p>The <code><a href="#the-wbr-element">wbr</a></code> element <a href="#represents">represents</a> a line break
9776: opportunity.</p><div class="example">
9777:
9778: <p>In the following example, someone is quoted as saying something
9779: which, for effect, is written as one long word. However, to ensure
9780: that the text can be wrapped in a readable fashion, the individual
9781: words in the quote are separated using a <code><a href="#the-wbr-element">wbr</a></code>
9782: element.</p>
9783:
9784: <pre><p>So then he pointed at the tiger and screamed
9785: "there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p></pre>
9786:
9787: </div><div class="example">
9788:
9789: <p>Here, especially long lines of code in a program listing have
9790: suggested wrapping points given using <code><a href="#the-wbr-element">wbr</a></code>
9791: elements.</p>
9792:
9793: <pre><pre>...
9794: Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
9795: Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
9796: ...</pre></pre>
9797:
9798: </div><h4 id="usage-summary"><span class="secno">4.6.28 </span>Usage summary</h4><p><i>This section is non-normative.</i></p><table><thead><tr><th>Element
9799: </th><th>Purpose
9800: </th><th>Example
9801: </th></tr></thead><tbody><tr><td><code><a href="#the-a-element">a</a></code>
9802: </td><td>Hyperlinks
9803: </td><td><pre class="example">Visit my <strong><a href="drinks.html">drinks</a></strong> page.</pre>
9804:
9805: </td></tr><tr><td><code><a href="#the-em-element">em</a></code>
9806: </td><td>Stress emphasis
9807: </td><td><pre class="example">I must say I <strong><em>adore</em></strong> lemonade.</pre>
9808:
9809: </td></tr><tr><td><code><a href="#the-strong-element">strong</a></code>
9810: </td><td>Importance
9811: </td><td><pre class="example">This tea is <strong><strong>very hot</strong></strong>.</pre>
9812:
9813: </td></tr><tr><td><code><a href="#the-small-element">small</a></code>
9814: </td><td>Side comments
9815: </td><td><pre class="example">These grapes are made into wine. <strong><small>Alcohol is addictive.</small></strong></pre>
9816:
9817: </td></tr><tr><td><code><a href="#the-s-element">s</a></code>
9818: </td><td>Inaccurate text
9819: </td><td><pre class="example">Price: <strong><s>£4.50</s></strong> £2.00!</pre>
9820:
9821: </td></tr><tr><td><code><a href="#the-cite-element">cite</a></code>
9822: </td><td>Titles of works
9823: </td><td><pre class="example">The case <strong><cite>Hugo v. Danielle</cite></strong> is relevant here.</pre>
9824:
9825: </td></tr><tr><td><code><a href="#the-q-element">q</a></code>
9826: </td><td>Quotations
9827: </td><td><pre class="example">The judge said <strong><q>You can drink water from the fish tank</q></strong> but advised against it.</pre>
9828:
9829: </td></tr><tr><td><code><a href="#the-dfn-element">dfn</a></code>
9830: </td><td>Defining instance
9831: </td><td><pre class="example">The term <strong><dfn>organic food</dfn></strong> refers to food produced without synthetic chemicals.</pre>
9832:
9833: </td></tr><tr><td><code><a href="#the-abbr-element">abbr</a></code>
9834: </td><td>Abbreviations
9835: </td><td><pre class="example">Organic food in Ireland is certified by the <strong><abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr></strong>.</pre>
9836:
9837: </td></tr><tr><td><code><a href="#the-time-element">time</a></code>
9838: </td><td>Date and/or time
9839: </td><td><pre class="example">Published <strong><time>2009-10-21</time></strong>.</pre>
9840:
9841: </td></tr><tr><td><code><a href="#the-code-element">code</a></code>
9842: </td><td>Computer code
9843: </td><td><pre class="example">The <strong><code>fruitdb</code></strong> program can be used for tracking fruit production.</pre>
9844:
9845: </td></tr><tr><td><code><a href="#the-var-element">var</a></code>
9846: </td><td>Variables
9847: </td><td><pre class="example">If there are <strong><var>n</var></strong> fruit in the bowl, at least <strong><var>n</var></strong>÷2 will be ripe.</pre>
9848:
9849: </td></tr><tr><td><code><a href="#the-samp-element">samp</a></code>
9850: </td><td>Computer output
9851: </td><td><pre class="example">The computer said <strong><samp>Unknown error -3</samp></strong>.</pre>
9852:
9853: </td></tr><tr><td><code><a href="#the-kbd-element">kbd</a></code>
9854: </td><td>User input
9855: </td><td><pre class="example">Hit <strong><kbd>F1</kbd></strong> to continue.</pre>
9856:
9857: </td></tr><tr><td><code><a href="#the-sub-and-sup-elements">sub</a></code>
9858: </td><td>Subscripts
9859: </td><td><pre class="example">Water is H<strong><sub>2</sub></strong>O.</pre>
9860:
9861: </td></tr><tr><td><code><a href="#the-sub-and-sup-elements">sup</a></code>
9862: </td><td>Superscripts
9863: </td><td><pre class="example">The Hydrogen in heavy water is usually <strong><sup>2</sup></strong>H.</pre>
9864:
9865: </td></tr><tr><td><code><a href="#the-i-element">i</a></code>
9866: </td><td>Alternative voice
9867: </td><td><pre class="example">Lemonade consists primarily of <strong><i>Citrus limon</i></strong>.</pre>
9868:
9869: </td></tr><tr><td><code><a href="#the-b-element">b</a></code>
9870: </td><td>Keywords
9871: </td><td><pre class="example">Take a <strong><b>lemon</b></strong> and squeeze it with a <strong><b>juicer</b></strong>.</pre>
9872:
9873: </td></tr><tr><td><code><a href="#the-u-element">u</a></code>
9874: </td><td>Annotations
9875: </td><td><pre class="example">The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.</pre>
9876:
9877: </td></tr><tr><td><code><a href="#the-mark-element">mark</a></code>
9878: </td><td>Highlight
9879: </td><td><pre class="example">Elderflower cordial, with one <strong><mark>part</mark></strong> cordial to ten <strong><mark>part</mark></strong>s water, stands a<strong><mark>part</mark></strong> from the rest.</pre>
9880:
9881: </td></tr><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>
9882: </td><td>Ruby annotations
9883: </td><td><pre class="example"><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre>
9884:
9885: </td></tr><tr><td><code><a href="#the-bdi-element">bdi</a></code>
9886: </td><td>Text directionality isolation
9887: </td><td><pre class="example">The recommended restaurant is <strong><bdi lang="">My Juice Café (At The Beach)</bdi></strong>.</pre>
9888:
9889: </td></tr><tr><td><code><a href="#the-bdo-element">bdo</a></code>
9890: </td><td>Text directionality formatting
9891: </td><td><pre class="example">The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre>
9892:
9893: </td></tr><tr><td><code><a href="#the-span-element">span</a></code>
9894: </td><td>Other
9895: </td><td><pre class="example">In French we call it <strong><span lang="fr">sirop de sureau</span></strong>.</pre>
9896:
9897: </td></tr><tr><td><code><a href="#the-br-element">br</a></code>
9898: </td><td>Line break
9899: </td><td><pre class="example">Simply Orange Juice Company<strong><br></strong>Apopka, FL 32703<strong><br></strong>U.S.A.</pre>
9900:
9901: </td></tr><tr><td><code><a href="#the-wbr-element">wbr</a></code>
9902: </td><td>Line breaking opportunity
9903: </td><td><pre class="example">www.simply<strong><wbr></strong>orange<strong><wbr></strong>juice.com</pre>
9904:
9905: </td></tr></tbody></table><h3 id="edits"><span class="secno">4.7 </span>Edits</h3><p>The <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements represent
9906: edits to the document.</p><h4 id="the-ins-element"><span class="secno">4.7.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>ins</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9907: <dd><a href="#flow-content">Flow content</a>.</dd>
9908: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: <a href="#phrasing-content">phrasing content</a>.</dd>
1.629 ! mike 9909: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 9910: <dt>Contexts in which this element can be used:</dt>
9911: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9912: <dd>Otherwise: where <a href="#flow-content">flow content</a> is expected.</dd>
9913: <dt>Content model:</dt>
9914: <dd><a href="#transparent">Transparent</a>.</dd>
9915: <dt>Content attributes:</dt>
9916: <dd><a href="#global-attributes">Global attributes</a></dd>
9917: <dd><code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code></dd>
9918: <dd><code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code></dd>
9919: <dt>DOM interface:</dt>
9920: <dd>Uses the <code><a href="#htmlmodelement">HTMLModElement</a></code> interface.</dd>
9921: </dl><p>The <code><a href="#the-ins-element">ins</a></code> element <a href="#represents">represents</a> an addition
9922: to the document.</p><div class="example">
9923:
9924: <p>The following represents the addition of a single paragraph:</p>
9925:
9926: <pre><aside>
9927: <ins>
9928: <p> I like fruit. </p>
9929: </ins>
9930: </aside></pre>
9931:
9932: <p>As does this, because everything in the <code><a href="#the-aside-element">aside</a></code>
9933: element here counts as <a href="#phrasing-content">phrasing content</a> and therefore
9934: there is just one <a href="#paragraph">paragraph</a>:</p>
9935:
9936: <pre><aside>
9937: <ins>
9938: Apples are <em>tasty</em>.
9939: </ins>
9940: <ins>
9941: So are pears.
9942: </ins>
9943: </aside></pre>
9944:
9945: </div><p><code><a href="#the-ins-element">ins</a></code> elements should not cross <a href="#paragraph" title="paragraph">implied paragraph</a> boundaries.</p><div class="example">
9946:
9947: <p>The following example represents the addition of two paragraphs,
9948: the second of which was inserted in two parts. The first
9949: <code><a href="#the-ins-element">ins</a></code> element in this example thus crosses a paragraph
9950: boundary, which is considered poor form.</p>
9951:
9952: <pre class="bad"><aside>
9953: <!-- don't do this -->
9954: <ins datetime="2005-03-16T00:00Z">
9955: <p> I like fruit. </p>
9956: Apples are <em>tasty</em>.
9957: </ins>
9958: <ins datetime="2007-12-19T00:00Z">
9959: So are pears.
9960: </ins>
9961: </aside></pre>
9962:
9963: <p>Here is a better way of marking this up. It uses more elements,
9964: but none of the elements cross implied paragraph boundaries.</p>
9965:
9966: <pre><aside>
9967: <ins datetime="2005-03-16T00:00Z">
9968: <p> I like fruit. </p>
9969: </ins>
9970: <ins datetime="2005-03-16T00:00Z">
9971: Apples are <em>tasty</em>.
9972: </ins>
9973: <ins datetime="2007-12-19T00:00Z">
9974: So are pears.
9975: </ins>
9976: </aside></pre>
9977:
9978:
9979: </div><h4 id="the-del-element"><span class="secno">4.7.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>del</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
9980: <dd><a href="#flow-content">Flow content</a>.</dd>
9981: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: <a href="#phrasing-content">phrasing content</a>.</dd>
9982: <dt>Contexts in which this element can be used:</dt>
9983: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
9984: <dd>Otherwise: where <a href="#flow-content">flow content</a> is expected.</dd>
9985: <dt>Content model:</dt>
9986: <dd><a href="#transparent">Transparent</a>.</dd>
9987: <dt>Content attributes:</dt>
9988: <dd><a href="#global-attributes">Global attributes</a></dd>
9989: <dd><code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code></dd>
9990: <dd><code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code></dd>
9991: <dt>DOM interface:</dt>
9992: <dd>Uses the <code><a href="#htmlmodelement">HTMLModElement</a></code> interface.</dd>
9993: </dl><p>The <code><a href="#the-del-element">del</a></code> element <a href="#represents">represents</a> a removal
9994: from the document.</p><p><code><a href="#the-del-element">del</a></code> elements should not cross <a href="#paragraph" title="paragraph">implied paragraph</a> boundaries.</p><div class="example">
9995:
9996: <p>The following shows a "to do" list where items that have been
9997: done are crossed-off with the date and time of their
9998: completion.</p>
9999:
10000: <pre><h1>To Do</h1>
10001: <ul>
10002: <li>Empty the dishwasher</li>
10003: <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
10004: <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
10005: <li>Buy a printer</li>
10006: </ul></pre>
10007:
10008: </div><h4 id="attributes-common-to-ins-and-del-elements"><span class="secno">4.7.3 </span>Attributes common to <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements</h4><p>The <dfn id="attr-mod-cite" role="button" tabindex="0" aria-haspopup="true"><code>cite</code></dfn> attribute
10009: may be used to specify the address of a document that explains the
10010: change. When that document is long, for instance the minutes of a
10011: meeting, authors are encouraged to include a fragment identifier
10012: pointing to the specific part of that document that discusses the
10013: change.</p><p>If the <code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code> attribute is
10014: present, it must be a <a href="#valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
10015: spaces</a> that explains the change. <span class="impl">To obtain
10016: the corresponding citation link, the value of the attribute must be
10017: <a href="#resolve-a-url" title="resolve a url">resolved</a> relative to the
10018: element. User agents should allow users to follow such citation
10019: links.</span></p><p>The <dfn id="attr-mod-datetime" role="button" tabindex="0" aria-haspopup="true"><code>datetime</code></dfn>
10020: attribute may be used to specify the time and date of the change.</p><p>If present, the <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code>
10021: attribute's value must be a <a href="#valid-date-string-with-optional-time">valid date string with optional
10022: time</a>.</p><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>
10023: interface:</p><pre class="idl">interface <dfn id="htmlmodelement" role="button" tabindex="0" aria-haspopup="true">HTMLModElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
10024: attribute DOMString <a href="#dom-mod-cite" title="dom-mod-cite">cite</a>;
10025: attribute DOMString <a href="#dom-mod-datetime" title="dom-mod-datetime">dateTime</a>;
10026: };</pre>
10027: <p>The <dfn id="dom-mod-cite" role="button" tabindex="0" aria-haspopup="true"><code>cite</code></dfn> IDL
10028: 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" role="button" tabindex="0" aria-haspopup="true"><code>dateTime</code></dfn> IDL attribute
10029: 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>
10030: <h4 id="edits-and-paragraphs"><span class="secno">4.7.4 </span>Edits and paragraphs</h4><p><i>This section is non-normative.</i></p><p>Since the <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements do not
10031: affect <a href="#paragraph" title="paragraph">paragraphing</a>, it is possible,
10032: in some cases where paragraphs are <a href="#paragraph" title="paragraph">implied</a> (without explicit <code><a href="#the-p-element">p</a></code>
10033: elements), for an <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element to
10034: span both an entire paragraph or other non-<a href="#phrasing-content">phrasing
10035: content</a> elements and part of another paragraph. For
10036: example:</p><pre><section>
10037: <ins>
10038: <p>
10039: This is a paragraph that was inserted.
10040: </p>
10041: This is another paragraph whose first sentence was inserted
10042: at the same time as the paragraph above.
10043: </ins>
10044: This is a second sentence, which was there all along.
10045: </section></pre><p>By only wrapping some paragraphs in <code><a href="#the-p-element">p</a></code> elements, one
10046: can even get the end of one paragraph, a whole second paragraph,
10047: and the start of a third paragraph to be covered by the same
10048: <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element (though this is very
10049: confusing, and not considered good practice):</p><pre class="bad"><section>
10050: This is the first paragraph. <ins>This sentence was
10051: inserted.
10052: <p>This second paragraph was inserted.</p>
10053: This sentence was inserted too.</ins> This is the
10054: third paragraph in this example.
10055: <!-- (don't do this) -->
10056: </section></pre><p>However, due to the way <a href="#paragraph" title="paragraph">implied
10057: paragraphs</a> are defined, it is not possible to mark up the
10058: end of one paragraph and the start of the very next one using the
10059: same <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element. You instead have
10060: to use one (or two) <code><a href="#the-p-element">p</a></code> element(s) and two
10061: <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> elements, as for example:</p><pre><section>
10062: <p>This is the first paragraph. <del>This sentence was
10063: deleted.</del></p>
10064: <p><del>This sentence was deleted too.</del> That
10065: sentence needed a separate &lt;del&gt; element.</p>
10066: </section></pre><p>Partly because of the confusion described above, authors are
10067: strongly encouraged to always mark up all paragraphs with the
10068: <code><a href="#the-p-element">p</a></code> element, instead of having <code><a href="#the-ins-element">ins</a></code> or
10069: <code><a href="#the-del-element">del</a></code> elements that cross <a href="#paragraph" title="paragraph">implied
10070: paragraphs</a> boundaries.</p><h4 id="edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</h4><p><i>This section is non-normative.</i></p><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>
10071: elements do not allow <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements
10072: as children. Lists always represent all their items, including items
10073: that would otherwise have been marked as deleted.</p><p>To indicate that an item is inserted or deleted, an
10074: <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element can be wrapped around
10075: the contents of the <code><a href="#the-li-element">li</a></code> element. To indicate that an
10076: item has been replaced by another, a single <code><a href="#the-li-element">li</a></code> element
10077: can have one or more <code><a href="#the-del-element">del</a></code> elements followed by one or
10078: more <code><a href="#the-ins-element">ins</a></code> elements.</p><div class="example">
10079:
10080: <p>In the following example, a list that started empty had items
10081: added and removed from it over time. The bits in the example that
10082: have been emphasized show the parts that are the "current" state of
10083: the list. The list item numbers don't take into account the edits,
10084: though.</p>
10085:
10086: <pre><h1>Stop-ship bugs</h1>
10087: <ol>
10088: <li><ins datetime="2008-02-12T15:20Z"><em>Bug 225:
10089: Rain detector doesn't work in snow</em></ins></li>
10090: <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
10091: Water buffer overflows in April</ins></del></li>
10092: <li><ins datetime="2008-02-16T13:50Z"><em>Bug 230:
10093: Water heater doesn't use renewable fuels</em></ins></li>
10094: <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
10095: Carbon dioxide emissions detected after startup</ins></del></li>
10096: </ol></pre>
10097:
10098: </div><div class="example">
10099:
10100: <p>In the following example, a list that started with just fruit
10101: was replaced by a list with just colors.</p>
10102:
10103: <pre><h1>List of <del>fruits</del><ins>colors</ins></h1>
10104: <ul>
10105: <li><del>Lime</del><ins>Green</ins></li>
10106: <li><del>Apple</del></li>
10107: <li>Orange</li>
10108: <li><del>Pear</del></li>
10109: <li><ins>Teal</ins></li>
10110: <li><del>Lemon</del><ins>Yellow</ins></li>
10111: <li>Olive</li>
10112: <li><ins>Purple</ins></li>
10113: </ul></pre>
10114:
1.607 mike 10115: </div><h4 id="edits-and-tables"><span class="secno">4.7.6 </span>Edits and tables</h4><p><i>This section is non-normative.</i></p><p>The elements that form part of the table model have complicated
10116: content model requirements that do not allow for the
10117: <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements, so indicating edits
10118: to a table can be difficult.</p><p>To indicate that an entire row or an entire column has been added
10119: or removed, the entire contents of each cell in that row or column
10120: can be wrapped in <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> elements
10121: (respectively).</p><div class="example">
10122:
10123: <p>Here, a table's row has been added:</p>
10124:
10125: <pre><table>
10126: <thead>
10127: <tr> <th> Game name <th> Game publisher <th> Verdict
10128: <tbody>
10129: <tr> <td> Diablo 2 <td> Blizzard <td> 8/10
10130: <tr> <td> Portal <td> Valve <td> 10/10
10131: <strong> <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins></strong>
10132: </table></pre>
10133:
10134: <p>Here, a a column has been removed (the time at which it was removed is given also, as is a link to the page explaining why):</p>
10135:
10136: <pre><table>
10137: <thead>
10138: <tr> <th> Game name <th> Game publisher <th> <strong><del cite="/edits/r192" datetime="2011-05-02T14:23Z">Verdict</del></strong>
10139: <tbody>
10140: <tr> <td> Diablo 2 <td> Blizzard <td> <strong><del cite="/edits/r192" datetime="2011-05-02T14:23Z">8/10</del></strong>
10141: <tr> <td> Portal <td> Valve <td> <strong><del cite="/edits/r192" datetime="2011-05-02T14:23Z">10/10</del></strong>
10142: <tr> <td> Portal 2 <td> Valve <td> <strong><del cite="/edits/r192" datetime="2011-05-02T14:23Z">10/10</del></strong>
10143: </table></pre>
10144:
10145: </div><p>Generally speaking, there is no good way to indicate more
10146: complicated edits (e.g. that a cell was removed, moving all
10147: subsequent cells up or to the left).</p><h3 id="embedded-content-1"><span class="secno">4.8 </span>Embedded content</h3><p>The
1.545 mike 10148: <a href="#the-img-element">img</a>,
10149: <a href="#the-iframe-element">iframe</a>,
10150: <a href="#the-embed-element">embed</a>,
10151: <a href="#the-object-element">object</a>,
10152: <a href="#the-param-element">param</a>,
10153: <a href="#the-video-element">video</a>,
10154: <a href="#the-audio-element">audio</a>,
10155: <a href="#the-source-element">source</a>,
10156: <a href="#the-track-element">track</a>,
10157: <a href="#the-canvas-element">canvas</a>,
10158: <a href="#the-map-element">map</a>,
10159: and
10160: <a href="#the-area-element">area</a>
10161: elements.</p><h4 id="the-img-element"><span class="secno">4.8.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>img</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
10162: <dd><a href="#flow-content">Flow content</a>.</dd>
10163: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
10164: <dd><a href="#embedded-content">Embedded content</a>.</dd>
10165: <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>
1.629 ! mike 10166: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 10167: <dt>Contexts in which this element can be used:</dt>
10168: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
10169: <dt>Content model:</dt>
10170: <dd>Empty.</dd>
10171: <dt>Content attributes:</dt>
10172: <dd><a href="#global-attributes">Global attributes</a></dd>
10173: <dd><code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code></dd>
10174: <dd><code title="attr-img-src"><a href="#attr-img-src">src</a></code></dd>
10175: <dd><code title="attr-img-crossorigin"><a href="#attr-img-crossorigin">crossorigin</a></code></dd>
10176: <dd><code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code></dd>
10177: <dd><code title="attr-img-ismap"><a href="#attr-img-ismap">ismap</a></code></dd>
10178: <dd><code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></dd>
10179: <dd><code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></dd>
10180: <dt>DOM interface:</dt>
10181: <dd>
10182: <pre class="idl">[NamedConstructor=<a href="#dom-image" title="dom-image">Image</a>(),
1.562 mike 10183: NamedConstructor=<a href="#dom-image-w" title="dom-image-w">Image</a>(unsigned long width),
10184: NamedConstructor=<a href="#dom-image-wh" title="dom-image-wh">Image</a>(unsigned long width, unsigned long height)]
1.545 mike 10185: interface <dfn id="htmlimageelement" role="button" tabindex="0" aria-haspopup="true">HTMLImageElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
10186: attribute DOMString <a href="#dom-img-alt" title="dom-img-alt">alt</a>;
10187: attribute DOMString <a href="#dom-img-src" title="dom-img-src">src</a>;
10188: attribute DOMString <a href="#dom-img-crossorigin" title="dom-img-crossOrigin">crossOrigin</a>;
10189: attribute DOMString <a href="#dom-img-usemap" title="dom-img-useMap">useMap</a>;
10190: attribute boolean <a href="#dom-img-ismap" title="dom-img-isMap">isMap</a>;
10191: attribute unsigned long <a href="#dom-img-width" title="dom-img-width">width</a>;
10192: attribute unsigned long <a href="#dom-img-height" title="dom-img-height">height</a>;
10193: readonly attribute unsigned long <a href="#dom-img-naturalwidth" title="dom-img-naturalWidth">naturalWidth</a>;
10194: readonly attribute unsigned long <a href="#dom-img-naturalheight" title="dom-img-naturalHeight">naturalHeight</a>;
10195: readonly attribute boolean <a href="#dom-img-complete" title="dom-img-complete">complete</a>;
10196: };</pre>
10197: </dd>
10198: </dl><p>An <code><a href="#the-img-element">img</a></code> element represents an image.</p><p>The image given by the <dfn id="attr-img-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> attribute is the
10199: embedded content; the value of the <dfn id="attr-img-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn> attribute provides
10200: equivalent content for those who cannot process images or who have
10201: image loading disabled.</p><p>The <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute must be
10202: present, and must contain a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially
10203: surrounded by spaces</a> referencing a non-interactive,
10204: optionally animated, image resource that is neither paged nor
10205: scripted.</p><p class="note">Images can thus be static bitmaps (e.g. PNGs, GIFs,
1.1 mike 10206: JPEGs), single-page vector documents (single-page PDFs, XML files
10207: with an SVG root element), animated bitmaps (APNGs, animated GIFs),
10208: animated vector graphics (XML files with an SVG root element that
10209: use declarative SMIL animation), and so forth. However, this also
10210: precludes SVG files with script, multipage PDF files, interactive
1.545 mike 10211: MNG files, HTML documents, plain text documents, and so forth.</p><p>The requirements on the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10212: attribute's value are described <a href="#alt">in the next
10213: section</a>.</p><p>The <code><a href="#the-img-element">img</a></code> element must not be used as a layout tool.
10214: In particular, <code><a href="#the-img-element">img</a></code> elements should not be used to
10215: display transparent images, as they rarely convey meaning and rarely
10216: add anything useful to the document.</p><p>The <dfn id="attr-img-crossorigin" role="button" tabindex="0" aria-haspopup="true"><code>crossorigin</code></dfn>
10217: attribute is a <a href="#cors-settings-attribute">CORS settings attribute</a>. Its purpose is
10218: to allow images from third-party sites that allow cross-origin
10219: access to be used with <code><a href="#the-canvas-element">canvas</a></code>.</p><hr><p>The <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code> attribute,
10220: if present, can indicate that the image has an associated
10221: <a href="#image-map">image map</a>.</p><p>The <dfn id="attr-img-ismap" role="button" tabindex="0" aria-haspopup="true"><code>ismap</code></dfn>
10222: attribute, when used on an element that is a descendant of an
10223: <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
10224: presence that the element provides access to a server-side image
10225: map. This affects how events are handled on the corresponding
10226: <code><a href="#the-a-element">a</a></code> element.</p><p>The <code title="attr-img-ismap"><a href="#attr-img-ismap">ismap</a></code> attribute is a
10227: <a href="#boolean-attribute">boolean attribute</a>. The attribute must not be specified
10228: on an element that does not have an ancestor <code><a href="#the-a-element">a</a></code> element
10229: with an <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute.</p><p>The <code><a href="#the-img-element">img</a></code> element supports <a href="#dimension-attributes">dimension
10230: attributes</a>.</p>
10231: <p>The <dfn id="dom-img-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn> and <dfn id="dom-img-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> IDL attributes must
10232: <a href="#reflect">reflect</a> the respective content attributes of the same
10233: name.</p>
10234:
10235: <p>The <dfn id="dom-img-crossorigin" role="button" tabindex="0" aria-haspopup="true"><code>crossOrigin</code></dfn> IDL
10236: attribute must <a href="#reflect">reflect</a> the <code title="attr-img-crossorigin"><a href="#attr-img-crossorigin">crossorigin</a></code> content
10237: attribute.</p>
10238:
10239: <p>The <dfn id="dom-img-usemap" role="button" tabindex="0" aria-haspopup="true"><code>useMap</code></dfn> IDL
10240: attribute must <a href="#reflect">reflect</a> the <code title="attr-img-usemap">usemap</code> content attribute.</p>
10241:
10242: <p>The <dfn id="dom-img-ismap" role="button" tabindex="0" aria-haspopup="true"><code>isMap</code></dfn> IDL
10243: attribute must <a href="#reflect">reflect</a> the <code title="attr-img-ismap"><a href="#attr-img-ismap">ismap</a></code> content attribute.</p>
10244: <dl class="domintro"><dt><var title="">image</var> . <code title="dom-img-width" id="dom-img-width"><a href="#dom-img-width">width</a></code> [ = <var title="">value</var> ]</dt>
10245: <dt><var title="">image</var> . <code title="dom-img-height" id="dom-img-height"><a href="#dom-img-height">height</a></code> [ = <var title="">value</var> ]</dt>
10246:
10247: <dd>
10248:
10249: <p>These attributes return the actual rendered dimensions of the
10250: image, or zero if the dimensions are not known.</p>
10251:
10252: <p>They can be set, to change the corresponding content
10253: attributes.</p>
10254:
10255: </dd>
10256:
10257: <dt><var title="">image</var> . <code title="dom-img-naturalWidth" id="dom-img-naturalwidth"><a href="#dom-img-naturalwidth">naturalWidth</a></code></dt>
10258: <dt><var title="">image</var> . <code title="dom-img-naturalHeight" id="dom-img-naturalheight"><a href="#dom-img-naturalheight">naturalHeight</a></code></dt>
10259:
10260: <dd>
10261:
10262: <p>These attributes return the intrinsic dimensions of the image,
10263: or zero if the dimensions are not known.</p>
10264:
10265: </dd>
10266:
10267: <dt><var title="">image</var> . <code title="dom-img-complete" id="dom-img-complete"><a href="#dom-img-complete">complete</a></code></dt>
10268:
10269: <dd>
10270:
10271: <p>Returns true if the image has been completely downloaded or if
10272: no image is specified; otherwise, returns false.</p>
10273:
10274: </dd>
10275:
10276: <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>
10277:
10278: <dd>
10279:
10280: <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
10281: passed in the relevant arguments, if applicable.</p>
10282:
10283: </dd>
10284:
10285: </dl>
10286: <p>On setting, they must act as if they <a href="#reflect" title="reflect">reflected</a> the respective content attributes
10287: of the same name.</p>
10288:
10289: <p>Three constructors are provided for creating
10290: <code><a href="#htmlimageelement">HTMLImageElement</a></code> objects (in addition to the factory
10291: methods from DOM Core such as <code title="">createElement()</code>): <dfn id="dom-image" role="button" tabindex="0" aria-haspopup="true"><code>Image()</code></dfn>, <dfn id="dom-image-w" role="button" tabindex="0" aria-haspopup="true"><code>Image(<var title="">width</var>)</code></dfn>, and <dfn id="dom-image-wh" role="button" tabindex="0" aria-haspopup="true"><code>Image(<var title="">width</var>, <var title="">height</var>)</code></dfn>. When invoked as constructors,
10292: these must return a new <code><a href="#htmlimageelement">HTMLImageElement</a></code> object (a new
10293: <code><a href="#the-img-element">img</a></code> element). If the <var title="">width</var> argument
10294: 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
10295: <var title="">width</var>. If the <var title="">height</var>
10296: 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
10297: to <var title="">height</var>. The element's document must be the
10298: <a href="#active-document">active document</a> of the <a href="#browsing-context">browsing context</a> of
10299: the <code><a href="#window">Window</a></code> object on which the interface object of the
10300: invoked constructor is found.</p>
10301: <div class="example">
10302:
10303: <p>A single image can have different appropriate alternative text
10304: depending on the context.</p>
10305:
10306: <p>In each of the following cases, the same image is used, yet the
10307: <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> text is different each
10308: time. The image is the coat of arms of the Carouge municipality in
10309: the canton Geneva in Switzerland.</p>
10310:
10311: <p>Here it is used as a supplementary icon:</p>
10312: <pre><p>I lived in <img src="carouge.svg" alt=""> Carouge.</p></pre>
10313:
10314: <p>Here it is used as an icon representing the town:</p>
10315: <pre><p>Home town: <img src="carouge.svg" alt="Carouge"></p></pre>
10316:
10317: <p>Here it is used as part of a text on the town:</p>
10318:
10319: <pre><p>Carouge has a coat of arms.</p>
10320: <p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
10321: <p>It is used as decoration all over the town.</p></pre>
10322:
10323: <p>Here it is used as a way to support a similar text where the
10324: description is given as well as, instead of as an alternative to,
10325: the image:</p>
10326:
10327: <pre><p>Carouge has a coat of arms.</p>
10328: <p><img src="carouge.svg" alt=""></p>
10329: <p>The coat of arms depicts a lion, sitting in front of a tree.
10330: It is used as decoration all over the town.</p></pre>
10331:
10332: <p>Here it is used as part of a story:</p>
10333:
10334: <pre><p>He picked up the folder and a piece of paper fell out.</p>
10335: <p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
10336: red background, a green tree, and a yellow lion with its tongue
10337: hanging out and whose tail was shaped like an S."></p>
10338: <p>He stared at the folder. S! The answer he had been looking for all
10339: this time was simply the letter S! How had he not seen that before? It all
10340: came together now. The phone call where Hector had referred to a lion's tail,
10341: the time Marco had stuck his tongue out...</p></pre>
10342:
10343: <p>Here it is not known at the time of publication what the image
10344: will be, only that it will be a coat of arms of some kind, and thus
10345: no replacement text can be provided, and instead only a brief
10346: caption for the image is provided, in the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute:</p>
10347:
10348: <pre><p>The last user to have uploaded a coat of arms uploaded this one:</p>
10349: <p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p></pre>
10350:
10351: <p>Ideally, the author would find a way to provide real replacement
10352: text even in this case, e.g. by asking the previous user. Not
10353: providing replacement text makes the document more difficult to use
10354: for people who are unable to view images, e.g. blind users, or
10355: users or very low-bandwidth connections or who pay by the byte, or
10356: users who are forced to use a text-only Web browser.</p>
10357:
10358: </div><div class="example">
10359:
10360: <p>Here are some more examples showing the same picture used in
10361: different contexts, with different appropriate alternate texts each
10362: time.</p>
10363:
10364: <pre><article>
10365: <h1>My cats</h1>
10366: <h2>Fluffy</h2>
10367: <p>Fluffy is my favorite.</p>
10368: <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
10369: <p>She's just too cute.</p>
10370: <h2>Miles</h2>
10371: <p>My other cat, Miles just eats and sleeps.</p>
10372: </article></pre>
10373:
10374: <pre><article>
10375: <h1>Photography</h1>
10376: <h2>Shooting moving targets indoors</h2>
10377: <p>The trick here is to know how to anticipate; to know at what speed and
10378: what distance the subject will pass by.</p>
10379: <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
10380: photographed quite nicely using this technique.">
10381: <h2>Nature by night</h2>
10382: <p>To achieve this, you'll need either an extremely sensitive film, or
10383: immense flash lights.</p>
10384: </article></pre>
10385:
10386: <pre><article>
10387: <h1>About me</h1>
10388: <h2>My pets</h2>
10389: <p>I've got a cat named Fluffy and a dog named Miles.</p>
10390: <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
10391: <p>My dog Miles and I like go on long walks together.</p>
10392: <h2>music</h2>
10393: <p>After our walks, having emptied my mind, I like listening to Bach.</p>
10394: </article></pre>
10395:
10396: <pre><article>
10397: <h1>Fluffy and the Yarn</h1>
10398: <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
10399: <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
10400: <p>He would play in the morning, he would play in the evening.</p>
10401: </article></pre>
10402:
10403: </div><h5 id="alt"><span class="secno">4.8.1.1 </span>Requirements for providing text to act as an alternative for images</h5><h6 id="general-guidelines"><span class="secno">4.8.1.1.1 </span>General guidelines</h6><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
10404: value must not be empty; the value must be an appropriate
10405: 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
10406: is intended to represent, as described in the following
10407: sections.</p><p>The most general rule to consider when writing alternative text
10408: is the following: <strong>the intent is that replacing every image
10409: with the text of its <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute
10410: not change the meaning of the page</strong>.</p><p>So, in general, alternative text can be written by considering
10411: what one would have written had one not been able to include the
10412: image.</p><p>A corollary to this is that the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute's value should never
10413: contain text that could be considered the image's <em>caption</em>,
10414: <em>title</em>, or <em>legend</em>. It is supposed to contain
10415: replacement text that could be used by users <em>instead</em> of the
10416: 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
10417: supplemental information.</p><p class="note">One way to think of alternative text is to think
1.40 mike 10418: about how you would read the page containing the image to someone
10419: over the phone, without mentioning that there is an image
10420: present. Whatever you say instead of the image is typically a good
1.545 mike 10421: start for writing the alternative text.</p><h6 id="a-link-or-button-containing-nothing-but-the-image"><span class="secno">4.8.1.1.2 </span>A link or button containing nothing but the image</h6><p>When an <a href="#the-a-element">a</a> element that creates a
10422: <a href="#hyperlink">hyperlink</a>, or a <code><a href="#the-button-element">button</a></code> element, has no
10423: textual content but contains one or more images, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attributes must contain text that
10424: together convey the purpose of the link or button.</p><div class="example">
10425:
10426: <p>In this example, a user is asked to pick his preferred color
10427: from a list of three. Each color is given by an image, but for
10428: users who have configured their user agent not to display images,
10429: the color names are used instead:</p>
10430:
10431: <pre><h1>Pick your color</h1>
10432: <ul>
10433: <li><a href="green.html"><strong><img src="green.jpeg" alt="Green"></strong></a></li>
10434: <li><a href="blue.html"><strong><img src="blue.jpeg" alt="Blue"></strong></a></li>
10435: <li><a href="red.html"><strong><img src="red.jpeg" alt="Red"></strong></a></li>
10436: </ul></pre>
10437:
10438: </div><div class="example">
10439:
10440: <p>In this example, each button has a set of images to indicate the
10441: kind of color output desired by the user. The first image is used
10442: in each case to give the alternative text.</p>
10443:
10444: <pre><button name="rgb"><strong><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></strong></button>
10445: <button name="cmyk"><strong><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></strong></button></pre>
10446:
10447: <p>Since each image represents one part of the text, it could also
10448: be written like this:</p>
10449:
10450: <pre><button name="rgb"><strong><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></strong></button>
10451: <button name="cmyk"><strong><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></strong></button></pre>
10452:
10453: <p>However, with other alternative text, this might not work, and
10454: putting all the alternative text into one image in each case might
10455: make more sense:</p>
10456:
10457: <pre><button name="rgb"><strong><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></strong></button>
10458: <button name="cmyk"><strong><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></strong></button></pre>
10459:
10460: </div><h6 id="a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts-diagrams-graphs-maps-illustrations"><span class="secno">4.8.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6><p>Sometimes something can be more clearly stated in graphical
10461: form, for example as a flowchart, a diagram, a graph, or a simple
10462: map showing directions. In such cases, an image can be given using
10463: the <code><a href="#the-img-element">img</a></code> element, but the lesser textual version must
10464: still be given, so that users who are unable to view the image
10465: (e.g. because they have a very slow connection, or because they
10466: are using a text-only browser, or because they are listening to
10467: the page being read out by a hands-free automobile voice Web
10468: browser, or simply because they are blind) are still able to
10469: understand the message being conveyed.</p><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
10470: same message as the image specified in the <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute.</p><p>It is important to realize that the alternative text is a
10471: <em>replacement</em> for the image, not a description of the
10472: image.</p><div class="example">
10473:
10474: <p>In the following example we have <a href="images/parsing-model-overview.png">a flowchart</a> in image
10475: form, with text in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10476: attribute rephrasing the flowchart in prose form:</p>
10477:
10478: <pre><p>In the common case, the data handled by the tokenization stage
10479: comes from the network, but it can also come from script.</p>
1.547 mike 10480: <p><strong><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt="The Network
10481: passes data to the Input Stream Preprocessor, which passes it to the
10482: Tokenizer, which passes it to the Tree Construction stage. From there,
10483: data goes to both the DOM and to Script Execution. Script Execution is
10484: linked to the DOM, and, using document.write(), passes data to the
10485: Tokenizer."></strong></p></pre>
1.545 mike 10486:
10487: </div><div class="example">
10488:
10489: <p>Here's another example, showing a good solution and a bad
10490: solution to the problem of including an image in a
10491: description.</p>
10492:
10493: <p>First, here's the good solution. This sample shows how the
10494: alternative text should just be what you would have put in the
10495: prose if the image had never existed.</p>
10496:
10497: <pre><!-- This is the correct way to do things. -->
10498: <p>
10499: You are standing in an open field west of a house.
10500: <strong><img src="house.jpeg" alt="The house is white, with a boarded front door."></strong>
10501: There is a small mailbox here.
10502: </p></pre>
10503:
10504: <p>Second, here's the bad solution. In this incorrect way of
10505: doing things, the alternative text is simply a description of the
10506: image, instead of a textual replacement for the image. It's bad
10507: because when the image isn't shown, the text doesn't flow as well
10508: as in the first example.</p>
10509:
10510: <pre class="bad"><!-- <em>This is the wrong way to do things.</em> -->
10511: <p>
10512: You are standing in an open field west of a house.
10513: <img src="house.jpeg" alt="A white house, with a boarded front door.">
10514: There is a small mailbox here.
10515: </p></pre>
10516:
10517: <p>Text such as "Photo of white house with boarded door" would be
10518: equally bad alternative text (though it could be suitable for the
10519: <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute or in the
10520: <code><a href="#the-figcaption-element">figcaption</a></code> element of a <code><a href="#the-figure-element">figure</a></code> with this
10521: image).</p>
10522:
10523: </div><h6 id="a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons-logos"><span class="secno">4.8.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6><p>A document can contain information in iconic form. The icon is
10524: intended to help users of visual browsers to recognize features at
10525: a glance.</p><p>In some cases, the icon is supplemental to a text label
10526: 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
10527: be empty.</p><div class="example">
10528:
10529: <p>Here the icons are next to text that conveys the same meaning,
10530: so they have an empty <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10531: attribute:</p>
10532:
10533: <pre><nav>
10534: <p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
10535: <p><a href="/configure/"><strong><img src="/icons/configuration.png" alt=""></strong>
10536: Configuration Tools</a></p>
10537: </nav></pre>
10538:
10539: </div><p>In other cases, the icon has no text next to it describing what
10540: it means; the icon is supposed to be self-explanatory. In those
10541: 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><div class="example">
10542:
10543: <p>Here, posts on a news site are labeled with an icon
10544: indicating their topic.</p>
10545:
10546: <pre><body>
10547: <article>
10548: <header>
10549: <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
10550: <p><strong><img src="movies.png" alt="Movies"></strong></p>
10551: </header>
10552: <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
10553: making this its 8th win in the last 12 years.</p>
10554: </article>
10555: <article>
10556: <header>
10557: <h1>Latest TWiT episode is online</h1>
10558: <p><strong><img src="podcasts.png" alt="Podcasts"></strong></p>
10559: </header>
10560: <p>The latest TWiT episode has been posted, in which we hear
10561: several tech news stories as well as learning much more about the
10562: iPhone. This week, the panelists compare how reflective their
10563: iPhones' Apple logos are.</p>
10564: </article>
10565: </body></pre>
10566:
10567: </div><p>Many pages include logos, insignia, flags, or emblems, which
10568: stand for a particular entity such as a company, organization,
10569: project, band, software package, country, or some such.</p><p>If the logo is being used to represent the entity, e.g. as a page
10570: heading, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute must
10571: contain the name of the entity being represented by the logo. The
10572: <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute must <em>not</em>
10573: contain text like the word "logo", as it is not the fact that it is
10574: a logo that is being conveyed, it's the entity itself.</p><p>If the logo is being used next to the name of the entity that
10575: 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
10576: empty.</p><p>If the logo is merely used as decorative material (as branding,
10577: or, for example, as a side image in an article that mentions the
10578: entity to which the logo belongs), then the entry below on purely
10579: decorative images applies. If the logo is actually being
10580: discussed, then it is being used as a phrase or paragraph (the
10581: description of the logo) with an alternative graphical
10582: representation (the logo itself), and the first entry above
10583: applies.</p><div class="example">
10584:
10585: <p>In the following snippets, all four of the above cases are
10586: present. First, we see a logo used to represent a company:</p>
10587:
10588: <pre><h1><strong><img src="XYZ.gif" alt="The XYZ company"></strong></h1></pre>
10589:
10590: <p>Next, we see a paragraph which uses a logo right next to the
10591: company name, and so doesn't have any alternative text:
10592:
10593: </p><pre><article>
10594: <h2>News</h2>
10595: <p>We have recently been looking at buying the <strong><img src="alpha.gif"
10596: alt=""> ΑΒΓ company</strong>, a small Greek company
10597: specializing in our type of product.</p></pre>
10598:
10599: <p>In this third snippet, we have a logo being used in an aside,
10600: as part of the larger article discussing the acquisition:</p>
10601:
10602: <pre> <strong><aside><p><img src="alpha-large.gif" alt=""></p></aside></strong>
10603: <p>The ΑΒΓ company has had a good quarter, and our
10604: pie chart studies of their accounts suggest a much bigger blue slice
10605: than its green and orange slices, which is always a good sign.</p>
10606: </article></pre>
10607:
10608: <p>Finally, we have an opinion piece talking about a logo, and
10609: the logo is therefore described in detail in the alternative
10610: text.</p>
10611:
10612: <pre><p>Consider for a moment their logo:</p>
10613:
10614: <strong><p><img src="/images/logo" alt="It consists of a green circle with a
10615: green question mark centered inside it."></p></strong>
10616:
10617: <p>How unoriginal can you get? I mean, oooooh, a question mark, how
10618: <em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
10619: sure everyone will rush to adopt those specifications now! They could
10620: at least have tried for some sort of, I don't know, sequence of
10621: rounded squares with varying shades of green and bold white outlines,
10622: at least that would look good on the cover of a blue book.</p></pre>
10623:
10624: <p>This example shows how the alternative text should be written
10625: such that if the image isn't <i title="img-available">available</i>, and the text is used instead,
10626: the text flows seamlessly into the surrounding text, as if the
10627: image had never been there in the first place.</p>
10628:
10629: </div><h6 id="text-that-has-been-rendered-to-a-graphic-for-typographical-effect"><span class="secno">4.8.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</h6><p>Sometimes, an image just consists of text, and the purpose of the
10630: image is not to highlight the actual typographic effects used to
10631: render the text, but just to convey the text itself.</p><p>In such cases, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10632: attribute must be present but must consist of the same text as
10633: written in the image itself.</p><div class="example">
10634:
10635: <p>Consider a graphic containing the text "Earth Day", but with the
10636: letters all decorated with flowers and plants. If the text is
10637: merely being used as a heading, to spice up the page for graphical
10638: users, then the correct alternative text is just the same text
10639: "Earth Day", and no mention need be made of the decorations:</p>
10640:
10641: <pre><h1><strong><img src="earthdayheading.png" alt="Earth Day"></strong></h1></pre>
10642:
10643: </div><h6 id="a-graphical-representation-of-some-of-the-surrounding-text"><span class="secno">4.8.1.1.6 </span>A graphical representation of some of the surrounding text</h6><p>In many cases, the image is actually just supplementary, and
10644: its presence merely reinforces the surrounding text. In these
10645: cases, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute must be
10646: present but its value must be the empty string.</p><p>In general, an image falls into this category if removing the
10647: image doesn't make the page any less useful, but including the
10648: image makes it a lot easier for users of visual browsers to
10649: understand the concept.</p><div class="example">
10650:
10651: <p>A flowchart that repeats the previous paragraph in graphical form:</p>
10652:
1.547 mike 10653: <pre><p>The Network passes data to the Input Stream Preprocessor, which
10654: passes it to the Tokenizer, which passes it to the Tree Construction
10655: stage. From there, data goes to both the DOM and to Script Execution.
10656: Script Execution is linked to the DOM, and, using document.write(),
10657: passes data to the Tokenizer.</p>
1.545 mike 10658: <strong><p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt=""></p></strong></pre>
10659:
10660: <p>In these cases, it would be wrong to include alternative text
10661: that consists of just a caption. If a caption is to be included,
10662: then either the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute can
10663: be used, or the <code><a href="#the-figure-element">figure</a></code> and <code><a href="#the-figcaption-element">figcaption</a></code>
10664: elements can be used. In the latter case, the image would in fact
10665: be a phrase or paragraph with an alternative graphical
10666: representation, and would thus require alternative text.</p>
10667:
10668: <pre><!-- Using the title="" attribute -->
1.547 mike 10669: <p>The Network passes data to the Input Stream Preprocessor, which
10670: passes it to the Tokenizer, which passes it to the Tree Construction
10671: stage. From there, data goes to both the DOM and to Script Execution.
10672: Script Execution is linked to the DOM, and, using document.write(),
10673: passes data to the Tokenizer.</p>
1.545 mike 10674: <p><strong><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt=""
10675: title="Flowchart representation of the parsing model."></strong></p></pre>
10676:
10677: <pre><!-- Using <figure> and <figcaption> -->
1.547 mike 10678: <p>The Network passes data to the Input Stream Preprocessor, which
10679: passes it to the Tokenizer, which passes it to the Tree Construction
10680: stage. From there, data goes to both the DOM and to Script Execution.
10681: Script Execution is linked to the DOM, and, using document.write(),
10682: passes data to the Tokenizer.</p>
1.545 mike 10683: <figure>
1.547 mike 10684: <strong><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt="The Network leads to
10685: the Input Stream Preprocessor, which leads to the Tokenizer, which
10686: leads to the Tree Construction stage. The Tree Construction stage
10687: leads to two items. The first is Script Execution, which leads via
10688: document.write() back to the Tokenizer. The second item from which
10689: Tree Construction leads is the DOM. The DOM is related to the Script
10690: Execution."></strong>
1.545 mike 10691: <figcaption>Flowchart representation of the parsing model.</figcaption>
10692: </figure></pre>
10693:
10694: <pre class="bad"><!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
1.547 mike 10695: <p>The Network passes data to the Input Stream Preprocessor, which
10696: passes it to the Tokenizer, which passes it to the Tree Construction
10697: stage. From there, data goes to both the DOM and to Script Execution.
10698: Script Execution is linked to the DOM, and, using document.write(),
10699: passes data to the Tokenizer.</p>
1.545 mike 10700: <p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png"
10701: alt="Flowchart representation of the parsing model."></p>
10702: <!-- Never put the image's caption in the alt="" attribute! --></pre>
10703:
10704: </div><div class="example">
10705:
10706: <p>A graph that repeats the previous paragraph in graphical form:</p>
10707:
10708: <pre><p>According to a study covering several billion pages,
10709: about 62% of documents on the Web in 2007 triggered the Quirks
10710: rendering mode of Web browsers, about 30% triggered the Almost
10711: Standards mode, and about 9% triggered the Standards mode.</p>
10712: <strong><p><img src="rendering-mode-pie-chart.png" alt=""></p></strong></pre>
10713:
10714: </div><h6 id="a-purely-decorative-image-that-doesn-t-add-any-information"><span class="secno">4.8.1.1.7 </span>A purely decorative image that doesn't add any information</h6><p>If an image is decorative but isn't especially page-specific
10715: — for example an image that forms part of a site-wide design
10716: scheme — the image should be specified in the site's CSS, not
10717: in the markup of the document.</p><p>Exceptions to this rule, in cases where CSS cannot be used to
10718: display an entirely decorative image, are covered by the HTML5:
10719: Techniques for providing useful text alternatives. <a href="#refsHTMLALTTECHS">[HTMLALTTECHS]</a>
10720: Authors are also encouraged to consult the Web Content Accessibility
10721: Guidelines 2.0 for more detailed information and acceptable
10722: techniques. <a href="#refsWCAG">[WCAG]</a></p><h6 id="a-group-of-images-that-form-a-single-larger-picture-with-no-links"><span class="secno">4.8.1.1.8 </span>A group of images that form a single larger picture with no links</h6><p>When a picture has been sliced into smaller image files that are
10723: then displayed together to form the complete picture again, one of
10724: the images must have its <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10725: attribute set as per the relevant rules that would be appropriate
10726: for the picture as a whole, and then all the remaining images must
10727: have their <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute set to
10728: the empty string.</p><div class="example">
10729:
10730: <p>In the following example, a picture representing a company logo
10731: for <span title="">XYZ Corp</span> has been split into two pieces,
10732: the first containing the letters "XYZ" and the second with the word
10733: "Corp". The alternative text ("XYZ Corp") is all in the first
10734: image.</p>
10735:
10736: <pre><h1><strong><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></strong></h1></pre>
10737:
10738: </div><div class="example">
10739:
10740: <p>In the following example, a rating is shown as three filled
10741: stars and two empty stars. While the alternative text could have
10742: been "★★★☆☆", the author has
10743: instead decided to more helpfully give the rating in the form "3
10744: out of 5". That is the alternative text of the first image, and the
10745: rest have blank alternative text.</p>
10746:
10747: <pre><p>Rating: <meter max=5 value=3><strong><img src="1" alt="3 out of 5"
10748: ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
10749: ><img src="0" alt=""></strong></meter></p></pre>
10750:
10751: </div><h6 id="a-group-of-images-that-form-a-single-larger-picture-with-links"><span class="secno">4.8.1.1.9 </span>A group of images that form a single larger picture with links</h6><p>Generally, <a href="#image-map" title="image map">image maps</a> should be
10752: used instead of slicing an image for links.</p><p>However, if an image is indeed sliced and any of the components
10753: of the sliced picture are the sole contents of links, then one image
10754: 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
10755: of the link.</p><div class="example">
10756:
10757: <p>In the following example, a picture representing the flying
10758: spaghetti monster emblem, with each of the left noodly appendages
10759: and the right noodly appendages in different images, so that the
10760: user can pick the left side or the right side in an adventure.</p>
10761:
10762: <pre><h1>The Church</h1>
10763: <p>You come across a flying spaghetti monster. Which side of His
10764: Noodliness do you wish to reach out for?</p>
10765: <strong><p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a
10766: ><img src="fsm-middle.png" alt=""
10767: ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p></strong></pre>
10768:
10769: </div><h6 id="a-key-part-of-the-content"><span class="secno">4.8.1.1.10 </span>A key part of the content</h6><p>In some cases, the image is a critical part of the
10770: content. This could be the case, for instance, on a page that is
10771: part of a photo gallery. The image is the whole <em>point</em> of
10772: the page containing it.</p><p>How to provide alternative text for an image that is a key part
10773: of the content depends on the image's provenance.</p><dl><dt>The general case</dt>
10774:
10775: <dd>
10776:
10777: <p>When it is possible for detailed alternative text to be
10778: provided, for example if the image is part of a series of
10779: screenshots in a magazine review, or part of a comic strip, or is
10780: a photograph in a blog entry about that photograph, text that can
10781: serve as a substitute for the image must be given as the contents
10782: of the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute.</p>
10783:
10784: <div class="example">
10785:
10786: <p>A screenshot in a gallery of screenshots for a new OS, with
10787: some alternative text:</p>
10788:
10789: <pre><figure>
10790: <strong><img src="KDE%20Light%20desktop.png"
10791: alt="The desktop is blue, with icons along the left hand side in
10792: two columns, reading System, Home, K-Mail, etc. A window is
10793: open showing that menus wrap to a second line if they
10794: cannot fit in the window. The window has a list of icons
10795: along the top, with an address bar below it, a list of
10796: icons for tabs along the left edge, a status bar on the
10797: bottom, and two panes in the middle. The desktop has a bar
10798: at the bottom of the screen with a few buttons, a pager, a
10799: list of open applications, and a clock."></strong>
10800: <figcaption>Screenshot of a KDE desktop.</figcaption>
10801: </figure></pre>
10802:
10803: </div>
10804:
10805: <div class="example">
10806:
10807: <p>A graph in a financial report:</p>
10808:
10809: <pre><strong><img src="sales.gif"
10810: title="Sales graph"
10811: alt="From 1998 to 2005, sales increased by the following percentages
10812: with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%"></strong></pre>
10813:
10814: <p>Note that "sales graph" would be inadequate alternative text
10815: for a sales graph. Text that would be a good <em>caption</em> is
10816: not generally suitable as replacement text.</p>
10817:
10818: </div>
10819:
10820: </dd>
10821:
10822:
10823: <dt>Images that defy a complete description</dt>
10824:
10825: <dd>
10826:
10827: <p>In certain cases, the nature of the image might be such that
10828: providing thorough alternative text is impractical. For example,
10829: the image could be indistinct, or could be a complex fractal, or
10830: could be a detailed topographical map.</p>
10831:
10832: <p>In these cases, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10833: attribute must contain some suitable alternative text, but it may
10834: be somewhat brief.</p>
10835:
10836: <div class="example">
10837:
10838: <p>Sometimes there simply is no text that can do justice to an
10839: image. For example, there is little that can be said to usefully
10840: describe a Rorschach inkblot test. However, a description, even
10841: if brief, is still better than nothing:</p>
10842:
10843: <pre><figure>
10844: <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
10845: symmetry with indistinct edges, with a small gap in the center, two
10846: larger gaps offset slightly from the center, with two similar gaps
10847: under them. The outline is wider in the top half than the bottom
10848: half, with the sides extending upwards higher than the center, and
10849: the center extending below the sides."></strong>
10850: <figcaption>A black outline of the first of the ten cards
10851: in the Rorschach inkblot test.</figcaption>
10852: </figure></pre>
10853:
10854: <p>Note that the following would be a very bad use of alternative
10855: text:</p>
10856:
10857: <pre class="bad"><!-- This example is wrong. Do not copy it. -->
10858: <figure>
10859: <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
10860: of the first of the ten cards in the Rorschach inkblot test.">
10861: <figcaption>A black outline of the first of the ten cards
10862: in the Rorschach inkblot test.</figcaption>
10863: </figure></pre>
10864:
10865: <p>Including the caption in the alternative text like this isn't
10866: useful because it effectively duplicates the caption for users
10867: who don't have images, taunting them twice yet not helping them
10868: any more than if they had only read or heard the caption
10869: once.</p>
10870:
10871: </div>
10872:
10873: <div class="example">
10874:
10875: <p>Another example of an image that defies full description is a
10876: fractal, which, by definition, is infinite in detail.</p>
10877:
10878: <p>The following example shows one possible way of providing
10879: alternative text for the full view of an image of the Mandelbrot
10880: set.</p>
10881:
10882: <pre><strong><img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
10883: its cusp on the real axis in the positive direction, with a smaller
10884: bulb aligned along the same center line, touching it in the negative
10885: direction, and with these two shapes being surrounded by smaller bulbs
10886: of various sizes."></strong></pre>
10887:
10888: </div>
10889:
10890: </dd>
10891:
10892:
10893: <dt id="unknown-images">Images whose contents are not known</dt>
10894:
10895: <dd>
10896:
10897: <p>In some unfortunate cases, there might be no alternative text
10898: available at all, either because the image is obtained in some
10899: automated fashion without any associated alternative text (e.g. a
10900: Webcam), or because the page is being generated by a script using
10901: user-provided images where the user did not provide suitable or
10902: usable alternative text (e.g. photograph sharing sites), or
10903: because the author does not himself know what the images represent
10904: (e.g. a blind photographer sharing an image on his blog).</p>
10905:
10906: <p>In such cases, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10907: attribute may be omitted, but one of the following conditions must
10908: be met as well:</p>
10909:
10910: <ul><li>The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute is
10911: present and has a non-empty value.</li>
10912:
10913: <li id="figcaption-as-alt-condition">The <code><a href="#the-img-element">img</a></code> element
10914: is in a <code><a href="#the-figure-element">figure</a></code> element that contains a
10915: <code><a href="#the-figcaption-element">figcaption</a></code> element that contains content other than
10916: <a href="#inter-element-whitespace">inter-element whitespace</a>, and, ignoring the
10917: <code><a href="#the-figcaption-element">figcaption</a></code> element and its descendants, the
10918: <code><a href="#the-figure-element">figure</a></code> element has no text node descendants other
10919: than <a href="#inter-element-whitespace">inter-element whitespace</a>, and no <a href="#embedded-content">embedded
10920: content</a> descendant other than the <code><a href="#the-img-element">img</a></code>
10921: element.</li>
10922:
10923: </ul><p class="note">Such cases are to be kept to an absolute
10924: minimum. If there is even the slightest possibility of the author
10925: having the ability to provide real alternative text, then it would
10926: not be acceptable to omit the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
10927: attribute.</p>
10928:
10929: <div class="example">
10930:
10931: <p>A photo on a photo-sharing site, if the site received the
10932: image with no metadata other than the caption, could be marked up
10933: as follows:</p>
10934:
10935: <pre><figure>
10936: <strong><img src="1100670787_6a7c664aef.jpg"></strong>
10937: <figcaption>Bubbles traveled everywhere with us.</figcaption>
10938: </figure></pre>
10939:
10940: <p>It would be better, however, if a detailed description of the
10941: important parts of the image obtained from the user and included
10942: on the page.</p>
10943:
10944: </div>
10945:
10946: <div class="example">
10947:
10948: <p>A blind user's blog in which a photo taken by the user is
10949: shown. Initially, the user might not have any idea what the photo
10950: he took shows:</p>
10951:
10952: <pre><article>
10953: <h1>I took a photo</h1>
10954: <p>I went out today and took a photo!</p>
10955: <figure>
10956: <strong><img src="photo2.jpeg"></strong>
10957: <figcaption>A photograph taken blindly from my front porch.</figcaption>
10958: </figure>
10959: </article></pre>
10960:
10961: <p>Eventually though, the user might obtain a description of the
10962: image from his friends and could then include alternative text:</p>
10963:
10964: <pre><article>
10965: <h1>I took a photo</h1>
10966: <p>I went out today and took a photo!</p>
10967: <figure>
10968: <strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
10969: feeder hanging from the edge of my roof. It is half full, but there
10970: are no birds around. In the background, out-of-focus trees fill the
10971: shot. The feeder is made of wood with a metal grate, and it contains
10972: peanuts. The edge of the roof is wooden too, and is painted white
10973: with light blue streaks."></strong>
10974: <figcaption>A photograph taken blindly from my front porch.</figcaption>
10975: </figure>
10976: </article></pre>
10977:
10978: </div>
10979:
10980: <div class="example">
10981:
10982: <p>Sometimes the entire point of the image is that a textual
10983: description is not available, and the user is to provide the
10984: description. For instance, the point of a CAPTCHA image is to see
10985: if the user can literally read the graphic. Here is one way to
10986: mark up a CAPTCHA (note the <code title="attr-title"><a href="#the-title-attribute">title</a></code>
10987: attribute):</p>
10988:
10989: <pre><p><label>What does this image say?
10990: <strong><img src="captcha.cgi?id=8934" title="CAPTCHA"></strong>
10991: <input type=text name=captcha></label>
10992: (If you cannot see the image, you can use an <a
10993: href="?audio">audio</a> test instead.)</p></pre>
10994:
10995: <p>Another example would be software that displays images and
10996: asks for alternative text precisely for the purpose of then
10997: writing a page with correct alternative text. Such a page could
10998: have a table of images, like this:</p>
10999:
11000: <pre><table>
11001: <thead>
11002: <tr> <th> Image <th> Description
11003: <tbody>
11004: <tr>
11005: <td> <strong><img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"></strong>
11006: <td> <input name="alt2421">
11007: <tr>
11008: <td> <strong><img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"></strong>
11009: <td> <input name="alt2422">
11010: </table></pre>
11011:
11012: <p>Notice that even in this example, as much useful information
11013: as possible is still included in the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute.</p>
11014:
11015: </div>
11016:
11017: <p class="note">Since some users cannot use images at all
11018: (e.g. because they have a very slow connection, or because they
11019: are using a text-only browser, or because they are listening to
11020: the page being read out by a hands-free automobile voice Web
11021: 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
11022: omitted rather than being provided with replacement text when no
11023: alternative text is available and none can be made available, as
11024: in the above examples. Lack of effort from the part of the author
11025: is not an acceptable reason for omitting the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute.</p>
11026:
11027: </dd>
11028:
11029: </dl><h6 id="an-image-not-intended-for-the-user"><span class="secno">4.8.1.1.11 </span>An image not intended for the user</h6><p>Generally authors should avoid using <code><a href="#the-img-element">img</a></code> elements
11030: for purposes other than showing images.</p><p>If an <code><a href="#the-img-element">img</a></code> element is being used for purposes other
11031: than showing an image, e.g. as part of a service to count page
11032: views, then the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute must
11033: be the empty string.</p><p>In such cases, the <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code> and
11034: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code> attributes should both
11035: be set to zero.</p><h4 id="the-iframe-element"><span class="secno">4.8.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>iframe</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11036: <dd><a href="#flow-content">Flow content</a>.</dd>
11037: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
11038: <dd><a href="#embedded-content">Embedded content</a>.</dd>
11039: <dd><a href="#interactive-content">Interactive content</a>.</dd>
1.629 ! mike 11040: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 11041: <dt>Contexts in which this element can be used:</dt>
11042: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
11043: <dt>Content model:</dt>
11044: <dd>Text that conforms to <a href="#iframe-content-model">the requirements given in the prose</a>.</dd>
11045: <dt>Content attributes:</dt>
11046: <dd><a href="#global-attributes">Global attributes</a></dd>
11047: <dd><code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code></dd>
11048: <dd><code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code></dd>
11049: <dd><code title="attr-iframe-name"><a href="#attr-iframe-name">name</a></code></dd>
11050: <dd><code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code></dd>
11051: <dd><code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">seamless</a></code></dd>
11052: <dd><code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></dd>
11053: <dd><code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></dd>
11054: <dt>DOM interface:</dt>
11055: <dd>
11056: <pre class="idl">interface <dfn id="htmliframeelement" role="button" tabindex="0" aria-haspopup="true">HTMLIFrameElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
11057: attribute DOMString <a href="#dom-iframe-src" title="dom-iframe-src">src</a>;
11058: attribute DOMString <a href="#dom-iframe-srcdoc" title="dom-iframe-srcdoc">srcdoc</a>;
11059: attribute DOMString <a href="#dom-iframe-name" title="dom-iframe-name">name</a>;
11060: [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-iframe-sandbox" title="dom-iframe-sandbox">sandbox</a>;
11061: attribute boolean <a href="#dom-iframe-seamless" title="dom-iframe-seamless">seamless</a>;
11062: attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
11063: attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
11064: readonly attribute Document? <a href="#dom-iframe-contentdocument" title="dom-iframe-contentDocument">contentDocument</a>;
11065: readonly attribute <a href="#windowproxy">WindowProxy</a>? <a href="#dom-iframe-contentwindow" title="dom-iframe-contentWindow">contentWindow</a>;
11066: };</pre>
11067: </dd>
11068: </dl><p>The <code><a href="#the-iframe-element">iframe</a></code> element <a href="#represents">represents</a> a
11069: <a href="#nested-browsing-context">nested browsing context</a>.</p><p>The <dfn id="attr-iframe-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> attribute
11070: gives the address of a page that the <a href="#nested-browsing-context">nested browsing
11071: context</a> is to contain. The attribute, if present, must be a
11072: <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
11073: spaces</a>.</p><p>The <dfn id="attr-iframe-srcdoc" role="button" tabindex="0" aria-haspopup="true"><code>srcdoc</code></dfn>
11074: attribute gives the content of the page that the <a href="#nested-browsing-context">nested
11075: browsing context</a> is to contain. The value of the attribute is
11076: the source of <dfn id="an-iframe-srcdoc-document" role="button" tabindex="0" aria-haspopup="true">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</dfn>.</p><p>For <code><a href="#the-iframe-element">iframe</a></code> elements in <a href="#html-documents">HTML documents</a>,
11077: the attribute, if present, must have a value using <a href="#syntax">the HTML
11078: syntax</a> that consists of the following syntactic components,
11079: in the given order:</p><ol><li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
11080: <a href="#space-character" title="space character">space characters</a>.</li>
11081:
11082: <li>Optionally, a <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a>.
11083:
11084: </li><li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
11085: <a href="#space-character" title="space character">space characters</a>.</li>
11086:
11087: <li>The root element, in the form of an <code><a href="#the-html-element">html</a></code> <a href="#syntax-elements" title="syntax-elements">element</a>.</li>
11088:
11089: <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
11090: <a href="#space-character" title="space character">space characters</a>.</li>
11091:
11092: </ol><p>For <code><a href="#the-iframe-element">iframe</a></code> elements in <a href="#xml-documents">XML documents</a>,
11093: the attribute, if present, must have a value that matches the
11094: production labeled <code><a href="#document">document</a></code> in the XML
11095: specification. <a href="#refsXML">[XML]</a></p><p>If the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute and the
11096: <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute are both
11097: specified together, the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code>
11098: attribute takes priority. This allows authors to provide a fallback
11099: <a href="#url">URL</a> for legacy user agents that do not support the
11100: <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute.</p><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
1.544 mike 11101: the <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code> attribute is either
11102: also not set or set but its value cannot be <a href="#resolve-a-url" title="resolve a
11103: url">resolved</a>, the browsing context will remain at the
11104: initial <code><a href="#about:blank">about:blank</a></code> page.</p><p class="note">If the user <a href="#navigate" title="navigate">navigates</a>
11105: away from this page, the <code><a href="#the-iframe-element">iframe</a></code>'s corresponding
11106: <code><a href="#windowproxy">WindowProxy</a></code> object will proxy new <code><a href="#window">Window</a></code>
1.545 mike 11107: 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><div class="example">
11108:
11109: <p>Here a blog uses the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute in conjunction
11110: 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
11111: below to provide users of user agents that support this feature
11112: with an extra layer of protection from script injection in the blog
11113: post comments:</p>
11114:
11115: <pre><article>
11116: <h1>I got my own magazine!</h1>
11117: <p>After much effort, I've finally found a publisher, and so now I
11118: have my own magazine! Isn't that awesome?! The first issue will come
11119: out in September, and we have articles about getting food, and about
11120: getting in boxes, it's going to be great!</p>
11121: <footer>
11122: <p>Written by <a href="/users/cap">cap</a>.
11123: <time pubdate>2009-08-21T23:32Z</time></p>
11124: </footer>
11125: <article>
11126: <footer> At <time pubdate>2009-08-21T23:35Z</time>, <a href="/users/ch">ch</a> writes: </footer>
11127: <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
11128: </article>
11129: <article>
11130: <footer> At <time pubdate>2009-08-21T23:44Z</time>, <a href="/users/cap">cap</a> writes: </footer>
11131: <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
11132: </article>
11133: <article>
11134: <footer> At <time pubdate>2009-08-21T23:58Z</time>, <a href="/users/ch">ch</a> writes: </footer>
11135: <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
11136: <p>you should get earl&amp;amp;me on the next cover."></iframe>
11137: </article></pre>
11138:
11139: <p>Notice the way that quotes have to be escaped (otherwise the
1.562 mike 11140: <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute would end
11141: prematurely), and the way raw ampersands (e.g. in URLs or in prose)
11142: mentioned in the sandboxed content have to be <em>doubly</em>
11143: escaped — once so that the ampersand is preserved when
11144: originally parsing the <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code> attribute, and once more
1.545 mike 11145: to prevent the ampersand from being misinterpreted when parsing the
11146: sandboxed content.</p>
11147:
11148: </div><p class="note">In <a href="#syntax">the HTML syntax</a>, authors need only
1.544 mike 11149: remember to use U+0022 QUOTATION MARK characters (") to wrap the
11150: attribute contents and then to escape all U+0022 QUOTATION MARK (")
11151: and U+0026 AMPERSAND (&) characters, and to specify the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute, to ensure safe
11152: embedding of content.</p><p class="note">Due to restrictions of <span>the XML syntax</span>,
11153: in XML the U+003C LESS-THAN SIGN character (<) needs to be
11154: escaped as well. In order to prevent <a href="http://www.w3.org/TR/REC-xml/#AVNormalize">attribute-value
11155: normalization</a>, some of XML's whitespace characters —
11156: specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED
11157: (LF), and U+000D CARRIAGE RETURN (CR) — also need to be
1.545 mike 11158: escaped. <a href="#refsXML">[XML]</a></p><hr><p>The <dfn id="attr-iframe-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>
11159: attribute, if present, must be a <a href="#valid-browsing-context-name">valid browsing context
11160: name</a>. The given value is used to name the <a href="#nested-browsing-context">nested
11161: browsing context</a>. <span class="impl">When the browsing
11162: context is created, if the attribute is present, the <a href="#browsing-context-name">browsing
11163: context name</a> must be set to the value of this attribute;
11164: otherwise, the <a href="#browsing-context-name">browsing context name</a> must be set to the
11165: empty string.</span></p><hr><p>The <dfn id="attr-iframe-sandbox" role="button" tabindex="0" aria-haspopup="true"><code>sandbox</code></dfn>
11166: attribute, when specified, enables a set of extra restrictions on
11167: any content hosted by the <code><a href="#the-iframe-element">iframe</a></code>. Its value must be an
11168: <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a> that are
11169: <a href="#ascii-case-insensitive">ASCII case-insensitive</a>. The allowed values are
11170: <code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code>,
11171: <code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>,
11172: <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>, and
11173: <code title="attr-iframe-sandbox-allow-top-navigation"><a href="#attr-iframe-sandbox-allow-top-navigation">allow-top-navigation</a></code>.
11174:
11175: When the attribute is set, the content is treated as being from a
11176: unique <a href="#origin">origin</a>, forms and scripts are disabled, links
11177: are prevented from targeting other <a href="#browsing-context" title="browsing
1.599 mike 11178: context">browsing contexts</a>, and plugins are secured. The
1.545 mike 11179: <code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
11180: keyword allows the content to be treated as being from the same
11181: 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>
11182: keyword allows the content to <a href="#navigate">navigate</a> its
11183: <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>
11184: keywords re-enable forms and scripts respectively (though scripts
11185: are still prevented from creating popups).</p><p class="warning">Setting both the
11186: <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code> and
11187: <code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
11188: keywords together when the embedded page has the <a href="#same-origin">same
11189: origin</a> as the page containing the <code><a href="#the-iframe-element">iframe</a></code> allows
11190: the embedded page to simply remove the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute.</p><p class="warning">Sandboxing hostile content is of minimal help if
11191: an attacker can convince the user to just visit the hostile content
11192: directly, rather than in the <code><a href="#the-iframe-element">iframe</a></code>. To limit the
11193: damage that can be caused by hostile HTML content, it should be
11194: served using the <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> MIME type.</p><div class="example">
11195:
11196: <p>In this example, some completely-unknown, potentially hostile,
11197: user-provided HTML content is embedded in a page. Because it is
11198: sandboxed, it is treated by the user agent as being from a unique
11199: origin, despite the content being served from the same site. Thus
11200: it is affected by all the normal cross-site restrictions. In
11201: addition, the embedded page has scripting disabled, plugins
11202: disabled, forms disabled, and it cannot navigate any frames or
11203: windows other than itself (or any frames or windows it itself
11204: embeds).</p>
11205:
11206: <pre><p>We're not scared of you! Here is your content, unedited:</p>
11207: <iframe sandbox src="getusercontent.cgi?id=12193"></iframe></pre>
11208:
11209: <p>Note that cookies are still sent to the server in the <code title="">getusercontent.cgi</code> request, though they are not
11210: visible in the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> IDL
11211: attribute.</p>
11212:
11213: <p class="warning">It is important that the server serve the
11214: user-provided HTML using the <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> MIME
11215: type so that if the attacker convinces the user to visit that page
11216: directly, the page doesn't run in the context of the site's origin,
11217: which would make the user vulnerable to any attack found in the
11218: page.</p>
11219:
11220: </div><div class="example">
11221:
11222: <p>In this example, a gadget from another site is embedded. The
11223: gadget has scripting and forms enabled, and the origin sandbox
11224: restrictions are lifted, allowing the gadget to communicate with
11225: its originating server. The sandbox is still useful, however, as it
11226: disables plugins and popups, thus reducing the risk of the user
11227: being exposed to malware and other annoyances.</p>
11228:
11229: <pre><iframe sandbox="allow-same-origin allow-forms allow-scripts"
11230: src="http://maps.example.com/embedded.html"></iframe></pre>
11231:
11232: </div><div class="example">
11233:
11234: <p>Suppose a file A contained the following fragment:</p>
11235:
11236: <pre><iframe sandbox="allow-same-origin allow-forms" src=B></iframe></pre>
11237:
11238: <p>Suppose that file B contained an iframe also:</p>
11239:
11240: <pre><iframe sandbox="allow-scripts" src=C></iframe></pre>
11241:
11242: <p>Further, suppose that file C contained a link:</p>
11243:
11244: <pre><a href=D>Link</a></pre>
11245:
11246: <p>For this example, suppose all the files were served as
11247: <code><a href="#text-html">text/html</a></code>.</p>
11248:
11249: <p>Page C in this scenario has all the sandboxing flags
11250: set. Scripts are disabled, because the <code><a href="#the-iframe-element">iframe</a></code> in A has
11251: scripts disabled, and this overrides the <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>
11252: keyword set on the <code><a href="#the-iframe-element">iframe</a></code> in B. Forms are also
11253: disabled, because the inner <code><a href="#the-iframe-element">iframe</a></code> (in B) does not
11254: have the <code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code> keyword
11255: set.</p>
11256:
11257: <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
11258: B. This would change nothing immediately. If the user clicked the
11259: link in C, loading page D into the <code><a href="#the-iframe-element">iframe</a></code> in B, page D
11260: 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>
11261: and <code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code> keywords
11262: set, because that was the state of the <a href="#nested-browsing-context">nested browsing
11263: context</a> in the <code><a href="#the-iframe-element">iframe</a></code> in A when page B was
11264: loaded.</p>
11265:
11266: <p>Generally speaking, dynamically removing or changing the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute is
11267: ill-advised, because it can make it quite hard to reason about what
11268: will be allowed and what will not.</p>
11269:
11270: </div><p class="note">Potentially hostile files can be served from the
1.544 mike 11271: same server as the file containing the <code><a href="#the-iframe-element">iframe</a></code> element
11272: by labeling them as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> instead of
11273: <code><a href="#text-html">text/html</a></code>. This ensures that scripts in the files are
11274: unable to attack the site (as if they were actually served from
11275: another server), even if the user is tricked into visiting those
1.545 mike 11276: pages directly, without the protection of the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute.</p><p class="warning">If the <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>
11277: 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>
11278: keyword, and the file is from the <a href="#same-origin">same origin</a> as the
11279: <code><a href="#the-iframe-element">iframe</a></code>'s <code><a href="#document">Document</a></code>, then a script in the
11280: "sandboxed" iframe could just reach out, remove the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute, and then
11281: reload itself, effectively breaking out of the sandbox
11282: altogether.</p><hr><p>The <dfn id="attr-iframe-seamless" role="button" tabindex="0" aria-haspopup="true"><code>seamless</code></dfn>
11283: attribute is a <a href="#boolean-attribute">boolean attribute</a>. When specified, it
11284: indicates that the <code><a href="#the-iframe-element">iframe</a></code> element's <a href="#browsing-context">browsing
11285: context</a> is to be rendered in a manner that makes it appear to
11286: be part of the containing document (seamlessly included in the
11287: parent document). <span class="impl">Specifically, when the
11288: attribute is set on an <code><a href="#the-iframe-element">iframe</a></code> element whose owner
11289: <code><a href="#document">Document</a></code>'s <a href="#browsing-context">browsing context</a> did not have
11290: the <a href="#sandboxed-seamless-iframes-flag">sandboxed seamless iframes flag</a> set when that
11291: <code><a href="#document">Document</a></code> was created, and while either the
11292: <a href="#browsing-context">browsing context</a>'s <a href="#active-document">active document</a> has the
11293: <a href="#same-origin">same origin</a> as the <code><a href="#the-iframe-element">iframe</a></code> element's
11294: document, or the <a href="#browsing-context">browsing context</a>'s <a href="#active-document">active
11295: document</a>'s <em><a href="#the-document-s-address" title="the document's
11296: address">address</a></em> has the <a href="#same-origin">same origin</a> as the
11297: <code><a href="#the-iframe-element">iframe</a></code> element's document, or the <a href="#browsing-context">browsing
11298: context</a>'s <a href="#active-document">active document</a> is <a href="#an-iframe-srcdoc-document">an
11299: <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code>
11300: document</a>, the following requirements apply:</span></p><p class="note">The attribute can be set or removed dynamically,
11301: with the rendering updating in tandem.</p><div class="example">
11302:
11303: <p>In this example, the site's navigation is embedded using a
11304: client-side include using an <code><a href="#the-iframe-element">iframe</a></code>. Any links in the
11305: <code><a href="#the-iframe-element">iframe</a></code> will, in new user agents, be automatically
11306: opened in the <code><a href="#the-iframe-element">iframe</a></code>'s parent browsing context; for
11307: legacy user agents, the site could also include a <code><a href="#the-base-element">base</a></code>
11308: element with a <code title="attr-base-target"><a href="#attr-base-target">target</a></code>
11309: attribute with the value <code title="">_parent</code>. Similarly,
11310: in new user agents the styles of the parent page will be
11311: automatically applied to the contents of the frame, but to support
11312: legacy user agents authors might wish to include the styles
11313: explicitly.</p>
11314:
11315: <pre><nav><iframe seamless src="nav.include.html"></iframe></nav></pre>
11316:
11317: </div><hr><p>The <code><a href="#the-iframe-element">iframe</a></code> element supports <a href="#dimension-attributes">dimension
11318: attributes</a> for cases where the embedded content has specific
11319: dimensions (e.g. ad units have well-defined dimensions).</p><p>An <code><a href="#the-iframe-element">iframe</a></code> element never has <a href="#fallback-content">fallback
11320: content</a>, as it will always create a nested <a href="#browsing-context">browsing
11321: context</a>, regardless of whether the specified initial contents
11322: are successfully used.</p><p>Descendants of <code><a href="#the-iframe-element">iframe</a></code> elements represent
11323: nothing. (In legacy user agents that do not support
11324: <code><a href="#the-iframe-element">iframe</a></code> elements, the contents would be parsed as markup
11325: that could act as fallback content.)</p><p id="iframe-content-model">When used in <a href="#html-documents">HTML
11326: documents</a>, the allowed content model of <code><a href="#the-iframe-element">iframe</a></code>
11327: elements is text, except that invoking the <a href="#html-fragment-parsing-algorithm">HTML fragment
11328: parsing algorithm</a> with the <code><a href="#the-iframe-element">iframe</a></code> element as the
11329: <var title="concept-frag-parse-context"><a href="#concept-frag-parse-context">context</a></var> element and
11330: the text contents as the <var title="">input</var> must result in a
11331: list of nodes that are all <a href="#phrasing-content">phrasing content</a>, with no
11332: <a href="#parse-error" title="parse error">parse errors</a> having occurred, with
11333: no <code><a href="#the-script-element">script</a></code> elements being anywhere in the list or as
11334: descendants of elements in the list, and with all the elements in
11335: the list (including their descendants) being themselves
11336: conforming.</p><p>The <code><a href="#the-iframe-element">iframe</a></code> element must be empty in <a href="#xml-documents">XML
11337: documents</a>.</p><p class="note">The <a href="#html-parser">HTML parser</a> treats markup inside
11338: <code><a href="#the-iframe-element">iframe</a></code> elements as text.</p>
11339: <p>The IDL attributes <dfn id="dom-iframe-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn>, <dfn id="dom-iframe-srcdoc" role="button" tabindex="0" aria-haspopup="true"><code>srcdoc</code></dfn>, <dfn id="dom-iframe-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>, <dfn id="dom-iframe-sandbox" role="button" tabindex="0" aria-haspopup="true"><code>sandbox</code></dfn>, and <dfn id="dom-iframe-seamless" role="button" tabindex="0" aria-haspopup="true"><code>seamless</code></dfn> must
11340: <a href="#reflect">reflect</a> the respective content attributes of the same
11341: name.</p>
11342:
11343: <p>The <dfn id="dom-iframe-contentdocument" role="button" tabindex="0" aria-haspopup="true"><code>contentDocument</code></dfn>
11344: IDL attribute must return the <code><a href="#document">Document</a></code> object of the
11345: <a href="#active-document">active document</a> of the <code><a href="#the-iframe-element">iframe</a></code> element's
11346: <a href="#nested-browsing-context">nested browsing context</a>.</p>
11347:
11348: <p>The <dfn id="dom-iframe-contentwindow" role="button" tabindex="0" aria-haspopup="true"><code>contentWindow</code></dfn>
11349: IDL attribute must return the <code><a href="#windowproxy">WindowProxy</a></code> object of the
11350: <code><a href="#the-iframe-element">iframe</a></code> element's <a href="#nested-browsing-context">nested browsing
11351: context</a>.</p>
11352: <div class="example">
11353:
11354: <p>Here is an example of a page using an <code><a href="#the-iframe-element">iframe</a></code> to
11355: include advertising from an advertising broker:</p>
11356:
11357: <pre><iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
11358: width="468" height="60"></iframe></pre>
11359:
11360: </div><h4 id="the-embed-element"><span class="secno">4.8.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>embed</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11361: <dd><a href="#flow-content">Flow content</a>.</dd>
11362: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
11363: <dd><a href="#embedded-content">Embedded content</a>.</dd>
11364: <dd><a href="#interactive-content">Interactive content</a>.</dd>
1.629 ! mike 11365: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 11366: <dt>Contexts in which this element can be used:</dt>
11367: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
11368: <dt>Content model:</dt>
11369: <dd>Empty.</dd>
11370: <dt>Content attributes:</dt>
11371: <dd><a href="#global-attributes">Global attributes</a></dd>
11372: <dd><code title="attr-embed-src"><a href="#attr-embed-src">src</a></code></dd>
11373: <dd><code title="attr-embed-type"><a href="#attr-embed-type">type</a></code></dd>
11374: <dd><code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></dd>
11375: <dd><code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></dd>
11376: <dd>Any other attribute that has no namespace (see prose).</dd>
11377: <dt>DOM interface:</dt>
11378: <dd>
11379: <pre class="idl">interface <dfn id="htmlembedelement" role="button" tabindex="0" aria-haspopup="true">HTMLEmbedElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
11380: attribute DOMString <a href="#dom-embed-src" title="dom-embed-src">src</a>;
11381: attribute DOMString <a href="#dom-embed-type" title="dom-embed-type">type</a>;
11382: attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
11383: attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
11384: };</pre>
11385:
11386: </dd>
11387: </dl><p>The <code><a href="#the-embed-element">embed</a></code> element <a href="#represents">represents</a> an
11388: integration point for an external (typically non-HTML) application
11389: or interactive content.</p><p>The <dfn id="attr-embed-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> attribute
11390: gives the address of the resource being embedded. The attribute, if
11391: present, must contain a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially
11392: surrounded by spaces</a>.</p><p>The <dfn id="attr-embed-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
11393: attribute, if present, gives the <a href="#mime-type">MIME type</a> by which the
11394: plugin to instantiate is selected. The value must be a <a href="#valid-mime-type">valid
11395: 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
11396: <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute must specify the
11397: same type as the <a href="#content-type" title="Content-Type">explicit Content-Type
11398: metadata</a> of the resource given by the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute.</p><p>Any namespace-less attribute other than <code title="attr-embed-name"><a href="#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> may be specified on the <code><a href="#the-embed-element">embed</a></code> element,
11399: so long as its name is <a href="#xml-compatible">XML-compatible</a> and contains no
11400: characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to
11401: LATIN CAPITAL LETTER Z). These attributes are then passed as
11402: parameters to the <a href="#plugin">plugin</a>.</p><p class="note">All attributes in <a href="#html-documents">HTML documents</a> get
1.544 mike 11403: lowercased automatically, so the restriction on uppercase letters
11404: doesn't affect such documents.</p><p class="note">The four exceptions are to exclude legacy attributes
11405: that have side-effects beyond just sending parameters to the
1.545 mike 11406: <a href="#plugin">plugin</a>.</p><p>The <code><a href="#the-embed-element">embed</a></code> element supports <a href="#dimension-attributes">dimension
11407: attributes</a>.</p>
11408: <p>The IDL attributes <dfn id="dom-embed-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> and <dfn id="dom-embed-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> each must
11409: <a href="#reflect">reflect</a> the respective content attributes of the same
11410: name.</p>
11411: <div class="example">
11412:
11413: <p>Here's a way to embed a resource that requires a proprietary
11414: plugin, like Flash:</p>
11415:
11416: <pre><embed src="catgame.swf"></pre>
11417:
11418: <p>If the user does not have the plugin (for example if the
11419: plugin vendor doesn't support the user's platform), then the user
11420: will be unable to use the resource.</p>
11421:
11422: <p>To pass the plugin a parameter "quality" with the value "high",
11423: an attribute can be specified:</p>
11424:
11425: <pre><embed src="catgame.swf" quality="high"></pre>
11426:
11427: <p>This would be equivalent to the following, when using an
11428: <code><a href="#the-object-element">object</a></code> element instead:</p>
11429:
11430: <pre><object data="catgame.swf">
11431: <param name="quality" value="high">
11432: </object></pre>
11433:
11434: </div><h4 id="the-object-element"><span class="secno">4.8.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>object</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11435: <dd><a href="#flow-content">Flow content</a>.</dd>
11436: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
11437: <dd><a href="#embedded-content">Embedded content</a>.</dd>
11438: <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>
11439: <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>
1.629 ! mike 11440: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 11441: <dt>Contexts in which this element can be used:</dt>
11442: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
11443: <dt>Content model:</dt>
11444: <dd>Zero or more <code><a href="#the-param-element">param</a></code> elements, then, <a href="#transparent">transparent</a>.</dd>
11445: <dt>Content attributes:</dt>
11446: <dd><a href="#global-attributes">Global attributes</a></dd>
11447: <dd><code title="attr-object-data"><a href="#attr-object-data">data</a></code></dd>
11448: <dd><code title="attr-object-type"><a href="#attr-object-type">type</a></code></dd>
11449: <dd><code title="attr-object-typemustmatch"><a href="#attr-object-typemustmatch">typemustmatch</a></code></dd>
11450: <dd><code title="attr-object-name"><a href="#attr-object-name">name</a></code></dd>
11451: <dd><code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code></dd>
11452: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
11453: <dd><code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></dd>
11454: <dd><code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></dd>
11455: <dt>DOM interface:</dt>
11456: <dd>
11457: <pre class="idl">interface <dfn id="htmlobjectelement" role="button" tabindex="0" aria-haspopup="true">HTMLObjectElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
11458: attribute DOMString <a href="#dom-object-data" title="dom-object-data">data</a>;
11459: attribute DOMString <a href="#dom-object-type" title="dom-object-type">type</a>;
11460: attribute boolean <a href="#dom-object-typemustmatch" title="dom-object-typeMustMatch">typeMustMatch</a>;
11461: attribute DOMString <a href="#dom-object-name" title="dom-object-name">name</a>;
11462: attribute DOMString <a href="#dom-object-usemap" title="dom-object-useMap">useMap</a>;
11463: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
11464: attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
11465: attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
11466: readonly attribute Document? <a href="#dom-object-contentdocument" title="dom-object-contentDocument">contentDocument</a>;
11467: readonly attribute <a href="#windowproxy">WindowProxy</a>? <a href="#dom-object-contentwindow" title="dom-object-contentWindow">contentWindow</a>;
11468:
11469: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
11470: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
11471: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
11472: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 11473: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 11474: };</pre>
11475:
11476: </dd>
11477: </dl><p>The <code><a href="#the-object-element">object</a></code> element can represent an external
11478: resource, which, depending on the type of the resource, will either
11479: be treated as an image, as a <a href="#nested-browsing-context">nested browsing context</a>,
11480: or as an external resource to be processed by a
11481: <a href="#plugin">plugin</a>.</p><p>The <dfn id="attr-object-data" role="button" tabindex="0" aria-haspopup="true"><code>data</code></dfn>
11482: attribute, if present, specifies the address of the resource. If
11483: present, the attribute must be a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty
11484: URL potentially surrounded by spaces</a>.</p><p class="warning">Authors who reference resources from other <a href="#origin" title="origin">origins</a> that they do not trust are urged to
11485: use the <code title="attr-object-typemustmatch"><a href="#attr-object-typemustmatch">typemustmatch</a></code>
11486: attribute defined below. Without that attribute, it is possible in
11487: certain cases for an attacker on the remote host to use the plugin
11488: mechanism to run arbitrary scripts, even if the author has used
11489: features such as the Flash "allowScriptAccess" parameter.</p><p>The <dfn id="attr-object-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
11490: attribute, if present, specifies the type of the resource. If
11491: present, the attribute must be a <a href="#valid-mime-type">valid MIME type</a>.</p><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><p>The <dfn id="attr-object-typemustmatch" role="button" tabindex="0" aria-haspopup="true"><code>typemustmatch</code></dfn>
11492: attribute is a <a href="#boolean-attribute">boolean attribute</a> whose presence
11493: indicates that the resource specified by the <code title="attr-object-data"><a href="#attr-object-data">data</a></code> attribute is only to be used if
11494: the value of the <code title="attr-object-type"><a href="#attr-object-type">type</a></code>
11495: attribute and the <a href="#content-type">Content-Type</a> of the aforementioned
11496: resource match.</p><p>The <code title="attr-object-typemustmatch"><a href="#attr-object-typemustmatch">typemustmatch</a></code>
11497: attribute must not be specified unless both the <code title="attr-object-data"><a href="#attr-object-data">data</a></code> attribute and the <code title="attr-object-type"><a href="#attr-object-type">type</a></code> attribute are present.</p><p>The <dfn id="attr-object-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>
11498: attribute, if present, must be a <a href="#valid-browsing-context-name">valid browsing context
11499: name</a>. The given value is used to name the <a href="#nested-browsing-context">nested
11500: browsing context</a>, if applicable.</p><p>The <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code> attribute,
11501: if present while the <code><a href="#the-object-element">object</a></code> element represents an
11502: image, can indicate that the object has an associated <a href="#image-map">image
11503: map</a>. <span class="impl">The attribute must be ignored if the
11504: <code><a href="#the-object-element">object</a></code> element doesn't represent an image.</span></p><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
11505: explicitly associate the <code><a href="#the-object-element">object</a></code> element with its
11506: <a href="#form-owner">form owner</a>.</p><p>The <code><a href="#the-object-element">object</a></code> element supports <a href="#dimension-attributes">dimension
11507: attributes</a>.</p>
11508: <p>The IDL attributes <dfn id="dom-object-data" role="button" tabindex="0" aria-haspopup="true"><code>data</code></dfn>, <dfn id="dom-object-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>, <dfn id="dom-object-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>, and <dfn id="dom-object-usemap" role="button" tabindex="0" aria-haspopup="true"><code>useMap</code></dfn> each must
11509: <a href="#reflect">reflect</a> the respective content attributes of the same
11510: name.</p>
11511:
11512: <p>The <dfn id="dom-object-typemustmatch" role="button" tabindex="0" aria-haspopup="true"><code>typeMustMatch</code></dfn> IDL
11513: attribute must <a href="#reflect">reflect</a> the <code title="attr-object-typemustmatch"><a href="#attr-object-typemustmatch">typemustmatch</a></code> content
11514: attribute.</p>
11515:
11516: <p>The <dfn id="dom-object-contentdocument" role="button" tabindex="0" aria-haspopup="true"><code>contentDocument</code></dfn>
11517: IDL attribute must return the <code><a href="#document">Document</a></code> object of the
11518: <a href="#active-document">active document</a> of the <code><a href="#the-object-element">object</a></code> element's
11519: <a href="#nested-browsing-context">nested browsing context</a>, if it has one; otherwise, it
11520: must return null.</p>
11521:
11522: <p>The <dfn id="dom-object-contentwindow" role="button" tabindex="0" aria-haspopup="true"><code>contentWindow</code></dfn>
11523: IDL attribute must return the <code><a href="#windowproxy">WindowProxy</a></code> object of the
11524: <code><a href="#the-object-element">object</a></code> element's <a href="#nested-browsing-context">nested browsing context</a>,
11525: if it has one; otherwise, it must return null.</p>
11526: <div class="example">
11527:
11528: <p>In the following example, a Java applet is embedded in a page
11529: using the <code><a href="#the-object-element">object</a></code> element. (Generally speaking, it is
11530: better to avoid using applets like these and instead use native
11531: JavaScript and HTML to provide the functionality, since that way
11532: the application will work on all Web browsers without requiring a
11533: third-party plugin. Many devices, especially embedded devices, do
11534: not support third-party technologies like Java.)</p>
11535:
11536: <pre><figure>
11537: <object type="application/x-java-applet">
11538: <param name="code" value="MyJavaClass">
11539: <p>You do not have Java available, or it is disabled.</p>
11540: </object>
11541: <figcaption>My Java Clock</figcaption>
11542: </figure></pre>
11543:
11544: </div><div class="example">
11545:
11546: <p>In this example, an HTML page is embedded in another using the
11547: <code><a href="#the-object-element">object</a></code> element.</p>
11548:
11549: <pre><figure>
11550: <object data="clock.html"></object>
11551: <figcaption>My HTML Clock</figcaption>
11552: </figure></pre>
11553:
11554: </div><div class="example">
11555:
11556: <p>The following example shows how a plugin can be used in HTML (in
11557: this case the Flash plugin, to show a video file). Fallback is
11558: provided for users who do not have Flash enabled, in this case
11559: using the <code><a href="#the-video-element">video</a></code> element to show the video for those
11560: using user agents that support <code><a href="#the-video-element">video</a></code>, and finally
11561: providing a link to the video for those who have neither Flash nor
11562: a <code><a href="#the-video-element">video</a></code>-capable browser.</p>
11563:
11564: <pre><p>Look at my video:
11565: <object type="application/x-shockwave-flash">
11566: <param name=movie value="http://video.example.com/library/watch.swf">
11567: <param name=allowfullscreen value=true>
11568: <param name=flashvars value="http://video.example.com/vids/315981">
11569: <video controls src="http://video.example.com/vids/315981">
11570: <a href="http://video.example.com/vids/315981">View video</a>.
11571: </video>
11572: </object>
11573: </p></pre>
11574:
11575: </div><h4 id="the-param-element"><span class="secno">4.8.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>param</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11576: <dd>None.</dd>
11577: <dt>Contexts in which this element can be used:</dt>
11578: <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>
11579: <dt>Content model:</dt>
11580: <dd>Empty.</dd>
11581: <dt>Content attributes:</dt>
11582: <dd><a href="#global-attributes">Global attributes</a></dd>
11583: <dd><code title="attr-param-name"><a href="#attr-param-name">name</a></code></dd>
11584: <dd><code title="attr-param-value"><a href="#attr-param-value">value</a></code></dd>
11585: <dt>DOM interface:</dt>
11586: <dd>
11587: <pre class="idl">interface <dfn id="htmlparamelement" role="button" tabindex="0" aria-haspopup="true">HTMLParamElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
11588: attribute DOMString <a href="#dom-param-name" title="dom-param-name">name</a>;
11589: attribute DOMString <a href="#dom-param-value" title="dom-param-value">value</a>;
11590: };</pre>
11591: </dd>
11592: </dl><p>The <code><a href="#the-param-element">param</a></code> element defines parameters for plugins
11593: invoked by <code><a href="#the-object-element">object</a></code> elements. It does not <a href="#represents" title="represents">represent</a> anything on its own.</p><p>The <dfn id="attr-param-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>
11594: attribute gives the name of the parameter.</p><p>The <dfn id="attr-param-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn>
11595: attribute gives the value of the parameter.</p><p>Both attributes must be present. They may have any value.</p>
11596: <p>The IDL attributes <dfn id="dom-param-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> and <dfn id="dom-param-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> must both
11597: <a href="#reflect">reflect</a> the respective content attributes of the same
11598: name.</p>
11599: <div class="example">
11600:
11601: <p>The following example shows how the <code><a href="#the-param-element">param</a></code> element
11602: can be used to pass a parameter to a plugin, in this case the O3D
11603: plugin.</p>
11604:
11605: <pre><!DOCTYPE HTML>
11606: <html lang="en">
11607: <head>
11608: <title>O3D Utah Teapot</title>
11609: </head>
11610: <body>
11611: <p>
11612: <object type="application/vnd.o3d.auto">
11613: <strong><param name="o3d_features" value="FloatingPointTextures"></strong>
11614: <img src="o3d-teapot.png"
11615: title="3D Utah Teapot illustration rendered using O3D."
11616: alt="When O3D renders the Utah Teapot, it appears as a squat
11617: teapot with a shiny metallic finish on which the
11618: surroundings are reflected, with a faint shadow caused by
11619: the lighting.">
11620: <p>To see the teapot actually rendered by O3D on your
11621: computer, please download and install the <a
11622: href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
11623: </object>
11624: <script src="o3d-teapot.js"></script>
11625: </p>
11626: </body>
11627: </html></pre>
11628:
11629: </div><h4 id="the-video-element"><span class="secno">4.8.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>video</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11630: <dd><a href="#flow-content">Flow content</a>.</dd>
11631: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
11632: <dd><a href="#embedded-content">Embedded content</a>.</dd>
11633: <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>
1.629 ! mike 11634: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 11635: <dt>Contexts in which this element can be used:</dt>
11636: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
11637: <dt>Content model:</dt>
11638: <dd>If the element has a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute:
11639: zero or more <code><a href="#the-track-element">track</a></code> elements, then
11640: <a href="#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd>
11641: <dd>If the element does not have a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute: zero or more <code><a href="#the-source-element">source</a></code> elements, then
11642: zero or more <code><a href="#the-track-element">track</a></code> elements, then
11643: <a href="#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd>
11644: <dt>Content attributes:</dt>
11645: <dd><a href="#global-attributes">Global attributes</a></dd>
11646: <dd><code title="attr-media-src"><a href="#attr-media-src">src</a></code></dd>
11647: <dd><code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">crossorigin</a></code></dd>
11648: <dd><code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code></dd>
11649: <dd><code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code></dd>
11650: <dd><code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code></dd>
11651: <dd><code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code></dd>
11652: <dd><code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code></dd>
11653: <dd><code title="attr-media-muted"><a href="#attr-media-muted">muted</a></code></dd>
11654: <dd><code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code></dd>
11655: <dd><code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></dd>
11656: <dd><code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></dd>
11657: <dt>DOM interface:</dt>
11658: <dd>
11659: <pre class="idl">interface <dfn id="htmlvideoelement" role="button" tabindex="0" aria-haspopup="true">HTMLVideoElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> {
11660: attribute unsigned long <a href="#dom-dim-width" title="dom-dim-width">width</a>;
11661: attribute unsigned long <a href="#dom-dim-height" title="dom-dim-height">height</a>;
11662: readonly attribute unsigned long <a href="#dom-video-videowidth" title="dom-video-videoWidth">videoWidth</a>;
11663: readonly attribute unsigned long <a href="#dom-video-videoheight" title="dom-video-videoHeight">videoHeight</a>;
11664: attribute DOMString <a href="#dom-video-poster" title="dom-video-poster">poster</a>;
11665: };</pre>
11666: </dd>
11667: </dl><p>A <code><a href="#the-video-element">video</a></code> element is used for playing videos or
11668: movies, and audio files with captions.</p><p>Content may be provided inside the <code><a href="#the-video-element">video</a></code>
11669: element<span class="impl">. User agents should not show this content
11670: to the user</span>; it is intended for older Web browsers which do
11671: not support <code><a href="#the-video-element">video</a></code>, so that legacy video plugins can be
11672: tried, or to show text to the users of these older browsers informing
11673: them of how to access the video contents.</p><p class="note">In particular, this content is not intended to
1.544 mike 11674: address accessibility concerns. To make video content accessible to
11675: the blind, deaf, and those with other physical or cognitive
11676: disabilities, a variety of features are available. Captions can be
11677: provided, either embedded in the video stream or as external files
11678: using the <code><a href="#the-track-element">track</a></code> element. Sign-language tracks can be
11679: provided, again either embedded in the video stream or by
11680: synchronizing multiple <code><a href="#the-video-element">video</a></code> elements using the <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code> attribute or a
11681: <code><a href="#mediacontroller">MediaController</a></code> object. Audio descriptions can be
11682: provided, either as a separate track embedded in the video stream,
11683: or a separate audio track in an <code><a href="#the-audio-element">audio</a></code> element <a href="#slaved-media-elements" title="slaved media elements">slaved</a> to the same controller
11684: as the <code><a href="#the-video-element">video</a></code> element(s), or in text form using a
11685: <span>WebVTT file</span> referenced using the <code><a href="#the-track-element">track</a></code>
11686: element and synthesized into speech by the user agent. WebVTT can
11687: also be used to provide chapter titles. For users who would rather
11688: not use a media element at all, transcripts or other textual
11689: alternatives can be provided by simply linking to them in the prose
1.545 mike 11690: near the <code><a href="#the-video-element">video</a></code> element.</p><p>The <code><a href="#the-video-element">video</a></code> element is a <a href="#media-element">media element</a>
11691: whose <a href="#media-data">media data</a> is ostensibly video data, possibly
11692: with associated audio data.</p><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>,
11693: <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code>,
11694: <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>,
11695: <code title="attr-media-muted"><a href="#attr-media-muted">muted</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
11696: elements</a>.</p><p>The <dfn id="attr-video-poster" role="button" tabindex="0" aria-haspopup="true"><code>poster</code></dfn>
11697: attribute gives the address of an image file that the user agent can
11698: show while no video data is available. The attribute, if present,
11699: must contain a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
11700: spaces</a>.</p><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
1.544 mike 11701: frame</a></i>, is intended to be a representative frame of the video
11702: (typically one of the first non-blank frames) that gives the user an
1.545 mike 11703: idea of what the video is like.</p><dl class="domintro"><dt><var title="">video</var> . <code title="dom-video-videoWidth" id="dom-video-videowidth"><a href="#dom-video-videowidth">videoWidth</a></code></dt>
11704: <dt><var title="">video</var> . <code title="dom-video-videoHeight" id="dom-video-videoheight"><a href="#dom-video-videoheight">videoHeight</a></code></dt>
11705:
11706: <dd>
11707:
11708: <p>These attributes return the intrinsic dimensions of the video,
11709: or zero if the dimensions are not known.</p>
11710:
11711: </dd>
11712:
11713: </dl><p>The <code><a href="#the-video-element">video</a></code> element supports <a href="#dimension-attributes">dimension
11714: attributes</a>.</p>
11715: <p>The <dfn id="dom-video-poster" role="button" tabindex="0" aria-haspopup="true"><code>poster</code></dfn> IDL
11716: attribute must <a href="#reflect">reflect</a> the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> content attribute.</p>
11717: <div class="example">
11718:
11719: <p>This example shows how to detect when a video has failed to play
11720: correctly:</p>
11721:
11722: <pre><script>
11723: function failed(e) {
11724: // video playback failed - show a message saying why
11725: switch (e.target.error.code) {
11726: case e.target.error.MEDIA_ERR_ABORTED:
11727: alert('You aborted the video playback.');
11728: break;
11729: case e.target.error.MEDIA_ERR_NETWORK:
11730: alert('A network error caused the video download to fail part-way.');
11731: break;
11732: case e.target.error.MEDIA_ERR_DECODE:
11733: alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
11734: break;
11735: case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
11736: alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
11737: break;
11738: default:
11739: alert('An unknown error occurred.');
11740: break;
11741: }
11742: }
11743: </script>
11744: <p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
11745: <p><a href="tgif.vid">Download the video file</a>.</p></pre>
11746:
11747: </div><h4 id="the-audio-element"><span class="secno">4.8.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>audio</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11748: <dd><a href="#flow-content">Flow content</a>.</dd>
11749: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
11750: <dd><a href="#embedded-content">Embedded content</a>.</dd>
11751: <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>
1.629 ! mike 11752: <dd>If the element has a <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute: <a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 11753: <dt>Contexts in which this element can be used:</dt>
11754: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
11755: <dt>Content model:</dt>
11756: <dd>If the element has a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute:
11757: zero or more <code><a href="#the-track-element">track</a></code> elements, then
11758: <a href="#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd>
1.565 mike 11759: <dd>If the element does not have a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute: zero or more <code><a href="#the-source-element">source</a></code> elements, then
1.545 mike 11760: zero or more <code><a href="#the-track-element">track</a></code> elements, then
11761: <a href="#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd>
11762: <dt>Content attributes:</dt>
11763: <dd><a href="#global-attributes">Global attributes</a></dd>
11764: <dd><code title="attr-media-src"><a href="#attr-media-src">src</a></code></dd>
11765: <dd><code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">crossorigin</a></code></dd>
11766: <dd><code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code></dd>
11767: <dd><code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code></dd>
11768: <dd><code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code></dd>
11769: <dd><code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code></dd>
11770: <dd><code title="attr-media-muted"><a href="#attr-media-muted">muted</a></code></dd>
11771: <dd><code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code></dd>
11772: <dt>DOM interface:</dt>
11773: <dd>
11774: <pre class="idl">[NamedConstructor=<a href="#dom-audio" title="dom-Audio">Audio</a>(),
1.562 mike 11775: NamedConstructor=<a href="#dom-audio-s" title="dom-Audio-s">Audio</a>(DOMString src)]
1.545 mike 11776: interface <dfn id="htmlaudioelement" role="button" tabindex="0" aria-haspopup="true">HTMLAudioElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> {};</pre>
11777: </dd>
11778: </dl><p>An <code><a href="#the-audio-element">audio</a></code> element <a href="#represents">represents</a> a sound or
11779: audio stream.</p><p>Content may be provided inside the <code><a href="#the-audio-element">audio</a></code>
11780: element<span class="impl">. User agents should not show this content
11781: to the user</span>; it is intended for older Web browsers which do
11782: not support <code><a href="#the-audio-element">audio</a></code>, so that legacy audio plugins can be
11783: tried, or to show text to the users of these older browsers informing
11784: them of how to access the audio contents.</p><p class="note">In particular, this content is not intended to
1.544 mike 11785: address accessibility concerns. To make audio content accessible to
11786: the deaf or to those with other physical or cognitive disabilities,
11787: a variety of features are available. If captions or a sign language
11788: video are available, the <code><a href="#the-video-element">video</a></code> element can be used
11789: instead of the <code><a href="#the-audio-element">audio</a></code> element to play the audio,
11790: allowing users to enable the visual alternatives. Chapter titles can
11791: be provided to aid navigation, using the <code><a href="#the-track-element">track</a></code> element
11792: and a WebVTT file. And, naturally, transcripts or other textual
11793: alternatives can be provided by simply linking to them in the prose
1.545 mike 11794: near the <code><a href="#the-audio-element">audio</a></code> element.</p><p>The <code><a href="#the-audio-element">audio</a></code> element is a <a href="#media-element">media element</a>
11795: whose <a href="#media-data">media data</a> is ostensibly audio data.</p><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>,
11796: <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code>,
11797: <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>,
11798: <code title="attr-media-muted"><a href="#attr-media-muted">muted</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
11799: elements</a>.</p><dl class="domintro"><dt><var title="">audio</var> = new <code title="dom-Audio" id="dom-audio"><a href="#dom-audio">Audio</a></code>( [ <var title="">url</var> ] )</dt>
11800:
11801: <dd>
11802:
11803: <p>Returns a new <code><a href="#the-audio-element">audio</a></code> element, with the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute set to the value
11804: passed in the argument, if applicable.</p>
11805:
11806: </dd>
11807:
11808: </dl><h4 id="the-source-element"><span class="secno">4.8.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>source</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11809: <dd>None.</dd>
11810: <dt>Contexts in which this element can be used:</dt>
11811: <dd>As a child of a <a href="#media-element">media element</a>, before any <a href="#flow-content">flow content</a>
11812: or <code><a href="#the-track-element">track</a></code> elements.</dd>
11813: <dt>Content model:</dt>
11814: <dd>Empty.</dd>
11815: <dt>Content attributes:</dt>
11816: <dd><a href="#global-attributes">Global attributes</a></dd>
11817: <dd><code title="attr-source-src"><a href="#attr-source-src">src</a></code></dd>
11818: <dd><code title="attr-source-type"><a href="#attr-source-type">type</a></code></dd>
11819: <dd><code title="attr-source-media"><a href="#attr-source-media">media</a></code></dd>
11820: <dt>DOM interface:</dt>
11821: <dd>
11822: <pre class="idl">interface <dfn id="htmlsourceelement" role="button" tabindex="0" aria-haspopup="true">HTMLSourceElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
11823: attribute DOMString <a href="#dom-source-src" title="dom-source-src">src</a>;
11824: attribute DOMString <a href="#dom-source-type" title="dom-source-type">type</a>;
11825: attribute DOMString <a href="#dom-source-media" title="dom-source-media">media</a>;
11826: };</pre>
11827: </dd>
11828: </dl><p>The <code><a href="#the-source-element">source</a></code> element allows authors to specify
11829: multiple alternative <a href="#media-resource" title="media resource">media
11830: resources</a> for <a href="#media-element" title="media element">media
11831: elements</a>. It does not <a href="#represents" title="represents">represent</a> anything on its own.</p><p>The <dfn id="attr-source-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> attribute
11832: gives the address of the <a href="#media-resource">media resource</a>. The value must
11833: be a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
11834: spaces</a>. This attribute must be present.</p><p class="note">Dynamically modifying a <code><a href="#the-source-element">source</a></code> element
1.544 mike 11835: and its attribute when the element is already inserted in a
11836: <code><a href="#the-video-element">video</a></code> or <code><a href="#the-audio-element">audio</a></code> element will have no
11837: effect. To change what is playing, just use the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute on the <a href="#media-element">media
11838: element</a> directly, possibly making use of the <code title="dom-navigator-canPlayType"><a href="#dom-navigator-canplaytype">canPlayType()</a></code> method to
11839: pick from amongst available resources. Generally, manipulating
11840: <code><a href="#the-source-element">source</a></code> elements manually after the document has been
1.545 mike 11841: parsed is an unncessarily complicated approach.</p><p>The <dfn id="attr-source-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
11842: attribute gives the type of the <a href="#media-resource">media resource</a>, to help
11843: the user agent determine if it can play this <a href="#media-resource">media
11844: resource</a> before fetching it. If specified, its value must be
11845: a <a href="#valid-mime-type">valid MIME type</a>. The <code title="">codecs</code>
11846: parameter, which certain MIME types define, might be necessary to
11847: specify exactly how the resource is encoded. <a href="#refsRFC4281">[RFC4281]</a></p><div class="example">
11848:
11849: <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>
11850:
11851: <dl><dt>H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
11852: <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></pre></dd>
11853:
11854: <dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt>
11855: <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'></pre></dd>
11856:
11857: <dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container</dt>
11858: <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'></pre></dd>
11859:
11860: <dt>H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container</dt>
11861: <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'></pre></dd>
11862:
11863:
11864: <dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
11865: <dd><pre><source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'></pre></dd>
11866:
11867: <dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt>
11868: <dd><pre><source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'></pre></dd>
11869:
11870: <dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container</dt>
11871: <dd><pre><source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'></pre></dd>
11872:
11873:
11874: <dt>Theora video and Vorbis audio in Ogg container</dt>
11875: <dd><pre><source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'></pre></dd>
11876:
11877: <dt>Theora video and Speex audio in Ogg container</dt>
11878: <dd><pre><source src='video.ogv' type='video/ogg; codecs="theora, speex"'></pre></dd>
11879:
11880: <dt>Vorbis audio alone in Ogg container</dt>
11881: <dd><pre><source src='audio.ogg' type='audio/ogg; codecs=vorbis'></pre></dd>
11882:
11883: <dt>Speex audio alone in Ogg container</dt>
11884: <dd><pre><source src='audio.spx' type='audio/ogg; codecs=speex'></pre></dd>
11885:
11886: <dt>FLAC audio alone in Ogg container</dt>
11887: <dd><pre><source src='audio.oga' type='audio/ogg; codecs=flac'></pre></dd>
11888:
11889: <dt>Dirac video and Vorbis audio in Ogg container</dt>
11890: <dd><pre><source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'></pre></dd>
11891:
11892:
11893:
11894:
11895:
11896:
11897: </dl></div><p>The <dfn id="attr-source-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>
11898: attribute gives the intended media type of the <a href="#media-resource">media
11899: resource</a>, to help the user agent determine if this
11900: <a href="#media-resource">media resource</a> is useful to the user before fetching
11901: it. Its value must be a <a href="#valid-media-query">valid media query</a>.</p><p id="source-default-media">The default, if the <code title="attr-srouce-media">media</code> attribute is omitted, is
11902: "<code title="">all</code>", meaning that by default the <a href="#media-resource">media
11903: resource</a> is suitable for all media.</p>
11904: <p>The IDL attributes <dfn id="dom-source-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn>, <dfn id="dom-source-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>, and <dfn id="dom-source-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn> must
11905: <a href="#reflect">reflect</a> the respective content attributes of the same
11906: name.</p>
11907: <div class="example">
11908:
11909: <p>If the author isn't sure if the user agents will all be able to
11910: render the media resources provided, the author can listen to the
11911: <code title="event-error">error</code> event on the last
11912: <code><a href="#the-source-element">source</a></code> element and trigger fallback behavior:</p>
11913:
11914: <pre><script>
11915: function fallback(video) {
11916: // replace <video> with its contents
11917: while (video.hasChildNodes()) {
11918: if (video.firstChild instanceof HTMLSourceElement)
11919: video.removeChild(video.firstChild);
11920: else
11921: video.parentNode.insertBefore(video.firstChild, video);
11922: }
11923: video.parentNode.removeChild(video);
11924: }
11925: </script>
11926: <video controls autoplay>
11927: <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
11928: <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
11929: onerror="fallback(parentNode)">
11930: ...
11931: </video></pre>
11932:
11933: </div><h4 id="the-track-element"><span class="secno">4.8.9 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>track</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
11934: <dd>None.</dd>
11935: <dt>Contexts in which this element can be used:</dt>
11936: <dd>As a child of a <a href="#media-element">media element</a>, before any <a href="#flow-content">flow content</a>.</dd>
11937: <dt>Content model:</dt>
11938: <dd>Empty.</dd>
11939: <dt>Content attributes:</dt>
11940: <dd><a href="#global-attributes">Global attributes</a></dd>
11941: <dd><code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code></dd>
11942: <dd><code title="attr-track-src"><a href="#attr-track-src">src</a></code></dd>
11943: <dd><code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code></dd>
11944: <dd><code title="attr-track-label"><a href="#attr-track-label">label</a></code></dd>
11945: <dd><code title="attr-track-default"><a href="#attr-track-default">default</a></code></dd>
11946: <dt>DOM interface:</dt>
11947: <dd>
11948: <pre class="idl">interface <dfn id="htmltrackelement" role="button" tabindex="0" aria-haspopup="true">HTMLTrackElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
11949: attribute DOMString <a href="#dom-track-kind" title="dom-track-kind">kind</a>;
11950: attribute DOMString <a href="#dom-track-src" title="dom-track-src">src</a>;
11951: attribute DOMString <a href="#dom-track-srclang" title="dom-track-srclang">srclang</a>;
11952: attribute DOMString <a href="#dom-track-label" title="dom-track-label">label</a>;
11953: attribute boolean <a href="#dom-track-default" title="dom-track-default">default</a>;
11954:
11955: readonly attribute <a href="#texttrack">TextTrack</a> <a href="#dom-track-track" title="dom-track-track">track</a>;
11956: };</pre>
11957: </dd>
11958: </dl><p>The <code><a href="#the-track-element">track</a></code> element allows authors to specify explicit
11959: external timed <a href="#text-track" title="text track">text 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><p>The <dfn id="attr-track-kind" role="button" tabindex="0" aria-haspopup="true"><code>kind</code></dfn>
11960: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The following
11961: table lists the keywords defined for this attribute. The keyword
11962: given in the first cell of each row maps to the state given in the
11963: second cell.</p><table><thead><tr><th>Keyword
11964: </th><th>State
11965: </th><th>Brief description
11966: </th></tr></thead><tbody><tr><td><dfn id="attr-track-kind-keyword-subtitles" role="button" tabindex="0" aria-haspopup="true"><code>subtitles</code></dfn>
11967: </td><td><dfn id="attr-track-kind-subtitles" role="button" tabindex="0" aria-haspopup="true">Subtitles</dfn>
11968: </td><td>
1.619 mike 11969: Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href="#media-resource">media resource</a>'s audio track).
1.600 mike 11970: Overlaid on the video.
1.545 mike 11971: </td></tr><tr><td><dfn id="attr-track-kind-keyword-captions" role="button" tabindex="0" aria-haspopup="true"><code>captions</code></dfn>
11972: </td><td><dfn id="attr-track-kind-captions" role="button" tabindex="0" aria-haspopup="true">Captions</dfn>
11973: </td><td>
1.619 mike 11974: Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf).
1.600 mike 11975: Overlaid on the video; labeled as appropriate for the hard-of-hearing.
1.545 mike 11976: </td></tr><tr><td><dfn id="attr-track-kind-keyword-descriptions" role="button" tabindex="0" aria-haspopup="true"><code>descriptions</code></dfn>
11977: </td><td><dfn id="attr-track-kind-descriptions" role="button" tabindex="0" aria-haspopup="true">Descriptions</dfn>
11978: </td><td>
1.546 mike 11979: Textual descriptions of the video component of the <a href="#media-resource">media resource</a>, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
11980: Synthesized as audio.
1.545 mike 11981: </td></tr><tr><td><dfn id="attr-track-kind-keyword-chapters" role="button" tabindex="0" aria-haspopup="true"><code>chapters</code></dfn>
11982: </td><td><dfn id="attr-track-kind-chapters" role="button" tabindex="0" aria-haspopup="true">Chapters</dfn>
11983: </td><td>
11984: Chapter titles, intended to be used for navigating the <a href="#media-resource">media resource</a>.
11985: Displayed as an interactive (potentially nested) list in the user agent's interface.
11986: </td></tr><tr><td><dfn id="attr-track-kind-keyword-metadata" role="button" tabindex="0" aria-haspopup="true"><code>metadata</code></dfn>
11987: </td><td><dfn id="attr-track-kind-metadata" role="button" tabindex="0" aria-haspopup="true">Metadata</dfn>
11988: </td><td>
11989: Tracks intended for use from script.
11990: Not displayed by the user agent.
11991: </td></tr></tbody></table><p>The attribute may be omitted. The <i>missing value default</i> is
11992: the <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitles</a> state.</p><p>The <dfn id="attr-track-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> attribute
11993: gives the address of the text track data. The value must be a
11994: <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
11995: spaces</a>. This attribute must be present.</p><p>The <dfn id="attr-track-srclang" role="button" tabindex="0" aria-haspopup="true"><code>srclang</code></dfn>
11996: attribute gives the language of the text track data. The value must
11997: be a valid BCP 47 language tag. This attribute must be present if
11998: the element's <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attribute is
11999: in the <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitles</a>
12000: state. <a href="#refsBCP47">[BCP47]</a></p><p>The <dfn id="attr-track-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>
12001: attribute gives a user-readable title for the track. This title is
12002: used by user agents when listing <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitle</a>, <a href="#attr-track-kind-captions" title="attr-track-kind-captions">caption</a>, and <a href="#attr-track-kind-descriptions" title="attr-track-kind-descriptions">audio description</a> tracks
12003: in their user interface.</p><p>The value of the <code title="attr-track-label"><a href="#attr-track-label">label</a></code>
12004: attribute, if the attribute is present, must not be the empty
12005: string. Furthermore, there must not be two <code><a href="#the-track-element">track</a></code>
12006: 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
12007: state, whose <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code>
12008: attributes are both missing or have values that represent the same
12009: language, and whose <code title="attr-track-label"><a href="#attr-track-label">label</a></code>
12010: attributes are again both missing or both have the same value.</p><p>The <dfn id="attr-track-default" role="button" tabindex="0" aria-haspopup="true"><code>default</code></dfn>
12011: attribute, if specified, indicates that the track is to be enabled
12012: if the user's preferences do not indicate that another track would
12013: be more appropriate. There must not be more than one
12014: <code><a href="#the-track-element">track</a></code> element with the same parent node with the <code title="attr-track-default"><a href="#attr-track-default">default</a></code> attribute specified.</p><dl class="domintro"><dt><var title="">track</var> . <code title="dom-track-track" id="dom-track-track"><a href="#dom-track-track">track</a></code></dt>
12015:
12016: <dd>
12017:
12018: <p>Returns the <code><a href="#texttrack">TextTrack</a></code> object corresponding to the <a href="#text-track">text track</a> of the <code><a href="#the-track-element">track</a></code> element.</p>
12019:
12020: </dd>
12021:
12022: </dl>
12023: <p>The <dfn id="dom-track-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn>, <dfn id="dom-track-srclang" role="button" tabindex="0" aria-haspopup="true"><code>srclang</code></dfn>, <dfn id="dom-track-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>, and <dfn id="dom-track-default" role="button" tabindex="0" aria-haspopup="true"><code>default</code></dfn> IDL attributes
12024: must <a href="#reflect">reflect</a> the respective content attributes of the
12025: same name. The <dfn id="dom-track-kind" role="button" tabindex="0" aria-haspopup="true"><code>kind</code></dfn>
12026: IDL attribute must <a href="#reflect">reflect</a> the content attribute of the
12027: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
12028: <div class="example">
12029:
12030: <p>This video has subtitles in several languages:</p>
12031:
12032: <pre><video src="brave.webm">
12033: <track kind=subtitles src=brave.en.vtt srclang=en label="English">
1.619 mike 12034: <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
1.545 mike 12035: <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
12036: <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
12037: </video></pre>
12038:
12039: </div><h4 id="media-elements"><span class="secno">4.8.10 </span>Media elements</h4><p><dfn id="media-element" role="button" tabindex="0" aria-haspopup="true">Media elements</dfn>
12040: (<code><a href="#the-audio-element">audio</a></code> and <code><a href="#the-video-element">video</a></code>, in this specification)
12041: implement the following interface:</p><pre class="idl">interface <dfn id="htmlmediaelement" role="button" tabindex="0" aria-haspopup="true">HTMLMediaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
12042:
12043: // error state
12044: readonly attribute <a href="#mediaerror">MediaError</a>? <a href="#dom-media-error" title="dom-media-error">error</a>;
12045:
12046: // network state
12047: attribute DOMString <a href="#dom-media-src" title="dom-media-src">src</a>;
12048: readonly attribute DOMString <a href="#dom-media-currentsrc" title="dom-media-currentSrc">currentSrc</a>;
12049: attribute DOMString <a href="#dom-media-crossorigin" title="dom-media-crossOrigin">crossOrigin</a>;
12050: const unsigned short <a href="#dom-media-network_empty" title="dom-media-NETWORK_EMPTY">NETWORK_EMPTY</a> = 0;
12051: const unsigned short <a href="#dom-media-network_idle" title="dom-media-NETWORK_IDLE">NETWORK_IDLE</a> = 1;
12052: const unsigned short <a href="#dom-media-network_loading" title="dom-media-NETWORK_LOADING">NETWORK_LOADING</a> = 2;
12053: const unsigned short <a href="#dom-media-network_no_source" title="dom-media-NETWORK_NO_SOURCE">NETWORK_NO_SOURCE</a> = 3;
12054: readonly attribute unsigned short <a href="#dom-media-networkstate" title="dom-media-networkState">networkState</a>;
12055: attribute DOMString <a href="#dom-media-preload" title="dom-media-preload">preload</a>;
12056: readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-media-buffered" title="dom-media-buffered">buffered</a>;
12057: void <a href="#dom-media-load" title="dom-media-load">load</a>();
1.562 mike 12058: DOMString <a href="#dom-navigator-canplaytype" title="dom-navigator-canPlayType">canPlayType</a>(DOMString type);
1.545 mike 12059:
12060: // ready state
12061: const unsigned short <a href="#dom-media-have_nothing" title="dom-media-HAVE_NOTHING">HAVE_NOTHING</a> = 0;
12062: const unsigned short <a href="#dom-media-have_metadata" title="dom-media-HAVE_METADATA">HAVE_METADATA</a> = 1;
12063: const unsigned short <a href="#dom-media-have_current_data" title="dom-media-HAVE_CURRENT_DATA">HAVE_CURRENT_DATA</a> = 2;
12064: const unsigned short <a href="#dom-media-have_future_data" title="dom-media-HAVE_FUTURE_DATA">HAVE_FUTURE_DATA</a> = 3;
12065: const unsigned short <a href="#dom-media-have_enough_data" title="dom-media-HAVE_ENOUGH_DATA">HAVE_ENOUGH_DATA</a> = 4;
12066: readonly attribute unsigned short <a href="#dom-media-readystate" title="dom-media-readyState">readyState</a>;
12067: readonly attribute boolean <a href="#dom-media-seeking" title="dom-media-seeking">seeking</a>;
12068:
12069: // playback state
12070: attribute double <a href="#dom-media-currenttime" title="dom-media-currentTime">currentTime</a>;
12071: readonly attribute double <a href="#dom-media-initialtime" title="dom-media-initialTime">initialTime</a>;
12072: readonly attribute double <a href="#dom-media-duration" title="dom-media-duration">duration</a>;
12073: readonly attribute <span>Date</span> <a href="#dom-media-startoffsettime" title="dom-media-startOffsetTime">startOffsetTime</a>;
12074: readonly attribute boolean <a href="#dom-media-paused" title="dom-media-paused">paused</a>;
12075: attribute double <a href="#dom-media-defaultplaybackrate" title="dom-media-defaultPlaybackRate">defaultPlaybackRate</a>;
12076: attribute double <a href="#dom-media-playbackrate" title="dom-media-playbackRate">playbackRate</a>;
12077: readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-media-played" title="dom-media-played">played</a>;
12078: readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-media-seekable" title="dom-media-seekable">seekable</a>;
12079: readonly attribute boolean <a href="#dom-media-ended" title="dom-media-ended">ended</a>;
12080: attribute boolean <a href="#dom-media-autoplay" title="dom-media-autoplay">autoplay</a>;
12081: attribute boolean <a href="#dom-media-loop" title="dom-media-loop">loop</a>;
12082: void <a href="#dom-media-play" title="dom-media-play">play</a>();
12083: void <a href="#dom-media-pause" title="dom-media-pause">pause</a>();
12084:
12085: // media controller
12086: attribute <span>DOMString</span> <a href="#dom-media-mediagroup" title="dom-media-mediaGroup">mediaGroup</a>;
12087: attribute <a href="#mediacontroller">MediaController</a>? <a href="#dom-media-controller" title="dom-media-controller">controller</a>;
12088:
12089: // controls
12090: attribute boolean <a href="#dom-media-controls" title="dom-media-controls">controls</a>;
12091: attribute double <a href="#dom-media-volume" title="dom-media-volume">volume</a>;
12092: attribute boolean <a href="#dom-media-muted" title="dom-media-muted">muted</a>;
12093: attribute boolean <a href="#dom-media-defaultmuted" title="dom-media-defaultMuted">defaultMuted</a>;
12094:
12095: // tracks
12096: readonly attribute <a href="#audiotracklist">AudioTrackList</a> <a href="#dom-media-audiotracks" title="dom-media-audioTracks">audioTracks</a>;
12097: readonly attribute <a href="#videotracklist">VideoTrackList</a> <a href="#dom-media-videotracks" title="dom-media-videoTracks">videoTracks</a>;
1.615 mike 12098: readonly attribute <a href="#texttracklist">TextTrackList</a> <a href="#dom-media-texttracks" title="dom-media-textTracks">textTracks</a>;
1.562 mike 12099: <a href="#mutabletexttrack">MutableTextTrack</a> <a href="#dom-media-addtexttrack" title="dom-media-addTextTrack">addTextTrack</a>(DOMString kind, optional DOMString label, optional DOMString language);
1.545 mike 12100: };</pre><p>The <dfn id="media-element-attributes" role="button" tabindex="0" aria-haspopup="true">media element attributes</dfn>, <code title="attr-media-src"><a href="#attr-media-src">src</a></code>, <code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">crossorigin</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>,
12101: <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code>,
12102: <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>,
12103: <code title="attr-media-muted"><a href="#attr-media-muted">muted</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
12104: this section.</p><p><a href="#media-element" title="media element">Media elements</a> are used to
12105: present audio data, or video and audio data, to the user. This is
12106: referred to as <dfn id="media-data" role="button" tabindex="0" aria-haspopup="true">media data</dfn> in this section, since this
12107: section applies equally to <a href="#media-element" title="media element">media
12108: elements</a> for audio or for video.
12109:
12110: The term <dfn id="media-resource" role="button" tabindex="0" aria-haspopup="true">media resource</dfn> is used to refer to the complete
12111: set of media data, e.g. the complete video file, or complete audio
12112: file.
12113:
12114: </p><p>A <a href="#media-resource">media resource</a> can have multiple audio and video
12115: tracks. For the purposes of a <a href="#media-element">media element</a>, the video
12116: data of the <a href="#media-resource">media resource</a> is only that of the
12117: currently selected track (if any) given by the element's <code title="dom-media-videoTracks"><a href="#dom-media-videotracks">videoTracks</a></code> attribute, and the
12118: audio data of the <a href="#media-resource">media resource</a> is the result of
12119: mixing all the currently enabled tracks (if any) given by the
12120: element's <code title="dom-media-audioTracks"><a href="#dom-media-audiotracks">audioTracks</a></code>
12121: attribute.</p><p class="note">Both <code><a href="#the-audio-element">audio</a></code> and <code><a href="#the-video-element">video</a></code>
1.544 mike 12122: elements can be used for both audio and video. The main difference
12123: between the two is simply that the <code><a href="#the-audio-element">audio</a></code> element has no
12124: playback area for visual content (such as video or captions),
1.545 mike 12125: whereas the <code><a href="#the-video-element">video</a></code> element does.</p><h5 id="error-codes"><span class="secno">4.8.10.1 </span>Error codes</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-error" id="dom-media-error"><a href="#dom-media-error">error</a></code></dt>
12126:
12127: <dd>
12128:
12129: <p>Returns a <code><a href="#mediaerror">MediaError</a></code> object representing the
12130: current error state of the element.</p>
12131:
12132: <p>Returns null if there is no error.</p>
12133:
12134: </dd>
12135:
12136: </dl><pre class="idl">interface <dfn id="mediaerror" role="button" tabindex="0" aria-haspopup="true">MediaError</dfn> {
12137: const unsigned short <a href="#dom-mediaerror-media_err_aborted" title="dom-MediaError-MEDIA_ERR_ABORTED">MEDIA_ERR_ABORTED</a> = 1;
12138: const unsigned short <a href="#dom-mediaerror-media_err_network" title="dom-MediaError-MEDIA_ERR_NETWORK">MEDIA_ERR_NETWORK</a> = 2;
12139: const unsigned short <a href="#dom-mediaerror-media_err_decode" title="dom-MediaError-MEDIA_ERR_DECODE">MEDIA_ERR_DECODE</a> = 3;
12140: 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;
12141: readonly attribute unsigned short <a href="#dom-mediaerror-code" title="dom-MediaError-code">code</a>;
12142: };</pre><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" id="dom-mediaerror-code"><a href="#dom-mediaerror-code">code</a></code></dt>
12143:
12144: <dd>
12145:
12146: <p>Returns the current error's error code, from the list below.</p>
12147:
12148: </dd>
12149:
12150: </dl><dl><dt><dfn id="dom-mediaerror-media_err_aborted" role="button" tabindex="0" aria-haspopup="true"><code>MEDIA_ERR_ABORTED</code></dfn> (numeric value 1)</dt>
12151:
12152: <dd>The fetching process for the <a href="#media-resource">media resource</a> was
12153: aborted by the user agent at the user's request.</dd>
12154:
12155: <dt><dfn id="dom-mediaerror-media_err_network" role="button" tabindex="0" aria-haspopup="true"><code>MEDIA_ERR_NETWORK</code></dfn> (numeric value 2)</dt>
12156:
12157: <dd>A network error of some description caused the user agent to
12158: stop fetching the <a href="#media-resource">media resource</a>, after the resource
12159: was established to be usable.</dd>
12160:
12161: <dt><dfn id="dom-mediaerror-media_err_decode" role="button" tabindex="0" aria-haspopup="true"><code>MEDIA_ERR_DECODE</code></dfn> (numeric value 3)</dt>
12162:
12163: <dd>An error of some description occurred while decoding the
12164: <a href="#media-resource">media resource</a>, after the resource was established to
12165: be usable.</dd>
12166:
12167: <dt><dfn id="dom-mediaerror-media_err_src_not_supported" role="button" tabindex="0" aria-haspopup="true"><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></dfn> (numeric value 4)</dt>
12168:
12169: <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>
12170:
12171: </dl><h5 id="location-of-the-media-resource"><span class="secno">4.8.10.2 </span>Location of the media resource</h5><p>The <dfn id="attr-media-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> content
12172: attribute on <a href="#media-element" title="media element">media elements</a> gives
12173: the address of the media resource (video, audio) to show. The
12174: attribute, if present, must contain a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty
12175: URL potentially surrounded by spaces</a>.</p><p>The <dfn id="attr-media-crossorigin" role="button" tabindex="0" aria-haspopup="true"><code>crossorigin</code></dfn>
12176: content attribute on <a href="#media-element" title="media element">media
12177: elements</a> is a <a href="#cors-settings-attribute">CORS settings attribute</a>.</p>
12178: <p>The <dfn id="dom-media-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> IDL
12179: attribute on <a href="#media-element" title="media element">media elements</a> must
12180: <a href="#reflect">reflect</a> the content attribute of the same name.</p>
12181:
12182: <p>The <dfn id="dom-media-crossorigin" role="button" tabindex="0" aria-haspopup="true"><code>crossOrigin</code></dfn> IDL
12183: attribute must <a href="#reflect">reflect</a> the <code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">crossorigin</a></code> content
12184: attribute.</p>
12185: <dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-currentSrc" id="dom-media-currentsrc"><a href="#dom-media-currentsrc">currentSrc</a></code></dt>
12186:
12187: <dd>
12188:
12189: <p>Returns the address of the current <a href="#media-resource">media resource</a>.</p>
12190:
12191: <p>Returns the empty string when there is no <a href="#media-resource">media resource</a>.</p>
12192:
12193: </dd>
12194:
12195: </dl><p class="note">There are two ways to specify a <a href="#media-resource">media
1.544 mike 12196: resource</a>, the <code title="attr-media-src"><a href="#attr-media-src">src</a></code>
12197: attribute, or <code><a href="#the-source-element">source</a></code> elements. The attribute overrides
1.545 mike 12198: the elements.</p><h5 id="mime-types"><span class="secno">4.8.10.3 </span>MIME types</h5><p>A <a href="#media-resource">media resource</a> can be described in terms of its
12199: <em>type</em>, specifically a <a href="#mime-type">MIME type</a>, in some cases
12200: with a <code title="">codecs</code> parameter. (Whether the <code title="">codecs</code> parameter is allowed or not depends on the
12201: MIME type.) <a href="#refsRFC4281">[RFC4281]</a></p><p>Types are usually somewhat incomplete descriptions; for example
12202: "<code title="">video/mpeg</code>" doesn't say anything except what
12203: the container type is, and even a type like "<code title="">video/mp4; codecs="avc1.42E01E,
12204: mp4a.40.2"</code>" doesn't include information like the actual
12205: bitrate (only the maximum bitrate). Thus, given a type, a user agent
12206: can often only know whether it <em>might</em> be able to play
12207: media of that type (with varying levels of confidence), or whether
12208: it definitely <em>cannot</em> play media of that type.</p><p><dfn id="a-type-that-the-user-agent-knows-it-cannot-render" role="button" tabindex="0" aria-haspopup="true">A type that the user agent knows it cannot render</dfn> is
12209: one that describes a resource that the user agent definitely does
12210: not support, for example because it doesn't recognize the container
12211: type, or it doesn't support the listed codecs.</p><p>The <a href="#mime-type">MIME type</a>
12212: "<code>application/octet-stream</code>" with no parameters is never
12213: <a href="#a-type-that-the-user-agent-knows-it-cannot-render">a type that the user agent knows it cannot render</a>. User
12214: agents must treat that type as equivalent to the lack of any
12215: explicit <a href="#content-type" title="Content-Type">Content-Type metadata</a>
12216: when it is used to label a potential <a href="#media-resource">media
12217: resource</a>.</p><p class="note">
1.544 mike 12218: "<code>application/octet-stream</code>"
12219: is special-cased here; if any parameter appears with it, it
12220: should
12221:
12222: be treated just like any other <a href="#mime-type">MIME type</a>.
1.1 mike 12223:
1.544 mike 12224: This is a deviation from the rule that unknown <a href="#mime-type">MIME type</a> parameters
12225: should be ignored.
1.158 mike 12226:
1.544 mike 12227:
1.545 mike 12228: </p><dl class="domintro"><dt><var title="">media</var> . <code title="dom-navigator-canPlayType" id="dom-navigator-canplaytype"><a href="#dom-navigator-canplaytype">canPlayType</a></code>(<var title="">type</var>)</dt>
12229:
12230: <dd>
12231:
12232: <p>Returns the empty string (a negative response), "maybe", or
12233: "probably" based on how confident the user agent is that it can
12234: play media resources of the given type.</p>
12235:
12236: </dd>
12237:
12238: </dl><div class="example">
12239:
12240: <p>This script tests to see if the user agent supports a
12241: (fictional) new format to dynamically decide whether to use a
12242: <code><a href="#the-video-element">video</a></code> element or a plugin:</p>
12243:
12244: <pre><section id="video">
12245: <p><a href="playing-cats.nfv">Download video</a></p>
12246: </section>
12247: <script>
12248: var videoSection = document.getElementById('video');
12249: var videoElement = document.createElement('video');
12250: var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
12251: if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
12252: // not confident of browser support
12253: // but we have a plugin
12254: // so use plugin instead
12255: videoElement = document.createElement("embed");
12256: } else if (support == "") {
12257: // no support from browser and no plugin
12258: // do nothing
12259: videoElement = null;
12260: }
12261: if (videoElement) {
12262: while (videoSection.hasChildNodes())
12263: videoSection.removeChild(videoSection.firstChild);
12264: videoElement.setAttribute("src", "playing-cats.nfv");
12265: videoSection.appendChild(videoElement);
12266: }
12267: </script></pre>
12268:
12269: </div><p class="note">The <code title="attr-source-type"><a href="#attr-source-type">type</a></code>
1.544 mike 12270: attribute of the <code><a href="#the-source-element">source</a></code> element allows the user agent
12271: to avoid downloading resources that use formats it cannot
1.545 mike 12272: render.</p><h5 id="network-states"><span class="secno">4.8.10.4 </span>Network states</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-networkState" id="dom-media-networkstate"><a href="#dom-media-networkstate">networkState</a></code></dt>
12273:
12274: <dd>
12275:
12276: <p>Returns the current state of network activity for the element,
12277: from the codes in the list below.</p>
12278:
12279: </dd>
12280:
12281: </dl><dl><dt><dfn id="dom-media-network_empty" role="button" tabindex="0" aria-haspopup="true"><code>NETWORK_EMPTY</code></dfn> (numeric value 0)</dt>
12282:
12283: <dd>The element has not yet been initialized. All attributes are in
12284: their initial states.</dd>
12285:
12286: <dt><dfn id="dom-media-network_idle" role="button" tabindex="0" aria-haspopup="true"><code>NETWORK_IDLE</code></dfn> (numeric value 1)</dt>
12287:
12288: <dd>The element<span class="impl">'s <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection
12289: algorithm</a> is active and</span> has selected a <a href="#media-resource" title="media resource">resource</a>, but it is not actually
12290: using the network at this time.</dd>
12291:
12292: <dt><dfn id="dom-media-network_loading" role="button" tabindex="0" aria-haspopup="true"><code>NETWORK_LOADING</code></dfn> (numeric value 2)</dt>
12293:
12294: <dd>The user agent is actively trying to download data.</dd>
12295:
12296: <dt><dfn id="dom-media-network_no_source" role="button" tabindex="0" aria-haspopup="true"><code>NETWORK_NO_SOURCE</code></dfn> (numeric value 3)</dt>
12297:
12298: <dd>The element<span class="impl">'s <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection
12299: algorithm</a> is active, but it</span> has not yet found a <a href="#media-resource" title="media resource">resource</a> to use.</dd>
12300:
12301: </dl><h5 id="loading-the-media-resource"><span class="secno">4.8.10.5 </span>Loading the media resource</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-load" id="dom-media-load"><a href="#dom-media-load">load</a></code>()</dt>
12302:
12303: <dd>
12304:
12305: <p>Causes the element to reset and start selecting and loading a
12306: new <a href="#media-resource">media resource</a> from scratch.</p>
12307:
12308: </dd>
12309:
12310: </dl><hr><p>The <dfn id="attr-media-preload" role="button" tabindex="0" aria-haspopup="true"><code>preload</code></dfn>
12311: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The following table
12312: lists the keywords and states for the attribute — the keywords
12313: in the left column map to the states in the cell in the second
12314: column on the same row as the keyword.</p><table><thead><tr><th> Keyword
12315: </th><th> State
12316: </th><th> Brief description
12317: </th></tr></thead><tbody><tr><td><dfn id="attr-media-preload-none" role="button" tabindex="0" aria-haspopup="true"><code>none</code></dfn>
12318: </td><td><dfn id="attr-media-preload-none-state" role="button" tabindex="0" aria-haspopup="true">None</dfn>
12319: </td><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.
12320: </td></tr><tr><td><dfn id="attr-media-preload-metadata" role="button" tabindex="0" aria-haspopup="true"><code>metadata</code></dfn>
12321: </td><td><dfn id="attr-media-preload-metadata-state" role="button" tabindex="0" aria-haspopup="true">Metadata</dfn>
12322: </td><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. If the user agent precisely fetches no more than the metadata, then the <a href="#media-element">media element</a> will end up with its <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute set to <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code>; typically though, some frames will be obtained as well and it will probably be <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code>.
12323: </td></tr><tr><td><dfn id="attr-media-preload-auto" role="button" tabindex="0" aria-haspopup="true"><code>auto</code></dfn>
12324: </td><td><dfn id="attr-media-preload-auto-state" role="button" tabindex="0" aria-haspopup="true">Automatic</dfn>
12325: </td><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.
12326: </td></tr></tbody></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
12327: attribute's <i>missing value default</i> is user-agent defined,
12328: though the <a href="#attr-media-preload-metadata-state" title="attr-media-preload-metadata-state">Metadata</a> state is
12329: suggested as a compromise between reducing server load and providing
12330: an optimal user experience.</p>
12331: <p>The <dfn id="dom-media-preload" role="button" tabindex="0" aria-haspopup="true"><code>preload</code></dfn> IDL
12332: attribute must <a href="#reflect">reflect</a> the content attribute of the
12333: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
12334: <p class="note">The <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> attribute can override
1.544 mike 12335: the <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> attribute (since
12336: if the media plays, it naturally has to buffer first, regardless of
12337: the hint given by the <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> attribute). Including
1.545 mike 12338: both is not an error, however.</p><hr><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-buffered" id="dom-media-buffered"><a href="#dom-media-buffered">buffered</a></code></dt>
12339:
12340: <dd>
12341:
12342: <p>Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the
12343: ranges of the <a href="#media-resource">media resource</a> that the user agent has
12344: buffered.</p>
12345:
12346: </dd>
12347:
12348: </dl><h5 id="offsets-into-the-media-resource"><span class="secno">4.8.10.6 </span>Offsets into the media resource</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-duration" id="dom-media-duration"><a href="#dom-media-duration">duration</a></code></dt>
12349:
12350: <dd>
12351:
12352: <p>Returns the length of the <a href="#media-resource">media resource</a>, in
12353: seconds, assuming that the start of the <a href="#media-resource">media
12354: resource</a> is at time zero.</p>
12355:
12356: <p>Returns NaN if the duration isn't available.</p><p>
12357:
12358: </p><p>Returns Infinity for unbounded streams.</p>
12359:
12360: </dd>
12361:
12362: <dt><var title="">media</var> . <code title="dom-media-currentTime" id="dom-media-currenttime"><a href="#dom-media-currenttime">currentTime</a></code> [ = <var title="">value</var> ]</dt>
12363:
12364: <dd>
12365:
1.577 mike 12366: <p>Returns the <a href="#official-playback-position">official playback position</a>, in seconds.</p>
1.545 mike 12367:
12368: <p>Can be set, to seek to the given time.</p><p>
12369:
1.612 mike 12370: </p><p>Will throw an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if there
1.545 mike 12371: is no selected <a href="#media-resource">media resource</a>
12372: or if there is a <a href="#current-media-controller">current media controller</a>.</p>
12373:
12374: </dd>
12375:
12376: <dt><var title="">media</var> . <code title="dom-media-initialTime" id="dom-media-initialtime"><a href="#dom-media-initialtime">initialTime</a></code></dt>
12377:
12378: <dd>
12379:
12380: <p>Returns the <a href="#initial-playback-position">initial playback position</a>, that is, time
12381: to which the <a href="#media-resource">media resource</a> was automatically seeked
12382: when it was loaded. Returns zero if the <a href="#initial-playback-position">initial playback
12383: position</a> is still unknown.</p>
12384:
12385: </dd>
12386:
12387: </dl>
12388: <p>The <dfn id="dom-media-startoffsettime" role="button" tabindex="0" aria-haspopup="true"><code>startOffsetTime</code></dfn>
12389: attribute must return a new <code>Date</code> object representing
12390: the current <a href="#timeline-offset">timeline offset</a>.</p>
12391: <hr><p>The <dfn id="attr-media-loop" role="button" tabindex="0" aria-haspopup="true"><code>loop</code></dfn>
12392: attribute is a <a href="#boolean-attribute">boolean attribute</a> that, if specified,
12393: indicates that the <a href="#media-element">media element</a> is to seek back to the
12394: start of the <a href="#media-resource">media resource</a> upon reaching the end.</p><p>The <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code> attribute has no
12395: effect while the element has a <a href="#current-media-controller">current media
12396: controller</a>.</p>
12397: <p>The <dfn id="dom-media-loop" role="button" tabindex="0" aria-haspopup="true"><code>loop</code></dfn> IDL
12398: attribute must <a href="#reflect">reflect</a> the content attribute of the
12399: same name.</p>
12400: <h5 id="ready-states"><span class="secno">4.8.10.7 </span>Ready states</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-readyState" id="dom-media-readystate"><a href="#dom-media-readystate">readyState</a></code></dt>
12401:
12402: <dd>
12403:
12404: <p>Returns a value that expresses the current state of the element
12405: with respect to rendering the <a href="#current-playback-position">current playback
12406: position</a>, from the codes in the list below.</p>
12407:
12408: </dd>
12409:
12410: </dl><dl><dt><dfn id="dom-media-have_nothing" role="button" tabindex="0" aria-haspopup="true"><code>HAVE_NOTHING</code></dfn> (numeric value 0)</dt>
12411:
12412: <dd>No information regarding the <a href="#media-resource">media resource</a> is
12413: available. No data for the <a href="#current-playback-position">current playback position</a>
12414: is available. <a href="#media-element" title="media element">Media elements</a>
12415: whose <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code>
12416: attribute are set to <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> are always in
12417: the <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>
12418: state.</dd>
12419:
12420: <dt><dfn id="dom-media-have_metadata" role="button" tabindex="0" aria-haspopup="true"><code>HAVE_METADATA</code></dfn> (numeric value 1)</dt>
12421:
12422: <dd>Enough of the resource has been obtained that the duration of
12423: the resource is available. In the case of a <code><a href="#the-video-element">video</a></code>
12424: element, the dimensions of the video are also available. The API
1.612 mike 12425: will no longer throw an exception when seeking. No <a href="#media-data">media
1.545 mike 12426: data</a> is available for the immediate <a href="#current-playback-position">current playback
12427: position</a>.
12428: The <a href="#text-track" title="text track">text tracks</a>
12429: are <a href="#the-text-tracks-are-ready" title="the text tracks are ready">ready</a>.
12430: </dd>
12431:
12432: <dt><dfn id="dom-media-have_current_data" role="button" tabindex="0" aria-haspopup="true"><code>HAVE_CURRENT_DATA</code></dfn> (numeric value 2)</dt>
12433:
12434: <dd>Data for the immediate <a href="#current-playback-position">current playback position</a>
12435: is available, but either not enough data is available that the user
12436: agent could successfully advance the <a href="#current-playback-position">current playback
12437: position</a> in the <a href="#direction-of-playback">direction of playback</a> at all
12438: without immediately reverting to the <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> state, or
12439: there is no more data to obtain in the <a href="#direction-of-playback">direction of
12440: playback</a>. For example, in video this corresponds to the user
12441: agent having data from the current frame, but not the next frame,
12442: when the <a href="#current-playback-position">current playback position</a> is at the end of
12443: the current frame; and to when <a href="#ended-playback" title="ended
12444: playback">playback has ended</a>.</dd>
12445:
12446: <dt><dfn id="dom-media-have_future_data" role="button" tabindex="0" aria-haspopup="true"><code>HAVE_FUTURE_DATA</code></dfn> (numeric value 3)</dt>
12447:
12448: <dd>Data for the immediate <a href="#current-playback-position">current playback position</a>
12449: is available, as well as enough data for the user agent to advance
12450: the <a href="#current-playback-position">current playback position</a> in the <a href="#direction-of-playback">direction
12451: of playback</a> at least a little without immediately reverting
12452: to the <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code>
12453: state. For example, in video this corresponds to the user agent
12454: having data for at least the current frame and the next frame when
12455: the <a href="#current-playback-position">current playback position</a> is at the instant in
12456: time between the two frames, or to the user agent having the video
12457: data for the current frame and audio data to keep playing at least
12458: a little when the <a href="#current-playback-position">current playback position</a> is in the
12459: middle of a frame. The user agent cannot be in this state if <a href="#ended-playback" title="ended playback">playback has ended</a>, as the
12460: <a href="#current-playback-position">current playback position</a> can never advance in this
12461: case.</dd>
12462:
12463: <dt><dfn id="dom-media-have_enough_data" role="button" tabindex="0" aria-haspopup="true"><code>HAVE_ENOUGH_DATA</code></dfn> (numeric value 4)</dt>
12464:
12465: <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
12466: are met, and, in addition, the user agent estimates that data is
12467: being fetched at a rate where the <a href="#current-playback-position">current playback
12468: position</a>, if it were to advance at the <a href="#effective-playback-rate">effective
12469: playback rate</a>, would not overtake the available data before
12470: playback reaches the end of the <a href="#media-resource">media resource</a>.</dd>
12471:
12472: </dl><p class="note">In practice, the difference between <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> and <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> is
1.544 mike 12473: negligible. Really the only time the difference is relevant is when
12474: painting a <code><a href="#the-video-element">video</a></code> element onto a <code><a href="#the-canvas-element">canvas</a></code>,
12475: where it distinguishes the case where something will be drawn (<code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or
12476: greater) from the case where nothing is drawn (<code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> or less).
12477: Similarly, the difference between <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> (only
12478: the current frame) and <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> (at least
12479: this frame and the next) can be negligible (in the extreme, only one
12480: frame). The only time that distinction really matters is when a page
12481: provides an interface for "frame-by-frame" navigation.</p><p class="note">It is possible for the ready state of a media
12482: element to jump between these states discontinuously. For example,
12483: 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
12484: passing through the <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> and
12485: <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code>
1.545 mike 12486: states.</p><p>The <dfn id="attr-media-autoplay" role="button" tabindex="0" aria-haspopup="true"><code>autoplay</code></dfn>
12487: attribute is a <a href="#boolean-attribute">boolean attribute</a>. When present, the
12488: user agent <span class="impl">(as described in the algorithm
12489: described herein)</span> will automatically begin playback of the
12490: <a href="#media-resource">media resource</a> as soon as it can do so without
12491: stopping.</p><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
1.544 mike 12492: using script to trigger automatic playback, as this allows the user
12493: to override the automatic playback when it is not desired, e.g. when
12494: using a screen reader. Authors are also encouraged to consider not
12495: using the automatic playback behavior at all, and instead to let the
1.545 mike 12496: user agent wait for the user to start playback explicitly.</p>
12497: <p>The <dfn id="dom-media-autoplay" role="button" tabindex="0" aria-haspopup="true"><code>autoplay</code></dfn>
12498: IDL attribute must <a href="#reflect">reflect</a> the content attribute of the
12499: same name.</p>
12500: <h5 id="playing-the-media-resource"><span class="secno">4.8.10.8 </span>Playing the media resource</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-paused" id="dom-media-paused"><a href="#dom-media-paused">paused</a></code></dt>
12501:
12502: <dd>
12503:
12504: <p>Returns true if playback is paused; false otherwise.</p>
12505:
12506: </dd>
12507:
12508: <dt><var title="">media</var> . <code title="dom-media-ended" id="dom-media-ended"><a href="#dom-media-ended">ended</a></code></dt>
12509:
12510: <dd>
12511:
12512: <p>Returns true if playback has reached the end of the <a href="#media-resource">media resource</a>.</p>
12513:
12514: </dd>
12515:
12516: <dt><var title="">media</var> . <code title="dom-media-defaultPlaybackRate" id="dom-media-defaultplaybackrate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt>
12517:
12518: <dd>
12519:
12520: <p>Returns the default rate of playback, for when the user is not
12521: fast-forwarding or reversing through the <a href="#media-resource">media
12522: resource</a>.</p>
12523:
12524: <p>Can be set, to change the default rate of playback.</p>
12525:
12526: <p>The default rate has no direct effect on playback, but if the
12527: user switches to a fast-forward mode, when they return to the
12528: normal playback mode, it is expected that the rate of playback
12529: will be returned to the default rate of playback.</p>
12530:
12531: <p>When the element has a <a href="#current-media-controller">current media controller</a>,
12532: the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code>
12533: attribute is ignored and the <a href="#current-media-controller">current media
12534: controller</a>'s <code title="dom-MediaController-defaultPlaybackRate"><a href="#dom-mediacontroller-defaultplaybackrate">defaultPlaybackRate</a></code>
12535: is used instead.</p>
12536:
12537: </dd>
12538:
12539: <dt><var title="">media</var> . <code title="dom-media-playbackRate" id="dom-media-playbackrate"><a href="#dom-media-playbackrate">playbackRate</a></code> [ = <var title="">value</var> ]</dt>
12540:
12541: <dd>
12542:
12543: <p>Returns the current rate playback, where 1.0 is normal speed.</p>
12544:
12545: <p>Can be set, to change the rate of playback.</p>
12546:
12547: <p>When the element has a <a href="#current-media-controller">current media controller</a>,
12548: the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code>
12549: attribute is ignored and the <a href="#current-media-controller">current media
12550: controller</a>'s <code title="dom-MediaController-playbackRate"><a href="#dom-mediacontroller-playbackrate">playbackRate</a></code> is
12551: used instead.</p>
12552:
12553: </dd>
12554:
12555: <dt><var title="">media</var> . <code title="dom-media-played" id="dom-media-played"><a href="#dom-media-played">played</a></code></dt>
12556:
12557: <dd>
12558:
12559: <p>Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the
12560: ranges of the <a href="#media-resource">media resource</a> that the user agent has
12561: played.</p>
12562:
12563: </dd>
12564:
12565: <dt><var title="">media</var> . <code title="dom-media-play" id="dom-media-play"><a href="#dom-media-play">play</a></code>()</dt>
12566:
12567: <dd>
12568:
12569: <p>Sets the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute
12570: to false, loading the <a href="#media-resource">media resource</a> and beginning
12571: playback if necessary. If the playback had ended, will restart it
12572: from the start.</p>
12573:
12574: </dd>
12575:
12576: <dt><var title="">media</var> . <code title="dom-media-pause" id="dom-media-pause"><a href="#dom-media-pause">pause</a></code>()</dt>
12577:
12578: <dd>
12579:
12580: <p>Sets the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute
12581: to true, loading the <a href="#media-resource">media resource</a> if necessary.</p>
12582:
12583: </dd>
12584:
12585: </dl><h5 id="seeking"><span class="secno">4.8.10.9 </span>Seeking</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-seeking" id="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code></dt>
12586:
12587: <dd>
12588:
12589: <p>Returns true if the user agent is currently seeking.</p>
12590:
12591: </dd>
12592:
12593: <dt><var title="">media</var> . <code title="dom-media-seekable" id="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code></dt>
12594:
12595: <dd>
12596:
12597: <p>Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the
12598: ranges of the <a href="#media-resource">media resource</a> to which it is possible
12599: for the user agent to seek.</p>
12600:
12601: </dd>
12602:
12603: </dl><h5 id="media-resources-with-multiple-media-tracks"><span class="secno">4.8.10.10 </span>Media resources with multiple media tracks</h5><p>A <a href="#media-resource">media resource</a> can have multiple embedded audio
12604: and video tracks. For example, in addition to the primary video and
12605: audio tracks, a <a href="#media-resource">media resource</a> could have
12606: foreign-language dubbed dialogues, director's commentaries, audio
12607: descriptions, alternative angles, or sign-language overlays.</p><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-audioTracks" id="dom-media-audiotracks"><a href="#dom-media-audiotracks">audioTracks</a></code></dt>
12608:
12609: <dd>
12610:
12611: <p>Returns an <code><a href="#audiotracklist">AudioTrackList</a></code> object representing
12612: the audio tracks available in the <a href="#media-resource">media resource</a>.</p>
12613:
12614: </dd>
12615:
12616: <dt><var title="">media</var> . <code title="dom-media-videoTracks" id="dom-media-videotracks"><a href="#dom-media-videotracks">videoTracks</a></code></dt>
12617:
12618: <dd>
12619:
1.573 mike 12620: <p>Returns a <code><a href="#videotracklist">VideoTrackList</a></code> object representing
1.545 mike 12621: the video tracks available in the <a href="#media-resource">media resource</a>.</p>
12622:
12623: </dd>
12624:
12625: </dl><div class="example">
12626:
12627: <p>In this example, a script defines a function that takes a URL to
12628: a video and a reference to an element where the video is to be
12629: placed. That function then tries to load the video, and, once it is
12630: loaded, checks to see if there is a sign-language track available.
12631: If there is, it also displays that track. Both tracks are just
12632: placed in the given container; it's assumed that styles have been
12633: applied to make this work in a pretty way!</p>
12634:
12635: <pre><script>
12636: function loadVideo(url, container) {
12637: var controller = new MediaController();
12638: var video = document.createElement('video');
12639: video.src = url;
12640: video.autoplay = true;
12641: video.controls = true;
12642: video.controller = controller;
12643: container.appendChild(video);
12644: video.onloadedmetadata = function (event) {
12645: for (var i = 0; i < video.videoTracks.length; i += 1) {
12646: if (video.videoTracks[i].kind == 'sign') {
12647: var sign = document.createElement('video');
12648: sign.src = url + '#track=' + video.videoTracks[i].id;
12649: sign.autoplay = true;
12650: sign.controller = controller;
12651: container.appendChild(sign);
12652: return;
12653: }
12654: }
12655: };
12656: }
12657: </script></pre>
12658:
12659: </div><h6 id="audiotracklist-and-videotracklist-objects"><span class="secno">4.8.10.10.1 </span><code><a href="#audiotracklist">AudioTrackList</a></code> and <code><a href="#videotracklist">VideoTrackList</a></code> objects</h6><p>The <code><a href="#audiotracklist">AudioTrackList</a></code> and <code><a href="#videotracklist">VideoTrackList</a></code>
12660: interfaces are used by attributes defined in the previous
12661: section.</p><pre class="idl">interface <dfn id="audiotracklist" role="button" tabindex="0" aria-haspopup="true">AudioTrackList</dfn> {
12662: readonly attribute unsigned long <a href="#dom-audiotracklist-length" title="dom-AudioTrackList-length">length</a>;
1.562 mike 12663: getter <a href="#audiotrack">AudioTrack</a> (unsigned long index);
12664: <a href="#audiotrack">AudioTrack</a>? <a href="#dom-audiotracklist-gettrackbyid" title="dom-AudioTrackList-getTrackById">getTrackById</a>(DOMString id);
1.615 mike 12665:
1.610 mike 12666: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onchange" title="handler-TrackList-onchange">onchange</a>;
1.615 mike 12667: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onaddtrack" title="handler-TrackList-onaddtrack">onaddtrack</a>;
1.545 mike 12668: };
12669:
12670: interface <dfn id="audiotrack" role="button" tabindex="0" aria-haspopup="true">AudioTrack</dfn> {
12671: readonly attribute DOMString <a href="#dom-audiotrack-id" title="dom-AudioTrack-id">id</a>;
12672: readonly attribute DOMString <a href="#dom-audiotrack-kind" title="dom-AudioTrack-kind">kind</a>;
12673: readonly attribute DOMString <a href="#dom-audiotrack-label" title="dom-AudioTrack-label">label</a>;
12674: readonly attribute DOMString <a href="#dom-audiotrack-language" title="dom-AudioTrack-language">language</a>;
12675: attribute boolean <a href="#dom-audiotrack-enabled" title="dom-AudioTrack-enabled">enabled</a>;
12676: };
12677:
12678: interface <dfn id="videotracklist" role="button" tabindex="0" aria-haspopup="true">VideoTrackList</dfn> {
12679: readonly attribute unsigned long <a href="#dom-videotracklist-length" title="dom-VideoTrackList-length">length</a>;
1.562 mike 12680: getter <a href="#videotrack">VideoTrack</a> (unsigned long index);
12681: <a href="#videotrack">VideoTrack</a>? <a href="#dom-videotracklist-gettrackbyid" title="dom-VideoTrackList-getTrackById">getTrackById</a>(DOMString id);
1.545 mike 12682: readonly attribute long <a href="#dom-videotracklist-selectedindex" title="dom-VideoTrackList-selectedIndex">selectedIndex</a>;
1.615 mike 12683:
1.610 mike 12684: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onchange" title="handler-TrackList-onchange">onchange</a>;
1.615 mike 12685: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onaddtrack" title="handler-TrackList-onaddtrack">onaddtrack</a>;
1.545 mike 12686: };
12687:
12688: interface <dfn id="videotrack" role="button" tabindex="0" aria-haspopup="true">VideoTrack</dfn> {
12689: readonly attribute DOMString <a href="#dom-videotrack-id" title="dom-VideoTrack-id">id</a>;
12690: readonly attribute DOMString <a href="#dom-videotrack-kind" title="dom-VideoTrack-kind">kind</a>;
12691: readonly attribute DOMString <a href="#dom-videotrack-label" title="dom-VideoTrack-label">label</a>;
12692: readonly attribute DOMString <a href="#dom-videotrack-language" title="dom-VideoTrack-language">language</a>;
12693: attribute boolean <a href="#dom-videotrack-selected" title="dom-VideoTrack-selected">selected</a>;
12694: };</pre><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-audioTracks"><a href="#dom-media-audiotracks">audioTracks</a></code> . <code title="dom-AudioTrackList-length" id="dom-audiotracklist-length"><a href="#dom-audiotracklist-length">length</a></code></dt>
12695: <dt><var title="">media</var> . <code title="dom-media-videoTracks"><a href="#dom-media-videotracks">videoTracks</a></code> . <code title="dom-VideoTrackList-length" id="dom-videotracklist-length"><a href="#dom-videotracklist-length">length</a></code></dt>
12696:
12697: <dd>
12698:
12699: <p>Returns the number of tracks in the list.</p>
12700:
12701: </dd>
12702:
12703: <dt><var title="">audioTrack</var> = <var title="">media</var> . <code title="dom-media-audioTracks"><a href="#dom-media-audiotracks">audioTracks</a></code>[<var title="">index</var>]</dt>
12704: <dt><var title="">videoTrack</var> = <var title="">media</var> . <code title="dom-media-videoTracks"><a href="#dom-media-videotracks">videoTracks</a></code>[<var title="">index</var>]</dt>
12705:
12706: <dd>
12707:
12708: <p>Returns the specified <code><a href="#audiotrack">AudioTrack</a></code> or <code><a href="#videotrack">VideoTrack</a></code> object.</p>
12709:
12710: </dd>
12711:
12712: <dt><var title="">audioTrack</var> = <var title="">media</var> . <code title="dom-media-audioTracks"><a href="#dom-media-audiotracks">audioTracks</a></code> . <code title="dom-AudioTrackList-getTrackById" id="dom-audiotracklist-gettrackbyid"><a href="#dom-audiotracklist-gettrackbyid">getTrackById</a></code>( <var title="">id</var> )</dt>
12713: <dt><var title="">videoTrack</var> = <var title="">media</var> . <code title="dom-media-videoTracks"><a href="#dom-media-videotracks">videoTracks</a></code> . <code title="dom-VideoTrackList-getTrackById" id="dom-videotracklist-gettrackbyid"><a href="#dom-videotracklist-gettrackbyid">getTrackById</a></code>( <var title="">id</var> )</dt>
12714:
12715: <dd>
12716:
12717: <p>Returns the <code><a href="#audiotrack">AudioTrack</a></code> or <code><a href="#videotrack">VideoTrack</a></code> object with the given identifier, or null if no track has that identifier.</p>
12718:
12719: </dd>
12720:
12721: <dt><var title="">audioTrack</var> . <code title="dom-AudioTrack-id" id="dom-audiotrack-id"><a href="#dom-audiotrack-id">id</a></code></dt>
12722: <dt><var title="">videoTrack</var> . <code title="dom-VideoTrack-id" id="dom-videotrack-id"><a href="#dom-videotrack-id">id</a></code></dt>
12723:
12724: <dd>
12725:
12726: <p>Returns the ID of the given track. This is the ID that can be
12727: used with a fragment identifier if the format supports the
12728: <cite>Media Fragments URI</cite> syntax, and that can be used with
12729: the <code title="">getTrackById()</code> method. <a href="#refsMEDIAFRAG">[MEDIAFRAG]</a></p>
12730:
12731: </dd>
12732:
12733: <dt><var title="">audioTrack</var> . <code title="dom-AudioTrack-kind" id="dom-audiotrack-kind"><a href="#dom-audiotrack-kind">kind</a></code></dt>
12734: <dt><var title="">videoTrack</var> . <code title="dom-VideoTrack-kind" id="dom-videotrack-kind"><a href="#dom-videotrack-kind">kind</a></code></dt>
12735:
12736: <dd>
12737:
12738: <p>Returns the category the given track falls into. The <a href="#dom-TrackList-getKind-categories">possible track categories</a> are given below.</p>
12739:
12740: </dd>
12741:
12742: <dt><var title="">audioTrack</var> . <code title="dom-AudioTrack-label" id="dom-audiotrack-label"><a href="#dom-audiotrack-label">label</a></code></dt>
12743: <dt><var title="">videoTrack</var> . <code title="dom-VideoTrack-label" id="dom-videotrack-label"><a href="#dom-videotrack-label">label</a></code></dt>
12744:
12745: <dd>
12746:
12747: <p>Returns the label of the given track, if known, or the empty string otherwise.</p>
12748:
12749: </dd>
12750:
12751: <dt><var title="">audioTrack</var> . <code title="dom-AudioTrack-language" id="dom-audiotrack-language"><a href="#dom-audiotrack-language">language</a></code></dt>
12752: <dt><var title="">videoTrack</var> . <code title="dom-VideoTrack-language" id="dom-videotrack-language"><a href="#dom-videotrack-language">language</a></code></dt>
12753:
12754: <dd>
12755:
12756: <p>Returns the language of the given track, if known, or the empty string otherwise.</p>
12757:
12758: </dd>
12759:
12760: <dt><var title="">audioTrack</var> . <code title="dom-AudioTrack-enabled" id="dom-audiotrack-enabled"><a href="#dom-audiotrack-enabled">enabled</a></code> [ = <var title="">value</var> ]</dt>
12761:
12762: <dd>
12763:
12764: <p>Returns true if the given track is active, and false otherwise.</p>
12765:
12766: <p>Can be set, to change whether the track is enabled or not. If multiple audio tracks are enabled simultaneously, they are mixed.</p>
12767:
12768: </dd>
12769:
12770: <dt><var title="">media</var> . <code title="dom-media-videoTracks"><a href="#dom-media-videotracks">videoTracks</a></code> . <code title="dom-VideoTrackList-selectedIndex" id="dom-videotracklist-selectedindex"><a href="#dom-videotracklist-selectedindex">selectedIndex</a></code></dt>
12771:
12772: <dd>
12773:
12774: <p>Returns the index of the currently selected track, if any, or −1 otherwise.</p>
12775:
12776: </dd>
12777:
12778: <dt><var title="">videoTrack</var> . <code title="dom-VideoTrack-selected" id="dom-videotrack-selected"><a href="#dom-videotrack-selected">selected</a></code> [ = <var title="">value</var> ]</dt>
12779:
12780: <dd>
12781:
12782: <p>Returns true if the given track is active, and false otherwise.</p>
12783:
12784: <p>Can be set, to change whether the track is selected or not. Either zero or one video track is selected; selecting a new track while a previous one is selected will unselect the previous one.</p>
12785:
12786: </dd>
12787:
12788: </dl><table id="dom-TrackList-getKind-categories"><caption>Return values for <code title="dom-AudioTrack-kind"><a href="#dom-audiotrack-kind">AudioTrack.kind()</a></code> and <code title="dom-VideoTrack-kind"><a href="#dom-videotrack-kind">VideoTrack.kind()</a></code></caption>
12789: <thead><tr><th>Category
12790: </th><th>Definition
12791: </th><th>Applies to...</th>
12792: <th>Examples
12793: </th></tr></thead><tbody><tr><td>"<dfn id="value-track-kind-alternate" role="button" tabindex="0" aria-haspopup="true"><code>alternative</code></dfn>"
12794: </td><td>A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video).
12795: </td><td>Audio and video.
12796: </td><td>Ogg: "audio/alternate" or "video/alternate".
12797:
12798: </td></tr><tr><td>"<dfn id="value-track-kind-description" role="button" tabindex="0" aria-haspopup="true"><code>description</code></dfn>"
12799: </td><td>An audio description of a video track.
12800: </td><td>Audio only.
12801: </td><td>Ogg: "audio/audiodesc".
12802:
12803: </td></tr><tr><td>"<dfn id="value-track-kind-main" role="button" tabindex="0" aria-haspopup="true"><code>main</code></dfn>"
12804: </td><td>The primary audio or video track.
12805: </td><td>Audio and video.
12806: </td><td>Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set.
12807:
12808: </td></tr><tr><td>"<dfn id="value-track-kind-sign" role="button" tabindex="0" aria-haspopup="true"><code>sign</code></dfn>"
12809: </td><td>A sign-language interpretation of an audio track.
12810: </td><td>Video only.
12811: </td><td>Ogg: "video/sign".
12812:
12813: </td></tr><tr><td>"<dfn id="value-track-kind-translation" role="button" tabindex="0" aria-haspopup="true"><code>translation</code></dfn>"
12814: </td><td>A translated version of the main track.
12815: </td><td>Audio only.
12816: </td><td>Ogg: "audio/dub".
12817:
12818: </td></tr><tr><td>"<dfn id="value-track-kind-commentary" role="button" tabindex="0" aria-haspopup="true"><code>commentary</code></dfn>"
12819: </td><td>Commentary on the primary audio or video track, e.g. a director's commentary.
12820: </td><td>Audio and video.
12821: </td><td>No known formats expose this category at this time.
12822:
12823: </td></tr><tr><td>"<dfn id="value-track-kind-none" role="button" tabindex="0" aria-haspopup="true"><code></code></dfn>" (empty string)
12824: </td><td>No explicit kind, or the kind given by the track's metadata is not recognised by the user agent.
12825: </td><td>Audio and video.
12826: </td><td>Any other track type or track role.
12827:
12828: </td></tr></tbody></table><h6 id="selecting-specific-audio-and-video-tracks-declaratively"><span class="secno">4.8.10.10.2 </span>Selecting specific audio and video tracks declaratively</h6><p>The <code title="dom-media-audioTracks"><a href="#dom-media-audiotracks">audioTracks</a></code> and
12829: <code title="dom-media-videoTracks"><a href="#dom-media-videotracks">videoTracks</a></code> attributes
12830: allow scripts to select which track should play, but it is also
12831: possible to select specific tracks declaratively, by specifying
12832: particular tracks in the fragment identifier of the <a href="#url">URL</a>
12833: of the <a href="#media-resource">media resource</a>. The format of the fragment
12834: identifier depends on the <a href="#mime-type">MIME type</a> of the <a href="#media-resource">media
12835: resource</a>. <a href="#refsRFC2046">[RFC2046]</a> <a href="#refsRFC3986">[RFC3986]</a></p><div class="example">
12836:
12837: <p>In this example, a video that uses a format that supports the
12838: <cite>Media Fragments URI</cite> fragment identifier syntax is
12839: embedded in such a way that the alternative angles labeled
12840: "Alternative" are enabled instead of the default video track. <a href="#refsMEDIAFRAG">[MEDIAFRAG]</a></p>
12841:
12842: <pre><video src="myvideo#track=Alternative"></video></pre>
12843:
12844:
12845: </div><h5 id="synchronising-multiple-media-elements"><span class="secno">4.8.10.11 </span>Synchronising multiple media elements</h5><h6 id="introduction-0"><span class="secno">4.8.10.11.1 </span>Introduction</h6><p>Each <a href="#media-element">media element</a> can have a
12846: <code><a href="#mediacontroller">MediaController</a></code>. A <code><a href="#mediacontroller">MediaController</a></code> is an
12847: object that coordinates the playback of multiple <a href="#media-element" title="media
12848: element">media elements</a>, for instance so that a sign-language
12849: interpreter track can be overlaid on a video track, with the two
12850: being kept in sync.</p><p>By default, a <a href="#media-element">media element</a> has no
12851: <code><a href="#mediacontroller">MediaController</a></code>. An implicit
12852: <code><a href="#mediacontroller">MediaController</a></code> can be assigned using the <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code> content attribute.
12853: An explicit <code><a href="#mediacontroller">MediaController</a></code> can be assigned directly
12854: using the <code title="dom-media-controller"><a href="#dom-media-controller">controller</a></code> IDL
12855: attribute.</p><p><a href="#media-element" title="media element">Media elements</a> with a
12856: <code><a href="#mediacontroller">MediaController</a></code> are said to be <i>slaved</i> to their
12857: controller. The <code><a href="#mediacontroller">MediaController</a></code> modifies the playback
12858: rate and the playback volume of each of the <a href="#media-element" title="media
12859: element">media elements</a> slaved to it, and ensures that when
12860: any of its slaved <a href="#media-element" title="media element">media elements</a>
12861: unexpectedly stall, the others are stopped at the same time.</p><p>When a <a href="#media-element">media element</a> is slaved to a
12862: <code><a href="#mediacontroller">MediaController</a></code>, its playback rate is fixed to that of
12863: the other tracks in the same <code><a href="#mediacontroller">MediaController</a></code>, and any
12864: looping is disabled.</p><h6 id="media-controllers"><span class="secno">4.8.10.11.2 </span>Media controllers</h6><pre class="idl">[<a href="#dom-mediacontroller" title="dom-MediaController">Constructor</a>]
12865: interface <dfn id="mediacontroller" role="button" tabindex="0" aria-haspopup="true">MediaController</dfn> {
12866: readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-mediacontroller-buffered" title="dom-MediaController-buffered">buffered</a>;
12867: readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-mediacontroller-seekable" title="dom-MediaController-seekable">seekable</a>;
12868: readonly attribute double <a href="#dom-mediacontroller-duration" title="dom-MediaController-duration">duration</a>;
12869: attribute double <a href="#dom-mediacontroller-currenttime" title="dom-MediaController-currentTime">currentTime</a>;
12870:
12871: readonly attribute boolean <a href="#dom-mediacontroller-paused" title="dom-MediaController-paused">paused</a>;
12872: readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-mediacontroller-played" title="dom-MediaController-played">played</a>;
12873: void <a href="#dom-mediacontroller-play" title="dom-MediaController-play">play</a>();
12874: void <a href="#dom-mediacontroller-pause" title="dom-MediaController-pause">pause</a>();
12875:
12876: attribute double <a href="#dom-mediacontroller-defaultplaybackrate" title="dom-MediaController-defaultPlaybackRate">defaultPlaybackRate</a>;
12877: attribute double <a href="#dom-mediacontroller-playbackrate" title="dom-MediaController-playbackRate">playbackRate</a>;
12878:
12879: attribute double <a href="#dom-mediacontroller-volume" title="dom-MediaController-volume">volume</a>;
12880: attribute boolean <a href="#dom-mediacontroller-muted" title="dom-MediaController-muted">muted</a>;
12881:
1.610 mike 12882: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onemptied" title="handler-MediaController-onemptied">onemptied</a>;
12883: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadedmetadata" title="handler-MediaController-onloadedmetadata">onloadedmetadata</a>;
12884: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadeddata" title="handler-MediaController-onloadeddata">onloadeddata</a>;
12885: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplay" title="handler-MediaController-oncanplay">oncanplay</a>;
12886: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplaythrough" title="handler-MediaController-oncanplaythrough">oncanplaythrough</a>;
12887: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplaying" title="handler-MediaController-onplaying">onplaying</a>;
12888: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onended" title="handler-MediaController-onended">onended</a>;
12889: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onwaiting" title="handler-MediaController-onwaiting">onwaiting</a>;
12890:
12891: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondurationchange" title="handler-MediaController-ondurationchange">ondurationchange</a>;
12892: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ontimeupdate" title="handler-MediaController-ontimeupdate">ontimeupdate</a>;
12893: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplay" title="handler-MediaController-onplay">onplay</a>;
12894: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onpause" title="handler-MediaController-onpause">onpause</a>;
12895: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onratechange" title="handler-MediaController-onratechange">onratechange</a>;
12896: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onvolumechange" title="handler-MediaController-onvolumechange">onvolumechange</a>;
1.545 mike 12897: };</pre><dl class="domintro"><dt><var title="">controller</var> = new <code title="dom-MediaController" id="dom-mediacontroller"><a href="#dom-mediacontroller">MediaController</a></code>()</dt>
12898:
12899: <dd>
12900:
12901: <p>Returns a new <code><a href="#mediacontroller">MediaController</a></code> object.</p>
12902:
12903: </dd>
12904:
12905: <dt><var title="">media</var> . <code title="dom-media-controller" id="dom-media-controller"><a href="#dom-media-controller">controller</a></code> [ = <var title="">controller</var> ]</dt>
12906:
12907: <dd>
12908:
12909: <p>Returns the current <code><a href="#mediacontroller">MediaController</a></code> for the <a href="#media-element">media element</a>, if any; returns null otherwise.</p>
12910:
12911: <p>Can be set, to set an explicit <code><a href="#mediacontroller">MediaController</a></code>.
12912: Doing so removes the <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code> attribute, if
12913: any.</p>
12914:
12915: </dd>
12916:
12917: <dt><var title="">controller</var> . <code title="dom-MediaController-buffered" id="dom-mediacontroller-buffered"><a href="#dom-mediacontroller-buffered">buffered</a></code></dt>
12918:
12919: <dd>
12920:
12921: <p>Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the
12922: intersection of the time ranges for which the user agent has all
12923: relevant media data for all the slaved <a href="#media-element" title="media
12924: element">media elements</a>.</p>
12925:
12926: </dd>
12927:
12928: <dt><var title="">controller</var> . <code title="dom-MediaController-seekable" id="dom-mediacontroller-seekable"><a href="#dom-mediacontroller-seekable">seekable</a></code></dt>
12929:
12930: <dd>
12931:
12932: <p>Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the
12933: intersection of the time ranges into which the user agent can seek
12934: for all the slaved <a href="#media-element" title="media element">media
12935: elements</a>.</p>
12936:
12937: </dd>
12938:
12939: <dt><var title="">controller</var> . <code title="dom-MediaController-duration" id="dom-mediacontroller-duration"><a href="#dom-mediacontroller-duration">duration</a></code></dt>
12940:
12941: <dd>
12942:
12943: <p>Returns the difference between the earliest playable moment and
12944: the latest playable moment (not considering whether the data in
12945: question is actually buffered or directly seekable, but not
12946: including time in the future for infinite streams). Will return
12947: zero if there is no media.</p>
12948:
12949: </dd>
12950:
12951: <dt><var title="">controller</var> . <code title="dom-MediaController-currentTime" id="dom-mediacontroller-currenttime"><a href="#dom-mediacontroller-currenttime">currentTime</a></code> [ = <var title="">value</var> ]</dt>
12952:
12953: <dd>
12954:
12955: <p>Returns the <a href="#current-playback-position">current playback position</a>, in seconds,
12956: as a position between zero time and the current <code title="dom-MediaController-duration"><a href="#dom-mediacontroller-duration">duration</a></code>.</p>
12957:
12958: <p>Can be set, to seek to the given time.</p><p>
12959:
12960: </p></dd>
12961:
12962: <dt><var title="">controller</var> . <code title="dom-MediaController-paused" id="dom-mediacontroller-paused"><a href="#dom-mediacontroller-paused">paused</a></code></dt>
12963:
12964: <dd>
12965:
12966: <p>Returns true if playback is paused; false otherwise. When this
12967: attribute is true, any <a href="#media-element">media element</a> slaved to this
12968: controller will be stopped.</p>
12969:
12970: </dd>
12971:
1.596 mike 12972: <dt><var title="">controller</var> . <code title="dom-MediaController-play" id="dom-mediacontroller-play"><a href="#dom-mediacontroller-play">play</a></code>()</dt>
1.545 mike 12973:
12974: <dd>
12975:
1.596 mike 12976: <p>Sets the <code title="dom-MediaController-paused"><a href="#dom-mediacontroller-paused">paused</a></code>
12977: attribute to false.</p>
1.545 mike 12978:
12979: </dd>
12980:
1.596 mike 12981: <dt><var title="">controller</var> . <code title="dom-MediaController-pause" id="dom-mediacontroller-pause"><a href="#dom-mediacontroller-pause">pause</a></code>()</dt>
1.545 mike 12982:
12983: <dd>
12984:
12985: <p>Sets the <code title="dom-MediaController-paused"><a href="#dom-mediacontroller-paused">paused</a></code>
1.596 mike 12986: attribute to true.</p>
1.545 mike 12987:
12988: </dd>
12989:
1.596 mike 12990: <dt><var title="">controller</var> . <code title="dom-MediaController-played" id="dom-mediacontroller-played"><a href="#dom-mediacontroller-played">played</a></code></dt>
1.545 mike 12991:
12992: <dd>
12993:
1.596 mike 12994: <p>Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the
12995: union of the time ranges in all the slaved <a href="#media-element" title="media
12996: element">media elements</a> that have been played.</p>
1.545 mike 12997:
12998: </dd>
12999:
13000: <dt><var title="">controller</var> . <code title="dom-MediaController-defaultPlaybackRate" id="dom-mediacontroller-defaultplaybackrate"><a href="#dom-mediacontroller-defaultplaybackrate">defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt>
13001:
13002: <dd>
13003:
13004: <p>Returns the default rate of playback.</p>
13005:
13006: <p>Can be set, to change the default rate of playback.</p>
13007:
13008: <p>This default rate has no direct effect on playback, but if the
13009: user switches to a fast-forward mode, when they return to the
13010: normal playback mode, it is expected that rate of playback (<code title="dom-MediaController-playbackRate"><a href="#dom-mediacontroller-playbackrate">playbackRate</a></code>) will
13011: be returned to this default rate.</p>
13012:
13013: </dd>
13014:
13015: <dt><var title="">controller</var> . <code title="dom-MediaController-playbackRate" id="dom-mediacontroller-playbackrate"><a href="#dom-mediacontroller-playbackrate">playbackRate</a></code> [ = <var title="">value</var> ]</dt>
13016:
13017: <dd>
13018:
13019: <p>Returns the current rate of playback.</p>
13020:
13021: <p>Can be set, to change the rate of playback.</p>
13022:
13023: </dd>
13024:
13025: <dt><var title="">controller</var> . <code title="dom-MediaController-volume" id="dom-mediacontroller-volume"><a href="#dom-mediacontroller-volume">volume</a></code> [ = <var title="">value</var> ]</dt>
13026:
13027: <dd>
13028:
13029: <p>Returns the current playback volume multiplier, as a number in
13030: the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the
13031: loudest.</p>
13032:
13033: <p>Can be set, to change the volume multiplier.</p>
13034:
1.612 mike 13035: <p>Throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> if the new value is not
1.545 mike 13036: in the range 0.0 .. 1.0.</p>
13037:
13038: </dd>
13039:
13040: <dt><var title="">controller</var> . <code title="dom-MediaController-muted" id="dom-mediacontroller-muted"><a href="#dom-mediacontroller-muted">muted</a></code> [ = <var title="">value</var> ]</dt>
13041:
13042: <dd>
13043:
13044: <p>Returns true if all audio is muted (regardless of other
13045: attributes either on the controller or on any <a href="#media-element" title="media
13046: element">media elements</a> slaved to this controller), and
13047: false otherwise.</p>
13048:
13049: <p>Can be set, to change whether the audio is muted or not.</p>
13050:
13051: </dd>
13052:
13053: </dl><h6 id="assigning-a-media-controller-declaratively"><span class="secno">4.8.10.11.3 </span>Assigning a media controller declaratively</h6><p>The <dfn id="attr-media-mediagroup" role="button" tabindex="0" aria-haspopup="true"><code>mediagroup</code></dfn> content
13054: attribute on <a href="#media-element" title="media element">media elements</a> can
13055: be used to link multiple <a href="#media-element" title="media element">media
13056: elements</a> together by implicitly creating a
1.629 ! mike 13057: <code><a href="#mediacontroller">MediaController</a></code>. The value is text; <a href="#media-element" title="media
! 13058: element">media elements</a> with the same value are automatically
! 13059: linked by the user agent.</p>
1.545 mike 13060: <p>The <dfn id="dom-media-mediagroup" role="button" tabindex="0" aria-haspopup="true"><code>mediaGroup</code></dfn> IDL
13061: attribute on <a href="#media-element" title="media element">media elements</a> must
13062: <a href="#reflect">reflect</a> the <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code> content
13063: attribute.</p>
13064: <div class="example">
13065:
13066: <p>Multiple <a href="#media-element" title="media element">media elements</a>
13067: referencing the same <a href="#media-resource">media resource</a> will share a
13068: single network request. This can be used to efficiently play two
13069: (video) tracks from the same <a href="#media-resource">media resource</a> in two
13070: different places on the screen. Used with the <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code> attribute, these
13071: elements can also be kept synchronised.</p>
13072:
13073: <p>In this example, a sign-languge interpreter track from a movie
13074: file is overlaid on the primary video track of that same video file
13075: using two <code><a href="#the-video-element">video</a></code> elements, some CSS, and an implicit
13076: <code><a href="#mediacontroller">MediaController</a></code>:</p>
13077:
13078: <pre><article>
13079: <style scoped>
13080: div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
13081: video { position; absolute; bottom: 0; right: 0; }
13082: video:first-child { width: 100%; height: 100%; }
13083: video:last-child { width: 30%; }
13084: </style>
13085: <div>
13086: <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
13087: <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
13088: </div>
13089: </article></pre>
13090:
13091: </div><h5 id="timed-text-tracks"><span class="secno">4.8.10.12 </span>Timed text tracks</h5><h6 id="text-track-model"><span class="secno">4.8.10.12.1 </span>Text track model</h6><p>A <a href="#media-element">media element</a> can have a group of associated <dfn id="text-track" role="button" tabindex="0" aria-haspopup="true">text tracks</dfn>, known as the <a href="#media-element">media
13092: element</a>'s <dfn id="list-of-text-tracks" role="button" tabindex="0" aria-haspopup="true">list of text tracks</dfn>. The <a href="#text-track" title="text track">text tracks</a> are sorted as follows:</p><ol class="brief"><li>The <a href="#text-track" title="text track">text tracks</a> corresponding
13093: to <code><a href="#the-track-element">track</a></code> element children of the <a href="#media-element">media
13094: element</a>, in <a href="#tree-order">tree order</a>.</li>
13095:
13096: <li>Any <a href="#text-track" title="text track">text tracks</a> added using
13097: the <code title="dom-media-addTextTrack"><a href="#dom-media-addtexttrack">addTextTrack()</a></code> method, in
13098: the order they were added, oldest first.</li>
13099:
13100: <li>Any <a href="#media-resource-specific-text-track" title="media-resource-specific text
13101: track">media-resource-specific text tracks</a> (<a href="#text-track" title="text track">text tracks</a> corresponding to data in
13102: the <a href="#media-resource">media resource</a>), in the order defined by the
13103: <a href="#media-resource">media resource</a>'s format specification.</li>
13104:
13105: </ol><p>A <a href="#text-track">text track</a> consists of:</p><dl><dt><dfn id="text-track-kind" role="button" tabindex="0" aria-haspopup="true">The kind of text track</dfn>
13106:
13107: </dt><dd>
13108:
13109: <p>This decides how the track is handled by the user agent. The
13110: kind is represented by a string. The possible strings are:</p>
13111:
13112: <ul class="brief"><li><dfn id="dom-texttrack-kind-subtitles" role="button" tabindex="0" aria-haspopup="true"><code>subtitles</code></dfn>
13113: </li><li><dfn id="dom-texttrack-kind-captions" role="button" tabindex="0" aria-haspopup="true"><code>captions</code></dfn>
13114: </li><li><dfn id="dom-texttrack-kind-descriptions" role="button" tabindex="0" aria-haspopup="true"><code>descriptions</code></dfn>
13115: </li><li><dfn id="dom-texttrack-kind-chapters" role="button" tabindex="0" aria-haspopup="true"><code>chapters</code></dfn>
13116: </li><li><dfn id="dom-texttrack-kind-metadata" role="button" tabindex="0" aria-haspopup="true"><code>metadata</code></dfn>
13117: </li></ul><p>The <a href="#text-track-kind" title="text track kind">kind of track</a> can
13118: change dynamically, in the case of a <a href="#text-track">text track</a>
13119: corresponding to a <code><a href="#the-track-element">track</a></code> element.</p>
13120:
13121: </dd>
13122:
13123: <dt><dfn id="text-track-label" role="button" tabindex="0" aria-haspopup="true">A label</dfn>
13124:
13125: </dt><dd>
13126:
13127: <p>This is a human-readable string intended to identify the track
13128: for the user. In certain cases, the label might be generated
13129: automatically.</p>
13130:
13131: <p>The <a href="#text-track-label" title="text track label">label of a track</a> can
13132: change dynamically, in the case of a <a href="#text-track">text track</a>
13133: corresponding to a <code><a href="#the-track-element">track</a></code> element or in the case of an
13134: automatically-generated label whose value depends on variable
13135: factors such as the user's preferred user interface language.</p>
13136:
13137: </dd>
13138:
13139: <dt><dfn id="text-track-language" role="button" tabindex="0" aria-haspopup="true">A language</dfn>
13140:
13141: </dt><dd>
13142:
13143: <p>This is a string (a BCP 47 language tag) representing the
13144: language of the text track's cues. <a href="#refsBCP47">[BCP47]</a></p>
13145:
13146: <p>The <a href="#text-track-language" title="text track language">language of a text
13147: track</a> can change dynamically, in the case of a <a href="#text-track">text
13148: track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element.</p>
13149:
13150: </dd>
13151:
13152: <dt><dfn id="text-track-readiness-state" role="button" tabindex="0" aria-haspopup="true">A readiness state</dfn>
13153:
13154: </dt><dd>
13155:
13156: <p>One of the following:</p>
13157:
13158: <dl><dt><dfn id="text-track-not-loaded" role="button" tabindex="0" aria-haspopup="true">Not loaded</dfn>
13159:
13160: </dt><dd>
13161:
13162: <p>Indicates that the text track is known to exist (e.g. it has
13163: been declared with a <code><a href="#the-track-element">track</a></code> element), but its cues
13164: have not been obtained.</p>
13165:
13166: </dd>
13167:
13168: <dt><dfn id="text-track-loading" role="button" tabindex="0" aria-haspopup="true">Loading</dfn>
13169:
13170: </dt><dd>
13171:
13172: <p>Indicates that the text track is loading and there have been
13173: no fatal errors encountered so far. Further cues might still be
13174: added to the track.</p>
13175:
13176: </dd>
13177:
13178: <dt><dfn id="text-track-loaded" role="button" tabindex="0" aria-haspopup="true">Loaded</dfn>
13179:
13180: </dt><dd>
13181:
13182: <p>Indicates that the text track has been loaded with no fatal
13183: errors. No new cues will be added to the track except if the
13184: <a href="#text-track">text track</a> corresponds to a
13185: <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object.</p>
13186:
13187: </dd>
13188:
13189: <dt><dfn id="text-track-failed-to-load" role="button" tabindex="0" aria-haspopup="true">Failed to load</dfn>
13190:
13191: </dt><dd>
13192:
13193: <p>Indicates that the text track was enabled, but when the user
13194: agent attempted to obtain it, this failed in some way
13195: (e.g. <a href="#url">URL</a> could not be <a href="#resolve-a-url" title="resolve a
13196: url">resolved</a>, network error, unknown text track
13197: format). Some or all of the cues are likely missing and will not
13198: be obtained.</p>
13199:
13200: </dd>
13201:
13202: </dl><p>The <a href="#text-track-readiness-state" title="text track readiness state">readiness
13203: state</a> of a <a href="#text-track">text track</a> changes dynamically as
13204: the track is obtained.</p>
13205:
13206: </dd>
13207:
13208: <dt><dfn id="text-track-mode" role="button" tabindex="0" aria-haspopup="true">A mode</dfn>
13209:
13210: </dt><dd>
13211:
13212: <p>One of the following:</p>
13213:
13214: <dl><dt><dfn id="text-track-disabled" role="button" tabindex="0" aria-haspopup="true">Disabled</dfn>
13215:
13216: </dt><dd>
13217:
13218: <p>Indicates that the text track is not active. Other than for
13219: the purposes of exposing the track in the DOM, the user agent is
13220: ignoring the text track. No cues are active, no events are
13221: fired, and the user agent will not attempt to obtain the track's
13222: cues.</p>
13223:
13224: </dd>
13225:
13226: <dt><dfn id="text-track-hidden" role="button" tabindex="0" aria-haspopup="true">Hidden</dfn>
13227:
13228: </dt><dd>
13229:
13230: <p>Indicates that the text track is active, but that the user
13231: agent is not actively displaying the cues. If no attempt has yet
13232: been made to obtain the track's cues, the user agent will
13233: perform such an attempt momentarily. The user agent is
13234: maintaining a list of which cues are active, and events are
13235: being fired accordingly.</p>
13236:
13237: </dd>
13238:
13239: <dt><dfn id="text-track-showing" role="button" tabindex="0" aria-haspopup="true">Showing</dfn>
13240: <dt><dfn id="text-track-showing-by-default" role="button" tabindex="0" aria-haspopup="true">Showing by default</dfn>
13241:
13242: </dt></dt><dd>
13243:
13244: <p>Indicates that the text track is active. If no attempt has
13245: yet been made to obtain the track's cues, the user agent will
13246: perform such an attempt momentarily. The user agent is
13247: maintaining a list of which cues are active, and events are
13248: being fired accordingly. In addition, for text tracks whose
13249: <a href="#text-track-kind" title="text track kind">kind</a> is <code title="dom-mediatrack-kind-subtitles">subtitles</code> or <code title="dom-mediatrack-kind-captions">captions</code>, the cues
1.600 mike 13250: are being overlaid on the video as appropriate; for text tracks
13251: whose <a href="#text-track-kind" title="text track kind">kind</a> is <code title="dom-mediatrack-kind-descriptions">descriptions</code>,
1.545 mike 13252: the user agent is making the cues available to the user in a
1.600 mike 13253: non-visual fashion; and for text tracks whose <a href="#text-track-kind" title="text
13254: track kind">kind</a> is <code title="dom-mediatrack-kind-chapters">chapters</code>, the user
1.545 mike 13255: agent is making available to the user a mechanism by which the
13256: user can navigate to any point in the <a href="#media-resource">media
13257: resource</a> by selecting a cue.</p>
13258:
13259: <p>The <a href="#text-track-showing-by-default" title="text track showing by default">showing by
13260: default</a> state is used in conjunction with the <code title="attr-track-default"><a href="#attr-track-default">default</a></code> attribute on
13261: <code><a href="#the-track-element">track</a></code> elements to indicate that the text track was
13262: enabled due to that attribute. This allows the user agent to
13263: override the state if a later track is discovered that is more
13264: appropriate per the user's preferences.</p>
13265:
13266: </dd>
13267:
13268: </dl></dd>
13269:
13270: <dt><dfn id="text-track-list-of-cues" role="button" tabindex="0" aria-haspopup="true">A list of zero or more cues</dfn>
13271:
13272: </dt><dd>
13273:
13274: <p>A list of <a href="#text-track-cue" title="text track cue">text track
13275: cues</a>, along with <dfn id="rules-for-updating-the-text-track-rendering" role="button" tabindex="0" aria-haspopup="true">rules for updating the text track
13276: rendering</dfn>.
13277: </p>
13278:
13279: <p>The <a href="#text-track-list-of-cues" title="text track list of cues">list of cues of a
13280: text track</a> can change dynamically, either because the
13281: <a href="#text-track">text track</a> has <a href="#text-track-not-loaded" title="text track not
13282: loaded">not yet been loaded</a> or is still <a href="#text-track-loading" title="text
13283: track loading">loading</a>, or because the <a href="#text-track">text
13284: track</a> corresponds to a <code><a href="#mutabletexttrack">MutableTextTrack</a></code>
13285: object, whose API allows individual cues can be added or removed
13286: dynamically.</p>
13287:
13288: </dd>
13289:
13290: </dl><p>Each <a href="#text-track">text track</a> has a corresponding
13291: <code><a href="#texttrack">TextTrack</a></code> object.</p><p>The <a href="#text-track" title="text track">text tracks</a> of a
13292: <a href="#media-element">media element</a> are <dfn id="the-text-tracks-are-ready" role="button" tabindex="0" aria-haspopup="true">ready</dfn> if all the <a href="#text-track" title="text track">text
13293: tracks</a> whose <a href="#text-track-mode" title="text track mode">mode</a> was
13294: not in the <a href="#text-track-disabled" title="text track disabled">disabled</a> state
13295: when the element's <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection
13296: algorithm</a> last started now have a <a href="#text-track-readiness-state">text track readiness
13297: state</a> of <a href="#text-track-loaded" title="text track loaded">loaded</a> or
13298: <a href="#text-track-failed-to-load" title="text track failed to load">failed to load</a>.</p><hr><p>A <dfn id="text-track-cue" role="button" tabindex="0" aria-haspopup="true">text track cue</dfn> is the unit of time-sensitive data
13299: in a <a href="#text-track">text track</a>, corresponding for instance for
13300: subtitles and captions to the text that appears at a particular time
13301: and disappears at another time.</p><p>Each <a href="#text-track-cue">text track cue</a> consists of:</p><dl><dt><dfn id="text-track-cue-identifier" role="button" tabindex="0" aria-haspopup="true">An identifier</dfn>
13302: </dt><dd>
13303: <p>An arbitrary string.</p>
13304: </dd>
13305:
13306: <dt><dfn id="text-track-cue-start-time" role="button" tabindex="0" aria-haspopup="true">A start time</dfn>
13307: </dt><dd>
13308: <p>A time, in seconds and fractions of a second, at which the cue
13309: becomes relevant.</p>
13310: </dd>
13311:
13312: <dt><dfn id="text-track-cue-end-time" role="button" tabindex="0" aria-haspopup="true">An end time</dfn>
13313: </dt><dd>
13314: <p>A time, in seconds and fractions of a second, at which the cue
13315: stops being relevant.</p>
13316: </dd>
13317:
13318: <dt><dfn id="text-track-cue-pause-on-exit-flag" role="button" tabindex="0" aria-haspopup="true">A pause-on-exit flag</dfn>
13319: </dt><dd>
13320: <p>A boolean indicating whether playback of the <a href="#media-resource">media
13321: resource</a> is to pause when the cue stops being relevant.</p>
13322: </dd>
13323:
13324: <dt><dfn id="text-track-cue-writing-direction" role="button" tabindex="0" aria-haspopup="true">A writing direction</dfn>
13325: </dt><dd>
13326: <p>A writing direction, either <dfn id="text-track-cue-horizontal-writing-direction" role="button" tabindex="0" aria-haspopup="true">horizontal</dfn> (a line extends
13327: horizontally and is positioned vertically, with consecutive lines
13328: displayed below each other), <dfn id="text-track-cue-vertical-growing-left-writing-direction" role="button" tabindex="0" aria-haspopup="true">vertical growing left</dfn> (a
13329: line extends vertically and is positioned horizontally, with
13330: consecutive lines displayed to the left of each other), or <dfn id="text-track-cue-vertical-growing-right-writing-direction" role="button" tabindex="0" aria-haspopup="true">vertical growing right</dfn> (a
13331: line extends vertically and is positioned horizontally, with
13332: consecutive lines displayed to the right of each other).</p>
13333:
13334:
13335: </dd>
13336:
13337:
13338: <dt><dfn id="text-track-cue-size" role="button" tabindex="0" aria-haspopup="true">A size</dfn>
13339: </dt><dd>
13340: <p>A number giving the size of the box within which the text of
13341: each line of the cue is to be aligned, to be interpreted as a
13342: percentage of the video, as defined by the <a href="#text-track-cue-writing-direction" title="text
13343: track cue writing direction">writing direction</a>.</p>
13344: </dd>
13345:
13346:
13347: <dt><dfn id="text-track-cue-text" role="button" tabindex="0" aria-haspopup="true">The text of the cue</dfn>
13348: </dt><dd>
13349: <p>The raw text of the cue, and rules for its interpretation,
13350: allowing the text to be rendered and converted to a DOM fragment.</p>
13351: </dd>
13352:
13353: </dl><p>A <a href="#text-track-cue">text track cue</a> is immutable.</p><p>Each <a href="#text-track-cue">text track cue</a> has a corresponding
13354: <code><a href="#texttrackcue">TextTrackCue</a></code> object, and can be associated with a
13355: particular <a href="#text-track">text track</a>. Once a <a href="#text-track-cue">text track
13356: cue</a> is associated with a particular <a href="#text-track">text track</a>,
13357: the association is permanent.</p><p>In addition, each <a href="#text-track-cue">text track cue</a> has two pieces of
13358: dynamic information:</p><dl><dt>The <dfn id="text-track-cue-active-flag" role="button" tabindex="0" aria-haspopup="true">active flag</dfn>
13359: </dt><dd>
13360:
13361: <p>This flag must be initially unset. The flag is used to ensure
13362: events are fired appropriately when the cue becomes active or
13363: inactive, and to make sure the right cues are rendered.</p>
13364:
13365: <p>The user agent must synchronously unset this flag whenever the
13366: <a href="#text-track-cue">text track cue</a> is removed from its <a href="#text-track">text
13367: track</a>'s <a href="#text-track-list-of-cues">text track list of cues</a>; whenever the
13368: <a href="#text-track">text track</a> itself is removed from its <a href="#media-element">media
13369: element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> or has its
13370: <a href="#text-track-mode">text track mode</a> changed to <a href="#text-track-disabled" title="text track
13371: disabled">disabled</a>; and whenever the <a href="#media-element">media
13372: element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is changed back to
13373: <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>. When the
13374: flag is unset in this way for one or more cues in <a href="#text-track" title="text track">text tracks</a> that were <a href="#text-track-showing" title="text track showing">showing</a> or <a href="#text-track-showing-by-default" title="text
13375: track showing by default">showing by default</a> prior to the
13376: relevant incident, the user agent must, after having unset the
13377: flag for all the affected cues, apply the <a href="#rules-for-updating-the-text-track-rendering">rules for updating
13378: the text track rendering</a> of those <a href="#text-track" title="text
13379: track">text tracks</a>.
13380: </p></dd>
13381:
13382: <dt>The <dfn id="text-track-cue-display-state" role="button" tabindex="0" aria-haspopup="true">display state</dfn>
13383: </dt><dd>
13384:
13385: <p>This is used as part of the rendering model, to keep cues in a
13386: consistent position. It must initially be empty. Whenever the
13387: <a href="#text-track-cue-active-flag">text track cue active flag</a> is unset, the user agent
13388: must empty the <a href="#text-track-cue-display-state">text track cue display state</a>.</p>
13389:
13390: </dd>
13391:
13392: </dl><p>The <a href="#text-track-cue" title="text track cue">text track cues</a> of a
13393: <a href="#media-element">media element</a>'s <a href="#text-track" title="text track">text
13394: tracks</a> are ordered relative to each other in the <dfn id="text-track-cue-order" role="button" tabindex="0" aria-haspopup="true">text
13395: track cue order</dfn>, which is determined as follows: first group
13396: the <a href="#text-track-cue" title="text track cue">cues</a> by their <a href="#text-track">text
13397: track</a>, with the groups being sorted in the same order as
13398: their <a href="#text-track" title="text track">text tracks</a> appear in the
13399: <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>;
13400: then, within each group, <a href="#text-track-cue" title="text track cue">cues</a>
13401: must be sorted by their <a href="#text-track-cue-start-time" title="text track cue start
13402: time">start time</a>, earliest first; then, any <a href="#text-track-cue" title="text track cue">cues</a> with the same <a href="#text-track-cue-start-time" title="text
13403: track cue start time">start time</a> must be sorted by their
1.593 mike 13404: <a href="#text-track-cue-end-time" title="text track cue end time">end time</a>, latest
1.545 mike 13405: first; and finally, any <a href="#text-track-cue" title="text track cue">cues</a>
13406: with identical <a href="#text-track-cue-end-time" title="text track cue end time">end
13407: times</a> must be sorted in the order they were created (so
13408: e.g. for cues from a <span>WebVTT</span> file, that would be the
13409: order in which the cues were listed in the file).</p><h6 id="sourcing-in-band-text-tracks"><span class="secno">4.8.10.12.2 </span>Sourcing in-band text tracks</h6><p>A <dfn id="media-resource-specific-text-track" role="button" tabindex="0" aria-haspopup="true">media-resource-specific text track</dfn> is a <a href="#text-track">text
13410: track</a> that corresponds to data found in the <a href="#media-resource">media
1.615 mike 13411: resource</a>.</p><h6 id="text-track-api"><span class="secno">4.8.10.12.4 </span>Text track API</h6><pre class="idl">interface <dfn id="texttracklist" role="button" tabindex="0" aria-haspopup="true">TextTrackList</dfn> {
13412: readonly attribute unsigned long <a href="#dom-texttracklist-length" title="dom-TextTrackList-length">length</a>;
13413: getter <a href="#texttrack">TextTrack</a> (unsigned long index);
13414:
13415: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onaddtrack" title="handler-TextTrackList-onaddtrack">onaddtrack</a>;
1.616 mike 13416: };</pre><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-textTracks"><a href="#dom-media-texttracks">textTracks</a></code> . <code title="">length</code></dt>
1.545 mike 13417: <dd>
13418: <p>Returns the number of <a href="#text-track" title="text track">text tracks</a> associated with the <a href="#media-element">media element</a> (e.g. from <code><a href="#the-track-element">track</a></code> elements). This is the number of <a href="#text-track" title="text track">text tracks</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>.</p>
13419: </dd>
13420:
13421: <dt><var title="">media</var> . <code title="dom-media-textTracks"><a href="#dom-media-texttracks">textTracks[</a></code> <var title="">n</var> <code title="">]</code></dt>
13422: <dd>
13423: <p>Returns the <code><a href="#texttrack">TextTrack</a></code> object representing the <var title="">n</var>th <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>.</p>
13424: </dd>
13425:
13426: <dt><var title="">track</var> . <code title="dom-track-track"><a href="#dom-track-track">track</a></code></dt>
13427: <dd>
13428: <p>Returns the <code><a href="#texttrack">TextTrack</a></code> object representing the <code><a href="#the-track-element">track</a></code> element's <a href="#text-track">text track</a>.</p>
13429: </dd>
13430:
13431: </dl><hr><pre class="idl">interface <dfn id="texttrack" role="button" tabindex="0" aria-haspopup="true">TextTrack</dfn> : <a href="#eventtarget">EventTarget</a> {
13432: readonly attribute DOMString <a href="#dom-texttrack-kind" title="dom-TextTrack-kind">kind</a>;
13433: readonly attribute DOMString <a href="#dom-texttrack-label" title="dom-TextTrack-label">label</a>;
13434: readonly attribute DOMString <a href="#dom-texttrack-language" title="dom-TextTrack-language">language</a>;
13435:
13436: const unsigned short <a href="#dom-texttrack-none" title="dom-TextTrack-NONE">NONE</a> = 0;
13437: const unsigned short <a href="#dom-texttrack-loading" title="dom-TextTrack-LOADING">LOADING</a> = 1;
13438: const unsigned short <a href="#dom-texttrack-loaded" title="dom-TextTrack-LOADED">LOADED</a> = 2;
13439: const unsigned short <a href="#dom-texttrack-error" title="dom-TextTrack-ERROR">ERROR</a> = 3;
13440: readonly attribute unsigned short <a href="#dom-texttrack-readystate" title="dom-TextTrack-readyState">readyState</a>;
1.610 mike 13441: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onload" title="handler-TextTrack-onload">onload</a>;
13442: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onerror" title="handler-TextTrack-onerror">onerror</a>;
1.545 mike 13443:
1.605 mike 13444: const unsigned short <a href="#dom-texttrack-disabled" title="dom-TextTrack-DISABLED">DISABLED</a> = 0;
1.545 mike 13445: const unsigned short <a href="#dom-texttrack-hidden" title="dom-TextTrack-HIDDEN">HIDDEN</a> = 1;
13446: const unsigned short <a href="#dom-texttrack-showing" title="dom-TextTrack-SHOWING">SHOWING</a> = 2;
13447: attribute unsigned short <a href="#dom-texttrack-mode" title="dom-TextTrack-mode">mode</a>;
13448:
13449: readonly attribute <a href="#texttrackcuelist">TextTrackCueList</a>? <a href="#dom-texttrack-cues" title="dom-TextTrack-cues">cues</a>;
13450: readonly attribute <a href="#texttrackcuelist">TextTrackCueList</a>? <a href="#dom-texttrack-activecues" title="dom-TextTrack-activeCues">activeCues</a>;
13451:
1.610 mike 13452: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncuechange" title="handler-TextTrack-oncuechange">oncuechange</a>;
1.590 mike 13453: };</pre><dl class="domintro"><dt><var title="">textTrack</var> . <code title="dom-TextTrack-kind" id="dom-texttrack-kind"><a href="#dom-texttrack-kind">kind</a></code></dt>
1.545 mike 13454: <dd>
13455: <p>Returns the <a href="#text-track-kind">text track kind</a> string.</p>
13456: </dd>
13457:
13458: <dt><var title="">textTrack</var> . <code title="dom-TextTrack-label" id="dom-texttrack-label"><a href="#dom-texttrack-label">label</a></code></dt>
13459: <dd>
13460: <p>Returns the <a href="#text-track-label">text track label</a>.</p>
13461: </dd>
13462:
13463: <dt><var title="">textTrack</var> . <code title="dom-TextTrack-language" id="dom-texttrack-language"><a href="#dom-texttrack-language">language</a></code></dt>
13464: <dd>
13465: <p>Returns the <a href="#text-track-language">text track language</a> string.</p>
13466: </dd>
13467:
13468: <dt><var title="">textTrack</var> . <code title="dom-TextTrack-readyState" id="dom-texttrack-readystate"><a href="#dom-texttrack-readystate">readyState</a></code></dt>
13469: <dd>
13470: <p>Returns the <a href="#text-track-readiness-state">text track readiness state</a>,
13471: represented by a number from the following list:</p>
13472: <dl><dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-NONE"><a href="#dom-texttrack-none">NONE</a></code> (0)</dt>
13473: <dd>
13474: <p>The <a href="#text-track-not-loaded">text track not loaded</a> state.</p>
13475: </dd>
13476: <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-LOADING"><a href="#dom-texttrack-loading">LOADING</a></code> (1)</dt>
13477: <dd>
13478: <p>The <a href="#text-track-loading">text track loading</a> state.</p>
13479: </dd>
13480: <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-LOADED"><a href="#dom-texttrack-loaded">LOADED</a></code> (2)</dt>
13481: <dd>
13482: <p>The <a href="#text-track-loaded">text track loaded</a> state.</p>
13483: </dd>
13484: <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-ERROR"><a href="#dom-texttrack-error">ERROR</a></code> (3)</dt>
13485: <dd>
13486: <p>The <a href="#text-track-failed-to-load">text track failed to load</a> state.</p>
13487: </dd>
13488: </dl></dd>
13489:
13490: <dt><var title="">textTrack</var> . <code title="dom-TextTrack-mode" id="dom-texttrack-mode"><a href="#dom-texttrack-mode">mode</a></code></dt>
13491: <dd>
13492: <p>Returns the <a href="#text-track-mode">text track mode</a>, represented by a
13493: number from the following list:</p>
1.605 mike 13494: <dl><dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-DISABLED"><a href="#dom-texttrack-disabled">DISABLED</a></code> (0)</dt>
1.545 mike 13495: <dd>
13496: <p>The <a href="#text-track-disabled">text track disabled</a> mode.</p>
13497: </dd>
13498: <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-HIDDEN"><a href="#dom-texttrack-hidden">HIDDEN</a></code> (1)</dt>
13499: <dd>
13500: <p>The <a href="#text-track-hidden">text track hidden</a> mode.</p>
13501: </dd>
13502: <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-SHOWING"><a href="#dom-texttrack-showing">SHOWING</a></code> (2)</dt>
13503: <dd>
13504: <p>The <a href="#text-track-showing">text track showing</a> and <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> modes.</p>
13505: </dd>
13506: </dl><p>Can be set, to change the mode.</p>
13507: </dd>
13508:
13509: <dt><var title="">textTrack</var> . <code title="dom-TextTrack-cues" id="dom-texttrack-cues"><a href="#dom-texttrack-cues">cues</a></code></dt>
13510: <dd>
13511: <p>Returns the <a href="#text-track-list-of-cues">text track list of cues</a>, as a <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object.</p>
13512: </dd>
13513:
13514: <dt><var title="">textTrack</var> . <code title="dom-TextTrack-activeCues" id="dom-texttrack-activecues"><a href="#dom-texttrack-activecues">activeCues</a></code></dt>
13515: <dd>
13516: <p>Returns the <a href="#text-track-cue" title="text track cue">text track cues</a> from the <a href="#text-track-list-of-cues">text track list of cues</a> that are currently active (i.e. that start before the <a href="#current-playback-position">current playback position</a> and end after it), as a <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object.</p>
13517: </dd>
13518:
13519: </dl><hr><pre class="idl">interface <dfn id="mutabletexttrack" role="button" tabindex="0" aria-haspopup="true">MutableTextTrack</dfn> : <a href="#texttrack">TextTrack</a> {
1.562 mike 13520: void <a href="#dom-mutabletexttrack-addcue" title="dom-MutableTextTrack-addCue">addCue</a>(<a href="#texttrackcue">TextTrackCue</a> cue);
13521: void <a href="#dom-mutabletexttrack-removecue" title="dom-MutableTextTrack-removeCue">removeCue</a>(<a href="#texttrackcue">TextTrackCue</a> cue);
1.545 mike 13522: };</pre><dl class="domintro"><dt><var title="">mutableTextTrack</var> = <var title="">media</var> . <code title="dom-media-addTextTrack" id="dom-media-addtexttrack"><a href="#dom-media-addtexttrack">addTextTrack</a></code>( <var title="">kind</var> [, <var title="">label</var> [, <var title="">language</var> ] ] )</dt>
13523:
13524: <dd>
13525: <p>Creates and returns a new <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object, which is also added to the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>.</p>
13526: </dd>
13527:
13528: <dt><var title="">mutableTextTrack</var> . <code title="dom-MutableTextTrack-addCue" id="dom-mutabletexttrack-addcue"><a href="#dom-mutabletexttrack-addcue">addCue</a></code>( <var title="">cue</var> )</dt>
13529: <dd>
13530: <p>Adds the given cue to <var title="">mutableTextTrack</var>'s <a href="#text-track-list-of-cues">text track list of cues</a>.</p>
1.612 mike 13531: <p>Throws an exception if the argument is associated with another <a href="#text-track">text track</a> or already in the list of cues.</p>
1.545 mike 13532: </dd>
13533:
13534: <dt><var title="">mutableTextTrack</var> . <code title="dom-MutableTextTrack-removeCue" id="dom-mutabletexttrack-removecue"><a href="#dom-mutabletexttrack-removecue">removeCue</a></code>( <var title="">cue</var> )</dt>
13535: <dd>
13536: <p>Removes the given cue from <var title="">mutableTextTrack</var>'s <a href="#text-track-list-of-cues">text track list of cues</a>.</p>
1.612 mike 13537: <p>Throws an exception if the argument is associated with another <a href="#text-track">text track</a> or not in the list of cues.</p>
1.545 mike 13538: </dd>
13539:
13540: </dl><div class="example">
13541:
13542: <p>In this example, an <code><a href="#the-audio-element">audio</a></code> element is used to play a
13543: specific sound-effect from a sound file containing many sound
13544: effects. A cue is used to pause the audio, so that it ends exactly
13545: at the end of the clip, even if the browser is busy running some
13546: script. If the page had relied on script to pause the audio, then
13547: the start of the next clip might be heard if the browser was not
13548: able to run the script at the exact time specified.</p>
13549:
13550: <pre>var sfx = new Audio('sfx.wav');
13551: var sounds = a.addTextTrack('metadata');
13552:
13553: // add sounds we care about
13554: sounds.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
13555: sounds.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));
13556:
13557: function playSound(id) {
13558: sfx.currentTime = sounds.getCueById(id).startTime;
13559: sfx.play();
13560: }
13561:
13562: sfx.oncanplaythrough = function () {
13563: playSound('dog bark');
13564: }
13565: window.onbeforeunload = function () {
13566: playSound('kitten mew');
13567: return 'Are you sure you want to leave this awesome page?';
13568: }</pre>
13569:
13570: </div><hr><pre class="idl">interface <dfn id="texttrackcuelist" role="button" tabindex="0" aria-haspopup="true">TextTrackCueList</dfn> {
13571: readonly attribute unsigned long <a href="#dom-texttrackcuelist-length" title="dom-TextTrackCueList-length">length</a>;
1.562 mike 13572: getter <a href="#texttrackcue">TextTrackCue</a> (unsigned long index);
13573: <a href="#texttrackcue">TextTrackCue</a>? <a href="#dom-texttrackcuelist-getcuebyid" title="dom-TextTrackCueList-getCueById">getCueById</a>(DOMString id);
1.545 mike 13574: };</pre><dl class="domintro"><dt><var title="">cuelist</var> . <code title="dom-TextTrackCueList-length" id="dom-texttrackcuelist-length"><a href="#dom-texttrackcuelist-length">length</a></code></dt>
13575: <dd>
13576: <p>Returns the number of <a href="#text-track-cue" title="text track cue">cues</a> in the list.</p>
13577: </dd>
13578:
13579: <dt><var title="">cuelist</var>[<var title="">index</var>]</dt>
13580: <dd>
13581: <p>Returns the <a href="#text-track-cue">text track cue</a> with index <var title="">index</var> in the list. The cues are sorted in <a href="#text-track-cue-order">text track cue order</a>.</p>
13582: </dd>
13583:
13584: <dt><var title="">cuelist</var> . <code title="dom-TextTrackCueList-getCueById" id="dom-texttrackcuelist-getcuebyid"><a href="#dom-texttrackcuelist-getcuebyid">getCueById</a></code>( <var title="">id</var> )</dt>
13585: <dd>
13586: <p>Returns the first <a href="#text-track-cue">text track cue</a> (in <a href="#text-track-cue-order">text track cue order</a>) with <a href="#text-track-cue-identifier">text track cue identifier</a> <var title="">id</var>.</p>
13587: <p>Returns null if none of the cues have the given identifier or if the argument is the empty string.</p>
13588: </dd>
13589:
13590: </dl><hr><pre class="idl">
13591: interface <dfn id="texttrackcue" role="button" tabindex="0" aria-haspopup="true">TextTrackCue</dfn> : <a href="#eventtarget">EventTarget</a> {
13592: readonly attribute <a href="#texttrack">TextTrack</a>? <a href="#dom-texttrackcue-track" title="dom-TextTrackCue-track">track</a>;
13593: readonly attribute DOMString <a href="#dom-texttrackcue-id" title="dom-TextTrackCue-id">id</a>;
13594:
13595: readonly attribute double <a href="#dom-texttrackcue-starttime" title="dom-TextTrackCue-startTime">startTime</a>;
13596: readonly attribute double <a href="#dom-texttrackcue-endtime" title="dom-TextTrackCue-endTime">endTime</a>;
13597: readonly attribute boolean <a href="#dom-texttrackcue-pauseonexit" title="dom-TextTrackCue-pauseOnExit">pauseOnExit</a>;
13598:
13599:
13600: DOMString <a href="#dom-texttrackcue-getcueassource" title="dom-TextTrackCue-getCueAsSource">getCueAsSource</a>();
13601: <a href="#documentfragment">DocumentFragment</a> <a href="#dom-texttrackcue-getcueashtml" title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</a>();
13602:
1.610 mike 13603: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
13604: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
1.545 mike 13605: };</pre><dl class="domintro"><dt><var title="">cue</var> . <a href="#dom-texttrackcue-track" title="dom-TextTrackCue-track" id="dom-texttrackcue-track">track</a></dt>
13606: <dd>
13607: <p>Returns the <code><a href="#texttrack">TextTrack</a></code> object to which this
13608: <a href="#text-track-cue">text track cue</a> belongs, if any, or null
13609: otherwise.</p>
13610: </dd>
13611:
13612: <dt><var title="">cue</var> . <a href="#dom-texttrackcue-id" title="dom-TextTrackCue-id" id="dom-texttrackcue-id">id</a></dt>
13613: <dd>
13614: <p>Returns the <a href="#text-track-cue-identifier">text track cue identifier</a>.</p>
13615: </dd>
13616:
13617: <dt><var title="">cue</var> . <a href="#dom-texttrackcue-starttime" title="dom-TextTrackCue-startTime" id="dom-texttrackcue-starttime">startTime</a></dt>
13618: <dd>
13619: <p>Returns the <a href="#text-track-cue-start-time">text track cue start time</a>, in seconds.</p>
13620: </dd>
13621:
13622: <dt><var title="">cue</var> . <a href="#dom-texttrackcue-endtime" title="dom-TextTrackCue-endTime" id="dom-texttrackcue-endtime">endTime</a></dt>
13623: <dd>
13624: <p>Returns the <a href="#text-track-cue-end-time">text track cue end time</a>, in seconds.</p>
13625: </dd>
13626:
13627: <dt><var title="">cue</var> . <a href="#dom-texttrackcue-pauseonexit" title="dom-TextTrackCue-pauseOnExit" id="dom-texttrackcue-pauseonexit">pauseOnExit</a></dt>
13628: <dd>
13629: <p>Returns true if the <a href="#text-track-cue-pause-on-exit-flag">text track cue pause-on-exit flag</a> is set, false otherwise.</p>
13630: </dd>
13631:
13632:
13633: <dt><var title="">source</var> = <var title="">cue</var> . <a href="#dom-texttrackcue-getcueassource" title="dom-TextTrackCue-getCueAsSource" id="dom-texttrackcue-getcueassource">getCueAsSource</a>()</dt>
13634: <dd>
13635: <p>Returns the <a href="#text-track-cue-text">text track cue text</a> in raw unparsed form.</p>
13636: </dd>
13637:
13638: <dt><var title="">fragment</var> = <var title="">cue</var> . <a href="#dom-texttrackcue-getcueashtml" title="dom-TextTrackCue-getCueAsHTML" id="dom-texttrackcue-getcueashtml">getCueAsHTML</a>()</dt>
13639: <dd>
13640: <p>Returns the <a href="#text-track-cue-text">text track cue text</a> as a <code><a href="#documentfragment">DocumentFragment</a></code> of <a href="#html-elements">HTML elements</a> and other DOM nodes.</p>
13641: </dd>
13642:
13643: </dl><h6 id="text-tracks-describing-chapters"><span class="secno">4.8.10.12.5 </span>Text tracks describing chapters</h6><p>Chapters are segments of a <a href="#media-resource">media resource</a> with a
13644: given title. Chapters can be nested, in the same way that sections
13645: in a document outline can have subsections.</p><p>Each <a href="#text-track-cue">text track cue</a> in a <a href="#text-track">text track</a>
13646: being used for describing chapters has three key features: the
13647: <a href="#text-track-cue-start-time">text track cue start time</a>, giving the start time of the
13648: chapter, the <a href="#text-track-cue-end-time">text track cue end time</a>, giving the end
13649: time of the chapter, and the <a href="#text-track-cue-text">text track cue text</a> giving
13650: the chapter title.</p><h5 id="user-interface"><span class="secno">4.8.10.13 </span>User interface</h5><p>The <dfn id="attr-media-controls" role="button" tabindex="0" aria-haspopup="true"><code>controls</code></dfn>
13651: attribute is a <a href="#boolean-attribute">boolean attribute</a>. If present, it
13652: indicates that the author has not provided a scripted controller and
13653: would like the user agent to provide its own set of controls.</p>
13654: <p>The <dfn id="dom-media-controls" role="button" tabindex="0" aria-haspopup="true"><code>controls</code></dfn>
13655: IDL attribute must <a href="#reflect">reflect</a> the content attribute of the
13656: same name.</p>
13657: <dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-volume" id="dom-media-volume"><a href="#dom-media-volume">volume</a></code> [ = <var title="">value</var> ]</dt>
13658:
13659: <dd>
13660:
13661: <p>Returns the current playback volume, as a number in the range
13662: 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.</p>
13663:
13664: <p>Can be set, to change the volume.</p>
13665:
1.612 mike 13666: <p>Throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> if the new value is not
1.545 mike 13667: in the range 0.0 .. 1.0.</p>
13668:
13669: </dd>
13670:
13671: <dt><var title="">media</var> . <code title="dom-media-muted" id="dom-media-muted"><a href="#dom-media-muted">muted</a></code> [ = <var title="">value</var> ]</dt>
13672:
13673: <dd>
13674:
13675: <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
13676: <code title="dom-media-volume"><a href="#dom-media-volume">volume</a></code> attribute is being
13677: honored.</p>
13678:
13679: <p>Can be set, to change whether the audio is muted or not.</p>
13680:
13681: </dd>
13682:
13683: </dl><p>The <dfn id="attr-media-muted" role="button" tabindex="0" aria-haspopup="true"><code>muted</code></dfn>
1.548 mike 13684: attribute on <a href="#media-element" title="media element">media elements</a> is a
13685: <a href="#boolean-attribute">boolean attribute</a> that controls the default state of
1.551 mike 13686: the audio output of the <a href="#media-resource">media resource</a>, potentially
1.548 mike 13687: overriding user preferences.</p>
1.545 mike 13688: <p>The <dfn id="dom-media-defaultmuted" role="button" tabindex="0" aria-haspopup="true"><code>defaultMuted</code></dfn> IDL
13689: attribute must <a href="#reflect">reflect</a> the <code title="attr-media-muted"><a href="#attr-media-muted">muted</a></code> content attribute.</p>
13690: <p class="note">This attribute has no dynamic effect (it only
13691: controls the default state of the element).</p><div class="example">
13692:
13693: <p>This video (an advertisment) autoplays, but to avoid annoying
13694: users, it does so without sound, and allows the user to turn the
13695: sound on.</p>
13696:
13697: <pre><video src="adverts.cgi?kind=video" controls autoplay loop muted></video></pre>
13698:
13699: </div><h5 id="time-ranges"><span class="secno">4.8.10.14 </span>Time ranges</h5><p>Objects implementing the <code><a href="#timeranges">TimeRanges</a></code> interface
13700: represent a list of ranges (periods) of time.</p><pre class="idl">interface <dfn id="timeranges" role="button" tabindex="0" aria-haspopup="true">TimeRanges</dfn> {
13701: readonly attribute unsigned long <a href="#dom-timeranges-length" title="dom-TimeRanges-length">length</a>;
1.562 mike 13702: double <a href="#dom-timeranges-start" title="dom-TimeRanges-start">start</a>(unsigned long index);
13703: double <a href="#dom-timeranges-end" title="dom-TimeRanges-end">end</a>(unsigned long index);
1.545 mike 13704: };</pre><dl class="domintro"><dt><var title="">media</var> . <code title="dom-TimeRanges-length" id="dom-timeranges-length"><a href="#dom-timeranges-length">length</a></code></dt>
13705:
13706: <dd>
13707:
13708: <p>Returns the number of ranges in the object.</p>
13709:
13710: </dd>
13711:
13712: <dt><var title="">time</var> = <var title="">media</var> . <code title="dom-TimeRanges-start" id="dom-timeranges-start"><a href="#dom-timeranges-start">start</a></code>(<var title="">index</var>)</dt>
13713:
13714: <dd>
13715:
13716: <p>Returns the time for the start of the range with the given index.</p>
13717:
1.612 mike 13718: <p>Throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> if the index is out of range.</p>
1.545 mike 13719:
13720: </dd>
13721:
13722: <dt><var title="">time</var> = <var title="">media</var> . <code title="dom-TimeRanges-end" id="dom-timeranges-end"><a href="#dom-timeranges-end">end</a></code>(<var title="">index</var>)</dt>
13723:
13724: <dd>
13725:
13726: <p>Returns the time for the end of the range with the given index.</p>
13727:
1.612 mike 13728: <p>Throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> if the index is out of range.</p>
1.545 mike 13729:
13730: </dd>
13731:
1.615 mike 13732: </dl><h5 id="event-definitions"><span class="secno">4.8.10.15 </span>Event definitions</h5><pre class="idl">[Constructor(DOMString type, optional <a href="#trackeventinit">TrackEventInit</a> eventInitDict)]
13733: interface <dfn id="trackevent" role="button" tabindex="0" aria-haspopup="true">TrackEvent</dfn> : <a href="#event">Event</a> {
13734: readonly attribute object? <a href="#dom-trackevent-track" title="dom-TrackEvent-track">track</a>;
13735: };
13736:
13737: dictionary <dfn id="trackeventinit" role="button" tabindex="0" aria-haspopup="true">TrackEventInit</dfn> : <a href="#eventinit">EventInit</a> {
13738: object? Track;
13739: };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-TrackEvent-track" id="dom-trackevent-track"><a href="#dom-trackevent-track">track</a></code></dt>
13740:
13741: <dd>
13742:
13743: <p>Returns the track object (<code><a href="#texttrack">TextTrack</a></code>,
13744: <code><a href="#audiotrack">AudioTrack</a></code>, or <code><a href="#videotrack">VideoTrack</a></code>) to which the
13745: event relates.</p>
13746:
13747: </dd>
13748:
13749: </dl><h5 id="mediaevents"><span class="secno">4.8.10.16 </span>Event summary</h5><p><i>This section is non-normative.</i></p><p>The following events fire on <a href="#media-element" title="media element">media
1.545 mike 13750: elements</a> as part of the processing model described above:</p><table><thead><tr><th>Event name
13751: </th><th>Interface
13752: </th><th>Fired when...
13753: </th><th>Preconditions
13754:
13755: </th></tr></thead><tbody><tr><td><dfn id="event-media-loadstart" role="button" tabindex="0" aria-haspopup="true"><code>loadstart</code></dfn>
13756: </td><td><code><a href="#event">Event</a></code>
13757: </td><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>.
13758: </td><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>
13759: </td></tr><tr><td><dfn id="event-media-progress" role="button" tabindex="0" aria-haspopup="true"><code>progress</code></dfn>
13760: </td><td><code><a href="#event">Event</a></code>
13761: </td><td>The user agent is fetching <a href="#media-data">media data</a>.
13762: </td><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>
13763: </td></tr><tr><td><dfn id="event-media-suspend" role="button" tabindex="0" aria-haspopup="true"><code>suspend</code></dfn>
13764: </td><td><code><a href="#event">Event</a></code>
1.595 mike 13765: </td><td>The user agent is intentionally not currently fetching <a href="#media-data">media data</a>.
1.545 mike 13766: </td><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>
13767: </td></tr><tr><td><dfn id="event-media-abort" role="button" tabindex="0" aria-haspopup="true"><code>abort</code></dfn>
13768: </td><td><code><a href="#event">Event</a></code>
13769: </td><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.
13770: </td><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>.
13771: <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.
13772: </td></tr><tr><td><dfn id="event-media-error" role="button" tabindex="0" aria-haspopup="true"><code>error</code></dfn>
13773: </td><td><code><a href="#event">Event</a></code>
13774: </td><td>An error occurs while fetching the <a href="#media-data">media data</a>.
13775: </td><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.
13776: <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.
13777: </td></tr><tr><td><dfn id="event-media-emptied" role="button" tabindex="0" aria-haspopup="true"><code>emptied</code></dfn>
13778: </td><td><code><a href="#event">Event</a></code>
13779: </td><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).
13780: </td><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.
13781: </td></tr><tr><td><dfn id="event-media-stalled" role="button" tabindex="0" aria-haspopup="true"><code>stalled</code></dfn>
13782: </td><td><code><a href="#event">Event</a></code>
13783: </td><td>The user agent is trying to fetch <a href="#media-data">media data</a>, but data is unexpectedly not forthcoming.
13784: </td><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>.
13785:
13786: </td></tr></tbody><tbody><tr><td><dfn id="event-media-loadedmetadata" role="button" tabindex="0" aria-haspopup="true"><code>loadedmetadata</code></dfn>
13787: </td><td><code><a href="#event">Event</a></code>
13788: </td><td>The user agent has just determined the duration and dimensions of the <a href="#media-resource">media resource</a>
13789: and <a href="#the-text-tracks-are-ready">the text tracks are ready</a>.
13790: </td><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.
13791: </td></tr><tr><td><dfn id="event-media-loadeddata" role="button" tabindex="0" aria-haspopup="true"><code>loadeddata</code></dfn>
13792: </td><td><code><a href="#event">Event</a></code>
13793: </td><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.
13794: </td><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.
13795: </td></tr><tr><td><dfn id="event-media-canplay" role="button" tabindex="0" aria-haspopup="true"><code>canplay</code></dfn>
13796: </td><td><code><a href="#event">Event</a></code>
13797: </td><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.
13798: </td><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.
13799: </td></tr><tr><td><dfn id="event-media-canplaythrough" role="button" tabindex="0" aria-haspopup="true"><code>canplaythrough</code></dfn>
13800: </td><td><code><a href="#event">Event</a></code>
13801: </td><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.
13802: </td><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>.
13803: </td></tr><tr><td><dfn id="event-media-playing" role="button" tabindex="0" aria-haspopup="true"><code>playing</code></dfn>
13804: </td><td><code><a href="#event">Event</a></code>
13805: </td><td>Playback is ready to start after having been paused or delayed due to lack of <a href="#media-data">media data</a>.
13806: </td><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> and <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is false, or <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is newly false and <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is equal to or greater than <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code>. Even if this event fires, the element might still not be <a href="#potentially-playing">potentially playing</a>, e.g. if
13807: the element is <a href="#blocked-on-its-media-controller">blocked on its media controller</a> (e.g. because the <a href="#current-media-controller">current media controller</a> is paused, or another <a href="#slaved-media-elements" title="slaved media elements">slaved media element</a> is stalled somehow, or because the <a href="#media-resource">media resource</a> has no data corresponding to the <a href="#media-controller-position">media controller position</a>), or
13808: the element is <a href="#paused-for-user-interaction">paused for user interaction</a>.
13809: </td></tr><tr><td><dfn id="event-media-waiting" role="button" tabindex="0" aria-haspopup="true"><code>waiting</code></dfn>
13810: </td><td><code><a href="#event">Event</a></code>
13811: </td><td>Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course.
13812: </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is 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 other reasons without <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> being false, but those reasons do not fire this event (and when those situations resolve, a separate <code title="event-media-playing"><a href="#event-media-playing">playing</a></code> event is not fired either): e.g.
13813: the element is newly <a href="#blocked-on-its-media-controller">blocked on its media controller</a>, or
13814: <a href="#ended-playback" title="ended playback">playback ended</a>, or playback <a href="#stopped-due-to-errors">stopped due to errors</a>, or the element has <a href="#paused-for-user-interaction">paused for user interaction</a>.
13815: </td></tr></tbody><tbody><tr><td><dfn id="event-media-seeking" role="button" tabindex="0" aria-haspopup="true"><code>seeking</code></dfn>
13816: </td><td><code><a href="#event">Event</a></code>
13817: </td><td>The <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute changed to true.
13818: </td><td>
13819: </td></tr><tr><td><dfn id="event-media-seeked" role="button" tabindex="0" aria-haspopup="true"><code>seeked</code></dfn>
13820: </td><td><code><a href="#event">Event</a></code>
13821: </td><td>The <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute changed to false.
13822: </td><td>
13823: </td></tr><tr><td><dfn id="event-media-ended" role="button" tabindex="0" aria-haspopup="true"><code>ended</code></dfn>
13824: </td><td><code><a href="#event">Event</a></code>
13825: </td><td>Playback has stopped because the end of the <a href="#media-resource">media resource</a> was reached.
13826: </td><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.
13827:
13828: </td></tr></tbody><tbody><tr><td><dfn id="event-media-durationchange" role="button" tabindex="0" aria-haspopup="true"><code>durationchange</code></dfn>
13829: </td><td><code><a href="#event">Event</a></code>
13830: </td><td>The <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute has just been updated.
13831: </td><td>
13832: </td></tr><tr><td><dfn id="event-media-timeupdate" role="button" tabindex="0" aria-haspopup="true"><code>timeupdate</code></dfn>
13833: </td><td><code><a href="#event">Event</a></code>
13834: </td><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.
13835: </td><td>
13836: </td></tr><tr><td><dfn id="event-media-play" role="button" tabindex="0" aria-haspopup="true"><code>play</code></dfn>
13837: </td><td><code><a href="#event">Event</a></code>
13838: </td><td>The element is no longer paused. 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.
13839: </td><td><code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is newly false.
13840: </td></tr><tr><td><dfn id="event-media-pause" role="button" tabindex="0" aria-haspopup="true"><code>pause</code></dfn>
13841: </td><td><code><a href="#event">Event</a></code>
13842: </td><td>The element has been paused. Fired after the <code title="dom-media-pause"><a href="#dom-media-pause">pause()</a></code> method has returned.
13843: </td><td><code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is newly true.
13844: </td></tr><tr><td><dfn id="event-media-ratechange" role="button" tabindex="0" aria-haspopup="true"><code>ratechange</code></dfn>
13845: </td><td><code><a href="#event">Event</a></code>
13846: </td><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.
13847: </td><td>
13848: </td></tr><tr><td><dfn id="event-media-volumechange" role="button" tabindex="0" aria-haspopup="true"><code>volumechange</code></dfn>
13849: </td><td><code><a href="#event">Event</a></code>
13850: </td><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.
13851: </td><td>
13852: </td></tr></tbody></table><p>The following events fire on <code><a href="#mediacontroller">MediaController</a></code> objects:</p><table><thead><tr><th>Event name
13853: </th><th>Interface
13854: </th><th>Fired when...
13855:
13856: </th></tr></thead><tbody><tr><td><dfn id="event-mediacontroller-emptied" role="button" tabindex="0" aria-haspopup="true"><code>emptied</code></dfn>
13857: </td><td><code><a href="#event">Event</a></code>
13858: </td><td>All the <a href="#slaved-media-elements">slaved media elements</a> newly have <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> set to <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code> or greater, or there are no longer any <a href="#slaved-media-elements">slaved media elements</a>.
13859: </td></tr><tr><td><dfn id="event-mediacontroller-loadedmetadata" role="button" tabindex="0" aria-haspopup="true"><code>loadedmetadata</code></dfn>
13860: </td><td><code><a href="#event">Event</a></code>
13861: </td><td>All the <a href="#slaved-media-elements">slaved media elements</a> newly have <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> set to <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> or greater.
13862: </td></tr><tr><td><dfn id="event-mediacontroller-loadeddata" role="button" tabindex="0" aria-haspopup="true"><code>loadeddata</code></dfn>
13863: </td><td><code><a href="#event">Event</a></code>
13864: </td><td>All the <a href="#slaved-media-elements">slaved media elements</a> newly have <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> set to <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or greater.
13865: </td></tr><tr><td><dfn id="event-mediacontroller-canplay" role="button" tabindex="0" aria-haspopup="true"><code>canplay</code></dfn>
13866: </td><td><code><a href="#event">Event</a></code>
13867: </td><td>All the <a href="#slaved-media-elements">slaved media elements</a> newly have <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> set to <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or greater.
13868: </td></tr><tr><td><dfn id="event-mediacontroller-canplaythrough" role="button" tabindex="0" aria-haspopup="true"><code>canplaythrough</code></dfn>
13869: </td><td><code><a href="#event">Event</a></code>
13870: </td><td>All the <a href="#slaved-media-elements">slaved media elements</a> newly have <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> set to <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code> or greater.
13871: </td></tr><tr><td><dfn id="event-mediacontroller-playing" role="button" tabindex="0" aria-haspopup="true"><code>playing</code></dfn>
13872: </td><td><code><a href="#event">Event</a></code>
13873: </td><td>The <code><a href="#mediacontroller">MediaController</a></code> is no longer a <a href="#blocked-media-controller">blocked media controller</a>.
13874: </td></tr><tr><td><dfn id="event-mediacontroller-ended" role="button" tabindex="0" aria-haspopup="true"><code>ended</code></dfn>
13875: </td><td><code><a href="#event">Event</a></code>
13876: </td><td>The <code><a href="#mediacontroller">MediaController</a></code> has reached the end of all the <a href="#slaved-media-elements">slaved media elements</a>.
13877: </td></tr><tr><td><dfn id="event-mediacontroller-waiting" role="button" tabindex="0" aria-haspopup="true"><code>waiting</code></dfn>
13878: </td><td><code><a href="#event">Event</a></code>
13879: </td><td>The <code><a href="#mediacontroller">MediaController</a></code> is now a <a href="#blocked-media-controller">blocked media controller</a>.
13880: </td></tr><tr><td><dfn id="event-mediacontcoller-ended" role="button" tabindex="0" aria-haspopup="true"><code>ended</code></dfn>
13881: </td><td><code><a href="#event">Event</a></code>
13882: </td><td>All the <a href="#slaved-media-elements">slaved media elements</a> have newly <a href="#ended-playback">ended playback</a>.
13883:
13884: </td></tr></tbody><tbody><tr><td><dfn id="event-mediacontroller-durationchange" role="button" tabindex="0" aria-haspopup="true"><code>durationchange</code></dfn>
13885: </td><td><code><a href="#event">Event</a></code>
13886: </td><td>The <code title="dom-MediaController-duration"><a href="#dom-mediacontroller-duration">duration</a></code> attribute has just been updated.
13887: </td></tr><tr><td><dfn id="event-mediacontroller-timeupdate" role="button" tabindex="0" aria-haspopup="true"><code>timeupdate</code></dfn>
13888: </td><td><code><a href="#event">Event</a></code>
13889: </td><td>The <a href="#media-controller-position">media controller position</a> changed.
13890: </td></tr><tr><td><dfn id="event-mediacontroller-play" role="button" tabindex="0" aria-haspopup="true"><code>play</code></dfn>
13891: </td><td><code><a href="#event">Event</a></code>
13892: </td><td>The <code title="dom-MediaController-paused"><a href="#dom-mediacontroller-paused">paused</a></code> attribute is newly false.
13893: </td></tr><tr><td><dfn id="event-mediacontroller-pause" role="button" tabindex="0" aria-haspopup="true"><code>pause</code></dfn>
13894: </td><td><code><a href="#event">Event</a></code>
13895: </td><td>The <code title="dom-MediaController-paused"><a href="#dom-mediacontroller-paused">paused</a></code> attribute is newly true.
13896: </td></tr><tr><td><dfn id="event-mediacontroller-ratechange" role="button" tabindex="0" aria-haspopup="true"><code>ratechange</code></dfn>
13897: </td><td><code><a href="#event">Event</a></code>
13898: </td><td>Either the <code title="dom-MediaController-defaultPlaybackRate"><a href="#dom-mediacontroller-defaultplaybackrate">defaultPlaybackRate</a></code> attribute or the <code title="dom-MediaController-playbackRate"><a href="#dom-mediacontroller-playbackrate">playbackRate</a></code> attribute has just been updated.
13899: </td></tr><tr><td><dfn id="event-mediacontroller-volumechange" role="button" tabindex="0" aria-haspopup="true"><code>volumechange</code></dfn>
13900: </td><td><code><a href="#event">Event</a></code>
13901: </td><td>Either the <code title="dom-MediaController-volume"><a href="#dom-mediacontroller-volume">volume</a></code> attribute or the <code title="dom-MediaController-muted"><a href="#dom-mediacontroller-muted">muted</a></code> attribute has just been updated.
1.615 mike 13902: </td></tr></tbody></table><h5 id="best-practices-for-authors-using-media-elements"><span class="secno">4.8.10.18 </span>Best practices for authors using media elements</h5><p><i>This section is non-normative.</i></p><p>Playing audio and video resources on small devices such as
1.545 mike 13903: set-top boxes or mobile phones is often constrained by limited
13904: hardware resources in the device. For example, a device might only
13905: support three simultaneous videos. For this reason, it is a good
13906: practice to release resources held by <a href="#media-element" title="media
13907: element">media elements</a> when they are done playing, either by
13908: being very careful about removing all references to the element and
13909: allowing it to be garbage collected, or, even better, by removing
13910: the element's <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute and
13911: any <code><a href="#the-source-element">source</a></code> element descendants, and invoking the
13912: element's <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> method.</p><p>Similarly, when the playback rate is not exactly 1.0, hardware,
13913: software, or format limitations can cause video frames to be dropped
13914: and audio to be choppy or muted.</p><h4 id="the-canvas-element"><span class="secno">4.8.11 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>canvas</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
13915: <dd><a href="#flow-content">Flow content</a>.</dd>
13916: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
13917: <dd><a href="#embedded-content">Embedded content</a>.</dd>
1.629 ! mike 13918: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 13919: <dt>Contexts in which this element can be used:</dt>
13920: <dd>Where <a href="#embedded-content">embedded content</a> is expected.</dd>
13921: <dt>Content model:</dt>
13922: <dd><a href="#transparent">Transparent</a>.</dd>
13923: <dd><a href="#transparent">Transparent</a>.</dd>
13924: <dt>Content attributes:</dt>
13925: <dd><a href="#global-attributes">Global attributes</a></dd>
13926: <dd><code title="attr-canvas-width"><a href="#attr-canvas-width">width</a></code></dd>
13927: <dd><code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code></dd>
13928: <dt>DOM interface:</dt>
13929: <dd>
13930: <pre class="idl">interface <dfn id="htmlcanvaselement" role="button" tabindex="0" aria-haspopup="true">HTMLCanvasElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
13931: attribute unsigned long <a href="#dom-canvas-width" title="dom-canvas-width">width</a>;
13932: attribute unsigned long <a href="#dom-canvas-height" title="dom-canvas-height">height</a>;
13933:
1.562 mike 13934: DOMString <a href="#dom-canvas-todataurl" title="dom-canvas-toDataURL">toDataURL</a>(optional DOMString type, any... args);
13935: void <a href="#dom-canvas-toblob" title="dom-canvas-toBlob">toBlob</a>(<span>FileCallback</span>? callback, optional DOMString type, any... args);
1.545 mike 13936:
1.562 mike 13937: object? <a href="#dom-canvas-getcontext" title="dom-canvas-getContext">getContext</a>(DOMString contextId, any... args);
1.545 mike 13938: };</pre>
13939: </dd>
13940: </dl><p>The <code><a href="#the-canvas-element">canvas</a></code> element provides scripts with a
13941: resolution-dependent bitmap canvas, which can be used for rendering
13942: graphs, game graphics, or other visual images on the fly.</p><p>Authors should not use the <code><a href="#the-canvas-element">canvas</a></code> element in a
13943: document when a more suitable element is available. For example, it
13944: is inappropriate to use a <code><a href="#the-canvas-element">canvas</a></code> element to render a
13945: page heading: if the desired presentation of the heading is
13946: graphically intense, it should be marked up using appropriate
13947: elements (typically <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>) and then styled using CSS and
13948: supporting technologies such as XBL.</p><p>When authors use the <code><a href="#the-canvas-element">canvas</a></code> element, they must also
13949: provide content that, when presented to the user, conveys
13950: essentially the same function or purpose as the bitmap canvas. This
13951: content may be placed as content of the <code><a href="#the-canvas-element">canvas</a></code>
13952: element. The contents of the <code><a href="#the-canvas-element">canvas</a></code> element, if any,
13953: are the element's <a href="#fallback-content">fallback content</a>.</p><p>In interactive visual media, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
13954: <code><a href="#the-canvas-element">canvas</a></code> element, and if support for <code><a href="#the-canvas-element">canvas</a></code>
13955: elements has been enabled, the <code><a href="#the-canvas-element">canvas</a></code> element
13956: <a href="#represents">represents</a> <a href="#embedded-content">embedded content</a> consisting of
13957: a dynamically created image.</p><p>In non-interactive, static, visual media, if the
13958: <code><a href="#the-canvas-element">canvas</a></code> element has been previously painted on (e.g. if
13959: the page was viewed in an interactive visual medium and is now being
13960: printed, or if some script that ran during the page layout process
13961: painted on the element), then the <code><a href="#the-canvas-element">canvas</a></code> element
13962: <a href="#represents">represents</a> <a href="#embedded-content">embedded content</a> with the
13963: current image and size. Otherwise, the element represents its
13964: <a href="#fallback-content">fallback content</a> instead.</p><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
13965: <code><a href="#the-canvas-element">canvas</a></code> element or if support for <code><a href="#the-canvas-element">canvas</a></code>
13966: elements has been disabled, the <code><a href="#the-canvas-element">canvas</a></code> element
13967: <a href="#represents">represents</a> its <a href="#fallback-content">fallback content</a>
13968: instead.</p><!-- CANVAS-FOCUS-FALLBACK --><p>When a <code><a href="#the-canvas-element">canvas</a></code> element <a href="#represents">represents</a>
13969: <a href="#embedded-content">embedded content</a>, the user can still focus descendants
13970: of the <code><a href="#the-canvas-element">canvas</a></code> element (in the <a href="#fallback-content">fallback
13971: content</a>). When an element is focused, it is the target of
13972: keyboard interaction events (even though the element itself is not
13973: visible). This allows authors to make an interactive canvas
13974: keyboard-accessible: authors should have a one-to-one mapping of
13975: interactive regions to focusable elements in the <a href="#fallback-content">fallback
13976: content</a>. (Focus has no effect on mouse interaction
13977: events.) <a href="#refsDOMEVENTS">[DOMEVENTS]</a></p><p>The <code><a href="#the-canvas-element">canvas</a></code> element has two attributes to control the
13978: size of the coordinate space: <dfn id="attr-canvas-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> and <dfn id="attr-canvas-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn>. These
13979: attributes, when specified, must have values that are <a href="#valid-non-negative-integer" title="valid non-negative integer">valid non-negative
13980: integers</a>. <span class="impl">The <a href="#rules-for-parsing-non-negative-integers">rules for parsing
13981: non-negative integers</a> must be used to obtain their numeric
13982: values. If an attribute is missing, or if parsing its value returns
13983: an error, then the default value must be used instead.</span> The
13984: <code title="attr-canvas-width"><a href="#attr-canvas-width">width</a></code> attribute defaults to
13985: 300, and the <code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code>
13986: attribute defaults to 150.</p><p>The intrinsic dimensions of the <code><a href="#the-canvas-element">canvas</a></code> element equal
13987: the size of the coordinate space, with the numbers interpreted in
13988: CSS pixels. However, the element can be sized arbitrarily by a
13989: style sheet. During rendering, the image is scaled to fit this layout
13990: size.</p>
13991: <p>The <dfn id="dom-canvas-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> and
13992: <dfn id="dom-canvas-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn> IDL
13993: attributes must <a href="#reflect">reflect</a> the respective content
13994: attributes of the same name, with the same defaults.</p>
13995: <div class="example">
13996: <p>Only one square appears to be drawn in the following example:</p>
13997: <pre> // canvas is a reference to a <canvas> element
13998: var context = canvas.getContext('2d');
13999: context.fillRect(0,0,50,50);
14000: canvas.setAttribute('width', '300'); // clears the canvas
14001: context.fillRect(0,100,50,50);
14002: canvas.width = canvas.width; // clears the canvas
14003: context.fillRect(100,0,50,50); // only this square remains</pre>
14004: </div><hr><dl class="domintro"><dt><var title="">context</var> = <var title="">canvas</var> . <code title="dom-canvas-getContext" id="dom-canvas-getcontext"><a href="#dom-canvas-getcontext">getContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
14005:
14006: <dd>
14007:
14008: <p>Returns an object that exposes an API for drawing on the
14009: canvas. The first argument specifies the desired API. Subsequent
14010: arguments are handled by that API.</p>
14011:
14012:
14013: <p>The list of defined contexts is given on the <a href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki
14014: CanvasContexts page</a>. <a href="#refsWHATWGWIKI">[WHATWGWIKI]</a>
14015:
14016: </p><p>Returns null if the given context ID is not supported or if the
14017: canvas has already been initialized with some other (incompatible)
14018: context type (e.g. trying to get a "<code title="canvas-context-2d">2d</code>" context after getting a
14019: "<code title="canvas-context-webgl">webgl</code>" context).</p>
14020:
14021: </dd>
14022:
14023: </dl><hr><dl class="domintro"><dt><var title="">url</var> = <var title="">canvas</var> . <code title="dom-canvas-toDataURL" id="dom-canvas-todataurl"><a href="#dom-canvas-todataurl">toDataURL</a></code>( [ <var title="">type</var>, ... ])</dt>
14024:
14025: <dd>
14026:
14027: <p>Returns a <a href="#data-protocol" title="data protocol"><code title="">data:</code> URL</a> for the image in the canvas.</p>
14028:
14029: <p>The first argument, if provided, controls the type of the image
14030: to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
14031: type isn't supported. The other arguments are specific to the
14032: type, and control the way that the image is generated, as given in
14033: the table below.</p>
14034:
14035: <p>When trying to use types other than "<code>image/png</code>",
14036: authors can check if the image was really returned in the
14037: requested format by checking to see if the returned string starts
14038: with one of the exact strings "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". If it does, the image is PNG,
14039: and thus the requested type was not supported. (The one exception
14040: to this is if the canvas has either no height or no width, in
14041: which case the result might simply be "<code title="">data:,</code>".)</p>
14042:
14043: </dd>
14044:
14045: <dt><var title="">canvas</var> . <code title="dom-canvas-toBlob" id="dom-canvas-toblob"><a href="#dom-canvas-toblob">toBlob</a></code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
14046:
14047: <dd>
14048:
14049: <p>Creates a <code><a href="#blob">Blob</a></code> object representing a file
14050: containing the image in the canvas, and invokes a callback with a
14051: handle to that object.</p>
14052:
14053: <p>The second argument, if provided, controls the type of the
14054: image to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
14055: type isn't supported. The other arguments are specific to the
14056: type, and control the way that the image is generated, as given in
14057: the table below.</p>
14058:
14059: </dd>
14060:
14061: </dl><table><thead><tr><th> Type </th><th> Other arguments </th><th> Reference
14062: </th></tr></thead><tbody><tr><td> <code>image/jpeg</code>
14063: </td><td> The second argument<span class="impl">, if it</span> is a
14064: number in the range 0.0 to 1.0 inclusive<span class="impl">, must
14065: be</span> treated as the desired quality level. <span class="impl">If it is not a number or is outside that range, the
14066: user agent must use its default value, as if the argument had
14067: been omitted.</span>
14068: </td><td> <a href="#refsJPEG">[JPEG]</a>
14069: </td></tr></tbody></table><h4 id="the-map-element"><span class="secno">4.8.12 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>map</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14070: <dd><a href="#flow-content">Flow content</a>.</dd>
14071: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: <a href="#phrasing-content">phrasing content</a>.</dd>
1.629 ! mike 14072: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 14073: <dt>Contexts in which this element can be used:</dt>
14074: <dd>When the element only contains <a href="#phrasing-content">phrasing content</a>: where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
14075: <dd>Otherwise: where <a href="#flow-content">flow content</a> is expected.</dd>
14076: <dt>Content model:</dt>
14077: <dd><a href="#transparent">Transparent</a>.</dd>
14078: <dt>Content attributes:</dt>
14079: <dd><a href="#global-attributes">Global attributes</a></dd>
14080: <dd><code title="attr-map-name"><a href="#attr-map-name">name</a></code></dd>
14081: <dt>DOM interface:</dt>
14082: <dd>
14083: <pre class="idl">interface <dfn id="htmlmapelement" role="button" tabindex="0" aria-haspopup="true">HTMLMapElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
14084: attribute DOMString <a href="#dom-map-name" title="dom-map-name">name</a>;
14085: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-map-areas" title="dom-map-areas">areas</a>;
14086: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-map-images" title="dom-map-images">images</a>;
14087: };</pre>
14088: </dd>
14089: </dl><p>The <code><a href="#the-map-element">map</a></code> element, in conjunction with any
14090: <code><a href="#the-area-element">area</a></code> element descendants, defines an <a href="#image-map">image
14091: map</a>. The element <a href="#represents">represents</a> its children.</p><p>The <dfn id="attr-map-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> attribute
14092: gives the map a name so that it can be referenced. The attribute
14093: 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
14094: <code title="attr-map-name"><a href="#attr-map-name">name</a></code> attribute must not be a
14095: <a href="#compatibility-caseless" title="compatibility caseless">compatibility-caseless</a>
14096: match for the value of the <code title="attr-map-name"><a href="#attr-map-name">name</a></code>
14097: attribute of another <code><a href="#the-map-element">map</a></code> element in the same
14098: document. If the <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute is also
14099: specified, both attributes must have the same value.</p><dl class="domintro"><dt><var title="">map</var> . <code title="dom-map-areas" id="dom-map-areas"><a href="#dom-map-areas">areas</a></code></dt>
14100:
14101: <dd>
14102:
14103: <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>
14104:
14105: </dd>
14106:
14107: <dt><var title="">map</var> . <code title="dom-map-images" id="dom-map-images"><a href="#dom-map-images">images</a></code></dt>
14108:
14109: <dd>
14110:
14111: <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>
14112:
14113: </dd>
14114:
14115: </dl>
14116: <p>The IDL attribute <dfn id="dom-map-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> must
14117: <a href="#reflect">reflect</a> the content attribute of the same name.</p>
14118: <div class="example">
14119:
14120: <p>Image maps can be defined in conjunction with other content on
14121: the page, to ease maintenance. This example is of a page with an
14122: image map at the top of the page and a corresponding set of text
14123: links at the bottom.</p>
14124:
14125: <pre><!DOCTYPE HTML>
14126: <TITLE>Babies™: Toys</TITLE>
14127: <HEADER>
14128: <H1>Toys</H1>
14129: <IMG SRC="/images/menu.gif"
14130: ALT="Babies™ navigation menu. Select a department to go to its page."
14131: USEMAP="#NAV">
14132: </HEADER>
14133: ...
14134: <FOOTER>
14135: <MAP NAME="NAV">
14136: <P>
14137: <A HREF="/clothes/">Clothes</A>
14138: <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
14139: <A HREF="/toys/">Toys</A>
14140: <AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
14141: <A HREF="/food/">Food</A>
14142: <AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
14143: <A HREF="/books/">Books</A>
14144: <AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
14145: </MAP>
14146: </FOOTER></pre>
14147:
14148: </div><h4 id="the-area-element"><span class="secno">4.8.13 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>area</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14149: <dd><a href="#flow-content">Flow content</a>.</dd>
14150: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
14151: <dt>Contexts in which this element can be used:</dt>
14152: <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>
14153: <dt>Content model:</dt>
14154: <dd>Empty.</dd>
14155: <dt>Content attributes:</dt>
14156: <dd><a href="#global-attributes">Global attributes</a></dd>
14157: <dd><code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code></dd>
14158: <dd><code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code></dd>
14159: <dd><code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code></dd>
14160: <dd><code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code></dd>
14161: <dd><code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">target</a></code></dd>
14162: <dd><code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code></dd>
14163: <dd><code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code></dd>
14164: <dd><code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code></dd>
14165: <dd><code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code></dd>
14166: <dt>DOM interface:</dt>
14167: <dd>
14168: <pre class="idl">interface <dfn id="htmlareaelement" role="button" tabindex="0" aria-haspopup="true">HTMLAreaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
14169: attribute DOMString <a href="#dom-area-alt" title="dom-area-alt">alt</a>;
14170: attribute DOMString <a href="#dom-area-coords" title="dom-area-coords">coords</a>;
14171: attribute DOMString <a href="#dom-area-shape" title="dom-area-shape">shape</a>;
14172: stringifier attribute DOMString <a href="#dom-area-href" title="dom-area-href">href</a>;
14173: attribute DOMString <a href="#dom-area-target" title="dom-area-target">target</a>;
14174: attribute DOMString <a href="#dom-area-rel" title="dom-area-rel">rel</a>;
14175: readonly attribute <a href="#domtokenlist">DOMTokenList</a> <a href="#dom-area-rellist" title="dom-area-relList">relList</a>;
14176: attribute DOMString <a href="#dom-area-media" title="dom-area-media">media</a>;
14177: attribute DOMString <a href="#dom-area-hreflang" title="dom-area-hreflang">hreflang</a>;
14178: attribute DOMString <a href="#dom-area-type" title="dom-area-type">type</a>;
14179:
14180: // <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>
14181: attribute DOMString <a href="#dom-area-protocol" title="dom-area-protocol">protocol</a>;
14182: attribute DOMString <a href="#dom-area-host" title="dom-area-host">host</a>;
14183: attribute DOMString <a href="#dom-area-hostname" title="dom-area-hostname">hostname</a>;
14184: attribute DOMString <a href="#dom-area-port" title="dom-area-port">port</a>;
14185: attribute DOMString <a href="#dom-area-pathname" title="dom-area-pathname">pathname</a>;
14186: attribute DOMString <a href="#dom-area-search" title="dom-area-search">search</a>;
14187: attribute DOMString <a href="#dom-area-hash" title="dom-area-hash">hash</a>;
14188: };</pre>
14189: </dd>
14190: </dl><p>The <code><a href="#the-area-element">area</a></code> element <a href="#represents">represents</a> either a
14191: hyperlink with some text and a corresponding area on an <a href="#image-map">image
14192: map</a>, or a dead area on an image map.</p><p>If the <code><a href="#the-area-element">area</a></code> element has an <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute, then the
14193: <code><a href="#the-area-element">area</a></code> element represents a <a href="#hyperlink">hyperlink</a>. In
14194: this case, the <dfn id="attr-area-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn>
14195: attribute must be present. It specifies the text of the
14196: hyperlink. Its value must be text that, when presented with the
14197: texts specified for the other hyperlinks of the <a href="#image-map">image
14198: map</a>, and with the alternative text of the image, but without
14199: the image itself, provides the user with the same kind of choice as
14200: the hyperlink would when used without its text but with its shape
14201: applied to the image. The <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>
14202: attribute may be left blank if there is another <code><a href="#the-area-element">area</a></code>
14203: element in the same <a href="#image-map">image map</a> that points to the same
14204: resource and has a non-blank <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>
14205: attribute.</p><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
14206: represented by the element cannot be selected, and the <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code> attribute must be omitted.</p><p>In both cases, the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> and
14207: <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attributes specify the
14208: area.</p><p>The <dfn id="attr-area-shape" role="button" tabindex="0" aria-haspopup="true"><code>shape</code></dfn>
14209: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The following
14210: table lists the keywords defined for this attribute. The states
14211: given in the first cell of the rows with keywords give the states to
14212: which those keywords map. <span class="impl">Some of the keywords
14213: are non-conforming, as noted in the last column.</span></p><table><thead><tr><th>State
14214: </th><th>Keywords
14215: </th><th class="removed"> </th></tr></thead><tbody><tr><td rowspan="2"><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
14216: </td><td><dfn id="attr-area-shape-keyword-circle" role="button" tabindex="0" aria-haspopup="true"><code>circle</code></dfn>
14217: </td><td class="removed"> </td></tr><tr><td class="removed"> </td><td class="removed"> </td></tr><tr><td><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
14218: </td><td><dfn id="attr-area-shape-keyword-default" role="button" tabindex="0" aria-haspopup="true"><code>default</code></dfn>
14219: </td><td class="removed"> </td></tr><tr><td rowspan="2"><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
14220: </td><td><dfn id="attr-area-shape-keyword-poly" role="button" tabindex="0" aria-haspopup="true"><code>poly</code></dfn>
14221: </td><td class="removed"> </td></tr><tr><td class="removed"> </td><td class="removed"> </td></tr><tr><td rowspan="2"><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
14222: </td><td><dfn id="attr-area-shape-keyword-rect" role="button" tabindex="0" aria-haspopup="true"><code>rect</code></dfn>
14223: </td><td class="removed"> </td></tr><tr><td class="removed"> </td><td class="removed"> </td></tr></tbody></table><p>The attribute may be omitted. The <i>missing value default</i> is
14224: the <a href="#attr-area-shape-rect" title="attr-area-shape-rect">rectangle</a> state.</p><p>The <dfn id="attr-area-coords" role="button" tabindex="0" aria-haspopup="true"><code>coords</code></dfn>
14225: attribute must, if specified, contain a <a href="#valid-list-of-integers">valid list of
14226: integers</a>. This attribute gives the coordinates for the shape
14227: described by the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
14228: attribute. <span class="impl">The processing for this attribute is
14229: described as part of the <a href="#image-map">image map</a> processing
14230: model.</span></p><p>In the <dfn id="attr-area-shape-circle" role="button" tabindex="0" aria-haspopup="true">circle state</dfn>,
14231: <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
14232: integers, the last of which must be non-negative. The first integer
14233: must be the distance in CSS pixels from the left edge of the image
14234: to the center of the circle, the second integer must be the distance
14235: in CSS pixels from the top edge of the image to the center of the
14236: circle, and the third integer must be the radius of the circle,
14237: again in CSS pixels.</p><p>In the <dfn id="attr-area-shape-default" role="button" tabindex="0" aria-haspopup="true">default state</dfn>
14238: 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
14239: whole image.)</p><p>In the <dfn id="attr-area-shape-poly" role="button" tabindex="0" aria-haspopup="true">polygon state</dfn>,
14240: <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
14241: integers, and the number of integers must be even. Each pair of
14242: integers must represent a coordinate given as the distances from the
14243: left and the top of the image in CSS pixels respectively, and all
14244: the coordinates together must represent the points of the polygon,
14245: in order.</p><p>In the <dfn id="attr-area-shape-rect" role="button" tabindex="0" aria-haspopup="true">rectangle state</dfn>,
14246: <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
14247: integers, the first of which must be less than the third, and the
14248: second of which must be less than the fourth. The four points must
14249: represent, respectively, the distance from the left edge of the
14250: image to the left side of the rectangle, the distance from the
14251: top edge to the top side, the distance from the left edge to the
14252: right side, and the distance from the top edge to the bottom side,
14253: all in CSS pixels.</p><p>The <code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">target</a></code>,
14254: <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
14255: if the <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute is
14256: not present.</p>
14257: <p>The IDL attributes <dfn id="dom-area-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn>, <dfn id="dom-area-coords" role="button" tabindex="0" aria-haspopup="true"><code>coords</code></dfn>, <dfn id="dom-area-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn>, <dfn id="dom-area-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn>,
14258: <dfn id="dom-area-rel" role="button" tabindex="0" aria-haspopup="true"><code>rel</code></dfn>, <dfn id="dom-area-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>, <dfn id="dom-area-hreflang" role="button" tabindex="0" aria-haspopup="true"><code>hreflang</code></dfn>, and <dfn id="dom-area-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>, each must
14259: <a href="#reflect">reflect</a> the respective content attributes of the same
14260: name.</p>
14261:
14262: <p>The IDL attribute <dfn id="dom-area-shape" role="button" tabindex="0" aria-haspopup="true"><code>shape</code></dfn> must
14263: <a href="#reflect">reflect</a> the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
14264: content attribute.</p>
14265:
14266: <p>The IDL attribute <dfn id="dom-area-rellist" role="button" tabindex="0" aria-haspopup="true"><code>relList</code></dfn> must
14267: <a href="#reflect">reflect</a> the <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code>
14268: content attribute.</p>
14269:
14270: <p>The <code><a href="#the-area-element">area</a></code> element also supports the complement of
14271: <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-area-protocol" role="button" tabindex="0" aria-haspopup="true"><code>protocol</code></dfn>, <dfn id="dom-area-host" role="button" tabindex="0" aria-haspopup="true"><code>host</code></dfn>, <dfn id="dom-area-port" role="button" tabindex="0" aria-haspopup="true"><code>port</code></dfn>, <dfn id="dom-area-hostname" role="button" tabindex="0" aria-haspopup="true"><code>hostname</code></dfn>, <dfn id="dom-area-pathname" role="button" tabindex="0" aria-haspopup="true"><code>pathname</code></dfn>, <dfn id="dom-area-search" role="button" tabindex="0" aria-haspopup="true"><code>search</code></dfn>, and <dfn id="dom-area-hash" role="button" tabindex="0" aria-haspopup="true"><code>hash</code></dfn>. These must follow the
14272: rules given for <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, with
14273: the <a href="#concept-uda-input" title="concept-uda-input">input</a> being the result of
14274: <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
14275: element, if there is such an attribute and resolving it is
14276: successful, or the empty string otherwise; and the <a href="#concept-uda-setter" title="concept-uda-setter">common setter action</a> being the
14277: same as setting the element's <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute to the new output
14278: value.</p>
14279: <h4 id="image-maps"><span class="secno">4.8.14 </span>Image maps</h4><p>An <dfn id="image-map" role="button" tabindex="0" aria-haspopup="true">image map</dfn> allows geometric areas on an image to be
14280: associated with <a href="#hyperlink" title="hyperlink">hyperlinks</a>.</p><p>An image, in the form of an <code><a href="#the-img-element">img</a></code> element or an
14281: <code><a href="#the-object-element">object</a></code> element representing an image, may be associated
14282: with an image map (in the form of a <code><a href="#the-map-element">map</a></code> element) by
14283: specifying a <dfn id="attr-hyperlink-usemap" role="button" tabindex="0" aria-haspopup="true"><code>usemap</code></dfn> attribute on
14284: 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,
14285: must be a <a href="#valid-hash-name-reference">valid hash-name reference</a> to a
14286: <code><a href="#the-map-element">map</a></code> element.</p><div class="example">
14287:
14288: <p>Consider an image that looks as follows:</p>
14289:
14290: <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." height="150" src="http://dev.w3.org/html5/spec/images/sample-usemap.png" width="600"></p>
14291:
14292: <p>If we wanted just the colored areas to be clickable, we could
14293: do it as follows:</p>
14294:
14295: <pre><p>
14296: Please select a shape:
14297: <img src="shapes.png" usemap="#shapes"
14298: alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
14299: <map name="shapes">
14300: <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
14301: <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
14302: <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
14303: <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
14304: <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
14305: href="yellow.html" alt="Yellow star.">
14306: </map>
14307: </p></pre>
14308:
14309: </div><h4 id="mathml"><span class="secno">4.8.15 </span>MathML</h4><p>The <dfn id="math" role="button" tabindex="0" aria-haspopup="true"><code>math</code></dfn> element from the <a href="#mathml-namespace">MathML
14310: namespace</a> falls into the <a href="#embedded-content">embedded content</a>,
14311: <a href="#phrasing-content">phrasing content</a>, and <a href="#flow-content">flow content</a>
14312: categories for the purposes of the content models in this
14313: specification.</p><p>The semantics of MathML elements are defined by the MathML
14314: specification and <a href="#other-applicable-specifications">other applicable specifications</a>. <a href="#refsMATHML">[MATHML]</a></p><div class="example">
14315:
14316: <p>Here is an example of the use of MathML in an HTML document:</p>
14317:
14318: <pre><!DOCTYPE html>
14319: <html>
14320: <head>
14321: <title>The quadratic formula</title>
14322: </head>
14323: <body>
14324: <h1>The quadratic formula</h1>
14325: <p>
14326: <math>
14327: <mi>x</mi>
14328: <mo>=</mo>
14329: <mfrac>
14330: <mrow>
14331: <mo form="prefix">−</mo> <mi>b</mi>
14332: <mo>±</mo>
14333: <msqrt>
14334: <msup> <mi>b</mi> <mn>2</mn> </msup>
14335: <mo>−</mo>
14336: <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
14337: </msqrt>
14338: </mrow>
14339: <mrow>
14340: <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
14341: </mrow>
14342: </mfrac>
14343: </math>
14344: </p>
14345: </body>
14346: </html></pre>
14347:
14348: </div><h4 id="svg-0"><span class="secno">4.8.16 </span>SVG</h4><p>The <dfn id="svg" role="button" tabindex="0" aria-haspopup="true"><code>svg</code></dfn> element from the <a href="#svg-namespace">SVG
14349: namespace</a> falls into the <a href="#embedded-content">embedded content</a>,
14350: <a href="#phrasing-content">phrasing content</a>, and <a href="#flow-content">flow content</a>
14351: categories for the purposes of the content models in this
14352: specification.</p><p>When the SVG <code title="">foreignObject</code> element contains
14353: elements from the <a href="#html-namespace-0">HTML namespace</a>, such elements must
14354: all be <a href="#flow-content">flow content</a>. <a href="#refsSVG">[SVG]</a></p><p>The content model for <code title="">title</code> elements in the
14355: <a href="#svg-namespace">SVG namespace</a> inside <a href="#html-documents">HTML documents</a> is
14356: <a href="#phrasing-content">phrasing content</a>. (This further constrains the
14357: requirements given in the SVG specification.)</p><p>The semantics of SVG elements are defined by the SVG
14358: specification and <a href="#other-applicable-specifications">other applicable specifications</a>. <a href="#refsSVG">[SVG]</a></p><p>The SVG specification includes requirements regarding the
14359: handling of elements in the DOM that are not in the SVG namespace,
14360: that are in SVG fragments, and that are not included in a
14361: <code title="">foreignObject</code> element. <em>This</em>
14362: specification does not define any processing for elements in SVG
14363: fragments that are not in the HTML namespace; they are considered
14364: neither conforming nor non-conforming from the perspective of this
14365: specification.</p><h4 id="dimension-attributes"><span class="secno">4.8.17 </span><dfn role="button" tabindex="0" aria-haspopup="true">Dimension attributes</dfn></h4><p><span class="impl"><strong>Author requirements</strong>:</span>
14366: The <dfn id="attr-dim-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> and <dfn id="attr-dim-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn> attributes on
14367: <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>,
14368: <code><a href="#the-object-element">object</a></code>, <code><a href="#the-video-element">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,
14369: <code><a href="#the-input-element">input</a></code> elements may be specified to give the dimensions
14370: of the visual content of the element (the width and height
14371: respectively, relative to the nominal direction of the output
14372: medium), in CSS pixels. The attributes, if specified, must have
14373: values that are <a href="#valid-non-negative-integer" title="valid non-negative integer">valid
14374: non-negative integers</a>.</p><p>The specified dimensions given may differ from the dimensions
14375: specified in the resource itself, since the resource may have a
14376: resolution that differs from the CSS pixel resolution. (On screens,
14377: CSS pixels have a resolution of 96ppi, but in general the CSS pixel
14378: resolution depends on the reading distance.) If both attributes are
14379: specified, then one of the following statements must be true:</p><ul><li><span title=""><var title="">specified width</var> - 0.5 ≤
14380: <var title="">specified height</var> * <var title="">target ratio</var> ≤
14381: <var title="">specified width</var> + 0.5</span></li>
14382:
14383: <li><span title=""><var title="">specified height</var> - 0.5 ≤
14384: <var title="">specified width</var> / <var title="">target ratio</var> ≤
14385: <var title="">specified height</var> + 0.5</span></li>
14386:
14387: <li><span title=""><var title="">specified height</var> = <var title="">specified width</var> = 0</span></li>
14388:
14389: </ul><p>The <var title="">target ratio</var> is the ratio of the
14390: intrinsic width to the intrinsic height in the resource. The <var title="">specified width</var> and <var title="">specified
14391: height</var> are the values of the <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code> and <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code> attributes respectively.</p><p>The two attributes must be omitted if the resource in question
14392: does not have both an intrinsic width and an intrinsic height.</p><p>If the two attributes are both zero, it indicates that the
14393: element is not intended for the user (e.g. it might be a part of a
14394: service to count page views).</p><p class="note">The dimension attributes are not intended to be used
14395: to stretch the image.</p>
14396: <p>The <dfn id="dom-dim-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> and <dfn id="dom-dim-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn> IDL attributes on
14397: 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>,
14398: and <code><a href="#the-video-element">video</a></code> elements must <a href="#reflect">reflect</a> the
14399: respective content attributes of the same name.</p>
14400: <h3 id="tabular-data"><span class="secno">4.9 </span>Tabular data</h3><p>The <a href="#the-table-element">table</a> element.</p><h4 id="the-table-element"><span class="secno">4.9.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>table</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14401: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 14402: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 14403: <dt>Contexts in which this element can be used:</dt>
14404: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
14405: <dt>Content model:</dt>
14406: <dd>In this order: optionally a <code><a href="#the-caption-element">caption</a></code> element,
14407: followed by zero or more <code><a href="#the-colgroup-element">colgroup</a></code> elements, followed
14408: optionally by a <code><a href="#the-thead-element">thead</a></code> element, followed optionally by
14409: a <code><a href="#the-tfoot-element">tfoot</a></code> element, followed by either zero or more
14410: <code><a href="#the-tbody-element">tbody</a></code> elements or one or more <code><a href="#the-tr-element">tr</a></code>
14411: elements, followed optionally by a <code><a href="#the-tfoot-element">tfoot</a></code> element (but
14412: there can only be one <code><a href="#the-tfoot-element">tfoot</a></code> element child in
14413: total).</dd>
14414: <dt>Content attributes:</dt>
14415: <dd><a href="#global-attributes">Global attributes</a></dd>
14416: <dd><code title="attr-table-border"><a href="#attr-table-border">border</a></code></dd>
14417: <dt>DOM interface:</dt>
14418: <dd>
14419: <pre class="idl">interface <dfn id="htmltableelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
14420: attribute <a href="#htmltablecaptionelement">HTMLTableCaptionElement</a>? <a href="#dom-table-caption" title="dom-table-caption">caption</a>;
14421: <a href="#htmlelement">HTMLElement</a> <a href="#dom-table-createcaption" title="dom-table-createCaption">createCaption</a>();
14422: void <a href="#dom-table-deletecaption" title="dom-table-deleteCaption">deleteCaption</a>();
14423: attribute <a href="#htmltablesectionelement">HTMLTableSectionElement</a>? <a href="#dom-table-thead" title="dom-table-tHead">tHead</a>;
14424: <a href="#htmlelement">HTMLElement</a> <a href="#dom-table-createthead" title="dom-table-createTHead">createTHead</a>();
14425: void <a href="#dom-table-deletethead" title="dom-table-deleteTHead">deleteTHead</a>();
14426: attribute <a href="#htmltablesectionelement">HTMLTableSectionElement</a>? <a href="#dom-table-tfoot" title="dom-table-tFoot">tFoot</a>;
14427: <a href="#htmlelement">HTMLElement</a> <a href="#dom-table-createtfoot" title="dom-table-createTFoot">createTFoot</a>();
14428: void <a href="#dom-table-deletetfoot" title="dom-table-deleteTFoot">deleteTFoot</a>();
14429: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-table-tbodies" title="dom-table-tBodies">tBodies</a>;
14430: <a href="#htmlelement">HTMLElement</a> <a href="#dom-table-createtbody" title="dom-table-createTBody">createTBody</a>();
14431: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-table-rows" title="dom-table-rows">rows</a>;
1.562 mike 14432: <a href="#htmlelement">HTMLElement</a> <a href="#dom-table-insertrow" title="dom-table-insertRow">insertRow</a>(optional long index);
14433: void <a href="#dom-table-deleterow" title="dom-table-deleteRow">deleteRow</a>(long index);
1.545 mike 14434: attribute DOMString <a href="#dom-table-border" title="dom-table-border">border</a>;
14435: };</pre>
14436: </dd>
14437: </dl><p>The <code><a href="#the-table-element">table</a></code> element <a href="#represents">represents</a> data with
14438: more than one dimension, in the form of a <a href="#concept-table" title="concept-table">table</a>.</p><p><span class="impl">The <code><a href="#the-table-element">table</a></code> element takes part in
14439: the <a href="#table-model">table model</a>.</span> Tables have rows, columns, and
14440: cells given by their descendants. The rows and columns form a grid;
14441: a table's cells must completely cover that grid without overlap.</p><p>Authors are encouraged to provide information describing how to
14442: interpret complex tables. Guidance on how <a href="#table-descriptions-techniques">provide such information</a>
14443: is given below.</p><p>Tables should not be used as layout aids.
14444:
14445: Historically, many Web authors have tables in HTML as a way to
14446: control their page layout making it difficult to extract tabular
14447: data from such documents.
14448:
14449: In particular, users of accessibility tools, like screen readers,
14450: are likely to find it very difficult to navigate pages with tables
14451: used for layout.
14452:
14453: If a table is to be used for layout it must be marked with the
14454: attribute role="presentation" for a user agent to properly represent
14455: the table to an assistive technology and to properly convey the
14456: intent of the author to tools that wish to extract tabular data from
14457: the document.</p><p class="note">There are a variety of alternatives to using HTML
14458: tables for layout, primarily using CSS positioning and the CSS table
14459: model.</p><p>The <dfn id="attr-table-border" role="button" tabindex="0" aria-haspopup="true"><code>border</code></dfn>
14460: attribute may be specified on a <code><a href="#the-table-element">table</a></code> element to
14461: explicitly indicate that the <code><a href="#the-table-element">table</a></code> element is not being
14462: used for layout purposes. If specified, the attribute's value must
14463: either be the empty string or the value "<code title="">1</code>".
14464: The attribute is used by certain user agents as an indication that
14465: borders should be drawn around cells of the table.</p><p class="note">Authors <span class="impl">and implementors</span>
14466: are encouraged to consider using some of the <a href="#table-layout-techniques">table layout techniques</a>
14467: described below to make tables easier to navigate for users.</p><hr><dl class="domintro"><dt><var title="">table</var> . <code title="dom-table-caption" id="dom-table-caption"><a href="#dom-table-caption">caption</a></code> [ = <var title="">value</var> ]</dt>
14468: <dd>
14469: <p>Returns the table's <code><a href="#the-caption-element">caption</a></code> element.</p>
14470: <p>Can be set, to replace the <code><a href="#the-caption-element">caption</a></code> element. If the
14471: new value is not a <code><a href="#the-caption-element">caption</a></code> element, throws a
1.612 mike 14472: <code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code> exception.</p>
1.545 mike 14473: </dd>
14474:
14475: <dt><var title="">caption</var> = <var title="">table</var> . <code title="dom-table-createCaption" id="dom-table-createcaption"><a href="#dom-table-createcaption">createCaption</a></code>()</dt>
14476: <dd>
14477: <p>Ensures the table has a <code><a href="#the-caption-element">caption</a></code> element, and returns it.</p>
14478: </dd>
14479:
14480: <dt><var title="">table</var> . <code title="dom-table-deleteCaption" id="dom-table-deletecaption"><a href="#dom-table-deletecaption">deleteCaption</a></code>()</dt>
14481: <dd>
14482: <p>Ensures the table does not have a <code><a href="#the-caption-element">caption</a></code> element.</p>
14483: </dd>
14484:
14485: <dt><var title="">table</var> . <code title="dom-table-tHead" id="dom-table-thead"><a href="#dom-table-thead">tHead</a></code> [ = <var title="">value</var> ]</dt>
14486: <dd>
14487: <p>Returns the table's <code><a href="#the-thead-element">thead</a></code> element.</p>
14488: <p>Can be set, to replace the <code><a href="#the-thead-element">thead</a></code> element. If the
14489: new value is not a <code><a href="#the-thead-element">thead</a></code> element, throws a
1.612 mike 14490: <code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code> exception.</p>
1.545 mike 14491: </dd>
14492:
14493: <dt><var title="">thead</var> = <var title="">table</var> . <code title="dom-table-createTHead" id="dom-table-createthead"><a href="#dom-table-createthead">createTHead</a></code>()</dt>
14494: <dd>
14495: <p>Ensures the table has a <code><a href="#the-thead-element">thead</a></code> element, and returns it.</p>
14496: </dd>
14497:
14498: <dt><var title="">table</var> . <code title="dom-table-deleteTHead" id="dom-table-deletethead"><a href="#dom-table-deletethead">deleteTHead</a></code>()</dt>
14499: <dd>
14500: <p>Ensures the table does not have a <code><a href="#the-thead-element">thead</a></code> element.</p>
14501: </dd>
14502:
14503: <dt><var title="">table</var> . <code title="dom-table-tFoot" id="dom-table-tfoot"><a href="#dom-table-tfoot">tFoot</a></code> [ = <var title="">value</var> ]</dt>
14504: <dd>
14505: <p>Returns the table's <code><a href="#the-tfoot-element">tfoot</a></code> element.</p>
14506: <p>Can be set, to replace the <code><a href="#the-tfoot-element">tfoot</a></code> element. If the
14507: new value is not a <code><a href="#the-tfoot-element">tfoot</a></code> element, throws a
1.612 mike 14508: <code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code> exception.</p>
1.545 mike 14509: </dd>
14510:
14511: <dt><var title="">tfoot</var> = <var title="">table</var> . <code title="dom-table-createTFoot" id="dom-table-createtfoot"><a href="#dom-table-createtfoot">createTFoot</a></code>()</dt>
14512: <dd>
14513: <p>Ensures the table has a <code><a href="#the-tfoot-element">tfoot</a></code> element, and returns it.</p>
14514: </dd>
14515:
14516: <dt><var title="">table</var> . <code title="dom-table-deleteTFoot" id="dom-table-deletetfoot"><a href="#dom-table-deletetfoot">deleteTFoot</a></code>()</dt>
14517: <dd>
14518: <p>Ensures the table does not have a <code><a href="#the-tfoot-element">tfoot</a></code> element.</p>
14519: </dd>
14520:
14521: <dt><var title="">table</var> . <code title="dom-table-tBodies" id="dom-table-tbodies"><a href="#dom-table-tbodies">tBodies</a></code></dt>
14522: <dd>
14523: <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>
14524: </dd>
14525:
14526: <dt><var title="">tbody</var> = <var title="">table</var> . <code title="dom-table-createTBody" id="dom-table-createtbody"><a href="#dom-table-createtbody">createTBody</a></code>()</dt>
14527: <dd>
14528: <p>Creates a <code><a href="#the-tbody-element">tbody</a></code> element, inserts it into the table, and returns it.</p>
14529: </dd>
14530:
14531: <dt><var title="">table</var> . <code title="dom-table-rows" id="dom-table-rows"><a href="#dom-table-rows">rows</a></code></dt>
14532: <dd>
14533: <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>
14534: </dd>
14535:
14536: <dt><var title="">tr</var> = <var title="">table</var> . <code title="dom-table-insertRow" id="dom-table-insertrow"><a href="#dom-table-insertrow">insertRow</a></code>(<var title="">index</var>)</dt>
14537: <dd>
14538: <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>
14539: <p>The position is relative to the rows in the table. The index −1 is equivalent to inserting at the end of the table.</p>
1.612 mike 14540: <p>If the given position is less than −1 or greater than the number of rows, throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> exception.</p>
1.545 mike 14541: </dd>
14542:
14543: <dt><var title="">table</var> . <code title="dom-table-deleteRow" id="dom-table-deleterow"><a href="#dom-table-deleterow">deleteRow</a></code>(<var title="">index</var>)</dt>
14544: <dd>
14545: <p>Removes the <code><a href="#the-tr-element">tr</a></code> element with the given position in the table.</p>
14546: <p>The position is relative to the rows in the table. The index −1 is equivalent to deleting the last row of the table.</p>
1.612 mike 14547: <p>If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> exception.</p>
1.545 mike 14548: </dd>
14549:
14550: </dl>
14551: <p>The <dfn id="dom-table-border" role="button" tabindex="0" aria-haspopup="true"><code>border</code></dfn> IDL
14552: attribute must <a href="#reflect">reflect</a> the content attribute of the
14553: same name.</p>
14554: <div class="example">
14555:
14556: <p>Here is an example of a table being used to mark up a Sudoku
14557: puzzle. Observe the lack of headers, which are not necessary in
14558: such a table.</p>
14559:
14560: <pre><section>
14561: <style scoped>
14562: table { border-collapse: collapse; border: solid thick; }
14563: colgroup, tbody { border: solid medium; }
14564: td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
14565: </style>
14566: <h1>Today's Sudoku</h1>
14567: <table>
14568: <colgroup><col><col><col>
14569: <colgroup><col><col><col>
14570: <colgroup><col><col><col>
14571: <tbody>
14572: <tr> <td> 1 <td> <td> 3 <td> 6 <td> <td> 4 <td> 7 <td> <td> 9
14573: <tr> <td> <td> 2 <td> <td> <td> 9 <td> <td> <td> 1 <td>
14574: <tr> <td> 7 <td> <td> <td> <td> <td> <td> <td> <td> 6
14575: <tbody>
14576: <tr> <td> 2 <td> <td> 4 <td> <td> 3 <td> <td> 9 <td> <td> 8
14577: <tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
14578: <tr> <td> 5 <td> <td> <td> 9 <td> <td> 7 <td> <td> <td> 1
14579: <tbody>
14580: <tr> <td> 6 <td> <td> <td> <td> 5 <td> <td> <td> <td> 2
14581: <tr> <td> <td> <td> <td> <td> 7 <td> <td> <td> <td>
14582: <tr> <td> 9 <td> <td> <td> 8 <td> <td> 2 <td> <td> <td> 5
14583: </table>
14584: </section></pre>
14585:
14586: </div><h5 id="table-descriptions-techniques"><span class="secno">4.9.1.1 </span>Techniques for describing tables</h5><p id="table-descriptions">For tables that consist of more than just
14587: a grid of cells with headers in the first row and headers in the
14588: first column, and for any table in general where the reader might
14589: have difficulty understanding the content, authors should include
14590: explanatory information introducing the table. This information is
14591: useful for all users, but is especially useful for users who cannot
14592: see the table, e.g. users of screen readers.</p><p>Such explanatory information should introduce the purpose of the
14593: table, outline its basic cell structure, highlight any trends or
14594: patterns, and generally teach the user how to use the table.</p><p>For instance, the following table:</p><table><caption>Characteristics with positive and negative sides</caption>
14595: <thead><tr><th id="n"> Negative
14596: </th><th> Characteristic
14597: </th><th> Positive
14598: </th></tr></thead><tbody><tr><td headers="n r1"> Sad
14599: </td><th id="r1"> Mood
14600: </th><td> Happy
14601: </td></tr><tr><td headers="n r2"> Failing
14602: </td><th id="r2"> Grade
14603: </th><td> Passing
14604: </td></tr></tbody></table><p>...might benefit from a description explaining the way the table
14605: is laid out, something like "Characteristics are given in the
14606: second column, with the negative side in the left column and the
14607: positive side in the right column".</p><p>There are a variety of ways to include this information, such as:</p><dl><dt>In prose, surrounding the table</dt>
14608:
14609: <dd>
14610: <div class="example"><pre><p>In the following table, characteristics are given in the second
14611: column, with the negative side in the left column and the positive
14612: side in the right column.</p>
14613: <table>
14614: <caption>Characteristics with positive and negative sides</caption>
14615: <thead>
14616: <tr>
14617: <th id="n"> Negative
14618: <th> Characteristic
14619: <th> Positive
14620: <tbody>
14621: <tr>
14622: <td headers="n r1"> Sad
14623: <th id="r1"> Mood
14624: <td> Happy
14625: <tr>
14626: <td headers="n r2"> Failing
14627: <th id="r2"> Grade
14628: <td> Passing
14629: </table></pre></div>
14630: </dd>
14631:
14632: <dt>In the table's <code><a href="#the-caption-element">caption</a></code></dt>
14633:
14634: <dd>
14635: <div class="example"><pre><table>
14636: <caption>
14637: <strong>Characteristics with positive and negative sides.</strong>
14638: <p>Characteristics are given in the second column, with the
14639: negative side in the left column and the positive side in the right
14640: column.</p>
14641: </caption>
14642: <thead>
14643: <tr>
14644: <th id="n"> Negative
14645: <th> Characteristic
14646: <th> Positive
14647: <tbody>
14648: <tr>
14649: <td headers="n r1"> Sad
14650: <th id="r1"> Mood
14651: <td> Happy
14652: <tr>
14653: <td headers="n r2"> Failing
14654: <th id="r2"> Grade
14655: <td> Passing
14656: </table></pre></div>
14657: </dd>
14658:
14659: <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>
14660:
14661: <dd>
14662: <div class="example"><pre><table>
14663: <caption>
14664: <strong>Characteristics with positive and negative sides.</strong>
14665: <details>
14666: <summary>Help</summary>
14667: <p>Characteristics are given in the second column, with the
14668: negative side in the left column and the positive side in the right
14669: column.</p>
14670: </details>
14671: </caption>
14672: <thead>
14673: <tr>
14674: <th id="n"> Negative
14675: <th> Characteristic
14676: <th> Positive
14677: <tbody>
14678: <tr>
14679: <td headers="n r1"> Sad
14680: <th id="r1"> Mood
14681: <td> Happy
14682: <tr>
14683: <td headers="n r2"> Failing
14684: <th id="r2"> Grade
14685: <td> Passing
14686: </table></pre></div>
14687: </dd>
14688:
14689: <dt>Next to the table, in the same <code><a href="#the-figure-element">figure</a></code></dt>
14690:
14691: <dd>
14692: <div class="example"><pre><figure>
14693: <figcaption>Characteristics with positive and negative sides</figcaption>
14694: <p>Characteristics are given in the second column, with the
14695: negative side in the left column and the positive side in the right
14696: column.</p>
14697: <table>
14698: <thead>
14699: <tr>
14700: <th id="n"> Negative
14701: <th> Characteristic
14702: <th> Positive
14703: <tbody>
14704: <tr>
14705: <td headers="n r1"> Sad
14706: <th id="r1"> Mood
14707: <td> Happy
14708: <tr>
14709: <td headers="n r2"> Failing
14710: <th id="r2"> Grade
14711: <td> Passing
14712: </table>
14713: </figure></pre></div>
14714: </dd>
14715:
14716: <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>
14717:
14718: <dd>
14719: <div class="example"><pre><figure>
14720: <figcaption>
14721: <strong>Characteristics with positive and negative sides</strong>
14722: <p>Characteristics are given in the second column, with the
14723: negative side in the left column and the positive side in the right
14724: column.</p>
14725: </figcaption>
14726: <table>
14727: <thead>
14728: <tr>
14729: <th id="n"> Negative
14730: <th> Characteristic
14731: <th> Positive
14732: <tbody>
14733: <tr>
14734: <td headers="n r1"> Sad
14735: <th id="r1"> Mood
14736: <td> Happy
14737: <tr>
14738: <td headers="n r2"> Failing
14739: <th id="r2"> Grade
14740: <td> Passing
14741: </table>
14742: </figure></pre></div>
14743: </dd>
14744:
14745: </dl><p>Authors may also use other techniques, or combinations of the
14746: above techniques, as appropriate.</p><p>The best option, of course, rather than writing a description
14747: explaining the way the table is laid out, is to adjust the table
14748: such that no explanation is needed.</p><div class="example">
14749:
14750: <p>In the case of the table used in the examples above, a simple
14751: rearrangement of the table so that the headers are on the top and
14752: left sides removes the need for an explanation as well as removing
14753: the need for the use of <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attributes:</p>
14754:
14755: <pre><table>
14756: <caption>Characteristics with positive and negative sides</caption>
14757: <thead>
14758: <tr>
14759: <th> Characteristic
14760: <th> Negative
14761: <th> Positive
14762: <tbody>
14763: <tr>
14764: <th> Mood
14765: <td> Sad
14766: <td> Happy
14767: <tr>
14768: <th> Grade
14769: <td> Failing
14770: <td> Passing
14771: </table></pre>
14772:
14773: </div><h5 id="table-layout-techniques"><span class="secno">4.9.1.2 </span>Techniques for table layout</h5><p>Good table layout is key to making tables more readable and usable.</p><p>In visual media, providing column and row borders and alternating
14774: row backgrounds can be very effective to make complicated tables
14775: more readable.</p><p>For tables with large volumes of numeric content, using
14776: monospaced fonts can help users see patterns, especially in
14777: situations where a user agent does not render the borders.
14778: (Unfortunately, for historical reasons, not rendering borders on
14779: tables is a common default.)</p><p>In speech media, table cells can be distinguished by reporting
14780: the corresponding headers before reading the cell's contents, and by
14781: allowing users to navigate the table in a grid fashion, rather than
14782: serializing the entire contents of the table in source order.</p><p>Authors are encouraged to use CSS to achieve these effects.</p><h4 id="the-caption-element"><span class="secno">4.9.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>caption</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14783: <dd>None.</dd>
14784: <dt>Contexts in which this element can be used:</dt>
14785: <dd>As the first element child of a <code><a href="#the-table-element">table</a></code> element.</dd>
14786: <dt>Content model:</dt>
14787: <dd><a href="#flow-content">Flow content</a>, but with no descendant <code><a href="#the-table-element">table</a></code> elements.</dd>
14788: <dt>Content attributes:</dt>
14789: <dd><a href="#global-attributes">Global attributes</a></dd>
14790: <dt>DOM interface:</dt>
14791: <dd>
14792: <pre class="idl">interface <dfn id="htmltablecaptionelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableCaptionElement</dfn> : <a href="#htmlelement">HTMLElement</a> {};</pre>
14793: </dd>
14794: </dl><p>The <code><a href="#the-caption-element">caption</a></code> element <a href="#represents">represents</a> the title of the
14795: <code><a href="#the-table-element">table</a></code> that is its parent, if it has a parent and that
14796: is a <code><a href="#the-table-element">table</a></code> element.</p><p>When a <code><a href="#the-table-element">table</a></code> element is the only content in a
14797: <code><a href="#the-figure-element">figure</a></code> element other than the <code><a href="#the-figcaption-element">figcaption</a></code>,
14798: the <code><a href="#the-caption-element">caption</a></code> element should be omitted in favor of the
14799: <code><a href="#the-figcaption-element">figcaption</a></code>.</p><p>A caption can introduce context for a table, making it
14800: significantly easier to understand.</p><div class="example">
14801:
14802: <p>Consider, for instance, the following table:</p>
14803:
14804: <table class="dice-example"><tr><th> </th><th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th><th> 6
14805: </th></tr><tr><th> 1 </th><td> 2 </td><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7
14806: </td></tr><tr><th> 2 </th><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8
14807: </td></tr><tr><th> 3 </th><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9
14808: </td></tr><tr><th> 4 </th><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10
14809: </td></tr><tr><th> 5 </th><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11
14810: </td></tr><tr><th> 6 </th><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11 </td><td> 12
14811: </td></tr></table><p>In the abstract, this table is not clear. However, with a
14812: caption giving the table's number (for reference in the main prose)
14813: and explaining its use, it makes more sense:</p>
14814:
14815: <pre><caption>
14816: <p>Table 1.
14817: <p>This table shows the total score obtained from rolling two
14818: six-sided dice. The first row represents the value of the first die,
14819: the first column the value of the second die. The total is given in
14820: the cell that corresponds to the values of the two dice.
14821: </caption></pre>
14822:
14823:
14824: </div><h4 id="the-colgroup-element"><span class="secno">4.9.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>colgroup</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14825: <dd>None.</dd>
14826: <dt>Contexts in which this element can be used:</dt>
14827: <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
14828: <code><a href="#the-caption-element">caption</a></code> elements and before any <code><a href="#the-thead-element">thead</a></code>,
14829: <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>
14830: elements.</dd>
14831: <dt>Content model:</dt>
14832: <dd>If the <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute is present: Empty.</dd>
14833: <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>
14834: <dt>Content attributes:</dt>
14835: <dd><a href="#global-attributes">Global attributes</a></dd>
14836: <dd><code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code></dd>
14837: <dt>DOM interface:</dt>
14838: <dd>
14839: <pre class="idl">interface <dfn id="htmltablecolelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableColElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
14840: attribute unsigned long <a href="#dom-colgroup-span" title="dom-colgroup-span">span</a>;
14841: };</pre>
14842: </dd>
14843: </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
14844: is its parent, if it has a parent and that is a <code><a href="#the-table-element">table</a></code>
14845: element.</p><p>If the <code><a href="#the-colgroup-element">colgroup</a></code> element contains no <code><a href="#the-col-element">col</a></code>
14846: elements, then the element may have a <dfn id="attr-colgroup-span" role="button" tabindex="0" aria-haspopup="true"><code>span</code></dfn> content attribute
14847: specified, whose value must be a <a href="#valid-non-negative-integer">valid non-negative
14848: integer</a> greater than zero.</p>
14849: <p>The <dfn id="dom-colgroup-span" role="button" tabindex="0" aria-haspopup="true"><code>span</code></dfn> IDL
14850: attribute must <a href="#reflect">reflect</a> the content attribute of the
14851: same name. The value must be <a href="#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
14852: numbers greater than zero</a>.</p>
14853: <h4 id="the-col-element"><span class="secno">4.9.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>col</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14854: <dd>None.</dd>
14855: <dt>Contexts in which this element can be used:</dt>
14856: <dd>As a child of a <code><a href="#the-colgroup-element">colgroup</a></code> element that doesn't have
14857: a <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute.</dd>
14858: <dt>Content model:</dt>
14859: <dd>Empty.</dd>
14860: <dt>Content attributes:</dt>
14861: <dd><a href="#global-attributes">Global attributes</a></dd>
14862: <dd><code title="attr-col-span"><a href="#attr-col-span">span</a></code></dd>
14863:
14864: <dt>DOM interface:</dt>
14865: <dd>
14866: <p><code><a href="#htmltablecolelement">HTMLTableColElement</a></code>, same as for
14867: <code><a href="#the-colgroup-element">colgroup</a></code> elements. This interface defines one member,
14868: <code title="dom-col-span"><a href="#dom-col-span">span</a></code>.</p>
14869: </dd>
14870: </dl><p>If a <code><a href="#the-col-element">col</a></code> element has a parent and that is a
14871: <code><a href="#the-colgroup-element">colgroup</a></code> element that itself has a parent that is a
14872: <code><a href="#the-table-element">table</a></code> element, then the <code><a href="#the-col-element">col</a></code> element
14873: <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
14874: <code><a href="#the-colgroup-element">colgroup</a></code>.</p><p>The element may have a <dfn id="attr-col-span" role="button" tabindex="0" aria-haspopup="true"><code>span</code></dfn> content attribute
14875: specified, whose value must be a <a href="#valid-non-negative-integer">valid non-negative
14876: integer</a> greater than zero.</p>
14877: <p>The <dfn id="dom-col-span" role="button" tabindex="0" aria-haspopup="true"><code>span</code></dfn> IDL
14878: attribute must <a href="#reflect">reflect</a> the content attribute of the
14879: same name. The value must be <a href="#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
14880: numbers greater than zero</a>.</p>
14881: <h4 id="the-tbody-element"><span class="secno">4.9.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>tbody</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14882: <dd>None.</dd>
14883: <dt>Contexts in which this element can be used:</dt>
14884: <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
14885: <code><a href="#the-caption-element">caption</a></code>, <code><a href="#the-colgroup-element">colgroup</a></code>, and
14886: <code><a href="#the-thead-element">thead</a></code> elements, but only if there are no
14887: <code><a href="#the-tr-element">tr</a></code> elements that are children of the
14888: <code><a href="#the-table-element">table</a></code> element.</dd>
14889: <dt>Content model:</dt>
14890: <dd>Zero or more <code><a href="#the-tr-element">tr</a></code> elements</dd>
14891: <dt>Content attributes:</dt>
14892: <dd><a href="#global-attributes">Global attributes</a></dd>
14893: <dt>DOM interface:</dt>
14894: <dd>
14895: <pre class="idl">interface <dfn id="htmltablesectionelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableSectionElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
14896: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-tbody-rows" title="dom-tbody-rows">rows</a>;
1.562 mike 14897: <a href="#htmlelement">HTMLElement</a> <a href="#dom-tbody-insertrow" title="dom-tbody-insertRow">insertRow</a>(optional long index);
14898: void <a href="#dom-tbody-deleterow" title="dom-tbody-deleteRow">deleteRow</a>(long index);
1.545 mike 14899: };</pre>
14900: <p>The <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> interface is also
14901: used for <code><a href="#the-thead-element">thead</a></code> and <code><a href="#the-tfoot-element">tfoot</a></code> elements.</p>
14902: </dd>
14903: </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
14904: the parent <code><a href="#the-table-element">table</a></code> element, if the <code><a href="#the-tbody-element">tbody</a></code>
14905: element has a parent and it is a <code><a href="#the-table-element">table</a></code>.</p><dl class="domintro"><dt><var title="">tbody</var> . <code title="dom-tbody-rows" id="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code></dt>
14906: <dd>
14907: <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>
14908: </dd>
14909:
14910: <dt><var title="">tr</var> = <var title="">tbody</var> . <code title="dom-tbody-insertRow" id="dom-tbody-insertrow"><a href="#dom-tbody-insertrow">insertRow</a></code>( [ <var title="">index</var> ] )</dt>
14911: <dd>
14912: <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>
14913: <p>The position is relative to the rows in the table section. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.</p>
1.612 mike 14914: <p>If the given position is less than −1 or greater than the number of rows, throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> exception.</p>
1.545 mike 14915: </dd>
14916:
14917: <dt><var title="">tbody</var> . <code title="dom-tbody-deleteRow" id="dom-tbody-deleterow"><a href="#dom-tbody-deleterow">deleteRow</a></code>(<var title="">index</var>)</dt>
14918: <dd>
14919: <p>Removes the <code><a href="#the-tr-element">tr</a></code> element with the given position in the table section.</p>
14920: <p>The position is relative to the rows in the table section. The index −1 is equivalent to deleting the last row of the table section.</p>
1.612 mike 14921: <p>If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an <code><a href="#indexsizeerror">IndexSizeError</a></code> exception.</p>
1.545 mike 14922: </dd>
14923:
14924: </dl><h4 id="the-thead-element"><span class="secno">4.9.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>thead</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14925: <dd>None.</dd>
14926: <dt>Contexts in which this element can be used:</dt>
14927: <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
14928: <code><a href="#the-caption-element">caption</a></code>, and <code><a href="#the-colgroup-element">colgroup</a></code>
14929: elements and before any <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-tfoot-element">tfoot</a></code>, and
14930: <code><a href="#the-tr-element">tr</a></code> elements, but only if there are no other
14931: <code><a href="#the-thead-element">thead</a></code> elements that are children of the
14932: <code><a href="#the-table-element">table</a></code> element.</dd>
14933: <dt>Content model:</dt>
14934: <dd>Zero or more <code><a href="#the-tr-element">tr</a></code> elements</dd>
14935: <dt>Content attributes:</dt>
14936: <dd><a href="#global-attributes">Global attributes</a></dd>
14937: <dt>DOM interface:</dt>
14938: <dd><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code>, as defined for
14939: <code><a href="#the-tbody-element">tbody</a></code> elements.</dd>
14940: </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
14941: (headers) for the parent <code><a href="#the-table-element">table</a></code> element, if the
14942: <code><a href="#the-thead-element">thead</a></code> element has a parent and it is a
14943: <code><a href="#the-table-element">table</a></code>.</p><div class="example">
14944:
14945: <p>This example shows a <code><a href="#the-thead-element">thead</a></code> element being used.
14946: Notice the use of both <code><a href="#the-th-element">th</a></code> and <code><a href="#the-td-element">td</a></code> elements
14947: in the <code><a href="#the-thead-element">thead</a></code> element: the first row is the headers,
14948: and the second row is an explanation of how to fill in the
14949: table.</p>
14950:
14951: <pre><table>
14952: <caption> School auction sign-up sheet </caption>
14953: <strong> <thead>
14954: <tr>
14955: <th><label for=e1>Name</label>
14956: <th><label for=e2>Product</label>
14957: <th><label for=e3>Picture</label>
14958: <th><label for=e4>Price</label>
14959: <tr>
14960: <td>Your name here
14961: <td>What are you selling?
14962: <td>Link to a picture
14963: <td>Your reserve price
14964: </strong> <tbody>
14965: <tr>
14966: <td>Ms Danus
14967: <td>Doughnuts
14968: <td><img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
14969: <td>$45
14970: <tr>
14971: <td><input id=e1 type=text name=who required form=f>
14972: <td><input id=e2 type=text name=what required form=f>
14973: <td><input id=e3 type=url name=pic form=f>
14974: <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
14975: </table>
14976: <form id=f action="/auction.cgi">
14977: <input type=button name=add value="Submit">
14978: </form></pre>
14979:
14980: </div><h4 id="the-tfoot-element"><span class="secno">4.9.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>tfoot</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
14981: <dd>None.</dd>
14982: <dt>Contexts in which this element can be used:</dt>
14983: <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
14984: <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>
14985: elements and before any <code><a href="#the-tbody-element">tbody</a></code> and <code><a href="#the-tr-element">tr</a></code>
14986: elements, but only if there are no other <code><a href="#the-tfoot-element">tfoot</a></code>
14987: elements that are children of the <code><a href="#the-table-element">table</a></code> element.</dd>
14988: <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
14989: <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>,
14990: <code><a href="#the-tbody-element">tbody</a></code>, and <code><a href="#the-tr-element">tr</a></code> elements, but only if there
14991: are no other <code><a href="#the-tfoot-element">tfoot</a></code> elements that are children of the
14992: <code><a href="#the-table-element">table</a></code> element.</dd>
14993: <dt>Content model:</dt>
14994: <dd>Zero or more <code><a href="#the-tr-element">tr</a></code> elements</dd>
14995: <dt>Content attributes:</dt>
14996: <dd><a href="#global-attributes">Global attributes</a></dd>
14997: <dt>DOM interface:</dt>
14998: <dd><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code>, as defined for
14999: <code><a href="#the-tbody-element">tbody</a></code> elements.</dd>
15000: </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
15001: (footers) for the parent <code><a href="#the-table-element">table</a></code> element, if the
15002: <code><a href="#the-tfoot-element">tfoot</a></code> element has a parent and it is a
15003: <code><a href="#the-table-element">table</a></code>.</p><h4 id="the-tr-element"><span class="secno">4.9.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>tr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
15004: <dd>None.</dd>
15005: <dt>Contexts in which this element can be used:</dt>
15006: <dd>As a child of a <code><a href="#the-thead-element">thead</a></code> element.</dd>
15007: <dd>As a child of a <code><a href="#the-tbody-element">tbody</a></code> element.</dd>
15008: <dd>As a child of a <code><a href="#the-tfoot-element">tfoot</a></code> element.</dd>
15009: <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
15010: <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>
15011: elements, but only if there are no <code><a href="#the-tbody-element">tbody</a></code> elements that
15012: are children of the <code><a href="#the-table-element">table</a></code> element.</dd>
15013: <dt>Content model:</dt>
15014: <dd>Zero or more <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> elements</dd>
15015: <dt>Content attributes:</dt>
15016: <dd><a href="#global-attributes">Global attributes</a></dd>
15017: <dt>DOM interface:</dt>
15018: <dd>
15019: <pre class="idl">interface <dfn id="htmltablerowelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableRowElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
15020: readonly attribute long <a href="#dom-tr-rowindex" title="dom-tr-rowIndex">rowIndex</a>;
15021: readonly attribute long <a href="#dom-tr-sectionrowindex" title="dom-tr-sectionRowIndex">sectionRowIndex</a>;
15022: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-tr-cells" title="dom-tr-cells">cells</a>;
1.562 mike 15023: <a href="#htmlelement">HTMLElement</a> <a href="#dom-tr-insertcell" title="dom-tr-insertCell">insertCell</a>(optional long index);
15024: void <a href="#dom-tr-deletecell" title="dom-tr-deleteCell">deleteCell</a>(long index);
1.545 mike 15025: };</pre>
15026: </dd>
15027: </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><dl class="domintro"><dt><var title="">tr</var> . <code title="dom-tr-rowIndex" id="dom-tr-rowindex"><a href="#dom-tr-rowindex">rowIndex</a></code></dt>
15028:
15029: <dd>
15030:
15031: <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>
15032:
15033: <p>Returns −1 if the element isn't in a table.</p>
15034:
15035: </dd>
15036:
15037: <dt><var title="">tr</var> . <code title="dom-tr-sectionRowIndex" id="dom-tr-sectionrowindex"><a href="#dom-tr-sectionrowindex">sectionRowIndex</a></code></dt>
15038:
15039: <dd>
15040:
15041: <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>
15042:
15043: <p>Returns −1 if the element isn't in a table section.</p>
15044:
15045: </dd>
15046:
15047: <dt><var title="">tr</var> . <code title="dom-tr-cells" id="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code></dt>
15048: <dd>
15049:
15050: <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>
15051:
15052: </dd>
15053:
15054: <dt><var title="">cell</var> = <var title="">tr</var> . <code title="dom-tr-insertCell" id="dom-tr-insertcell"><a href="#dom-tr-insertcell">insertCell</a></code>( [ <var title="">index</var> ] )</dt>
15055:
15056: <dd>
15057:
15058: <p>Creates a <code><a href="#the-td-element">td</a></code> element, inserts it into the table
15059: row at the position given by the argument, and returns the
15060: <code><a href="#the-td-element">td</a></code>.</p>
15061:
15062: <p>The position is relative to the cells in the row. The
15063: index −1, which is the default if the argument is omitted,
15064: is equivalent to inserting at the end of the row.</p>
15065:
15066: <p>If the given position is less than −1 or greater than
1.612 mike 15067: the number of cells, throws an <code><a href="#indexsizeerror">IndexSizeError</a></code>
1.545 mike 15068: exception.</p>
15069:
15070: </dd>
15071:
15072: <dt><var title="">tr</var> . <code title="dom-tr-deleteCell" id="dom-tr-deletecell"><a href="#dom-tr-deletecell">deleteCell</a></code>(<var title="">index</var>)</dt>
15073: <dd>
15074:
15075: <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
15076: given position in the row.</p>
15077:
15078: <p>The position is relative to the cells in the row. The index
15079: −1 is equivalent to deleting the last cell of the row.</p>
15080:
15081: <p>If the given position is less than −1 or greater than
15082: the index of the last cell, or if there are no cells, throws an
1.612 mike 15083: <code><a href="#indexsizeerror">IndexSizeError</a></code> exception.</p>
1.545 mike 15084:
15085: </dd>
15086:
15087: </dl><h4 id="the-td-element"><span class="secno">4.9.9 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>td</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
15088: <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
15089: <dt>Contexts in which this element can be used:</dt>
15090: <dd>As a child of a <code><a href="#the-tr-element">tr</a></code> element.</dd>
15091: <dt>Content model:</dt>
15092: <dd><a href="#flow-content">Flow content</a>.</dd>
15093: <dt>Content attributes:</dt>
15094: <dd><a href="#global-attributes">Global attributes</a></dd>
15095: <dd><code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code></dd>
15096: <dd><code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code></dd>
15097: <dd><code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code></dd>
15098:
15099: <dt>DOM interface:</dt>
15100: <dd>
15101: <pre class="idl">interface <dfn id="htmltabledatacellelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableDataCellElement</dfn> : <a href="#htmltablecellelement">HTMLTableCellElement</a> {};</pre>
15102: </dd>
15103: </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><h4 id="the-th-element"><span class="secno">4.9.10 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>th</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
15104: <dd>None.</dd>
15105: <dt>Contexts in which this element can be used:</dt>
15106: <dd>As a child of a <code><a href="#the-tr-element">tr</a></code> element.</dd>
15107: <dt>Content model:</dt>
1.620 mike 15108: <dd><a href="#flow-content">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code>, <code><a href="#the-footer-element">footer</a></code>, <a href="#sectioning-content">sectioning content</a>, or <a href="#heading-content">heading content</a> descendants.</dd>
15109:
1.545 mike 15110: <dt>Content attributes:</dt>
15111: <dd><a href="#global-attributes">Global attributes</a></dd>
15112: <dd><code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code></dd>
15113: <dd><code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code></dd>
15114: <dd><code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code></dd>
15115: <dd><code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code></dd>
15116: <dt>DOM interface:</dt>
15117: <dd>
15118: <pre class="idl">interface <dfn id="htmltableheadercellelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableHeaderCellElement</dfn> : <a href="#htmltablecellelement">HTMLTableCellElement</a> {
15119: attribute DOMString <a href="#dom-th-scope" title="dom-th-scope">scope</a>;
15120: };</pre>
15121: </dd>
15122: </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><p>The <code><a href="#the-th-element">th</a></code> element may have a <dfn id="attr-th-scope" role="button" tabindex="0" aria-haspopup="true"><code>scope</code></dfn> content attribute
15123: specified. The <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute is
15124: an <a href="#enumerated-attribute">enumerated attribute</a> with five states, four of which
15125: have explicit keywords:</p><dl><dt>The <dfn id="attr-th-scope-row" role="button" tabindex="0" aria-haspopup="true"><code>row</code></dfn>
15126: keyword, which maps to the <i>row</i> state</dt>
15127:
15128: <dd>The <i>row</i> state means the header cell applies to some of
15129: the subsequent cells in the same row(s).</dd>
15130:
15131: <dt>The <dfn id="attr-th-scope-col" role="button" tabindex="0" aria-haspopup="true"><code>col</code></dfn>
15132: keyword, which maps to the <i>column</i> state</dt>
15133:
15134: <dd>The <i>column</i> state means the header cell applies to some
15135: of the subsequent cells in the same column(s).</dd>
15136:
15137: <dt>The <dfn id="attr-th-scope-rowgroup" role="button" tabindex="0" aria-haspopup="true"><code>rowgroup</code></dfn> keyword,
15138: which maps to the <i>row group</i> state</dt>
15139:
15140: <dd>The <i>row group</i> state means the header cell applies to all
15141: the remaining cells in the row group. A <code><a href="#the-th-element">th</a></code> element's
15142: <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute must not be in
15143: the <a href="#attr-th-scope-rowgroup" title="attr-th-scope-rowgroup">row group</a> state if
15144: the element is not anchored in a <a href="#concept-row-group" title="concept-row-group">row group</a>.</dd>
15145:
15146: <dt>The <dfn id="attr-th-scope-colgroup" role="button" tabindex="0" aria-haspopup="true"><code>colgroup</code></dfn> keyword,
15147: which maps to the <i>column group</i> state</dt>
15148:
15149: <dd>The <i>column group</i> state means the header cell applies to
15150: all the remaining cells in the column group. A <code><a href="#the-th-element">th</a></code>
15151: element's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute must
15152: not be in the <a href="#attr-th-scope-colgroup" title="attr-th-scope-colgroup">column
15153: group</a> state if the element is not anchored in a <a href="#concept-column-group" title="concept-column-group">column group</a>.</dd>
15154:
15155: <dt>The <dfn id="attr-th-scope-auto" role="button" tabindex="0" aria-haspopup="true">auto</dfn> state</dt>
15156:
15157: <dd>The <i>auto</i> state makes the header cell apply to a set of
15158: cells selected based on context.</dd>
15159:
15160: </dl><p>The <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute's
15161: <i>missing value default</i> is the <i>auto</i> state.</p>
15162: <p>The <dfn id="dom-th-scope" role="button" tabindex="0" aria-haspopup="true"><code>scope</code></dfn> IDL
15163: attribute must <a href="#reflect">reflect</a> the content attribute of the
15164: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
15165: <div class="example">
15166:
15167: <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
15168: data cells a header cell applies to.</p>
15169:
15170: <p>Here is a markup fragment showing a table:</p>
15171:
15172: <pre><table>
15173: <thead>
15174: <tr> <th> ID <th> Measurement <th> Average <th> Maximum
15175: <tbody>
15176: <tr> <td> <th scope=rowgroup> Cats <td> <td>
15177: <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
15178: <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
15179: <tbody>
15180: <tr> <td> <th scope=rowgroup> English speakers <td> <td>
15181: <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
15182: <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
15183: </table></pre>
15184:
15185: <p>This would result in the following table:</p>
15186:
15187: <table><thead><tr><th> ID </th><th> Measurement </th><th> Average </th><th> Maximum
15188: </th></tr></thead><tbody><tr><td> </td><th scope="rowgroup"> Cats </th><td> </td><td>
15189: </td></tr><tr><td> 93 </td><th scope="row"> Legs </th><td> 3.5 </td><td> 4
15190: </td></tr><tr><td> 10 </td><th scope="row"> Tails </th><td> 1 </td><td> 1
15191: </td></tr></tbody><tbody><tr><td> </td><th scope="rowgroup"> English speakers </th><td> </td><td>
15192: </td></tr><tr><td> 32 </td><th scope="row"> Legs </th><td> 2.67 </td><td> 4
15193: </td></tr><tr><td> 35 </td><th scope="row"> Tails </th><td> 0.33 </td><td> 1
15194: </td></tr></tbody></table><p>The headers in the first row all apply directly down to the rows
15195: in their column.</p>
15196:
15197: <p>The headers with the explicit <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attributes apply to all the
15198: cells in their row group other than the cells in the first column.</p>
15199:
15200: <p>The remaining headers apply just to the cells to the right of
15201: them.</p>
15202:
15203:
15204: <img alt="" height="256" src="http://dev.w3.org/html5/spec/images/table-scope-diagram.png" width="459"></div><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><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" role="button" tabindex="0" aria-haspopup="true"><code>colspan</code></dfn> content
15205: attribute specified, whose value must be a <a href="#valid-non-negative-integer">valid non-negative
15206: integer</a> greater than zero.</p><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
15207: <dfn id="attr-tdth-rowspan" role="button" tabindex="0" aria-haspopup="true"><code>rowspan</code></dfn> content
15208: attribute specified, whose value must be a <a href="#valid-non-negative-integer">valid non-negative
15209: integer</a>.</p><p>These attributes give the number of columns and rows respectively
15210: that the cell is to span. These attributes must not be used to
15211: overlap cells<span class="impl">, as described in the description of
15212: the <a href="#table-model">table model</a></span>.</p><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" role="button" tabindex="0" aria-haspopup="true"><code>headers</code></dfn> content
15213: attribute specified. The <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attribute, if specified,
15214: must contain a string consisting of an <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique
15215: space-separated tokens</a> that are <a href="#case-sensitive">case-sensitive</a>,
15216: each of which must have the value of an <a href="#concept-id" title="concept-id">ID</a> of a <code><a href="#the-th-element">th</a></code> element taking
15217: part in the same <a href="#concept-table" title="concept-table">table</a> as the
15218: <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> element<span class="impl"> (as
15219: defined by the <a href="#table-model">table model</a>)</span>.</p><p>A <code><a href="#the-th-element">th</a></code> element with <a href="#concept-id" title="concept-id">ID</a> <var title="">id</var> is said
15220: to be <i>directly targeted</i> by all <code><a href="#the-td-element">td</a></code> and
15221: <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
15222: include as one of their tokens the <a href="#concept-id" title="concept-id">ID</a> <var title="">id</var>. A
15223: <code><a href="#the-th-element">th</a></code> element <var title="">A</var> is said to be
15224: <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
15225: <var title="">B</var> if either <var title="">A</var> is <i>directly
15226: targeted</i> by <var title="">B</var> or if there exists an element
15227: <var title="">C</var> that is itself <i>targeted</i> by the element
15228: <var title="">B</var> and <var title="">A</var> is <i>directly
15229: targeted</i> by <var title="">C</var>.</p><p>A <code><a href="#the-th-element">th</a></code> element must not be <i>targeted</i> by
15230: itself.</p><hr><p>The <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements implement
15231: interfaces that inherit from the <code><a href="#htmltablecellelement">HTMLTableCellElement</a></code>
15232: interface:</p><pre class="idl">interface <dfn id="htmltablecellelement" role="button" tabindex="0" aria-haspopup="true">HTMLTableCellElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
15233: attribute unsigned long <a href="#dom-tdth-colspan" title="dom-tdth-colSpan">colSpan</a>;
15234: attribute unsigned long <a href="#dom-tdth-rowspan" title="dom-tdth-rowSpan">rowSpan</a>;
15235: [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-tdth-headers" title="dom-tdth-headers">headers</a>;
15236: readonly attribute long <a href="#dom-tdth-cellindex" title="dom-tdth-cellIndex">cellIndex</a>;
15237: };</pre><dl class="domintro"><dt><var title="">cell</var> . <code title="dom-tdth-cellIndex" id="dom-tdth-cellindex"><a href="#dom-tdth-cellindex">cellIndex</a></code></dt>
15238:
15239: <dd>
15240:
15241: <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
15242: correspond to the <var title="">x</var>-position of the cell in
15243: the table, since earlier cells might cover multiple rows or
15244: columns.</p>
15245:
15246: <p>Returns 0 if the element isn't in a row.</p>
15247:
15248: </dd>
15249:
15250: </dl>
15251: <p>The <dfn id="dom-tdth-colspan" role="button" tabindex="0" aria-haspopup="true"><code>colSpan</code></dfn> IDL
15252: attribute must <a href="#reflect">reflect</a> the content attribute of the
15253: same name. The value must be <a href="#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
15254: numbers greater than zero</a>.</p>
15255:
15256: <p>The <dfn id="dom-tdth-rowspan" role="button" tabindex="0" aria-haspopup="true"><code>rowSpan</code></dfn> IDL
15257: attribute must <a href="#reflect">reflect</a> the content attribute of the
15258: 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
15259: attribute as a non-negative integer</a> returns an error, is 1.</p>
15260:
15261: <p>The <dfn id="dom-tdth-headers" role="button" tabindex="0" aria-haspopup="true"><code>headers</code></dfn> IDL
15262: attribute must <a href="#reflect">reflect</a> the content attribute of the
15263: same name.</p>
15264: <h4 id="examples"><span class="secno">4.9.13 </span>Examples</h4><p><i>This section is non-normative.</i></p><p>The following shows how might one mark up the bottom part of
15265: table 45 of the <cite>Smithsonian physical tables, Volume
15266: 71</cite>:</p><pre><table>
15267: <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
15268: Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
15269: <thead>
15270: <tr>
15271: <th rowspan=2>Grade.</th>
15272: <th rowspan=2>Yield Point.</th>
15273: <th colspan=2>Ultimate tensile strength</th>
15274: <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th>
15275: <th rowspan=2>Per cent reduct. area.</th>
15276: </tr>
15277: <tr>
15278: <th>kg/mm<sup>2</sup></th>
15279: <th>lb/in<sup>2</sup></th>
15280: </tr>
15281: </thead>
15282: <tbody>
15283: <tr>
15284: <td>Hard</td>
15285: <td>0.45 ultimate</td>
15286: <td>56.2</td>
15287: <td>80,000</td>
15288: <td>15</td>
15289: <td>20</td>
15290: </tr>
15291: <tr>
15292: <td>Medium</td>
15293: <td>0.45 ultimate</td>
15294: <td>49.2</td>
15295: <td>70,000</td>
15296: <td>18</td>
15297: <td>25</td>
15298: </tr>
15299: <tr>
15300: <td>Soft</td>
15301: <td>0.45 ultimate</td>
15302: <td>42.2</td>
15303: <td>60,000</td>
15304: <td>22</td>
15305: <td>30</td>
15306: </tr>
15307: </tbody>
15308: </table></pre><p>This table could look like this:</p><table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
15309: Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
15310: <thead><tr><th rowspan="2">Grade.</th>
15311: <th rowspan="2">Yield Point.</th>
15312: <th colspan="2">Ultimate tensile strength</th>
15313: <th rowspan="2">Per cent elong. 50.8 mm or 2 in.</th>
15314: <th rowspan="2">Per cent reduct. area.</th>
15315: </tr><tr><th>kg/mm<sup>2</sup></th>
15316: <th>lb/in<sup>2</sup></th>
15317: </tr></thead><tbody><tr><td>Hard</td>
15318: <td>0.45 ultimate</td>
15319: <td>56.2</td>
15320: <td>80,000</td>
15321: <td>15</td>
15322: <td>20</td>
15323: </tr><tr><td>Medium</td>
15324: <td>0.45 ultimate</td>
15325: <td>49.2</td>
15326: <td>70,000</td>
15327: <td>18</td>
15328: <td>25</td>
15329: </tr><tr><td>Soft</td>
15330: <td>0.45 ultimate</td>
15331: <td>42.2</td>
15332: <td>60,000</td>
15333: <td>22</td>
15334: <td>30</td>
15335: </tr></tbody></table><hr><p>The following shows how one might mark up the gross margin table
15336: on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:</p><pre><table>
15337: <thead>
15338: <tr>
15339: <th>
15340: <th>2008
15341: <th>2007
15342: <th>2006
15343: <tbody>
15344: <tr>
15345: <th>Net sales
15346: <td>$ 32,479
15347: <td>$ 24,006
15348: <td>$ 19,315
15349: <tr>
15350: <th>Cost of sales
15351: <td> 21,334
15352: <td> 15,852
15353: <td> 13,717
15354: <tbody>
15355: <tr>
15356: <th>Gross margin
15357: <td>$ 11,145
15358: <td>$ 8,154
15359: <td>$ 5,598
15360: <tfoot>
15361: <tr>
15362: <th>Gross margin percentage
15363: <td>34.3%
15364: <td>34.0%
15365: <td>29.0%
15366: </table></pre><hr><p>The following shows how one might mark up the operating expenses
15367: table from lower on the same page of that document:</p><pre><table>
15368: <colgroup> <col>
15369: <colgroup> <col> <col> <col>
15370: <thead>
15371: <tr> <th> <th>2008 <th>2007 <th>2006
15372: <tbody>
15373: <tr> <th scope=rowgroup> Research and development
15374: <td> $ 1,109 <td> $ 782 <td> $ 712
15375: <tr> <th scope=row> Percentage of net sales
15376: <td> 3.4% <td> 3.3% <td> 3.7%
15377: <tbody>
15378: <tr> <th scope=rowgroup> Selling, general, and administrative
15379: <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
15380: <tr> <th scope=row> Percentage of net sales
15381: <td> 11.6% <td> 12.3% <td> 12.6%
15382: </table></pre><p>This table could look like this:</p><table class="apple-table-examples e2"><thead><tr><th> </th><th>2008 </th><th>2007 </th><th>2006
15383: </th></tr></thead><tbody><tr><th scope="rowgroup"> Research and development
15384: </th><td> $ 1,109 </td><td> $ 782 </td><td> $ 712
15385: </td></tr><tr><th scope="row"> Percentage of net sales
15386: </th><td> 3.4% </td><td> 3.3% </td><td> 3.7%
15387: </td></tr></tbody><tbody><tr><th scope="rowgroup"> Selling, general, and administrative
15388: </th><td> $ 3,761 </td><td> $ 2,963 </td><td> $ 2,433
15389: </td></tr><tr><th scope="row"> Percentage of net sales
15390: </th><td> 11.6% </td><td> 12.3% </td><td> 12.6%
15391: </td></tr></tbody></table><h3 id="forms"><span class="secno">4.10 </span>Forms</h3><h4 id="introduction-1"><span class="secno">4.10.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>A form is a component of a Web page that has form controls, such
15392: as text fields, buttons, checkboxes, range controls, or color
15393: pickers. A user can interact with such a form, providing data that
15394: can then be sent to the server for further processing (e.g.
15395: returning the results of a search or calculation). No client-side
15396: scripting is needed in many cases, though an API is available so
15397: that scripts can augment the user experience or use forms for
15398: purposes other than submitting data to a server.</p><p>Writing a form consists of several steps, which can be performed
15399: in any order: writing the user interface, implementing the
15400: server-side processing, and configuring the user interface to
15401: communicate with the server.</p><h5 id="writing-a-form-s-user-interface"><span class="secno">4.10.1.1 </span>Writing a form's user interface</h5><p><i>This section is non-normative.</i></p><p>For the purposes of this brief introduction, we will create a
15402: pizza ordering form.</p><p>Any form starts with a <code><a href="#the-form-element">form</a></code> element, inside which
15403: are placed the controls. Most controls are represented by the
15404: <code><a href="#the-input-element">input</a></code> element, which by default provides a one-line
15405: text field. To label a control, the <code><a href="#the-label-element">label</a></code> element is
15406: used; the label text and the control itself go inside the
15407: <code><a href="#the-label-element">label</a></code> element. Each part of a form is considered a
15408: <a href="#paragraph">paragraph</a>, and is typically separated from other parts
15409: using <code><a href="#the-p-element">p</a></code> elements. Putting this together, here is how
15410: one might ask for the customer's name:</p><pre><strong><form>
15411: <p><label>Customer name: <input></label></p>
15412: </form></strong></pre><p>To let the user select the size of the pizza, we can use a set of
15413: radio buttons. Radio buttons also use the <code><a href="#the-input-element">input</a></code>
15414: element, this time with a <code title="attr-input-type"><a href="#attr-input-type">type</a></code>
15415: attribute with the value <code title="attr-input-type-radio"><a href="#radio-button-state">radio</a></code>. To make the radio
15416: buttons work as a group, they are given a common name using the
15417: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute. To group a batch
15418: of controls together, such as, in this case, the radio buttons, one
15419: can use the <code><a href="#the-fieldset-element">fieldset</a></code> element. The title of such a group
15420: of controls is given by the first element in the
15421: <code><a href="#the-fieldset-element">fieldset</a></code>, which has to be a <code><a href="#the-legend-element">legend</a></code>
15422: element.</p><pre><form>
15423: <p><label>Customer name: <input></label></p>
15424: <strong> <fieldset>
15425: <legend> Pizza Size </legend>
15426: <p><label> <input type=radio name=size> Small </label></p>
15427: <p><label> <input type=radio name=size> Medium </label></p>
15428: <p><label> <input type=radio name=size> Large </label></p>
15429: </fieldset></strong>
15430: </form></pre><p class="note">Changes from the previous step are highlighted.</p><p>To pick toppings, we can use checkboxes. These use the
15431: <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><pre><form>
15432: <p><label>Customer name: <input></label></p>
15433: <fieldset>
15434: <legend> Pizza Size </legend>
15435: <p><label> <input type=radio name=size> Small </label></p>
15436: <p><label> <input type=radio name=size> Medium </label></p>
15437: <p><label> <input type=radio name=size> Large </label></p>
15438: </fieldset>
15439: <strong> <fieldset>
15440: <legend> Pizza Toppings </legend>
15441: <p><label> <input type=checkbox> Bacon </label></p>
15442: <p><label> <input type=checkbox> Extra Cheese </label></p>
15443: <p><label> <input type=checkbox> Onion </label></p>
15444: <p><label> <input type=checkbox> Mushroom </label></p>
15445: </fieldset></strong>
15446: </form></pre><p>The pizzeria for which this form is being written is always
15447: making mistakes, so it needs a way to contact the customer. For this
15448: purpose, we can use form controls specifically for telephone numbers
15449: (<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
15450: (<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><pre><form>
15451: <p><label>Customer name: <input></label></p>
15452: <strong> <p><label>Telephone: <input type=tel></label></p>
15453: <p><label>E-mail address: <input type=email></label></p></strong>
15454: <fieldset>
15455: <legend> Pizza Size </legend>
15456: <p><label> <input type=radio name=size> Small </label></p>
15457: <p><label> <input type=radio name=size> Medium </label></p>
15458: <p><label> <input type=radio name=size> Large </label></p>
15459: </fieldset>
15460: <fieldset>
15461: <legend> Pizza Toppings </legend>
15462: <p><label> <input type=checkbox> Bacon </label></p>
15463: <p><label> <input type=checkbox> Extra Cheese </label></p>
15464: <p><label> <input type=checkbox> Onion </label></p>
15465: <p><label> <input type=checkbox> Mushroom </label></p>
15466: </fieldset>
15467: </form></pre><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
15468: time. Many of these form controls have attributes to control exactly
15469: what values can be specified; in this case, three attributes of
15470: particular interest are <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
15471: <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
15472: maximum time, and the interval between allowed values (in
15473: seconds). This pizzeria only delivers between 11am and 9pm, and
15474: doesn't promise anything better than 15 minute increments, which we
15475: can mark up as follows:</p><pre><form>
15476: <p><label>Customer name: <input></label></p>
15477: <p><label>Telephone: <input type=tel></label></p>
15478: <p><label>E-mail address: <input type=email></label></p>
15479: <fieldset>
15480: <legend> Pizza Size </legend>
15481: <p><label> <input type=radio name=size> Small </label></p>
15482: <p><label> <input type=radio name=size> Medium </label></p>
15483: <p><label> <input type=radio name=size> Large </label></p>
15484: </fieldset>
15485: <fieldset>
15486: <legend> Pizza Toppings </legend>
15487: <p><label> <input type=checkbox> Bacon </label></p>
15488: <p><label> <input type=checkbox> Extra Cheese </label></p>
15489: <p><label> <input type=checkbox> Onion </label></p>
15490: <p><label> <input type=checkbox> Mushroom </label></p>
15491: </fieldset>
15492: <strong> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p></strong>
15493: </form></pre><p>The <code><a href="#the-textarea-element">textarea</a></code> element can be used to provide a
15494: free-form text field. In this instance, we are going to use it to
15495: provide a space for the customer to give delivery instructions:</p><pre><form>
15496: <p><label>Customer name: <input></label></p>
15497: <p><label>Telephone: <input type=tel></label></p>
15498: <p><label>E-mail address: <input type=email></label></p>
15499: <fieldset>
15500: <legend> Pizza Size </legend>
15501: <p><label> <input type=radio name=size> Small </label></p>
15502: <p><label> <input type=radio name=size> Medium </label></p>
15503: <p><label> <input type=radio name=size> Large </label></p>
15504: </fieldset>
15505: <fieldset>
15506: <legend> Pizza Toppings </legend>
15507: <p><label> <input type=checkbox> Bacon </label></p>
15508: <p><label> <input type=checkbox> Extra Cheese </label></p>
15509: <p><label> <input type=checkbox> Onion </label></p>
15510: <p><label> <input type=checkbox> Mushroom </label></p>
15511: </fieldset>
15512: <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
15513: <strong> <p><label>Delivery instructions: <textarea></textarea></label></p></strong>
15514: </form></pre><p>Finally, to make the form submittable we use the
15515: <code><a href="#the-button-element">button</a></code> element:</p><pre><form>
15516: <p><label>Customer name: <input></label></p>
15517: <p><label>Telephone: <input type=tel></label></p>
15518: <p><label>E-mail address: <input type=email></label></p>
15519: <fieldset>
15520: <legend> Pizza Size </legend>
15521: <p><label> <input type=radio name=size> Small </label></p>
15522: <p><label> <input type=radio name=size> Medium </label></p>
15523: <p><label> <input type=radio name=size> Large </label></p>
15524: </fieldset>
15525: <fieldset>
15526: <legend> Pizza Toppings </legend>
15527: <p><label> <input type=checkbox> Bacon </label></p>
15528: <p><label> <input type=checkbox> Extra Cheese </label></p>
15529: <p><label> <input type=checkbox> Onion </label></p>
15530: <p><label> <input type=checkbox> Mushroom </label></p>
15531: </fieldset>
15532: <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
15533: <p><label>Delivery instructions: <textarea></textarea></label></p>
15534: <strong> <p><button>Submit order</button></p></strong>
15535: </form></pre><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><p><i>This section is non-normative.</i></p><p>The exact details for writing a server-side processor are out of
15536: scope for this specification. For the purposes of this introduction,
15537: we will assume that the script at <code title="">http://pizza.example.com/order.cgi</code> is configured to
15538: accept submissions using the <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
15539: format, expecting the following parameters sent in an HTTP POST
15540: body:</p><dl><dt><code title="">custname</code></dt>
15541: <dd>Customer's name</dd>
15542:
15543: <dt><code title="">custtel</code></dt>
15544: <dd>Customer's telephone number</dd>
15545:
15546: <dt><code title="">custemail</code></dt>
15547: <dd>Customer's e-mail address</dd>
15548:
15549: <dt><code title="">size</code></dt>
15550: <dd>The pizza size, either <code title="">small</code>, <code title="">medium</code>, or <code title="">large</code></dd>
15551:
15552: <dt><code title="">toppings</code></dt>
15553: <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>
15554:
15555: <dt><code title="">delivery</code></dt>
15556: <dd>The requested delivery time</dd>
15557:
15558: <dt><code title="">comments</code></dt>
15559: <dd>The delivery instructions</dd>
15560:
15561: </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><p><i>This section is non-normative.</i></p><p>Form submissions are exposed to servers in a variety of ways,
15562: most commonly as HTTP GET or POST requests. To specify the exact
15563: method used, the <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code>
15564: attribute is specified on the <code><a href="#the-form-element">form</a></code> element. This
15565: doesn't specify how the form data is encoded, though; to specify
15566: that, you use the <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code>
15567: attribute. You also have to specify the <a href="#url">URL</a> of the
15568: service that will handle the submitted data, using the <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code> attribute.</p><p>For each form control you want submitted, you then have to give a
15569: name that will be used to refer to the data in the submission. We
15570: already specified the name for the group of radio buttons; the same
15571: attribute (<code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>) also specifies
15572: the submission name. Radio buttons can be distinguished from each
15573: other in the submission by giving them different values, using the
15574: <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute.</p><p>Multiple controls can have the same name; for example, here we
15575: give all the checkboxes the same name, and the server distinguishes
15576: which checkbox was checked by seeing which values are submitted with
15577: that name — like the radio buttons, they are also given unique
15578: values with the <code title="attr-input-value"><a href="#attr-input-value">value</a></code>
15579: attribute.</p><p>Given the settings in the previous section, this all becomes:</p><pre><form<strong> method="post"
15580: enctype="application/x-www-form-urlencoded"
15581: action="http://pizza.example.com/order.cgi"</strong>>
15582: <p><label>Customer name: <input<strong> name="custname"</strong>></label></p>
15583: <p><label>Telephone: <input type=tel<strong> name="custtel"</strong>></label></p>
15584: <p><label>E-mail address: <input type=email<strong> name="custemail"</strong>></label></p>
15585: <fieldset>
15586: <legend> Pizza Size </legend>
15587: <p><label> <input type=radio name=size<strong> value="small"</strong>> Small </label></p>
15588: <p><label> <input type=radio name=size<strong> value="medium"</strong>> Medium </label></p>
15589: <p><label> <input type=radio name=size<strong> value="large"</strong>> Large </label></p>
15590: </fieldset>
15591: <fieldset>
15592: <legend> Pizza Toppings </legend>
15593: <p><label> <input type=checkbox<strong> name="topping" value="bacon"</strong>> Bacon </label></p>
15594: <p><label> <input type=checkbox<strong> name="topping" value="cheese"</strong>> Extra Cheese </label></p>
15595: <p><label> <input type=checkbox<strong> name="topping" value="onion"</strong>> Onion </label></p>
15596: <p><label> <input type=checkbox<strong> name="topping" value="mushroom"</strong>> Mushroom </label></p>
15597: </fieldset>
15598: <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"<strong> name="delivery"</strong>></label></p>
15599: <p><label>Delivery instructions: <textarea<strong> name="comments"</strong>></textarea></label></p>
15600: <p><button>Submit order</button></p>
15601: </form></pre><p>For example, if the customer entered "Denise Lawrence" as their
15602: name, "555-321-8642" as their telephone number, did not specify an
15603: e-mail address, asked for a medium-sized pizza, selected the Extra
15604: Cheese and Mushroom toppings, entered a delivery time of 7pm, and
15605: left the delivery instructions text field blank, the user agent
15606: would submit the following to the online Web service:</p><pre>custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=</pre><h5 id="client-side-form-validation"><span class="secno">4.10.1.4 </span>Client-side form validation</h5><p><i>This section is non-normative.</i></p><p>Forms can be annotated in such a way that the user agent will
15607: check the user's input before the form is submitted. The server
15608: still has to verify the input is valid (since hostile users can
15609: easily bypass the form validation), but it allows the user to avoid
15610: the wait incurred by having the server be the sole checker of the
15611: user's input.</p><p>The simplest annotation is the <code title="attr-input-required"><a href="#attr-input-required">required</a></code> attribute, which can be
15612: specified on <code><a href="#the-input-element">input</a></code> elements to indicate that the form
15613: is not to be submitted until a value is given. By adding this
15614: attribute to the customer name and delivery time fields, we allow
15615: the user agent to notify the user when the user submits the form
15616: without filling in those fields:</p><pre><form method="post"
15617: enctype="application/x-www-form-urlencoded"
15618: action="http://pizza.example.com/order.cgi">
15619: <p><label>Customer name: <input name="custname"<strong> required</strong>></label></p>
15620: <p><label>Telephone: <input type=tel name="custtel"></label></p>
15621: <p><label>E-mail address: <input type=email name="custemail"></label></p>
15622: <fieldset>
15623: <legend> Pizza Size </legend>
15624: <p><label> <input type=radio name=size value="small"> Small </label></p>
15625: <p><label> <input type=radio name=size value="medium"> Medium </label></p>
15626: <p><label> <input type=radio name=size value="large"> Large </label></p>
15627: </fieldset>
15628: <fieldset>
15629: <legend> Pizza Toppings </legend>
15630: <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
15631: <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
15632: <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
15633: <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
15634: </fieldset>
15635: <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"<strong> required</strong>></label></p>
15636: <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
15637: <p><button>Submit order</button></p>
15638: </form></pre><p>It is also possible to limit the length of the input, using the
15639: <code title="attr-fe-maxlength"><a href="#attr-fe-maxlength">maxlength</a></code> attribute. By
15640: adding this to the <code><a href="#the-textarea-element">textarea</a></code> element, we can limit users
15641: to 1000 characters, preventing them from writing huge essays to the
15642: busy delivery drivers instead of staying focused and to the
15643: point:</p><pre><form method="post"
15644: enctype="application/x-www-form-urlencoded"
15645: action="http://pizza.example.com/order.cgi">
15646: <p><label>Customer name: <input name="custname" required></label></p>
15647: <p><label>Telephone: <input type=tel name="custtel"></label></p>
15648: <p><label>E-mail address: <input type=email name="custemail"></label></p>
15649: <fieldset>
15650: <legend> Pizza Size </legend>
15651: <p><label> <input type=radio name=size value="small"> Small </label></p>
15652: <p><label> <input type=radio name=size value="medium"> Medium </label></p>
15653: <p><label> <input type=radio name=size value="large"> Large </label></p>
15654: </fieldset>
15655: <fieldset>
15656: <legend> Pizza Toppings </legend>
15657: <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
15658: <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
15659: <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
15660: <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
15661: </fieldset>
15662: <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
15663: <p><label>Delivery instructions: <textarea name="comments"<strong> maxlength=1000</strong>></textarea></label></p>
15664: <p><button>Submit order</button></p>
15665: </form></pre><h4 id="categories"><span class="secno">4.10.2 </span>Categories</h4><p>Mostly for historical reasons, elements in this section fall into
15666: several overlapping (but subtly different) categories in addition to
15667: the usual ones like <a href="#flow-content">flow content</a>, <a href="#phrasing-content">phrasing
15668: content</a>, and <a href="#interactive-content">interactive content</a>.</p><p>A number of the elements are <dfn id="form-associated-element" role="button" tabindex="0" aria-haspopup="true">form-associated elements</dfn>, which means they can have a
15669: <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
15670: <code title="dom-fae-form"><a href="#dom-fae-form">form</a></code> IDL attribute.</p><ul class="brief category-list"><li><code><a href="#the-button-element">button</a></code></li>
15671: <li><code><a href="#the-fieldset-element">fieldset</a></code></li>
15672: <li><code><a href="#the-input-element">input</a></code></li>
15673: <li><code><a href="#the-keygen-element">keygen</a></code></li>
15674: <li><code><a href="#the-label-element">label</a></code></li>
15675: <li><code><a href="#the-object-element">object</a></code></li>
15676: <li><code><a href="#the-output-element">output</a></code></li>
15677: <li><code><a href="#the-select-element">select</a></code></li>
15678: <li><code><a href="#the-textarea-element">textarea</a></code></li>
15679: </ul><p>The <a href="#form-associated-element" title="form-associated element">form-associated
15680: elements</a> fall into several subcategories:</p><dl><dt><dfn id="category-listed" role="button" tabindex="0" aria-haspopup="true">Listed elements</dfn></dt>
15681:
15682: <dd>
15683:
15684: <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>
15685: and <code title="dom-fieldset-elements"><a href="#dom-fieldset-elements"><var title="">fieldset</var>.elements</a></code> APIs.</p>
15686:
15687:
15688: <ul class="brief category-list"><li><code><a href="#the-button-element">button</a></code></li>
15689: <li><code><a href="#the-fieldset-element">fieldset</a></code></li>
15690: <li><code><a href="#the-input-element">input</a></code></li>
15691: <li><code><a href="#the-keygen-element">keygen</a></code></li>
15692: <li><code><a href="#the-object-element">object</a></code></li>
15693: <li><code><a href="#the-output-element">output</a></code></li>
15694: <li><code><a href="#the-select-element">select</a></code></li>
15695: <li><code><a href="#the-textarea-element">textarea</a></code></li>
15696: </ul></dd>
15697:
15698: <dt><dfn id="category-submit" role="button" tabindex="0" aria-haspopup="true">Submittable elements</dfn></dt>
15699:
15700: <dd>
15701:
15702: <p>Denotes elements that can be used for <a href="#constructing-form-data-set">constructing the form data
15703: 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>
15704:
15705:
15706: <ul class="brief category-list"><li><code><a href="#the-button-element">button</a></code></li>
15707: <li><code><a href="#the-input-element">input</a></code></li>
15708: <li><code><a href="#the-keygen-element">keygen</a></code></li>
15709: <li><code><a href="#the-object-element">object</a></code></li>
15710: <li><code><a href="#the-select-element">select</a></code></li>
15711: <li><code><a href="#the-textarea-element">textarea</a></code></li>
15712: </ul><p>Some <a href="#category-submit" title="category-submit">submittable elements</a>
15713: can be, depending on their attributes, <dfn id="concept-button" role="button" tabindex="0" aria-haspopup="true">buttons</dfn>. The prose below defines when
15714: an element is a button. Some buttons are specifically <dfn id="concept-submit-button" role="button" tabindex="0" aria-haspopup="true">submit buttons</dfn>.</p>
15715:
15716: </dd>
15717:
15718: <dt><dfn id="category-reset" role="button" tabindex="0" aria-haspopup="true">Resettable elements</dfn></dt>
15719:
15720: <dd>
15721:
15722: <p>Denotes elements that can be affected when a <code><a href="#the-form-element">form</a></code>
15723: element is <a href="#concept-form-reset" title="concept-form-reset">reset</a>.</p>
15724:
15725:
15726: <ul class="brief category-list"><li><code><a href="#the-input-element">input</a></code></li>
15727: <li><code><a href="#the-keygen-element">keygen</a></code></li>
15728: <li><code><a href="#the-output-element">output</a></code></li>
15729: <li><code><a href="#the-select-element">select</a></code></li>
15730: <li><code><a href="#the-textarea-element">textarea</a></code></li>
15731: </ul></dd>
15732:
15733: </dl><p>Some elements, not all of them <a href="#form-associated-element" title="form-associated
15734: element">form-associated</a>, are categorized as <dfn id="category-label" role="button" tabindex="0" aria-haspopup="true">labelable elements</dfn>. These are elements
15735: that can be associated with a <code><a href="#the-label-element">label</a></code> element.
15736:
15737:
15738: </p><ul class="brief category-list"><li><code><a href="#the-button-element">button</a></code></li>
15739: <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>
15740: <li><code><a href="#the-keygen-element">keygen</a></code></li>
15741: <li><code><a href="#the-meter-element">meter</a></code></li>
15742: <li><code><a href="#the-output-element">output</a></code></li>
15743: <li><code><a href="#the-progress-element">progress</a></code></li>
15744: <li><code><a href="#the-select-element">select</a></code></li>
15745: <li><code><a href="#the-textarea-element">textarea</a></code></li>
15746: </ul><h4 id="the-form-element"><span class="secno">4.10.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>form</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
15747: <dd><a href="#flow-content">Flow content</a>.</dd>
1.629 ! mike 15748: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 15749: <dt>Contexts in which this element can be used:</dt>
15750: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
15751: <dt>Content model:</dt>
15752: <dd><a href="#flow-content">Flow content</a>, but with no <code><a href="#the-form-element">form</a></code> element descendants.</dd>
15753: <dt>Content attributes:</dt>
15754: <dd><a href="#global-attributes">Global attributes</a></dd>
15755: <dd><code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code></dd>
15756: <dd><code title="attr-fs-action"><a href="#attr-fs-action">action</a></code></dd>
15757: <dd><code title="attr-form-autocomplete"><a href="#attr-form-autocomplete">autocomplete</a></code></dd>
15758: <dd><code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code></dd>
15759: <dd><code title="attr-fs-method"><a href="#attr-fs-method">method</a></code></dd>
15760: <dd><code title="attr-form-name"><a href="#attr-form-name">name</a></code></dd>
15761: <dd><code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code></dd>
15762: <dd><code title="attr-fs-target"><a href="#attr-fs-target">target</a></code></dd>
15763: <dt>DOM interface:</dt>
15764: <dd>
15765: <pre class="idl">[OverrideBuiltins]
15766: interface <dfn id="htmlformelement" role="button" tabindex="0" aria-haspopup="true">HTMLFormElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
15767: attribute DOMString <a href="#dom-form-acceptcharset" title="dom-form-acceptCharset">acceptCharset</a>;
15768: attribute DOMString <a href="#dom-fs-action" title="dom-fs-action">action</a>;
15769: attribute DOMString <a href="#dom-form-autocomplete" title="dom-form-autocomplete">autocomplete</a>;
15770: attribute DOMString <a href="#dom-fs-enctype" title="dom-fs-enctype">enctype</a>;
15771: attribute DOMString <a href="#dom-fs-encoding" title="dom-fs-encoding">encoding</a>;
15772: attribute DOMString <a href="#dom-fs-method" title="dom-fs-method">method</a>;
15773: attribute DOMString <a href="#dom-form-name" title="dom-form-name">name</a>;
15774: attribute boolean <a href="#dom-fs-novalidate" title="dom-fs-noValidate">noValidate</a>;
15775: attribute DOMString <a href="#dom-fs-target" title="dom-fs-target">target</a>;
15776:
15777: readonly attribute <a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a> <a href="#dom-form-elements" title="dom-form-elements">elements</a>;
15778: readonly attribute long <a href="#dom-form-length" title="dom-form-length">length</a>;
1.588 mike 15779: legacycaller <a href="#dom-form-item" title="dom-form-item">getter</a> <a href="#element">Element</a> (unsigned long index);
15780: legacycaller <a href="#dom-form-nameditem" title="dom-form-namedItem">getter</a> object (DOMString name);
1.545 mike 15781:
15782: void <a href="#dom-form-submit" title="dom-form-submit">submit</a>();
15783: void <a href="#dom-form-reset" title="dom-form-reset">reset</a>();
15784: boolean <a href="#dom-form-checkvalidity" title="dom-form-checkValidity">checkValidity</a>();
15785: };</pre>
15786: </dd>
15787: </dl><p>The <code><a href="#the-form-element">form</a></code> element <a href="#represents">represents</a> a
15788: collection of <a href="#form-associated-element" title="form-associated element">form-associated
15789: elements</a>, some of which can represent editable values that
15790: can be submitted to a server for processing.</p><p>The <dfn id="attr-form-accept-charset" role="button" tabindex="0" aria-haspopup="true"><code>accept-charset</code></dfn>
15791: attribute gives the character encodings that are to be used for the
15792: submission. If specified, the value must be an <a href="#ordered-set-of-unique-space-separated-tokens">ordered set of
15793: unique space-separated tokens</a> that are <a href="#ascii-case-insensitive">ASCII
15794: case-insensitive</a>, and each token must be an <a href="#ascii-case-insensitive">ASCII
15795: case-insensitive</a> match for the <a href="#preferred-mime-name">preferred MIME
15796: name</a> of an <a href="#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>.
15797: <a href="#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-form-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> attribute
15798: 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
15799: not be the empty string, and the value must be unique amongst the
15800: <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
15801: any.</p><p>The <dfn id="attr-form-autocomplete" role="button" tabindex="0" aria-haspopup="true"><code>autocomplete</code></dfn>
15802: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The attribute has
15803: two states. The <code title="attr-form-autocomplete-on">on</code>
15804: keyword maps to the <dfn id="attr-form-autocomplete-on-state" role="button" tabindex="0" aria-haspopup="true">on</dfn> state, and the
15805: <code title="attr-form-autocomplete-off">off</code> keyword maps to
15806: the <dfn id="attr-form-autocomplete-off-state" role="button" tabindex="0" aria-haspopup="true">off</dfn>
15807: state. The attribute may also be omitted. The <i>missing value
15808: 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
15809: that by default, <code><a href="#the-input-element">input</a></code> elements in the form will have
15810: 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
15811: that by default, <code><a href="#the-input-element">input</a></code> elements in the form will have
15812: their <a href="#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">on</i>.</p><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
15813: for form submission</a>.</p><dl class="domintro"><dt><var title="">form</var> . <code title="dom-form-elements" id="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt>
15814:
15815: <dd>
15816:
15817: <p>Returns an <code><a href="#htmlcollection">HTMLCollection</a></code> of the form controls in
15818: the form (excluding image buttons for historical reasons).</p>
15819:
15820: </dd>
15821:
15822: <dt><var title="">form</var> . <code title="dom-form-length" id="dom-form-length"><a href="#dom-form-length">length</a></code></dt>
15823:
15824: <dd>
15825:
15826: <p>Returns the number of form controls in the form (excluding
15827: image buttons for historical reasons).</p>
15828:
15829: </dd>
15830:
15831: <dt><var title="">form</var>[<var title="">index</var>]</dt>
15832: <dt><var title="">form</var>(<var title="">index</var>)</dt>
15833:
15834: <dd>
15835:
15836: <p>Returns the <var title="">index</var>th element in the form
15837: (excluding image buttons for historical reasons).</p>
15838:
15839: </dd>
15840:
15841: <dt><var title="">form</var>[<var title="">name</var>]</dt>
15842: <dt><var title="">form</var>(<var title="">name</var>)</dt>
15843:
15844: <dd>
15845:
15846: <p>Returns the form control in the form with the given <a href="#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> (excluding image buttons for
15847: historical reasons).</p>
15848:
15849: <p>Once an element has been referenced using a particular name,
15850: that name will continue being available as a way to reference that
15851: element in this method, even if the element's actual <a href="#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> changes, for as long as the
15852: element remains in the <code><a href="#document">Document</a></code>.</p>
15853:
15854: <p>If there are multiple matching items, then a
15855: <code><a href="#nodelist">NodeList</a></code> object containing all those elements is
15856: returned.</p>
15857:
15858: </dd>
15859:
15860: <dt><var title="">form</var> . <code title="dom-form-submit" id="dom-form-submit"><a href="#dom-form-submit">submit</a></code>()</dt>
15861:
15862: <dd>
15863:
15864: <p>Submits the form.</p>
15865:
15866: </dd>
15867:
15868: <dt><var title="">form</var> . <code title="dom-form-reset" id="dom-form-reset"><a href="#dom-form-reset">reset</a></code>()</dt>
15869:
15870: <dd>
15871:
15872: <p>Resets the form.</p>
15873:
15874: </dd>
15875:
15876: <dt><var title="">form</var> . <code title="dom-form-checkValidity" id="dom-form-checkvalidity"><a href="#dom-form-checkvalidity">checkValidity</a></code>()</dt>
15877:
15878: <dd>
15879:
15880: <p>Returns true if the form's controls are all valid; otherwise,
15881: returns false.</p>
15882:
15883: </dd>
15884:
15885: </dl>
15886: <p>The <dfn id="dom-form-autocomplete" role="button" tabindex="0" aria-haspopup="true"><code>autocomplete</code></dfn> IDL
15887: attribute must <a href="#reflect">reflect</a> the content attribute of the
15888: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
15889:
15890: <p>The <dfn id="dom-form-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> IDL
15891: attribute must <a href="#reflect">reflect</a> the content attribute of the
15892: same name.</p>
15893:
15894: <p>The <dfn id="dom-form-acceptcharset" role="button" tabindex="0" aria-haspopup="true"><code>acceptCharset</code></dfn> IDL
15895: 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
15896: attribute.</p>
15897: <div class="example">
15898:
15899: <p>This example shows two search forms:</p>
15900:
15901: <pre><form action="http://www.google.com/search" method="get">
15902: <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
15903: </form>
15904: <form action="http://www.bing.com/search" method="get">
15905: <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
15906: </form></pre>
15907:
15908: </div><h4 id="the-fieldset-element"><span class="secno">4.10.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>fieldset</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
15909: <dd><a href="#flow-content">Flow content</a>.</dd>
15910: <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
15911: <dd><a href="#category-listed" title="category-listed">Listed</a> <a href="#form-associated-element">form-associated element</a>.</dd>
1.629 ! mike 15912: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 15913: <dt>Contexts in which this element can be used:</dt>
15914: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
15915: <dt>Content model:</dt>
15916: <dd>Optionally a <code><a href="#the-legend-element">legend</a></code> element, followed by <a href="#flow-content">flow content</a>.</dd>
15917: <dt>Content attributes:</dt>
15918: <dd><a href="#global-attributes">Global attributes</a></dd>
15919: <dd><code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">disabled</a></code></dd>
15920: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
15921: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
15922: <dt>DOM interface:</dt>
15923: <dd>
15924: <pre class="idl">interface <dfn id="htmlfieldsetelement" role="button" tabindex="0" aria-haspopup="true">HTMLFieldSetElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
15925: attribute boolean <a href="#dom-fieldset-disabled" title="dom-fieldset-disabled">disabled</a>;
15926: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
15927: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
15928:
15929: readonly attribute DOMString <a href="#dom-fieldset-type" title="dom-fieldset-type">type</a>;
15930:
15931: readonly attribute <a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a> <a href="#dom-fieldset-elements" title="dom-fieldset-elements">elements</a>;
15932:
15933: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
15934: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
15935: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
15936: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 15937: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 15938: };</pre>
15939: </dd>
15940: </dl><p>The <code><a href="#the-fieldset-element">fieldset</a></code> element <a href="#represents">represents</a> a set
15941: of form controls optionally grouped under a common name.</p><p>The name of the group is given by the first <code><a href="#the-legend-element">legend</a></code>
15942: element that is a child of the <code><a href="#the-fieldset-element">fieldset</a></code> element, if
15943: any. The remainder of the descendants form the group.</p><p>The <dfn id="attr-fieldset-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn>
15944: attribute, when specified, causes all the form control descendants
15945: of the <code><a href="#the-fieldset-element">fieldset</a></code> element, excluding those that are
15946: descendants of the <code><a href="#the-fieldset-element">fieldset</a></code> element's first
15947: <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><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
15948: explicitly associate the <code><a href="#the-fieldset-element">fieldset</a></code> element with its
15949: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
15950: attribute represents the element's name.</p><dl class="domintro"><dt><var title="">fieldset</var> . <code title="dom-fieldset-type" id="dom-fieldset-type"><a href="#dom-fieldset-type">type</a></code></dt>
15951:
15952: <dd>
15953:
15954: <p>Returns the string "fieldset".</p>
15955:
15956: </dd>
15957:
15958: <dt><var title="">fieldset</var> . <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt>
15959:
15960: <dd>
15961:
15962: <p>Returns an <code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code> of the form
15963: controls in the element.</p>
15964:
15965: </dd>
15966:
15967: </dl>
15968: <p>The <dfn id="dom-fieldset-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn> IDL
15969: attribute must <a href="#reflect">reflect</a> the content attribute of the
15970: same name.</p>
15971: <div class="example">
15972:
15973: <p>This example shows a <code><a href="#the-fieldset-element">fieldset</a></code> element being used to
15974: group a set of related controls:</p>
15975:
15976: <pre><fieldset>
15977: <legend>Display</legend>
15978: <p><label><input type=radio name=c value=0 checked> Black on White</label>
15979: <p><label><input type=radio name=c value=1> White on Black</label>
15980: <p><label><input type=checkbox name=g> Use grayscale</label>
15981: <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
15982: <datalist id=contrast>
15983: <option label=Normal value=0>
15984: <option label=Maximum value=100>
15985: </datalist>
15986: </fieldset></pre>
15987:
15988: </div><div class="example">
15989:
15990: <p>The following snippet shows a fieldset with a checkbox in the
15991: legend that controls whether or not the fieldset is enabled. The
15992: contents of the fieldset consist of two required text fields and an
15993: optional year/month control.</p>
15994:
15995: <pre><fieldset name="clubfields" disabled>
15996: <legend> <label>
15997: <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
15998: Use Club Card
15999: </label> </legend>
16000: <p><label>Name on card: <input name=clubname required></label></p>
16001: <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
16002: <p><label>Expiry date: <input name=clubexp type=month></label></p>
16003: </fieldset></pre>
16004:
16005: </div><div class="example">
16006:
16007: <p>You can also nest <code><a href="#the-fieldset-element">fieldset</a></code> elements. Here is an
16008: example expanding on the previous one that does so:</p>
16009:
16010: <pre><fieldset name="clubfields" disabled>
16011: <legend> <label>
16012: <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
16013: Use Club Card
16014: </label> </legend>
16015: <p><label>Name on card: <input name=clubname required></label></p>
16016: <fieldset name="numfields">
16017: <legend> <label>
16018: <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
16019: My card has numbers on it
16020: </label> </legend>
16021: <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
16022: </fieldset>
16023: <fieldset name="letfields" disabled>
16024: <legend> <label>
16025: <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
16026: My card has letters on it
16027: </label> </legend>
16028: <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
16029: </fieldset>
16030: </fieldset></pre>
16031:
16032: <p>In this example, if the outer "Use Club Card" checkbox is not
16033: checked, everything inside the outer <code><a href="#the-fieldset-element">fieldset</a></code>,
16034: including the two radio buttons in the legends of the two nested
16035: <code><a href="#the-fieldset-element">fieldset</a></code>s, will be disabled. However, if the checkbox
16036: is checked, then the radio buttons will both be enabled and will
16037: let you select which of the two inner <code><a href="#the-fieldset-element">fieldset</a></code>s is to
16038: be enabled.</p>
16039:
16040: </div><h4 id="the-legend-element"><span class="secno">4.10.5 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>legend</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
16041: <dd>None.</dd>
16042: <dt>Contexts in which this element can be used:</dt>
16043: <dd>As the first child of a <code><a href="#the-fieldset-element">fieldset</a></code> element.</dd>
16044: <dt>Content model:</dt>
16045: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
16046: <dt>Content attributes:</dt>
16047: <dd><a href="#global-attributes">Global attributes</a></dd>
16048: <dt>DOM interface:</dt>
16049: <dd>
16050: <pre class="idl">interface <dfn id="htmllegendelement" role="button" tabindex="0" aria-haspopup="true">HTMLLegendElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
16051: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-legend-form" title="dom-legend-form">form</a>;
16052: };</pre>
16053: </dd>
16054: </dl><p>The <code><a href="#the-legend-element">legend</a></code> element <a href="#represents">represents</a> a caption
16055: for the rest of the contents of the <code><a href="#the-legend-element">legend</a></code> element's
16056: parent <code><a href="#the-fieldset-element">fieldset</a></code> element<span class="impl">, if
16057: any</span>.</p><dl class="domintro"><dt><var title="">legend</var> . <code title="dom-legend-form" id="dom-legend-form"><a href="#dom-legend-form">form</a></code></dt>
16058:
16059: <dd>
16060:
16061: <p>Returns the element's <code><a href="#the-form-element">form</a></code> element, if any, or
16062: null otherwise.</p>
16063:
16064: </dd>
16065:
16066: </dl><h4 id="the-label-element"><span class="secno">4.10.6 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
16067: <dd><a href="#flow-content">Flow content</a>.</dd>
16068: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
16069: <dd><a href="#interactive-content">Interactive content</a>.</dd>
16070: <dd><a href="#form-associated-element">Form-associated element</a>.</dd>
1.629 ! mike 16071: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 16072: <dt>Contexts in which this element can be used:</dt>
16073: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
16074: <dt>Content model:</dt>
16075: <dd><a href="#phrasing-content">Phrasing content</a>, but with no descendant <a href="#category-label" title="category-label">labelable 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>
16076: <dt>Content attributes:</dt>
16077: <dd><a href="#global-attributes">Global attributes</a></dd>
16078: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
16079: <dd><code title="attr-label-for"><a href="#attr-label-for">for</a></code></dd>
16080: <dt>DOM interface:</dt>
16081: <dd>
16082: <pre class="idl">interface <dfn id="htmllabelelement" role="button" tabindex="0" aria-haspopup="true">HTMLLabelElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
16083: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
16084: attribute DOMString <a href="#dom-label-htmlfor" title="dom-label-htmlFor">htmlFor</a>;
16085: readonly attribute <a href="#htmlelement">HTMLElement</a>? <a href="#dom-label-control" title="dom-label-control">control</a>;
16086: };</pre>
16087: </dd>
16088: </dl><p>The <code><a href="#the-label-element">label</a></code> <a href="#represents">represents</a> a caption in a
16089: user interface. The caption can be associated with a specific form
16090: control<span class="impl">, known as the <code><a href="#the-label-element">label</a></code>
16091: element's <dfn id="labeled-control" role="button" tabindex="0" aria-haspopup="true">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
16092: control inside the <code><a href="#the-label-element">label</a></code> element itself.</p><p>The <dfn id="attr-label-for" role="button" tabindex="0" aria-haspopup="true"><code>for</code></dfn> attribute
16093: may be specified to indicate a form control with which the caption
16094: is to be associated. If the attribute is specified, the attribute's
16095: value must be the <a href="#concept-id" title="concept-id">ID</a> of a <a href="#category-label" title="category-label">labelable element</a> in the same
16096: <code><a href="#document">Document</a></code> as the <code><a href="#the-label-element">label</a></code> element. <span class="impl">If the attribute is specified and there is an element
16097: in the <code><a href="#document">Document</a></code> whose <a href="#concept-id" title="concept-id">ID</a> 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
16098: element is a <a href="#category-label" title="category-label">labelable element</a>,
16099: then that element is the <code><a href="#the-label-element">label</a></code> element's <a href="#labeled-control">labeled
16100: control</a>.</span></p><dl class="domintro"><dt><var title="">label</var> . <code title="dom-label-control" id="dom-label-control"><a href="#dom-label-control">control</a></code></dt>
16101:
16102: <dd>
16103:
16104: <p>Returns the form control that is associated with this element.</p>
16105:
16106: </dd>
16107:
16108: </dl><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
16109: explicitly associate the <code><a href="#the-label-element">label</a></code> element with its
16110: <a href="#form-owner">form owner</a>.</p>
16111: <p>The <dfn id="dom-label-htmlfor" role="button" tabindex="0" aria-haspopup="true"><code>htmlFor</code></dfn> IDL
16112: attribute must <a href="#reflect">reflect</a> the <code title="attr-label-for"><a href="#attr-label-for">for</a></code> content attribute.</p>
16113: <hr><dl class="domintro"><dt><var title="">control</var> . <code title="dom-lfe-labels" id="dom-lfe-labels"><a href="#dom-lfe-labels">labels</a></code></dt>
16114:
16115: <dd>
16116:
16117: <p>Returns a <code><a href="#nodelist">NodeList</a></code> of all the <code><a href="#the-label-element">label</a></code>
16118: elements that the form control is associated with.</p>
16119:
16120: </dd>
16121:
16122: </dl><div class="example">
16123:
16124: <p>The following example shows three form controls each with a
16125: label, two of which have small text showing the right format for
16126: users to use.</p>
16127:
16128: <pre><p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
16129: <p><label>Age: <input name=age type=number min=0></label></p>
16130: <p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p></pre>
16131:
16132: </div><h4 id="the-input-element"><span class="secno">4.10.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>input</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
16133: <dd><a href="#flow-content">Flow content</a>.</dd>
16134: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
16135: <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>
16136: <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="#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>
16137: <dd>If the <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: <a href="#category-listed" title="category-listed">Listed</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>
1.629 ! mike 16138: <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="#palpable-content">Palpable content</a>.</dd>
1.545 mike 16139: <dt>Contexts in which this element can be used:</dt>
16140: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
16141: <dt>Content model:</dt>
16142: <dd>Empty.</dd>
16143: <dt>Content attributes:</dt>
16144: <dd><a href="#global-attributes">Global attributes</a></dd>
16145: <dd><code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code></dd>
16146: <dd><code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code></dd>
16147: <dd><code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code></dd>
16148: <dd><code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code></dd>
16149: <dd><code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code></dd>
16150: <dd><code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code></dd>
16151: <dd><code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code></dd>
16152: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
16153: <dd><code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code></dd>
16154: <dd><code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code></dd>
16155: <dd><code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code></dd>
16156: <dd><code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code></dd>
16157: <dd><code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code></dd>
16158: <dd><code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></dd>
16159: <dd><code title="attr-input-list"><a href="#attr-input-list">list</a></code></dd>
16160: <dd><code title="attr-input-max"><a href="#attr-input-max">max</a></code></dd>
16161: <dd><code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code></dd>
16162: <dd><code title="attr-input-min"><a href="#attr-input-min">min</a></code></dd>
16163: <dd><code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code></dd>
16164: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
16165: <dd><code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code></dd>
16166: <dd><code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code></dd>
16167: <dd><code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code></dd>
16168: <dd><code title="attr-input-required"><a href="#attr-input-required">required</a></code></dd>
16169: <dd><code title="attr-input-size"><a href="#attr-input-size">size</a></code></dd>
16170: <dd><code title="attr-input-src"><a href="#attr-input-src">src</a></code></dd>
16171: <dd><code title="attr-input-step"><a href="#attr-input-step">step</a></code></dd>
16172: <dd><code title="attr-input-type"><a href="#attr-input-type">type</a></code></dd>
16173: <dd><code title="attr-input-value"><a href="#attr-input-value">value</a></code></dd>
16174: <dd><code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></dd>
16175: <dt>DOM interface:</dt>
16176: <dd>
16177: <pre class="idl">interface <dfn id="htmlinputelement" role="button" tabindex="0" aria-haspopup="true">HTMLInputElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
16178: attribute DOMString <a href="#dom-input-accept" title="dom-input-accept">accept</a>;
16179: attribute DOMString <a href="#dom-input-alt" title="dom-input-alt">alt</a>;
16180: attribute DOMString <a href="#dom-input-autocomplete" title="dom-input-autocomplete">autocomplete</a>;
16181: attribute boolean <a href="#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
16182: attribute boolean <a href="#dom-input-defaultchecked" title="dom-input-defaultChecked">defaultChecked</a>;
16183: attribute boolean <a href="#dom-input-checked" title="dom-input-checked">checked</a>;
16184: attribute DOMString <a href="#dom-input-dirname" title="dom-input-dirName">dirName</a>;
16185: attribute boolean <a href="#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
16186: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
16187: readonly attribute <a href="#filelist">FileList</a>? <a href="#dom-input-files" title="dom-input-files">files</a>;
16188: attribute DOMString <a href="#dom-fs-formaction" title="dom-fs-formAction">formAction</a>;
16189: attribute DOMString <a href="#dom-fs-formenctype" title="dom-fs-formEnctype">formEnctype</a>;
16190: attribute DOMString <a href="#dom-fs-formmethod" title="dom-fs-formMethod">formMethod</a>;
16191: attribute boolean <a href="#dom-fs-formnovalidate" title="dom-fs-formNoValidate">formNoValidate</a>;
16192: attribute DOMString <a href="#dom-fs-formtarget" title="dom-fs-formTarget">formTarget</a>;
16193: attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
16194: attribute boolean <a href="#dom-input-indeterminate" title="dom-input-indeterminate">indeterminate</a>;
16195: readonly attribute <a href="#htmlelement">HTMLElement</a>? <a href="#dom-input-list" title="dom-input-list">list</a>;
16196: attribute DOMString <a href="#dom-input-max" title="dom-input-max">max</a>;
16197: attribute long <a href="#dom-input-maxlength" title="dom-input-maxLength">maxLength</a>;
16198: attribute DOMString <a href="#dom-input-min" title="dom-input-min">min</a>;
16199: attribute boolean <a href="#dom-input-multiple" title="dom-input-multiple">multiple</a>;
16200: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
16201: attribute DOMString <a href="#dom-input-pattern" title="dom-input-pattern">pattern</a>;
16202: attribute DOMString <a href="#dom-input-placeholder" title="dom-input-placeholder">placeholder</a>;
16203: attribute boolean <a href="#dom-input-readonly" title="dom-input-readOnly">readOnly</a>;
16204: attribute boolean <a href="#dom-input-required" title="dom-input-required">required</a>;
16205: attribute unsigned long <a href="#dom-input-size" title="dom-input-size">size</a>;
16206: attribute DOMString <a href="#dom-input-src" title="dom-input-src">src</a>;
16207: attribute DOMString <a href="#dom-input-step" title="dom-input-step">step</a>;
16208: attribute DOMString <a href="#dom-input-type" title="dom-input-type">type</a>;
16209: attribute DOMString <a href="#dom-input-defaultvalue" title="dom-input-defaultValue">defaultValue</a>;
16210: attribute DOMString <a href="#dom-input-value" title="dom-input-value">value</a>;
16211: attribute <span>Date</span> <a href="#dom-input-valueasdate" title="dom-input-valueAsDate">valueAsDate</a>;
16212: attribute double <a href="#dom-input-valueasnumber" title="dom-input-valueAsNumber">valueAsNumber</a>;
16213: readonly attribute <a href="#htmloptionelement">HTMLOptionElement</a>? <a href="#dom-input-selectedoption" title="dom-input-selectedOption">selectedOption</a>;
16214: attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
16215:
1.562 mike 16216: void <a href="#dom-input-stepup" title="dom-input-stepUp">stepUp</a>(optional long n);
16217: void <a href="#dom-input-stepdown" title="dom-input-stepDown">stepDown</a>(optional long n);
1.545 mike 16218:
16219: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
16220: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
16221: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
16222: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 16223: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 16224:
16225: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
16226:
16227: void <a href="#dom-textarea-input-select" title="dom-textarea/input-select">select</a>();
16228: attribute unsigned long <a href="#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
16229: attribute unsigned long <a href="#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
16230: attribute DOMString <a href="#dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;
1.562 mike 16231: void <a href="#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction);
1.545 mike 16232: };</pre>
16233: </dd>
16234: </dl><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a typed data field,
16235: usually with a form control to allow the user to edit the data.</p><p>The <dfn id="attr-input-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
16236: attribute controls the data type (and associated control) of the
16237: element. It is an <a href="#enumerated-attribute">enumerated attribute</a>. The following
16238: table lists the keywords and states for the attribute — the
16239: keywords in the left column map to the states in the cell in the
16240: second column on the same row as the keyword.</p><table id="attr-input-type-keywords"><thead><tr><th> Keyword
16241: </th><th> State
16242: </th><th> Data type
16243: </th><th> Control type
16244: </th></tr></thead><tbody><tr><td> <dfn id="attr-input-type-hidden-keyword" role="button" tabindex="0" aria-haspopup="true"><code>hidden</code></dfn>
16245: </td><td> <a href="#hidden-state" title="attr-input-type-hidden">Hidden</a>
16246: </td><td> An arbitrary string
16247: </td><td> n/a
16248: </td></tr><tr><td> <dfn id="attr-input-type-text-keyword" role="button" tabindex="0" aria-haspopup="true"><code>text</code></dfn>
16249: </td><td> <a href="#text-state-and-search-state" title="attr-input-type-text">Text</a>
16250: </td><td> Text with no line breaks
16251: </td><td> Text field
16252: </td></tr><tr><td> <dfn id="attr-input-type-search-keyword" role="button" tabindex="0" aria-haspopup="true"><code>search</code></dfn>
16253: </td><td> <a href="#text-state-and-search-state" title="attr-input-type-search">Search</a>
16254: </td><td> Text with no line breaks
16255: </td><td> Search field
16256: </td></tr><tr><td> <dfn id="attr-input-type-tel-keyword" role="button" tabindex="0" aria-haspopup="true"><code>tel</code></dfn>
16257: </td><td> <a href="#telephone-state" title="attr-input-type-tel">Telephone</a>
16258: </td><td> Text with no line breaks
16259: </td><td> A text field
16260: </td></tr><tr><td> <dfn id="attr-input-type-url-keyword" role="button" tabindex="0" aria-haspopup="true"><code>url</code></dfn>
16261: </td><td> <a href="#url-state" title="attr-input-type-url">URL</a>
16262: </td><td> An absolute IRI
16263: </td><td> A text field
16264: </td></tr><tr><td> <dfn id="attr-input-type-email-keyword" role="button" tabindex="0" aria-haspopup="true"><code>email</code></dfn>
16265: </td><td> <a href="#e-mail-state" title="attr-input-type-email">E-mail</a>
16266: </td><td> An e-mail address or list of e-mail addresses
16267: </td><td> A text field
16268: </td></tr><tr><td> <dfn id="attr-input-type-password-keyword" role="button" tabindex="0" aria-haspopup="true"><code>password</code></dfn>
16269: </td><td> <a href="#password-state" title="attr-input-type-password">Password</a>
16270: </td><td> Text with no line breaks (sensitive information)
16271: </td><td> Text field that obscures data entry
16272: </td></tr><tr><td> <dfn id="attr-input-type-datetime-keyword" role="button" tabindex="0" aria-haspopup="true"><code>datetime</code></dfn>
16273: </td><td> <a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a>
16274: </td><td> A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC
16275: </td><td> A date and time control
16276: </td></tr><tr><td> <dfn id="attr-input-type-date-keyword" role="button" tabindex="0" aria-haspopup="true"><code>date</code></dfn>
16277: </td><td> <a href="#date-state" title="attr-input-type-date">Date</a>
16278: </td><td> A date (year, month, day) with no time zone
16279: </td><td> A date control
16280: </td></tr><tr><td> <dfn id="attr-input-type-month-keyword" role="button" tabindex="0" aria-haspopup="true"><code>month</code></dfn>
16281: </td><td> <a href="#month-state" title="attr-input-type-month">Month</a>
16282: </td><td> A date consisting of a year and a month with no time zone
16283: </td><td> A month control
16284: </td></tr><tr><td> <dfn id="attr-input-type-week-keyword" role="button" tabindex="0" aria-haspopup="true"><code>week</code></dfn>
16285: </td><td> <a href="#week-state" title="attr-input-type-week">Week</a>
16286: </td><td> A date consisting of a week-year number and a week number with no time zone
16287: </td><td> A week control
16288: </td></tr><tr><td> <dfn id="attr-input-type-time-keyword" role="button" tabindex="0" aria-haspopup="true"><code>time</code></dfn>
16289: </td><td> <a href="#time-state" title="attr-input-type-time">Time</a>
16290: </td><td> A time (hour, minute, seconds, fractional seconds) with no time zone
16291: </td><td> A time control
16292: </td></tr><tr><td> <dfn id="attr-input-type-datetime-local-keyword" role="button" tabindex="0" aria-haspopup="true"><code>datetime-local</code></dfn>
16293: </td><td> <a href="#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a>
16294: </td><td> A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
16295: </td><td> A date and time control
16296: </td></tr><tr><td> <dfn id="attr-input-type-number-keyword" role="button" tabindex="0" aria-haspopup="true"><code>number</code></dfn>
16297: </td><td> <a href="#number-state" title="attr-input-type-number">Number</a>
16298: </td><td> A numerical value
16299: </td><td> A text field or spinner control
16300: </td></tr><tr><td> <dfn id="attr-input-type-range-keyword" role="button" tabindex="0" aria-haspopup="true"><code>range</code></dfn>
16301: </td><td> <a href="#range-state" title="attr-input-type-range">Range</a>
16302: </td><td> A numerical value, with the extra semantic that the exact value is not important
16303: </td><td> A slider control or similar
16304: </td></tr><tr><td> <dfn id="attr-input-type-color-keyword" role="button" tabindex="0" aria-haspopup="true"><code>color</code></dfn>
16305: </td><td> <a href="#color-state" title="attr-input-type-color">Color</a>
16306: </td><td> An sRGB color with 8-bit red, green, and blue components
16307: </td><td> A color well
16308: </td></tr><tr><td> <dfn id="attr-input-type-checkbox-keyword" role="button" tabindex="0" aria-haspopup="true"><code>checkbox</code></dfn>
16309: </td><td> <a href="#checkbox-state" title="attr-input-type-checkbox">Checkbox</a>
16310: </td><td> A set of zero or more values from a predefined list
16311: </td><td> A checkbox
16312: </td></tr><tr><td> <dfn id="attr-input-type-radio-keyword" role="button" tabindex="0" aria-haspopup="true"><code>radio</code></dfn>
16313: </td><td> <a href="#radio-button-state" title="attr-input-type-radio">Radio Button</a>
16314: </td><td> An enumerated value
16315: </td><td> A radio button
16316: </td></tr><tr><td> <dfn id="attr-input-type-file-keyword" role="button" tabindex="0" aria-haspopup="true"><code>file</code></dfn>
16317: </td><td> <a href="#file-upload-state" title="attr-input-type-file">File Upload</a>
16318: </td><td> Zero or more files each with a <a href="#mime-type">MIME type</a> and optionally a file name
16319: </td><td> A label and a button
16320: </td></tr><tr><td> <dfn id="attr-input-type-submit-keyword" role="button" tabindex="0" aria-haspopup="true"><code>submit</code></dfn>
16321: </td><td> <a href="#submit-button-state" title="attr-input-type-submit">Submit Button</a>
16322: </td><td> An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
16323: </td><td> A button
16324: </td></tr><tr><td> <dfn id="attr-input-type-image-keyword" role="button" tabindex="0" aria-haspopup="true"><code>image</code></dfn>
16325: </td><td> <a href="#image-button-state" title="attr-input-type-image">Image Button</a>
16326: </td><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
16327: </td><td> Either a clickable image, or a button
16328: </td></tr><tr><td> <dfn id="attr-input-type-reset-keyword" role="button" tabindex="0" aria-haspopup="true"><code>reset</code></dfn>
16329: </td><td> <a href="#reset-button-state" title="attr-input-type-reset">Reset Button</a>
16330: </td><td> n/a
16331: </td><td> A button
16332: </td></tr><tr><td> <dfn id="attr-input-type-button-keyword" role="button" tabindex="0" aria-haspopup="true"><code>button</code></dfn>
16333: </td><td> <a href="#button-state" title="attr-input-type-button">Button</a>
16334: </td><td> n/a
16335: </td><td> A button
16336: </td></tr></tbody></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><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-input-dirname"><a href="#attr-input-dirname">dirname</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
16337: 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>,
16338: <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
16339: <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
16340: IDL attributes, the <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
16341: method, the <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> and
16342: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> methods, and the
16343: <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
16344: <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
16345: <span class="impl">is non-normative and</span> summarizes which of
16346: those content attributes, IDL attributes, methods, and events apply
16347: to each state:</p><table class="applies" id="input-type-attr-summary"><thead><tr><th>
16348: </th><th> <span title=""><a href="#hidden-state" title="attr-input-type-hidden">Hidden</a></span>
16349: </th><th> <span title=""><a href="#text-state-and-search-state" title="attr-input-type-text">Text</a>,</span>
16350: <span title=""><a href="#text-state-and-search-state" title="attr-input-type-search">Search</a></span>
16351: </th><th> <span title=""><a href="#url-state" title="attr-input-type-url">URL</a>,</span>
16352: <span title=""><a href="#telephone-state" title="attr-input-type-tel">Telephone</a></span>
16353: </th><th> <span title=""><a href="#e-mail-state" title="attr-input-type-email">E-mail</a></span>
16354: </th><th> <span title=""><a href="#password-state" title="attr-input-type-password">Password</a></span>
16355: </th><th> <span title=""><a href="#date-and-time-state" title="attr-input-type-datetime">Date and Time</a>,</span>
16356: <span title=""><a href="#date-state" title="attr-input-type-date">Date</a>,</span>
16357: <span title=""><a href="#month-state" title="attr-input-type-month">Month</a>,</span>
16358: <span title=""><a href="#week-state" title="attr-input-type-week">Week</a>,</span>
16359: <span title=""><a href="#time-state" title="attr-input-type-time">Time</a></span>
16360: </th><th> <span title=""><a href="#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a></span>
16361: </th><th> <span title=""><a href="#number-state" title="attr-input-type-number">Number</a></span>
16362: </th><th> <span title=""><a href="#range-state" title="attr-input-type-range">Range</a></span>
16363: </th><th> <span title=""><a href="#color-state" title="attr-input-type-color">Color</a></span>
16364: </th><th> <span title=""><a href="#checkbox-state" title="attr-input-type-checkbox">Checkbox</a>,</span>
16365: <span title=""><a href="#radio-button-state" title="attr-input-type-radio">Radio Button</a></span>
16366: </th><th> <span title=""><a href="#file-upload-state" title="attr-input-type-file">File Upload</a></span>
16367: </th><th> <span title=""><a href="#submit-button-state" title="attr-input-type-submit">Submit Button</a></span>
16368: </th><th> <span title=""><a href="#image-button-state" title="attr-input-type-image">Image Button</a></span>
16369: </th><th> <span title=""><a href="#reset-button-state" title="attr-input-type-reset">Reset Button</a>,</span>
16370: <span title=""><a href="#button-state" title="attr-input-type-button">Button</a></span>
16371:
16372: </th></tr></thead><tbody><tr><th colspan="16" scope="rowgroup">Content attributes
16373:
16374: </th></tr><tr><th> <code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>
16375: </th><td class="no"> ·
16376: </td><td class="no"> ·
16377: </td><td class="no"> ·
16378: </td><td class="no"> ·
16379: </td><td class="no"> ·
16380: </td><td class="no"> ·
16381: </td><td class="no"> ·
16382: </td><td class="no"> ·
16383: </td><td class="no"> ·
16384: </td><td class="no"> ·
16385: </td><td class="no"> ·
16386: </td><td class="yes"> Yes
16387: </td><td class="no"> ·
16388: </td><td class="no"> ·
16389: </td><td class="no"> ·
16390:
16391: </td></tr><tr><th> <code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>
16392: </th><td class="no"> ·
16393: </td><td class="no"> ·
16394: </td><td class="no"> ·
16395: </td><td class="no"> ·
16396: </td><td class="no"> ·
16397: </td><td class="no"> ·
16398: </td><td class="no"> ·
16399: </td><td class="no"> ·
16400: </td><td class="no"> ·
16401: </td><td class="no"> ·
16402: </td><td class="no"> ·
16403: </td><td class="no"> ·
16404: </td><td class="no"> ·
16405: </td><td class="yes"> Yes
16406: </td><td class="no"> ·
16407:
16408: </td></tr><tr><th> <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>
16409: </th><td class="no"> ·
16410: </td><td class="yes"> Yes
16411: </td><td class="yes"> Yes
16412: </td><td class="yes"> Yes
16413: </td><td class="yes"> Yes
16414: </td><td class="yes"> Yes
16415: </td><td class="yes"> Yes
16416: </td><td class="yes"> Yes
16417: </td><td class="yes"> Yes
16418: </td><td class="yes"> Yes
16419: </td><td class="no"> ·
16420: </td><td class="no"> ·
16421: </td><td class="no"> ·
16422: </td><td class="no"> ·
16423: </td><td class="no"> ·
16424:
16425: </td></tr><tr><th> <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>
16426: </th><td class="no"> ·
16427: </td><td class="no"> ·
16428: </td><td class="no"> ·
16429: </td><td class="no"> ·
16430: </td><td class="no"> ·
16431: </td><td class="no"> ·
16432: </td><td class="no"> ·
16433: </td><td class="no"> ·
16434: </td><td class="no"> ·
16435: </td><td class="no"> ·
16436: </td><td class="yes"> Yes
16437: </td><td class="no"> ·
16438: </td><td class="no"> ·
16439: </td><td class="no"> ·
16440: </td><td class="no"> ·
16441:
16442: </td></tr><tr><th> <code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>
16443: </th><td class="no"> ·
16444: </td><td class="yes"> Yes
16445: </td><td class="no"> ·
16446: </td><td class="no"> ·
16447: </td><td class="no"> ·
16448: </td><td class="no"> ·
16449: </td><td class="no"> ·
16450: </td><td class="no"> ·
16451: </td><td class="no"> ·
16452: </td><td class="no"> ·
16453: </td><td class="no"> ·
16454: </td><td class="no"> ·
16455: </td><td class="no"> ·
16456: </td><td class="no"> ·
16457: </td><td class="no"> ·
16458:
16459: </td></tr><tr><th> <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>
16460: </th><td class="no"> ·
16461: </td><td class="no"> ·
16462: </td><td class="no"> ·
16463: </td><td class="no"> ·
16464: </td><td class="no"> ·
16465: </td><td class="no"> ·
16466: </td><td class="no"> ·
16467: </td><td class="no"> ·
16468: </td><td class="no"> ·
16469: </td><td class="no"> ·
16470: </td><td class="no"> ·
16471: </td><td class="no"> ·
16472: </td><td class="yes"> Yes
16473: </td><td class="yes"> Yes
16474: </td><td class="no"> ·
16475:
16476: </td></tr><tr><th> <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>
16477: </th><td class="no"> ·
16478: </td><td class="no"> ·
16479: </td><td class="no"> ·
16480: </td><td class="no"> ·
16481: </td><td class="no"> ·
16482: </td><td class="no"> ·
16483: </td><td class="no"> ·
16484: </td><td class="no"> ·
16485: </td><td class="no"> ·
16486: </td><td class="no"> ·
16487: </td><td class="no"> ·
16488: </td><td class="no"> ·
16489: </td><td class="yes"> Yes
16490: </td><td class="yes"> Yes
16491: </td><td class="no"> ·
16492:
16493: </td></tr><tr><th> <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>
16494: </th><td class="no"> ·
16495: </td><td class="no"> ·
16496: </td><td class="no"> ·
16497: </td><td class="no"> ·
16498: </td><td class="no"> ·
16499: </td><td class="no"> ·
16500: </td><td class="no"> ·
16501: </td><td class="no"> ·
16502: </td><td class="no"> ·
16503: </td><td class="no"> ·
16504: </td><td class="no"> ·
16505: </td><td class="no"> ·
16506: </td><td class="yes"> Yes
16507: </td><td class="yes"> Yes
16508: </td><td class="no"> ·
16509:
16510: </td></tr><tr><th> <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>
16511: </th><td class="no"> ·
16512: </td><td class="no"> ·
16513: </td><td class="no"> ·
16514: </td><td class="no"> ·
16515: </td><td class="no"> ·
16516: </td><td class="no"> ·
16517: </td><td class="no"> ·
16518: </td><td class="no"> ·
16519: </td><td class="no"> ·
16520: </td><td class="no"> ·
16521: </td><td class="no"> ·
16522: </td><td class="no"> ·
16523: </td><td class="yes"> Yes
16524: </td><td class="yes"> Yes
16525: </td><td class="no"> ·
16526:
16527: </td></tr><tr><th> <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>
16528: </th><td class="no"> ·
16529: </td><td class="no"> ·
16530: </td><td class="no"> ·
16531: </td><td class="no"> ·
16532: </td><td class="no"> ·
16533: </td><td class="no"> ·
16534: </td><td class="no"> ·
16535: </td><td class="no"> ·
16536: </td><td class="no"> ·
16537: </td><td class="no"> ·
16538: </td><td class="no"> ·
16539: </td><td class="no"> ·
16540: </td><td class="yes"> Yes
16541: </td><td class="yes"> Yes
16542: </td><td class="no"> ·
16543:
16544: </td></tr><tr><th> <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code>
16545: </th><td class="no"> ·
16546: </td><td class="no"> ·
16547: </td><td class="no"> ·
16548: </td><td class="no"> ·
16549: </td><td class="no"> ·
16550: </td><td class="no"> ·
16551: </td><td class="no"> ·
16552: </td><td class="no"> ·
16553: </td><td class="no"> ·
16554: </td><td class="no"> ·
16555: </td><td class="no"> ·
16556: </td><td class="no"> ·
16557: </td><td class="no"> ·
16558: </td><td class="yes"> Yes
16559: </td><td class="no"> ·
16560:
16561: </td></tr><tr><th> <code title="attr-input-list"><a href="#attr-input-list">list</a></code>
16562: </th><td class="no"> ·
16563: </td><td class="yes"> Yes
16564: </td><td class="yes"> Yes
16565: </td><td class="yes"> Yes
16566: </td><td class="no"> ·
16567: </td><td class="yes"> Yes
16568: </td><td class="yes"> Yes
16569: </td><td class="yes"> Yes
16570: </td><td class="yes"> Yes
16571: </td><td class="yes"> Yes
16572: </td><td class="no"> ·
16573: </td><td class="no"> ·
16574: </td><td class="no"> ·
16575: </td><td class="no"> ·
16576: </td><td class="no"> ·
16577:
16578: </td></tr><tr><th> <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
16579: </th><td class="no"> ·
16580: </td><td class="no"> ·
16581: </td><td class="no"> ·
16582: </td><td class="no"> ·
16583: </td><td class="no"> ·
16584: </td><td class="yes"> Yes
16585: </td><td class="yes"> Yes
16586: </td><td class="yes"> Yes
16587: </td><td class="yes"> Yes
16588: </td><td class="no"> ·
16589: </td><td class="no"> ·
16590: </td><td class="no"> ·
16591: </td><td class="no"> ·
16592: </td><td class="no"> ·
16593: </td><td class="no"> ·
16594:
16595: </td></tr><tr><th> <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>
16596: </th><td class="no"> ·
16597: </td><td class="yes"> Yes
16598: </td><td class="yes"> Yes
16599: </td><td class="yes"> Yes
16600: </td><td class="yes"> Yes
16601: </td><td class="no"> ·
16602: </td><td class="no"> ·
16603: </td><td class="no"> ·
16604: </td><td class="no"> ·
16605: </td><td class="no"> ·
16606: </td><td class="no"> ·
16607: </td><td class="no"> ·
16608: </td><td class="no"> ·
16609: </td><td class="no"> ·
16610: </td><td class="no"> ·
16611:
16612: </td></tr><tr><th> <code title="attr-input-min"><a href="#attr-input-min">min</a></code>
16613: </th><td class="no"> ·
16614: </td><td class="no"> ·
16615: </td><td class="no"> ·
16616: </td><td class="no"> ·
16617: </td><td class="no"> ·
16618: </td><td class="yes"> Yes
16619: </td><td class="yes"> Yes
16620: </td><td class="yes"> Yes
16621: </td><td class="yes"> Yes
16622: </td><td class="no"> ·
16623: </td><td class="no"> ·
16624: </td><td class="no"> ·
16625: </td><td class="no"> ·
16626: </td><td class="no"> ·
16627: </td><td class="no"> ·
16628:
16629: </td></tr><tr><th> <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>
16630: </th><td class="no"> ·
16631: </td><td class="no"> ·
16632: </td><td class="no"> ·
16633: </td><td class="yes"> Yes
16634: </td><td class="no"> ·
16635: </td><td class="no"> ·
16636: </td><td class="no"> ·
16637: </td><td class="no"> ·
16638: </td><td class="no"> ·
16639: </td><td class="no"> ·
16640: </td><td class="no"> ·
16641: </td><td class="yes"> Yes
16642: </td><td class="no"> ·
16643: </td><td class="no"> ·
16644: </td><td class="no"> ·
16645:
16646: </td></tr><tr><th> <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>
16647: </th><td class="no"> ·
16648: </td><td class="yes"> Yes
16649: </td><td class="yes"> Yes
16650: </td><td class="yes"> Yes
16651: </td><td class="yes"> Yes
16652: </td><td class="no"> ·
16653: </td><td class="no"> ·
16654: </td><td class="no"> ·
16655: </td><td class="no"> ·
16656: </td><td class="no"> ·
16657: </td><td class="no"> ·
16658: </td><td class="no"> ·
16659: </td><td class="no"> ·
16660: </td><td class="no"> ·
16661: </td><td class="no"> ·
16662:
16663: </td></tr><tr><th> <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
16664: </th><td class="no"> ·
16665: </td><td class="yes"> Yes
16666: </td><td class="yes"> Yes
16667: </td><td class="yes"> Yes
16668: </td><td class="yes"> Yes
16669: </td><td class="no"> ·
16670: </td><td class="no"> ·
16671: </td><td class="yes"> Yes
16672: </td><td class="no"> ·
16673: </td><td class="no"> ·
16674: </td><td class="no"> ·
16675: </td><td class="no"> ·
16676: </td><td class="no"> ·
16677: </td><td class="no"> ·
16678: </td><td class="no"> ·
16679:
16680: </td></tr><tr><th> <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>
16681: </th><td class="no"> ·
16682: </td><td class="yes"> Yes
16683: </td><td class="yes"> Yes
16684: </td><td class="yes"> Yes
16685: </td><td class="yes"> Yes
16686: </td><td class="yes"> Yes
16687: </td><td class="yes"> Yes
16688: </td><td class="yes"> Yes
16689: </td><td class="no"> ·
16690: </td><td class="no"> ·
16691: </td><td class="no"> ·
16692: </td><td class="no"> ·
16693: </td><td class="no"> ·
16694: </td><td class="no"> ·
16695: </td><td class="no"> ·
16696:
16697: </td></tr><tr><th> <code title="attr-input-required"><a href="#attr-input-required">required</a></code>
16698: </th><td class="no"> ·
16699: </td><td class="yes"> Yes
16700: </td><td class="yes"> Yes
16701: </td><td class="yes"> Yes
16702: </td><td class="yes"> Yes
16703: </td><td class="yes"> Yes
16704: </td><td class="yes"> Yes
16705: </td><td class="yes"> Yes
16706: </td><td class="no"> ·
16707: </td><td class="no"> ·
16708: </td><td class="yes"> Yes
16709: </td><td class="yes"> Yes
16710: </td><td class="no"> ·
16711: </td><td class="no"> ·
16712: </td><td class="no"> ·
16713:
16714: </td></tr><tr><th> <code title="attr-input-size"><a href="#attr-input-size">size</a></code>
16715: </th><td class="no"> ·
16716: </td><td class="yes"> Yes
16717: </td><td class="yes"> Yes
16718: </td><td class="yes"> Yes
16719: </td><td class="yes"> Yes
16720: </td><td class="no"> ·
16721: </td><td class="no"> ·
16722: </td><td class="no"> ·
16723: </td><td class="no"> ·
16724: </td><td class="no"> ·
16725: </td><td class="no"> ·
16726: </td><td class="no"> ·
16727: </td><td class="no"> ·
16728: </td><td class="no"> ·
16729: </td><td class="no"> ·
16730:
16731: </td></tr><tr><th> <code title="attr-input-src"><a href="#attr-input-src">src</a></code>
16732: </th><td class="no"> ·
16733: </td><td class="no"> ·
16734: </td><td class="no"> ·
16735: </td><td class="no"> ·
16736: </td><td class="no"> ·
16737: </td><td class="no"> ·
16738: </td><td class="no"> ·
16739: </td><td class="no"> ·
16740: </td><td class="no"> ·
16741: </td><td class="no"> ·
16742: </td><td class="no"> ·
16743: </td><td class="no"> ·
16744: </td><td class="no"> ·
16745: </td><td class="yes"> Yes
16746: </td><td class="no"> ·
16747:
16748: </td></tr><tr><th> <code title="attr-input-step"><a href="#attr-input-step">step</a></code>
16749: </th><td class="no"> ·
16750: </td><td class="no"> ·
16751: </td><td class="no"> ·
16752: </td><td class="no"> ·
16753: </td><td class="no"> ·
16754: </td><td class="yes"> Yes
16755: </td><td class="yes"> Yes
16756: </td><td class="yes"> Yes
16757: </td><td class="yes"> Yes
16758: </td><td class="no"> ·
16759: </td><td class="no"> ·
16760: </td><td class="no"> ·
16761: </td><td class="no"> ·
16762: </td><td class="no"> ·
16763: </td><td class="no"> ·
16764:
16765: </td></tr><tr><th> <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code>
16766: </th><td class="no"> ·
16767: </td><td class="no"> ·
16768: </td><td class="no"> ·
16769: </td><td class="no"> ·
16770: </td><td class="no"> ·
16771: </td><td class="no"> ·
16772: </td><td class="no"> ·
16773: </td><td class="no"> ·
16774: </td><td class="no"> ·
16775: </td><td class="no"> ·
16776: </td><td class="no"> ·
16777: </td><td class="no"> ·
16778: </td><td class="no"> ·
16779: </td><td class="yes"> Yes
16780: </td><td class="no"> ·
16781:
16782: </td></tr></tbody><tbody><tr><th colspan="16" scope="rowgroup">IDL attributes and methods
16783:
16784: </th></tr><tr><th> <code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>
16785: </th><td class="no"> ·
16786: </td><td class="no"> ·
16787: </td><td class="no"> ·
16788: </td><td class="no"> ·
16789: </td><td class="no"> ·
16790: </td><td class="no"> ·
16791: </td><td class="no"> ·
16792: </td><td class="no"> ·
16793: </td><td class="no"> ·
16794: </td><td class="no"> ·
16795: </td><td class="yes"> Yes
16796: </td><td class="no"> ·
16797: </td><td class="no"> ·
16798: </td><td class="no"> ·
16799: </td><td class="no"> ·
16800:
16801: </td></tr><tr><th> <code title="dom-input-files"><a href="#dom-input-files">files</a></code>
16802: </th><td class="no"> ·
16803: </td><td class="no"> ·
16804: </td><td class="no"> ·
16805: </td><td class="no"> ·
16806: </td><td class="no"> ·
16807: </td><td class="no"> ·
16808: </td><td class="no"> ·
16809: </td><td class="no"> ·
16810: </td><td class="no"> ·
16811: </td><td class="no"> ·
16812: </td><td class="no"> ·
16813: </td><td class="yes"> Yes
16814: </td><td class="no"> ·
16815: </td><td class="no"> ·
16816: </td><td class="no"> ·
16817:
16818: </td></tr><tr class="impl"><th> <code title="dom-input-value"><a href="#dom-input-value">value</a></code>
16819: </th><td class="yes"> <a href="#dom-input-value-default" title="dom-input-value-default">default</a>
16820: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16821: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16822: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16823: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16824: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16825: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16826: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16827: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16828: </td><td class="yes"> <a href="#dom-input-value-value" title="dom-input-value-value">value</a>
16829: </td><td class="yes"> <a href="#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>
16830: </td><td class="yes"> <a href="#dom-input-value-filename" title="dom-input-value-filename">filename</a>
16831: </td><td class="yes"> <a href="#dom-input-value-default" title="dom-input-value-default">default</a>
16832: </td><td class="yes"> <a href="#dom-input-value-default" title="dom-input-value-default">default</a>
16833: </td><td class="yes"> <a href="#dom-input-value-default" title="dom-input-value-default">default</a>
16834:
16835: </td></tr><tr><th> <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>
16836: </th><td class="no"> ·
16837: </td><td class="no"> ·
16838: </td><td class="no"> ·
16839: </td><td class="no"> ·
16840: </td><td class="no"> ·
16841: </td><td class="yes"> Yes
16842: </td><td class="no"> ·
16843: </td><td class="no"> ·
16844: </td><td class="no"> ·
16845: </td><td class="no"> ·
16846: </td><td class="no"> ·
16847: </td><td class="no"> ·
16848: </td><td class="no"> ·
16849: </td><td class="no"> ·
16850: </td><td class="no"> ·
16851:
16852: </td></tr><tr><th> <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>
16853: </th><td class="no"> ·
16854: </td><td class="no"> ·
16855: </td><td class="no"> ·
16856: </td><td class="no"> ·
16857: </td><td class="no"> ·
16858: </td><td class="yes"> Yes
16859: </td><td class="yes"> Yes
16860: </td><td class="yes"> Yes
16861: </td><td class="yes"> Yes
16862: </td><td class="no"> ·
16863: </td><td class="no"> ·
16864: </td><td class="no"> ·
16865: </td><td class="no"> ·
16866: </td><td class="no"> ·
16867: </td><td class="no"> ·
16868:
16869: </td></tr><tr><th> <code title="dom-input-list"><a href="#dom-input-list">list</a></code>
16870: </th><td class="no"> ·
16871: </td><td class="yes"> Yes
16872: </td><td class="yes"> Yes
16873: </td><td class="yes"> Yes
16874: </td><td class="no"> ·
16875: </td><td class="yes"> Yes
16876: </td><td class="yes"> Yes
16877: </td><td class="yes"> Yes
16878: </td><td class="yes"> Yes
16879: </td><td class="yes"> Yes
16880: </td><td class="no"> ·
16881: </td><td class="no"> ·
16882: </td><td class="no"> ·
16883: </td><td class="no"> ·
16884: </td><td class="no"> ·
16885:
16886: </td></tr><tr><th> <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>
16887: </th><td class="no"> ·
16888: </td><td class="yes"> Yes
16889: </td><td class="yes"> Yes
16890: </td><td class="yes"> Yes†
16891: </td><td class="no"> ·
16892: </td><td class="yes"> Yes
16893: </td><td class="yes"> Yes
16894: </td><td class="yes"> Yes
16895: </td><td class="yes"> Yes
16896: </td><td class="yes"> Yes
16897: </td><td class="no"> ·
16898: </td><td class="no"> ·
16899: </td><td class="no"> ·
16900: </td><td class="no"> ·
16901: </td><td class="no"> ·
16902:
16903: </td></tr><tr><th> <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>
16904: </th><td class="no"> ·
16905: </td><td class="yes"> Yes
16906: </td><td class="yes"> Yes
16907: </td><td class="no"> ·
16908: </td><td class="yes"> Yes
16909: </td><td class="no"> ·
16910: </td><td class="no"> ·
16911: </td><td class="no"> ·
16912: </td><td class="no"> ·
16913: </td><td class="no"> ·
16914: </td><td class="no"> ·
16915: </td><td class="no"> ·
16916: </td><td class="no"> ·
16917: </td><td class="no"> ·
16918: </td><td class="no"> ·
16919:
16920: </td></tr><tr><th> <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>
16921: </th><td class="no"> ·
16922: </td><td class="yes"> Yes
16923: </td><td class="yes"> Yes
16924: </td><td class="no"> ·
16925: </td><td class="yes"> Yes
16926: </td><td class="no"> ·
16927: </td><td class="no"> ·
16928: </td><td class="no"> ·
16929: </td><td class="no"> ·
16930: </td><td class="no"> ·
16931: </td><td class="no"> ·
16932: </td><td class="no"> ·
16933: </td><td class="no"> ·
16934: </td><td class="no"> ·
16935: </td><td class="no"> ·
16936:
16937: </td></tr><tr><th> <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>
16938: </th><td class="no"> ·
16939: </td><td class="yes"> Yes
16940: </td><td class="yes"> Yes
16941: </td><td class="no"> ·
16942: </td><td class="yes"> Yes
16943: </td><td class="no"> ·
16944: </td><td class="no"> ·
16945: </td><td class="no"> ·
16946: </td><td class="no"> ·
16947: </td><td class="no"> ·
16948: </td><td class="no"> ·
16949: </td><td class="no"> ·
16950: </td><td class="no"> ·
16951: </td><td class="no"> ·
16952: </td><td class="no"> ·
16953:
16954: </td></tr><tr><th> <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>
16955: </th><td class="no"> ·
16956: </td><td class="yes"> Yes
16957: </td><td class="yes"> Yes
16958: </td><td class="no"> ·
16959: </td><td class="yes"> Yes
16960: </td><td class="no"> ·
16961: </td><td class="no"> ·
16962: </td><td class="no"> ·
16963: </td><td class="no"> ·
16964: </td><td class="no"> ·
16965: </td><td class="no"> ·
16966: </td><td class="no"> ·
16967: </td><td class="no"> ·
16968: </td><td class="no"> ·
16969: </td><td class="no"> ·
16970:
16971: </td></tr><tr><th> <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
16972: </th><td class="no"> ·
16973: </td><td class="yes"> Yes
16974: </td><td class="yes"> Yes
16975: </td><td class="no"> ·
16976: </td><td class="yes"> Yes
16977: </td><td class="no"> ·
16978: </td><td class="no"> ·
16979: </td><td class="no"> ·
16980: </td><td class="no"> ·
16981: </td><td class="no"> ·
16982: </td><td class="no"> ·
16983: </td><td class="no"> ·
16984: </td><td class="no"> ·
16985: </td><td class="no"> ·
16986: </td><td class="no"> ·
16987:
16988: </td></tr><tr><th> <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>
16989: </th><td class="no"> ·
16990: </td><td class="no"> ·
16991: </td><td class="no"> ·
16992: </td><td class="no"> ·
16993: </td><td class="no"> ·
16994: </td><td class="yes"> Yes
16995: </td><td class="yes"> Yes
16996: </td><td class="yes"> Yes
16997: </td><td class="yes"> Yes
16998: </td><td class="no"> ·
16999: </td><td class="no"> ·
17000: </td><td class="no"> ·
17001: </td><td class="no"> ·
17002: </td><td class="no"> ·
17003: </td><td class="no"> ·
17004:
17005: </td></tr><tr><th> <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code>
17006: </th><td class="no"> ·
17007: </td><td class="no"> ·
17008: </td><td class="no"> ·
17009: </td><td class="no"> ·
17010: </td><td class="no"> ·
17011: </td><td class="yes"> Yes
17012: </td><td class="yes"> Yes
17013: </td><td class="yes"> Yes
17014: </td><td class="yes"> Yes
17015: </td><td class="no"> ·
17016: </td><td class="no"> ·
17017: </td><td class="no"> ·
17018: </td><td class="no"> ·
17019: </td><td class="no"> ·
17020: </td><td class="no"> ·
17021:
17022: </td></tr></tbody><tbody><tr><th colspan="16" scope="rowgroup">Events
17023:
17024: </th></tr><tr><th> <span title=""><code title="event-input-input"><a href="#event-input-input">input</a></code> event</span>
17025: </th><td class="no"> ·
17026: </td><td class="yes"> Yes
17027: </td><td class="yes"> Yes
17028: </td><td class="yes"> Yes
17029: </td><td class="yes"> Yes
17030: </td><td class="yes"> Yes
17031: </td><td class="yes"> Yes
17032: </td><td class="yes"> Yes
17033: </td><td class="yes"> Yes
17034: </td><td class="yes"> Yes
17035: </td><td class="no"> ·
17036: </td><td class="no"> ·
17037: </td><td class="no"> ·
17038: </td><td class="no"> ·
17039: </td><td class="no"> ·
17040:
17041: </td></tr><tr><th> <span title=""><code title="event-input-change"><a href="#event-input-change">change</a></code> event</span>
17042: </th><td class="no"> ·
17043: </td><td class="yes"> Yes
17044: </td><td class="yes"> Yes
17045: </td><td class="yes"> Yes
17046: </td><td class="yes"> Yes
17047: </td><td class="yes"> Yes
17048: </td><td class="yes"> Yes
17049: </td><td class="yes"> Yes
17050: </td><td class="yes"> Yes
17051: </td><td class="yes"> Yes
17052: </td><td class="yes"> Yes
17053: </td><td class="yes"> Yes
17054: </td><td class="no"> ·
17055: </td><td class="no"> ·
17056: </td><td class="no"> ·
17057:
17058: </td></tr></tbody></table><p class="note">† The dagger symbol (†) indicates that
17059: the feature only applies when the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute is not
17060: specified.</p><p>The <dfn id="attr-input-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn>
17061: 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>
17062: element. <span class="impl">When the <code title="attr-input-value"><a href="#attr-input-value">value</a></code> content attribute is added,
17063: set, or removed, if the control's <a href="#concept-input-value-dirty-flag" title="concept-input-value-dirty-flag">dirty value flag</a> is
17064: false, the user agent must set the <a href="#concept-fe-value" title="concept-fe-value">value</a> of the element to the value of
17065: the <code title="attr-input-value"><a href="#attr-input-value">value</a></code> content attribute,
17066: if there is one, or the empty string otherwise, and then run the
17067: current <a href="#value-sanitization-algorithm">value sanitization algorithm</a>, if one is
17068: defined.</span></p><p>The <dfn id="attr-input-checked" role="button" tabindex="0" aria-haspopup="true"><code>checked</code></dfn>
17069: content attribute is a <a href="#boolean-attribute">boolean attribute</a> that gives the
17070: default <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the
17071: <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
17072: 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
17073: agent must set the <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the element to
17074: true; when the <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>
17075: 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
17076: agent must set the <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the element to
17077: false.</span></p><hr><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
17078: explicitly associate the <code><a href="#the-input-element">input</a></code> element with its
17079: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
17080: 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
17081: the control non-interactive and to prevent its value from being
17082: submitted. The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>
17083: attribute controls focus.</p>
17084: <p>The <dfn id="dom-input-indeterminate" role="button" tabindex="0" aria-haspopup="true"><code>indeterminate</code></dfn> IDL
17085: attribute must initially be set to false. On getting, it must return
17086: the last value it was set to. On setting, it must be set to the new
17087: value. It has no effect except for changing the appearance of <a href="#checkbox-state" title="attr-input-type-checkbox">checkbox</a> controls.</p>
17088:
17089: <p>The <dfn id="dom-input-accept" role="button" tabindex="0" aria-haspopup="true"><code>accept</code></dfn>, <dfn id="dom-input-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn>, <dfn id="dom-input-max" role="button" tabindex="0" aria-haspopup="true"><code>max</code></dfn>, <dfn id="dom-input-min" role="button" tabindex="0" aria-haspopup="true"><code>min</code></dfn>, <dfn id="dom-input-multiple" role="button" tabindex="0" aria-haspopup="true"><code>multiple</code></dfn>, <dfn id="dom-input-pattern" role="button" tabindex="0" aria-haspopup="true"><code>pattern</code></dfn>, <dfn id="dom-input-placeholder" role="button" tabindex="0" aria-haspopup="true"><code>placeholder</code></dfn>, <dfn id="dom-input-required" role="button" tabindex="0" aria-haspopup="true"><code>required</code></dfn>, <dfn id="dom-input-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn>, <dfn id="dom-input-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn>, and <dfn id="dom-input-step" role="button" tabindex="0" aria-haspopup="true"><code>step</code></dfn> IDL attributes must
17090: <a href="#reflect">reflect</a> the respective content attributes of the same
17091: name. The <dfn id="dom-input-dirname" role="button" tabindex="0" aria-haspopup="true"><code>dirName</code></dfn> IDL attribute
17092: must <a href="#reflect">reflect</a> the <code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code> content attribute. The <dfn id="dom-input-readonly" role="button" tabindex="0" aria-haspopup="true"><code>readOnly</code></dfn> IDL attribute
17093: must <a href="#reflect">reflect</a> the <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> content attribute. The
17094: <dfn id="dom-input-defaultchecked" role="button" tabindex="0" aria-haspopup="true"><code>defaultChecked</code></dfn>
17095: 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
17096: <dfn id="dom-input-defaultvalue" role="button" tabindex="0" aria-haspopup="true"><code>defaultValue</code></dfn>
17097: 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>
17098:
17099: <p>The <dfn id="dom-input-autocomplete" role="button" tabindex="0" aria-haspopup="true"><code>autocomplete</code></dfn> and
17100: <dfn id="dom-input-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL attributes
17101: must <a href="#reflect">reflect</a> the respective content attributes of the
17102: same name, <a href="#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-input-maxlength" role="button" tabindex="0" aria-haspopup="true"><code>maxLength</code></dfn> IDL
17103: attribute must <a href="#reflect">reflect</a> the <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code> content attribute,
17104: <a href="#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>.</p>
17105: <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><h6 id="hidden-state"><span class="secno">4.10.7.1.1 </span><dfn role="button" tabindex="0" aria-haspopup="true">Hidden</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a value
17106: that is not intended to be examined or manipulated by the user.</p><p>If the <code title="attr-input-value"><a href="#attr-input-value">name</a></code> attribute is
17107: present and has a value that is a <a href="#case-sensitive">case-sensitive</a> match
17108: for the string "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>", then the element's
17109: <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute must be
17110: omitted.</p><div class="bookkeeping">
17111:
17112: <p>The
17113: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>
17114: IDL attribute applies to this element and is
17115: in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
17116:
17117: <p>The following content attributes must not be specified and do not
17118: apply to the element:
17119: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17120: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17121: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17122: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17123: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17124: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17125: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17126: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17127: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17128: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17129: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17130: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17131: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17132: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17133: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17134: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17135: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17136: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17137: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17138: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
17139: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17140: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
17141: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
17142: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17143:
17144: <p>The following IDL attributes and methods do not apply to the
17145: element:
17146: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17147: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17148: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17149: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
17150: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17151: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17152: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
17153: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
17154: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
17155: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
17156: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
17157: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
17158: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17159:
17160: <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>
17161:
17162: </div><h6 id="text-state-and-search-state"><span class="secno">4.10.7.1.2 </span><dfn role="button" tabindex="0" aria-haspopup="true">Text</dfn> state and <dfn role="button" tabindex="0" aria-haspopup="true">Search</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a one line
17163: plain text edit control for the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><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
17164: stylistic: on platforms where search fields are distinguished from
17165: regular text fields, the <a href="#text-state-and-search-state" title="attr-input-type-search">Search</a> state might result in
17166: an appearance consistent with the platform's search fields rather
17167: than appearing like a regular text field.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17168: specified, must have a value that contains no U+000A LINE FEED (LF)
17169: or U+000D CARRIAGE RETURN (CR) characters.</p><div class="bookkeeping">
17170:
17171: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17172: attributes, IDL attributes, and methods apply to the element:
17173: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17174: <code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17175: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17176: <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17177: <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17178: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17179: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17180: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17181: <code title="attr-input-size"><a href="#attr-input-size">size</a></code> content attributes;
17182: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17183: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
17184: <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17185: <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17186: <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
17187: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes;
17188: <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17189: <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17190:
17191: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17192: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17193:
17194: <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>
17195:
17196: <p>The following content attributes must not be specified and do not
17197: apply to the element:
17198: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17199: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17200: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17201: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17202: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17203: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17204: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17205: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17206: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17207: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17208: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17209: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17210: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
17211: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
17212: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17213:
17214: <p>The following IDL attributes and methods do not apply to the
17215: element:
17216: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17217: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17218: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
17219: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
17220: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17221: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17222:
17223: </div><h6 id="telephone-state"><span class="secno">4.10.7.1.3 </span><dfn role="button" tabindex="0" aria-haspopup="true">Telephone</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17224: for editing a telephone number given in the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17225: specified, must have a value that contains no U+000A LINE FEED (LF)
17226: or U+000D CARRIAGE RETURN (CR) characters.</p><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
17227: particular syntax. This is intentional; in practice, telephone
17228: number fields tend to be free-form fields, because there are a wide
17229: variety of valid phone numbers. Systems that need to enforce a
17230: 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
17231: to hook into the client-side validation mechanism.</p><div class="bookkeeping">
17232:
17233: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17234: attributes, IDL attributes, and methods apply to the element:
17235: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17236: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17237: <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17238: <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17239: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17240: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17241: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17242: <code title="attr-input-size"><a href="#attr-input-size">size</a></code> content attributes;
17243: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17244: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
17245: <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17246: <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17247: <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
17248: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes;
17249: <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17250: <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17251:
17252: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17253: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17254:
17255: <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>
17256:
17257: <p>The following content attributes must not be specified and do not
17258: apply to the element:
17259: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17260: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17261: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17262: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17263: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17264: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17265: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17266: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17267: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17268: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17269: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17270: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17271: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17272: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
17273: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
17274: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17275:
17276: <p>The following IDL attributes and methods do not apply to the
17277: element:
17278: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17279: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17280: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
17281: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
17282: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17283: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17284:
17285: </div><h6 id="url-state"><span class="secno">4.10.7.1.4 </span><dfn role="button" tabindex="0" aria-haspopup="true">URL</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17286: for editing a single <a href="#absolute-url">absolute URL</a> given in the
17287: element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17288: specified and not empty, must have a value that is a <a href="#valid-url-potentially-surrounded-by-spaces">valid URL
17289: potentially surrounded by spaces</a> that is also an
17290: <a href="#absolute-url">absolute URL</a>.</p><div class="bookkeeping">
17291:
17292: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17293: attributes, IDL attributes, and methods apply to the element:
17294: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17295: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17296: <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17297: <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17298: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17299: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17300: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17301: <code title="attr-input-size"><a href="#attr-input-size">size</a></code> content attributes;
17302: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17303: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
17304: <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17305: <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17306: <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
17307: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes;
17308: <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17309: <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17310:
17311: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17312: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17313:
17314: <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>
17315:
17316: <p>The following content attributes must not be specified and do not
17317: apply to the element:
17318: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17319: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17320: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17321: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17322: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17323: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17324: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17325: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17326: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17327: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17328: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17329: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17330: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17331: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
17332: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
17333: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17334:
17335: <p>The following IDL attributes and methods do not apply to the
17336: element:
17337: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17338: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17339: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
17340: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
17341: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17342: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17343:
17344: </div><div class="example">
17345:
17346: <p>If a document contained the following markup:</p>
17347:
17348: <pre><input type="url" name="location" list="urls">
17349: <datalist id="urls">
17350: <option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045">
17351: <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
17352: <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
17353: <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
17354: <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
17355: <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
17356: </datalist>
17357: </pre>
17358:
17359: <p>...and the user had typed "<kbd>www.w3</kbd>", and the user
17360: agent had also found that the user had visited
17361: <code>http://www.w3.org/Consortium/#membership</code> and
17362: <code>http://www.w3.org/TR/XForms/</code> in the recent past, then
17363: the rendering might look like this:</p>
17364:
17365: <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 URLs 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.' height="134" src="http://dev.w3.org/html5/spec/images/sample-url.png" width="472"></p>
17366:
17367: <p>The first four URLs in this sample consist of the four URLs in
17368: the author-specified list that match the text the user has entered,
17369: sorted in some UA-defined manner (maybe by how frequently the user
17370: refers to those URLs). Note how the UA is using the knowledge that
17371: the values are URLs to allow the user to omit the scheme part and
17372: perform intelligent matching on the domain name.</p>
17373:
17374: <p>The last two URLs (and probably many more, given the scrollbar's
17375: indications of more values being available) are the matches from
17376: the user agent's session history data. This data is not made
17377: available to the page DOM. In this particular case, the UA has no
17378: titles to provide for those values.</p>
17379:
17380: </div><h6 id="e-mail-state"><span class="secno">4.10.7.1.5 </span><dfn role="button" tabindex="0" aria-haspopup="true">E-mail</dfn> state</h6><p>How the <a href="#e-mail-state" title="attr-input-type-email">E-mail</a> state
17381: operates depends on whether the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute is specified
17382: or not.</p><dl class="switch"><dt>When the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>
17383: attribute is not specified on the element</dt>
17384:
17385: <dd>
17386:
17387: <p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a
17388: control for editing an e-mail address given in the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p>
17389:
17390:
17391:
17392: <p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17393: specified and not empty, must have a value that is a single
17394: <a href="#valid-e-mail-address">valid e-mail address</a>.</p>
17395:
17396:
17397:
17398: </dd>
17399:
17400: <dt>When the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>
17401: attribute <em>is</em> specified on the element</dt>
17402:
17403: <dd>
17404:
17405:
17406:
17407: <p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a
17408: control for adding, removing, and editing the e-mail addresses
17409: given in the element's <a href="#concept-fe-values" title="concept-fe-values">value<em>s</em></a>.</p>
17410:
17411:
17412:
17413: <p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17414: specified, must have a value that is a <a href="#valid-e-mail-address-list">valid e-mail address
17415: list</a>.</p>
17416:
17417:
17418:
17419: </dd>
17420:
17421: </dl><p>A <dfn id="valid-e-mail-address" role="button" tabindex="0" aria-haspopup="true">valid e-mail address</dfn> is a string that matches the
17422: ABNF production <code title="">1*( atext / "." ) "@" ldh-str *( "." ldh-str )</code>
17423: where <code title="">atext</code> is defined in <a href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322
17424: section 3.2.3</a>, and <code title="">ldh-str</code> is defined in
17425: <a href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034
17426: section 3.5</a>. <a href="#refsABNF">[ABNF]</a> <a href="#refsRFC5322">[RFC5322]</a> <a href="#refsRFC1034">[RFC1034]</a></p><p class="note">This requirement is a <a href="#willful-violation">willful violation</a>
17427: of RFC 5322, which defines a syntax for e-mail addresses that is
17428: simultaneously too strict (before the "@" character), too vague
1.598 mike 17429: (after the "@" character), and too lax (allowing comments,
17430: whitespace characters, and quoted strings in manners unfamiliar to
17431: most users) to be of practical use here.</p><p>A <dfn id="valid-e-mail-address-list" role="button" tabindex="0" aria-haspopup="true">valid e-mail address list</dfn> is a <a href="#set-of-comma-separated-tokens">set of
1.545 mike 17432: comma-separated tokens</a>, where each token is itself a
17433: <a href="#valid-e-mail-address">valid e-mail address</a>. <span class="impl">To obtain the
17434: list of tokens from a <a href="#valid-e-mail-address-list">valid e-mail address list</a>, and
17435: implementation must <a href="#split-a-string-on-commas" title="split a string on commas">split the
17436: string on commas</a>.</span></p><div class="bookkeeping">
17437:
17438: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17439: attributes, IDL attributes, and methods apply to the element:
17440: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17441: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17442: <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17443: <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17444: <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17445: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17446: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17447: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17448: <code title="attr-input-size"><a href="#attr-input-size">size</a></code> content attributes;
17449: <code title="dom-input-list"><a href="#dom-input-list">list</a></code> and
17450: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
17451:
17452: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17453: attributes, IDL attributes, and methods apply to the element when
17454: the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute is
17455: not specified:
17456: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attribute.</p>
17457:
17458: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17459: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17460:
17461: <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>
17462:
17463: <p>The following content attributes must not be specified and do not
17464: apply to the element:
17465: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17466: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17467: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17468: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17469: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17470: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17471: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17472: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17473: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17474: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17475: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17476: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17477: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
17478: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
17479: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17480:
17481: <p>The following IDL attributes and methods do not apply to the
17482: element:
17483: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17484: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17485: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17486: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17487: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
17488: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
17489: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
17490: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
17491: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
17492: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17493: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17494:
17495: </div><h6 id="password-state"><span class="secno">4.10.7.1.6 </span><dfn role="button" tabindex="0" aria-haspopup="true">Password</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a one line
17496: plain text edit control for the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>. The user agent should obscure
17497: the value so that people other than the user cannot see it.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17498: specified, must have a value that contains no U+000A LINE FEED (LF)
17499: or U+000D CARRIAGE RETURN (CR) characters.</p><div class="bookkeeping">
17500:
17501: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17502: attributes, IDL attributes, and methods apply to the element:
17503: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17504: <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17505: <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17506: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17507: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17508: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17509: <code title="attr-input-size"><a href="#attr-input-size">size</a></code> content attributes;
17510: <code title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17511: <code title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17512: <code title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
17513: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes;
17514: <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>, and
17515: <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17516:
17517: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17518: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17519:
17520: <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>
17521:
17522: <p>The following content attributes must not be specified and do not
17523: apply to the element:
17524: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17525: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17526: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17527: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17528: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17529: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17530: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17531: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17532: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17533: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17534: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17535: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17536: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17537: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17538: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
17539: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
17540: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17541:
17542: <p>The following IDL attributes and methods do not apply to the
17543: element:
17544: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17545: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17546: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17547: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
17548: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
17549: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
17550: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17551: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17552:
17553: </div><h6 id="date-and-time-state"><span class="secno">4.10.7.1.7 </span><dfn role="button" tabindex="0" aria-haspopup="true">Date and Time</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17554: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
17555: specific <a href="#concept-datetime" title="concept-datetime">global date and
17556: time</a>. <span class="impl">User agents may display the date and
17557: time in whatever time zone is appropriate for the user.</span></p><p class="note">The format shown to the user is independent of the
17558: format used for form submission. Browsers are encouraged to use user
17559: interfaces that present dates and times according to the conventions
17560: of the user's preferred locale.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17561: specified and not empty, must have a value that is a <a href="#valid-global-date-and-time-string">valid
17562: global date and time string</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
17563: specified, must have a value that is a <a href="#valid-global-date-and-time-string">valid global date and
17564: time string</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
17565: attribute, if specified, must have a value that is a <a href="#valid-global-date-and-time-string">valid
17566: global date and time string</a>.</p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute is
17567: expressed in seconds. <span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1000
17568: (which converts the seconds to milliseconds, as used in the other
17569: algorithms).</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> is 60
17570: seconds.</p><div class="bookkeeping">
17571:
17572: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17573: attributes, IDL attributes, and methods apply to the element:
17574: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17575: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17576: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17577: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17578: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17579: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17580: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
17581: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17582: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
17583: <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>,
17584: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
17585: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
17586: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17587: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17588:
17589: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17590: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17591:
17592: <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>
17593:
17594: <p>The following content attributes must not be specified and do not
17595: apply to the element:
17596: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17597: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17598: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17599: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17600: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17601: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17602: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17603: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17604: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17605: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17606: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17607: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17608: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17609: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17610: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17611: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
17612: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17613:
17614: <p>The following IDL attributes and methods do not apply to the
17615: element:
17616: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17617: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17618: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17619: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
17620: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
17621: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17622: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17623:
17624: </div><div class="example">
17625:
17626: <p>The following fragment shows part of a calendar application. A
17627: user can specify a date and time for a meeting (in his local time
17628: zone, probably, though the user agent can allow the user to change
17629: that), and since the submitted data includes the time-zone offset,
17630: the application can ensure that the meeting is shown at the correct
17631: time regardless of the time zones used by all the participants.</p>
17632:
17633: <pre><fieldset>
17634: <legend>Add Meeting</legend>
17635: <p><label>Meeting name: <input type=text name="meeting.label"></label>
17636: <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
17637: </fieldset></pre>
17638:
17639: <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
17640: instead, the calendar application would have also had to explicitly
17641: determine which time zone the user intended.</p>
17642:
17643: </div><h6 id="date-state"><span class="secno">4.10.7.1.8 </span><dfn role="button" tabindex="0" aria-haspopup="true">Date</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17644: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
17645: specific <a href="#concept-date" title="concept-date">date</a>.</p><p class="note">The format shown to the user is independent of the
17646: format used for form submission. Browsers are encouraged to use user
17647: interfaces that present dates according to the conventions of the
17648: user's preferred locale.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17649: specified and not empty, must have a value that is a <a href="#valid-date-string">valid
17650: date string</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
17651: specified, must have a value that is a <a href="#valid-date-string">valid date
17652: string</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
17653: attribute, if specified, must have a value that is a <a href="#valid-date-string">valid
17654: date string</a>.</p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute is
17655: expressed in days. <span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
17656: 86,400,000 (which converts the days to milliseconds, as used in the
17657: other algorithms).</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> is 1 day.</p><div class="bookkeeping">
17658:
17659: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17660: attributes, IDL attributes, and methods apply to the element:
17661: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17662: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17663: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17664: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17665: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17666: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17667: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
17668: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17669: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
17670: <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>,
17671: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
17672: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
17673: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17674: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17675:
17676: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17677: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17678:
17679: <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>
17680:
17681: <p>The following content attributes must not be specified and do not
17682: apply to the element:
17683: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17684: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17685: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17686: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17687: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17688: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17689: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17690: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17691: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17692: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17693: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17694: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17695: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17696: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17697: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17698: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
17699: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17700:
17701: <p>The following IDL attributes and methods do not apply to the
17702: element:
17703: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17704: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17705: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
17706: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
17707: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17708: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17709:
17710: </div><h6 id="month-state"><span class="secno">4.10.7.1.9 </span><dfn role="button" tabindex="0" aria-haspopup="true">Month</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17711: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
17712: specific <a href="#concept-month" title="concept-month">month</a>.</p><p class="note">The format shown to the user is independent of the
17713: format used for form submission. Browsers are encouraged to use user
17714: interfaces that present months according to the conventions of the
17715: user's preferred locale.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17716: specified and not empty, must have a value that is a <a href="#valid-month-string">valid
17717: month string</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
17718: specified, must have a value that is a <a href="#valid-month-string">valid month
17719: string</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
17720: attribute, if specified, must have a value that is a <a href="#valid-month-string">valid
17721: month string</a>.</p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute is
17722: expressed in months. <span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1
17723: (there is no conversion needed as the algorithms use months).</span>
17724: The <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> is
17725: 1 month.</p><div class="bookkeeping">
17726:
17727: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17728: attributes, IDL attributes, and methods apply to the element:
17729: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17730: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17731: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17732: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17733: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17734: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17735: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
17736: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17737: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
17738: <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>,
17739: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
17740: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
17741: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17742: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17743:
17744: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17745: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17746:
17747: <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>
17748:
17749: <p>The following content attributes must not be specified and do not
17750: apply to the element:
17751: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17752: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17753: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17754: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17755: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17756: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17757: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17758: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17759: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17760: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17761: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17762: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17763: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17764: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17765: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17766: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
17767: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17768:
17769: <p>The following IDL attributes and methods do not apply to the
17770: element:
17771: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17772: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17773: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17774: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
17775: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
17776: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17777: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17778:
17779: </div><h6 id="week-state"><span class="secno">4.10.7.1.10 </span><dfn role="button" tabindex="0" aria-haspopup="true">Week</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17780: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
17781: specific <a href="#concept-week" title="concept-week">week</a>.</p><p class="note">The format shown to the user is independent of the
17782: format used for form submission. Browsers are encouraged to use user
17783: interfaces that present weeks according to the conventions of the
17784: user's preferred locale.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17785: specified and not empty, must have a value that is a <a href="#valid-week-string">valid
17786: week string</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
17787: specified, must have a value that is a <a href="#valid-week-string">valid week
17788: string</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
17789: attribute, if specified, must have a value that is a <a href="#valid-week-string">valid
17790: week string</a>.</p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute is
17791: expressed in weeks. <span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
17792: 604,800,000 (which converts the weeks to milliseconds, as used in
17793: the other algorithms).</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> is 1
17794: week. <span class="impl">The <a href="#concept-input-step-default-base" title="concept-input-step-default-base">default step base</a> is
17795: −259,200,000 (the start of week 1970-W01).</span></p><div class="bookkeeping">
17796:
17797: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17798: attributes, IDL attributes, and methods apply to the element:
17799: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17800: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17801: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17802: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17803: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17804: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17805: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
17806: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17807: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
17808: <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>,
17809: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
17810: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
17811: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17812: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17813:
17814: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17815: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17816:
17817: <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>
17818:
17819: <p>The following content attributes must not be specified and do not
17820: apply to the element:
17821: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17822: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17823: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17824: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17825: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17826: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17827: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17828: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17829: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17830: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17831: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17832: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17833: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17834: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17835: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17836: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
17837: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17838:
17839: <p>The following IDL attributes and methods do not apply to the
17840: element:
17841: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17842: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17843: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17844: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
17845: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
17846: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17847: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17848:
17849: </div><h6 id="time-state"><span class="secno">4.10.7.1.11 </span><dfn role="button" tabindex="0" aria-haspopup="true">Time</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17850: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
17851: specific <a href="#concept-time" title="concept-time">time</a>.</p><p class="note">The format shown to the user is independent of the
17852: format used for form submission. Browsers are encouraged to use user
17853: interfaces that present times according to the conventions of the
17854: user's preferred locale.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17855: specified and not empty, must have a value that is a <a href="#valid-time-string">valid
17856: time string</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
17857: specified, must have a value that is a <a href="#valid-time-string">valid time
17858: string</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
17859: attribute, if specified, must have a value that is a <a href="#valid-time-string">valid
17860: time string</a>.</p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute is
17861: expressed in seconds. <span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1000
17862: (which converts the seconds to milliseconds, as used in the other
17863: algorithms).</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> is 60
17864: seconds.</p><div class="bookkeeping">
17865:
17866: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17867: attributes, IDL attributes, and methods apply to the element:
17868: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17869: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17870: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17871: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17872: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17873: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17874: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
17875: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17876: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
17877: <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>,
17878: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
17879: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
17880: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17881: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17882:
17883: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17884: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17885:
17886: <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>
17887:
17888: <p>The following content attributes must not be specified and do not
17889: apply to the element:
17890: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17891: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17892: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17893: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17894: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17895: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17896: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17897: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17898: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17899: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17900: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17901: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17902: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17903: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17904: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17905: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
17906: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17907:
17908: <p>The following IDL attributes and methods do not apply to the
17909: element:
17910: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17911: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17912: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17913: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
17914: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code> IDL attributes;
17915: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17916: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17917:
17918: </div><h6 id="local-date-and-time-state"><span class="secno">4.10.7.1.12 </span><dfn role="button" tabindex="0" aria-haspopup="true">Local Date and Time</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
17919: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
17920: <a href="#concept-datetime-local" title="concept-datetime-local">local date and time</a>,
17921: with no time-zone offset information.</p><p class="note">The format shown to the user is independent of the
17922: format used for form submission. Browsers are encouraged to use user
17923: interfaces that present dates and times according to the conventions
17924: of the user's preferred locale.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
17925: specified and not empty, must have a value that is a <a href="#valid-local-date-and-time-string">valid
17926: local date and time string</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
17927: specified, must have a value that is a <a href="#valid-local-date-and-time-string">valid local date and
17928: time string</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
17929: attribute, if specified, must have a value that is a <a href="#valid-local-date-and-time-string">valid
17930: local date and time string</a>.</p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute is
17931: expressed in seconds. <span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is 1000
17932: (which converts the seconds to milliseconds, as used in the other
17933: algorithms).</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default step</a> is 60
17934: seconds.</p><div class="bookkeeping">
17935:
17936: <p>The following common <code><a href="#the-input-element">input</a></code> element content
17937: attributes, IDL attributes, and methods apply to the element:
17938: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
17939: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
17940: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
17941: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
17942: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
17943: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
17944: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
17945: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
17946: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
17947: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
17948: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
17949: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
17950: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
17951:
17952: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
17953: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
17954:
17955: <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>
17956:
17957: <p>The following content attributes must not be specified and do not
17958: apply to the element:
17959: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
17960: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
17961: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
17962: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
17963: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
17964: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
17965: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
17966: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
17967: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
17968: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
17969: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
17970: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
17971: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
17972: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
17973: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
17974: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
17975: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
17976:
17977: <p>The following IDL attributes and methods do not apply to the
17978: element:
17979: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
17980: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
17981: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
17982: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
17983: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
17984: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
17985: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
17986: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
17987:
17988: </div><div class="example">
17989:
17990: <p>The following example shows part of a flight booking
17991: application. The application uses an <code><a href="#the-input-element">input</a></code> element
17992: with its <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute set to
17993: <code title="attr-input-type-datetime-local"><a href="#local-date-and-time-state">datetime-local</a></code>,
17994: and it then interprets the given date and time in the time zone of
17995: the selected airport.</p>
17996:
17997: <pre><fieldset>
17998: <legend>Destination</legend>
17999: <p><label>Airport: <input type=text name=to list=airports></label></p>
18000: <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p>
18001: </fieldset>
18002: <datalist id=airports>
18003: <option value=ATL label="Atlanta">
18004: <option value=MEM label="Memphis">
18005: <option value=LHR label="London Heathrow">
18006: <option value=LAX label="Los Angeles">
18007: <option value=FRA label="Frankfurt">
18008: </datalist></pre>
18009:
18010: <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
18011: user would have to work out the time-zone conversions himself,
18012: which is clearly not a good user experience!</p>
18013:
18014: </div><h6 id="number-state"><span class="secno">4.10.7.1.13 </span><dfn role="button" tabindex="0" aria-haspopup="true">Number</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
18015: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
18016: number.</p><p class="note">This specification does not define what user
18017: interface user agents are to use; user agent vendors are encouraged
18018: to consider what would best serve their users' needs. For example, a
18019: user agent in Persian or Arabic markets might support Persian and
18020: Arabic numeric input (converting it to the format required for
18021: submission as described above). </p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
18022: specified and not empty, must have a value that is a <a href="#valid-floating-point-number">valid
18023: floating point number</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
18024: specified, must have a value that is a <a href="#valid-floating-point-number">valid floating point
18025: number</a>. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
18026: attribute, if specified, must have a value that is a <a href="#valid-floating-point-number">valid
18027: floating point number</a>.</p><p><span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
18028: 1.</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default
18029: 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
18030: value).</p><div class="bookkeeping">
18031:
18032: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18033: attributes, IDL attributes, and methods apply to the element:
18034: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18035: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18036: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18037: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18038: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18039: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18040: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>, and
18041: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
18042: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18043: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
18044: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
18045: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
18046: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
18047: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18048:
18049: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18050: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
18051:
18052: <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>
18053:
18054: <p>The following content attributes must not be specified and do not
18055: apply to the element:
18056: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18057: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18058: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18059: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18060: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18061: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18062: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18063: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18064: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18065: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18066: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18067: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18068: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18069: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18070: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
18071: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18072:
18073: <p>The following IDL attributes and methods do not apply to the
18074: element:
18075: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18076: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18077: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18078: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18079: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
18080: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
18081: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
18082: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
18083:
18084: </div><h6 id="range-state"><span class="secno">4.10.7.1.14 </span><dfn role="button" tabindex="0" aria-haspopup="true">Range</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
18085: for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
18086: number, but with the caveat that the exact value is not important,
18087: letting UAs provide a simpler interface than they do for the <a href="#number-state" title="attr-input-type-number">Number</a> state.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
18088: specified, must have a value that is a <a href="#valid-floating-point-number">valid floating point
18089: number</a>.</p><p>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute, if
18090: specified, must have a value that is a <a href="#valid-floating-point-number">valid floating point
18091: number</a>. The <a href="#concept-input-min-default" title="concept-input-min-default">default
18092: minimum</a> is 0. The <code title="attr-input-max"><a href="#attr-input-max">max</a></code>
18093: attribute, if specified, must have a value that is a <a href="#valid-floating-point-number">valid
18094: floating point number</a>. The <a href="#concept-input-max-default" title="concept-input-max-default">default maximum</a> is 100.</p><p>The <dfn id="concept-input-value-default-range" role="button" tabindex="0" aria-haspopup="true">default
18095: value</dfn> is the <a href="#concept-input-min" title="concept-input-min">minimum</a>
18096: 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
18097: the <a href="#concept-input-min" title="concept-input-min">minimum</a>.</p><p><span class="impl">The <a href="#concept-input-step-scale" title="concept-input-step-scale">step scale factor</a> is
18098: 1.</span> The <a href="#concept-input-step-default" title="concept-input-step-default">default
18099: 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
18100: value).</p><div class="bookkeeping">
18101:
18102: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18103: attributes, IDL attributes, and methods apply to the element:
18104: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18105: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18106: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18107: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>, and
18108: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> content attributes;
18109: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18110: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
18111: <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
18112: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
18113: <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
18114: <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18115:
18116: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18117: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
18118:
18119: <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>
18120:
18121: <p>The following content attributes must not be specified and do not
18122: apply to the element:
18123: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18124: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18125: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18126: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18127: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18128: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18129: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18130: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18131: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18132: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18133: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18134: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18135: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18136: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18137: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18138: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
18139: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18140: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
18141: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18142:
18143: <p>The following IDL attributes and methods do not apply to the
18144: element:
18145: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18146: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18147: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18148: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18149: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>, and
18150: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
18151: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
18152: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
18153:
18154: </div><div class="example">
18155:
18156: <p>Here is an example of a range control using an autocomplete list
18157: with the <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute. This
18158: could be useful if there are values along the full range of the
18159: control that are especially important, such as preconfigured light
18160: levels or typical speed limits in a range control used as a speed
18161: control. The following markup fragment:</p>
18162:
18163: <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
18164: <datalist id="powers">
18165: <option value="0">
18166: <option value="-30">
18167: <option value="30">
18168: <option value="+50">
18169: </datalist>
18170: </pre>
18171:
18172: <p>...with the following style sheet applied:</p>
18173:
18174: <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
18175:
18176: <p>...might render as:</p>
18177:
18178: <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." height="75" src="http://dev.w3.org/html5/spec/images/sample-range.png" width="49"></p><p>Note how the UA determined the orientation of the control from
18179: the ratio of the style-sheet-specified height and width properties.
18180: The colors were similiarly derived from the style sheet. The tick
18181: marks, however, were derived from the markup. In particular, the
18182: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute has not
18183: affected the placement of tick marks, the UA deciding to only use
18184: the author-specified completion values and then adding longer tick
18185: marks at the extremes.</p>
18186:
18187: <p>Note also how the invalid value <code title="">+50</code> was
18188: completely ignored.</p>
18189:
18190: </div><div class="example">
18191:
18192: <p>For another example, consider the following markup fragment:</p>
18193:
18194: <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
18195:
18196: <p>A user agent could display in a variety of ways, for instance:</p>
18197:
18198: <p><img alt="As a dial." height="57" src="http://dev.w3.org/html5/spec/images/sample-range-2a.png" width="231"></p>
18199:
18200: <p>Or, alternatively, for instance:</p>
18201:
18202: <p><img alt="As a long horizontal slider with tick marks." height="56" src="http://dev.w3.org/html5/spec/images/sample-range-2b.png" width="445"></p>
18203:
18204: <p>The user agent could pick which one to display based on the
18205: dimensions given in the style sheet. This would allow it to
18206: maintain the same resolution for the tick marks, despite the
18207: differences in width.</p>
18208:
18209: </div><h6 id="color-state"><span class="secno">4.10.7.1.15 </span><dfn role="button" tabindex="0" aria-haspopup="true">Color</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a color
18210: well control, for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
18211: <a href="#simple-color">simple color</a>.</p><p>The <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, if
18212: specified and not empty, must have a value that is a <a href="#valid-simple-color">valid
18213: simple color</a>.</p><div class="bookkeeping">
18214:
18215: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18216: attributes, IDL attributes, and methods apply to the element:
18217: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code> and
18218: <code title="attr-input-list"><a href="#attr-input-list">list</a></code> content attributes;
18219: <code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18220: <code title="dom-input-value"><a href="#dom-input-value">value</a></code>, and
18221: <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes.</p>
18222:
18223: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18224: in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
18225:
18226: <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>
18227:
18228: <p>The following content attributes must not be specified and do not
18229: apply to the element:
18230: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18231: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18232: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18233: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18234: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18235: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18236: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18237: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18238: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18239: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
1.556 mike 18240: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
1.545 mike 18241: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18242: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18243: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18244: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18245: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18246: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18247: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
18248: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18249: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18250: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18251: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18252:
18253: <p>The following IDL attributes and methods do not apply to the
18254: element:
18255: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18256: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18257: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18258: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18259: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18260: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18261: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18262: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18263: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18264: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18265: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18266:
18267: </div><h6 id="checkbox-state"><span class="secno">4.10.7.1.16 </span><dfn role="button" tabindex="0" aria-haspopup="true">Checkbox</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a
18268: two-state control that represents the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> state. If the
18269: element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> state
18270: is true, the control represents a positive selection, and if it is
18271: false, a negative selection. If the element's <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute
18272: is set to true, then the control's selection should be obscured as
18273: if the control was in a third, indeterminate, state.</p><p class="note">The control is never a true tri-state control, even
18274: if the element's <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute
18275: is set to true. The <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute
18276: only gives the appearance of a third state.</p><dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> [ = <var title="">value</var> ]</dt>
18277:
18278: <dd>
18279:
18280: <p>When set, overrides the rendering of <a href="#checkbox-state" title="attr-input-type-checkbox">checkbox</a> controls so that
18281: the current value is not visible.</p>
18282:
18283: </dd>
18284:
18285: </dl><div class="bookkeeping">
18286:
18287: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18288: attributes and IDL attributes apply to the element:
18289: <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>, and
18290: <code title="attr-input-required"><a href="#attr-input-required">required</a></code> content attributes;
18291: <code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> and
18292: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
18293:
18294: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18295: in mode <a href="#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>.</p>
18296:
18297: <p>The <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies.</p>
18298:
18299: <p>The following content attributes must not be specified and do not
18300: apply to the element:
18301: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18302: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18303: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18304: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18305: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18306: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18307: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18308: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18309: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18310: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18311: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18312: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18313: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18314: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18315: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18316: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18317: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18318: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18319: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18320: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18321: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18322: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18323:
18324: <p>The following IDL attributes and methods do not apply to the
18325: element:
18326: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18327: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18328: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18329: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18330: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18331: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18332: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18333: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18334: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18335: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18336: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18337: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18338:
18339: <p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> event does not apply.</p>
18340:
18341: </div><h6 id="radio-button-state"><span class="secno">4.10.7.1.17 </span><dfn role="button" tabindex="0" aria-haspopup="true">Radio Button</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
18342: that, when used in conjunction with other <code><a href="#the-input-element">input</a></code>
18343: elements, forms a <i><a href="#radio-button-group">radio button group</a></i> in which only one
18344: control can have its <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> state set to true. If
18345: the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a>
18346: state is true, the control represents the selected control in the
18347: group, and if it is false, it indicates a control in the group that
18348: is not selected.</p><p>The <dfn id="radio-button-group" role="button" tabindex="0" aria-haspopup="true"><i>radio button group</i></dfn> that contains an
18349: <code><a href="#the-input-element">input</a></code> element <var title="">a</var> also contains all
18350: the other <code><a href="#the-input-element">input</a></code> elements <var title="">b</var> that
18351: fulfill all of the following conditions:</p><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>
18352:
18353: <li>Either <var title="">a</var> and <var title="">b</var> have the
18354: same <a href="#form-owner">form owner</a>, or they both have no <a href="#form-owner">form
18355: owner</a>.</li>
18356:
18357: <li>They both have a <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
18358: attribute, their <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attributes
18359: are not empty, 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 <a href="#compatibility-caseless">compatibility
18360: caseless</a> match for the value of <var title="">b</var>'s
18361: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute.</li>
18362:
18363: </ul><p>A document must not contain an <code><a href="#the-input-element">input</a></code> element whose
18364: <i><a href="#radio-button-group">radio button group</a></i> contains only that element.</p><p class="note">If none of the radio buttons in a <a href="#radio-button-group">radio button
18365: group</a> are checked when they are inserted into the document,
18366: then they will all be initially unchecked in the interface, until
18367: such time as one of them is checked (either by the user or by
18368: script).</p><div class="bookkeeping">
18369:
18370: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18371: attributes and IDL attributes apply to the element:
18372: <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code> and
18373: <code title="attr-input-required"><a href="#attr-input-required">required</a></code> content attributes;
18374: <code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> and
18375: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
18376:
18377: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18378: in mode <a href="#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>.</p>
18379:
18380: <p>The <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies.</p>
18381:
18382: <p>The following content attributes must not be specified and do not
18383: apply to the element:
18384: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18385: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18386: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18387: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18388: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18389: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18390: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18391: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18392: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18393: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18394: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18395: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18396: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18397: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18398: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18399: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18400: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18401: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18402: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18403: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18404: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18405: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18406:
18407: <p>The following IDL attributes and methods do not apply to the
18408: element:
18409: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18410: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18411: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18412: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18413: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18414: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18415: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18416: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18417: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18418: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18419: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18420: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18421:
18422: <p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> event does not apply.</p>
18423:
18424: </div><h6 id="file-upload-state"><span class="secno">4.10.7.1.18 </span><dfn role="button" tabindex="0" aria-haspopup="true">File Upload</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a list of
18425: <dfn id="concept-input-type-file-selected" role="button" tabindex="0" aria-haspopup="true">selected files</dfn>,
18426: each file consisting of a file name, a file type, and a file body
18427: (the contents of the file).</p><hr><p>The <dfn id="attr-input-accept" role="button" tabindex="0" aria-haspopup="true"><code>accept</code></dfn>
18428: attribute may be specified to provide user agents with a hint of
18429: what file types will be accepted.</p><p>If specified, the attribute must consist of a <a href="#set-of-comma-separated-tokens">set of
18430: comma-separated tokens</a>, each of which must be an <a href="#ascii-case-insensitive">ASCII
18431: case-insensitive</a> match for one of the following:</p><dl><dt>The string <code title="">audio/*</code></dt>
18432:
18433: <dd>Indicates that sound files are accepted.</dd>
18434:
18435: <dt>The string <code title="">video/*</code></dt>
18436:
18437: <dd>Indicates that video files are accepted.</dd>
18438:
18439: <dt>The string <code title="">image/*</code></dt>
18440:
18441: <dd>Indicates that image files are accepted.</dd>
18442:
18443: <dt>A <a href="#valid-mime-type-with-no-parameters">valid MIME type with no parameters</a></dt>
18444:
18445: <dd>Indicates that files of the specified type are accepted.</dd>
18446:
18447: </dl><p>The tokens must not be <a href="#ascii-case-insensitive">ASCII case-insensitive</a>
18448: matches for any of the other tokens (i.e. duplicates are not
18449: allowed). <span class="impl">To obtain the list of tokens from the
18450: attribute, the user agent must <a href="#split-a-string-on-commas" title="split a string on
18451: commas">split the attribute value on commas</a>.</span></p><p>User agents may use the value of this attribute to display a more
18452: appropriate user interface than a generic file picker. For instance,
18453: given the value <code title="">image/*</code>, a user agent could
18454: offer the user the option of using a local camera or selecting a
18455: photograph from their photo collection; given the value <code title="">audio/*</code>, a user agent could offer the user the
18456: option of recording a clip using a headset microphone.</p><div class="example" id="fakepath-srsly">
18457:
18458: <p>For historical reasons, the <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute prefixes the
18459: filename with the string "<code title="">C:\fakepath\</code>". Some
18460: legacy user agents actually included the full path (which was a
18461: security vulnerability). As a result of this, obtaining the
18462: filename from the <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL
18463: attribute in a backwards-compatible way is non-trivial. The
18464: following function extracts the filename in a suitably compatible
18465: manner:</p>
18466:
18467: <pre>function extractFilename(path) {
18468: if (path.substr(0, 12) == "C:\\fakepath\\")
18469: return path.substr(12); // modern browser
18470: var x;
18471: x = path.lastIndexOf('/');
18472: if (x >= 0) // Unix-based path
18473: return path.substr(x+1);
18474: x = path.lastIndexOf('\\');
18475: if (x >= 0) // Windows-based path
18476: return path.substr(x+1);
18477: return path; // just the filename
18478: }</pre>
18479:
18480: <p>This can be used as follows:</p>
18481:
18482: <pre><p><input type=file name=image onchange="updateFilename(this.value)"></p>
18483: <p>The name of the file you picked is: <span id="filename">(none)</span></p>
18484: <script>
18485: function updateFilename(path) {
18486: var name = extractFilename(path);
18487: document.getElementById('filename').textContent = name;
18488: }
18489: </script></pre>
18490:
18491:
18492:
18493: </div><hr><div class="bookkeeping">
18494:
18495: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18496: attributes apply to the element:
18497:
18498: </p><p>The following common <code><a href="#the-input-element">input</a></code> element content
18499: attributes and IDL attributes apply to the element:
18500: <code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18501: <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>, and
18502: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>;
18503: <code title="dom-input-files"><a href="#dom-input-files">files</a></code> and
18504: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
18505:
18506: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18507: in mode <a href="#dom-input-value-filename" title="dom-input-value-filename">filename</a>.</p>
18508:
18509: <p>The <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies.</p>
18510:
18511: <p>The following content attributes must not be specified and do not
18512: apply to the element:
18513: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18514: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18515: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18516: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18517: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18518: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18519: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18520: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18521: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18522: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18523: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18524: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18525: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18526: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18527: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18528: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18529: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18530: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18531: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18532: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18533: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18534:
18535: <p>The element's <code title="attr-input-value"><a href="#attr-input-value">value</a></code>
18536: attribute must be omitted.</p>
18537:
18538: <p>The following IDL attributes and methods do not apply to the
18539: element:
18540: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18541: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18542: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18543: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18544: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18545: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18546: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18547: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18548: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18549: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18550: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18551: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18552:
18553: <p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> event does not apply.</p>
18554:
18555: </div><h6 id="submit-button-state"><span class="secno">4.10.7.1.19 </span><dfn role="button" tabindex="0" aria-haspopup="true">Submit Button</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a button
18556: that, when activated, submits the form. <span class="impl">If the
18557: element has a <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute,
18558: the button's label must be the value of that attribute; otherwise,
18559: it must be an implementation-defined string that means "Submit" or
18560: 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><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
18561: for form submission</a>.</p><p class="note">The <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute can
18562: be used to make submit buttons that do not trigger the constraint
18563: validation.</p><div class="bookkeeping">
18564:
18565: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18566: attributes and IDL attributes apply to the element:
18567: <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18568: <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18569: <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18570: <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>, and
18571: <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> content attributes;
18572: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute.</p>
18573:
18574: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18575: in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
18576:
18577: <p>The following content attributes must not be specified and do not
18578: apply to the element:
18579: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18580: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18581: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18582: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18583: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18584: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18585: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18586: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18587: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18588: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18589: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18590: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18591: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18592: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18593: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
18594: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18595: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18596: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18597: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18598:
18599: <p>The following IDL attributes and methods do not apply to the
18600: element:
18601: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18602: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18603: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18604: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18605: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18606: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18607: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18608: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18609: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18610: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18611: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18612: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18613: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18614:
18615: <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>
18616:
18617: </div><h6 id="image-button-state"><span class="secno">4.10.7.1.20 </span><dfn role="button" tabindex="0" aria-haspopup="true">Image Button</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> either an
18618: image from which a user can select a coordinate and submit the form,
18619: or alternatively a button from which the user can submit the
18620: form. The element is a <a href="#concept-button" title="concept-button">button</a>,
18621: specifically a <a href="#concept-submit-button" title="concept-submit-button">submit
18622: button</a>.</p><p class="note">The coordinate is sent to the server <a href="#constructing-the-form-data-set" title="constructing the form data set">during form submission</a>
18623: by sending two entries for the element, derived from the name of the
18624: control but with "<code title="">.x</code>" and "<code title="">.y</code>" appended to the name with the <var title="">x</var> and <var title="">y</var> components of the
18625: coordinate respectively.</p><hr><p>The image is given by the <dfn id="attr-input-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> attribute. The <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute must be present, and
18626: must contain a <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
18627: spaces</a> referencing a non-interactive, optionally animated,
18628: image resource that is neither paged nor scripted.</p><p>The <dfn id="attr-input-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn> attribute
18629: provides the textual label for the alternative button for users and
18630: 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,
18631: and must contain a non-empty string.</p><p>The <code><a href="#the-input-element">input</a></code> element supports <a href="#dimension-attributes">dimension
18632: attributes</a>.</p><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
18633: for form submission</a>.</p><div class="bookkeeping">
18634:
18635: <p>The following common <code><a href="#the-input-element">input</a></code> element content
18636: attributes and IDL attributes apply to the element:
18637: <code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18638: <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18639: <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18640: <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18641: <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18642: <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18643: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18644: <code title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
18645: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code> content attributes;
18646: <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute.</p>
18647:
18648: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
18649: in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
18650:
18651: <p>The following content attributes must not be specified and do not
18652: apply to the element:
18653: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18654: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18655: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18656: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18657: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18658: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18659: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18660: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18661: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18662: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18663: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18664: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18665: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
18666: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>, and
18667: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>.</p>
18668:
18669: <p>The element's <code title="attr-input-value"><a href="#attr-input-value">value</a></code>
18670: attribute must be omitted.</p>
18671:
18672: <p>The following IDL attributes and methods do not apply to the
18673: element:
18674: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18675: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18676: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18677: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18678: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18679: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18680: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18681: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18682: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18683: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18684: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18685: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18686: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18687:
18688: <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>
18689:
18690: </div><p class="note">Many aspects of this state's behavior are similar to
18691: the behavior of the <code><a href="#the-img-element">img</a></code> element. Readers are encouraged
18692: to read that section, where many of the same requirements are
18693: described in more detail.</p><div class="example">
18694:
18695: <p>Take the following form:</p>
18696:
18697: <pre><form action="process.cgi">
18698: <input type=image src=map.png name=where>
18699: </form></pre>
18700:
18701: <p>If the user clicked on the image at coordinate (127,40) then the
18702: URL used to submit the form would be "<code title="">process.cgi?where.x=127&where.y=40</code>".</p>
18703:
18704: </div><h6 id="reset-button-state"><span class="secno">4.10.7.1.21 </span><dfn role="button" tabindex="0" aria-haspopup="true">Reset Button</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a button
18705: that, when activated, resets the form. <span class="impl">If the
18706: element has a <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute,
18707: the button's label must be the value of that attribute; otherwise,
18708: it must be an implementation-defined string that means "Reset" or
18709: some such.</span> The element is a <a href="#concept-button" title="concept-button">button</a>.</p><div class="bookkeeping">
18710:
18711: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute
18712: applies to this element and is in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
18713:
18714: <p>The following content attributes must not be specified and do not
18715: apply to the element:
18716: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18717: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18718: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18719: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18720: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18721: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18722: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18723: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18724: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18725: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18726: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18727: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18728: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18729: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18730: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18731: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18732: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18733: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18734: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18735: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
18736: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18737: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18738: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18739: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18740:
18741: <p>The following IDL attributes and methods do not apply to the
18742: element:
18743: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18744: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18745: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18746: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18747: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18748: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18749: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18750: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18751: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18752: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18753: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18754: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18755: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18756:
18757: <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>
18758:
18759: </div><h6 id="button-state"><span class="secno">4.10.7.1.22 </span><dfn role="button" tabindex="0" aria-haspopup="true">Button</dfn> state</h6><p>The <code><a href="#the-input-element">input</a></code> element <a href="#represents">represents</a> a button
18760: with no default behavior. A label for the button must be provided in
18761: the <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, though it
18762: may be the empty string. <span class="impl">If the element has a
18763: <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, the button's
18764: label must be the value of that attribute; otherwise, it must be the
18765: empty string.</span> The element is a <a href="#concept-button" title="concept-button">button</a>.</p><div class="bookkeeping">
18766:
18767: <p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute
18768: applies to this element and is in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
18769:
18770: <p>The following content attributes must not be specified and do not
18771: apply to the element:
18772: <code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
18773: <code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
18774: <code class="no-backref" title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>,
18775: <code class="no-backref" title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>,
18776: <code class="no-backref" title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>,
18777: <code class="no-backref" title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>,
18778: <code class="no-backref" title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>,
18779: <code class="no-backref" title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>,
18780: <code class="no-backref" title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>,
18781: <code class="no-backref" title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>,
18782: <code class="no-backref" title="attr-dim-height"><a href="#attr-dim-height">height</a></code>,
18783: <code class="no-backref" title="attr-input-list"><a href="#attr-input-list">list</a></code>,
18784: <code class="no-backref" title="attr-input-max"><a href="#attr-input-max">max</a></code>,
18785: <code class="no-backref" title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>,
18786: <code class="no-backref" title="attr-input-min"><a href="#attr-input-min">min</a></code>,
18787: <code class="no-backref" title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>,
18788: <code class="no-backref" title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>,
18789: <code class="no-backref" title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>,
18790: <code class="no-backref" title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>,
18791: <code class="no-backref" title="attr-input-required"><a href="#attr-input-required">required</a></code>,
18792: <code class="no-backref" title="attr-input-size"><a href="#attr-input-size">size</a></code>,
18793: <code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
18794: <code class="no-backref" title="attr-input-step"><a href="#attr-input-step">step</a></code>, and
18795: <code class="no-backref" title="attr-dim-width"><a href="#attr-dim-width">width</a></code>.</p>
18796:
18797: <p>The following IDL attributes and methods do not apply to the
18798: element:
18799: <code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
18800: <code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
18801: <code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
18802: <code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
18803: <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
18804: <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
18805: <code class="no-backref" title="dom-textarea/input-selectionDirection"><a href="#dom-textarea-input-selectiondirection">selectionDirection</a></code>,
18806: <code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
18807: <code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
18808: <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
18809: <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
18810: <code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
18811: <code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
18812:
18813: <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>
18814:
18815: </div><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><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><p>User agents sometimes have features for helping users fill forms
18816: in, for example prefilling the user's address based on earlier user
18817: input.</p><p>The <dfn id="attr-input-autocomplete" role="button" tabindex="0" aria-haspopup="true"><code>autocomplete</code></dfn>
18818: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The attribute has
18819: three states. The <code title="attr-input-autocomplete-on">on</code>
18820: keyword maps to the <dfn id="attr-input-autocomplete-on-state" role="button" tabindex="0" aria-haspopup="true">on</dfn> state, and the
18821: <code title="attr-input-autocomplete-off">off</code> keyword maps to
18822: the <dfn id="attr-input-autocomplete-off-state" role="button" tabindex="0" aria-haspopup="true">off</dfn>
18823: state. The attribute may also be omitted. The <i>missing value
18824: default</i> is the <dfn id="attr-input-autocomplete-default-state" role="button" tabindex="0" aria-haspopup="true">default</dfn>
18825: state.</p><p>The <a href="#attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</a>
18826: state indicates either that the control's input data is particularly
18827: sensitive (for example the activation code for a nuclear weapon); or
18828: that it is a value that will never be reused (for example a
18829: one-time-key for a bank login) and the user will therefore have to
18830: explicitly enter the data each time, instead of being able to rely
18831: on the UA to prefill the value for him; or that the document
18832: provides its own autocomplete mechanism and does not want the user
18833: agent to provide autocompletion values.</p><p>Conversely, the <a href="#attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</a> state indicates
18834: that the value is not particularly sensitive and the user can expect
18835: to be able to rely on his user agent to remember values he has
18836: entered for that control.</p><p>The <a href="#attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</a> state
18837: 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
18838: 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
18839: <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><div class="example">
18840:
18841: <p>Banks frequently do not want UAs to prefill login
18842: information:</p>
18843:
18844: <pre><p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
18845: <p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p></pre>
18846:
18847: </div><h6 id="the-dirname-attribute"><span class="secno">4.10.7.2.2 </span>The <code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code> attribute</h6><p>The <dfn id="attr-input-dirname" role="button" tabindex="0" aria-haspopup="true"><code>dirname</code></dfn>
18848: attribute, when it applies, is a <a href="#form-control-dirname-attribute">form control <code title="">dirname</code> attribute</a>.</p><div class="example">
18849:
18850: <p>In this example, a form contains a text field and a submission
18851: button:</p>
18852:
18853: <pre><form action="addcomment.cgi" method=post>
18854: <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
18855: <p><button name="mode" type=submit value="add">Post Comment</button></p>
18856: </form></pre>
18857:
18858: <p>When the user submits the form, the user agent includes three
18859: fields, one called "comment", one called "comment.dir", and one
18860: called "mode"; so if the user types "Hello", the submission body
18861: might be something like:</p>
18862:
18863: <pre>comment=Hello&<strong>comment.dir=ltr</strong>&mode=add</pre>
18864:
18865: <p>If the user manually switches to a right-to-left writing
18866: direction and enters "<span dir="rtl" lang="ar" title="">مرحبًا</span>", the
18867: submission body might be something like:</p>
18868:
18869: <pre>comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&<strong>comment.dir=rtl</strong>&mode=add</pre>
18870:
18871: </div><h6 id="the-list-attribute"><span class="secno">4.10.7.2.3 </span>The <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute</h6><p>The <dfn id="attr-input-list" role="button" tabindex="0" aria-haspopup="true"><code>list</code></dfn>
18872: attribute is used to identify an element that lists predefined
18873: options suggested to the user.</p><p>If present, its value must be the <a href="#concept-id" title="concept-id">ID</a> of a <code><a href="#the-datalist-element">datalist</a></code> element in
18874: the same document.</p><div class="example">
18875:
18876: <p>This URL field offers some suggestions.</p>
18877:
18878: <pre><label>Homepage: <input name=hp type=url list=hpurls></label>
18879: <datalist id=hpurls>
18880: <option value="http://www.google.com/" label="Google">
18881: <option value="http://www.reddit.com/" label="Reddit">
18882: </datalist></pre>
18883:
18884: <p>Other URLs from the user's history might show also; this is up
18885: to the user agent.</p>
18886:
18887: </div><div class="example">
18888:
18889: <p>This example demonstrates how to design a form that uses the
18890: autocompletion list feature while still degrading usefully in
18891: legacy user agents.</p>
18892:
18893: <p>If the autocompletion list is merely an aid, and is not
18894: important to the content, then simply using a <code><a href="#the-datalist-element">datalist</a></code>
18895: element with children <code><a href="#the-option-element">option</a></code> elements is enough. To
18896: prevent the values from being rendered in legacy user agents, they
18897: need to be placed inside the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute instead of
18898: inline.</p>
18899:
18900: <pre><p>
18901: <label>
18902: Enter a breed:
18903: <input type="text" name="breed" list="breeds">
18904: <datalist id="breeds">
18905: <option value="Abyssinian">
18906: <option value="Alpaca">
18907: <!-- ... -->
18908: </datalist>
18909: </label>
18910: </p></pre>
18911:
18912: <p>However, if the values need to be shown in legacy UAs, then
18913: fallback content can be placed inside the <code><a href="#the-datalist-element">datalist</a></code>
18914: element, as follows:</p>
18915:
18916: <pre><p>
18917: <label>
18918: Enter a breed:
18919: <input type="text" name="breed" list="breeds">
18920: </label>
18921: <datalist id="breeds">
18922: <label>
18923: or select one from the list:
18924: <select name="breed">
18925: <option value=""> (none selected)
18926: <option>Abyssinian
18927: <option>Alpaca
18928: <!-- ... -->
18929: </select>
18930: </label>
18931: </datalist>
18932: </p>
18933: </pre>
18934:
18935: <p>The fallback content will only be shown in UAs that don't
18936: support <code><a href="#the-datalist-element">datalist</a></code>. The options, on the other hand, will
18937: be detected by all UAs, even though they are not children of the
18938: <code><a href="#the-datalist-element">datalist</a></code> element.</p>
18939:
18940: <p>Note that if an <code><a href="#the-option-element">option</a></code> element used in a
18941: <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
18942: by default by legacy UAs (because it affects the
18943: <code><a href="#the-select-element">select</a></code>), but it will not have any effect on the
18944: <code><a href="#the-input-element">input</a></code> element in UAs that support
18945: <code><a href="#the-datalist-element">datalist</a></code>.</p>
18946:
18947: </div><h6 id="the-readonly-attribute"><span class="secno">4.10.7.2.4 </span>The <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute</h6><p>The <dfn id="attr-input-readonly" role="button" tabindex="0" aria-haspopup="true"><code>readonly</code></dfn>
18948: attribute is a <a href="#boolean-attribute">boolean attribute</a> that controls whether
18949: or not the user can edit the form control. <span class="impl">When
18950: specified, the element is <i title="concept-input-immutable"><a href="#concept-input-immutable">immutable</a></i>.</span></p><div class="example">
18951:
18952: <p>In the following example, the existing product identifiers
18953: cannot be modified, but they are still displayed as part of the
18954: form, for consistency with the row representing a new product
18955: (where the identifier is not yet filled in).</p>
18956:
18957: <pre><form action="products.cgi" method=post enctype="multipart/form-data">
18958: <table>
18959: <tr> <th> Product ID <th> Product name <th> Price <th> Action
18960: <tr>
18961: <td> <input readonly name="1.pid" value="H412">
18962: <td> <input required name="1.pname" value="Floor lamp Ulke">
18963: <td> $<input required type=number min=0 step=0.01 name="1.pprice" value="49.99">
18964: <td> <button formnovalidate name="action" value="delete:1">Delete</button>
18965: <tr>
18966: <td> <input readonly name="2.pid" value="FG28">
18967: <td> <input required name="2.pname" value="Table lamp Ulke">
18968: <td> $<input required type=number min=0 step=0.01 name="2.pprice" value="24.99">
18969: <td> <button formnovalidate name="action" value="delete:2">Delete</button>
18970: <tr>
18971: <td> <input required name="3.pid" value="" pattern="[A-Z0-9]+">
18972: <td> <input required name="3.pname" value="">
18973: <td> $<input required type=number min=0 step=0.01 name="3.pprice" value="">
18974: <td> <button formnovalidate name="action" value="delete:3">Delete</button>
18975: </table>
18976: <p> <button formnovalidate name="action" value="add">Add</button> </p>
18977: <p> <button name="action" value="update">Save</button> </p>
18978: </form></pre>
18979:
18980: </div><h6 id="the-size-attribute"><span class="secno">4.10.7.2.5 </span>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute</h6><p>The <dfn id="attr-input-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn>
18981: attribute gives the number of characters that, in a visual
18982: rendering, the user agent is to allow the user to see while editing
18983: the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><p>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute, if
18984: specified, must have a value that is a <a href="#valid-non-negative-integer">valid non-negative
18985: integer</a> greater than zero.</p><h6 id="the-required-attribute"><span class="secno">4.10.7.2.6 </span>The <code title="attr-input-required"><a href="#attr-input-required">required</a></code> attribute</h6><p>The <dfn id="attr-input-required" role="button" tabindex="0" aria-haspopup="true"><code>required</code></dfn>
18986: attribute is a <a href="#boolean-attribute">boolean attribute</a>. When specified, the
18987: element is <dfn id="concept-input-required" role="button" tabindex="0" aria-haspopup="true"><i>required</i></dfn>.</p><div class="example">
18988:
18989: <p>The following form has two required fields, one for an e-mail
18990: address and one for a password. It also has a third field that is
18991: only considerd valid if the user types the same password in the
18992: password field and this third field.</p>
18993:
18994: <pre><h1>Create new account</h1>
18995: <form action="/newaccount" method=post
18996: oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')">
18997: <p>
18998: <label for="username">E-mail address:</label>
18999: <input id="username" type=email required name=un>
19000: <p>
19001: <label for="password1">Password:</label>
19002: <input id="password1" type=password required name=up>
19003: <p>
19004: <label for="password2">Confirm password:</label>
19005: <input id="password2" type=password name=up2>
19006: <p>
19007: <input type=submit value="Create account">
19008: </form></pre>
19009:
19010: </div><h6 id="the-multiple-attribute"><span class="secno">4.10.7.2.7 </span>The <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute</h6><p>The <dfn id="attr-input-multiple" role="button" tabindex="0" aria-haspopup="true"><code>multiple</code></dfn>
19011: attribute is a <a href="#boolean-attribute">boolean attribute</a> that indicates whether
19012: the user is to be allowed to specify more than one value.</p><div class="example">
19013:
19014: <p>The following extract shows how an e-mail client's "Cc" field
19015: could accept multiple e-mail addresses.</p>
19016:
19017: <pre><label>Cc: <input type=email multiple name=cc></label></pre>
19018:
19019: <p>If the user had, amongst many friends in his user contacts
19020: database, two friends "Arthur Dent" (with address
19021: "art@example.net") and "Adam Josh" (with address
19022: "adamjosh@example.net"), then, after the user has typed "a", the
19023: user agent might suggest these two e-mail addresses to the
19024: user.</p>
19025:
19026: <p><img alt="" height="140" src="http://dev.w3.org/html5/spec/images/sample-email-1.png" width="500"></p>
19027:
19028: <p>The page could also link in the user's contacts database from the site:</p>
19029:
19030: <pre><label>Cc: <input type=email multiple name=cc list=contacts></label>
19031: ...
19032: <datalist id="contacts">
19033: <option value="hedral@damowmow.com">
19034: <option value="pillar@example.com">
19035: <option value="astrophy@cute.example">
19036: <option value="astronomy@science.example.org">
19037: </datalist></pre>
19038:
19039: <p>Suppose the user had entered "bob@example.net" into this text
19040: field, and then started typing a second e-mail address starting
19041: with "a". The user agent might show both the two friends mentioned
19042: earlier, as well as the "astrophy" and "astronomy" values given in
19043: the <code><a href="#the-datalist-element">datalist</a></code> element.</p>
19044:
19045: <p><img alt="" height="171" src="http://dev.w3.org/html5/spec/images/sample-email-2.png" width="500"></p>
19046:
19047: </div><div class="example">
19048:
19049: <p>The following extract shows how an e-mail client's "Attachments"
19050: field could accept multiple files for upload.</p>
19051:
19052: <pre><label>Attachments: <input type=file multiple name=att></label></pre>
19053:
19054: </div><h6 id="the-maxlength-attribute"><span class="secno">4.10.7.2.8 </span>The <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code> attribute</h6><p>The <dfn id="attr-input-maxlength" role="button" tabindex="0" aria-haspopup="true"><code>maxlength</code></dfn>
19055: 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">
19056: 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
19057: flag</a></span>.</p><p>If the <code><a href="#the-input-element">input</a></code> element has a <a href="#maximum-allowed-value-length">maximum allowed
19058: value length</a>, then the <a href="#code-point-length">code-point length</a> of the
19059: value of the element's <code title="attr-input-value"><a href="#attr-input-value">value</a></code>
19060: attribute must be equal to or less than the element's <a href="#maximum-allowed-value-length">maximum
19061: allowed value length</a>.</p><div class="example">
19062:
19063: <p>The following extract shows how a messaging client's text entry
19064: could be arbitrarily restricted to a fixed number of characters,
19065: thus forcing any conversation through this medium to be terse and
19066: discouraging intelligent discourse.</p>
19067:
1.571 mike 19068: <pre><label>What are you doing? <input name=status maxlength=140></label></pre>
1.545 mike 19069:
19070: </div><h6 id="the-pattern-attribute"><span class="secno">4.10.7.2.9 </span>The <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute</h6><p>The <dfn id="attr-input-pattern" role="button" tabindex="0" aria-haspopup="true"><code>pattern</code></dfn>
19071: attribute specifies a regular expression against which the control's
19072: <a href="#concept-fe-value" title="concept-fe-value">value</a>, or, when the <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute applies and is
19073: set, the control's <a href="#concept-fe-values" title="concept-fe-values">value<em>s</em></a>, are to be
19074: checked.</p><p>If specified, the attribute's value must match the JavaScript <i title="">Pattern</i> production. <a href="#refsECMA262">[ECMA262]</a></p><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,
19075: authors should include a <code title="attr-title"><a href="#the-title-attribute">title</a></code>
19076: attribute to give a description of the pattern. User agents may use
19077: the contents of this attribute, if it is present, when informing the
19078: user that the pattern is not matched, or at any other suitable time,
19079: such as in a tooltip or read out by assistive technology when the
19080: control gains focus.</p><div class="example">
19081: <p>For example, the following snippet:</p>
19082: <pre><label> Part number:
19083: <input pattern="[0-9][A-Z]{3}" name="part"
19084: title="A part number is a digit followed by three uppercase letters."/>
19085: </label></pre>
19086: <p>...could cause the UA to display an alert such as:</p>
19087: <pre><samp>A part number is a digit followed by three uppercase letters.
19088: You cannot submit this form when the field is incorrect.</samp></pre>
19089: </div><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
19090: the pattern. Additional information could also be included, so long
19091: as it assists the user in filling in the control. Otherwise,
19092: assistive technology would be impaired.</p><p class="example">For instance, if the title attribute contained
19093: the caption of the control, assistive technology could end up saying
19094: something like <samp>The text you have entered does not match the
19095: required pattern. Birthday</samp>, which is not useful.</p><p>UAs may still show the <code><a href="#the-title-element">title</a></code> in non-error situations
19096: (for example, as a tooltip when hovering over the control), so
19097: authors should be careful not to word <code><a href="#the-title-element">title</a></code>s as if an
19098: error has necessarily occurred.</p><h6 id="the-min-and-max-attributes"><span class="secno">4.10.7.2.10 </span>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> and <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attributes</h6><p>The <dfn id="attr-input-min" role="button" tabindex="0" aria-haspopup="true"><code>min</code></dfn> and <dfn id="attr-input-max" role="button" tabindex="0" aria-haspopup="true"><code>max</code></dfn> attributes indicate
19099: the allowed range of values for the element.</p><p>The <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attribute's value
19100: (the <a href="#concept-input-max" title="concept-input-max">maximum</a>) must not be
19101: less than the <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute's
19102: value (its <a href="#concept-input-min" title="concept-input-min">minimum</a>).</p><p>An element <dfn id="have-range-limitations" role="button" tabindex="0" aria-haspopup="true">has range
19103: limitations</dfn> if it has a defined <a href="#concept-input-min" title="concept-input-min">minimum</a> or a defined <a href="#concept-input-max" title="concept-input-max">maximum</a>.</p><div class="example">
19104:
19105: <p>The following date control limits input to dates that are before
19106: the 1980s:</p>
19107:
19108: <pre><input name=bday type=date max="1979-12-31"></pre>
19109:
19110: </div><div class="example">
19111:
19112: <p>The following number control limits input to whole numbers
19113: greater than zero:</p>
19114:
19115: <pre><input name=quantity required type=number min=1 value=1></pre>
19116:
19117: </div><h6 id="the-step-attribute"><span class="secno">4.10.7.2.11 </span>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute</h6><p>The <dfn id="attr-input-step" role="button" tabindex="0" aria-haspopup="true"><code>step</code></dfn>
19118: attribute indicates the granularity that is expected (and required)
19119: of the <a href="#concept-fe-value" title="concept-fe-value">value</a>, by limiting the
19120: allowed values. <span class="impl">The section that defines the
19121: <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute's current state
19122: also defines the <dfn id="concept-input-step-default" role="button" tabindex="0" aria-haspopup="true">default
19123: step</dfn>, the <dfn id="concept-input-step-scale" role="button" tabindex="0" aria-haspopup="true">step scale
19124: factor</dfn>, and in some cases the <dfn id="concept-input-step-default-base" role="button" tabindex="0" aria-haspopup="true">default step base</dfn>,
19125: which are used in processing the attribute as described
19126: below.</span></p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, if
19127: specified, must either have a value that is a <a href="#valid-floating-point-number">valid floating
19128: point number</a> that <a href="#rules-for-parsing-floating-point-number-values" title="rules for parsing floating
19129: point number values">parses</a> to a number that is greater than
19130: zero, or must have a value that is an <a href="#ascii-case-insensitive">ASCII
19131: case-insensitive</a> match for the string "<code title="">any</code>".</p><div class="example">
19132:
19133: <p>The following range control only accepts values in the range
19134: 0..1, and allows 256 steps in that range:</p>
19135:
19136: <pre><input name=opacity type=range min=0 max=1 step=0.00392156863></pre>
19137:
19138: </div><div class="example">
19139:
19140: <p>The following control allows any time in the day to be selected,
19141: with any accuracy (e.g. thousandth-of-a-second accuracy or
19142: more):</p>
19143:
19144: <pre><input name=favtime type=time step=any></pre>
19145:
19146: <p>Normally, time controls are limited to an accuracy of one
19147: minute.</p>
19148:
19149: </div><h6 id="the-placeholder-attribute"><span class="secno">4.10.7.2.12 </span>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code> attribute</h6><p>The <dfn id="attr-input-placeholder" role="button" tabindex="0" aria-haspopup="true"><code>placeholder</code></dfn>
19150: attribute represents a <em>short</em> hint (a word or short phrase)
19151: intended to aid the user with data entry. A hint could be a sample
19152: value or a brief description of the expected format. The attribute,
19153: if specified, must have a value that contains no U+000A LINE FEED
19154: (LF) or U+000D CARRIAGE RETURN (CR) characters.</p><p class="note">For a longer hint or other advisory text, the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute is more appropriate.</p><p>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
19155: attribute should not be used as an alternative to a
19156: <code><a href="#the-label-element">label</a></code>.</p><div class="example">
19157:
19158: <p>Here is an example of a mail configuration user interface that
19159: uses the <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
19160: attribute:</p>
19161:
19162: <pre><fieldset>
19163: <legend>Mail Account</legend>
19164: <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
19165: <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>
19166: <p><label>Password: <input type="password" name="password"></label></p>
19167: <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
19168: </fieldset></pre>
19169:
19170: </div><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><dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-value" id="dom-input-value"><a href="#dom-input-value">value</a></code> [ = <var title="">value</var> ]</dt>
19171:
19172: <dd>
19173:
19174: <p>Returns the current <a href="#concept-fe-value" title="concept-fe-value">value</a>
19175: of the form control.</p>
19176:
19177: <p>Can be set, to change the value.</p>
19178:
1.612 mike 19179: <p>Throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if it is
1.545 mike 19180: set to any value other than the empty string when the control is a
19181: file upload control.</p>
19182:
19183: </dd>
19184:
19185: <dt><var title="">input</var> . <code title="dom-input-checked" id="dom-input-checked"><a href="#dom-input-checked">checked</a></code> [ = <var title="">value</var> ]</dt>
19186:
19187: <dd>
19188:
19189: <p>Returns the current <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the form
19190: control.</p>
19191:
19192: <p>Can be set, to change the <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a>.</p>
19193:
19194: </dd>
19195:
19196: <dt><var title="">input</var> . <code title="dom-input-files" id="dom-input-files"><a href="#dom-input-files">files</a></code></dt>
19197:
19198: <dd>
19199:
19200: <p>Returns a <code><a href="#filelist">FileList</a></code> object listing the <a href="#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a> of
19201: the form control.</p>
19202:
19203: <p>Returns null if the control isn't a file control.</p>
19204:
19205: </dd>
19206:
19207: <dt><var title="">input</var> . <code title="dom-input-valueAsDate" id="dom-input-valueasdate"><a href="#dom-input-valueasdate">valueAsDate</a></code> [ = <var title="">value</var> ]</dt>
19208:
19209: <dd>
19210:
19211: <p>Returns a <code>Date</code> object representing the form
19212: control's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if
19213: applicable; otherwise, returns null.</p>
19214:
19215: <p>Can be set, to change the value.</p>
19216:
1.612 mike 19217: <p>Throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if the
1.545 mike 19218: control isn't date- or time-based.</p>
19219:
19220: </dd>
19221:
19222: <dt><var title="">input</var> . <code title="dom-input-valueAsNumber" id="dom-input-valueasnumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> [ = <var title="">value</var> ]</dt>
19223:
19224: <dd>
19225:
19226: <p>Returns a number representing the form control's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if applicable; otherwise,
19227: returns null.</p>
19228:
19229: <p>Can be set, to change the value.</p>
19230:
1.612 mike 19231: <p>Throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if the
1.545 mike 19232: control is neither date- or time-based nor numeric.</p>
19233:
19234: </dd>
19235:
19236: <dt><var title="">input</var> . <code title="dom-input-stepUp" id="dom-input-stepup"><a href="#dom-input-stepup">stepUp</a></code>( [ <var title="">n</var> ] )</dt>
19237: <dt><var title="">input</var> . <code title="dom-input-stepDown" id="dom-input-stepdown"><a href="#dom-input-stepdown">stepDown</a></code>( [ <var title="">n</var> ] )</dt>
19238:
19239: <dd>
19240:
19241: <p>Changes the form control's <a href="#concept-fe-value" title="concept-fe-value">value</a> by the value given in the
19242: <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, multiplied by
19243: <var title="">n</var>. The default value for <var title="">n</var>
19244: is 1.</p>
19245:
1.612 mike 19246: <p>Throws <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if the control
1.545 mike 19247: 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
19248: stepping in the given direction by the given amount would take the
19249: value out of range.</p>
19250:
19251: </dd>
19252:
19253: <dt><var title="">input</var> . <code title="dom-input-list" id="dom-input-list"><a href="#dom-input-list">list</a></code></dt>
19254:
19255: <dd>
19256:
19257: <p>Returns the <code><a href="#the-datalist-element">datalist</a></code> element indicated by the
19258: <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute.</p>
19259:
19260: </dd>
19261:
19262: <dt><var title="">input</var> . <code title="dom-input-selectedOption" id="dom-input-selectedoption"><a href="#dom-input-selectedoption">selectedOption</a></code></dt>
19263:
19264: <dd>
19265:
19266: <p>Returns the <code><a href="#the-option-element">option</a></code> element from the
19267: <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
19268: form control's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p>
19269:
19270: </dd>
19271:
19272: </dl><h4 id="the-button-element"><span class="secno">4.10.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>button</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
19273: <dd><a href="#flow-content">Flow content</a>.</dd>
19274: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
19275: <dd><a href="#interactive-content">Interactive content</a>.</dd>
19276: <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>
1.629 ! mike 19277: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 19278: <dt>Contexts in which this element can be used:</dt>
19279: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
19280: <dt>Content model:</dt>
19281: <dd><a href="#phrasing-content">Phrasing content</a>, but there must be no <a href="#interactive-content">interactive content</a> descendant.</dd>
19282: <dt>Content attributes:</dt>
19283: <dd><a href="#global-attributes">Global attributes</a></dd>
19284: <dd><code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code></dd>
19285: <dd><code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code></dd>
19286: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
19287: <dd><code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code></dd>
19288: <dd><code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code></dd>
19289: <dd><code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code></dd>
19290: <dd><code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code></dd>
19291: <dd><code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code></dd>
19292: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
19293: <dd><code title="attr-button-type"><a href="#attr-button-type">type</a></code></dd>
19294: <dd><code title="attr-button-value"><a href="#attr-button-value">value</a></code></dd>
19295: <dt>DOM interface:</dt>
19296: <dd>
19297: <pre class="idl">interface <dfn id="htmlbuttonelement" role="button" tabindex="0" aria-haspopup="true">HTMLButtonElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
19298: attribute boolean <a href="#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
19299: attribute boolean <a href="#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
19300: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
19301: attribute DOMString <a href="#dom-fs-formaction" title="dom-fs-formAction">formAction</a>;
19302: attribute DOMString <a href="#dom-fs-formenctype" title="dom-fs-formEnctype">formEnctype</a>;
19303: attribute DOMString <a href="#dom-fs-formmethod" title="dom-fs-formMethod">formMethod</a>;
19304: attribute boolean <a href="#dom-fs-formnovalidate" title="dom-fs-formNoValidate">formNoValidate</a>;
19305: attribute DOMString <a href="#dom-fs-formtarget" title="dom-fs-formTarget">formTarget</a>;
19306: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
19307: attribute DOMString <a href="#dom-button-type" title="dom-button-type">type</a>;
19308: attribute DOMString <a href="#dom-button-value" title="dom-button-value">value</a>;
19309:
19310: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
19311: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
19312: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
19313: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 19314: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 19315:
19316: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
19317: };</pre>
19318: </dd>
19319: </dl><p>The <code><a href="#the-button-element">button</a></code> element <a href="#represents">represents</a> a
19320: button. <span class="impl">If the element is not <a href="#concept-fe-disabled" title="concept-fe-disabled">disabled</a>, then the user agent
19321: should allow the user to activate the button.</span></p><p>The element is a <a href="#concept-button" title="concept-button">button</a>.</p><p>The <dfn id="attr-button-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
19322: attribute controls the behavior of the button when it is activated.
19323: It is an <a href="#enumerated-attribute">enumerated attribute</a>. The following table
19324: lists the keywords and states for the attribute — the keywords
19325: in the left column map to the states in the cell in the second
19326: column on the same row as the keyword.</p><table><thead><tr><th> Keyword
19327: </th><th> State
19328: </th><th> Brief description
19329: </th></tr></thead><tbody><tr><td><dfn id="attr-button-type-submit" role="button" tabindex="0" aria-haspopup="true"><code>submit</code></dfn>
19330: </td><td><a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
19331: </td><td>Submits the form.
19332: </td></tr><tr><td><dfn id="attr-button-type-reset" role="button" tabindex="0" aria-haspopup="true"><code>reset</code></dfn>
19333: </td><td><a href="#attr-button-type-reset-state" title="attr-button-type-reset-state">Reset Button</a>
19334: </td><td>Resets the form.
19335: </td></tr><tr><td><dfn id="attr-button-type-button" role="button" tabindex="0" aria-haspopup="true"><code>button</code></dfn>
19336: </td><td><a href="#attr-button-type-button-state" title="attr-button-type-button-state">Button</a>
19337: </td><td>Does nothing.
19338: </td></tr></tbody></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>
19339: state.</p><p>If the <code title="attr-button-type"><a href="#attr-button-type">type</a></code> attribute is in
19340: the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
19341: state, the element is specifically a <a href="#concept-submit-button" title="concept-submit-button">submit button</a>.</p><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
19342: explicitly associate the <code><a href="#the-button-element">button</a></code> element with its
19343: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
19344: 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
19345: the control non-interactive and to prevent its value from being
19346: submitted. The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>
19347: 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
19348: <a href="#attributes-for-form-submission">attributes for form submission</a>.</p><p class="note">The <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute can
19349: be used to make submit buttons that do not trigger the constraint
19350: validation.</p><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
19351: if the element's <code title="attr-button-type"><a href="#attr-button-type">type</a></code>
19352: attribute is not in the <a href="#attr-button-type-submit-state" title="attr-button-type-submit-state">Submit Button</a>
19353: state.</p><p>The <dfn id="attr-button-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn>
19354: attribute gives the element's value for the purposes of form
19355: submission. The element's <a href="#concept-fe-value" title="concept-fe-value">value</a> is the value of the element's
19356: <code title="attr-button-value"><a href="#attr-button-value">value</a></code> attribute, if there is
19357: one, or the empty string otherwise.</p><p class="note">A button (and its value) is only included in the
19358: form submission if the button itself was used to initiate the form
19359: submission.</p>
19360: <p>The <dfn id="dom-button-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> IDL
19361: attribute must <a href="#reflect">reflect</a> the content attribute of the
19362: same name.</p>
19363:
19364: <p>The <dfn id="dom-button-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL
19365: attribute must <a href="#reflect">reflect</a> the content attribute of the
19366: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
19367: <div class="example">
19368:
19369: <p>The following button is labeled "Show hint" and pops up a dialog
19370: box when activated:</p>
19371:
19372: <pre><button type=button
19373: onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
19374: Show hint
19375: </button></pre>
19376:
19377: </div><h4 id="the-select-element"><span class="secno">4.10.9 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>select</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
19378: <dd><a href="#flow-content">Flow content</a>.</dd>
19379: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
19380: <dd><a href="#interactive-content">Interactive content</a>.</dd>
19381: <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>
1.629 ! mike 19382: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 19383: <dt>Contexts in which this element can be used:</dt>
19384: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
19385: <dt>Content model:</dt>
19386: <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>
19387: <dt>Content attributes:</dt>
19388: <dd><a href="#global-attributes">Global attributes</a></dd>
19389: <dd><code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code></dd>
19390: <dd><code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code></dd>
19391: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
19392: <dd><code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code></dd>
19393: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
19394: <dd><code title="attr-select-required"><a href="#attr-select-required">required</a></code></dd>
19395: <dd><code title="attr-select-size"><a href="#attr-select-size">size</a></code></dd>
19396: <dt>DOM interface:</dt>
19397: <dd>
19398: <pre class="idl">interface <dfn id="htmlselectelement" role="button" tabindex="0" aria-haspopup="true">HTMLSelectElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
19399: attribute boolean <a href="#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
19400: attribute boolean <a href="#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
19401: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
19402: attribute boolean <a href="#dom-select-multiple" title="dom-select-multiple">multiple</a>;
19403: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
19404: attribute boolean <a href="#dom-select-required" title="dom-select-required">required</a>;
19405: attribute unsigned long <a href="#dom-select-size" title="dom-select-size">size</a>;
19406:
19407: readonly attribute DOMString <a href="#dom-select-type" title="dom-select-type">type</a>;
19408:
19409: readonly attribute <a href="#htmloptionscollection">HTMLOptionsCollection</a> <a href="#dom-select-options" title="dom-select-options">options</a>;
19410: attribute unsigned long <a href="#dom-select-length" title="dom-select-length">length</a>;
1.562 mike 19411: getter <a href="#element">Element</a> <a href="#dom-select-item" title="dom-select-item">item</a>(unsigned long index);
19412: object <a href="#dom-select-nameditem" title="dom-select-namedItem">namedItem</a>(DOMString name);
19413: void <a href="#dom-select-add" title="dom-select-add">add</a>(<a href="#htmloptionelement">HTMLOptionElement</a> element, optional <a href="#htmlelement">HTMLElement</a>? before);
19414: void <a href="#dom-select-add" title="dom-select-add">add</a>(<a href="#htmloptgroupelement">HTMLOptGroupElement</a> element, optional <a href="#htmlelement">HTMLElement</a>? before);
19415: void <a href="#dom-select-add" title="dom-select-add">add</a>(<a href="#htmloptionelement">HTMLOptionElement</a> element, long before);
19416: void <a href="#dom-select-add" title="dom-select-add">add</a>(<a href="#htmloptgroupelement">HTMLOptGroupElement</a> element, long before);
19417: void <a href="#dom-select-remove" title="dom-select-remove">remove</a>(long index);
19418: <a href="#dom-htmloptionscollection-setter" title="dom-HTMLOptionsCollection-setter">setter creator</a> void (unsigned long index, <a href="#htmloptionelement">HTMLOptionElement</a> option);
1.545 mike 19419:
19420: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-select-selectedoptions" title="dom-select-selectedOptions">selectedOptions</a>;
19421: attribute long <a href="#dom-select-selectedindex" title="dom-select-selectedIndex">selectedIndex</a>;
19422: attribute DOMString <a href="#dom-select-value" title="dom-select-value">value</a>;
19423:
19424: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
19425: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
19426: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
19427: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 19428: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 19429:
19430: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
19431: };</pre>
19432: </dd>
19433: </dl><p>The <code><a href="#the-select-element">select</a></code> element represents a control for
19434: selecting amongst a set of options.</p><p>The <dfn id="attr-select-multiple" role="button" tabindex="0" aria-haspopup="true"><code>multiple</code></dfn>
19435: attribute is a <a href="#boolean-attribute">boolean attribute</a>. If the attribute is
19436: present, then the <code><a href="#the-select-element">select</a></code> element
19437: <a href="#represents">represents</a> a control for selecting zero or more options
19438: from the <a href="#concept-select-option-list" title="concept-select-option-list">list of
19439: options</a>. If the attribute is absent, then the
19440: <code><a href="#the-select-element">select</a></code> element <a href="#represents">represents</a> a control for
19441: selecting a single option from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p><p>The <dfn id="attr-select-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn>
1.580 mike 19442: attribute gives the number of options to show to the user. The <code title="attr-select-size"><a href="#attr-select-size">size</a></code> attribute, if specified, must
1.545 mike 19443: have a value that is a <a href="#valid-non-negative-integer">valid non-negative integer</a>
19444: greater than zero. If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is present,
1.580 mike 19445: then the <code title="attr-select-size"><a href="#attr-select-size">size</a></code> attribute's
1.545 mike 19446: default value is 4. If the <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code> attribute is absent,
1.580 mike 19447: then the <code title="attr-select-size"><a href="#attr-select-size">size</a></code> attribute's
1.545 mike 19448: default value is 1.</p><p>The <dfn id="concept-select-option-list" role="button" tabindex="0" aria-haspopup="true">list of options</dfn>
19449: for a <code><a href="#the-select-element">select</a></code> element consists of all the
19450: <code><a href="#the-option-element">option</a></code> element children of the <code><a href="#the-select-element">select</a></code>
19451: element, and all the <code><a href="#the-option-element">option</a></code> element children of all the
19452: <code><a href="#the-optgroup-element">optgroup</a></code> element children of the <code><a href="#the-select-element">select</a></code>
19453: element, in <a href="#tree-order">tree order</a>.</p><p>The <dfn id="attr-select-required" role="button" tabindex="0" aria-haspopup="true"><code>required</code></dfn>
19454: attribute is a <a href="#boolean-attribute">boolean attribute</a>. When specified, the
19455: user will be required to select a value before submitting the
19456: form.</p><p>If a <code><a href="#the-select-element">select</a></code> element has a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute specified,
19457: does not have a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
19458: attribute specified, and has a <a href="#concept-select-size" title="concept-select-size">display size</a> of 1;
19459: and if the <a href="#concept-option-value" title="concept-option-value">value</a> of the
19460: first <code><a href="#the-option-element">option</a></code> element in the <code><a href="#the-select-element">select</a></code>
19461: element's <a href="#concept-select-option-list" title="concept-select-option-list">list of
19462: options</a> (if any) is the empty string, and that
19463: <code><a href="#the-option-element">option</a></code> element's parent node is the <code><a href="#the-select-element">select</a></code>
19464: element (and not an <code><a href="#the-optgroup-element">optgroup</a></code> element), then that
19465: <code><a href="#the-option-element">option</a></code> is the <code><a href="#the-select-element">select</a></code> element's
19466: <dfn id="placeholder-label-option" role="button" tabindex="0" aria-haspopup="true">placeholder label option</dfn>.</p><p>If a <code><a href="#the-select-element">select</a></code> element has a <code title="attr-select-required"><a href="#attr-select-required">required</a></code> attribute specified,
19467: does not have a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
19468: attribute specified, and has a <a href="#concept-select-size" title="concept-select-size">display size</a> of 1,
19469: then the <code><a href="#the-select-element">select</a></code> element must have a <a href="#placeholder-label-option">placeholder
19470: label option</a>.</p><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
19471: explicitly associate the <code><a href="#the-select-element">select</a></code> element with its
19472: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
19473: 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
19474: the control non-interactive and to prevent its value from being
19475: submitted. The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>
19476: attribute controls focus.</p><dl class="domintro"><dt><var title="">select</var> . <code title="dom-select-type" id="dom-select-type"><a href="#dom-select-type">type</a></code></dt>
19477:
19478: <dd>
19479:
19480: <p>Returns "<code title="">select-multiple</code>" if the element
19481: has a <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>
19482: attribute, and "<code title="">select-one</code>"
19483: otherwise.</p>
19484:
19485: </dd>
19486:
19487: <dt><var title="">select</var> . <code title="dom-select-options" id="dom-select-options"><a href="#dom-select-options">options</a></code></dt>
19488:
19489: <dd>
19490:
19491: <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>
19492:
19493: </dd>
19494:
19495: <dt><var title="">select</var> . <code title="dom-select-length" id="dom-select-length"><a href="#dom-select-length">length</a></code> [ = <var title="">value</var> ]</dt>
19496: <dd>
19497: <p>Returns the number of elements in the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>
19498: <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>
19499: <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>
19500: </dd>
19501:
19502: <dt><var title="">element</var> = <var title="">select</var> . <code title="dom-select-item" id="dom-select-item"><a href="#dom-select-item">item</a></code>(<var title="">index</var>)</dt>
19503: <dt><var title="">select</var>[<var title="">index</var>]</dt>
19504: <dd>
19505: <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>
19506: </dd>
19507:
19508: <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>
19509: <dd>
19510: <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 <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>.</p>
19511: <p>If there are multiple matching items, then a <code><a href="#nodelist">NodeList</a></code> object containing all those elements is returned.</p>
19512: <p>Returns null if no element with that <a href="#concept-id" title="concept-id">ID</a> could be found.</p>
19513: </dd>
19514:
19515: <dt><var title="">select</var> . <code title="dom-select-add" id="dom-select-add"><a href="#dom-select-add">add</a></code>(<var title="">element</var> [, <var title="">before</var> ])</dt>
19516: <dd>
19517: <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
19518: <p>The <var title="">before</var> argument can be a number, in
19519: which case <var title="">element</var> is inserted before the item
19520: with that number, or an element from the <a href="#concept-select-option-list" title="concept-select-option-list">list of options</a>, in
19521: which case <var title="">element</var> is inserted before that
19522: element.</p>
19523: <p>If <var title="">before</var> is omitted, null, or a number out
19524: of range, then <var title="">element</var> will be added at the
19525: end of the list.</p>
1.612 mike 19526: <p>This method will throw a <code><a href="#hierarchyrequesterror">HierarchyRequestError</a></code>
1.545 mike 19527: exception if <var title="">element</var> is an ancestor of the
19528: element into which it is to be inserted.</p>
19529: </dd>
19530:
19531: <dt><var title="">select</var> . <code title="dom-select-selectedOptions" id="dom-select-selectedoptions"><a href="#dom-select-selectedoptions">selectedOptions</a></code></dt>
19532:
19533: <dd>
19534:
19535: <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
19536: selected.</p>
19537:
19538: </dd>
19539:
19540: <dt><var title="">select</var> . <code title="dom-select-selectedIndex" id="dom-select-selectedindex"><a href="#dom-select-selectedindex">selectedIndex</a></code> [ = <var title="">value</var> ]</dt>
19541:
19542: <dd>
19543:
19544: <p>Returns the index of the first selected item, if any, or
19545: −1 if there is no selected item.</p>
19546:
19547: <p>Can be set, to change the selection.</p>
19548:
19549: </dd>
19550:
19551: <dt><var title="">select</var> . <code title="dom-select-value" id="dom-select-value"><a href="#dom-select-value">value</a></code> [ = <var title="">value</var> ]</dt>
19552:
19553: <dd>
19554:
19555: <p>Returns the <a href="#concept-fe-value" title="concept-fe-value">value</a> of the
19556: first selected item, if any, or the empty string if there is no
19557: selected item.</p>
19558:
19559: <p>Can be set, to change the selection.</p>
19560:
19561: </dd>
19562:
19563: </dl>
19564: <p>The <dfn id="dom-select-multiple" role="button" tabindex="0" aria-haspopup="true"><code>multiple</code></dfn>,
19565: <dfn id="dom-select-required" role="button" tabindex="0" aria-haspopup="true"><code>required</code></dfn>, and
19566: <dfn id="dom-select-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn> IDL attributes
19567: must <a href="#reflect">reflect</a> the respective content attributes of the
19568: same name. The <code title="dom-select-size"><a href="#dom-select-size">size</a></code> IDL
19569: attribute has a default value of zero (which for historical reasons
19570: is different from the default value of the <code title="attr-select-size"><a href="#attr-select-size">size</a></code> content attribute that it
19571: reflects).</p>
19572: <div class="example">
19573:
19574: <p>The following example shows how a <code><a href="#the-select-element">select</a></code> element
19575: can be used to offer the user with a set of options from which the
19576: user can select a single option. The default option is
19577: preselected.</p>
19578:
19579: <pre><p>
19580: <label for="unittype">Select unit type:</label>
19581: <select id="unittype" name="unittype">
19582: <option value="1"> Miner </option>
19583: <option value="2"> Puffer </option>
19584: <option value="3" selected> Snipey </option>
19585: <option value="4"> Max </option>
19586: <option value="5"> Firebot </option>
19587: </select>
19588: </p></pre>
19589:
1.561 mike 19590: <p>When there is no default option, a placeholder can be used
19591: instead:</p>
19592:
19593: <pre><select name="unittype" <strong>required</strong>>
1.562 mike 19594: <strong><option value=""> Select unit type </option></strong>
1.561 mike 19595: <option value="1"> Miner </option>
19596: <option value="2"> Puffer </option>
19597: <option value="3"> Snipey </option>
19598: <option value="4"> Max </option>
19599: <option value="5"> Firebot </option>
19600: </select></pre>
19601:
1.545 mike 19602: </div><div class="example">
19603:
19604: <p>Here, the user is offered a set of options from which he can
19605: select any number. By default, all five options are selected.</p>
19606:
19607: <pre><p>
19608: <label for="allowedunits">Select unit types to enable on this map:</label>
19609: <select id="allowedunits" name="allowedunits" multiple>
19610: <option value="1" selected> Miner </option>
19611: <option value="2" selected> Puffer </option>
19612: <option value="3" selected> Snipey </option>
19613: <option value="4" selected> Max </option>
19614: <option value="5" selected> Firebot </option>
19615: </select>
19616: </p></pre>
19617:
1.561 mike 19618: </div><div class="example">
19619:
19620: <p>Sometimes, a user has to select one or more items. This example
19621: shows such an interface.</p>
19622:
19623: <pre><p>Select the songs from that you would like on your Act II Mix Tape:</p>
19624: <select multiple required name="act2">
19625: <option value="s1">It Sucks to Be Me (Reprise)
19626: <option value="s2">There is Life Outside Your Apartment
19627: <option value="s3">The More You Ruv Someone
19628: <option value="s4">Schadenfreude
19629: <option value="s5">I Wish I Could Go Back to College
19630: <option value="s6">The Money Song
19631: <option value="s7">School for Monsters
19632: <option value="s8">The Money Song (Reprise)
19633: <option value="s9">There's a Fine, Fine Line (Reprise)
19634: <option value="s10">What Do You Do With a B.A. in English? (Reprise)
19635: <option value="s11">For Now
19636: </select></pre>
19637:
1.545 mike 19638: </div><h4 id="the-datalist-element"><span class="secno">4.10.10 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>datalist</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
19639: <dd><a href="#flow-content">Flow content</a>.</dd>
19640: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
19641: <dt>Contexts in which this element can be used:</dt>
19642: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
19643: <dt>Content model:</dt>
19644: <dd>Either: <a href="#phrasing-content">phrasing content</a>.</dd>
19645: <dd>Or: Zero or more <code><a href="#the-option-element">option</a></code> elements.</dd>
19646: <dt>Content attributes:</dt>
19647: <dd><a href="#global-attributes">Global attributes</a></dd>
19648: <dt>DOM interface:</dt>
19649: <dd>
19650: <pre class="idl">interface <dfn id="htmldatalistelement" role="button" tabindex="0" aria-haspopup="true">HTMLDataListElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
19651: readonly attribute <a href="#htmlcollection">HTMLCollection</a> <a href="#dom-datalist-options" title="dom-datalist-options">options</a>;
19652: };</pre>
19653: </dd>
19654: </dl><p>The <code><a href="#the-datalist-element">datalist</a></code> element represents a set of
19655: <code><a href="#the-option-element">option</a></code> elements that represent predefined options for
19656: other controls. The contents of the element represents fallback
19657: content for legacy user agents, intermixed with <code><a href="#the-option-element">option</a></code>
19658: elements that represent the predefined options. In the rendering,
19659: the <code><a href="#the-datalist-element">datalist</a></code> element <a href="#represents">represents</a>
19660: nothing<span class="impl"> and it, along with its children, should
19661: be hidden</span>.</p><p>The <code><a href="#the-datalist-element">datalist</a></code> element is hooked up to an
19662: <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
19663: <code><a href="#the-input-element">input</a></code> element.</p><p>Each <code><a href="#the-option-element">option</a></code> element that is a descendant of the
19664: <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
19665: 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>.
19666:
19667: </p><dl class="domintro"><dt><var title="">datalist</var> . <code title="dom-datalist-options" id="dom-datalist-options"><a href="#dom-datalist-options">options</a></code></dt>
19668:
19669: <dd>
19670: <p>Returns an <code><a href="#htmlcollection">HTMLCollection</a></code> of the <code>options</code> elements of the table.</p>
19671: </dd>
19672:
19673: </dl><h4 id="the-optgroup-element"><span class="secno">4.10.11 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>optgroup</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
19674: <dd>None.</dd>
19675: <dt>Contexts in which this element can be used:</dt>
19676: <dd>As a child of a <code><a href="#the-select-element">select</a></code> element.</dd>
19677: <dt>Content model:</dt>
19678: <dd>Zero or more <code><a href="#the-option-element">option</a></code> elements.</dd>
19679: <dt>Content attributes:</dt>
19680: <dd><a href="#global-attributes">Global attributes</a></dd>
19681: <dd><code title="attr-optgroup-disabled"><a href="#attr-optgroup-disabled">disabled</a></code></dd>
19682: <dd><code title="attr-optgroup-label"><a href="#attr-optgroup-label">label</a></code></dd>
19683: <dt>DOM interface:</dt>
19684: <dd>
19685: <pre class="idl">interface <dfn id="htmloptgroupelement" role="button" tabindex="0" aria-haspopup="true">HTMLOptGroupElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
19686: attribute boolean <a href="#dom-optgroup-disabled" title="dom-optgroup-disabled">disabled</a>;
19687: attribute DOMString <a href="#dom-optgroup-label" title="dom-optgroup-label">label</a>;
19688: };</pre>
19689: </dd>
19690: </dl><p>The <code><a href="#the-optgroup-element">optgroup</a></code> element <a href="#represents">represents</a> a group of
19691: <code><a href="#the-option-element">option</a></code> elements with a common label.</p><p>The element's group of <code><a href="#the-option-element">option</a></code> elements consists of
19692: the <code><a href="#the-option-element">option</a></code> elements that are children of the
19693: <code><a href="#the-optgroup-element">optgroup</a></code> element.</p><p>The <dfn id="attr-optgroup-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn> attribute
19694: 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
19695: <code><a href="#the-option-element">option</a></code> elements together.</p><p>The <dfn id="attr-optgroup-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>
19696: attribute must be specified. Its value gives the name of the group,
19697: for the purposes of the user interface. <span class="impl">User
19698: agents should use this attribute's value when labelling the group of
19699: <code><a href="#the-option-element">option</a></code> elements in a <code><a href="#the-select-element">select</a></code>
19700: element.</span></p>
19701: <p>The <dfn id="dom-optgroup-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn> and <dfn id="dom-optgroup-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn> attributes must
19702: <a href="#reflect">reflect</a> the respective content attributes of the same
19703: name.</p>
19704: <div class="example">
19705:
19706: <p>The following snippet shows how a set of lessons from three
19707: courses could be offered in a <code><a href="#the-select-element">select</a></code> drop-down
19708: widget:</p>
19709:
19710: <pre><form action="courseselector.dll" method="get">
19711: <p>Which course would you like to watch today?
19712: <p><label>Course:
19713: <select name="c">
19714: <optgroup label="8.01 Physics I: Classical Mechanics">
19715: <option value="8.01.1">Lecture 01: Powers of Ten
19716: <option value="8.01.2">Lecture 02: 1D Kinematics
19717: <option value="8.01.3">Lecture 03: Vectors
19718: <optgroup label="8.02 Electricity and Magnestism">
19719: <option value="8.02.1">Lecture 01: What holds our world together?
19720: <option value="8.02.2">Lecture 02: Electric Field
19721: <option value="8.02.3">Lecture 03: Electric Flux
19722: <optgroup label="8.03 Physics III: Vibrations and Waves">
19723: <option value="8.03.1">Lecture 01: Periodic Phenomenon
19724: <option value="8.03.2">Lecture 02: Beats
19725: <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
19726: </select>
19727: </label>
19728: <p><input type=submit value="▶ Play">
19729: </form></pre>
19730:
19731: </div><h4 id="the-option-element"><span class="secno">4.10.12 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>option</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
19732: <dd>None.</dd>
19733: <dt>Contexts in which this element can be used:</dt>
19734: <dd>As a child of a <code><a href="#the-select-element">select</a></code> element.</dd>
19735: <dd>As a child of a <code><a href="#the-datalist-element">datalist</a></code> element.</dd>
19736: <dd>As a child of an <code><a href="#the-optgroup-element">optgroup</a></code> element.</dd>
19737: <dt>Content model:</dt>
19738: <dd><a href="#text-content" title="text content">Text</a>.</dd>
19739: <dt>Content attributes:</dt>
19740: <dd><a href="#global-attributes">Global attributes</a></dd>
19741: <dd><code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code></dd>
19742: <dd><code title="attr-option-label"><a href="#attr-option-label">label</a></code></dd>
19743: <dd><code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code></dd>
19744: <dd><code title="attr-option-value"><a href="#attr-option-value">value</a></code></dd>
19745: <dt>DOM interface:</dt>
19746: <dd>
19747: <pre class="idl">[NamedConstructor=<a href="#dom-option" title="dom-option">Option</a>(),
1.562 mike 19748: NamedConstructor=<a href="#dom-option-t" title="dom-option-t">Option</a>(DOMString text),
19749: NamedConstructor=<a href="#dom-option-tv" title="dom-option-tv">Option</a>(DOMString text, DOMString value),
19750: NamedConstructor=<a href="#dom-option-tvd" title="dom-option-tvd">Option</a>(DOMString text, DOMString value, boolean defaultSelected),
19751: NamedConstructor=<a href="#dom-option-tvds" title="dom-option-tvds">Option</a>(DOMString text, DOMString value, boolean defaultSelected, boolean selected)]
1.545 mike 19752: interface <dfn id="htmloptionelement" role="button" tabindex="0" aria-haspopup="true">HTMLOptionElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
19753: attribute boolean <a href="#dom-option-disabled" title="dom-option-disabled">disabled</a>;
19754: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-option-form" title="dom-option-form">form</a>;
19755: attribute DOMString <a href="#dom-option-label" title="dom-option-label">label</a>;
19756: attribute boolean <a href="#dom-option-defaultselected" title="dom-option-defaultSelected">defaultSelected</a>;
19757: attribute boolean <a href="#dom-option-selected" title="dom-option-selected">selected</a>;
19758: attribute DOMString <a href="#dom-option-value" title="dom-option-value">value</a>;
19759:
19760: attribute DOMString <a href="#dom-option-text" title="dom-option-text">text</a>;
19761: readonly attribute long <a href="#dom-option-index" title="dom-option-index">index</a>;
19762: };</pre>
19763: </dd>
19764: </dl><p>The <code><a href="#the-option-element">option</a></code> element <a href="#represents">represents</a> an option
19765: in a <code><a href="#the-select-element">select</a></code> element or as part of a list of suggestions
19766: in a <code><a href="#the-datalist-element">datalist</a></code> element.</p><p>In certain circumstances described in the definition of the
19767: <code><a href="#the-select-element">select</a></code> element, an <code><a href="#the-option-element">option</a></code> element can be a
19768: <code><a href="#the-select-element">select</a></code> element's <a href="#placeholder-label-option">placeholder label option</a>.
19769: A <a href="#placeholder-label-option">placeholder label option</a> does not represent an actual
19770: option, but instead represents a label for the <code><a href="#the-select-element">select</a></code>
19771: control.</p><p>The <dfn id="attr-option-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn>
19772: attribute is a <a href="#boolean-attribute">boolean attribute</a>. An
19773: <code><a href="#the-option-element">option</a></code> element is <dfn id="concept-option-disabled" role="button" tabindex="0" aria-haspopup="true">disabled</dfn> if its <code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code> attribute is present or
19774: 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
19775: present.</p><p>The <dfn id="attr-option-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>
19776: attribute provides a label for element. The <dfn id="concept-option-label" role="button" tabindex="0" aria-haspopup="true">label</dfn> of an <code><a href="#the-option-element">option</a></code>
19777: element is the value of the <code title="attr-option-label"><a href="#attr-option-label">label</a></code> content attribute, if there
19778: is one, or, if there is not, the value of the element's <code title="dom-option-text"><a href="#dom-option-text">text</a></code> IDL attribute.</p><p>The <dfn id="attr-option-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn>
19779: attribute provides a value for element. The <dfn id="concept-option-value" role="button" tabindex="0" aria-haspopup="true">value</dfn> of an <code><a href="#the-option-element">option</a></code>
19780: element is the value of the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> content attribute, if there
19781: is one, or, if there is not, the value of the element's <code title="dom-option-text"><a href="#dom-option-text">text</a></code> IDL attribute.</p><p>The <dfn id="attr-option-selected" role="button" tabindex="0" aria-haspopup="true"><code>selected</code></dfn>
19782: attribute is a <a href="#boolean-attribute">boolean attribute</a>. It represents the
19783: default <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> of the
19784: element.</p><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
19785: specified must not have more than one descendant <code><a href="#the-option-element">option</a></code>
19786: element with its <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code>
19787: attribute set.</p><dl class="domintro"><dt><var title="">option</var> . <code title="dom-option-selected" id="dom-option-selected"><a href="#dom-option-selected">selected</a></code></dt>
19788:
19789: <dd>
19790:
19791: <p>Returns true if the element is selected, and false otherwise.</p>
19792:
19793: <p>Can be set, to override the current state of the element.</p>
19794:
19795: </dd>
19796:
19797: <dt><var title="">option</var> . <code title="dom-option-index" id="dom-option-index"><a href="#dom-option-index">index</a></code></dt>
19798:
19799: <dd>
19800:
19801: <p>Returns the index of the element in its <code><a href="#the-select-element">select</a></code>
19802: element's <code title="dom-select-options"><a href="#dom-select-options">options</a></code>
19803: list.</p>
19804:
19805: </dd>
19806:
19807: <dt><var title="">option</var> . <code title="dom-option-form" id="dom-option-form"><a href="#dom-option-form">form</a></code></dt>
19808:
19809: <dd>
19810:
19811: <p>Returns the element's <code><a href="#the-form-element">form</a></code> element, if any, or
19812: null otherwise.</p>
19813:
19814: </dd>
19815:
19816: <dt><var title="">option</var> . <code title="dom-option-text" id="dom-option-text"><a href="#dom-option-text">text</a></code></dt>
19817:
19818: <dd>
19819:
19820: <p>Same as <code><a href="#textcontent">textContent</a></code>, except that spaces are collapsed.</p>
19821:
19822: </dd>
19823:
19824: <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>
19825:
19826: <dd>
19827:
19828: <p>Returns a new <code><a href="#the-option-element">option</a></code> element.</p>
19829:
19830: <p>The <var title="">text</var> argument sets the contents of the element.</p>
19831: <p>The <var title="">value</var> argument sets the <code title="attr-option-value"><a href="#attr-option-value">value</a></code> attribute.</p>
19832: <p>The <var title="">defaultSelected</var> argument sets the <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code> attribute.</p>
19833: <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>
19834:
19835: </dd>
19836:
19837: </dl>
19838: <p>The <dfn id="dom-option-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn>
1.595 mike 19839: IDL attribute must <a href="#reflect">reflect</a> the content attribute of the
19840: same name. The <dfn id="dom-option-defaultselected" role="button" tabindex="0" aria-haspopup="true"><code>defaultSelected</code></dfn>
1.545 mike 19841: 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>
19842: <h4 id="the-textarea-element"><span class="secno">4.10.13 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>textarea</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
19843: <dd><a href="#flow-content">Flow content</a>.</dd>
19844: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
19845: <dd><a href="#interactive-content">Interactive content</a>.</dd>
19846: <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>
1.629 ! mike 19847: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 19848: <dt>Contexts in which this element can be used:</dt>
19849: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
19850: <dt>Content model:</dt>
19851: <dd><a href="#text-content" title="text content">Text</a>.</dd>
19852: <dt>Content attributes:</dt>
19853: <dd><a href="#global-attributes">Global attributes</a></dd>
19854: <dd><code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code></dd>
19855: <dd><code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code></dd>
19856: <dd><code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code></dd>
19857: <dd><code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code></dd>
19858: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
19859: <dd><code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code></dd>
19860: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
19861: <dd><code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code></dd>
19862: <dd><code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code></dd>
19863: <dd><code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code></dd>
19864: <dd><code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code></dd>
19865: <dd><code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code></dd>
19866: <dt>DOM interface:</dt>
19867: <dd>
19868: <pre class="idl">interface <dfn id="htmltextareaelement" role="button" tabindex="0" aria-haspopup="true">HTMLTextAreaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
19869: attribute boolean <a href="#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
19870: attribute unsigned long <a href="#dom-textarea-cols" title="dom-textarea-cols">cols</a>;
19871: attribute DOMString <a href="#dom-textarea-dirname" title="dom-textarea-dirName">dirName</a>;
19872: attribute boolean <a href="#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
19873: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
19874: attribute long <a href="#dom-textarea-maxlength" title="dom-textarea-maxLength">maxLength</a>;
19875: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
19876: attribute DOMString <a href="#dom-textarea-placeholder" title="dom-textarea-placeholder">placeholder</a>;
19877: attribute boolean <a href="#dom-textarea-readonly" title="dom-textarea-readOnly">readOnly</a>;
19878: attribute boolean <a href="#dom-textarea-required" title="dom-textarea-required">required</a>;
19879: attribute unsigned long <a href="#dom-textarea-rows" title="dom-textarea-rows">rows</a>;
19880: attribute DOMString <a href="#dom-textarea-wrap" title="dom-textarea-wrap">wrap</a>;
19881:
19882: readonly attribute DOMString <a href="#dom-textarea-type" title="dom-textarea-type">type</a>;
19883: attribute DOMString <a href="#dom-textarea-defaultvalue" title="dom-textarea-defaultValue">defaultValue</a>;
19884: attribute DOMString <a href="#dom-textarea-value" title="dom-textarea-value">value</a>;
19885: readonly attribute unsigned long <a href="#dom-textarea-textlength" title="dom-textarea-textLength">textLength</a>;
19886:
19887: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
19888: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
19889: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
19890: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 19891: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 19892:
19893: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
19894:
19895: void <a href="#dom-textarea-input-select" title="dom-textarea/input-select">select</a>();
19896: attribute unsigned long <a href="#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
19897: attribute unsigned long <a href="#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
19898: attribute DOMString <a href="#dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;
1.562 mike 19899: void <a href="#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction);
1.545 mike 19900: };</pre>
19901: </dd>
19902: </dl><p>The <code><a href="#the-textarea-element">textarea</a></code> element <a href="#represents">represents</a> a
19903: multiline plain text edit control<span class="impl"> for the
19904: element's <dfn id="concept-textarea-raw-value" role="button" tabindex="0" aria-haspopup="true">raw
19905: value</dfn></span>. The contents of the control represent the
19906: control's default value.</p><p>The <dfn id="attr-textarea-readonly" role="button" tabindex="0" aria-haspopup="true"><code>readonly</code></dfn> attribute
19907: is a <a href="#boolean-attribute">boolean attribute</a> used to control whether the text
19908: can be edited by the user or not.</p><p>The <dfn id="attr-textarea-cols" role="button" tabindex="0" aria-haspopup="true"><code>cols</code></dfn>
19909: attribute specifies the expected maximum number of characters per
19910: line. If the <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code> attribute
19911: is specified, its value must be a <a href="#valid-non-negative-integer">valid non-negative
19912: integer</a> greater than zero. <span class="impl">If applying the
19913: <a href="#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to the
19914: attribute's value results in a number greater than zero, then the
19915: element's <dfn id="attr-textarea-cols-value" role="button" tabindex="0" aria-haspopup="true">character
19916: width</dfn> is that value; otherwise, it is 20.</span></p><p>The <dfn id="attr-textarea-rows" role="button" tabindex="0" aria-haspopup="true"><code>rows</code></dfn>
19917: 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
19918: value must be a <a href="#valid-non-negative-integer">valid non-negative integer</a> greater than
19919: zero. <span class="impl">If applying the <a href="#rules-for-parsing-non-negative-integers">rules for parsing
19920: non-negative integers</a> to the attribute's value results in a
19921: number greater than zero, then the element's <dfn id="attr-textarea-rows-value" role="button" tabindex="0" aria-haspopup="true">character height</dfn> is that
19922: value; otherwise, it is 2.</span></p><p>The <dfn id="attr-textarea-wrap" role="button" tabindex="0" aria-haspopup="true"><code>wrap</code></dfn>
19923: attribute is an <a href="#enumerated-attribute">enumerated attribute</a> with two keywords
19924: and states: the <dfn id="attr-textarea-wrap-soft" role="button" tabindex="0" aria-haspopup="true"><code>soft</code></dfn> keyword
19925: which maps to the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state, and the
19926: <dfn id="attr-textarea-wrap-hard" role="button" tabindex="0" aria-haspopup="true"><code>hard</code></dfn> keyword
19927: which maps to the <a href="#attr-textarea-wrap-hard-state" title="attr-textarea-wrap-hard-state">Hard</a> state. The
19928: <i>missing value default</i> is the <a href="#attr-textarea-wrap-soft-state" title="attr-textarea-wrap-soft-state">Soft</a> state.</p><p>The <dfn id="attr-textarea-wrap-soft-state" role="button" tabindex="0" aria-haspopup="true">Soft</dfn> state
19929: indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is not to be
19930: wrapped when it is submitted (though it can still be wrapped in the
19931: rendering).</p><p>The <dfn id="attr-textarea-wrap-hard-state" role="button" tabindex="0" aria-haspopup="true">Hard</dfn> state
19932: indicates that the text in the <code><a href="#the-textarea-element">textarea</a></code> is to have
19933: newlines added by the user agent so that the text is wrapped when it
19934: is submitted.</p><p>If the element's <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code>
19935: 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
19936: specified.</p><p>The <dfn id="attr-textarea-maxlength" role="button" tabindex="0" aria-haspopup="true"><code>maxlength</code></dfn>
19937: attribute is a <a href="#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a> controlled by the
19938: <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><p>If the <code><a href="#the-textarea-element">textarea</a></code> element has a <a href="#maximum-allowed-value-length">maximum allowed
19939: value length</a>, then the element's children must be such that
19940: the <a href="#code-point-length">code-point length</a> of the value of the element's
19941: <code><a href="#textcontent">textContent</a></code> IDL attribute is equal to or less than the
19942: element's <a href="#maximum-allowed-value-length">maximum allowed value length</a>.</p><p>The <dfn id="attr-textarea-required" role="button" tabindex="0" aria-haspopup="true"><code>required</code></dfn> attribute
19943: is a <a href="#boolean-attribute">boolean attribute</a>. When specified, the user will
19944: be required to enter a value before submitting the form.</p><p>The <dfn id="attr-textarea-placeholder" role="button" tabindex="0" aria-haspopup="true"><code>placeholder</code></dfn>
19945: attribute represents a hint (a word or short phrase) intended to aid
19946: the user with data entry. A hint could be a sample value or a brief
19947: description of the expected format. The attribute, if specified,
19948: must have a value that contains no U+000A LINE FEED (LF) or U+000D
19949: CARRIAGE RETURN (CR) characters.</p><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><p>The <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code>
19950: attribute should not be used as an alternative to a
19951: <code><a href="#the-label-element">label</a></code>.</p><p>The <dfn id="attr-textarea-dirname" role="button" tabindex="0" aria-haspopup="true"><code>dirname</code></dfn>
19952: attribute is a <a href="#form-control-dirname-attribute">form control <code title="">dirname</code>
19953: attribute</a>.</p><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
19954: explicitly associate the <code><a href="#the-textarea-element">textarea</a></code> element with its
19955: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
19956: 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
19957: the control non-interactive and to prevent its value from being
19958: submitted. The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>
19959: attribute controls focus.</p><dl class="domintro"><dt><var title="">textarea</var> . <code title="attr-textarea-type">type</code></dt>
19960:
19961: <dd>
19962:
19963: <p>Returns the string "<code title="">textarea</code>".</p>
19964:
19965: </dd>
19966:
19967: <dt><var title="">textarea</var> . <code title="attr-textarea-value">value</code></dt>
19968:
19969: <dd>
19970:
19971: <p>Returns the current value of the element.</p>
19972:
19973: <p>Can be set, to change the value.</p>
19974:
19975: </dd>
19976:
19977: </dl>
19978: <p>The <dfn id="dom-textarea-cols" role="button" tabindex="0" aria-haspopup="true"><code>cols</code></dfn>, <dfn id="dom-textarea-placeholder" role="button" tabindex="0" aria-haspopup="true"><code>placeholder</code></dfn>,
19979: <dfn id="dom-textarea-required" role="button" tabindex="0" aria-haspopup="true"><code>required</code></dfn>, <dfn id="dom-textarea-rows" role="button" tabindex="0" aria-haspopup="true"><code>rows</code></dfn>, and <dfn id="dom-textarea-wrap" role="button" tabindex="0" aria-haspopup="true"><code>wrap</code></dfn> attributes must
19980: <a href="#reflect">reflect</a> the respective content attributes of the same
19981: 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
19982: to only non-negative numbers greater than zero</a>. The <code title="dom-textarea-cols"><a href="#dom-textarea-cols">cols</a></code> attribute's default value is
19983: 20. The <code title="dom-textarea-rows"><a href="#dom-textarea-rows">rows</a></code> attribute's
19984: default value is 2. The <dfn id="dom-textarea-dirname" role="button" tabindex="0" aria-haspopup="true"><code>dirName</code></dfn> IDL
19985: attribute must <a href="#reflect">reflect</a> the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> content attribute. The
19986: <dfn id="dom-textarea-maxlength" role="button" tabindex="0" aria-haspopup="true"><code>maxLength</code></dfn> IDL
19987: attribute must <a href="#reflect">reflect</a> the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code> content attribute,
19988: <a href="#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>. The <dfn id="dom-textarea-readonly" role="button" tabindex="0" aria-haspopup="true"><code>readOnly</code></dfn> IDL
19989: attribute must <a href="#reflect">reflect</a> the <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code> content
19990: attribute.</p>
19991: <div class="example">
19992:
19993: <p>Here is an example of a <code><a href="#the-textarea-element">textarea</a></code> being used for
19994: unrestricted free-form text input in a form:</p>
19995:
19996: <pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p></pre>
19997:
19998: <p>To specify a maximum length for the comments, one can use
19999: the <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code>
20000: attribute:</p>
20001:
20002: <pre><p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p></pre>
20003:
20004: <p>To give a default value, text can be included inside the element:</p>
20005:
20006: <pre><p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p></pre>
20007:
20008: <p>To have the browser submit <a href="#the-directionality">the directionality</a> of
20009: the element along with the value, the <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code> attribute can be
20010: specified:</p>
20011:
20012: <pre><p>If you have any comments, please let us know (you may use either English or Hebrew for your comments):
20013: <textarea cols=80 name=comments dirname=comments.dir></textarea></p></pre>
20014:
20015: </div><h4 id="the-keygen-element"><span class="secno">4.10.14 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>keygen</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
20016: <dd><a href="#flow-content">Flow content</a>.</dd>
20017: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
20018: <dd><a href="#interactive-content">Interactive content</a>.</dd>
20019: <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>
1.629 ! mike 20020: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 20021: <dt>Contexts in which this element can be used:</dt>
20022: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
20023: <dt>Content model:</dt>
20024: <dd>Empty.</dd>
20025: <dt>Content attributes:</dt>
20026: <dd><a href="#global-attributes">Global attributes</a></dd>
20027: <dd><code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code></dd>
20028: <dd><code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">challenge</a></code></dd>
20029: <dd><code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code></dd>
20030: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
20031: <dd><code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code></dd>
20032: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
20033: <dt>DOM interface:</dt>
20034: <dd>
20035: <pre class="idl">interface <dfn id="htmlkeygenelement" role="button" tabindex="0" aria-haspopup="true">HTMLKeygenElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
20036: attribute boolean <a href="#dom-fe-autofocus" title="dom-fe-autofocus">autofocus</a>;
20037: attribute DOMString <a href="#dom-keygen-challenge" title="dom-keygen-challenge">challenge</a>;
20038: attribute boolean <a href="#dom-fe-disabled" title="dom-fe-disabled">disabled</a>;
20039: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
20040: attribute DOMString <a href="#dom-keygen-keytype" title="dom-keygen-keytype">keytype</a>;
20041: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
20042:
20043: readonly attribute DOMString <a href="#dom-keygen-type" title="dom-keygen-type">type</a>;
20044:
20045: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
20046: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
20047: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
20048: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 20049: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 20050:
20051: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
20052: };</pre>
20053: </dd>
20054: </dl><p>The <code><a href="#the-keygen-element">keygen</a></code> element <a href="#represents">represents</a> a key
20055: pair generator control. When the control's form is submitted, the
20056: private key is stored in the local keystore, and the public key is
20057: packaged and sent to the server.</p><p>The <dfn id="attr-keygen-challenge" role="button" tabindex="0" aria-haspopup="true"><code>challenge</code></dfn> attribute
20058: may be specified. Its value will be packaged with the submitted
20059: key.</p><p>The <dfn id="attr-keygen-keytype" role="button" tabindex="0" aria-haspopup="true"><code>keytype</code></dfn>
20060: attribute is an <a href="#enumerated-attribute">enumerated attribute</a>. The following
20061: table lists the keywords and states for the attribute — the
20062: keywords in the left column map to the states listed in the cell in
20063: the second column on the same row as the keyword. User agents are
20064: not required to support these values, and must only recognize values
20065: whose corresponding algorithms they support.</p><table><thead><tr><th> Keyword </th><th> State
20066: </th></tr></thead><tbody><tr><td> <code title="">rsa</code>
20067: </td><td> <i title="">RSA</i>
20068: </td></tr></tbody></table><p>The <i>invalid value default</i> state is the <i title="">unknown</i> state. The <i>missing value default</i> state
20069: is the <i title="">RSA</i> state, if it is supported, or the <i title="">unknown</i> state otherwise.</p><p class="note">This specification does not specify what key types
20070: user agents are to support — it is possible for a user agent
20071: to not support any key types at all.</p><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
20072: explicitly associate the <code><a href="#the-keygen-element">keygen</a></code> element with its
20073: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
20074: 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
20075: the control non-interactive and to prevent its value from being
20076: submitted. The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>
20077: attribute controls focus.</p><dl class="domintro"><dt><var title="">keygen</var> . <code title="attr-keygen-type">type</code></dt>
20078:
20079: <dd>
20080:
20081: <p>Returns the string "<code title="">keygen</code>".</p>
20082:
20083: </dd>
20084:
20085: </dl>
20086: <p>The <dfn id="dom-keygen-challenge" role="button" tabindex="0" aria-haspopup="true"><code>challenge</code></dfn> IDL
20087: attribute must <a href="#reflect">reflect</a> the content attribute of the
20088: same name.</p>
20089:
20090: <p>The <dfn id="dom-keygen-keytype" role="button" tabindex="0" aria-haspopup="true"><code>keytype</code></dfn>
20091: IDL attribute must <a href="#reflect">reflect</a> the content attribute of the
20092: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
20093: <p class="note">This specification does not specify how the private
20094: key generated is to be used. It is expected that after receiving the
20095: <code><a href="#signedpublickeyandchallenge">SignedPublicKeyAndChallenge</a></code> (SPKAC) structure, the
20096: server will generate a client certificate and offer it back to the
20097: user for download; this certificate, once downloaded and stored in
20098: the key store along with the private key, can then be used to
20099: authenticate to services that use TLS and certificate
20100: authentication.</p><div class="example">
20101:
20102: <p>To generate a key pair, add the private key to the user's key
20103: store, and submit the public key to the server, markup such as the
20104: following can be used:</p>
20105:
20106: <pre><form action="processkey.cgi" method="post" enctype="multipart/form-data">
20107: <p><keygen name="key"></p>
20108: <p><input type=submit value="Submit key..."></p>
20109: </form></pre>
20110:
20111: <p>The server will then receive a form submission with a packaged
20112: RSA public key as the value of "<code title="">key</code>". This
20113: can then be used for various purposes, such as generating a client
20114: certificate, as mentioned above.</p>
20115:
20116: </div><h4 id="the-output-element"><span class="secno">4.10.15 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>output</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
20117: <dd><a href="#flow-content">Flow content</a>.</dd>
20118: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
20119: <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>
1.629 ! mike 20120: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 20121: <dt>Contexts in which this element can be used:</dt>
20122: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
20123: <dt>Content model:</dt>
20124: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
20125: <dt>Content attributes:</dt>
20126: <dd><a href="#global-attributes">Global attributes</a></dd>
20127: <dd><code title="attr-output-for"><a href="#attr-output-for">for</a></code></dd>
20128: <dd><code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></dd>
20129: <dd><code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></dd>
20130: <dt>DOM interface:</dt>
20131: <dd>
20132: <pre class="idl">interface <dfn id="htmloutputelement" role="button" tabindex="0" aria-haspopup="true">HTMLOutputElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
20133: [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] readonly attribute <a href="#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-output-htmlfor" title="dom-output-htmlFor">htmlFor</a>;
20134: readonly attribute <a href="#htmlformelement">HTMLFormElement</a>? <a href="#dom-fae-form" title="dom-fae-form">form</a>;
20135: attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>;
20136:
20137: readonly attribute DOMString <a href="#dom-output-type" title="dom-output-type">type</a>;
20138: attribute DOMString <a href="#dom-output-defaultvalue" title="dom-output-defaultValue">defaultValue</a>;
20139: attribute DOMString <a href="#dom-output-value" title="dom-output-value">value</a>;
20140:
20141: readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
20142: readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
20143: readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
20144: boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
1.562 mike 20145: void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(DOMString error);
1.545 mike 20146:
20147: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
20148: };</pre>
20149: </dd>
20150: </dl><p>The <code><a href="#the-output-element">output</a></code> element <a href="#represents">represents</a> the result of a
20151: calculation.</p><p>The <dfn id="attr-output-for" role="button" tabindex="0" aria-haspopup="true"><code>for</code></dfn> content
20152: attribute allows an explicit relationship to be made between the
20153: result of a calculation and the elements that represent the values
20154: that went into the calculation or that otherwise influenced the
20155: calculation. The <code title="attr-output-for"><a href="#attr-output-for">for</a></code> attribute,
20156: if specified, must contain a string consisting of an <a href="#unordered-set-of-unique-space-separated-tokens">unordered
20157: set of unique space-separated tokens</a> that are
20158: <a href="#case-sensitive">case-sensitive</a>, each of which must have the value of an
20159: <a href="#concept-id" title="concept-id">ID</a> of an element in the same
20160: <code><a href="#document">Document</a></code>.</p><p>The <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute is used to
20161: explicitly associate the <code><a href="#the-output-element">output</a></code> element with its
20162: <a href="#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>
20163: attribute represents the element's name.</p><dl class="domintro"><dt><var title="">output</var> . <code title="dom-output-value" id="dom-output-value"><a href="#dom-output-value">value</a></code> [ = <var title="">value</var> ]</dt>
20164:
20165: <dd>
20166:
20167: <p>Returns the element's current value.</p>
20168:
20169: <p>Can be set, to change the value.</p>
20170:
20171: </dd>
20172:
20173: <dt><var title="">output</var> . <code title="dom-output-defaultValue" id="dom-output-defaultvalue"><a href="#dom-output-defaultvalue">defaultValue</a></code> [ = <var title="">value</var> ]</dt>
20174:
20175: <dd>
20176:
20177: <p>Returns the element's current default value.</p>
20178:
20179: <p>Can be set, to change the default value.</p>
20180:
20181: </dd>
20182:
20183: <dt><var title="">output</var> . <code title="dom-output-type" id="dom-output-type"><a href="#dom-output-type">type</a></code></dt>
20184:
20185: <dd>
20186:
20187: <p>Returns the string "<code title="">output</code>".</p>
20188:
20189: </dd>
20190:
20191: </dl>
20192: <p>The <dfn id="dom-output-htmlfor" role="button" tabindex="0" aria-haspopup="true"><code>htmlFor</code></dfn>
20193: 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>
20194: <div class="example">
20195:
20196: <p>A simple calculator could use <code><a href="#the-output-element">output</a></code> for its
20197: display of calculated results:</p>
20198:
20199: <pre><form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
20200: <input name=a type=number step=any> +
20201: <input name=b type=number step=any> =
20202: <output name=o></output>
20203: </form></pre>
20204:
20205: </div><h4 id="the-progress-element"><span class="secno">4.10.16 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>progress</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
20206: <dd><a href="#flow-content">Flow content</a>.</dd>
20207: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
20208: <dd><a href="#category-label" title="category-label">Labelable element</a>.</dd>
1.629 ! mike 20209: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 20210: <dt>Contexts in which this element can be used:</dt>
20211: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
20212: <dt>Content model:</dt>
20213: <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>
20214: <dt>Content attributes:</dt>
20215: <dd><a href="#global-attributes">Global attributes</a></dd>
20216: <dd><code title="attr-progress-value"><a href="#attr-progress-value">value</a></code></dd>
20217: <dd><code title="attr-progress-max"><a href="#attr-progress-max">max</a></code></dd>
20218: <dt>DOM interface:</dt>
20219: <dd>
20220: <pre class="idl">interface <dfn id="htmlprogresselement" role="button" tabindex="0" aria-haspopup="true">HTMLProgressElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
20221: attribute double <a href="#dom-progress-value" title="dom-progress-value">value</a>;
20222: attribute double <a href="#dom-progress-max" title="dom-progress-max">max</a>;
20223: readonly attribute double <a href="#dom-progress-position" title="dom-progress-position">position</a>;
20224: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
20225: };</pre>
20226: </dd>
20227: </dl><p>The <code><a href="#the-progress-element">progress</a></code> element <a href="#represents">represents</a> the
20228: completion progress of a task. The progress is either indeterminate,
20229: indicating that progress is being made but that it is not clear how
20230: much more work remains to be done before the task is complete (e.g.
20231: because the task is waiting for a remote host to respond), or the
20232: progress is a number in the range zero to a maximum, giving the
20233: fraction of work that has so far been completed.</p><p>There are two attributes that determine the current task
20234: completion represented by the element. The <dfn id="attr-progress-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> attribute
20235: specifies how much of the task has been completed, and the <dfn id="attr-progress-max" role="button" tabindex="0" aria-haspopup="true"><code>max</code></dfn> attribute specifies
20236: how much work the task requires in total. The units are arbitrary
1.552 mike 20237: and not specified.</p><p class="note">To make a determinate progress bar, add a <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute with the current
1.545 mike 20238: progress (either a number from 0.0 to 1.0, or, if the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute is specified, a
1.552 mike 20239: number from 0 to the value of the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code> attribute). To make an
1.545 mike 20240: indeterminate progress bar, remove the <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute.</p><p>Authors are encouraged to also include the current value and the
20241: maximum value inline as text inside the element, so that the
20242: progress is made available to users of legacy user agents.</p><div class="example">
20243: <p>Here is a snippet of a Web application that shows the progress
20244: of some automated task:</p>
20245: <pre><section>
20246: <h2>Task Progress</h2>
20247: <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
20248: <script>
20249: var progressBar = document.getElementById('p');
20250: function updateProgress(newValue) {
20251: progressBar.value = newValue;
20252: progressBar.getElementsByTagName('span')[0].textContent = newValue;
20253: }
20254: </script>
20255: </section></pre>
20256: <p>(The <code>updateProgress()</code> method in this example would
20257: be called by some other code on the page to update the actual
20258: progress bar as the task progressed.)</p>
20259: </div><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
20260: have values that are <a href="#valid-floating-point-number" title="valid floating point number">valid
20261: floating point numbers</a>. The <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code> attribute, if present, must
20262: have a value equal to or greater than zero, and less than or equal
20263: to the value of the <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code>
20264: 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
20265: have a value greater than zero.</p><p class="note">The <code><a href="#the-progress-element">progress</a></code> element is the wrong
20266: element to use for something that is just a gauge, as opposed to
20267: task progress. For instance, indicating disk space usage using
20268: <code><a href="#the-progress-element">progress</a></code> would be inappropriate. Instead, the
20269: <code><a href="#the-meter-element">meter</a></code> element is available for such use cases.</p><dl class="domintro"><dt><var title="">progress</var> . <code title="dom-progress-position" id="dom-progress-position"><a href="#dom-progress-position">position</a></code></dt>
20270:
20271: <dd>
20272:
20273: <p>For a determinate progress bar (one with known current and
20274: maximum values), returns the result of dividing the current value
20275: by the maximum value.</p>
20276:
20277: <p>For an indeterminate progress bar, returns −1.</p>
20278:
20279: </dd>
20280:
20281: </dl>
20282: <p>If the progress bar is an indeterminate progress bar, then the
20283: <dfn id="dom-progress-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> IDL
20284: attribute, on getting, must return 0. Otherwise, it must return the
20285: <a href="#concept-progress-value" title="concept-progress-value">current value</a>. On
20286: setting, the given value must be converted to the <a href="#best-representation-of-the-number-as-a-floating-point-number">best
20287: representation of the number as a floating point number</a> and
20288: then the <code title="dom-progress-value"><a href="#dom-progress-value">value</a></code> content
20289: attribute must be set to that string.</p>
20290:
20291: <p>The <dfn id="dom-progress-max" role="button" tabindex="0" aria-haspopup="true"><code>max</code></dfn> IDL
20292: attribute must <a href="#reflect">reflect</a> the content attribute of the
1.559 mike 20293: same name, <a href="#limited-to-numbers-greater-than-zero">limited to numbers greater than zero</a>. The
20294: default value for <code title="dom-progress-max"><a href="#dom-progress-max">max</a></code> is
20295: 1.0.</p>
1.545 mike 20296: <h4 id="the-meter-element"><span class="secno">4.10.17 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>meter</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
20297: <dd><a href="#flow-content">Flow content</a>.</dd>
20298: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
20299: <dd><a href="#category-label" title="category-label">Labelable element</a>.</dd>
1.629 ! mike 20300: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 20301: <dt>Contexts in which this element can be used:</dt>
20302: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
20303: <dt>Content model:</dt>
20304: <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>
20305: <dt>Content attributes:</dt>
20306: <dd><a href="#global-attributes">Global attributes</a></dd>
20307: <dd><code title="attr-meter-value"><a href="#attr-meter-value">value</a></code></dd>
20308: <dd><code title="attr-meter-min"><a href="#attr-meter-min">min</a></code></dd>
20309: <dd><code title="attr-meter-max"><a href="#attr-meter-max">max</a></code></dd>
20310: <dd><code title="attr-meter-low"><a href="#attr-meter-low">low</a></code></dd>
20311: <dd><code title="attr-meter-high"><a href="#attr-meter-high">high</a></code></dd>
20312: <dd><code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code></dd>
20313: <dt>DOM interface:</dt>
20314: <dd>
20315: <pre class="idl">interface <dfn id="htmlmeterelement" role="button" tabindex="0" aria-haspopup="true">HTMLMeterElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
20316: attribute double <a href="#dom-meter-value" title="dom-meter-value">value</a>;
20317: attribute double <a href="#dom-meter-min" title="dom-meter-min">min</a>;
20318: attribute double <a href="#dom-meter-max" title="dom-meter-max">max</a>;
20319: attribute double <a href="#dom-meter-low" title="dom-meter-low">low</a>;
20320: attribute double <a href="#dom-meter-high" title="dom-meter-high">high</a>;
20321: attribute double <a href="#dom-meter-optimum" title="dom-meter-optimum">optimum</a>;
20322: readonly attribute <a href="#nodelist">NodeList</a> <a href="#dom-lfe-labels" title="dom-lfe-labels">labels</a>;
20323: };</pre>
20324: </dd>
20325: </dl><p>The <code><a href="#the-meter-element">meter</a></code> element <a href="#represents">represents</a> a scalar
20326: measurement within a known range, or a fractional value; for example
20327: disk usage, the relevance of a query result, or the fraction of a
20328: voting population to have selected a particular candidate.</p><p>This is also known as a gauge.</p><p class="note">The <code><a href="#the-meter-element">meter</a></code> element should not be used to
20329: indicate progress (as in a progress bar). For that role, HTML
20330: provides a separate <code><a href="#the-progress-element">progress</a></code> element.</p><p class="note">The <code><a href="#the-meter-element">meter</a></code> element also does not
20331: represent a scalar value of arbitrary range — for example, it
20332: would be wrong to use this to report a weight, or height, unless
20333: there is a known maximum value.</p><p>There are six attributes that determine the semantics of the
20334: gauge represented by the element.</p><p>The <dfn id="attr-meter-min" role="button" tabindex="0" aria-haspopup="true"><code>min</code></dfn> attribute
20335: specifies the lower bound of the range, and the <dfn id="attr-meter-max" role="button" tabindex="0" aria-haspopup="true"><code>max</code></dfn> attribute specifies
20336: the upper bound. The <dfn id="attr-meter-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> attribute
20337: specifies the value to have the gauge indicate as the "measured"
20338: value.</p><p>The other three attributes can be used to segment the gauge's
20339: range into "low", "medium", and "high" parts, and to indicate which
20340: part of the gauge is the "optimum" part. The <dfn id="attr-meter-low" role="button" tabindex="0" aria-haspopup="true"><code>low</code></dfn> attribute specifies
20341: the range that is considered to be the "low" part, and the <dfn id="attr-meter-high" role="button" tabindex="0" aria-haspopup="true"><code>high</code></dfn> attribute specifies
20342: the range that is considered to be the "high" part. The <dfn id="attr-meter-optimum" role="button" tabindex="0" aria-haspopup="true"><code>optimum</code></dfn> attribute
20343: gives the position that is "optimum"; if that is higher than the
20344: "high" value then this indicates that the higher the value, the
20345: better; if it's lower than the "low" mark then it indicates that
20346: lower values are better, and naturally if it is in between then it
20347: indicates that neither high nor low values are good.</p><p><span class="impl"><strong>Authoring
20348: requirements</strong>:</span> The <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code> attribute must be
20349: 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,
20350: must have values that are <a href="#valid-floating-point-number" title="valid floating point
20351: number">valid floating point numbers</a>.</p><p>In addition, the attributes' values are further constrained:</p><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><p>If the <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code> attribute
20352: attribute is specified, then let <var title="">minimum</var> be that
20353: attribute's value; otherwise, let it be zero.</p><p>If the <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code> attribute
20354: attribute is specified, then let <var title="">maximum</var> be that
20355: attribute's value; otherwise, let it be 1.0.</p><p>The following inequalities must hold, as applicable:</p><ul class="brief"><li><var title="">minimum</var> ≤ <var title="">value</var> ≤ <var title="">maximum</var></li>
20356: <li><var title="">minimum</var> ≤ <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> ≤ <var title="">maximum</var> (if <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code> is specified)</li>
20357: <li><var title="">minimum</var> ≤ <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> ≤ <var title="">maximum</var> (if <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code> is specified)</li>
20358: <li><var title="">minimum</var> ≤ <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> ≤ <var title="">maximum</var> (if <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code> is specified)</li>
20359: <li><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> (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>
20360: </ul><p class="note">If no minimum or maximum is specified, then the
20361: range is assumed to be 0..1, and the value thus has to be within
20362: that range.</p><p>Authors are encouraged to include a textual representation of the
20363: gauge's state in the element's contents, for users of user agents
20364: that do not support the <code><a href="#the-meter-element">meter</a></code> element.</p><div class="example">
20365:
20366: <p>The following examples show three gauges that would all be
20367: three-quarters full:</p>
20368:
20369: <pre>Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
20370: Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
20371: Tickets sold: <meter min="0" max="100" value="75"></meter></pre>
20372:
20373: <p>The following example is incorrect use of the element, because
20374: it doesn't give a range (and since the default maximum is 1, both
20375: of the gauges would end up looking maxed out):</p>
20376:
20377: <pre class="bad"><p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
20378: and a height of <meter value=2>2cm</meter>.</p> <!-- <strong>BAD!</strong> --></pre>
20379:
20380: <p>Instead, one would either not include the meter element, or use
20381: the meter element with a defined range to give the dimensions in
20382: context compared to other pies:</p>
20383:
20384: <pre><p>The grapefruit pie had a radius of 12cm and a height of
20385: 2cm.</p>
20386: <dl>
20387: <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
20388: <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
20389: </dl></pre>
20390:
20391: </div><p>There is no explicit way to specify units in the
20392: <code><a href="#the-meter-element">meter</a></code> element, but the units may be specified in the
20393: <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute in free-form text.</p><div class="example">
20394:
20395: <p>The example above could be extended to mention the units:</p>
20396:
20397: <pre><dl>
20398: <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
20399: <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
20400: </dl></pre>
20401:
20402: </div><div class="example">
20403: <p>The following markup:</p>
20404: <pre><h3>Suggested groups</h3>
20405: <menu type="toolbar">
20406: <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
20407: </menu>
20408: <ul>
20409: <li>
20410: <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
20411: <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
20412: <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
20413: <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p>
20414: </li>
20415: <li>
20416: <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
20417: <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
20418: <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
20419: <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p>
20420: </li>
20421: <li>
20422: <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
20423: <a href="/group/mozilla.dev.general/subscribe">join</a></p>
20424: <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p>
20425: </li>
20426: </ul></pre>
20427: <p>Might be rendered as follows:</p>
20428: <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." height="178" src="http://dev.w3.org/html5/spec/images/sample-meter.png" width="332"></p>
20429: </div><p>User agents <span class="impl">may</span> combine the value of
20430: the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute and the other
20431: attributes to provide context-sensitive help or inline text
20432: detailing the actual values.</p><div class="example">
20433: <p>For example, the following snippet:</p>
20434: <pre><meter min=0 max=60 value=23.2 title=seconds></meter></pre>
20435: <p>...might cause the user agent to display a gauge with a tooltip
20436: saying "Value: 23.2 out of 60." on one line and "seconds" on a
20437: second line.</p>
20438: </div>
20439: <p>The <dfn id="dom-meter-value" role="button" tabindex="0" aria-haspopup="true"><code>value</code></dfn> IDL
20440: attribute, on getting, must return the <a href="#concept-meter-actual" title="concept-meter-actual">actual value</a>. On setting, the
20441: given value must be converted to the <a href="#best-representation-of-the-number-as-a-floating-point-number">best representation of
20442: the number as a floating point number</a> and then the <code title="dom-meter-value"><a href="#dom-meter-value">value</a></code> content attribute must be set
20443: to that string.</p>
20444: <div class="example">
20445:
20446: <p>The following example shows how a gauge could fall back to
20447: localized or pretty-printed text.</p>
20448:
20449: <pre><p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
20450: out of 233 257 824 bytes available</meter></p></pre>
20451:
20452: </div><h4 id="association-of-controls-and-forms"><span class="secno">4.10.18 </span>Association of controls and forms</h4><p>A <a href="#form-associated-element">form-associated element</a> can have a relationship
20453: with a <code><a href="#the-form-element">form</a></code> element, which is called the element's
20454: <dfn id="form-owner" role="button" tabindex="0" aria-haspopup="true">form owner</dfn>. If a <a href="#form-associated-element">form-associated element</a> is
20455: not associated with a <code><a href="#the-form-element">form</a></code> element, its <a href="#form-owner">form
20456: owner</a> is said to be null.</p><p>A <a href="#form-associated-element">form-associated element</a> is, by default, associated
20457: with its <span class="impl">nearest</span> ancestor
20458: <code><a href="#the-form-element">form</a></code> element<span class="impl"> (as described
20459: below)</span>, but may have a <dfn id="attr-fae-form" role="button" tabindex="0" aria-haspopup="true"><code>form</code></dfn> attribute specified to
20460: override this.</p><p class="note">This feature allows authors to work around the lack
20461: of support for nested <code><a href="#the-form-element">form</a></code> elements.</p><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 that
20462: attribute's value must be the <a href="#concept-id" title="concept-id">ID</a> of a <code><a href="#the-form-element">form</a></code> element in
20463: the element's owner <code><a href="#document">Document</a></code>.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-fae-form" id="dom-fae-form"><a href="#dom-fae-form">form</a></code></dt>
20464:
20465: <dd>
20466:
20467: <p>Returns the element's <a href="#form-owner">form owner</a>.</p>
20468:
20469: <p>Returns null if there isn't one.</p>
20470:
20471: </dd>
20472:
20473: </dl><h4 id="attributes-common-to-form-controls"><span class="secno">4.10.19 </span><dfn role="button" tabindex="0" aria-haspopup="true">Attributes common to form controls</dfn></h4><h5 id="naming-form-controls"><span class="secno">4.10.19.1 </span>Naming form controls</h5><p>The <dfn id="attr-fe-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> content
20474: attribute gives the name of the form control, as used in <a href="#form-submission">form
20475: 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
20476: is specified, its value must not be the empty string.</p><p>Any non-empty value for <code title="attr-form-name"><a href="#attr-form-name">name</a></code>
20477: is allowed, but the names "<code title="attr-fe-name-charset"><a href="#attr-fe-name-charset">_charset_</a></code>" and "<code title="attr-fe-name-isindex"><a href="#attr-fe-name-isindex">isindex</a></code>" are special:</p><dl><dt><dfn id="attr-fe-name-isindex" role="button" tabindex="0" aria-haspopup="true"><code>isindex</code></dfn></dt>
20478: <dd>
20479: <p>This value, if used as the name of a <a href="#text-state-and-search-state" title="attr-input-type-text">Text</a> control that is the first
20480: control in a form that is submitted using the <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
20481: mechanism, causes the submission to only include the value of this
20482: control, with no name.</p>
20483: </dd>
20484:
20485: <dt><dfn id="attr-fe-name-charset" role="button" tabindex="0" aria-haspopup="true"><code>_charset_</code></dfn></dt>
20486: <dd>
20487: <p>This value, if used as the name of a <a href="#hidden-state" title="attr-input-type-hidden">Hidden</a> control with no <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute, is automatically
20488: given a value during submission consisting of the submission
20489: character encoding.</p>
20490: </dd>
20491:
20492: </dl>
20493: <p>The <dfn id="dom-fe-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> IDL
20494: attribute must <a href="#reflect">reflect</a> the <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> content attribute.</p>
20495: <h5 id="enabling-and-disabling-form-controls"><span class="secno">4.10.19.2 </span>Enabling and disabling form controls</h5><p>The <dfn id="attr-fe-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn>
20496: content attribute is a <a href="#boolean-attribute">boolean attribute</a>.</p><p>A form control is <dfn id="concept-fe-disabled" role="button" tabindex="0" aria-haspopup="true">disabled</dfn>
20497: if its <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute is
20498: set, or if it is a descendant of a <code><a href="#the-fieldset-element">fieldset</a></code> element
20499: whose <code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">disabled</a></code> attribute
20500: is set and is <em>not</em> a descendant of that
20501: <code><a href="#the-fieldset-element">fieldset</a></code> element's first <code><a href="#the-legend-element">legend</a></code> element
20502: child, if any.</p>
20503: <p>The <dfn id="dom-fe-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn> IDL
20504: attribute must <a href="#reflect">reflect</a> the <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> content attribute.</p>
20505: <h5 id="autofocusing-a-form-control"><span class="secno">4.10.19.4 </span>Autofocusing a form control</h5><p>The <dfn id="attr-fe-autofocus" role="button" tabindex="0" aria-haspopup="true"><code>autofocus</code></dfn>
20506: content attribute allows the author to indicate that a control is to
20507: be focused as soon as the page is loaded, allowing the user to just
20508: start typing without having to manually focus the main control.</p><p>The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute is
20509: a <a href="#boolean-attribute">boolean attribute</a>.</p><p>There must not be more than one element in the document with the
20510: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute
20511: specified.</p>
20512: <p>The <dfn id="dom-fe-autofocus" role="button" tabindex="0" aria-haspopup="true"><code>autofocus</code></dfn>
20513: IDL attribute must <a href="#reflect">reflect</a> the content attribute of the
20514: same name.</p>
20515: <div class="example">
20516: <p>In the following snippet, the text control would be focused when
20517: the document was loaded.</p>
20518: <pre><input maxlength="256" name="q" value="" autofocus>
20519: <input type="submit" value="Search"></pre>
20520: </div><h5 id="limiting-user-input-length"><span class="secno">4.10.19.5 </span>Limiting user input length</h5><p>A <dfn id="attr-fe-maxlength" role="button" tabindex="0" aria-haspopup="true">form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var>, declares a limit on the number of
20521: characters a user can input.</p><p>If an element has its <a href="#attr-fe-maxlength" title="attr-fe-maxlength">form
20522: control <code title="">maxlength</code> attribute</a> specified,
20523: the attribute's value must be a <a href="#valid-non-negative-integer">valid non-negative
20524: integer</a>. If the attribute is specified and applying the
20525: <a href="#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to its value
20526: results in a number, then that number is the element's <dfn id="maximum-allowed-value-length" role="button" tabindex="0" aria-haspopup="true">maximum
20527: allowed value length</dfn>. If the attribute is omitted or parsing
20528: its value results in an error, then there is no <a href="#maximum-allowed-value-length">maximum
20529: allowed value length</a>.</p><h5 id="form-submission-0"><span class="secno">4.10.19.6 </span>Form submission</h5><p><dfn id="attributes-for-form-submission" role="button" tabindex="0" aria-haspopup="true">Attributes for form submission</dfn> can be specified both
20530: 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
20531: represent buttons that submit forms, e.g. an <code><a href="#the-input-element">input</a></code>
20532: element whose <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute is
20533: in the <a href="#submit-button-state" title="attr-input-type-submit">Submit Button</a>
20534: state).
20535:
20536: </p><p>The <a href="#attributes-for-form-submission">attributes for form submission</a> that may be
20537: 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><p>The corresponding <a href="#attributes-for-form-submission">attributes for form submission</a>
20538: that may be specified on <a href="#concept-submit-button" title="concept-submit-button">submit
20539: 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
20540: default to the values given on the corresponding attributes on the
20541: <code><a href="#the-form-element">form</a></code> element.</p><hr><p>The <dfn id="attr-fs-action" role="button" tabindex="0" aria-haspopup="true"><code>action</code></dfn> and
20542: <dfn id="attr-fs-formaction" role="button" tabindex="0" aria-haspopup="true"><code>formaction</code></dfn>
20543: content attributes, if specified, must have a value that is a
20544: <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
20545: spaces</a>.</p><p>The <dfn id="concept-fs-action" role="button" tabindex="0" aria-haspopup="true">action</dfn> of an element is
20546: the value of the element's <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> attribute, if the
20547: element is a <a href="#concept-submit-button" title="concept-submit-button">submit
20548: button</a> and has such an attribute, or the value of its
20549: <a href="#form-owner">form owner</a>'s <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>
20550: attribute, if <em>it</em> has one, or else the empty string.</p><hr><p>The <dfn id="attr-fs-method" role="button" tabindex="0" aria-haspopup="true"><code>method</code></dfn> and
20551: <dfn id="attr-fs-formmethod" role="button" tabindex="0" aria-haspopup="true"><code>formmethod</code></dfn>
20552: content attributes are <a href="#enumerated-attribute" title="enumerated attribute">enumerated
20553: attributes</a> with the following keywords and states:</p><ul><li>The keyword <dfn id="attr-fs-method-get-keyword" role="button" tabindex="0" aria-haspopup="true"><code>get</code></dfn>, mapping
20554: to the state <dfn id="attr-fs-method-get" role="button" tabindex="0" aria-haspopup="true">GET</dfn>, indicating
20555: the HTTP GET method.</li>
20556:
20557: <li>The keyword <dfn id="attr-fs-method-post-keyword" role="button" tabindex="0" aria-haspopup="true"><code>post</code></dfn>, mapping
20558: to the state <dfn id="attr-fs-method-post" role="button" tabindex="0" aria-haspopup="true">POST</dfn>, indicating
20559: the HTTP POST method.</li>
20560:
20561: </ul><p>The <i>missing value default</i> for these attributes is the
20562: <a href="#attr-fs-method-get" title="attr-fs-method-GET">GET</a> state.</p><p>The <dfn id="concept-fs-method" role="button" tabindex="0" aria-haspopup="true">method</dfn> of an element is
20563: one of those 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
20564: element's <a href="#concept-fs-method" title="concept-fs-method">method</a> is that
20565: attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s
20566: <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-enctype" role="button" tabindex="0" aria-haspopup="true"><code>enctype</code></dfn> and
20567: <dfn id="attr-fs-formenctype" role="button" tabindex="0" aria-haspopup="true"><code>formenctype</code></dfn>
20568: content attributes are <a href="#enumerated-attribute" title="enumerated attribute">enumerated
20569: attributes</a> with the following keywords and states:</p><ul><li>The "<dfn id="attr-fs-enctype-urlencoded" role="button" tabindex="0" aria-haspopup="true"><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
20570: <li>The "<dfn id="attr-fs-enctype-formdata" role="button" tabindex="0" aria-haspopup="true"><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
20571: <li>The "<dfn id="attr-fs-enctype-text" role="button" tabindex="0" aria-haspopup="true"><code>text/plain</code></dfn>" keyword and corresponding state.</li>
20572: </ul><p>The <i>missing value default</i> for these attributes is the
20573: <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
20574: state.</p><p>The <dfn id="concept-fs-enctype" role="button" tabindex="0" aria-haspopup="true">enctype</dfn> of an element
20575: 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
20576: element's <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a> is that
20577: attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s
20578: <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn> and
20579: <dfn id="attr-fs-formtarget" role="button" tabindex="0" aria-haspopup="true"><code>formtarget</code></dfn>
20580: 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
20581: context names or keywords</a>.</p><p>The <dfn id="concept-fs-target" role="button" tabindex="0" aria-haspopup="true">target</dfn> of an element is
20582: the value of the element's <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> attribute, if the
20583: element is a <a href="#concept-submit-button" title="concept-submit-button">submit
20584: button</a> and has such an attribute; or the value of its
20585: <a href="#form-owner">form owner</a>'s <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>
20586: attribute, if <em>it</em> has such an attribute; or, if the
20587: <code><a href="#document">Document</a></code> contains a <code><a href="#the-base-element">base</a></code> element with a
20588: <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, then the
20589: value of the <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute
20590: of the first such <code><a href="#the-base-element">base</a></code> element; or, if there is no such
20591: element, the empty string.</p><hr><p>The <dfn id="attr-fs-novalidate" role="button" tabindex="0" aria-haspopup="true"><code>novalidate</code></dfn>
20592: and <dfn id="attr-fs-formnovalidate" role="button" tabindex="0" aria-haspopup="true"><code>formnovalidate</code></dfn>
20593: content attributes are <a href="#boolean-attribute" title="boolean attribute">boolean
20594: attributes</a>. If present, they indicate that the form is not to
20595: be validated during submission.</p><p>The <dfn id="concept-fs-novalidate" role="button" tabindex="0" aria-haspopup="true">no-validate state</dfn> of
20596: 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
20597: <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute
20598: 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,
20599: and false otherwise.</p><div class="example">
20600:
20601: <p>This attribute is useful to include "save" buttons on forms that
20602: have validation constraints, to allow users to save their progress
20603: even though they haven't fully entered the data in the form. The
20604: following example shows a simple form that has two required
20605: fields. There are three buttons: one to submit the form, which
20606: requires both fields to be filled in; one to save the form so that
20607: the user can come back and fill it in later; and one to cancel the
20608: form altogether.</p>
20609:
20610: <pre><form action="editor.cgi" method="post">
20611: <p><label>Name: <input required name=fn></label></p>
20612: <p><label>Essay: <textarea required name=essay></textarea></label></p>
20613: <p><input type=submit name=submit value="Submit essay"></p>
20614: <p><input type=submit formnovalidate name=save value="Save essay"></p>
20615: <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
20616: </form></pre>
20617:
20618: </div>
20619: <p>The <dfn id="dom-fs-action" role="button" tabindex="0" aria-haspopup="true"><code>action</code></dfn> IDL
20620: attribute must <a href="#reflect">reflect</a> the content attribute of the
20621: same name, except that on getting, when the content attribute is
20622: missing or its value is the empty string, <a href="#the-document-s-address">the document's
20623: address</a> must be returned instead. The <dfn id="dom-fs-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn> IDL attribute must
20624: <a href="#reflect">reflect</a> the content attribute of the same name. The
20625: <dfn id="dom-fs-method" role="button" tabindex="0" aria-haspopup="true"><code>method</code></dfn> and <dfn id="dom-fs-enctype" role="button" tabindex="0" aria-haspopup="true"><code>enctype</code></dfn> IDL attributes
20626: must <a href="#reflect">reflect</a> the respective content attributes of the
20627: same name, <a href="#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-encoding" role="button" tabindex="0" aria-haspopup="true"><code>encoding</code></dfn> IDL attribute
20628: must <a href="#reflect">reflect</a> the <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> content attribute,
20629: <a href="#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-novalidate" role="button" tabindex="0" aria-haspopup="true"><code>noValidate</code></dfn> IDL
20630: attribute must reflect the <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> content attribute. The
20631: <dfn id="dom-fs-formaction" role="button" tabindex="0" aria-haspopup="true"><code>formAction</code></dfn> IDL
20632: attribute must reflect the <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> content attribute,
20633: except that on getting, when the content attribute is missing or its
20634: value is the empty string, <a href="#the-document-s-address">the document's address</a> must
20635: be returned instead. The <dfn id="dom-fs-formenctype" role="button" tabindex="0" aria-haspopup="true"><code>formEnctype</code></dfn> IDL
20636: attribute must reflect the <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> content attribute,
20637: <a href="#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-formmethod" role="button" tabindex="0" aria-haspopup="true"><code>formMethod</code></dfn> IDL
20638: attribute must reflect the <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> content attribute,
20639: <a href="#limited-to-only-known-values">limited to only known values</a>. The <dfn id="dom-fs-formnovalidate" role="button" tabindex="0" aria-haspopup="true"><code>formNoValidate</code></dfn> IDL
20640: attribute must reflect the <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> content
20641: attribute. The <dfn id="dom-fs-formtarget" role="button" tabindex="0" aria-haspopup="true"><code>formTarget</code></dfn> IDL
20642: attribute must reflect the <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> content attribute.
20643:
20644: </p>
20645: <h5 id="submitting-element-directionality"><span class="secno">4.10.19.7 </span>Submitting element directionality</h5><p>A <dfn id="form-control-dirname-attribute" role="button" tabindex="0" aria-haspopup="true">form control <code title="">dirname</code> attribute</dfn>
20646: on a form control element enables the submission of <a href="#the-directionality">the
20647: directionality</a> of the element, and gives the name of the
20648: field that contains this value during <a href="#form-submission">form submission</a>.
20649: If such an attribute is specified, its value must not be the empty
20650: string.</p><h4 id="textFieldSelection"><span class="secno">4.10.20 </span>APIs for the text field selections</h4><p>The <code><a href="#the-input-element">input</a></code> and <code><a href="#the-textarea-element">textarea</a></code> elements define
20651: the following members in their DOM interfaces for handling their
20652: selection:</p><pre class="idl extract"> void <a href="#dom-textarea-input-select" title="dom-textarea/input-select">select</a>();
20653: attribute unsigned long <a href="#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>;
20654: attribute unsigned long <a href="#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>;
20655: attribute DOMString <a href="#dom-textarea-input-selectiondirection" title="dom-textarea/input-selectionDirection">selectionDirection</a>;
1.562 mike 20656: void <a href="#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(unsigned long start, unsigned long end, optional DOMString direction);</pre><p>These methods and attributes expose and control the selection of
1.545 mike 20657: <code><a href="#the-input-element">input</a></code> and <code><a href="#the-textarea-element">textarea</a></code> text fields.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-textarea/input-select" id="dom-textarea/input-select"><a href="#dom-textarea-input-select">select</a></code>()</dt>
20658:
20659: <dd>
20660:
20661: <p>Selects everything in the text field.</p>
20662:
20663: </dd>
20664:
20665: <dt><var title="">element</var> . <code title="dom-textarea/input-selecionStart" id="dom-textarea/input-selecionstart">selectionStart</code> [ = <var title="">value</var> ]</dt>
20666:
20667: <dd>
20668:
20669: <p>Returns the offset to the start of the selection.</p>
20670:
20671: <p>Can be set, to change the start of the selection.</p>
20672:
20673: </dd>
20674:
20675: <dt><var title="">element</var> . <code title="dom-textarea/input-selecionEnd" id="dom-textarea/input-selecionend">selectionEnd</code> [ = <var title="">value</var> ]</dt>
20676:
20677: <dd>
20678:
20679: <p>Returns the offset to the end of the selection.</p>
20680:
20681: <p>Can be set, to change the end of the selection.</p>
20682:
20683: </dd>
20684:
20685: <dt><var title="">element</var> . <code title="dom-textarea/input-selecionDirection" id="dom-textarea/input-seleciondirection">selectionDirection</code> [ = <var title="">value</var> ]</dt>
20686:
20687: <dd>
20688:
20689: <p>Returns the current direction of the selection.</p>
20690:
20691: <p>Can be set, to change the direction of the selection.</p>
20692:
20693: <p>The possible values are "<code title="">forward</code>", "<code title="">backward</code>", and "<code title="">none</code>".</p>
20694:
20695: </dd>
20696:
20697: <dt><var title="">element</var> . <code title="dom-textarea/input-setSelectionRange" id="dom-textarea/input-setselectionrange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange</a></code>(<var title="">start</var>, <var title="">end</var> [, <var title="">direction</var>] )</dt>
20698:
20699: <dd>
20700:
20701: <p>Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward).</p>
20702:
20703: </dd>
20704:
20705: </dl><p>Characters with no visible rendering, such as U+200D ZERO WIDTH
20706: JOINER, still count as characters. Thus, for instance, the selection
20707: can include just an invisible character, and the text insertion
20708: cursor can be placed to one side or another of such a character.</p><div class="example">
20709:
20710: <p>To obtain the currently selected text, the following JavaScript
20711: suffices:</p>
20712:
20713: <pre>var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);</pre>
20714:
20715: <p>...where <var title="">control</var> is the <code><a href="#the-input-element">input</a></code>
20716: or <code><a href="#the-textarea-element">textarea</a></code> element.</p>
20717:
20718: </div><div class="example">
20719:
20720: <p>To add some text at the start of a text control, while
20721: maintaining the text selection, the three attributes must be
20722: preserved:</p>
20723:
20724: <pre>var oldStart = control.selectionStart;
20725: var oldEnd = control.selectionEnd;
20726: var oldDirection = control.selectionDirection;
20727: var prefix = "http://";
20728: control.value = prefix + control.value;
20729: control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);</pre>
20730:
20731: <p>...where <var title="">control</var> is the <code><a href="#the-input-element">input</a></code>
20732: or <code><a href="#the-textarea-element">textarea</a></code> element.</p>
20733:
20734: </div><h4 id="constraints"><span class="secno">4.10.21 </span>Constraints</h4><h5 id="definitions"><span class="secno">4.10.21.1 </span>Definitions</h5><h5 id="the-constraint-validation-api"><span class="secno">4.10.21.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true">constraint validation API</dfn></h5><dl class="domintro"><dt><var title="">element</var> . <code title="dom-cva-willValidate" id="dom-cva-willvalidate"><a href="#dom-cva-willvalidate">willValidate</a></code></dt>
20735:
20736: <dd>
20737:
20738: <p>Returns true if the element will be validated when the form is submitted; false otherwise.</p>
20739:
20740: </dd>
20741:
20742: <dt><var title="">element</var> . <code title="dom-cva-setCustomValidity" id="dom-cva-setcustomvalidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity</a></code>(<var title="">message</var>)</dt>
20743:
20744: <dd>
20745:
20746: <p>Sets a custom error, so that the element would fail to
20747: validate. The given message is the message to be shown to the user
20748: when reporting the problem to the user.</p>
20749:
20750: <p>If the argument is the empty string, clears the custom error.</p>
20751:
20752: </dd>
20753:
20754: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valueMissing" id="dom-validitystate-valuemissing"><a href="#dom-validitystate-valuemissing">valueMissing</a></code></dt>
20755:
20756: <dd>
20757:
20758: <p>Returns true if the element has no value but is a required field; false otherwise.</p>
20759:
20760: </dd>
20761:
20762: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-typeMismatch" id="dom-validitystate-typemismatch"><a href="#dom-validitystate-typemismatch">typeMismatch</a></code></dt>
20763:
20764: <dd>
20765:
20766: <p>Returns true if the element's value is not in the correct syntax; false otherwise.</p>
20767:
20768: </dd>
20769:
20770: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-patternMismatch" id="dom-validitystate-patternmismatch"><a href="#dom-validitystate-patternmismatch">patternMismatch</a></code></dt>
20771:
20772: <dd>
20773:
20774: <p>Returns true if the element's value doesn't match the provided pattern; false otherwise.</p>
20775:
20776: </dd>
20777:
20778: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-tooLong" id="dom-validitystate-toolong"><a href="#dom-validitystate-toolong">tooLong</a></code></dt>
20779:
20780: <dd>
20781:
20782: <p>Returns true if the element's value is longer than the provided maximum length; false otherwise.</p>
20783:
20784: </dd>
20785:
20786: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeUnderflow" id="dom-validitystate-rangeunderflow"><a href="#dom-validitystate-rangeunderflow">rangeUnderflow</a></code></dt>
20787:
20788: <dd>
20789:
20790: <p>Returns true if the element's value is lower than the provided minimum; false otherwise.</p>
20791:
20792: </dd>
20793:
20794: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeOverflow" id="dom-validitystate-rangeoverflow"><a href="#dom-validitystate-rangeoverflow">rangeOverflow</a></code></dt>
20795:
20796: <dd>
20797:
20798: <p>Returns true if the element's value is higher than the provided maximum; false otherwise.</p>
20799:
20800: </dd>
20801:
20802: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-stepMismatch" id="dom-validitystate-stepmismatch"><a href="#dom-validitystate-stepmismatch">stepMismatch</a></code></dt>
20803:
20804: <dd>
20805:
20806: <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>
20807:
20808: </dd>
20809:
20810: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-customError" id="dom-validitystate-customerror"><a href="#dom-validitystate-customerror">customError</a></code></dt>
20811:
20812: <dd>
20813:
20814: <p>Returns true if the element has a custom error; false otherwise.</p>
20815:
20816: </dd>
20817:
20818: <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valid" id="dom-validitystate-valid"><a href="#dom-validitystate-valid">valid</a></code></dt>
20819:
20820: <dd>
20821:
20822: <p>Returns true if the element's value has no validity problems; false otherwise.</p>
20823:
20824: </dd>
20825:
20826: <dt><var title="">valid</var> = <var title="">element</var> . <code title="dom-cva-checkValidatity" id="dom-cva-checkvalidatity"><a href="#dom-cva-checkvalidatity">checkValidity</a></code>()</dt>
20827:
20828: <dd>
20829:
20830: <p>Returns true if the element's value has no validity problems;
20831: false otherwise. Fires an <code title="event-invalid">invalid</code> event at the element in the
20832: latter case.</p>
20833:
20834: </dd>
20835:
20836: <dt><var title="">element</var> . <code title="dom-cva-validationMessage" id="dom-cva-validationmessage"><a href="#dom-cva-validationmessage">validationMessage</a></code></dt>
20837:
20838: <dd>
20839:
20840: <p>Returns the error message that would be shown to the user if
20841: the element was to be checked for validity.</p>
20842:
20843: </dd>
20844:
20845: </dl><div class="example">
20846:
20847: <p>In the following example, a script checks the value of a form
20848: control each time it is edited, and whenever it is not a valid
20849: value, uses the <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity()</a></code> method
20850: to set an appropriate message.</p>
20851:
20852: <pre><label>Feeling: <input name=f type="text" oninput="check(this)"></label>
20853: <script>
20854: function check(input) {
20855: if (input.value == "good" ||
20856: input.value == "fine" ||
20857: input.value == "tired") {
20858: input.setCustomValidity('"' + input.value + '" is not a feeling.');
20859: } else {
20860: // input is fine -- reset the error message
20861: input.setCustomValidity('');
20862: }
20863: }
20864: </script></pre>
20865:
20866: </div>
20867: <p>The <dfn id="dom-cva-validity" role="button" tabindex="0" aria-haspopup="true"><code>validity</code></dfn>
20868: attribute must return a <code><a href="#validitystate">ValidityState</a></code> object that
20869: represents the <a href="#validity-states">validity states</a> of the element. This
20870: object is <a href="#live">live</a>, and the same object must be returned
20871: each time the element's <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> attribute is retrieved.</p>
20872: <h5 id="security-forms"><span class="secno">4.10.21.4 </span>Security</h5><p id="security-0">Servers should not rely on client-side
20873: validation. Client-side validation can be intentionally bypassed by
20874: hostile users, and unintentionally bypassed by users of older user
20875: agents or automated tools that do not implement these features. The
20876: constraint validation features are only intended to improve the user
20877: experience, not to provide any kind of security mechanism.</p><h4 id="form-submission"><span class="secno">4.10.22 </span><dfn role="button" tabindex="0" aria-haspopup="true">Form submission</dfn></h4><p><i>This section is non-normative.</i></p><p>When a form is submitted, the data in the form is converted into
20878: the structure specified by the <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a>, and then sent to the
20879: destination specified by the <a href="#concept-fs-action" title="concept-fs-action">action</a> using the given <a href="#concept-fs-method" title="concept-fs-method">method</a>.</p><p>For example, take the following form:</p><pre><form action="/find.cgi" method=get>
20880: <input type=text name=t>
20881: <input type=search name=q>
20882: <input type=submit>
20883: </form></pre><p>If the user types in "cats" in the first field and "fur" in the
20884: second, and then hits the submit button, then the user agent will
20885: load <code title="">/find.cgi?t=cats&q=fur</code>.</p><p>On the other hand, consider this form:</p><pre><form action="/find.cgi" method=post enctype="multipart/form-data">
20886: <input type=text name=t>
20887: <input type=search name=q>
20888: <input type=submit>
20889: </form></pre><p>Given the same user input, the result on submission is quite
20890: different: the user agent instead does an HTTP POST to the given
20891: URL, with as the entity body something like the following text:</p><pre>------kYFrd4jNJEgCervE
20892: Content-Disposition: form-data; name="t"
20893:
20894: cats
20895: ------kYFrd4jNJEgCervE
20896: Content-Disposition: form-data; name="q"
20897:
20898: fur
1.606 mike 20899: ------kYFrd4jNJEgCervE--</pre><h5 id="url-encoded-form-data"><span class="secno">4.10.22.5 </span>URL-encoded form data</h5><p class="note">This form data set encoding is in many ways an
20900: aberrant monstrosity, the result of many years of implementation
20901: accidents and compromises leading to a set of requirements necessary
20902: for interoperability, but in no way representing good design
20903: practices. In particular, readers are cautioned to pay close
20904: attention to the twisted details involving repeated (and in some
20905: cases nested) conversions between character encodings and byte
20906: sequences.</p><p>To decode <code><a href="#application-x-www-form-urlencoded">application/x-www-form-urlencoded</a></code>
1.545 mike 20907: payloads, the following algorithm should be used. This algorithm
20908: uses as inputs the payload itself, <var title="">payload</var>,
20909: consisting of a Unicode string using only characters in the range
20910: U+0000 to U+007F; a default character encoding <var title="">default
20911: encoding</var>; and optionally an <var title="">isindex</var> flag
20912: indicating that the payload is to be processed as if it had been
20913: generated for a form containing an <code title="attr-fe-name-isindex"><a href="#attr-fe-name-isindex">isindex</a></code> control. The output of
1.627 mike 20914: this algorithm is a sorted list of name-value pairs. If the <var title="">isindex</var> flag is set and the first control really was
1.545 mike 20915: an <code title="attr-fe-name-isindex"><a href="#attr-fe-name-isindex">isindex</a></code> control, then
20916: the first name-value pair will have as its name the empty
20917: string.</p><ol><li><p>Let <var title="">strings</var> be the result of <a href="#strictly-split-a-string" title="strictly split a string">strictly splitting the
20918: string</a> <var title="">payload</var> on U+0026 AMPERSAND
20919: characters (&).</p></li>
20920:
20921: <li><p>If the <var title="">isindex</var> flag is set and the first
20922: string in <var title="">strings</var> does not contain a U+003D
20923: EQUALS SIGN character (=), insert a U+003D EQUALS SIGN character
20924: (=) at the start of the first string in <var title="">strings</var>.</p></li>
20925:
20926: <li><p>Let <var title="">pairs</var> be an empty list of name-value
20927: pairs.</p></li>
20928:
20929: <li>
20930:
20931: <p>For each string <var title="">string</var> in <var title="">strings</var>, run these substeps:</p>
20932:
20933: <ol><li>
20934:
20935: <p>If <var title="">string</var> contains a U+003D EQUALS SIGN
20936: character (=), then let <var title="">name</var> be the
20937: substring of <var title="">string</var> from the start of <var title="">string</var> up to but excluding its first U+003D
20938: EQUALS SIGN character (=), and let <var title="">value</var> be
20939: the substring from the first character, if any, after the first
20940: U+003D EQUALS SIGN character (=) up to the end of <var title="">string</var>. If the first U+003D EQUALS SIGN character
20941: (=) is the first character, then <var title="">name</var> will
20942: be the empty string. If it is the last character, then <var title="">value</var> will be the empty string.</p>
20943:
20944: <p>Otherwise, <var title="">string</var> contains no U+003D
20945: EQUALS SIGN characters (=). Let <var title="">name</var> have
20946: the value of <var title="">string</var> and let <var title="">value</var> be the empty string.</p>
20947:
20948: </li>
20949:
20950: <li>
20951:
20952: <p>Replace any U+002B PLUS SIGN characters (+) in <var title="">name</var> and <var title="">value</var> with U+0020
20953: SPACE characters.</p>
20954:
20955: </li>
20956:
20957: <li>
20958:
20959: <p>Replace any escape in <var title="">name</var> and <var title="">value</var> with the character represented by the
20960: escape. This replacement most not be recursive.</p>
20961:
20962: <p>An escape is a U+0025 PERCENT SIGN character (%) followed by
20963: two characters in the ranges U+0030 DIGIT ZERO (0) to U+0039
20964: DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN
20965: CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A to U+0066
20966: LATIN SMALL LETTER F.</p>
20967:
20968: <p>The character represented by an escape is the Unicode
20969: character whose code point is equal to the value of the two
20970: characters after the U+0025 PERCENT SIGN character (%),
20971: interpreted as a hexadecimal number (in the range 0..255).</p>
20972:
20973: <p class="example">So for instance the string "<code title="">A%2BC</code>" would become "<code title="">A+C</code>".
20974: Similarly, the string "<code title="">100%25AA%21</code>"
20975: becomes the string "<code title="">100%AA!</code>".</p>
20976:
20977: </li>
20978:
20979: <li><p>Convert the <var title="">name</var> and <var title="">value</var> strings to their byte representation in
1.606 mike 20980: ISO-8859-1 (i.e. convert the Unicode string to a byte string,
20981: mapping code points to byte values directly).</p></li>
1.545 mike 20982:
20983: <li><p>Add a pair consisting of <var title="">name</var> and <var title="">value</var> to <var title="">pairs</var>.</p></li>
20984:
20985: </ol></li>
20986:
20987: <li><p>If any of the name-value pairs in <var title="">pairs</var>
20988: have a name component consisting of the string "<code title="">_charset_</code>" encoded in US-ASCII, and the value
1.606 mike 20989: component of the first such pair, when decoded as US-ASCII, is the
20990: name of a supported character encoding, then let <var title="">encoding</var> be that character encoding.</p></li>
1.545 mike 20991:
20992: <li><p>Convert the name and value components of each name-value
20993: pair in <var title="">pairs</var> to Unicode by interpreting the
20994: bytes according to the encoding <var title="">encoding</var>.</p></li>
20995:
20996: <li><p>Return <var title="">pairs</var>.</p></li>
20997:
1.629 ! mike 20998: </ol><p class="note">Parameters on the
! 20999: <code><a href="#application-x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> MIME type are
! 21000: ignored. In particular, this MIME type does not support the <code title="">charset</code> parameter.</p><p>For details on how to interpret <code>multipart/form-data</code>
1.545 mike 21001: payloads, see RFC 2388. <a href="#refsRFC2388">[RFC2388]</a></p><h5 id="plain-text-form-data"><span class="secno">4.10.22.7 </span>Plain text form data</h5><p>Payloads using the <code>text/plain</code> format are intended to
21002: be human readable. They are not reliably interpretable by computer,
21003: as the format is ambiguous (for example, there is no way to
21004: distinguish a literal newline in a value from the newline at the end
21005: of the value).</p><h3 id="interactive-elements"><span class="secno">4.11 </span>Interactive elements</h3><p>The
21006: <a href="#the-details-element">details</a>,
21007: <a href="#the-summary-element">summary</a>,
21008: <a href="#the-command-element">command</a>,
21009: and
21010: <a href="#the-menu-element">menu</a>
21011: elements.</p><h4 id="the-details-element"><span class="secno">4.11.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>details</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
21012: <dd><a href="#flow-content">Flow content</a>.</dd>
21013: <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
21014: <dd><a href="#interactive-content">Interactive content</a>.</dd>
1.629 ! mike 21015: <dd><a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 21016: <dt>Contexts in which this element can be used:</dt>
21017: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
21018: <dt>Content model:</dt>
21019: <dd>One <code><a href="#the-summary-element">summary</a></code> element followed by <a href="#flow-content">flow content</a>.</dd>
21020: <dt>Content attributes:</dt>
21021: <dd><a href="#global-attributes">Global attributes</a></dd>
21022: <dd><code title="attr-details-open"><a href="#attr-details-open">open</a></code></dd>
21023: <dt>DOM interface:</dt>
21024: <dd>
21025: <pre class="idl">interface <dfn id="htmldetailselement" role="button" tabindex="0" aria-haspopup="true">HTMLDetailsElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
21026: attribute boolean <a href="#dom-details-open" title="dom-details-open">open</a>;
21027: };</pre>
21028: </dd>
21029: </dl><p>The <code><a href="#the-details-element">details</a></code> element <a href="#represents">represents</a> a
21030: disclosure widget from which the user can obtain additional
21031: information or controls.</p><p class="note">The <code><a href="#the-details-element">details</a></code> element is not appropriate
21032: for footnotes. Please see <a href="#footnotes">the section on
21033: footnotes</a> for details on how to mark up footnotes.</p><p>The <span class="impl">first</span> <code><a href="#the-summary-element">summary</a></code> element
21034: child of the element, if any, <a href="#represents">represents</a> the summary or
21035: legend of the details. <span class="impl">If there is no child
21036: <code><a href="#the-summary-element">summary</a></code> element, the user agent should provide its own
21037: legend (e.g. "Details").</span></p><p>The rest of the element's contents <a href="#represents">represents</a> the
21038: additional information or controls.</p><p>The <dfn id="attr-details-open" role="button" tabindex="0" aria-haspopup="true"><code>open</code></dfn>
21039: content attribute is a <a href="#boolean-attribute">boolean attribute</a>. If present,
21040: it indicates that both the summary and the additional information is
21041: to be shown to the user. If the attribute is absent, only the
21042: summary is to be shown.</p>
21043: <p>The <dfn id="dom-details-open" role="button" tabindex="0" aria-haspopup="true"><code>open</code></dfn> IDL
21044: attribute must <a href="#reflect">reflect</a> the <code title="attr-details-open"><a href="#attr-details-open">open</a></code> content attribute.</p>
21045: <div class="example">
21046:
21047: <p>The following example shows the <code><a href="#the-details-element">details</a></code> element
21048: being used to hide technical details in a progress report.</p>
21049:
21050: <pre><section class="progress window">
21051: <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
21052: <details>
21053: <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
21054: <dl>
21055: <dt>Transfer rate:</dt> <dd>452KB/s</dd>
21056: <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
21057: <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
21058: <dt>Duration:</dt> <dd>01:16:27</dd>
21059: <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
21060: <dt>Dimensions:</dt> <dd>320×240</dd>
21061: </dl>
21062: </details>
21063: </section></pre>
21064:
21065: </div><div class="example">
21066:
21067: <p>The following shows how a <code><a href="#the-details-element">details</a></code> element can be
21068: used to hide some controls by default:</p>
21069:
21070: <pre><details>
21071: <summary><label for=fn>Name & Extension:</label></summary>
21072: <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
21073: <p><label><input type=checkbox name=ext checked> Hide extension</label>
21074: </details></pre>
21075:
21076: <p>One could use this in conjunction with other <code><a href="#the-details-element">details</a></code>
21077: in a list to allow the user to collapse a set of fields down to a
21078: small set of headings, with the ability to open each one.</p>
21079:
21080: <p class="details-example"><img alt="" height="611" src="http://dev.w3.org/html5/spec/images/sample-details-1.png" width="345"><img alt="" height="666" src="http://dev.w3.org/html5/spec/images/sample-details-2.png" width="345"></p>
21081:
21082: <p>In these examples, the summary really just summarises what the
21083: controls can change, and not the actual values, which is less than
21084: ideal.</p>
21085:
1.549 mike 21086: </div><div class="example">
21087:
21088: <p>Because the <code title="attr-details-open"><a href="#attr-details-open">open</a></code>
21089: attribute is added and removed automatically as the user interacts
21090: with the control, it can be used in CSS to style the element
21091: differently based on its state. Here, a stylesheet is used to
21092: animate the color of the summary when the element is opened or
21093: closed:</p>
21094:
21095: <pre><style>
21096: details > summary { transition: color 1s; color: black; }
21097: details[open] > summary { color: red; }
21098: </style>
21099: <details>
21100: <summary>Automated Status: Operational</summary>
21101: <p>Velocity: 12m/s</p>
21102: <p>Direction: North</p>
21103: </details></pre>
21104:
1.545 mike 21105: </div><h4 id="the-summary-element"><span class="secno">4.11.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>summary</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
21106: <dd>None.</dd>
21107: <dt>Contexts in which this element can be used:</dt>
21108: <dd>As the first child of a <code><a href="#the-details-element">details</a></code> element.</dd>
21109: <dt>Content model:</dt>
21110: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
21111: <dt>Content attributes:</dt>
21112: <dd><a href="#global-attributes">Global attributes</a></dd>
21113: <dt>DOM interface:</dt>
21114: <dd>Uses <code><a href="#htmlelement">HTMLElement</a></code>.</dd>
21115: </dl><p>The <code><a href="#the-summary-element">summary</a></code> element <a href="#represents">represents</a> a
21116: summary, caption, or legend for the rest of the contents of the
21117: <code><a href="#the-summary-element">summary</a></code> element's parent <code><a href="#the-details-element">details</a></code>
21118: element<span class="impl">, if any</span>.</p><h4 id="the-command-element"><span class="secno">4.11.3 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>command</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
21119: <dd><a href="#metadata-content">Metadata content</a>.</dd>
21120: <dd><a href="#flow-content">Flow content</a>.</dd>
21121: <dd><a href="#phrasing-content">Phrasing content</a>.</dd>
21122: <dt>Contexts in which this element can be used:</dt>
21123: <dd>Where <a href="#metadata-content">metadata content</a> is expected.</dd>
21124: <dd>Where <a href="#phrasing-content">phrasing content</a> is expected.</dd>
21125: <dt>Content model:</dt>
21126: <dd>Empty.</dd>
21127: <dt>Content attributes:</dt>
21128: <dd><a href="#global-attributes">Global attributes</a></dd>
21129: <dd><code title="attr-command-type"><a href="#attr-command-type">type</a></code></dd>
21130: <dd><code title="attr-command-label"><a href="#attr-command-label">label</a></code></dd>
21131: <dd><code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code></dd>
21132: <dd><code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code></dd>
21133: <dd><code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code></dd>
21134: <dd><code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code></dd>
21135:
21136: <dd>Also, the <code title="attr-command-title"><a href="#attr-command-title">title</a></code> attribute has special semantics on this element.</dd>
21137: <dt>DOM interface:</dt>
21138: <dd>
21139: <pre class="idl">interface <dfn id="htmlcommandelement" role="button" tabindex="0" aria-haspopup="true">HTMLCommandElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
21140: attribute DOMString <a href="#dom-command-type" title="dom-command-type">type</a>;
21141: attribute DOMString <a href="#dom-command-label" title="dom-command-label">label</a>;
21142: attribute DOMString <a href="#dom-command-icon" title="dom-command-icon">icon</a>;
21143: attribute boolean <a href="#dom-command-disabled" title="dom-command-disabled">disabled</a>;
21144: attribute boolean <a href="#dom-command-checked" title="dom-command-checked">checked</a>;
21145: attribute DOMString <a href="#dom-command-radiogroup" title="dom-command-radiogroup">radiogroup</a>;};</pre>
21146: </dd>
21147: </dl><p>The <code><a href="#the-command-element">command</a></code> element represents a command that the user
21148: can invoke.</p><p>A command can be part of a context menu or toolbar, using the
21149: <code><a href="#the-menu-element">menu</a></code> element, or can be put anywhere else in the page,
21150: to define a keyboard shortcut.</p><p>The <dfn id="attr-command-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
21151: attribute indicates the kind of command: either a normal command
21152: with an associated action, or a state or option that can be toggled,
21153: or a selection of one item from a list of items.</p><p>The attribute is an <a href="#enumerated-attribute">enumerated attribute</a> with three
21154: keywords and states. The "<dfn id="attr-command-type-keyword-command" role="button" tabindex="0" aria-haspopup="true"><code>command</code></dfn>"
21155: keyword maps to the <a href="#attr-command-type-state-command" title="attr-command-type-state-command">Command</a> state, the
21156: "<dfn id="attr-command-type-keyword-checkbox" role="button" tabindex="0" aria-haspopup="true"><code>checkbox</code></dfn>"
21157: keyword maps to the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state, and
21158: the "<dfn id="attr-command-type-keyword-radio" role="button" tabindex="0" aria-haspopup="true"><code>radio</code></dfn>"
21159: keyword maps to the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a> state. The
21160: <i>missing value default</i> is the <a href="#attr-command-type-state-command" title="attr-command-type-state-command">Command</a> state.</p><dl><dt>The <dfn id="attr-command-type-state-command" role="button" tabindex="0" aria-haspopup="true">Command</dfn> state</dt>
21161:
21162: <dd><p>The element <a href="#represents">represents</a> a normal command with an associated action.</p></dd>
21163:
21164: <dt>The <dfn id="attr-command-type-state-checkbox" role="button" tabindex="0" aria-haspopup="true">Checkbox</dfn> state</dt>
21165:
21166: <dd><p>The element <a href="#represents">represents</a> a state or option that can be toggled.</p></dd>
21167:
21168: <dt>The <dfn id="attr-command-type-state-radio" role="button" tabindex="0" aria-haspopup="true">Radio</dfn> state</dt>
21169:
21170: <dd><p>The element <a href="#represents">represents</a> a selection of one item from a list of items.</p></dd>
21171:
21172: </dl><p>The <dfn id="attr-command-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>
21173: attribute gives the name of the command, as shown to the user. The
21174: <code title="attr-command-label"><a href="#attr-command-label">label</a></code> attribute must be
21175: specified and must have a value that is not the empty string.</p><p>The <dfn id="attr-command-title" role="button" tabindex="0" aria-haspopup="true"><code>title</code></dfn>
21176: attribute gives a hint describing the command, which might be shown
21177: to the user to help him.</p><p>The <dfn id="attr-command-icon" role="button" tabindex="0" aria-haspopup="true"><code>icon</code></dfn>
21178: attribute gives a picture that represents the command. If the
21179: attribute is specified, the attribute's value must contain a
21180: <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
21181: spaces</a>. <span class="impl">To obtain the <a href="#absolute-url">absolute
21182: URL</a> of the icon when the attribute's value is not the empty
21183: string, the attribute's value must be <a href="#resolve-a-url" title="resolve a
21184: url">resolved</a> relative to the element. When the attribute is
21185: absent, or its value is the empty string, or <a href="#resolve-a-url" title="resolve a
21186: url">resolving</a> its value fails, there is no icon.</span></p><p>The <dfn id="attr-command-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn> attribute
21187: is a <a href="#boolean-attribute">boolean attribute</a> that, if present, indicates that
21188: the command is not available in the current state.</p><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
21189: disabled if, in the same context, it could be enabled if only
21190: certain aspects of the situation were changed. A command would be
21191: marked as hidden if, in that situation, the command will never be
21192: enabled. For example, in the context menu for a water faucet, the
21193: command "open" might be disabled if the faucet is already open, but
21194: the command "eat" would be marked hidden since the faucet could
21195: never be eaten.</p><p>The <dfn id="attr-command-checked" role="button" tabindex="0" aria-haspopup="true"><code>checked</code></dfn>
21196: attribute is a <a href="#boolean-attribute">boolean attribute</a> that, if present,
21197: indicates that the command is selected. The attribute must be
21198: omitted unless the <code title="attr-command-type"><a href="#attr-command-type">type</a></code>
21199: attribute is in either the <a href="#attr-command-type-state-checkbox" title="attr-command-type-state-checkbox">Checkbox</a> state or
21200: the <a href="#attr-command-type-state-radio" title="attr-command-type-state-radio">Radio</a>
21201: state.</p><p>The <dfn id="attr-command-radiogroup" role="button" tabindex="0" aria-haspopup="true"><code>radiogroup</code></dfn>
21202: attribute gives the name of the group of commands that will be
21203: 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
21204: 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>
21205: <p>The <dfn id="dom-command-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL
21206: attribute must <a href="#reflect">reflect</a> the content attribute of the
21207: same name, <a href="#limited-to-only-known-values">limited to only known values</a>.</p>
21208:
21209: <p>The <dfn id="dom-command-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>, <dfn id="dom-command-icon" role="button" tabindex="0" aria-haspopup="true"><code>icon</code></dfn>, <dfn id="dom-command-disabled" role="button" tabindex="0" aria-haspopup="true"><code>disabled</code></dfn>, <dfn id="dom-command-checked" role="button" tabindex="0" aria-haspopup="true"><code>checked</code></dfn>, and <dfn id="dom-command-radiogroup" role="button" tabindex="0" aria-haspopup="true"><code>radiogroup</code></dfn> IDL attributes must <a href="#reflect">reflect</a> the respective content
21210: attributes of the same name.</p>
21211: <p class="note"><code><a href="#the-command-element">command</a></code> elements are not rendered
21212: unless they <a href="#the-menu-element" title="menu">form part of a menu</a>.</p><div class="example">
21213:
21214: <p>Here is an example of a toolbar with three buttons that let the
21215: user toggle between left, center, and right alignment. One could
21216: imagine such a toolbar as part of a text editor. The toolbar also
21217: has a separator followed by another button labeled "Publish",
21218: though that button is disabled.</p>
21219:
21220: <pre><menu type="toolbar">
21221: <command type="radio" radiogroup="alignment" checked="checked"
21222: label="Left" icon="icons/alL.png" onclick="setAlign('left')">
21223: <command type="radio" radiogroup="alignment"
21224: label="Center" icon="icons/alC.png" onclick="setAlign('center')">
21225: <command type="radio" radiogroup="alignment"
21226: label="Right" icon="icons/alR.png" onclick="setAlign('right')">
21227: <hr>
21228: <command type="command" disabled
21229: label="Publish" icon="icons/pub.png" onclick="publish()">
21230: </menu></pre>
21231:
21232: </div><h4 id="the-menu-element"><span class="secno">4.11.4 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>menu</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
21233: <dd><a href="#flow-content">Flow content</a>.</dd>
21234: <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>
1.629 ! mike 21235: <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 or the <a href="#list-state" title="list state">list</a> state: <a href="#palpable-content">Palpable content</a>.</dd>
1.545 mike 21236: <dt>Contexts in which this element can be used:</dt>
21237: <dd>Where <a href="#flow-content">flow content</a> is expected.</dd>
21238: <dt>Content model:</dt>
21239: <dd>Either: Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd>
21240: <dd>Or: <a href="#flow-content">Flow content</a>.</dd>
21241: <dt>Content attributes:</dt>
21242: <dd><a href="#global-attributes">Global attributes</a></dd>
21243: <dd><code title="attr-menu-type"><a href="#attr-menu-type">type</a></code></dd>
21244: <dd><code title="attr-menu-label"><a href="#attr-menu-label">label</a></code></dd>
21245: <dt>DOM interface:</dt>
21246: <dd>
21247: <pre class="idl">interface <dfn id="htmlmenuelement" role="button" tabindex="0" aria-haspopup="true">HTMLMenuElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
21248: attribute DOMString <a href="#dom-menu-type" title="dom-menu-type">type</a>;
21249: attribute DOMString <a href="#dom-menu-label" title="dom-menu-label">label</a>;
21250: };</pre>
21251: </dd></dl><p>The <code><a href="#the-menu-element">menu</a></code> element represents a list of commands.</p><p>The <dfn id="attr-menu-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> attribute
21252: is an <a href="#enumerated-attribute">enumerated attribute</a> indicating the kind of menu
21253: being declared. The attribute has three states. The <code title="attr-menu-type-context">context</code> keyword maps to the
21254: <dfn id="context-menu-state" role="button" tabindex="0" aria-haspopup="true">context menu</dfn> state, in which
21255: the element is declaring a context menu. The <code title="attr-menu-type-toolbar">toolbar</code> keyword maps to the
21256: <dfn id="toolbar-state" role="button" tabindex="0" aria-haspopup="true">toolbar</dfn> state, in which the
21257: element is declaring a toolbar. The attribute may also be
21258: omitted. The <i>missing value default</i> is the <dfn id="list-state" role="button" tabindex="0" aria-haspopup="true">list</dfn> state, which indicates that the element is merely
21259: a list of commands that is neither declaring a context menu nor
21260: defining a toolbar.</p><p>If a <code><a href="#the-menu-element">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
21261: element <a href="#represents">represents</a> the commands of a context menu, and
21262: the user can only interact with the commands if that context menu is
21263: activated.</p><p>If a <code><a href="#the-menu-element">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
21264: <a href="#represents">represents</a> a list of active commands that the user can
21265: immediately interact with.</p><p>If a <code><a href="#the-menu-element">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
21266: <a href="#represents">represents</a> an unordered list of items (each represented
21267: by an <code><a href="#the-li-element">li</a></code> element), each of which represents a command
21268: that the user can perform or activate, or, if the element has no
21269: <code><a href="#the-li-element">li</a></code> element children, <a href="#flow-content">flow content</a>
21270: describing available commands.</p><p>The <dfn id="attr-menu-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn>
21271: attribute gives the label of the menu. It is used by user agents to
21272: display nested menus in the UI. For example, a context menu
21273: 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
21274: menu label.</p>
21275: <p>The <dfn id="dom-menu-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> and <dfn id="dom-menu-label" role="button" tabindex="0" aria-haspopup="true"><code>label</code></dfn> IDL attributes must
21276: <a href="#reflect">reflect</a> the respective content attributes of the same
21277: name.</p>
21278: <h5 id="menus-intro"><span class="secno">4.11.4.1 </span>Introduction</h5><p><i>This section is non-normative.</i></p><p>The <code><a href="#the-menu-element">menu</a></code> element is used to define context menus and
21279: toolbars.</p><p>For example, the following represents a toolbar with three menu
21280: buttons on it, each of which has a dropdown menu with a series of
21281: options:</p><pre><menu type="toolbar">
21282: <li>
21283: <menu label="File">
21284: <button type="button" onclick="fnew()">New...</button>
21285: <button type="button" onclick="fopen()">Open...</button>
21286: <button type="button" onclick="fsave()">Save</button>
21287: <button type="button" onclick="fsaveas()">Save as...</button>
21288: </menu>
21289: </li>
21290: <li>
21291: <menu label="Edit">
21292: <button type="button" onclick="ecopy()">Copy</button>
21293: <button type="button" onclick="ecut()">Cut</button>
21294: <button type="button" onclick="epaste()">Paste</button>
21295: </menu>
21296: </li>
21297: <li>
21298: <menu label="Help">
21299: <li><a href="help.html">Help</a></li>
21300: <li><a href="about.html">About</a></li>
21301: </menu>
21302: </li>
21303: </menu></pre><p>In a supporting user agent, this might look like this:</p><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'." height="101" src="http://dev.w3.org/html5/spec/images/sample-toolbar-1.png" width="303"></p><p>In a legacy user agent, the above would look like a bulleted list
21304: with three items, the first of which has four buttons, the second of
21305: which has three, and the third of which has two nested bullet points
21306: with two items consisting of links.</p><hr><p>The following implements a similar toolbar, with a single button
21307: whose values, when selected, redirect the user to Web sites.</p><pre><form action="redirect.cgi">
21308: <menu type="toolbar">
21309: <label for="goto">Go to...</label>
21310: <menu label="Go">
21311: <select id="goto">
21312: <option value="" selected="selected"> Select site: </option>
21313: <option value="http://www.apple.com/"> Apple </option>
21314: <option value="http://www.mozilla.org/"> Mozilla </option>
21315: <option value="http://www.opera.com/"> Opera </option>
21316: </select>
21317: <span><input type="submit" value="Go"></span>
21318: </menu>
21319: </menu>
21320: </form></pre><p>The behavior in supporting user agents is similar to the example
21321: above, but here the legacy behavior consists of a single
21322: <code><a href="#the-select-element">select</a></code> element with a submit button. The submit button
21323: doesn't appear in the toolbar, because it is not a child of the
21324: <code><a href="#the-menu-element">menu</a></code> element or of its <code><a href="#the-li-element">li</a></code> children.</p><h5 id="context-menus"><span class="secno">4.11.4.3 </span><dfn role="button" tabindex="0" aria-haspopup="true">Context menus</dfn></h5><p>The <dfn id="attr-contextmenu" role="button" tabindex="0" aria-haspopup="true"><code>contextmenu</code></dfn>
21325: attribute gives the element's <a href="#context-menus" title="context menus">context
21326: menu</a>. The value must be the <a href="#concept-id" title="concept-id">ID</a> of a <code><a href="#the-menu-element">menu</a></code> element in the
21327: DOM. <span class="impl">If the node that would be obtained by
21328: invoking the <code title="dom-Document-getElementById"><a href="#dom-document-getelementbyid">getElementById()</a></code> method
21329: using the attribute's value as the only argument is null or not a
21330: <code><a href="#the-menu-element">menu</a></code> element, then the element has no assigned context
21331: menu. Otherwise, the element's assigned context menu is the element
21332: so identified.</span></p>
21333: <p>The <dfn id="dom-contextmenu" role="button" tabindex="0" aria-haspopup="true"><code>contextMenu</code></dfn>
21334: IDL attribute must <a href="#reflect">reflect</a> the <code title="attr-contextmenu"><a href="#attr-contextmenu">contextmenu</a></code> content attribute.</p>
21335: <div class="example">
21336:
21337: <p>Here is an example of a context menu for an input control:</p>
21338:
21339: <pre><form name="npc">
21340: <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
21341: <menu type=context id=namemenu>
21342: <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
21343: <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
21344: </menu>
21345: </form></pre>
21346:
21347: <p>This adds two items to the control's context menu, one called
21348: "Pick random name", and one called "Prefill other fields based on
21349: name". They invoke scripts that are not shown in the example
21350: above.</p>
21351:
21352: </div><h4 id="commands"><span class="secno">4.11.5 </span>Commands</h4><p>A <dfn id="concept-command" role="button" tabindex="0" aria-haspopup="true">command</dfn> is the abstraction
21353: behind menu items, buttons, and links.</p><p id="facets">Commands are defined to have the following
21354: <dfn id="concept-facet" role="button" tabindex="0" aria-haspopup="true">facets</dfn>:</p><dl><dt><dfn id="command-facet-type" role="button" tabindex="0" aria-haspopup="true">Type</dfn></dt>
21355:
21356: <dd>The kind of command: "command", meaning it is a normal command;
21357: "radio", meaning that triggering the command will, amongst other
21358: things, set the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked
21359: State</a> to true (and probably uncheck some other commands); or
21360: "checkbox", meaning that triggering the command will, amongst other
21361: things, toggle the value of the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>.</dd>
21362:
21363: <dt><dfn id="command-facet-id" role="button" tabindex="0" aria-haspopup="true">ID</dfn></dt>
21364:
21365: <dd>The name of the command, for referring to the command from the
21366: markup or from script. If a command has no ID, it is an
21367: <dfn id="anonymous-command" role="button" tabindex="0" aria-haspopup="true">anonymous command</dfn>.</dd>
21368:
21369: <dt><dfn id="command-facet-label" role="button" tabindex="0" aria-haspopup="true">Label</dfn></dt>
21370:
21371: <dd>The name of the command as seen by the user.</dd>
21372:
21373: <dt><dfn id="command-facet-hint" role="button" tabindex="0" aria-haspopup="true">Hint</dfn></dt>
21374:
21375: <dd>A helpful or descriptive string that can be shown to the
21376: user.</dd>
21377:
21378: <dt><dfn id="command-facet-icon" role="button" tabindex="0" aria-haspopup="true">Icon</dfn></dt>
21379:
21380: <dd>An <a href="#absolute-url">absolute URL</a> identifying a graphical image that
21381: represents the action. A command might not have an Icon.</dd>
21382: <dt><dfn id="command-facet-accesskey" role="button" tabindex="0" aria-haspopup="true">Access Key</dfn></dt>
21383:
21384: <dd>A key combination selected by the user agent that triggers the
21385: command. A command might not have an Access Key.</dd>
21386:
21387: <dt><dfn id="command-facet-hiddenstate" role="button" tabindex="0" aria-haspopup="true">Hidden State</dfn></dt>
21388:
21389: <dd>Whether the command is hidden or not (basically, whether it
21390: should be shown in menus).</dd>
21391:
21392: <dt><dfn id="command-facet-disabledstate" role="button" tabindex="0" aria-haspopup="true">Disabled State</dfn></dt>
21393:
21394: <dd>Whether the command is relevant and can be triggered or not.</dd>
21395:
21396: <dt><dfn id="command-facet-checkedstate" role="button" tabindex="0" aria-haspopup="true">Checked State</dfn></dt>
21397:
21398: <dd>Whether the command is checked or not.</dd>
21399:
21400: <dt><dfn id="command-facet-action" role="button" tabindex="0" aria-haspopup="true">Action</dfn></dt>
21401:
21402: <dd>The actual effect that triggering the command will have. This
21403: could be a scripted event handler, a <a href="#url">URL</a> to which to
21404: <a href="#navigate">navigate</a>, or a form submission.</dd>
21405:
21406:
21407: </dl><p>These facets are exposed on elements using the <dfn id="command-api" role="button" tabindex="0" aria-haspopup="true">command
21408: API</dfn>:</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-command-ro-commandType" id="dom-command-ro-commandtype"><a href="#dom-command-ro-commandtype">commandType</a></code></dt>
21409:
21410: <dd>
21411:
21412: <p>Exposes the <a href="#command-facet-type" title="command-facet-Type">Type</a> facet of the command.</p>
21413:
21414: </dd>
21415:
1.614 mike 21416: <dt><var title="">element</var> . <code title="dom-Element-id" id="dom-element-id"><a href="#dom-element-id">id</a></code></dt>
1.545 mike 21417:
21418: <dd>
21419:
21420: <p>Exposes the <a href="#command-facet-id" title="command-facet-ID">ID</a> facet of the command.</p>
21421:
21422: </dd>
21423:
21424: <dt><var title="">element</var> . <code title="dom-command-ro-commandLabel" id="dom-command-ro-commandlabel"><a href="#dom-command-ro-commandlabel">commandLabel</a></code></dt>
21425:
21426: <dd>
21427:
21428: <p>Exposes the <a href="#command-facet-label" title="command-facet-Label">Label</a> facet of the command.</p>
21429:
21430: </dd>
21431:
21432: <dt><var title="">element</var> . <code title="dom-title"><a href="#dom-title">title</a></code></dt>
21433:
21434: <dd>
21435:
21436: <p>Exposes the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> facet of the command.</p>
21437:
21438: </dd>
21439:
21440: <dt><var title="">element</var> . <code title="dom-command-ro-commandIcon" id="dom-command-ro-commandicon"><a href="#dom-command-ro-commandicon">commandIcon</a></code></dt>
21441:
21442: <dd>
21443:
21444: <p>Exposes the <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> facet of the command.</p>
21445:
21446: </dd>
21447:
21448: <dt><var title="">element</var> . <code title="dom-accessKeyLabel" id="dom-accesskeylabel"><a href="#dom-accesskeylabel">accessKeyLabel</a></code></dt>
21449:
21450: <dd>
21451:
21452: <p>Exposes the <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Key</a> facet of the command.</p>
21453:
21454: </dd>
21455:
21456: <dt><var title="">element</var> . <code title="dom-command-ro-commandHidden" id="dom-command-ro-commandhidden"><a href="#dom-command-ro-commandhidden">commandHidden</a></code></dt>
21457:
21458: <dd>
21459:
21460: <p>Exposes the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet of the command.</p>
21461:
21462: </dd>
21463:
21464: <dt><var title="">element</var> . <code title="dom-command-ro-commandDisabled" id="dom-command-ro-commanddisabled"><a href="#dom-command-ro-commanddisabled">commandDisabled</a></code></dt>
21465:
21466: <dd>
21467:
21468: <p>Exposes the <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> facet of the command.</p>
21469:
21470: </dd>
21471:
21472: <dt><var title="">element</var> . <code title="dom-command-ro-commandChecked" id="dom-command-ro-commandchecked"><a href="#dom-command-ro-commandchecked">commandChecked</a></code></dt>
21473:
21474: <dd>
21475:
21476: <p>Exposes the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a> facet of the command.</p>
21477:
21478: </dd>
21479:
21480: <dt><var title="">element</var> . <code title="dom-click" id="dom-click"><a href="#dom-click">click</a></code>()</dt>
21481:
21482: <dd>
21483:
21484: <p>Triggers the <a href="#command-facet-action" title="command-facet-Action">Action</a> of the command.</p>
21485:
21486: </dd>
21487:
21488:
21489: </dl><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-commands" id="dom-document-commands"><a href="#dom-document-commands">commands</a></code></dt>
21490: <dd>
21491: <p>Returns an <code><a href="#htmlcollection">HTMLCollection</a></code> of the elements in the
21492: <code><a href="#document">Document</a></code> that define commands and have IDs.</p>
21493: </dd>
21494:
21495: </dl><hr><p>User agents may expose the <a href="#concept-command" title="concept-command">commands</a> whose <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet is false
1.556 mike 21496: (visible) and whose elements are <a href="#in-a-document">in a
21497: <code>Document</code></a>. For example, such commands could be
21498: listed in the user agent's menu bar. User agents are encouraged to
21499: do this especially for commands that have <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Keys</a>, as a way to
1.545 mike 21500: advertise those keys to the user.</p><h3 id="links"><span class="secno">4.12 </span>Links</h3><h4 id="introduction-3"><span class="secno">4.12.1 </span>Introduction</h4><p>Links are a conceptual construct, created by <code><a href="#the-a-element">a</a></code>,
21501: <code><a href="#the-area-element">area</a></code>, and <code><a href="#the-link-element">link</a></code> elements, that <a href="#represents" title="represents">represent</a> a connection between two
21502: resources, one of which is the current <code><a href="#document">Document</a></code>. There
21503: are two kinds of links in HTML:</p><dl><dt><dfn id="external-resource-link" role="button" tabindex="0" aria-haspopup="true">Links to external
21504: resources</dfn></dt>
21505:
21506: <dd><p>These are links to resources that are to be used to augment
21507: the current document, generally automatically processed by the user
21508: agent.</p></dd>
21509:
21510: <dt><dfn id="hyperlink" role="button" tabindex="0" aria-haspopup="true">Hyperlinks</dfn></dt>
21511:
21512: <dd><p>These are links to other resources that are generally
21513: exposed to the user by the user agent so that the user can cause
21514: the user agent to <a href="#navigate">navigate</a> to those resources, e.g. to
21515: visit them in a browser or download them.</p></dd>
21516:
21517: </dl><p>For <code><a href="#the-link-element">link</a></code> elements with an <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute and a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute, links must be created
21518: for the keywords of the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code>
21519: attribute, as defined for those keywords in the <a href="#linkTypes">link types</a> section.</p><p>Similarly, for <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements with
21520: an <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute and a
21521: <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> attribute, links must be
21522: created for the keywords of the <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> attribute as defined for those
21523: keywords in the <a href="#linkTypes">link types</a> section. Unlike
21524: <code><a href="#the-link-element">link</a></code> elements, however, <code><a href="#the-a-element">a</a></code> and
21525: <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 either do not
21526: have a <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> attribute, or
21527: whose <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> attribute has no
21528: keywords that are defined as specifying <a href="#hyperlink" title="hyperlink">hyperlinks</a>, must also create a
21529: <a href="#hyperlink">hyperlink</a>. This implied hyperlink has no special
21530: meaning (it has no <a href="#linkTypes">link type</a>) beyond
21531: linking the element's document to the resource given by the
21532: element's <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>
21533: attribute.</p><p>A <a href="#hyperlink">hyperlink</a> can have one or more <dfn id="hyperlink-annotation" role="button" tabindex="0" aria-haspopup="true">hyperlink annotations</dfn> that modify
21534: the processing semantics of that hyperlink.</p><h4 id="links-created-by-a-and-area-elements"><span class="secno">4.12.2 </span>Links created by <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements</h4><p>The <dfn id="attr-hyperlink-href" role="button" tabindex="0" aria-haspopup="true"><code>href</code></dfn>
21535: attribute on <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements must have
21536: a value that is a <a href="#valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
21537: spaces</a>.</p><p class="note">The <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>
1.446 mike 21538: attribute on <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements is not
21539: required; when those elements do not have <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attributes they do not
1.545 mike 21540: create hyperlinks.</p><p>The <dfn id="attr-hyperlink-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn>
21541: attribute, if present, must be a <a href="#valid-browsing-context-name-or-keyword">valid browsing context name
21542: or keyword</a>. It gives the name of the <a href="#browsing-context">browsing
21543: context</a> that will be used. <span class="impl">User agents use
21544: this name when <a href="#following-hyperlinks">following hyperlinks</a>.</span></p><p>The <dfn id="attr-hyperlink-rel" role="button" tabindex="0" aria-haspopup="true"><code>rel</code></dfn>
21545: attribute on <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements controls
21546: what kinds of links the elements create. The attribue's value must
21547: be a <a href="#set-of-space-separated-tokens">set of space-separated tokens</a>. The <a href="#linkTypes">allowed keywords and their meanings</a> are
21548: defined below.</p><p>The <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> attribute has
21549: no default value. If the attribute is omitted or if none of the
21550: values in the attribute are recognized by the user agent, then the
21551: document has no particular relationship with the destination
21552: resource other than there being a hyperlink between the two.</p><p>The <dfn id="attr-hyperlink-media" role="button" tabindex="0" aria-haspopup="true"><code>media</code></dfn>
21553: attribute describes for which media the target document was
21554: designed. It is purely advisory. The value must be a <a href="#valid-media-query">valid
21555: media query</a>. The default, if the <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code> attribute is omitted, is
21556: "<code title="">all</code>".</p><p>The <dfn id="attr-hyperlink-hreflang" role="button" tabindex="0" aria-haspopup="true"><code>hreflang</code></dfn>
21557: attribute on <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements that
21558: create <a href="#hyperlink" title="hyperlink">hyperlinks</a>, if present, gives
21559: the language of the linked resource. It is purely advisory. The
21560: value must be a valid BCP 47 language tag. <a href="#refsBCP47">[BCP47]</a> <span class="impl">User agents must
21561: not consider this attribute authoritative — upon fetching the
21562: resource, user agents must use only language information associated
21563: with the resource to determine its language, not metadata included
21564: in the link to the resource.</span></p><p>The <dfn id="attr-hyperlink-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn>
21565: attribute, if present, gives the <a href="#mime-type">MIME type</a> of the
21566: linked resource. It is purely advisory. The value must be a
21567: <a href="#valid-mime-type">valid MIME type</a>. <span class="impl">User agents must
21568: not consider the <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code>
21569: attribute authoritative — upon fetching the resource, user
21570: agents must not use metadata included in the link to the resource to
21571: determine its type.</span></p><h4 id="linkTypes"><span class="secno">4.12.4 </span>Link types</h4><p>The following table summarizes the link types that are defined by
21572: this specification. This table is non-normative; the actual
21573: definitions for the link types are given in the next few
21574: sections.</p><p>In this section, the term <i>referenced document</i> refers to
21575: the resource identified by the element representing the link, and
21576: the term <i>current document</i> refers to the resource within
21577: which the element representing the link finds itself.</p><p>Except where otherwise specified, a keyword must not be specified
21578: more than once per <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code>
1.557 mike 21579: attribute.</p><p>Link types are always <a href="#ascii-case-insensitive">ASCII case-insensitive</a><span class="impl">, and must be compared as such</span>.</p><p class="example">Thus, <code title="">rel="next"</code> is the
1.545 mike 21580: same as <code title="">rel="NEXT"</code>.</p><table><thead><tr><th rowspan="2">Link type</th>
21581: <th colspan="2">Effect on...</th>
21582: <th rowspan="2">Brief description</th>
21583: </tr><tr><th><code><a href="#the-link-element">link</a></code></th>
21584: <th><code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code></th>
21585: </tr></thead><tbody><tr><td><code title="rel-alternate"><a href="#rel-alternate">alternate</a></code></td>
21586: <td><a href="#hyperlink">Hyperlink</a></td>
21587: <td><a href="#hyperlink">Hyperlink</a></td>
21588: <td>Gives alternate representations of the current document.</td>
21589: </tr><tr><td><code title="rel-author"><a href="#link-type-author">author</a></code></td>
21590: <td><a href="#hyperlink">Hyperlink</a></td>
21591: <td><a href="#hyperlink">Hyperlink</a></td>
21592: <td>Gives a link to the current document's author.</td>
21593: </tr><tr><td><code title="rel-bookmark"><a href="#link-type-bookmark">bookmark</a></code></td>
21594: <td><em>not allowed</em></td>
21595: <td><a href="#hyperlink">Hyperlink</a></td>
21596: <td>Gives the permalink for the nearest ancestor section.</td>
21597: </tr><tr><td><code title="rel-help"><a href="#link-type-help">help</a></code></td>
21598: <td><a href="#hyperlink">Hyperlink</a></td>
21599: <td><a href="#hyperlink">Hyperlink</a></td>
21600: <td>Provides a link to context-sensitive help.</td>
21601: </tr><tr><td><code title="rel-icon"><a href="#rel-icon">icon</a></code></td>
21602: <td><a href="#external-resource-link" title="external resource link">External Resource</a></td>
21603: <td><em>not allowed</em></td>
21604: <td>Imports an icon to represent the current document.</td>
21605: </tr><tr><td><code title="rel-license"><a href="#link-type-license">license</a></code></td>
21606: <td><a href="#hyperlink">Hyperlink</a></td>
21607: <td><a href="#hyperlink">Hyperlink</a></td>
21608: <td>Indicates that the main content of the current document is covered by the copyright license described by the referenced document.</td>
21609: </tr><tr><td><code title="rel-next"><a href="#link-type-next">next</a></code></td>
21610: <td><a href="#hyperlink">Hyperlink</a></td>
21611: <td><a href="#hyperlink">Hyperlink</a></td>
21612: <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>
21613: </tr><tr><td><code title="rel-nofollow"><a href="#link-type-nofollow">nofollow</a></code></td>
21614: <td><em>not allowed</em></td>
21615: <td><a href="#hyperlink-annotation" title="hyperlink annotation">Annotation</a></td>
21616: <td>Indicates that the current document's original author or publisher does not endorse the referenced document.</td>
21617: </tr><tr><td><code title="rel-noreferrer"><a href="#link-type-noreferrer">noreferrer</a></code></td>
21618: <td><em>not allowed</em></td>
21619: <td><a href="#hyperlink-annotation" title="hyperlink annotation">Annotation</a></td>
21620: <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>
21621: </tr><tr><td><code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code></td>
21622: <td><a href="#external-resource-link" title="external resource link">External Resource</a></td>
21623: <td><a href="#external-resource-link" title="external resource link">External Resource</a></td>
21624: <td>Specifies that the target resource should be preemptively cached.</td>
21625: </tr><tr><td><code title="rel-prev"><a href="#link-type-prev">prev</a></code></td>
21626: <td><a href="#hyperlink">Hyperlink</a></td>
21627: <td><a href="#hyperlink">Hyperlink</a></td>
21628: <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>
21629: </tr><tr><td><code title="rel-search"><a href="#link-type-search">search</a></code></td>
21630: <td><a href="#hyperlink">Hyperlink</a></td>
21631: <td><a href="#hyperlink">Hyperlink</a></td>
21632: <td>Gives a link to a resource that can be used to search through the current document and its related pages.</td>
21633: </tr><tr><td><code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code></td>
21634: <td><a href="#external-resource-link" title="external resource link">External Resource</a></td>
21635: <td><em>not allowed</em></td>
21636: <td>Imports a stylesheet.</td>
21637: </tr><tr><td><code title="rel-tag"><a href="#link-type-tag">tag</a></code></td>
1.556 mike 21638: <td><em>not allowed</em></td>
1.545 mike 21639: <td><a href="#hyperlink">Hyperlink</a></td>
21640: <td>Gives a tag (identified by the given address) that applies to the current document.</td>
21641: </tr></tbody></table><h5 id="rel-alternate"><span class="secno">4.12.4.1 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>alternate</code></dfn>"</h5><p>The <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword may be
21642: 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>
21643: elements.</p><p>The meaning of this keyword depends on the values of the other
21644: attributes.</p><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
21645: keyword <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code></dt>
21646:
21647: <dd>
21648:
21649: <p>The <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword
21650: modifies the meaning of the <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code> keyword in the way
21651: described for that keyword. The <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword does not create a
21652: link of its own.</p>
21653:
21654: </dd>
21655:
21656:
21657: <dt>The <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword is
21658: used with the <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code>
21659: attribute set to the value <code title="">application/rss+xml</code> or the value <code title="">application/atom+xml</code></dt>
21660:
21661: <dd>
21662:
21663: <p>The keyword creates a <a href="#hyperlink">hyperlink</a> referencing a
21664: syndication feed (though not necessarily syndicating exactly the
21665: same content as the current page).</p>
21666:
21667:
21668:
21669: </dd>
21670:
21671:
21672: <dt>Otherwise</dt>
21673:
21674: <dd>
21675:
21676: <p>The keyword creates a <a href="#hyperlink">hyperlink</a> referencing an
21677: alternate representation of the current document.</p>
21678:
21679: <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>
21680:
21681: <p>If the <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword is
21682: used with the <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code>
21683: attribute, it indicates that the referenced document is intended for
21684: use with the media specified.</p>
21685:
21686: <p>If the <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword is
21687: used with the <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code>
21688: attribute, and that attribute's value differs from the <a href="#root-element">root
21689: element</a>'s <a href="#language">language</a>, it indicates that the
21690: referenced document is a translation.</p>
21691:
21692: <p>If the <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword is
21693: used with the <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code>
21694: attribute, it indicates that the referenced document is a
21695: reformulation of the current document in the specified format.</p>
21696:
21697: <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
21698: when specified with the <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code>
21699: keyword.</p>
21700:
21701: <div class="example">
21702:
21703: <p>For example, the following link is a French translation that
21704: uses the PDF format:</p>
21705:
21706: <pre><link rel=alternate type=application/pdf hreflang=fr href=manual-fr></pre>
21707:
21708: </div>
21709:
21710: <p>This relationship is transitive — that is, if a document
21711: links to two other documents with the link type "<code title="rel-alternate"><a href="#rel-alternate">alternate</a></code>", then, in addition to
21712: implying that those documents are alternative representations of
21713: the first document, it is also implying that those two documents
21714: are alternative representations of each other.</p>
21715:
21716: </dd>
21717:
21718: </dl><h5 id="link-type-author"><span class="secno">4.12.4.2 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>author</code></dfn>"</h5><p>The <code title="rel-author"><a href="#link-type-author">author</a></code> keyword may be
21719: 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>
21720: elements. This keyword creates a <a href="#hyperlink">hyperlink</a>.</p><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
21721: referenced document provides further information about the author of
21722: the nearest <code><a href="#the-article-element">article</a></code> element ancestor of the element
21723: defining the hyperlink, if there is one, or of the page as a whole,
21724: otherwise.</p><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
21725: referenced document provides further information about the author
21726: for the page as a whole.</p><p class="note">The "referenced document" can be, and often is, a
1.446 mike 21727: <code title="">mailto:</code> URL giving the e-mail address of the
1.545 mike 21728: author. <a href="#refsMAILTO">[MAILTO]</a></p><h5 id="link-type-bookmark"><span class="secno">4.12.4.3 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>bookmark</code></dfn>"</h5><p>The <code title="rel-bookmark"><a href="#link-type-bookmark">bookmark</a></code> keyword may be
21729: used with <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements. This
21730: keyword creates a <a href="#hyperlink">hyperlink</a>.</p><p>The <code title="rel-bookmark"><a href="#link-type-bookmark">bookmark</a></code> keyword gives a
21731: permalink for the nearest ancestor <code><a href="#the-article-element">article</a></code> element of
21732: the linking element in question, or of <a href="#associatedSection">the section the linking element is most
21733: closely associated with</a>, if there are no ancestor
21734: <code><a href="#the-article-element">article</a></code> elements.</p><div class="example">
21735: <p>The following snippet has three permalinks. A user agent could
21736: determine which permalink applies to which part of the spec by
21737: looking at where the permalinks are given.</p>
21738: <pre> ...
21739: <body>
21740: <h1>Example of permalinks</h1>
21741: <div id="a">
21742: <h2>First example</h2>
21743: <p><a href="a.html" rel="bookmark">This</a> permalink applies to
21744: only the content from the first H2 to the second H2. The DIV isn't
21745: exactly that section, but it roughly corresponds to it.</p>
21746: </div>
21747: <h2>Second example</h2>
21748: <article id="b">
21749: <p><a href="b.html" rel="bookmark">This</a> permalink applies to
21750: the outer ARTICLE element (which could be, e.g., a blog post).</p>
21751: <article id="c">
21752: <p><a href="c.html" rel="bookmark">This</a> permalink applies to
21753: the inner ARTICLE element (which could be, e.g., a blog comment).</p>
21754: </article>
21755: </article>
21756: </body>
21757: ...</pre>
1.557 mike 21758: </div><h5 id="link-type-help"><span class="secno">4.12.4.4 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>help</code></dfn>"</h5><p>The <code title="rel-help"><a href="#link-type-help">help</a></code> keyword may be used with
1.545 mike 21759: <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>
21760: elements. This keyword creates a <a href="#hyperlink">hyperlink</a>.</p><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
21761: document provides further help information for the parent of the
21762: element defining the hyperlink, and its children.</p><div class="example">
21763:
21764: <p>In the following example, the form control has associated
21765: context-sensitive help. The user agent could use this information,
21766: for example, displaying the referenced document if the user presses
21767: the "Help" or "F1" key.</p>
21768:
21769: <pre> <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p></pre>
21770:
21771: </div><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
21772: document provides help for the page as a whole.</p><p>For <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements, on some
21773: browsers, the <code title="rel-help"><a href="#link-type-help">help</a></code> keyword causes the
1.557 mike 21774: link to use a different cursor.</p><h5 id="rel-icon"><span class="secno">4.12.4.5 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>icon</code></dfn>"</h5><p>The <code title="rel-icon"><a href="#rel-icon">icon</a></code> keyword may be used with
1.545 mike 21775: <code><a href="#the-link-element">link</a></code> elements. This keyword creates an <a href="#external-resource-link" title="external resource link">external resource link</a>.</p><p>Icons could be auditory icons, visual icons, or other kinds of
21776: icons. <span class="impl">If multiple icons are provided, the user
21777: 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
21778: multiple equally appropriate icons, user agents must use the last
21779: one declared in <a href="#tree-order">tree order</a> at the time that the user
21780: agent collected the list of icons. If the user agent tries to use an
21781: icon but that icon is determined, upon closer examination, to in
21782: fact be inappropriate (e.g. because it uses an unsupported format),
21783: then the user agent must try the next-most-appropriate icon as
21784: determined by the attributes.</span></p><p>The <dfn id="attr-link-sizes" role="button" tabindex="0" aria-haspopup="true"><code>sizes</code></dfn>
1.549 mike 21785: attribute gives the sizes of icons for visual media. Its value, if
21786: present, is merely advisory. User agents may use the value to decide
21787: which icon(s) to use if multiple icons are available.</p><p>If specified, the attribute must have a value that is an
1.545 mike 21788: <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a> which
21789: are <a href="#ascii-case-insensitive">ASCII case-insensitive</a>. Each value must be either
21790: an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="attr-link-sizes-any"><a href="#attr-link-sizes-any">any</a></code>", or a value that consists of
21791: two <a href="#valid-non-negative-integer" title="valid non-negative integer">valid non-negative
21792: integers</a> that do not have a leading U+0030 DIGIT ZERO (0)
21793: character and that are separated by a single U+0078 LATIN SMALL
21794: LETTER X or U+0058 LATIN CAPITAL LETTER X character.</p><p>The keywords represent icon sizes.</p><p>The <dfn id="attr-link-sizes-any" role="button" tabindex="0" aria-haspopup="true"><code>any</code></dfn> keyword
21795: represents that the resource contains a scalable icon, e.g. as
21796: provided by an SVG image.</p><p>The keywords specified on the <code title="attr-link-sizes"><a href="#attr-link-sizes">sizes</a></code> attribute must not represent
21797: icon sizes that are not actually available in the linked
21798: resource.</p><div class="example">
21799:
21800: <p>The following snippet shows the top part of an application with
21801: several icons.</p>
21802:
21803: <pre><!DOCTYPE HTML>
21804: <html>
21805: <head>
21806: <title>lsForums — Inbox</title>
21807: <link rel=icon href=favicon.png sizes="16x16" type="image/png">
21808: <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
21809: <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
21810: <link rel=icon href=iphone.png sizes="57x57" type="image/png">
21811: <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
21812: <link rel=stylesheet href=lsforums.css>
21813: <script src=lsforums.js></script>
21814: <meta name=application-name content="lsForums">
21815: </head>
21816: <body>
21817: ...</pre>
21818:
21819: </div><p>For historical reasons, the <code title="rel-icon"><a href="#rel-icon">icon</a></code>
21820: keyword may be preceded by the keyword "<code title="">shortcut</code>". If the "<code title="">shortcut</code>"
21821: keyword is present, it must be come immediately before the <code title="rel-icon"><a href="#rel-icon">icon</a></code> keyword and the two keywords must be
1.557 mike 21822: separated by only a single U+0020 SPACE character.</p><h5 id="link-type-license"><span class="secno">4.12.4.6 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>license</code></dfn>"</h5><p>The <code title="rel-license"><a href="#link-type-license">license</a></code> keyword may be used
1.545 mike 21823: 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>
21824: elements. This keyword creates a <a href="#hyperlink">hyperlink</a>.</p><p>The <code title="rel-license"><a href="#link-type-license">license</a></code> keyword indicates
21825: that the referenced document provides the copyright license terms
21826: under which the main content of the current document is
21827: provided.</p><p>This specification does not specify how to distinguish between
21828: the main content of a document and content that is not deemed to be
21829: part of that main content. The distinction should be made clear to
21830: the user.</p><div class="example">
21831:
21832: <p>Consider a photo sharing site. A page on that site might
21833: describe and show a photograph, and the page might be marked up as
21834: follows:</p>
21835:
21836: <pre><!DOCTYPE HTML>
21837: <html>
21838: <head>
21839: <title>Exampl Pictures: Kissat</title>
21840: <link rel="stylesheet" href="/style/default">
21841: </head>
21842: <body>
21843: <h1>Kissat</h1>
21844: <nav>
21845: <a href="../">Return to photo index</a>
21846: </nav>
21847: <figure>
21848: <img src="/pix/39627052_fd8dcd98b5.jpg">
21849: <figcaption>Kissat</figcaption>
21850: </figure>
21851: <p>One of them has six toes!</p>
21852: <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
21853: <footer>
21854: <a href="/">Home</a> | <a href="../">Photo index</a>
21855: <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
21856: </footer>
21857: </body>
21858: </html></pre>
21859:
21860: <p>In this case the <code title="rel-license"><a href="#link-type-license">license</a></code>
21861: applies to just the photo (the main content of the document), not
21862: the whole document. In particular not the design of the page
21863: itself, which is covered by the copyright given at the bottom of
21864: the document. This could be made clearer in the styling
21865: (e.g. making the license link prominently positioned near the
21866: photograph, while having the page copyright in light small text at
21867: the foot of the page.</p>
21868:
1.557 mike 21869: </div><h5 id="link-type-nofollow"><span class="secno">4.12.4.7 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>nofollow</code></dfn>"</h5><p>The <code title="rel-nofollow"><a href="#link-type-nofollow">nofollow</a></code> keyword may be
1.545 mike 21870: used with <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements. This
21871: keyword does not create a <a href="#hyperlink">hyperlink</a>, but <a href="#hyperlink-annotation" title="hyperlink annotation">annotates</a> any other hyperlinks
21872: created by the element (the implied hyperlink, if no other keywords
21873: create one).</p><p>The <code title="rel-nofollow"><a href="#link-type-nofollow">nofollow</a></code> keyword indicates
21874: that the link is not endorsed by the original author or publisher of
21875: the page, or that the link to the referenced document was included
21876: primarily because of a commercial relationship between people
1.557 mike 21877: affiliated with the two pages.</p><h5 id="link-type-noreferrer"><span class="secno">4.12.4.8 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>noreferrer</code></dfn>"</h5><p>The <code title="rel-noreferrer"><a href="#link-type-noreferrer">noreferrer</a></code> keyword may be
1.545 mike 21878: used with <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements. This
21879: keyword does not create a <a href="#hyperlink">hyperlink</a>, but <a href="#hyperlink-annotation" title="hyperlink annotation">annotates</a> any other hyperlinks
21880: created by the element (the implied hyperlink, if no other keywords
21881: create one).</p><p>It indicates that no referrer information is to be leaked when
1.578 mike 21882: following the link.</p><h5 id="link-type-prefetch"><span class="secno">4.12.4.9 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>prefetch</code></dfn>"</h5><p>The <code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code> keyword may be
1.545 mike 21883: 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>
21884: elements. This keyword creates an <a href="#external-resource-link" title="external resource
21885: link">external resource link</a>.</p><p>The <code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code> keyword indicates
21886: that preemptively fetching and caching the specified resource is
21887: likely to be beneficial, as it is highly likely that the user will
1.578 mike 21888: require this resource.</p><p>There is no default type for resources given by the <code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code> keyword.</p><h5 id="link-type-search"><span class="secno">4.12.4.10 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>search</code></dfn>"</h5><p>The <code title="rel-search"><a href="#link-type-search">search</a></code> keyword may be used
1.545 mike 21889: 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>
21890: elements. This keyword creates a <a href="#hyperlink">hyperlink</a>.</p><p>The <code title="rel-search"><a href="#link-type-search">search</a></code> keyword indicates that
21891: the referenced document provides an interface specifically for
21892: searching the document and its related resources.</p><p class="note">OpenSearch description documents can be used with
1.446 mike 21893: <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
1.578 mike 21894: autodiscover search interfaces. <a href="#refsOPENSEARCH">[OPENSEARCH]</a></p><h5 id="link-type-stylesheet"><span class="secno">4.12.4.11 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>stylesheet</code></dfn>"</h5><p>The <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code> keyword may be
1.545 mike 21895: used with <code><a href="#the-link-element">link</a></code> elements. This keyword creates an <a href="#external-resource-link" title="external resource link">external resource link</a> that
21896: contributes to the <a href="#styling">styling processing model</a>.</p><p>The specified resource is a resource that describes how to
21897: present the document. Exactly how the resource is to be processed
21898: depends on the actual type of the resource.</p><p>If the <code title="rel-alternate"><a href="#rel-alternate">alternate</a></code> keyword is
21899: also specified on the <code><a href="#the-link-element">link</a></code> element, then <dfn id="the-link-is-an-alternative-stylesheet" role="button" tabindex="0" aria-haspopup="true">the link
21900: 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
1.578 mike 21901: <code><a href="#the-link-element">link</a></code> element, with a non-empty value.</p><p>The default type for resources given by the <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code> keyword is <code title="">text/css</code>.</p><h5 id="link-type-tag"><span class="secno">4.12.4.12 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>tag</code></dfn>"</h5><p>The <code title="rel-tag"><a href="#link-type-tag">tag</a></code> keyword may be used with
1.556 mike 21902: <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code> elements. This keyword creates
21903: a <a href="#hyperlink">hyperlink</a>.</p><p>The <code title="rel-tag"><a href="#link-type-tag">tag</a></code> keyword indicates that the
1.545 mike 21904: <em>tag</em> that the referenced document represents applies to the
21905: current document.</p><p class="note">Since it indicates that the tag <em>applies to the
1.446 mike 21906: current document</em>, it would be inappropriate to use this keyword
21907: in the markup of a <a href="#tag-cloud">tag cloud</a>, which lists
1.578 mike 21908: the popular tags across a set of pages.</p><h5 id="sequential-link-types"><span class="secno">4.12.4.13 </span>Sequential link types</h5><p>Some documents form part of a sequence of documents.</p><p>A sequence of documents is one where each document can have a
1.545 mike 21909: <em>previous sibling</em> and a <em>next sibling</em>. A document
21910: with no previous sibling is the start of its sequence, a document
1.578 mike 21911: with no next sibling is the end of its sequence.</p><p>A document may be part of multiple sequences.</p><h6 id="link-type-next"><span class="secno">4.12.4.13.1 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>next</code></dfn>"</h6><p>The <code title="rel-next"><a href="#link-type-next">next</a></code> keyword may be used with
1.545 mike 21912: <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>
21913: elements. This keyword creates a <a href="#hyperlink">hyperlink</a>.</p><p>The <code title="rel-next"><a href="#link-type-next">next</a></code> keyword indicates that the
21914: document is part of a sequence, and that the link is leading to the
1.578 mike 21915: document that is the next logical document in the sequence.</p><h6 id="link-type-prev"><span class="secno">4.12.4.13.2 </span>Link type "<dfn role="button" tabindex="0" aria-haspopup="true"><code>prev</code></dfn>"</h6><p>The <code title="rel-prev"><a href="#link-type-prev">prev</a></code> keyword may be used with
1.545 mike 21916: <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>
21917: elements. This keyword creates a <a href="#hyperlink">hyperlink</a>.</p><p>The <code title="rel-prev"><a href="#link-type-prev">prev</a></code> keyword indicates that the
21918: document is part of a sequence, and that the link is leading to the
1.578 mike 21919: document that is the previous logical document in the sequence.</p><h5 id="other-link-types"><span class="secno">4.12.4.14 </span>Other link types</h5><p><dfn id="concept-rel-extensions" role="button" tabindex="0" aria-haspopup="true">Extensions to the predefined
1.545 mike 21920: set of link types</dfn> may be registered in the <a href="http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions">Microformats wiki existing-rel-values page</a>. <a href="#refsMFREL">[MFREL]</a></p><p>Anyone is free to edit the <span title="">Microformats wiki
21921: existing-rel-values page</span> at any time to add a type. Extension
21922: types must be specified with the following information:</p><dl><dt>Keyword</dt>
21923:
21924: <dd>
21925:
21926: <p>The actual value being defined. The value should not be
21927: confusingly similar to any other defined value (e.g. differing
21928: only in case).</p>
21929:
21930: <p>If the value contains a U+003A COLON character (:), it must
21931: also be an <a href="#absolute-url">absolute URL</a>.</p>
21932:
21933: </dd>
21934:
21935:
21936: <dt>Effect on... <code><a href="#the-link-element">link</a></code></dt>
21937:
21938: <dd>
21939:
21940: <p>One of the following:</p>
21941:
21942: <dl><dt>Not allowed</dt>
21943:
21944: <dd>The keyword must not be specified on <code><a href="#the-link-element">link</a></code>
21945: elements.</dd>
21946:
21947: <dt>Hyperlink</dt>
21948:
21949: <dd>The keyword may be specified on a <code><a href="#the-link-element">link</a></code> element;
21950: it creates a <a href="#hyperlink">hyperlink</a>.</dd>
21951:
21952: <dt>External Resource</dt>
21953:
21954: <dd>The keyword may be specified on a <code><a href="#the-link-element">link</a></code> element;
21955: it creates an <a href="#external-resource-link">external resource link</a>.</dd>
21956:
21957: </dl></dd>
21958:
21959:
21960: <dt>Effect on... <code><a href="#the-a-element">a</a></code> and <code><a href="#the-area-element">area</a></code></dt>
21961:
21962: <dd>
21963:
21964: <p>One of the following:</p>
21965:
21966: <dl><dt>Not allowed</dt>
21967:
21968: <dd>The keyword must not be specified on <code><a href="#the-a-element">a</a></code> and
21969: <code><a href="#the-area-element">area</a></code> elements.</dd>
21970:
21971: <dt>Hyperlink</dt>
21972:
21973: <dd>The keyword may be specified on <code><a href="#the-a-element">a</a></code> and
21974: <code><a href="#the-area-element">area</a></code> elements; it creates a
21975: <a href="#hyperlink">hyperlink</a>.</dd>
21976:
21977: <dt>External Resource</dt>
21978:
21979: <dd>The keyword may be specified on a <code><a href="#the-a-element">a</a></code> and
21980: <code><a href="#the-area-element">area</a></code> elements; it creates an <a href="#external-resource-link">external resource
21981: link</a>.</dd>
21982:
21983: <dt>Hyperlink Annotation</dt>
21984:
21985: <dd>The keyword may be specified on a <code><a href="#the-a-element">a</a></code> and
21986: <code><a href="#the-area-element">area</a></code> elements; it <a href="#hyperlink-annotation" title="hyperlink
21987: annotation">annotates</a> other <a href="#hyperlink" title="hyperlink">hyperlinks</a> created by the element.</dd>
21988:
21989: </dl></dd>
21990:
21991:
21992: <dt>Brief description</dt>
21993:
21994: <dd><p>A short non-normative description of what the keyword's
21995: meaning is.</p></dd>
21996:
21997:
21998: <dt>Specification</dt>
21999:
22000: <dd><p>A link to a more detailed description of the keyword's
22001: semantics and requirements. It could be another page on the Wiki,
22002: or a link to an external page.</p></dd>
22003:
22004:
22005: <dt>Synonyms</dt>
22006:
22007: <dd><p>A list of other keyword values that have exactly the same
22008: processing requirements. Authors should not use the values defined
22009: to be synonyms, they are only intended to allow user agents to
22010: support legacy content. Anyone may remove synonyms that are not
22011: used in practice; only names that need to be processed as synonyms
22012: for compatibility with legacy content are to be registered in this
22013: way.</p></dd>
22014:
22015:
22016: <dt>Status</dt>
22017:
22018: <dd>
22019:
22020: <p>One of the following:</p>
22021:
22022: <dl><dt>Proposed</dt>
22023:
22024: <dd>The keyword has not received wide peer review and
22025: approval. Someone has proposed it and is, or soon will be, using
22026: it.</dd>
22027:
22028: <dt>Ratified</dt>
22029:
22030: <dd>The keyword has received wide peer review and approval. It
22031: has a specification that unambiguously defines how to handle
22032: pages that use the keyword, including when they use it in
22033: incorrect ways.</dd>
22034:
22035: <dt>Discontinued</dt>
22036:
22037: <dd>The keyword has received wide peer review and it has been
22038: found wanting. Existing pages are using this keyword, but new
22039: pages should avoid it. The "brief description" and
22040: "specification" entries will give details of what authors should
22041: use instead, if anything.</dd>
22042:
22043: </dl><p>If a keyword is found to be redundant with existing values, it
22044: should be removed and listed as a synonym for the existing
22045: value.</p>
22046:
22047: <p>If a keyword is registered in the "proposed" state for a
22048: period of a month or more without being used or specified, then it
22049: may be removed from the registry.</p>
22050:
22051: <p>If a keyword is added with the "proposed" status and found to
22052: be redundant with existing values, it should be removed and listed
22053: as a synonym for the existing value. If a keyword is added with
22054: the "proposed" status and found to be harmful, then it should be
22055: changed to "discontinued" status.</p>
22056:
22057: <p>Anyone can change the status at any time, but should only do so
22058: in accordance with the definitions above.</p>
22059:
22060: </dd>
22061:
22062: </dl><p>Types defined as extensions in the <a href="http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions">Microformats
22063: wiki existing-rel-values page</a> with the status "proposed" or
22064: "ratified" may be used with the <code title="">rel</code> attribute
22065: on <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
22066: in accordance to the "Effect on..." field. <a href="#refsMFREL">[MFREL]</a></p><h3 id="common-idioms-without-dedicated-elements"><span class="secno">4.13 </span>Common idioms without dedicated elements</h3><h4 id="the-main-part-of-the-content"><span class="secno">4.13.1 </span>The main part of the content</h4><p>The main content of a page — not including headers and
22067: footers, navigation links, sidebars, advertisements, and so forth
22068: — can be marked up in a variety of ways, depending on the
22069: needs of the author.</p><p>The simplest solution is to not mark up the main content at all,
22070: and just leave it as implicit. Another way to think of this is that
22071: the <code><a href="#the-body-element">body</a></code> elements marks up the main content of the
22072: page, and the bits that aren't main content are excluded through the
22073: use of more appropriate elements like <code><a href="#the-aside-element">aside</a></code> and
22074: <code><a href="#the-nav-element">nav</a></code>.</p><div class="example">
22075:
22076: <p>Here is a short Web page marked up along this minimalistic
22077: school of thought. The main content is highlighted. Notice how all
22078: the <em>other</em> content in the <code><a href="#the-body-element">body</a></code> is marked up
22079: with elements to indicate that it's not part of the main content,
22080: in this case <code><a href="#the-header-element">header</a></code>, <code><a href="#the-nav-element">nav</a></code>, and
22081: <code><a href="#the-footer-element">footer</a></code>.</p>
22082:
22083: <pre><!DOCTYPE HTML>
22084: <html>
22085: <head>
22086: <title> My Toys </title>
22087: </head>
22088: <body>
22089: <header>
22090: <h1>My toys</h1>
22091: </header>
22092: <nav>
22093: <p><a href="/">Home</a></p>
22094: <p><a href="/contact">Contact</a></p>
22095: </nav>
22096: <strong> <p>I really like my chained book and my telephone. I'm not such a
22097: fan of my big ball.</p>
22098: <p>Another toy I like is my mirror.</p></strong>
22099: <footer>
22100: <p>© copyright 2010 by the boy</p>
22101: </footer>
22102: </body>
22103: </html></pre>
22104:
22105: </div><p>If the main content is an independent unit of content that one
22106: could imagine syndicating independently, then the
22107: <code><a href="#the-article-element">article</a></code> element would be appropriate to mark up the
22108: main content of the document.</p><div class="example">
22109:
22110: <p>The document in the previous example is here recast as a blog
22111: post:</p>
22112:
22113: <pre><!DOCTYPE HTML>
22114: <html>
22115: <head>
22116: <title> The Boy Blog: My Toys </title>
22117: </head>
22118: <body>
22119: <header>
22120: <h1>The Boy Blog</h1>
22121: </header>
22122: <nav>
22123: <p><a href="/">Home</a></p>
22124: <p><a href="/contact">Contact</a></p>
22125: </nav>
22126: <strong> <article>
22127: <header>
22128: <h1>My toys</h1>
22129: <p>Published <time pubdate datetime="2010-08-04">August 4th</time></p>
22130: </header>
22131: <p>I really like my chained book and my telephone. I'm not such a
22132: fan of my big ball.</p>
22133: <p>Another toy I like is my mirror.</p>
22134: </article></strong>
22135: <footer>
22136: <p>© copyright 2010 by the boy</p>
22137: </footer>
22138: </body>
22139: </html></pre>
22140:
22141: </div><p>If the main content is not an independent unit of content so much
22142: as a section of a larger work, for instance a chapter, then the
22143: <code><a href="#the-section-element">section</a></code> element would be appropriate to mark up the
22144: main content of the document.</p><div class="example">
22145:
22146: <p>Here is the same document, case as a chapter in an online
22147: book:</p>
22148:
22149: <pre><!DOCTYPE HTML>
22150: <html>
22151: <head>
22152: <title> Chapter 2: My Toys — The Book of the Boy </title>
22153: </head>
22154: <body>
22155: <header>
22156: <h1>Chapter 2: My Toys</h1>
22157: </header>
22158: <nav>
22159: <p><a href="/">Front Page</a></p>
22160: <p><a href="/toc">Table of Contents</a></p>
22161: <p><a href="/c1">Chapter 1</a> — <a href="/c3">Chapter 3</a></p>
22162: </nav>
22163: <strong> <section>
22164: <p>I really like my chained book and my telephone. I'm not such a
22165: fan of my big ball.</p>
22166: <p>Another toy I like is my mirror.</p>
22167: </section></strong>
22168: <footer>
22169: <p>© copyright 2010 by the boy</p>
22170: </footer>
22171: </body>
22172: </html></pre>
22173:
22174: </div><p>If neither <code><a href="#the-article-element">article</a></code> nor <code><a href="#the-section-element">section</a></code> would be
22175: appropriate, but the main content still needs an explicit element,
22176: for example for styling purposes, then the <code><a href="#the-div-element">div</a></code> element
22177: can be used.</p><div class="example">
22178:
22179: <p>This is the same as the original example, but using
22180: <code><a href="#the-div-element">div</a></code> for the main content instead of leaving it
22181: implied:</p>
22182:
22183: <pre><!DOCTYPE HTML>
22184: <html>
22185: <head>
22186: <title> My Toys </title>
22187: <style>
22188: body > div { background: navy; color: yellow; }
22189: </style>
22190: </head>
22191: <body>
22192: <header>
22193: <h1>My toys</h1>
22194: </header>
22195: <nav>
22196: <p><a href="/">Home</a></p>
22197: <p><a href="/contact">Contact</a></p>
22198: </nav>
22199: <strong> <div>
22200: <p>I really like my chained book and my telephone. I'm not such a
22201: fan of my big ball.</p>
22202: <p>Another toy I like is my mirror.</p>
22203: </div></strong>
22204: <footer>
22205: <p>© copyright 2010 by the boy</p>
22206: </footer>
22207: </body>
22208: </html></pre>
22209:
22210: </div><h4 id="rel-up"><span class="secno">4.13.2 </span>Bread crumb navigation</h4><p>This specification does not provide a machine-readable way of
22211: describing bread-crumb navigation menus. Authors are encouraged to
22212: just use a series of links in a paragraph. The <code><a href="#the-nav-element">nav</a></code>
22213: element can be used to mark the section containing these
22214: paragraphs as being navigation blocks.</p><div class="example">
22215:
22216: <p>In the following example, the current page can be reached via
22217: two paths.</p>
22218:
22219: <pre><nav>
22220: <p>
22221: <a href="/">Main</a> >
22222: <a href="/products/">Products</a> >
22223: <a href="/products/dishwashers/">Dishwashers</a> >
22224: <a>Second hand</a>
22225: </p>
22226: <p>
22227: <a href="/">Main</a> >
22228: <a href="/second-hand/">Second hand</a> >
22229: <a>Dishwashers</a>
22230: </p>
22231: </nav></pre>
22232:
22233: </div><h4 id="tag-clouds"><span class="secno">4.13.3 </span>Tag clouds</h4><p id="tag-cloud">This specification does not define any markup
22234: specifically for marking up lists of keywords that apply to a group
22235: of pages (also known as <i>tag clouds</i>). In general, authors are
22236: encouraged to either mark up such lists using <code><a href="#the-ul-element">ul</a></code>
22237: elements with explicit inline counts that are then hidden and turned
22238: into a presentational effect using a style sheet, or to use SVG.</p><div class="example">
22239:
22240: <p>Here, three tags are included in a short tag cloud:</p>
22241:
22242: <pre><style>
22243: @media screen, print, handheld, tv {
22244: /* should be ignored by non-visual browsers */
22245: .tag-cloud > li > span { display: none; }
22246: .tag-cloud > li { display: inline; }
22247: .tag-cloud-1 { font-size: 0.7em; }
22248: .tag-cloud-2 { font-size: 0.9em; }
22249: .tag-cloud-3 { font-size: 1.1em; }
22250: .tag-cloud-4 { font-size: 1.3em; }
22251: .tag-cloud-5 { font-size: 1.5em; }
22252: }
22253: </style>
22254: ...
22255: <ul class="tag-cloud">
22256: <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
22257: <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
22258: <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
22259: </ul></pre>
22260:
22261: <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
22262: provided to convert the markup into a cloud of differently-sized
22263: words, but for user agents that do not support CSS or are not
22264: visual, the markup contains annotations like "(popular)" or
22265: "(rare)" to categorize the various tags by frequency, thus enabling
22266: all users to benefit from the information.</p>
22267:
22268: <p>The <code><a href="#the-ul-element">ul</a></code> element is used (rather than
22269: <code><a href="#the-ol-element">ol</a></code>) because the order is not particularly important:
22270: while the list is in fact ordered alphabetically, it would convey
22271: the same information if ordered by, say, the length of the tag.</p>
22272:
22273: <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
22274: on these <code><a href="#the-a-element">a</a></code> elements because they do not represent tags
22275: that apply to the page itself; they are just part of an index
22276: listing the tags themselves.</p>
22277:
22278: </div><h4 id="conversations"><span class="secno">4.13.4 </span>Conversations</h4><p>This specification does not define a specific element for marking
22279: up conversations, meeting minutes, chat transcripts, dialogues in
22280: screenplays, instant message logs, and other situations where
22281: different players take turns in discourse.</p><p>Instead, authors are encouraged to mark up conversations using
22282: <code><a href="#the-p-element">p</a></code> elements and punctuation. Authors who need to mark
22283: the speaker for styling purposes are encouraged to use
22284: <code><a href="#the-span-element">span</a></code> or <code><a href="#the-b-element">b</a></code>. Paragraphs with their text
22285: wrapped in the <code><a href="#the-i-element">i</a></code> element can be used for marking up
22286: stage directions.</p><div class="example">
22287:
22288: <p>This example demonstrates this using an extract from Abbot and
22289: Costello's famous sketch, <cite>Who's on first</cite>:</p>
22290:
22291: <pre><p> Costello: Look, you gotta first baseman?
22292: <p> Abbott: Certainly.
22293: <p> Costello: Who's playing first?
22294: <p> Abbott: That's right.
22295: <p> Costello becomes exasperated.
22296: <p> Costello: When you pay off the first baseman every month, who gets the money?
22297: <p> Abbott: Every dollar of it.</pre>
22298:
22299: </div><div class="example">
22300:
22301: <p>The following extract shows how an IM conversation log could be
22302: marked up.</p>
22303:
22304: <pre><p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
22305: <p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
22306: <p> <time>14:23</time> <b>egof</b> it's unarguably
22307: <p> <time>14:23</time> <i>* kaj blinks</i>
22308: <p> <time>14:24</time> <b>kaj</b> you are not helping your case</pre>
22309:
22310:
22311: </div><h4 id="footnotes"><span class="secno">4.13.5 </span>Footnotes</h4><p>HTML does not have a dedicated mechanism for marking up
22312: footnotes. Here are the recommended alternatives.</p><hr><p>For short inline annotations, the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute should be used.</p><div class="example">
22313:
22314: <p>In this example, two parts of a dialogue are annotated with
22315: footnote-like content using the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute.</p>
22316:
22317: <pre><p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
22318: <p> <b>Shopkeeper</b>: <strong><span title="Colloquial pronunciation of 'What do you'"</strong>
22319: >Watcha</span> mean, miss?
22320: <p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
22321: <p> <b>Shopkeeper</b>: Sorry, <span <strong>title="This is, of course, a lie."</strong>>we're
22322: closing for lunch</span>.</pre>
22323:
22324: </div><hr><p>For longer annotations, the <code><a href="#the-a-element">a</a></code> element should be
22325: used, pointing to an element later in the document. The convention
22326: is that the contents of the link be a number in square brackets.</p><div class="example">
22327:
22328: <p>In this example, a footnote in the dialogue links to a paragraph
22329: below the dialogue. The paragraph then reciprocally links back to the
22330: dialogue, allowing the user to return to the location of the
22331: footnote.</p>
22332:
22333: <pre><p> Announcer: Number 16: The <i>hand</i>.
22334: <p> Interviewer: Good evening. I have with me in the studio tonight
22335: Mr Norman St John Polevaulter, who for the past few years has been
22336: contradicting people. Mr Polevaulter, why <em>do</em> you
22337: contradict people?
22338: <p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
22339: <p> Interviewer: You told me you did!
22340: <em>...</em>
22341: <section>
22342: <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
22343: but paradoxically if it were true he could not say so without
22344: contradicting the interviewer and thus making it false.</p>
22345: </section></pre>
22346:
22347: </div><hr><p>For side notes, longer annotations that apply to entire sections
22348: of the text rather than just specific words or sentences, the
22349: <code><a href="#the-aside-element">aside</a></code> element should be used.</p><div class="example">
22350:
22351: <p>In this example, a sidebar is given after a dialogue, giving it
22352: some context.</p>
22353:
22354: <pre><p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
22355: <p> <span class="speaker">Shopkeeper</span>: I'm sorry?
22356: <p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
22357: <p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's.
22358: <aside>
22359: <p>In 1970, the British Empire lay in ruins, and foreign
22360: nationalists frequented the streets — many of them Hungarians
22361: (not the streets — the foreign nationals). Sadly, Alexander
22362: Yalt has been publishing incompetently-written phrase books.
22363: </aside></pre>
22364:
22365: </div><hr><p>For figures or tables, footnotes can be included in the relevant
22366: <code><a href="#the-figcaption-element">figcaption</a></code> or <code><a href="#the-caption-element">caption</a></code> element, or in
22367: surrounding prose.</p><div class="example">
22368:
22369: <p>In this example, a table has cells with footnotes
22370: that are given in prose. A <code><a href="#the-figure-element">figure</a></code> element is used to
22371: give a single legend to the combination of the table and its
22372: footnotes.</p>
22373:
22374: <pre><figure>
22375: <figcaption>Table 1. Alternative activities for knights.</figcaption>
22376: <table>
22377: <tr>
22378: <th> Activity
22379: <th> Location
22380: <th> Cost
22381: <tr>
22382: <td> Dance
22383: <td> Wherever possible
22384: <td> £0<sup><a href="#fn1">1</a></sup>
22385: <tr>
22386: <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
22387: <td> Undisclosed
22388: <td> Undisclosed
22389: <tr>
22390: <td> Dining<sup><a href="#fn3">3</a></sup>
22391: <td> Camelot
22392: <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
22393: </table>
22394: <p id="fn1">1. Assumed.</p>
22395: <p id="fn2">2. Footwork impeccable.</p>
22396: <p id="fn3">3. Quality described as "well".</p>
22397: <p id="fn4">4. A lot.</p>
22398: </figure></pre>
22399:
22400: </div><h2 id="browsers"><span class="secno">5 </span>Loading Web pages</h2><h3 id="windows"><span class="secno">5.1 </span>Browsing contexts</h3><p>A <dfn id="browsing-context" role="button" tabindex="0" aria-haspopup="true">browsing context</dfn> is an environment in which
1.446 mike 22401: <code><a href="#document">Document</a></code> objects are presented to the user.</p><p class="note">A tab or window in a Web browser typically contains
22402: 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
22403: <code><a href="#frameset">frameset</a></code></span>.</p><p>Each <a href="#browsing-context">browsing context</a> has a corresponding
22404: <code><a href="#windowproxy">WindowProxy</a></code> object.</p><p>A <a href="#browsing-context">browsing context</a> has a <a href="#session-history">session
22405: history</a>, which lists the <code><a href="#document">Document</a></code> objects that
22406: that <a href="#browsing-context">browsing context</a> has presented, is presenting, or
22407: will present. At any time, one <code><a href="#document">Document</a></code> in each
22408: <a href="#browsing-context">browsing context</a> is designated the <dfn id="active-document" role="button" tabindex="0" aria-haspopup="true">active
22409: document</dfn>.</p><p>Each <code><a href="#document">Document</a></code> is associated with a
22410: <code><a href="#window">Window</a></code> object. A <a href="#browsing-context">browsing context</a>'s
22411: <code><a href="#windowproxy">WindowProxy</a></code> object forwards everything to the
22412: <a href="#browsing-context">browsing context</a>'s <a href="#active-document">active document</a>'s
22413: <code><a href="#window">Window</a></code> object.</p><p class="note">In general, there is a 1-to-1 mapping from the
1.474 mike 22414: <code><a href="#window">Window</a></code> object to the <code><a href="#document">Document</a></code> object.
22415: There are two exceptions. First, a <code><a href="#window">Window</a></code> can be reused
22416: for the presentation of a second <code><a href="#document">Document</a></code> in the same
22417: <a href="#browsing-context">browsing context</a>, such that the mapping is then 2-to-1.
22418: This occurs when a <a href="#browsing-context">browsing context</a> is <a href="#navigate" title="navigate">navigated</a> from the initial
1.446 mike 22419: <code><a href="#about:blank">about:blank</a></code> <code><a href="#document">Document</a></code> to another, with
1.474 mike 22420: <a href="#replacement-enabled">replacement enabled</a>. Second, a <code><a href="#document">Document</a></code>
22421: can end up being reused for several <code><a href="#window">Window</a></code> objects when
22422: the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> method is
22423: used, such that the mapping is then 1-to-many.</p><p class="note">A <code><a href="#document">Document</a></code> does not necessarily have a
1.446 mike 22424: <a href="#browsing-context">browsing context</a> associated with it. In particular,
22425: data mining tools are likely to never instantiate browsing
22426: contexts.</p><hr><p>A <a href="#browsing-context">browsing context</a> can have a <dfn id="creator-browsing-context" role="button" tabindex="0" aria-haspopup="true">creator browsing
22427: context</dfn>, the <a href="#browsing-context">browsing context</a> that was
22428: responsible for its creation. If a <a href="#browsing-context">browsing context</a> has
22429: a <a href="#parent-browsing-context">parent browsing context</a>, then that is its
22430: <a href="#creator-browsing-context">creator browsing context</a>. Otherwise, if the
22431: <a href="#browsing-context">browsing context</a> has an <a href="#opener-browsing-context">opener browsing
22432: context</a>, then <em>that</em> is its <a href="#creator-browsing-context">creator browsing
22433: context</a>. Otherwise, the <a href="#browsing-context">browsing context</a> has no
22434: <a href="#creator-browsing-context">creator browsing context</a>.</p><p>If a <a href="#browsing-context">browsing context</a> <var title="">A</var> has a
22435: <a href="#creator-browsing-context">creator browsing context</a>, then the
22436: <code><a href="#document">Document</a></code> that was the <a href="#active-document">active document</a> of
22437: 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" role="button" tabindex="0" aria-haspopup="true">creator
22438: <code>Document</code></dfn>.</p><h4 id="nested-browsing-contexts"><span class="secno">5.1.1 </span>Nested browsing contexts</h4><p>Certain elements (for example, <code><a href="#the-iframe-element">iframe</a></code> elements) can
22439: instantiate further <a href="#browsing-context" title="browsing context">browsing
1.623 mike 22440: contexts</a>. These are called <dfn id="nested-browsing-context" role="button" tabindex="0" aria-haspopup="true">nested browsing contexts</dfn>. If a browsing context <var title="">P</var> has a <code><a href="#document">Document</a></code> <var title="">D</var>
1.446 mike 22441: with an element <var title="">E</var> that nests another browsing
22442: context <var title="">C</var> inside it, then <var title="">C</var>
22443: is said to be <dfn id="browsing-context-nested-through" role="button" tabindex="0" aria-haspopup="true">nested
22444: through</dfn> <var title="">D</var>, and <var title="">E</var> is
22445: said to be the <dfn id="browsing-context-container" role="button" tabindex="0" aria-haspopup="true">browsing context container</dfn> of <var title="">C</var>. If the <a href="#browsing-context-container">browsing context container</a>
22446: element <var title="">E</var> is <a href="#in-a-document" title="in a
22447: Document">in</a> the <code><a href="#document">Document</a></code> <var title="">D</var>,
22448: then <var title="">P</var> is said to be the <dfn id="parent-browsing-context" role="button" tabindex="0" aria-haspopup="true">parent browsing
22449: context</dfn> of <var title="">C</var> and <var title="">C</var> is
22450: said to be a <dfn id="child-browsing-context" role="button" tabindex="0" aria-haspopup="true">child browsing context</dfn> of <var title="">P</var>. Otherwise, the <a href="#nested-browsing-context">nested browsing
22451: context</a> <var title="">C</var> has no <a href="#parent-browsing-context">parent browsing
22452: context</a>.</p><p>A browsing context <var title="">A</var> is said to be an <dfn id="ancestor-browsing-context" role="button" tabindex="0" aria-haspopup="true">ancestor</dfn> of a browsing
22453: context <var title="">B</var> if there exists a browsing context
22454: <var title="">A'</var> that is a <a href="#child-browsing-context">child browsing context</a>
22455: of <var title="">A</var> and that is itself an <a href="#ancestor-browsing-context" title="ancestor
22456: browsing context">ancestor</a> of <var title="">B</var>, or if
22457: there is a browsing context <var title="">P</var> that is a
22458: <a href="#child-browsing-context">child browsing context</a> of <var title="">A</var> and
22459: that is the <a href="#parent-browsing-context">parent browsing context</a> of <var title="">B</var>.</p><p>A browsing context that is not a <a href="#nested-browsing-context">nested browsing
22460: context</a> has no <a href="#parent-browsing-context">parent browsing context</a>, and is
22461: the <dfn id="top-level-browsing-context" role="button" tabindex="0" aria-haspopup="true">top-level browsing context</dfn> of all the browsing
22462: contexts for which it is an <a href="#ancestor-browsing-context">ancestor browsing
22463: context</a>.</p><p>The transitive closure of <a href="#parent-browsing-context" title="parent browsing
22464: context">parent browsing contexts</a> for a <a href="#nested-browsing-context">nested browsing
22465: context</a> gives the list of <a href="#ancestor-browsing-context" title="ancestor browsing
22466: context">ancestor browsing contexts</a>.</p><p>The <dfn id="list-of-the-descendant-browsing-contexts" role="button" tabindex="0" aria-haspopup="true">list of the descendant browsing contexts</dfn> of a
22467: <code><a href="#document">Document</a></code> <var title="">d</var> is the (ordered) list
22468: returned by the following algorithm:</p><ol><li><p>Let <var title="">list</var> be an empty list.</p></li>
1.1 mike 22469:
1.446 mike 22470: <li>
1.1 mike 22471:
1.446 mike 22472: <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
22473: through">nested through</a> an element that is <a href="#in-a-document" title="in
22474: a document">in the <code>Document</code></a> <var title="">d</var>, in the <a href="#tree-order">tree order</a> of the elements
22475: nesting those <a href="#browsing-context" title="browsing context">browsing
22476: contexts</a>, run these substeps:</p>
1.1 mike 22477:
1.446 mike 22478: <ol><li><p>Append that <a href="#child-browsing-context">child browsing context</a> to the
22479: list <var title="">list</var>.</p>
1.1 mike 22480:
1.446 mike 22481: </li><li><p>Append the <a href="#list-of-the-descendant-browsing-contexts">list of the descendant browsing
22482: contexts</a> of the <a href="#active-document">active document</a> of that
22483: <a href="#child-browsing-context">child browsing context</a> to the list <var title="">list</var>.</p></li>
1.1 mike 22484:
1.446 mike 22485: </ol></li>
1.1 mike 22486:
1.446 mike 22487: <li><p>Return the constructed <var title="">list</var>.</p></li>
1.1 mike 22488:
1.446 mike 22489: </ol><p>A <code><a href="#document">Document</a></code> is said to be <dfn id="fully-active" role="button" tabindex="0" aria-haspopup="true">fully active</dfn>
22490: when it is the <a href="#active-document">active document</a> of its <a href="#browsing-context">browsing
22491: context</a>, and either its browsing context is a <a href="#top-level-browsing-context">top-level
22492: browsing context</a>, or it has a <a href="#parent-browsing-context">parent browsing
22493: context</a> and the <code><a href="#document">Document</a></code> <a href="#browsing-context-nested-through" title="browsing
22494: context nested through">through which</a> it is <a href="#nested-browsing-context" title="nested browsing context">nested</a> is itself <a href="#fully-active">fully
22495: active</a>.</p><p>Because they are nested through an element, <a href="#child-browsing-context" title="child
22496: browsing context">child browsing contexts</a> are always tied to
22497: a specific <code><a href="#document">Document</a></code> in their <a href="#parent-browsing-context">parent browsing
22498: context</a>. User agents must not allow the user to interact with
22499: <a href="#child-browsing-context" title="child browsing context">child browsing contexts</a>
22500: of elements that are in <code><a href="#document">Document</a></code>s that are not
22501: themselves <a href="#fully-active">fully active</a>.</p><p>A <a href="#nested-browsing-context">nested browsing context</a> can have a <a href="#seamless-browsing-context-flag">seamless
22502: browsing context flag</a> set, if it is embedded through an
22503: <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><p class="note">A <a href="#nested-browsing-context">nested browsing context</a> can in some
22504: cases be taken out of its <a href="#parent-browsing-context">parent browsing context</a> (e.g.
22505: if an <code><a href="#the-iframe-element">iframe</a></code> element is removed from its
22506: <code><a href="#document">Document</a></code>). In such a situation, the <a href="#nested-browsing-context">nested
22507: browsing context</a> has no <a href="#parent-browsing-context">parent browsing context</a>,
22508: but it still has the same <a href="#browsing-context-container">browsing context container</a>
22509: and is still <a href="#browsing-context-nested-through" title="browsing context nested through">nested
22510: through</a> that element's <code><a href="#document">Document</a></code>. Such a
22511: <a href="#nested-browsing-context">nested browsing context</a> is <em>not</em> a
22512: <a href="#top-level-browsing-context">top-level browsing context</a>, and cannot contain
22513: <code><a href="#document">Document</a></code>s that are <a href="#fully-active">fully active</a>.
22514: Furthermore, if a <a href="#browsing-context-container">browsing context container</a> (such as
22515: an <code><a href="#the-iframe-element">iframe</a></code>) is moved to another <code><a href="#document">Document</a></code>,
22516: then the <a href="#parent-browsing-context">parent browsing context</a> of its <a href="#nested-browsing-context">nested
22517: browsing context</a> will change.</p><h5 id="navigating-nested-browsing-contexts-in-the-dom"><span class="secno">5.1.1.1 </span>Navigating nested browsing contexts in the DOM</h5><dl class="domintro"><dt><var title="">window</var> . <code title="dom-top" id="dom-top"><a href="#dom-top">top</a></code></dt>
1.1 mike 22518:
22519: <dd>
22520:
1.446 mike 22521: <p>Returns the <code><a href="#windowproxy">WindowProxy</a></code> for the <a href="#top-level-browsing-context">top-level browsing context</a>.</p>
1.1 mike 22522:
22523: </dd>
22524:
1.446 mike 22525: <dt><var title="">window</var> . <code title="dom-parent" id="dom-parent"><a href="#dom-parent">parent</a></code></dt>
1.1 mike 22526:
22527: <dd>
22528:
1.446 mike 22529: <p>Returns the <code><a href="#windowproxy">WindowProxy</a></code> for the <a href="#parent-browsing-context">parent browsing context</a>.</p>
1.1 mike 22530:
22531: </dd>
22532:
1.446 mike 22533: <dt><var title="">window</var> . <code title="dom-frameElement" id="dom-frameelement"><a href="#dom-frameelement">frameElement</a></code></dt>
1.1 mike 22534:
22535: <dd>
22536:
1.446 mike 22537: <p>Returns the <code><a href="#element">Element</a></code> for the <a href="#browsing-context-container">browsing context container</a>.</p>
1.1 mike 22538:
1.446 mike 22539: <p>Returns null if there isn't one.</p>
1.1 mike 22540:
1.612 mike 22541: <p>Throws a <code><a href="#securityerror">SecurityError</a></code> exception in cross-origin situations.</p>
1.1 mike 22542:
22543: </dd>
22544:
1.446 mike 22545: </dl><h4 id="auxiliary-browsing-contexts"><span class="secno">5.1.2 </span>Auxiliary browsing contexts</h4><p>It is possible to create new browsing contexts that are related
22546: to a <a href="#top-level-browsing-context">top-level browsing context</a> without being nested
22547: through an element. Such browsing contexts are called <dfn id="auxiliary-browsing-context" role="button" tabindex="0" aria-haspopup="true">auxiliary browsing
22548: contexts</dfn>. Auxiliary browsing contexts are always <a href="#top-level-browsing-context" title="top-level browsing context">top-level browsing
22549: contexts</a>.</p><p>An <a href="#auxiliary-browsing-context">auxiliary browsing context</a> has an <dfn id="opener-browsing-context" role="button" tabindex="0" aria-haspopup="true">opener
22550: browsing context</dfn>, which is the <a href="#browsing-context">browsing context</a>
22551: from which the <a href="#auxiliary-browsing-context">auxiliary browsing context</a> was
22552: created.</p><h5 id="navigating-auxiliary-browsing-contexts-in-the-dom"><span class="secno">5.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</h5><p>The <dfn id="dom-opener" role="button" tabindex="0" aria-haspopup="true"><code>opener</code></dfn> IDL
22553: attribute on the <code><a href="#window">Window</a></code> object, on getting, must return
22554: the <code><a href="#windowproxy">WindowProxy</a></code> object of the <a href="#browsing-context">browsing
22555: context</a> from which the current <a href="#browsing-context">browsing context</a>
22556: was created (its <a href="#opener-browsing-context">opener browsing context</a>), if there is
22557: one, if it is still available, and if the current <a href="#browsing-context">browsing
22558: context</a> has not <i><a href="#disowned-its-opener">disowned its opener</a></i>. On setting, if
22559: the new value is null then the current <a href="#browsing-context">browsing context</a>
22560: must <dfn id="disowned-its-opener" role="button" tabindex="0" aria-haspopup="true">disown its opener</dfn>; if
22561: the new value is anything else then the user agent must ignore the
22562: new value.</p><h4 id="secondary-browsing-contexts"><span class="secno">5.1.3 </span>Secondary browsing contexts</h4><p>User agents may support <dfn id="secondary-browsing-context" role="button" tabindex="0" aria-haspopup="true">secondary browsing contexts</dfn>, which are <a href="#browsing-context" title="browsing context">browsing contexts</a> that form part of
22563: the user agent's interface, apart from the main content area.</p><h4 id="browsing-context-names"><span class="secno">5.1.6 </span>Browsing context names</h4><p>Browsing contexts can have a <dfn id="browsing-context-name" role="button" tabindex="0" aria-haspopup="true">browsing context name</dfn>. By
22564: default, a browsing context has no name (its name is not set).</p><p>A <dfn id="valid-browsing-context-name" role="button" tabindex="0" aria-haspopup="true">valid browsing context name</dfn> is any string with at
22565: least one character that does not start with a U+005F LOW LINE
22566: character. (Names starting with an underscore are reserved for
22567: special keywords.)</p><p>A <dfn id="valid-browsing-context-name-or-keyword" role="button" tabindex="0" aria-haspopup="true">valid browsing context name or keyword</dfn> is any string
22568: that is either a <a href="#valid-browsing-context-name">valid browsing context name</a> or that is
1.474 mike 22569: 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><p>These values have different meanings based on whether the page is
22570: sandboxed or not, as summarized in the following (non-normative)
22571: table. In this table, "current" means the <a href="#browsing-context">browsing
22572: context</a> that the link or script is in, "parent" means the
22573: <a href="#parent-browsing-context">parent browsing context</a> of the one the link or script
22574: is in, "master" means the nearest <a href="#ancestor-browsing-context">ancestor browsing
22575: context</a> of the one the link or script is in that is not
22576: itself in a <a href="#attr-iframe-seamless" title="attr-iframe-seamless">seamless
22577: iframe</a>, "top" means the <a href="#top-level-browsing-context">top-level browsing
22578: context</a> of the one the link or script is in, "new" means a
22579: new <a href="#top-level-browsing-context">top-level browsing context</a> or <a href="#auxiliary-browsing-context">auxiliary
22580: browsing context</a> is to be created, subject to various user
22581: preferences and user agent policies, "maybe new" means the same as
22582: "new" but the requirements for those cases encourage user agents to
22583: treat it more like "none", and "none" means that by default nothing
22584: will happen.</p><table><thead><tr><th rowspan="2">Keyword
22585: </th><th rowspan="2">Ordinary effect
22586: </th><th colspan="5">Effect in an <code><a href="#the-iframe-element">iframe</a></code> with...
22587: </th></tr><tr><th><code title="">seamless=""</code>
22588: </th><th><code title="">sandbox=""</code>
22589: </th><th><code title="">sandbox="" seamless=""</code>
22590: </th><th><code title="">sandbox="allow-top-navigation"</code>
22591: </th><th><code title="">sandbox="allow-top-navigation" seamless=""</code>
22592:
22593: </th></tr></thead><tbody><tr><td>none specified, for links and form submissions
22594: </td><td>current
22595: </td><td>master
22596: </td><td>current
22597: </td><td>master
22598: </td><td>current
22599: </td><td>master
22600:
22601: </td></tr><tr><td>none specified, for <code title="dom-open"><a href="#dom-open">window.open()</a></code>
22602: </td><td>new
22603: </td><td>new
22604: </td><td>maybe new†
22605: </td><td>maybe new†
22606: </td><td>maybe new†
22607: </td><td>maybe new†
22608:
22609: </td></tr><tr><td>empty string
22610: </td><td>current
22611: </td><td>master
22612: </td><td>current
22613: </td><td>master
22614: </td><td>current
22615: </td><td>master
22616:
22617: </td></tr><tr><td><code title="">_blank</code>
22618: </td><td>new
22619: </td><td>new
22620: </td><td>maybe new
22621: </td><td>maybe new
22622: </td><td>maybe new
22623: </td><td>maybe new
22624:
22625: </td></tr><tr><td><code title="">_self</code>
22626: </td><td>current
22627: </td><td>current
22628: </td><td>current
22629: </td><td>current
22630: </td><td>current
22631: </td><td>current
22632:
22633: </td></tr><tr><td><code title="">_parent</code> if there isn't a parent
22634: </td><td>current
22635: </td><td>current
22636: </td><td>current
22637: </td><td>current
22638: </td><td>current
22639: </td><td>current
22640:
22641: </td></tr><tr><td><code title="">_parent</code> if parent is also top
22642: </td><td>parent/top
22643: </td><td>parent/top
22644: </td><td>none
22645: </td><td>none
22646: </td><td>parent/top
22647: </td><td>parent/top
22648:
22649: </td></tr><tr><td><code title="">_parent</code> if there is one and it's not top
22650: </td><td>parent
22651: </td><td>parent
22652: </td><td>none
22653: </td><td>none
22654: </td><td>none
22655: </td><td>none
22656:
22657: </td></tr><tr><td><code title="">_top</code> if top is current
22658: </td><td>current
22659: </td><td>current
22660: </td><td>current
22661: </td><td>current
22662: </td><td>current
22663: </td><td>current
22664:
22665: </td></tr><tr><td><code title="">_top</code> if top is not current
22666: </td><td>top
22667: </td><td>top
22668: </td><td>none
22669: </td><td>none
22670: </td><td>top
22671: </td><td>top
22672:
22673: </td></tr><tr><td>name that doesn't exist
22674: </td><td>new
22675: </td><td>new
22676: </td><td>maybe new
22677: </td><td>maybe new
22678: </td><td>maybe new
22679: </td><td>maybe new
22680:
22681: </td></tr><tr><td>name that exists and is a descendant
22682: </td><td>specified descendant
22683: </td><td>specified descendant
22684: </td><td>specified descendant
22685: </td><td>specified descendant
22686: </td><td>specified descendant
22687: </td><td>specified descendant
22688:
22689: </td></tr><tr><td>name that exists and is current
22690: </td><td>current
22691: </td><td>current
22692: </td><td>current
22693: </td><td>current
22694: </td><td>current
22695: </td><td>current
22696:
22697: </td></tr><tr><td>name that exists and is a ancestor that is top
22698: </td><td>specified ancestor
22699: </td><td>specified ancestor
22700: </td><td>none
22701: </td><td>none
22702: </td><td>specified ancestor/top
22703: </td><td>specified ancestor/top
22704:
22705: </td></tr><tr><td>name that exists and is a ancestor that is not top
22706: </td><td>specified ancestor
22707: </td><td>specified ancestor
22708: </td><td>none
22709: </td><td>none
22710: </td><td>none
22711: </td><td>none
22712:
22713: </td></tr></tbody></table><p><small>† This case is only possible if the <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code> attribute also allows
1.603 mike 22714: scripts.</small></p><h3 id="the-window-object"><span class="secno">5.2 </span>The <code><a href="#window">Window</a></code> object</h3><pre class="idl">[ReplaceableNamedProperties]
1.514 mike 22715: interface <dfn id="window" role="button" tabindex="0" aria-haspopup="true">Window</dfn> : <a href="#eventtarget">EventTarget</a> {
1.446 mike 22716: // the current browsing context
1.598 mike 22717: [Unforgeable] readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-window" title="dom-window">window</a>;
1.600 mike 22718: [Replaceable] readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-self" title="dom-self">self</a>;
1.598 mike 22719: [Unforgeable] readonly attribute <a href="#document">Document</a> <a href="#dom-document" title="dom-document">document</a>;
1.446 mike 22720: attribute DOMString <a href="#dom-name" title="dom-name">name</a>;
1.598 mike 22721: [PutForwards=<a href="#dom-location-href" title="dom-location-href">href</a>, Unforgeable] readonly attribute <a href="#location">Location</a> <a href="#dom-location" title="dom-location">location</a>;
1.446 mike 22722: readonly attribute <a href="#history-0">History</a> <a href="#dom-history" title="dom-history">history</a>;
22723: [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-locationbar" title="dom-window-locationbar">locationbar</a>;
22724: [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-menubar" title="dom-window-menubar">menubar</a>;
22725: [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-personalbar" title="dom-window-personalbar">personalbar</a>;
22726: [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-scrollbars" title="dom-window-scrollbars">scrollbars</a>;
22727: [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-statusbar" title="dom-window-statusbar">statusbar</a>;
1.474 mike 22728: [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-toolbar" title="dom-window-toolbar">toolbar</a>; attribute DOMString <a href="#dom-window-status" title="dom-window-status">status</a>;
22729: void <a href="#dom-window-close" title="dom-window-close">close</a>();
1.446 mike 22730: void <a href="#dom-window-stop" title="dom-window-stop">stop</a>();
22731: void <a href="#dom-window-focus" title="dom-window-focus">focus</a>();
22732: void <a href="#dom-window-blur" title="dom-window-blur">blur</a>();
1.1 mike 22733:
1.446 mike 22734: // other browsing contexts
22735: [Replaceable] readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-frames" title="dom-frames">frames</a>;
22736: [Replaceable] readonly attribute unsigned long <a href="#dom-length" title="dom-length">length</a>;
1.598 mike 22737: [Unforgeable] readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-top" title="dom-top">top</a>;
1.446 mike 22738: attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-opener" title="dom-opener">opener</a>;
22739: readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-parent" title="dom-parent">parent</a>;
1.474 mike 22740: readonly attribute <a href="#element">Element</a>? <a href="#dom-frameelement" title="dom-frameElement">frameElement</a>;
1.608 mike 22741: <a href="#windowproxy">WindowProxy</a> <a href="#dom-open" title="dom-open">open</a>(optional DOMString url, optional DOMString target, optional DOMString features, optional boolean replace);
1.562 mike 22742: <a href="#dom-window-item" title="dom-window-item">getter</a> <a href="#windowproxy">WindowProxy</a> (unsigned long index);
22743: <a href="#dom-window-nameditem" title="dom-window-namedItem">getter</a> object (DOMString name);
1.1 mike 22744:
1.446 mike 22745: // the user agent
22746: readonly attribute <a href="#navigator">Navigator</a> <a href="#dom-navigator" title="dom-navigator">navigator</a>;
1.474 mike 22747: readonly attribute <a href="#external">External</a> <a href="#dom-external" title="dom-external">external</a>;
1.446 mike 22748: readonly attribute <a href="#applicationcache">ApplicationCache</a> <a href="#dom-applicationcache" title="dom-applicationCache">applicationCache</a>;
1.1 mike 22749:
1.446 mike 22750: // user prompts
1.562 mike 22751: void <a href="#dom-alert" title="dom-alert">alert</a>(DOMString message);
22752: boolean <a href="#dom-confirm" title="dom-confirm">confirm</a>(DOMString message);
22753: DOMString? <a href="#dom-prompt" title="dom-prompt">prompt</a>(DOMString message, optional DOMString default);
1.446 mike 22754: void <a href="#dom-print" title="dom-print">print</a>();
1.562 mike 22755: any <a href="#dom-showmodaldialog" title="dom-showModalDialog">showModalDialog</a>(DOMString url, optional any argument);
1.1 mike 22756:
1.446 mike 22757: // <a href="#event-handler-idl-attributes">event handler IDL attributes</a>
1.610 mike 22758: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onabort" title="handler-onabort">onabort</a>;
22759: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onafterprint" title="handler-window-onafterprint">onafterprint</a>;
22760: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onbeforeprint" title="handler-window-onbeforeprint">onbeforeprint</a>;
22761: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onbeforeunload" title="handler-window-onbeforeunload">onbeforeunload</a>;
22762: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onblur" title="handler-window-onblur">onblur</a>;
22763: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplay" title="handler-oncanplay">oncanplay</a>;
22764: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>;
22765: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onchange" title="handler-onchange">onchange</a>;
22766: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onclick" title="handler-onclick">onclick</a>;
22767: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>;
22768: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oncuechange" title="handler-oncuechange">oncuechange</a>;
22769: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondblclick" title="handler-ondblclick">ondblclick</a>;
22770: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondrag" title="handler-ondrag">ondrag</a>;
22771: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragend" title="handler-ondragend">ondragend</a>;
22772: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragenter" title="handler-ondragenter">ondragenter</a>;
22773: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragleave" title="handler-ondragleave">ondragleave</a>;
22774: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragover" title="handler-ondragover">ondragover</a>;
22775: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondragstart" title="handler-ondragstart">ondragstart</a>;
22776: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondrop" title="handler-ondrop">ondrop</a>;
22777: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>;
22778: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onemptied" title="handler-onemptied">onemptied</a>;
22779: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onended" title="handler-onended">onended</a>;
22780: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onerror" title="handler-window-onerror">onerror</a>;
22781: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onfocus" title="handler-window-onfocus">onfocus</a>;
22782: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onhashchange" title="handler-window-onhashchange">onhashchange</a>;
22783: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oninput" title="handler-oninput">oninput</a>;
22784: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-oninvalid" title="handler-oninvalid">oninvalid</a>;
22785: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeydown" title="handler-onkeydown">onkeydown</a>;
22786: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeypress" title="handler-onkeypress">onkeypress</a>;
22787: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onkeyup" title="handler-onkeyup">onkeyup</a>;
22788: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onload" title="handler-window-onload">onload</a>;
22789: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>;
22790: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>;
22791: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onloadstart" title="handler-onloadstart">onloadstart</a>;
22792: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onmessage" title="handler-window-onmessage">onmessage</a>;
22793: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousedown" title="handler-onmousedown">onmousedown</a>;
22794: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousemove" title="handler-onmousemove">onmousemove</a>;
22795: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseout" title="handler-onmouseout">onmouseout</a>;
22796: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseover" title="handler-onmouseover">onmouseover</a>;
22797: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmouseup" title="handler-onmouseup">onmouseup</a>;
22798: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>;
22799: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onoffline" title="handler-window-onoffline">onoffline</a>;
22800: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-ononline" title="handler-window-ononline">ononline</a>;
22801: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onpause" title="handler-onpause">onpause</a>;
22802: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplay" title="handler-onplay">onplay</a>;
22803: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onplaying" title="handler-onplaying">onplaying</a>;
22804: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onpagehide" title="handler-window-onpagehide">onpagehide</a>;
22805: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onpageshow" title="handler-window-onpageshow">onpageshow</a>;
22806: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onpopstate" title="handler-window-onpopstate">onpopstate</a>;
22807: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onprogress" title="handler-onprogress">onprogress</a>;
22808: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onratechange" title="handler-onratechange">onratechange</a>;
22809: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onreset" title="handler-onreset">onreset</a>;
22810: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onresize" title="handler-window-onresize">onresize</a>;
22811: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onscroll" title="handler-onscroll">onscroll</a>;
22812: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onseeked" title="handler-onseeked">onseeked</a>;
22813: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onseeking" title="handler-onseeking">onseeking</a>;
22814: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onselect" title="handler-onselect">onselect</a>;
22815: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onshow" title="handler-onshow">onshow</a>;
22816: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onstalled" title="handler-onstalled">onstalled</a>;
22817: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onstorage" title="handler-window-onstorage">onstorage</a>;
22818: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onsubmit" title="handler-onsubmit">onsubmit</a>;
22819: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onsuspend" title="handler-onsuspend">onsuspend</a>;
22820: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>;
22821: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-window-onunload" title="handler-window-onunload">onunload</a>;
22822: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>;
22823: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onwaiting" title="handler-onwaiting">onwaiting</a>;
1.514 mike 22824: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-window" id="dom-window"><a href="#dom-window">window</a></code></dt>
1.446 mike 22825: <dt><var title="">window</var> . <code title="dom-frames" id="dom-frames"><a href="#dom-frames">frames</a></code></dt>
22826: <dt><var title="">window</var> . <code title="dom-self" id="dom-self"><a href="#dom-self">self</a></code></dt>
1.1 mike 22827:
22828: <dd>
22829:
1.446 mike 22830: <p>These attributes all return <var title="">window</var>.</p>
1.1 mike 22831:
22832: </dd>
22833:
22834:
1.446 mike 22835: <dt><var title="">window</var> . <code title="dom-document" id="dom-document"><a href="#dom-document">document</a></code></dt>
1.1 mike 22836:
22837: <dd>
22838:
1.446 mike 22839: <p>Returns the <a href="#active-document">active document</a>.</p>
1.1 mike 22840:
22841: </dd>
22842:
22843:
1.446 mike 22844: <dt><var title="">document</var> . <code title="dom-document-defaultView" id="dom-document-defaultview"><a href="#dom-document-defaultview">defaultView</a></code></dt>
1.1 mike 22845:
1.205 mike 22846: <dd>
22847:
1.446 mike 22848: <p>Returns the <code><a href="#window">Window</a></code> object of the <a href="#active-document">active document</a>.</p>
1.205 mike 22849:
22850: </dd>
22851:
1.446 mike 22852: </dl><h4 id="apis-for-creating-and-navigating-browsing-contexts-by-name"><span class="secno">5.2.2 </span>APIs for creating and navigating browsing contexts by name</h4><dl class="domintro"><dt><var title="">window</var> = <var title="">window</var> . <code title="dom-open" id="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>
1.205 mike 22853:
1.1 mike 22854: <dd>
22855:
1.446 mike 22856: <p>Opens a window to show <var title="">url</var> (defaults to
22857: <code><a href="#about:blank">about:blank</a></code>), and returns it. The <var title="">target</var> argument gives the name of the new
22858: window. If a window exists with that name already, it is
22859: reused. The <var title="">replace</var> attribute, if true, means
22860: that whatever page is currently open in that window will be
22861: removed from the window's session history. The <var title="">features</var> argument is ignored.</p>
1.1 mike 22862:
22863: </dd>
22864:
1.446 mike 22865: <dt><var title="">window</var> . <code title="dom-name" id="dom-name"><a href="#dom-name">name</a></code> [ = <var title="">value</var> ]</dt>
1.1 mike 22866:
22867: <dd>
22868:
1.446 mike 22869: <p>Returns the name of the window.</p>
1.1 mike 22870:
1.446 mike 22871: <p>Can be set, to change the name.</p>
1.1 mike 22872:
22873: </dd>
22874:
1.458 mike 22875: <dt><var title="">window</var> . <code title="dom-window-close" id="dom-window-close"><a href="#dom-window-close">close</a></code>()</dt>
1.1 mike 22876:
22877: <dd>
22878:
1.446 mike 22879: <p>Closes the window.</p>
1.1 mike 22880:
1.446 mike 22881: </dd>
1.1 mike 22882:
1.458 mike 22883: <dt><var title="">window</var> . <code title="dom-window-stop" id="dom-window-stop"><a href="#dom-window-stop">stop</a></code>()</dt>
1.1 mike 22884:
22885: <dd>
22886:
1.446 mike 22887: <p>Cancels the document load.</p>
1.1 mike 22888:
22889: </dd>
22890:
1.457 mike 22891: </dl><h4 id="accessing-other-browsing-contexts"><span class="secno">5.2.3 </span>Accessing other browsing contexts</h4><dl class="domintro"><dt><var title="">window</var> . <code title="dom-length" id="dom-length"><a href="#dom-length">length</a></code></dt>
1.1 mike 22892:
22893: <dd>
22894:
1.446 mike 22895: <p>Returns the number of <a href="#child-browsing-context" title="child browsing
22896: context">child browsing contexts</a>.</p>
1.1 mike 22897:
22898: </dd>
22899:
1.446 mike 22900: <dt><var title="">window</var>[<var title="">index</var>]</dt>
1.1 mike 22901:
22902: <dd>
22903:
1.446 mike 22904: <p>Returns the indicated <a href="#child-browsing-context">child browsing context</a>.</p>
1.1 mike 22905:
22906: </dd>
22907:
1.457 mike 22908: </dl><h4 id="named-access-on-the-window-object"><span class="secno">5.2.4 </span>Named access on the <code><a href="#window">Window</a></code> object</h4><dl class="domintro"><dt><var title="">window</var>[<var title="">name</var>]</dt>
1.1 mike 22909:
22910: <dd>
22911:
1.446 mike 22912: <p>Returns the indicated element or collection of elements.</p>
1.1 mike 22913:
22914: </dd>
22915:
1.457 mike 22916: </dl><h4 id="browser-interface-elements"><span class="secno">5.2.6 </span>Browser interface elements</h4><p>To allow Web pages to integrate with Web browsers, certain Web
1.446 mike 22917: browser interface elements are exposed in a limited way to scripts
22918: in Web pages.</p><p>Each interface element is represented by a <code><a href="#barprop">BarProp</a></code>
22919: object:</p><pre class="idl">interface <dfn id="barprop" role="button" tabindex="0" aria-haspopup="true">BarProp</dfn> {
22920: attribute boolean <a href="#dom-barprop-visible" title="dom-BarProp-visible">visible</a>;
1.458 mike 22921: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-window-locationbar" id="dom-window-locationbar"><a href="#dom-window-locationbar">locationbar</a></code> . <code title="dom-BarProp-visible" id="dom-barprop-visible"><a href="#dom-barprop-visible">visible</a></code></dt>
1.1 mike 22922: <dd>
1.446 mike 22923: <p>Returns true if the location bar is visible; otherwise, returns false.</p>
1.1 mike 22924: </dd>
22925:
1.460 mike 22926: <dt><var title="">window</var> . <code title="dom-window-menubar" id="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>
1.1 mike 22927: <dd>
1.446 mike 22928: <p>Returns true if the menu bar is visible; otherwise, returns false.</p>
1.1 mike 22929: </dd>
22930:
1.460 mike 22931: <dt><var title="">window</var> . <code title="dom-window-personalbar" id="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>
1.446 mike 22932:
1.1 mike 22933: <dd>
1.446 mike 22934: <p>Returns true if the personal bar is visible; otherwise, returns false.</p>
1.1 mike 22935: </dd>
22936:
1.460 mike 22937: <dt><var title="">window</var> . <code title="dom-window-scrollbars" id="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>
1.1 mike 22938: <dd>
1.446 mike 22939: <p>Returns true if the scroll bars are visible; otherwise, returns false.</p>
1.1 mike 22940: </dd>
22941:
1.460 mike 22942: <dt><var title="">window</var> . <code title="dom-window-statusbar" id="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>
1.1 mike 22943: <dd>
1.446 mike 22944: <p>Returns true if the status bar is visible; otherwise, returns false.</p>
1.1 mike 22945: </dd>
22946:
1.460 mike 22947: <dt><var title="">window</var> . <code title="dom-window-toolbar" id="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>
1.1 mike 22948: <dd>
1.446 mike 22949: <p>Returns true if the toolbar is visible; otherwise, returns false.</p>
1.1 mike 22950: </dd>
22951:
1.457 mike 22952: </dl><h3 id="origin-0"><span class="secno">5.3 </span>Origin</h3><p>The <dfn id="origin" role="button" tabindex="0" aria-haspopup="true">origin</dfn> of a resource and the <dfn id="effective-script-origin" role="button" tabindex="0" aria-haspopup="true">effective script
1.446 mike 22953: origin</dfn> of a resource are both either opaque identifiers or
22954: tuples consisting of a scheme component, a host component, a port
22955: component, and optionally extra data.</p><p class="note">The extra data could include the certificate of the
22956: site when using encrypted connections, to ensure that if the site's
22957: secure certificate changes, the origin is considered to change as
22958: well.</p><h4 id="relaxing-the-same-origin-restriction"><span class="secno">5.3.1 </span>Relaxing the same-origin restriction</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-domain" id="dom-document-domain"><a href="#dom-document-domain">domain</a></code> [ = <var title="">domain</var> ]</dt>
1.1 mike 22959:
22960: <dd>
22961:
1.446 mike 22962: <p>Returns the current domain used for security checks.</p>
1.1 mike 22963:
1.446 mike 22964: <p>Can be set to a value that removes subdomains, to change the
22965: <a href="#effective-script-origin">effective script origin</a> to allow pages on other
22966: subdomains of the same domain (if they do the same thing) to
22967: access each other.</p>
1.1 mike 22968:
22969: </dd>
22970:
1.446 mike 22971: </dl><p class="note">The <code title="dom-document-domain"><a href="#dom-document-domain">domain</a></code>
22972: attribute is used to enable pages on different hosts of a domain to
22973: access each others' DOMs.</p><p class="warning">Do not use the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute when
22974: using shared hosting. If an untrusted third party is able to host an
22975: HTTP server at the same IP address but on a different port, then the
22976: same-origin protection that normally protects two different sites on
22977: the same host will fail, as the ports are ignored when comparing
22978: origins after the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute has
22979: been used.</p><h3 id="history"><span class="secno">5.4 </span>Session history and navigation</h3><h4 id="the-session-history-of-browsing-contexts"><span class="secno">5.4.1 </span>The session history of browsing contexts</h4><p>The sequence of <code><a href="#document">Document</a></code>s in a <a href="#browsing-context">browsing
22980: context</a> is its <dfn id="session-history" role="button" tabindex="0" aria-haspopup="true">session history</dfn>.</p><p><code><a href="#history-0">History</a></code> objects provide a representation of the
22981: pages in the session history of <a href="#browsing-context" title="browsing
22982: context">browsing contexts</a>. Each <a href="#browsing-context">browsing
22983: context</a>, including <a href="#nested-browsing-context" title="nested browsing
22984: context">nested browsing contexts</a>, has a distinct session
22985: history.</p><p>Each <code><a href="#document">Document</a></code> object in a <a href="#browsing-context">browsing
22986: context</a>'s <a href="#session-history">session history</a> is associated with a
22987: unique instance of the <code><a href="#history-0">History</a></code> object, although they
1.450 mike 22988: all must model the same underlying <a href="#session-history">session history</a>.</p>
22989: <p>The <dfn id="dom-history" role="button" tabindex="0" aria-haspopup="true"><code>history</code></dfn> attribute
22990: of the <code><a href="#window">Window</a></code> interface must return the object
22991: implementing the <code><a href="#history-0">History</a></code> interface for that
22992: <code><a href="#window">Window</a></code> object's <code><a href="#document">Document</a></code>.</p>
22993: <p><code><a href="#history-0">History</a></code> objects represent their <a href="#browsing-context">browsing
1.446 mike 22994: context</a>'s session history as a flat list of <a href="#session-history-entry" title="session history entry">session history entries</a>. Each
22995: <dfn id="session-history-entry" role="button" tabindex="0" aria-haspopup="true">session history entry</dfn> consists of either a
22996: <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
22997: <code><a href="#document">Document</a></code> object, form data, a scroll position, and
22998: other information associated with it</span>.</p><p class="note">Titles associated with <a href="#session-history-entry" title="session history
22999: entry">session history entries</a> need not have any relation
23000: with the current <code><a href="#the-title-element">title</a></code> of the
23001: <code><a href="#document">Document</a></code>. The title of a <a href="#session-history-entry">session history
23002: entry</a> is intended to explain the state of the document at
23003: that point, so that the user can navigate the document's
23004: history.</p><p>URLs without associated <a href="#state-object" title="state object">state
23005: objects</a> are added to the session history as the user (or
23006: script) navigates from page to page.</p><p>A <dfn id="state-object" role="button" tabindex="0" aria-haspopup="true">state object</dfn> is an object representing a user
23007: interface state.</p><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
23008: 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
23009: (or script) goes back in the history, thus enabling authors to use
23010: the "navigation" metaphor even in one-page applications.</p><div class="note">
1.1 mike 23011:
1.446 mike 23012: <p><a href="#state-object" title="state object">State objects</a> are intended to
23013: be used for two main purposes: first, storing a preparsed
23014: description of the state in the <a href="#url">URL</a> so that in the
23015: simple case an author doesn't have to do the parsing (though one
23016: would still need the parsing for handling <a href="#url" title="URL">URLs</a> passed around by users, so it's only a minor
23017: optimization), and second, so that the author can store state that
23018: one wouldn't store in the URL because it only applies to the current
23019: <code><a href="#document">Document</a></code> instance and it would have to be reconstructed
23020: if a new <code><a href="#document">Document</a></code> were opened.</p>
1.1 mike 23021:
1.446 mike 23022: <p>An example of the latter would be something like keeping track of
23023: the precise coordinate from which a popup <code><a href="#the-div-element">div</a></code> was made
23024: to animate, so that if the user goes back, it can be made to animate
23025: to the same location. Or alternatively, it could be used to keep a
23026: pointer into a cache of data that would be fetched from the server
23027: based on the information in the <a href="#url">URL</a>, so that when going
23028: back and forward, the information doesn't have to be fetched
23029: again.</p>
1.1 mike 23030:
1.446 mike 23031: </div><hr><p>At any point, one of the entries in the session history is the
23032: <dfn id="current-entry" role="button" tabindex="0" aria-haspopup="true">current entry</dfn>. This is the entry representing the
23033: <a href="#active-document">active document</a> of the <a href="#browsing-context">browsing
23034: context</a>. The <a href="#current-entry">current entry</a> is usually an entry
23035: for the <a href="#dom-location-href" title="dom-location-href">location</a> of the
23036: <code><a href="#document">Document</a></code>. However, it can also be one of the entries
23037: for <a href="#state-object" title="state object">state objects</a> added to the
23038: history by that document.</p><p><dfn id="an-entry-with-persisted-user-state" role="button" tabindex="0" aria-haspopup="true">An entry with persisted user state</dfn> is one that also
23039: has user-agent defined state. This specification does not specify
23040: what kind of state can be stored.</p><p class="example">For example, some user agents might want to
1.502 mike 23041: persist the scroll position, or the values of form controls.</p><p class="note">User agents that persist the value of form controls
23042: are encouraged to also persist their directionality (the value of
23043: the element's <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute). This
23044: prevents values from being displayed incorrectly after a history
23045: traversal when the user had originally entered the values with an
23046: explicit, non-default directionality.</p><p>Entries that consist of <a href="#state-object" title="state object">state
1.446 mike 23047: objects</a> share the same <code><a href="#document">Document</a></code> as the entry for
23048: the page that was active when they were added.</p><p>Contiguous entries that differ just by fragment identifier also
23049: share the same <code><a href="#document">Document</a></code>.</p><p class="note">All entries that share the same
23050: <code><a href="#document">Document</a></code> (and that are therefore merely different
1.597 mike 23051: states of one particular document) are contiguous by definition.</p><p>Each <code><a href="#document">Document</a></code> in a <a href="#browsing-context">browsing context</a>
23052: also has a <dfn id="latest-entry" role="button" tabindex="0" aria-haspopup="true">latest entry</dfn>. This is the entry or that
23053: <code><a href="#document">Document</a></code> that was most the recently traversed to. When
23054: a <code><a href="#document">Document</a></code> is created, it initially has no <a href="#latest-entry">latest
23055: entry</a>.</p><h4 id="the-history-interface"><span class="secno">5.4.2 </span>The <code><a href="#history-0">History</a></code> interface</h4><pre class="idl">interface <dfn id="history-0" role="button" tabindex="0" aria-haspopup="true">History</dfn> {
1.446 mike 23056: readonly attribute long <a href="#dom-history-length" title="dom-history-length">length</a>;
23057: readonly attribute any <a href="#dom-history-state" title="dom-history-state">state</a>;
1.562 mike 23058: void <a href="#dom-history-go" title="dom-history-go">go</a>(optional long delta);
1.446 mike 23059: void <a href="#dom-history-back" title="dom-history-back">back</a>();
23060: void <a href="#dom-history-forward" title="dom-history-forward">forward</a>();
1.562 mike 23061: void <a href="#dom-history-pushstate" title="dom-history-pushState">pushState</a>(any data, DOMString title, optional DOMString url);
23062: void <a href="#dom-history-replacestate" title="dom-history-replaceState">replaceState</a>(any data, DOMString title, optional DOMString url);
1.446 mike 23063: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-length" id="dom-history-length"><a href="#dom-history-length">length</a></code></dt>
1.1 mike 23064:
23065: <dd>
23066:
1.446 mike 23067: <p>Returns the number of entries in the <a href="#joint-session-history">joint session history</a>.</p>
1.1 mike 23068:
23069: </dd>
23070:
1.446 mike 23071: <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-state" id="dom-history-state"><a href="#dom-history-state">state</a></code></dt>
1.1 mike 23072:
23073: <dd>
23074:
1.446 mike 23075: <p>Returns the current <a href="#state-object">state object</a>.</p>
1.1 mike 23076:
23077: </dd>
23078:
1.446 mike 23079: <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-go" id="dom-history-go"><a href="#dom-history-go">go</a></code>( [ <var title="">delta</var> ] )</dt>
1.1 mike 23080:
23081: <dd>
23082:
1.446 mike 23083: <p>Goes back or forward the specified number of steps in the <a href="#joint-session-history">joint session history</a>.</p>
1.1 mike 23084:
1.446 mike 23085: <p>A zero delta will reload the current page.</p>
1.1 mike 23086:
1.446 mike 23087: <p>If the delta is out of range, does nothing.</p>
1.1 mike 23088:
23089: </dd>
23090:
1.446 mike 23091: <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-back" id="dom-history-back"><a href="#dom-history-back">back</a></code>()</dt>
1.1 mike 23092:
1.158 mike 23093: <dd>
23094:
1.446 mike 23095: <p>Goes back one step in the <a href="#joint-session-history">joint session history</a>.</p>
1.1 mike 23096:
1.446 mike 23097: <p>If there is no previous page, does nothing.</p>
1.1 mike 23098:
23099: </dd>
23100:
1.446 mike 23101: <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-forward" id="dom-history-forward"><a href="#dom-history-forward">forward</a></code>()</dt>
1.1 mike 23102:
23103: <dd>
23104:
1.446 mike 23105: <p>Goes forward one step in the <a href="#joint-session-history">joint session history</a>.</p>
1.1 mike 23106:
1.446 mike 23107: <p>If there is no next page, does nothing.</p>
1.1 mike 23108:
23109: </dd>
23110:
1.446 mike 23111: <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-pushState" id="dom-history-pushstate"><a href="#dom-history-pushstate">pushState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt>
1.1 mike 23112:
23113: <dd>
23114:
1.446 mike 23115: <p>Pushes the given data onto the session history, with the given title, and, if provided, the given URL.</p>
1.1 mike 23116:
23117: </dd>
23118:
1.446 mike 23119: <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-replaceState" id="dom-history-replacestate"><a href="#dom-history-replacestate">replaceState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt>
1.1 mike 23120:
23121: <dd>
23122:
1.446 mike 23123: <p>Updates the current entry in the session history to have the given data, title, and, if provided, URL.</p>
1.1 mike 23124:
23125: </dd>
23126:
1.446 mike 23127: </dl><p>The <dfn id="joint-session-history" role="button" tabindex="0" aria-haspopup="true">joint session history</dfn> of a <code><a href="#history-0">History</a></code>
23128: object is the union of all the <a href="#session-history" title="session history">session
23129: histories</a> of all <a href="#browsing-context" title="browsing context">browsing
23130: contexts</a> of all the <a href="#fully-active">fully active</a>
23131: <code><a href="#document">Document</a></code> objects that share the <code><a href="#history-0">History</a></code>
23132: object's <a href="#top-level-browsing-context">top-level browsing context</a>, with all the
23133: entries that are <a href="#current-entry" title="current entry">current entries</a>
23134: in their respective <a href="#session-history" title="session history">session
23135: histories</a> removed except for the <a href="#current-entry-of-the-joint-session-history">current entry of the
23136: joint session history</a>.</p><p>The <dfn id="current-entry-of-the-joint-session-history" role="button" tabindex="0" aria-haspopup="true">current entry of the joint session history</dfn> is the
23137: entry that most recently became a <a href="#current-entry">current entry</a> in its
23138: <a href="#session-history">session history</a>.</p><p>Entries in the <a href="#joint-session-history">joint session history</a> are ordered
23139: chronologically by the time they were added to their respective
23140: <a href="#session-history" title="session history">session histories</a>. (Since all
23141: these <a href="#browsing-context" title="browsing context">browsing contexts</a> by
23142: definition share an <a href="#event-loop">event loop</a>, there is always a
23143: well-defined sequential order in which their <a href="#session-history" title="session
23144: history">session histories</a> had their entries added.) Each
23145: entry has an index; the earliest entry has index 0, and the
23146: subsequent entries are numbered with consecutively increasing
23147: integers (1, 2, 3, etc).</p><div class="example">
1.1 mike 23148:
1.446 mike 23149: <p>Consider a game where the user can navigate along a line, such
23150: that the user is always at some coordinate, and such that the user
23151: can bookmark the page corresponding to a particular coordinate, to
23152: return to it later.</p>
1.1 mike 23153:
1.446 mike 23154: <p>A static page implementing the x=5 position in such a game could
23155: look like the following:</p>
1.1 mike 23156:
1.446 mike 23157: <pre><!DOCTYPE HTML>
23158: <!-- this is http://example.com/line?x=5 -->
23159: <title>Line Game - 5</title>
23160: <p>You are at coordinate 5 on the line.</p>
23161: <p>
23162: <a href="?x=6">Advance to 6</a> or
23163: <a href="?x=4">retreat to 4</a>?
23164: </p></pre>
1.1 mike 23165:
1.446 mike 23166: <p>The problem with such a system is that each time the user
23167: clicks, the whole page has to be reloaded. Here instead is another
23168: way of doing it, using script:</p>
1.1 mike 23169:
1.446 mike 23170: <pre><!DOCTYPE HTML>
23171: <!-- this starts off as http://example.com/line?x=5 -->
23172: <title>Line Game - 5</title>
23173: <p>You are at coordinate <span id="coord">5</span> on the line.</p>
23174: <p>
23175: <a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or
23176: <a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>?
23177: </p>
23178: <script>
23179: var currentPage = 5; // prefilled by server
23180: function go(d) {
23181: setupPage(currentPage + d);
23182: history.pushState(currentPage, document.title, '?x=' + currentPage);
23183: }
23184: onpopstate = function(event) {
23185: setupPage(event.state);
23186: }
23187: function setupPage(page) {
23188: currentPage = page;
23189: document.title = 'Line Game - ' + currentPage;
23190: document.getElementById('coord').textContent = currentPage;
23191: document.links[0].href = '?x=' + (currentPage+1);
23192: document.links[0].textContent = 'Advance to ' + (currentPage+1);
23193: document.links[1].href = '?x=' + (currentPage-1);
23194: document.links[1].textContent = 'retreat to ' + (currentPage-1);
23195: }
23196: </script></pre>
1.1 mike 23197:
1.446 mike 23198: <p>In systems without script, this still works like the previous
23199: example. However, users that <em>do</em> have script support can
23200: now navigate much faster, since there is no network access for the
23201: same experience. Furthermore, contrary to the experience the user
23202: would have with just a naïve script-based approach,
23203: bookmarking and navigating the session history still work.</p>
1.1 mike 23204:
1.446 mike 23205: <p>In the example above, the <var title="">data</var> argument to
23206: the <code title="dom-history-pushState"><a href="#dom-history-pushstate">pushState()</a></code> method
23207: is the same information as would be sent to the server, but in a
23208: more convenient form, so that the script doesn't have to parse the
23209: URL each time the user navigates.</p>
1.1 mike 23210:
1.446 mike 23211: </div><div class="example">
1.1 mike 23212:
1.446 mike 23213: <p>Applications might not use the same title for a <a href="#session-history-entry">session
23214: history entry</a> as the value of the document's
23215: <code><a href="#the-title-element">title</a></code> element at that time. For example, here is a
23216: simple page that shows a block in the <code><a href="#the-title-element">title</a></code> element.
23217: Clearly, when navigating backwards to a previous state the user
23218: does not go back in time, and therefore it would be inappropriate
23219: to put the time in the session history title.</p>
1.1 mike 23220:
1.446 mike 23221: <pre><!DOCTYPE HTML>
23222: <TITLE>Line</TITLE>
23223: <SCRIPT>
23224: setInterval(function () { document.title = 'Line - ' + new Date(); }, 1000);
23225: var i = 1;
23226: function inc() {
23227: set(i+1);
23228: history.pushState(i, 'Line - ' + i);
23229: }
23230: function set(newI) {
23231: i = newI;
23232: document.forms.F.I.value = newI;
23233: }
23234: </SCRIPT>
23235: <BODY ONPOPSTATE="set(event.state)">
23236: <FORM NAME=F>
23237: State: <OUTPUT NAME=I>1</OUTPUT> <INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()">
23238: </FORM></pre>
1.1 mike 23239:
1.446 mike 23240: </div><h4 id="the-location-interface"><span class="secno">5.4.3 </span>The <code><a href="#location">Location</a></code> interface</h4><p>Each <code><a href="#document">Document</a></code> object in a <a href="#browsing-context">browsing
23241: context</a>'s session history is associated with a unique
23242: instance of a <code><a href="#location">Location</a></code> object.</p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-location" id="dom-document-location"><a href="#dom-document-location">location</a></code> [ = <var title="">value</var> ]</dt>
23243: <dt><var title="">window</var> . <code title="dom-location" id="dom-location"><a href="#dom-location">location</a></code> [ = <var title="">value</var> ]</dt>
1.1 mike 23244:
23245: <dd>
23246:
1.446 mike 23247: <p>Returns a <code><a href="#location">Location</a></code> object with the current page's location.</p>
1.1 mike 23248:
1.446 mike 23249: <p>Can be set, to navigate to another page.</p>
1.1 mike 23250:
23251: </dd>
23252:
1.446 mike 23253: </dl><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
23254: address</a>, and allow the <a href="#current-entry">current entry</a> of the
23255: <a href="#browsing-context">browsing context</a>'s session history to be changed, by
23256: adding or replacing entries in the <code title="dom-history"><a href="#dom-history">history</a></code> object.</p><pre class="idl">interface <dfn id="location" role="button" tabindex="0" aria-haspopup="true">Location</dfn> {
23257: stringifier attribute DOMString <a href="#dom-location-href" title="dom-location-href">href</a>;
1.562 mike 23258: void <a href="#dom-location-assign" title="dom-location-assign">assign</a>(DOMString url);
23259: void <a href="#dom-location-replace" title="dom-location-replace">replace</a>(DOMString url);
1.446 mike 23260: void <a href="#dom-location-reload" title="dom-location-reload">reload</a>();
1.1 mike 23261:
1.446 mike 23262: // <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>
23263: attribute DOMString <a href="#dom-location-protocol" title="dom-location-protocol">protocol</a>;
23264: attribute DOMString <a href="#dom-location-host" title="dom-location-host">host</a>;
23265: attribute DOMString <a href="#dom-location-hostname" title="dom-location-hostname">hostname</a>;
23266: attribute DOMString <a href="#dom-location-port" title="dom-location-port">port</a>;
23267: attribute DOMString <a href="#dom-location-pathname" title="dom-location-pathname">pathname</a>;
23268: attribute DOMString <a href="#dom-location-search" title="dom-location-search">search</a>;
23269: attribute DOMString <a href="#dom-location-hash" title="dom-location-hash">hash</a>;
1.1 mike 23270:
1.446 mike 23271: // resolving relative URLs
1.562 mike 23272: DOMString <a href="#dom-location-resolveurl" title="dom-location-resolveURL">resolveURL</a>(DOMString url);
1.446 mike 23273: };</pre><dl class="domintro"><dt><var title="">location</var> . <code title="dom-location-href" id="dom-location-href"><a href="#dom-location-href">href</a></code> [ = <var title="">value</var> ]</dt>
1.1 mike 23274:
23275: <dd>
23276:
1.446 mike 23277: <p>Returns the current page's location.</p>
1.97 mike 23278:
1.446 mike 23279: <p>Can be set, to navigate to another page.</p>
1.1 mike 23280:
23281: </dd>
23282:
1.446 mike 23283: <dt><var title="">location</var> . <code title="dom-location-assign" id="dom-location-assign"><a href="#dom-location-assign">assign</a></code>(<var title="">url</var>)</dt>
1.1 mike 23284:
23285: <dd>
23286:
1.446 mike 23287: <p>Navigates to the given page.</p>
1.1 mike 23288:
23289: </dd>
23290:
1.446 mike 23291: <dt><var title="">location</var> . <code title="dom-location-replace" id="dom-location-replace"><a href="#dom-location-replace">replace</a></code>(<var title="">url</var>)</dt>
1.1 mike 23292:
23293: <dd>
23294:
1.446 mike 23295: <p>Removes the current page from the session history and navigates to the given page.</p>
1.1 mike 23296:
23297: </dd>
23298:
1.446 mike 23299: <dt><var title="">location</var> . <code title="dom-location-reload" id="dom-location-reload"><a href="#dom-location-reload">reload</a></code>()</dt>
1.1 mike 23300:
23301: <dd>
23302:
1.446 mike 23303: <p>Reloads the current page.</p>
1.1 mike 23304:
23305: </dd>
23306:
1.446 mike 23307: <dt><var title="">url</var> = <var title="">location</var> . <code title="dom-location-resolveURL" id="dom-location-resolveurl"><a href="#dom-location-resolveurl">resolveURL</a></code>(<var title="">url</var>)</dt>
1.1 mike 23308:
23309: <dd>
23310:
1.446 mike 23311: <p>Resolves the given relative URL to an absolute URL.</p>
1.1 mike 23312:
1.446 mike 23313: </dd>
1.1 mike 23314:
1.446 mike 23315: </dl><p>The <code><a href="#location">Location</a></code> interface also has the complement of
23316: <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-location-protocol" role="button" tabindex="0" aria-haspopup="true"><code>protocol</code></dfn>, <dfn id="dom-location-host" role="button" tabindex="0" aria-haspopup="true"><code>host</code></dfn>, <dfn id="dom-location-port" role="button" tabindex="0" aria-haspopup="true"><code>port</code></dfn>, <dfn id="dom-location-hostname" role="button" tabindex="0" aria-haspopup="true"><code>hostname</code></dfn>, <dfn id="dom-location-pathname" role="button" tabindex="0" aria-haspopup="true"><code>pathname</code></dfn>, <dfn id="dom-location-search" role="button" tabindex="0" aria-haspopup="true"><code>search</code></dfn>, and <dfn id="dom-location-hash" role="button" tabindex="0" aria-haspopup="true"><code>hash</code></dfn>. <span class="impl">These must follow the rules given for <a href="#url-decomposition-idl-attributes">URL
23317: decomposition IDL attributes</a>, with the <a href="#concept-uda-input" title="concept-uda-input">input</a> being <a href="#the-document-s-current-address" title="the
23318: document's current address">the current address</a> of the
23319: associated <code><a href="#document">Document</a></code> object, as an <a href="#absolute-url">absolute
23320: URL</a> (same as the <code title="dom-location-href"><a href="#dom-location-href">href</a></code>
23321: attribute), and the <a href="#concept-uda-setter" title="concept-uda-setter">common setter
23322: action</a> being the same as setting the <code title="dom-location-href"><a href="#dom-location-href">href</a></code> attribute to the new output
1.608 mike 23323: value.</span></p><h3 id="browsing-the-web"><span class="secno">5.5 </span>Browsing the Web</h3><h4 id="history-traversal"><span class="secno">5.5.10 </span>History traversal</h4><p>The <dfn id="event-popstate" role="button" tabindex="0" aria-haspopup="true"><code>popstate</code></dfn> event
1.446 mike 23324: is fired in certain cases when navigating to a <a href="#session-history-entry">session history
1.590 mike 23325: entry</a>.</p><pre class="idl">[Constructor(DOMString type, optional <a href="#popstateeventinit">PopStateEventInit</a> eventInitDict)]
23326: interface <dfn id="popstateevent" role="button" tabindex="0" aria-haspopup="true">PopStateEvent</dfn> : <a href="#event">Event</a> {
1.446 mike 23327: readonly attribute any <a href="#dom-popstateevent-state" title="dom-PopStateEvent-state">state</a>;
1.590 mike 23328: };
23329:
23330: dictionary <dfn id="popstateeventinit" role="button" tabindex="0" aria-haspopup="true">PopStateEventInit</dfn> : <a href="#eventinit">EventInit</a> {
23331: any state;
1.446 mike 23332: };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-PopStateEvent-state" id="dom-popstateevent-state"><a href="#dom-popstateevent-state">state</a></code></dt>
1.1 mike 23333:
23334: <dd>
23335:
1.446 mike 23336: <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>
1.1 mike 23337:
23338: </dd>
23339:
1.590 mike 23340: </dl><hr><p>The <dfn id="event-hashchange" role="button" tabindex="0" aria-haspopup="true"><code>hashchange</code></dfn>
1.446 mike 23341: event is fired when navigating to a <a href="#session-history-entry">session history
23342: entry</a> whose <a href="#url">URL</a> differs from that of the
1.590 mike 23343: previous one only in the fragment identifier.</p><pre class="idl">[Constructor(DOMString type, optional <a href="#hashchangeeventinit">HashChangeEventInit</a> eventInitDict)]
23344: interface <dfn id="hashchangeevent" role="button" tabindex="0" aria-haspopup="true">HashChangeEvent</dfn> : <a href="#event">Event</a> {
1.446 mike 23345: readonly attribute DOMString <a href="#dom-hashchangeevent-oldurl" title="dom-HashChangeEvent-oldURL">oldURL</a>;
23346: readonly attribute DOMString <a href="#dom-hashchangeevent-newurl" title="dom-HashChangeEvent-newURL">newURL</a>;
1.590 mike 23347: };
23348:
23349: dictionary <dfn id="hashchangeeventinit" role="button" tabindex="0" aria-haspopup="true">HashChangeEventInit</dfn> : <a href="#eventinit">EventInit</a> {
23350: DOMString oldURL;
23351: DOMString newURL;
1.446 mike 23352: };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-HashChangeEvent-oldURL" id="dom-hashchangeevent-oldurl"><a href="#dom-hashchangeevent-oldurl">oldURL</a></code></dt>
1.1 mike 23353:
23354: <dd>
23355:
1.446 mike 23356: <p>Returns the <a href="#url">URL</a> of the <a href="#session-history-entry">session history
23357: entry</a> that was previously current.</p>
1.1 mike 23358:
1.446 mike 23359: </dd>
1.1 mike 23360:
23361:
1.446 mike 23362: <dt><var title="">event</var> . <code title="dom-HashChangeEvent-newURL" id="dom-hashchangeevent-newurl"><a href="#dom-hashchangeevent-newurl">newURL</a></code></dt>
1.1 mike 23363:
23364: <dd>
23365:
1.446 mike 23366: <p>Returns the <a href="#url">URL</a> of the <a href="#session-history-entry">session history
23367: entry</a> that is now current.</p>
1.1 mike 23368:
23369: </dd>
23370:
1.590 mike 23371: </dl><hr><p>The <dfn id="event-pageshow" role="button" tabindex="0" aria-haspopup="true"><code>pageshow</code></dfn> event
1.446 mike 23372: is fired when traversing <em>to</em> a <a href="#session-history-entry">session history
23373: entry</a>.</p><p>The <dfn id="event-pagehide" role="button" tabindex="0" aria-haspopup="true"><code>pagehide</code></dfn>
23374: event is fired when traversing <em>from</em> a <a href="#session-history-entry">session history
1.590 mike 23375: entry</a>.</p><pre class="idl">[Constructor(DOMString type, optional <a href="#pagetransitioneventinit">PageTransitionEventInit</a> eventInitDict)]
23376: interface <dfn id="pagetransitionevent" role="button" tabindex="0" aria-haspopup="true">PageTransitionEvent</dfn> : <a href="#event">Event</a> {
1.446 mike 23377: readonly attribute boolean <a href="#dom-pagetransitionevent-persisted" title="dom-PageTransitionEvent-persisted">persisted</a>;
1.590 mike 23378: };
23379:
23380: dictionary <dfn id="pagetransitioneventinit" role="button" tabindex="0" aria-haspopup="true">PageTransitionEventInit</dfn> : <a href="#eventinit">EventInit</a> {
23381: boolean persisted;
1.446 mike 23382: };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-PageTransitionEvent-persisted" id="dom-pagetransitionevent-persisted"><a href="#dom-pagetransitionevent-persisted">persisted</a></code></dt>
1.1 mike 23383:
23384: <dd>
23385:
1.446 mike 23386: <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>
1.1 mike 23387:
23388: </dd>
23389:
1.608 mike 23390: </dl><h4 id="unloading-documents"><span class="secno">5.5.11 </span>Unloading documents</h4><pre class="idl">interface <dfn id="beforeunloadevent" role="button" tabindex="0" aria-haspopup="true">BeforeUnloadEvent</dfn> : <a href="#event">Event</a> {
1.446 mike 23391: attribute DOMString <a href="#dom-beforeunloadevent-returnvalue" title="dom-BeforeUnloadEvent-returnValue">returnValue</a>;
23392: };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-BeforeUnloadEvent-returnValue" id="dom-beforeunloadevent-returnvalue"><a href="#dom-beforeunloadevent-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt>
1.1 mike 23393:
23394: <dd>
23395:
1.446 mike 23396: <p>Returns the current return value of the event (the message to show the user).</p>
1.1 mike 23397:
1.446 mike 23398: <p>Can be set, to update the message.</p>
1.1 mike 23399:
23400: </dd>
23401:
1.446 mike 23402: </dl><p class="note">There are no <code><a href="#beforeunloadevent">BeforeUnloadEvent</a></code>-specific
23403: initialization methods.</p><h3 id="offline"><span class="secno">5.6 </span>Offline Web applications</h3><h4 id="introduction-4"><span class="secno">5.6.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>In order to enable users to continue interacting with Web
23404: applications and documents even when their network connection is
23405: unavailable — for instance, because they are traveling outside
23406: of their ISP's coverage area — authors can provide a manifest
23407: which lists the files that are needed for the Web application to
23408: work offline and which causes the user's browser to keep a copy of
23409: the files for use offline.</p><p>To illustrate this, consider a simple clock applet consisting of
23410: an HTML page "<code title="">clock.html</code>", a CSS style sheet
23411: "<code title="">clock.css</code>", and a JavaScript script "<code title="">clock.js</code>".</p><p>Before adding the manifest, these three files might look like
23412: this:</p><pre><!-- clock.html -->
23413: <!DOCTYPE HTML>
23414: <html>
23415: <head>
23416: <title>Clock</title>
23417: <script src="clock.js"></script>
23418: <link rel="stylesheet" href="clock.css">
23419: </head>
23420: <body>
23421: <p>The time is: <output id="clock"></output></p>
23422: </body>
23423: </html></pre><pre>/* clock.css */
23424: output { font: 2em sans-serif; }</pre><pre>/* clock.js */
23425: setTimeout(function () {
23426: document.getElementById('clock').value = new Date();
23427: }, 1000);</pre><p>If the user tries to open the "<code title="">clock.html</code>"
23428: page while offline, though, the user agent (unless it happens to
1.518 mike 23429: have it still in the local cache) will fail with an error.</p><p>The author can instead provide a manifest of the three files, say
23430: "<code title="">clock.appcache</code>":</p><pre>CACHE MANIFEST
1.446 mike 23431: clock.html
23432: clock.css
23433: clock.js</pre><p>With a small change to the HTML file, the manifest (served as
23434: <code><a href="#text-cache-manifest">text/cache-manifest</a></code>) is linked to the application:</p><pre><!-- clock.html -->
23435: <!DOCTYPE HTML>
23436: <html manifest="clock.appcache">
23437: <head>
23438: <title>Clock</title>
23439: <script src="clock.js"></script>
23440: <link rel="stylesheet" href="clock.css">
23441: </head>
23442: <body>
23443: <p>The time is: <output id="clock"></output></p>
23444: </body>
23445: </html></pre><p>Now, if the user goes to the page, the browser will cache the
23446: files and make them available even when the user is offline.</p><p class="note">Authors are encouraged to include the main page in
23447: the manifest also, but in practice the page that referenced the
23448: manifest is automatically cached even if it isn't explicitly
1.474 mike 23449: mentioned.</p><p class="note">With the exception of "no-store" directive, HTTP
23450: cache headers and restrictions on caching pages served over TLS
23451: (encrypted, using <code title="">http:</code>) are overridden by
23452: manifests. Thus, pages will not expire from an application cache
23453: before the user agent has updated it, and even applications served
23454: over TLS can be made to work offline.</p><h5 id="appcacheevents"><span class="secno">5.6.1.1 </span>Event summary</h5><p><i>This section is non-normative.</i></p><p>When the user visits a page that declares a manifest, the browser
1.446 mike 23455: will try to update the cache. It does this by fetching a copy of the
23456: manifest and, if the manifest has changed since the user agent last
23457: saw it, redownloading all the resources it mentions and caching them
23458: anew.</p><p>As this is going on, a number of events get fired on the
23459: <code><a href="#applicationcache">ApplicationCache</a></code> object to keep the script updated as
23460: to the state of the cache update, so that the user can be notified
23461: appropriately. The events are as follows:</p><table><thead><tr><th> Event name
23462: </th><th> Interface
1.474 mike 23463: </th><th> Fired when...
1.446 mike 23464: </th><th> Next events
23465: </th></tr></thead><tbody><tr><td> <dfn id="event-appcache-checking" role="button" tabindex="0" aria-haspopup="true"><code>checking</code></dfn>
23466: </td><td> <code><a href="#event">Event</a></code>
23467: </td><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>
23468: </td><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>
23469: </td></tr><tr><td> <dfn id="event-appcache-noupdate" role="button" tabindex="0" aria-haspopup="true"><code>noupdate</code></dfn>
23470: </td><td> <code><a href="#event">Event</a></code>
23471: </td><td> The manifest hadn't changed.
23472: </td><td> Last event in sequence.
23473: </td></tr><tr><td> <dfn id="event-appcache-downloading" role="button" tabindex="0" aria-haspopup="true"><code>downloading</code></dfn>
23474: </td><td> <code><a href="#event">Event</a></code>
23475: </td><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.
23476: </td><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>
23477: </td></tr><tr><td> <dfn id="event-appcache-progress" role="button" tabindex="0" aria-haspopup="true"><code>progress</code></dfn>
23478: </td><td> <code>ProgressEvent</code>
23479: </td><td> The user agent is downloading resources listed by the manifest.
23480: </td><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>
23481: </td></tr><tr><td> <dfn id="event-appcache-cached" role="button" tabindex="0" aria-haspopup="true"><code>cached</code></dfn>
23482: </td><td> <code><a href="#event">Event</a></code>
23483: </td><td> The resources listed in the manifest have been downloaded, and the application is now cached.
23484: </td><td> Last event in sequence.
23485: </td></tr><tr><td> <dfn id="event-appcache-updateready" role="button" tabindex="0" aria-haspopup="true"><code>updateready</code></dfn>
23486: </td><td> <code><a href="#event">Event</a></code>
23487: </td><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.
23488: </td><td> Last event in sequence.
23489: </td></tr><tr><td> <dfn id="event-appcache-obsolete" role="button" tabindex="0" aria-haspopup="true"><code>obsolete</code></dfn>
23490: </td><td> <code><a href="#event">Event</a></code>
23491: </td><td> The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
23492: </td><td> Last event in sequence.
23493: </td></tr><tr><td rowspan="4"> <dfn id="event-appcache-error" role="button" tabindex="0" aria-haspopup="true"><code>error</code></dfn>
23494: </td><td rowspan="4"> <code><a href="#event">Event</a></code>
23495: </td><td> The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.
23496: </td><td rowspan="3"> Last event in sequence.
23497: </td></tr><tr><td> The manifest hadn't changed, but the page referencing the manifest failed to download properly.
23498: </td></tr><tr><td> A fatal error occurred while fetching the resources listed in the manifest.
23499: </td></tr><tr><td> The manifest changed while the update was being run.
23500: </td><td> The user agent will try fetching the files again momentarily.
23501: </td></tr></tbody></table><h4 id="manifests"><span class="secno">5.6.3 </span>The cache manifest syntax</h4><h5 id="some-sample-manifests"><span class="secno">5.6.3.1 </span>Some sample manifests</h5><p><i>This section is non-normative.</i></p><div class="example">
1.1 mike 23502:
1.446 mike 23503: <p>This example manifest requires two images and a style sheet to be
23504: cached and whitelists a CGI script.</p>
1.1 mike 23505:
1.446 mike 23506: <pre>CACHE MANIFEST
23507: # the above line is required
1.1 mike 23508:
1.446 mike 23509: # this is a comment
23510: # there can be as many of these anywhere in the file
23511: # they are all ignored
23512: # comments can have spaces before them
23513: # but must be alone on the line
1.1 mike 23514:
1.446 mike 23515: # blank lines are ignored too
1.1 mike 23516:
1.446 mike 23517: # these are files that need to be cached they can either be listed
23518: # first, or a "CACHE:" header could be put before them, as is done
23519: # lower down.
23520: images/sound-icon.png
23521: images/background.png
23522: # note that each file has to be put on its own line
1.1 mike 23523:
1.446 mike 23524: # here is a file for the online whitelist -- it isn't cached, and
23525: # references to this file will bypass the cache, always hitting the
23526: # network (or trying to, if the user is offline).
23527: NETWORK:
23528: comm.cgi
1.1 mike 23529:
1.446 mike 23530: # here is another set of files to cache, this time just the CSS file.
23531: CACHE:
23532: style/default.css</pre>
1.1 mike 23533:
1.446 mike 23534: <p>It could equally well be written as follows:</p>
1.1 mike 23535:
1.446 mike 23536: <pre>CACHE MANIFEST
23537: NETWORK:
23538: comm.cgi
23539: CACHE:
23540: style/default.css
23541: images/sound-icon.png
23542: images/background.png</pre>
1.1 mike 23543:
1.446 mike 23544: </div><div class="example">
1.226 mike 23545:
1.446 mike 23546: <p>Offline application cache manifests can use absolute paths or
23547: even absolute URLs:</p>
1.226 mike 23548:
1.446 mike 23549: <pre>CACHE MANIFEST
1.226 mike 23550:
1.446 mike 23551: /main/home
23552: /main/app.js
23553: /settings/home
23554: /settings/app.js
23555: http://img.example.com/logo.png
23556: http://img.example.com/check.png
23557: http://img.example.com/cross.png</pre>
1.226 mike 23558:
1.446 mike 23559: </div><div class="example">
1.226 mike 23560:
1.446 mike 23561: <p>The following manifest defines a catch-all error page that is
23562: displayed for any page on the site while the user is offline. It
23563: also specifies that the <a href="#concept-appcache-onlinewhitelist-wildcard" title="concept-appcache-onlinewhitelist-wildcard">online whitelist
23564: wildcard flag</a> is <i title="">open</i>, meaning that accesses
23565: to resources on other sites will not be blocked. (Resources on the
23566: same site are already not blocked because of the catch-all fallback
23567: namespace.)</p>
1.226 mike 23568:
1.446 mike 23569: <p>So long as all pages on the site reference this manifest, they
23570: will get cached locally as they are fetched, so that subsequent hits
23571: to the same page will load the page immediately from the
23572: cache. Until the manifest is changed, those pages will not be
23573: fetched from the server again. When the manifest changes, then all
23574: the files will be redownloaded.</p>
1.226 mike 23575:
1.446 mike 23576: <p>Subresources, such as style sheets, images, etc, would only be
23577: cached using the regular HTTP caching semantics, however.</p>
1.226 mike 23578:
1.446 mike 23579: <pre>CACHE MANIFEST
23580: FALLBACK:
23581: / /offline.html
23582: NETWORK:
23583: *</pre>
1.226 mike 23584:
1.446 mike 23585: </div><h5 id="writing-cache-manifests"><span class="secno">5.6.3.2 </span>Writing cache manifests</h5><p>Manifests must be served using the
23586: <code><a href="#text-cache-manifest">text/cache-manifest</a></code> <a href="#mime-type">MIME type</a>. All
23587: resources served using the <code><a href="#text-cache-manifest">text/cache-manifest</a></code>
23588: <a href="#mime-type">MIME type</a> must follow the syntax of application cache
23589: manifests, as described in this section.</p><p>An application cache manifest is a text file, whose text is
23590: encoded using UTF-8. Data in application cache manifests is
23591: line-based. Newlines must be represented by U+000A LINE FEED (LF)
23592: characters, U+000D CARRIAGE RETURN (CR) characters, or U+000D
23593: CARRIAGE RETURN (CR) U+000A LINE FEED (LF) pairs. <a href="#refsRFC3629">[RFC3629]</a></p><p class="note">This is a <a href="#willful-violation">willful violation</a> of RFC
23594: 2046, which requires all <code title="">text/*</code> types to only
23595: allow CRLF line breaks. This requirement, however, is outdated; the
23596: use of CR, LF, and CRLF line breaks is commonly supported and indeed
23597: sometimes CRLF is <em>not</em> supported by text editors. <a href="#refsRFC2046">[RFC2046]</a></p><p>The first line of an application cache manifest must consist of
23598: the string "CACHE", a single U+0020 SPACE character, the string
23599: "MANIFEST", and either a U+0020 SPACE character, a U+0009 CHARACTER
23600: TABULATION (tab) character, a U+000A LINE FEED (LF) character, or a
23601: U+000D CARRIAGE RETURN (CR) character. The first line may optionally
23602: be preceded by a U+FEFF BYTE ORDER MARK (BOM) character. If any
23603: other text is found on the first line, it is ignored.</p><p>Subsequent lines, if any, must all be one of the following:</p><dl><dt>A blank line
23604: </dt><dd>
23605: <p>Blank lines must consist of zero or more U+0020 SPACE and
23606: U+0009 CHARACTER TABULATION (tab) characters only.</p>
1.226 mike 23607:
1.446 mike 23608: </dd><dt>A comment
23609: </dt><dd>
23610: <p>Comment lines must consist of zero or more U+0020 SPACE and
23611: U+0009 CHARACTER TABULATION (tab) characters, followed by a single
23612: U+0023 NUMBER SIGN character (#), followed by zero or more
23613: characters other than U+000A LINE FEED (LF) and U+000D CARRIAGE
23614: RETURN (CR) characters.</p>
1.226 mike 23615:
1.446 mike 23616: <p class="note">Comments must be on a line on their own. If they
23617: were to be included on a line with a URL, the "#" would be
23618: mistaken for part of a fragment identifier.</p>
1.226 mike 23619:
1.446 mike 23620: </dd><dt>A section header
23621: </dt><dd>
23622: <p>Section headers change the current section. There are three
23623: possible section headers:
1.226 mike 23624:
1.446 mike 23625: </p><dl><dt><code>CACHE:</code>
23626: </dt><dd>Switches to the <dfn id="concept-appcache-manifest-explicit" role="button" tabindex="0" aria-haspopup="true">explicit section</dfn>.
1.226 mike 23627:
1.446 mike 23628: </dd><dt><code>FALLBACK:</code>
23629: </dt><dd>Switches to the <dfn id="concept-appcache-manifest-fallback" role="button" tabindex="0" aria-haspopup="true">fallback section</dfn>.
1.226 mike 23630:
1.446 mike 23631: </dd><dt><code>NETWORK:</code>
23632: </dt><dd>Switches to the <dfn id="concept-appcache-manifest-network" role="button" tabindex="0" aria-haspopup="true">online whitelist section</dfn>.
1.226 mike 23633:
1.446 mike 23634: </dd></dl><p>Section header lines must consist of zero or more U+0020 SPACE
23635: and U+0009 CHARACTER TABULATION (tab) characters, followed by one
23636: of the names above (including the U+003A COLON character (:))
23637: followed by zero or more U+0020 SPACE and U+0009 CHARACTER
23638: TABULATION (tab) characters.</p>
1.226 mike 23639:
1.446 mike 23640: <p>Ironically, by default, the current section is the
23641: <a href="#concept-appcache-manifest-explicit" title="concept-appcache-manifest-explicit">explicit section</a>.</p>
1.226 mike 23642:
1.446 mike 23643: </dd><dt>Data for the current section
23644: </dt><dd>
23645: <p>The format that data lines must take depends on the current
23646: section.</p>
1.226 mike 23647:
1.446 mike 23648: <p>When the current section is the <a href="#concept-appcache-manifest-explicit" title="concept-appcache-manifest-explicit">explicit
23649: section</a>, data lines must consist of zero or more U+0020
23650: SPACE and U+0009 CHARACTER TABULATION (tab) characters, a
23651: <a href="#valid-url">valid URL</a> identifying a resource other than the
23652: manifest itself, and then zero or more U+0020 SPACE and U+0009
23653: CHARACTER TABULATION (tab) characters.</p>
1.226 mike 23654:
1.446 mike 23655: <p>When the current section is the <a href="#concept-appcache-manifest-fallback" title="concept-appcache-manifest-fallback">fallback
23656: section</a>, data lines must consist of zero or more U+0020
23657: SPACE and U+0009 CHARACTER TABULATION (tab) characters, a
23658: <a href="#valid-url">valid URL</a> identifying a resource other than the
23659: manifest itself, one or more U+0020 SPACE and U+0009 CHARACTER
23660: TABULATION (tab) characters, another <a href="#valid-url">valid URL</a>
23661: identifying a resource other than the manifest itself, and then
23662: zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION (tab)
23663: characters.</p>
1.226 mike 23664:
1.446 mike 23665: <p>When the current section is the <a href="#concept-appcache-manifest-network" title="concept-appcache-manifest-network">online whitelist
23666: section</a>, data lines must consist of zero or more U+0020
23667: SPACE and U+0009 CHARACTER TABULATION (tab) characters, either a
23668: single U+002A ASTERISK character (*) or a <a href="#valid-url">valid
23669: URL</a> identifying a resource other than the manifest itself,
23670: and then zero or more U+0020 SPACE and U+0009 CHARACTER TABULATION
23671: (tab) characters.</p>
1.226 mike 23672:
23673:
1.446 mike 23674: </dd></dl><p>Manifests may contain sections more than once. Sections may be
1.474 mike 23675: empty.</p><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
1.446 mike 23676: those namespaces themselves, must be given in <a href="#concept-appcache-manifest-fallback" title="concept-appcache-manifest-fallback">fallback sections</a>,
23677: with the namespace being the first URL of the data line, and the
23678: corresponding fallback page being the second URL. All the other
23679: pages to be cached must be listed in <a href="#concept-appcache-manifest-explicit" title="concept-appcache-manifest-explicit">explicit
23680: sections</a>.</p><p><a href="#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">Fallback
23681: namespaces</a> and <a href="#concept-appcache-fallback" title="concept-appcache-fallback">fallback entries</a> must have
23682: the <a href="#same-origin">same origin</a> as the manifest itself.</p><p>A <a href="#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">fallback
23683: namespace</a> must not be listed more than once.</p><p>Namespaces that the user agent is to put into the <a href="#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a>
23684: must all be specified in <a href="#concept-appcache-manifest-network" title="concept-appcache-manifest-network">online whitelist
23685: sections</a>. (This is needed for any URL that the page is
23686: intending to use to communicate back to the server.) To specify that
23687: all URLs are automatically whitelisted in this way, a U+002A
23688: ASTERISK character (*) may be specified as one of the URLs. </p><p>Authors should not include namespaces in the <a href="#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> for
23689: which another namespace in the <a href="#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> is
23690: a <a href="#prefix-match">prefix match</a>.</p><p>Relative URLs must be given relative to the manifest's own
23691: URL. All URLs in the manifest must have the same <a href="#url-scheme" title="url-scheme"><scheme></a> as the manifest itself
23692: (either explicitly or implicitly, through the use of relative
23693: URLs).</p><p>URLs in manifests must not have fragment identifiers (i.e. the
23694: U+0023 NUMBER SIGN character isn't allowed in URLs in
23695: manifests).</p><p><a href="#concept-appcache-fallback-ns" title="concept-appcache-fallback-ns">Fallback
23696: namespaces</a> and namespaces in the <a href="#concept-appcache-onlinewhitelist" title="concept-appcache-onlinewhitelist">online whitelist</a> are
1.514 mike 23697: matched by <a href="#prefix-match">prefix match</a>.</p><h4 id="application-cache-api"><span class="secno">5.6.9 </span>Application cache API</h4><pre class="idl">interface <dfn id="applicationcache" role="button" tabindex="0" aria-haspopup="true">ApplicationCache</dfn> : <a href="#eventtarget">EventTarget</a> {
1.226 mike 23698:
1.446 mike 23699: // <a href="#concept-appcache-status" title="concept-appcache-status">update status</a>
23700: const unsigned short <a href="#dom-appcache-uncached" title="dom-appcache-UNCACHED">UNCACHED</a> = 0;
23701: const unsigned short <a href="#dom-appcache-idle" title="dom-appcache-IDLE">IDLE</a> = 1;
23702: const unsigned short <a href="#dom-appcache-checking" title="dom-appcache-CHECKING">CHECKING</a> = 2;
23703: const unsigned short <a href="#dom-appcache-downloading" title="dom-appcache-DOWNLOADING">DOWNLOADING</a> = 3;
23704: const unsigned short <a href="#dom-appcache-updateready" title="dom-appcache-UPDATEREADY">UPDATEREADY</a> = 4;
23705: const unsigned short <a href="#dom-appcache-obsolete" title="dom-appcache-OBSOLETE">OBSOLETE</a> = 5;
23706: readonly attribute unsigned short <a href="#dom-appcache-status" title="dom-appcache-status">status</a>;
1.226 mike 23707:
1.446 mike 23708: // updates
23709: void <a href="#dom-appcache-update" title="dom-appcache-update">update</a>();
1.504 mike 23710: void <a href="#dom-appcache-abort" title="dom-appcache-abort">abort</a>();
1.446 mike 23711: void <a href="#dom-appcache-swapcache" title="dom-appcache-swapCache">swapCache</a>();
1.226 mike 23712:
1.446 mike 23713: // events
1.610 mike 23714: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
23715: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onerror" title="handler-appcache-onerror">onerror</a>;
23716: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
23717: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
23718: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? <a href="#ix-handler-onprogress" title="handler-appcache-onprogress">onprogress</a>;
23719: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
23720: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
23721: [TreatNonCallableAsNull] attribute <a href="#function">Function</a>? ;
1.514 mike 23722: };</pre><dl class="domintro"><dt><var title="">cache</var> = <var title="">window</var> . <code title="dom-applicationCache"><a href="#dom-applicationcache">applicationCache</a></code></dt>
1.226 mike 23723: <dd>
23724:
1.446 mike 23725: <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>
1.226 mike 23726:
1.446 mike 23727: </dd>
1.226 mike 23728:
1.460 mike 23729: <dt><var title="">cache</var> = <var title="">self</var> . <code title="dom-applicationCache"><a href="#dom-applicationcache">applicationCache</a></code></dt>
1.446 mike 23730: <dd>
1.226 mike 23731:
1.446 mike 23732: <p>(In a shared worker.) Returns the <code><a href="#applicationcache">ApplicationCache</a></code> object that applies to the current shared worker.
23733:
23734: <a href="#refsWEBWORKERS">[WEBWORKERS]</a>
23735:
23736: </p>
1.226 mike 23737:
1.446 mike 23738: </dd>
1.226 mike 23739:
1.446 mike 23740: <dt><var title="">cache</var> . <code title="dom-appcache-status" id="dom-appcache-status"><a href="#dom-appcache-status">status</a></code></dt>
23741: <dd>
1.226 mike 23742:
1.446 mike 23743: <p>Returns the current status of the application cache, as given by the constants defined below.</p>
1.226 mike 23744:
23745: </dd>
23746:
1.446 mike 23747: <dt><var title="">cache</var> . <code title="dom-appcache-update" id="dom-appcache-update"><a href="#dom-appcache-update">update</a></code>()</dt>
1.226 mike 23748: <dd>
23749:
1.446 mike 23750: <p>Invokes the <a href="#application-cache-download-process">application cache download process</a>.</p>
1.226 mike 23751:
1.612 mike 23752: <p>Throws an <code><a href="#invalidstateerror">InvalidStateError</a></code> exception if there is no application cache to update.</p>
1.226 mike 23753:
1.564 mike 23754: <p>Calling this method is not usually necessary, as user agents
23755: will generally take care of updating <a href="#application-cache" title="application
23756: cache">application caches</a> automatically.</p>
23757:
23758: <p>The method can be useful in situations such as long-lived
23759: applications. For example, a Web mail application might stay open
23760: in a browser tab for weeks at a time. Such an application could
23761: want to test for updates each day.</p>
23762:
1.446 mike 23763: </dd>
1.226 mike 23764:
1.508 mike 23765: <dt><var title="">cache</var> . <code title="dom-appcache-abort" id="dom-appcache-abort"><a href="#dom-appcache-abort">abort</a></code>()</dt>
23766: <dd>
23767:
23768: <p>Cancels the <a href="#application-cache-download-process">application cache download process</a>.</p>
23769:
1.564 mike 23770: <p>This method is intended to be used by Web application showing
23771: their own caching progress UI, in case the user wants to stop the
23772: update (e.g. because bandwidth is limited).</p>
23773:
1.508 mike 23774: </dd>
23775:
1.446 mike 23776: <dt><var title="">cache</var> . <code title="dom-appcache-swapCache" id="dom-appcache-swapcache"><a href="#dom-appcache-swapcache">swapCache</a></code>()</dt>
23777: <dd>
1.226 mike 23778:
1.446 mike 23779: <p>Switches to the most recent application cache, if there is a
23780: newer one. If there isn't, throws an
1.612 mike 23781: <code><a href="#invalidstateerror">InvalidStateError</a></code> exception.</p>
1.226 mike 23782:
1.446 mike 23783: <p>This does not cause previously-loaded resources to be reloaded;
23784: for example, images do not suddenly get reloaded and style sheets
23785: and scripts do not get reparsed or reevaluated. The only change is
23786: that subsequent requests for cached resources will obtain the
23787: newer copies.</p>
1.226 mike 23788:
1.564 mike 23789: <p>The <code title="event-appcache-updateready"><a href="#event-appcache-updateready">updateready</a></code>
23790: event will fire before this method can be called. Once it fires,
23791: the Web application can, at its leisure, call this method to
23792: switch the underlying cache to the one with the more recent
23793: updates. To make proper use of this, applications have to be able
23794: to bring the new features into play; for example, reloading
23795: scripts to enable new features.</p>
23796:
23797: <p>An easier alternative to <code title="dom-appcache-swapCache"><a href="#dom-appcache-swapcache">swapCache()</a></code> is just to
23798: reload the entire page at a time suitable for the user, using
23799: <code title="dom-location-reload"><a href="#dom-location-reload">location.reload()</a></code>.</p>
23800:
1.446 mike 23801: </dd>
1.1 mike 23802:
1.459 mike 23803: </dl><dl><dt><dfn id="dom-appcache-uncached" role="button" tabindex="0" aria-haspopup="true"><code>UNCACHED</code></dfn>
1.446 mike 23804: (numeric value 0)</dt>
1.1 mike 23805:
1.446 mike 23806: <dd><p>The <code><a href="#applicationcache">ApplicationCache</a></code> object's <a href="#cache-host">cache
23807: host</a> is not associated with an <a href="#application-cache">application
23808: cache</a> at this time.</p></dd>
1.1 mike 23809:
1.446 mike 23810: <dt><dfn id="dom-appcache-idle" role="button" tabindex="0" aria-haspopup="true"><code>IDLE</code></dfn>
23811: (numeric value 1)</dt>
1.1 mike 23812:
1.446 mike 23813: <dd><p>The <code><a href="#applicationcache">ApplicationCache</a></code> object's <a href="#cache-host">cache
23814: host</a> is associated with an <a href="#application-cache">application cache</a>
23815: whose <a href="#application-cache-group">application cache group</a>'s <a href="#concept-appcache-status" title="concept-appcache-status">update status</a> is
23816: <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
23817: <a href="#application-cache-group">application cache group</a>, and the <a href="#application-cache-group">application
23818: cache group</a> is not marked as <a href="#concept-appcache-obsolete" title="concept-appcache-obsolete">obsolete</a>.</p></dd>
1.1 mike 23819:
1.446 mike 23820: <dt><dfn id="dom-appcache-checking" role="button" tabindex="0" aria-haspopup="true"><code>CHECKING</code></dfn>
23821: (numeric value 2)</dt>
1.1 mike 23822:
1.446 mike 23823: <dd><p>The <code><a href="#applicationcache">ApplicationCache</a></code> object's <a href="#cache-host">cache
23824: host</a> is associated with an <a href="#application-cache">application cache</a>
23825: whose <a href="#application-cache-group">application cache group</a>'s <a href="#concept-appcache-status" title="concept-appcache-status">update status</a> is
23826: <i>checking</i>.</p></dd>
1.1 mike 23827:
1.446 mike 23828: <dt><dfn id="dom-appcache-downloading" role="button" tabindex="0" aria-haspopup="true"><code>DOWNLOADING</code></dfn>
23829: (numeric value 3)</dt>
1.1 mike 23830:
1.446 mike 23831: <dd><p>The <code><a href="#applicationcache">ApplicationCache</a></code> object's <a href="#cache-host">cache
23832: host</a> is associated with an <a href="#application-cache">application cache</a>
23833: whose <a href="#application-cache-group">application cache group</a>'s <a href="#concept-appcache-status" title="concept-appcache-status">update status</a> is
23834: <i>downloading</i>.</p></dd>
1.1 mike 23835:
1.446 mike 23836: <dt><dfn id="dom-appcache-updateready" role="button" tabindex="0" aria-haspopup="true"><code>UPDATEREADY</code></dfn>
23837: (numeric value 4)</dt>
1.1 mike 23838:
1.446 mike 23839: <dd><p>The <code><a href="#applicationcache">ApplicationCache</a></code> object's <a href="#cache-host">cache
23840: host</a> is associated with an <a href="#application-cache">application cache</a>
23841: whose <a href="#application-cache-group">application cache group</a>'s <a href="#concept-appcache-status" title="concept-appcache-status">update status</a> is
23842: <i>idle</i>, and whose <a href="#application-cache-group">application cache group</a> is not
23843: marked as <a href="#concept-appcache-obsolete" title="concept-appcache-obsolete">obsolete</a>,
23844: 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
23845: group.</p></dd>
1.1 mike 23846:
1.446 mike 23847: <dt><dfn id="dom-appcache-obsolete" role="button" tabindex="0" aria-haspopup="true"><code>OBSOLETE</code></dfn>
23848: (numeric value 5)</dt>
1.1 mike 23849:
1.446 mike 23850: <dd><p>The <code><a href="#applicationcache">ApplicationCache</a></code> object's <a href="#cache-host">cache
23851: host</a> is associated with an <a href="#application-cache">application cache</a>
23852: whose <a href="#application-cache-group">application cache group</a> is marked as <a href="#concept-appcache-obsolete" title="concept-appcache-obsolete">obsolete</a>.</p></dd>
1.1 mike 23853:
1.488 mike 23854: </dl><h4 id="browser-state"><span class="secno">5.6.10 </span>Browser state</h4><pre class="idl">[NoInterfaceObject]
1.446 mike 23855: interface <dfn id="navigatoronline" role="button" tabindex="0" aria-haspopup="true">NavigatorOnLine</dfn> {
23856: readonly attribute boolean <a href="#dom-navigator-online" title="dom-navigator-onLine">onLine</a>;
23857: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator" id="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-onLine" id="dom-navigator-online"><a href="#dom-navigator-online">onLine</a></code></dt>
1.1 mike 23858:
1.446 mike 23859: <dd>
1.224 mike 23860:
1.446 mike 23861: <p>Returns false if the user agent is definitely offline
23862: (disconnected from the network). Returns true if the user agent
23863: might be online.</p>
1.224 mike 23864:
1.446 mike 23865: <p>The events <code title="event-online"><a href="#event-online">online</a></code> and <code title="event-offline"><a href="#event-offline">offline</a></code> are fired when the value of
23866: this attribute changes.</p>
1.363 mike 23867:
1.446 mike 23868: </dd>
1.363 mike 23869:
1.446 mike 23870: </dl><p class="note">This attribute is inherently unreliable. A computer
23871: can be connected to a network without having Internet access.</p><div class="example">
1.224 mike 23872:
1.446 mike 23873: <p>In this example, an indicator is updated as the browser goes
23874: online and offline.</p>
1.224 mike 23875:
1.446 mike 23876: <pre><!DOCTYPE HTML>
23877: <html>
23878: <head>
23879: <title>Online status</title>
23880: <script>
23881: function updateIndicator() {
1.552 mike 23882: document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
1.446 mike 23883: }
23884: </script>
23885: </head>
23886: <body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
23887: <p>The network is: <span id="indicator">(state unknown)</span>
23888: </body>
23889: </html></pre>
1.224 mike 23890:
1.446 mike 23891: </div><h2 id="webappapis"><span class="secno">6 </span>Web application APIs</h2><h3 id="scripting"><span class="secno">6.1 </span>Scripting</h3><h4 id="introduction-5"><span class="secno">6.1.1 </span>Introduction</h4><p>Various mechanisms can cause author-provided executable code to
23892: run in the context of a document. These mechanisms include, but are
23893: probably not limited to:</p><ul><li>Processing of <code><a href="#the-script-element">script</a></code> elements.</li>
1.146 mike 23894:
1.446 mike 23895: <li>Processing of inline <code title="javascript
23896: 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>
23897: elements, or an <code title="">@import</code> rule in a CSS
23898: <code><a href="#the-style-element">style</a></code> element block).</li>
1.146 mike 23899:
1.446 mike 23900: <li>Event handlers, whether registered through the DOM using <code title="">addEventListener()</code>, by explicit <a href="#event-handler-content-attributes">event handler
23901: content attributes</a>, by <a href="#event-handler-idl-attributes">event handler IDL
23902: attributes</a>, or otherwise.</li>
1.146 mike 23903:
1.446 mike 23904: <li>Processing of technologies like XBL or SVG that have their own
23905: scripting features.</li>
1.146 mike 23906:
1.446 mike 23907: </ul><h4 id="events"><span class="secno">6.1.6 </span>Events</h4><p>Many objects can have <dfn id="event-handlers" role="button" tabindex="0" aria-haspopup="true">event handlers</dfn> specified. These
23908: act as bubbling event listeners for the object on which they are
23909: specified.</p><p>An <a href="#event-handlers" title="event handlers">event handler</a> can either
23910: have the value null or be set to a <code><a href="#function">Function</a></code>
23911: object. <span class="impl">Initially, event handlers must be set to
23912: null.</span></p><p>Event handlers are exposed in one or two ways.</p><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
23913: attribute</a>.</p><p>The second way is as an <a href="#event-handler-content-attributes" title="event handler content
23914: attributes">event handler content attribute</a>. Event handlers
23915: on <a href="#html-elements">HTML elements</a> and some of the event handlers on
23916: <code><a href="#window">Window</a></code> objects are exposed in this way.</p><p><dfn id="event-handler-content-attributes" role="button" tabindex="0" aria-haspopup="true">Event handler content attributes</dfn>, when specified, must
23917: contain valid JavaScript code which, when parsed, would match the
23918: <code title="">FunctionBody</code> production after automatic
23919: semicolon insertion. <a href="#refsECMA262">[ECMA262]</a></p><p class="note">When an <a href="#event-handler-content-attributes" title="event handler content
23920: attributes">event handler content attribute</a> is set on an
23921: element owned by a <code><a href="#document">Document</a></code> that is not in a
23922: <a href="#browsing-context">browsing context</a>, the corresponding event handler is
1.474 mike 23923: not changed.</p><p class="note"><a href="#event-handlers">Event handlers</a> <span class="impl">therefore</span> always run before event listeners
1.446 mike 23924: attached using <code title="dom-EventTarget-addEventListener">addEventListener()</code>.</p><hr><p>The <code><a href="#function">Function</a></code> interface represents a function in the
23925: scripting language being used. It is represented in IDL as
23926: follows:</p><pre class="idl">[Callback=FunctionOnly, NoInterfaceObject]
23927: interface <dfn id="function" role="button" tabindex="0" aria-haspopup="true">Function</dfn> {
1.562 mike 23928: any <a href="#dom-function-call" title="dom-function-call">call</a>(any... arguments);
1.446 mike 23929: };</pre><p>The <dfn id="dom-function-call" role="button" tabindex="0" aria-haspopup="true"><code>call(...)</code></dfn>
23930: method is the object's callback.</p><p class="note">In JavaScript, any <code title="">Function</code>
23931: object implements this interface.</p><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,
23932: the user agent must set the <var title="">thisArg</var> (as defined
23933: by ECMAScript edition 5 section 10.4.3 Entering Function Code) to
23934: the <a href="#event-handlers" title="event handlers">event handler</a>'s object. <a href="#refsECMA262">[ECMA262]</a></p><div class="example">
1.146 mike 23935:
1.446 mike 23936: <p>For example, the following document fragment:</p>
1.146 mike 23937:
1.446 mike 23938: <pre><body onload="alert(this)" onclick="alert(this)"></pre>
1.146 mike 23939:
1.446 mike 23940: <p>...leads to an alert saying "<code title="">[object Window]</code>" when the document is loaded,
23941: and an alert saying "<code title="">[object HTMLBodyElement]</code>" whenever the user
23942: clicks something in the page.</p>
1.146 mike 23943:
1.446 mike 23944: </div><p>The return value of the function affects whether the event is
23945: canceled or not: <span class="impl">as described above,</span> if
23946: the return value is false, the event is canceled (except for <code class="event-mouseover">mouseover</code> events, where the return
23947: value has to be true to cancel the event). With <code title="event-beforeunload">beforeunload</code> events, the value is
1.481 mike 23948: instead used to determine the message to show the user.</p><h5 id="event-handlers-on-elements-document-objects-and-window-objects"><span class="secno">6.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><p>The following are the <a href="#event-handlers">event handlers</a> (and their
23949: corresponding <a href="#event-handler-event-type" title="event handler event type">event handler
1.589 mike 23950: event types</a>) <span class="impl">that must be</span> supported
23951: by all <a href="#html-elements">HTML elements</a>, as both content attributes and
23952: IDL attributes, and on <code><a href="#document">Document</a></code> and <code><a href="#window">Window</a></code>
23953: objects, as IDL attributes.</p><table><thead><tr><th><a href="#event-handlers" title="event handlers">Event handler</a> </th><th><a href="#event-handler-event-type">Event handler event type</a>
1.481 mike 23954: </th></tr></thead><tbody><tr><td><dfn id="handler-onabort" role="button" tabindex="0" aria-haspopup="true"><code>onabort</code></dfn> </td><td> <code title="event-abort">abort</code>
23955: </td></tr><tr><td><dfn id="handler-oncanplay" role="button" tabindex="0" aria-haspopup="true"><code>oncanplay</code></dfn> </td><td> <code title="event-media-canplay"><a href="#event-media-canplay">canplay</a></code>
23956: </td></tr><tr><td><dfn id="handler-oncanplaythrough" role="button" tabindex="0" aria-haspopup="true"><code>oncanplaythrough</code></dfn> </td><td> <code title="event-media-canplaythrough"><a href="#event-media-canplaythrough">canplaythrough</a></code>
23957: </td></tr><tr><td><dfn id="handler-onchange" role="button" tabindex="0" aria-haspopup="true"><code>onchange</code></dfn> </td><td> <code title="event-change">change</code>
23958: </td></tr><tr><td><dfn id="handler-onclick" role="button" tabindex="0" aria-haspopup="true"><code>onclick</code></dfn> </td><td> <code title="event-click"><a href="#event-click">click</a></code>
23959: </td></tr><tr><td><dfn id="handler-oncontextmenu" role="button" tabindex="0" aria-haspopup="true"><code>oncontextmenu</code></dfn> </td><td> <code title="event-contextmenu">contextmenu</code>
23960: </td></tr><tr><td><dfn id="handler-oncuechange" role="button" tabindex="0" aria-haspopup="true"><code>oncuechange</code></dfn> </td><td> <code title="event-cuechange">cuechange</code>
23961: </td></tr><tr><td><dfn id="handler-ondblclick" role="button" tabindex="0" aria-haspopup="true"><code>ondblclick</code></dfn> </td><td> <code title="event-dblclick">dblclick</code>
23962: </td></tr><tr><td><dfn id="handler-ondrag" role="button" tabindex="0" aria-haspopup="true"><code>ondrag</code></dfn> </td><td> <code title="event-drag"><a href="#event-drag">drag</a></code>
23963: </td></tr><tr><td><dfn id="handler-ondragend" role="button" tabindex="0" aria-haspopup="true"><code>ondragend</code></dfn> </td><td> <code title="event-dragend"><a href="#event-dragend">dragend</a></code>
23964: </td></tr><tr><td><dfn id="handler-ondragenter" role="button" tabindex="0" aria-haspopup="true"><code>ondragenter</code></dfn> </td><td> <code title="event-dragenter"><a href="#event-dragenter">dragenter</a></code>
23965: </td></tr><tr><td><dfn id="handler-ondragleave" role="button" tabindex="0" aria-haspopup="true"><code>ondragleave</code></dfn> </td><td> <code title="event-dragleave"><a href="#event-dragleave">dragleave</a></code>
23966: </td></tr><tr><td><dfn id="handler-ondragover" role="button" tabindex="0" aria-haspopup="true"><code>ondragover</code></dfn> </td><td> <code title="event-dragover"><a href="#event-dragover">dragover</a></code>
23967: </td></tr><tr><td><dfn id="handler-ondragstart" role="button" tabindex="0" aria-haspopup="true"><code>ondragstart</code></dfn> </td><td> <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code>
23968: </td></tr><tr><td><dfn id="handler-ondrop" role="button" tabindex="0" aria-haspopup="true"><code>ondrop</code></dfn> </td><td> <code title="event-drop"><a href="#event-drop">drop</a></code>
23969: </td></tr><tr><td><dfn id="handler-ondurationchange" role="button" tabindex="0" aria-haspopup="true"><code>ondurationchange</code></dfn> </td><td> <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code>
23970: </td></tr><tr><td><dfn id="handler-onemptied" role="button" tabindex="0" aria-haspopup="true"><code>onemptied</code></dfn> </td><td> <code title="event-media-emptied"><a href="#event-media-emptied">emptied</a></code>
23971: </td></tr><tr><td><dfn id="handler-onended" role="button" tabindex="0" aria-haspopup="true"><code>onended</code></dfn> </td><td> <code title="event-media-ended"><a href="#event-media-ended">ended</a></code>
23972: </td></tr><tr><td><dfn id="handler-oninput" role="button" tabindex="0" aria-haspopup="true"><code>oninput</code></dfn> </td><td> <code title="event-input">input</code>
23973: </td></tr><tr><td><dfn id="handler-oninvalid" role="button" tabindex="0" aria-haspopup="true"><code>oninvalid</code></dfn> </td><td> <code title="event-invalid">invalid</code>
23974: </td></tr><tr><td><dfn id="handler-onkeydown" role="button" tabindex="0" aria-haspopup="true"><code>onkeydown</code></dfn> </td><td> <code title="event-keydown">keydown</code>
23975: </td></tr><tr><td><dfn id="handler-onkeypress" role="button" tabindex="0" aria-haspopup="true"><code>onkeypress</code></dfn> </td><td> <code title="event-keypress">keypress</code>
23976: </td></tr><tr><td><dfn id="handler-onkeyup" role="button" tabindex="0" aria-haspopup="true"><code>onkeyup</code></dfn> </td><td> <code title="event-keyup">keyup</code>
23977: </td></tr><tr><td><dfn id="handler-onloadeddata" role="button" tabindex="0" aria-haspopup="true"><code>onloadeddata</code></dfn> </td><td> <code title="event-media-loadeddata"><a href="#event-media-loadeddata">loadeddata</a></code>
23978: </td></tr><tr><td><dfn id="handler-onloadedmetadata" role="button" tabindex="0" aria-haspopup="true"><code>onloadedmetadata</code></dfn> </td><td> <code title="event-media-loadedmetadata"><a href="#event-media-loadedmetadata">loadedmetadata</a></code>
23979: </td></tr><tr><td><dfn id="handler-onloadstart" role="button" tabindex="0" aria-haspopup="true"><code>onloadstart</code></dfn> </td><td> <code title="event-media-loadstart"><a href="#event-media-loadstart">loadstart</a></code>
23980: </td></tr><tr><td><dfn id="handler-onmousedown" role="button" tabindex="0" aria-haspopup="true"><code>onmousedown</code></dfn> </td><td> <code title="event-mousedown">mousedown</code>
23981: </td></tr><tr><td><dfn id="handler-onmousemove" role="button" tabindex="0" aria-haspopup="true"><code>onmousemove</code></dfn> </td><td> <code title="event-mousemove">mousemove</code>
23982: </td></tr><tr><td><dfn id="handler-onmouseout" role="button" tabindex="0" aria-haspopup="true"><code>onmouseout</code></dfn> </td><td> <code title="event-mouseout">mouseout</code>
23983: </td></tr><tr><td><dfn id="handler-onmouseover" role="button" tabindex="0" aria-haspopup="true"><code>onmouseover</code></dfn> </td><td> <code title="event-mouseover">mouseover</code>
23984: </td></tr><tr><td><dfn id="handler-onmouseup" role="button" tabindex="0" aria-haspopup="true"><code>onmouseup</code></dfn> </td><td> <code title="event-mouseup">mouseup</code>
23985: </td></tr><tr><td><dfn id="handler-onmousewheel" role="button" tabindex="0" aria-haspopup="true"><code>onmousewheel</code></dfn> </td><td> <code title="event-mousewheel">mousewheel</code>
23986: </td></tr><tr><td><dfn id="handler-onpause" role="button" tabindex="0" aria-haspopup="true"><code>onpause</code></dfn> </td><td> <code title="event-media-pause"><a href="#event-media-pause">pause</a></code>
23987: </td></tr><tr><td><dfn id="handler-onplay" role="button" tabindex="0" aria-haspopup="true"><code>onplay</code></dfn> </td><td> <code title="event-media-play"><a href="#event-media-play">play</a></code>
23988: </td></tr><tr><td><dfn id="handler-onplaying" role="button" tabindex="0" aria-haspopup="true"><code>onplaying</code></dfn> </td><td> <code title="event-media-playing"><a href="#event-media-playing">playing</a></code>
23989: </td></tr><tr><td><dfn id="handler-onprogress" role="button" tabindex="0" aria-haspopup="true"><code>onprogress</code></dfn> </td><td> <code title="event-media-progress"><a href="#event-media-progress">progress</a></code>
23990: </td></tr><tr><td><dfn id="handler-onratechange" role="button" tabindex="0" aria-haspopup="true"><code>onratechange</code></dfn> </td><td> <code title="event-media-ratechange"><a href="#event-media-ratechange">ratechange</a></code>
23991: </td></tr><tr><td><dfn id="handler-onreset" role="button" tabindex="0" aria-haspopup="true"><code>onreset</code></dfn> </td><td> <code title="event-reset">reset</code>
23992: </td></tr><tr><td><dfn id="handler-onseeked" role="button" tabindex="0" aria-haspopup="true"><code>onseeked</code></dfn> </td><td> <code title="event-media-seeked"><a href="#event-media-seeked">seeked</a></code>
23993: </td></tr><tr><td><dfn id="handler-onseeking" role="button" tabindex="0" aria-haspopup="true"><code>onseeking</code></dfn> </td><td> <code title="event-media-seeking"><a href="#event-media-seeking">seeking</a></code>
23994: </td></tr><tr><td><dfn id="handler-onselect" role="button" tabindex="0" aria-haspopup="true"><code>onselect</code></dfn> </td><td> <code title="event-select">select</code> <!-- [CSSOM] -->
23995: </td></tr><tr><td><dfn id="handler-onshow" role="button" tabindex="0" aria-haspopup="true"><code>onshow</code></dfn> </td><td> <code title="event-show">show</code>
23996: </td></tr><tr><td><dfn id="handler-onstalled" role="button" tabindex="0" aria-haspopup="true"><code>onstalled</code></dfn> </td><td> <code title="event-media-stalled"><a href="#event-media-stalled">stalled</a></code>
23997: </td></tr><tr><td><dfn id="handler-onsubmit" role="button" tabindex="0" aria-haspopup="true"><code>onsubmit</code></dfn> </td><td> <code title="event-submit">submit</code>
23998: </td></tr><tr><td><dfn id="handler-onsuspend" role="button" tabindex="0" aria-haspopup="true"><code>onsuspend</code></dfn> </td><td> <code title="event-media-suspend"><a href="#event-media-suspend">suspend</a></code>
23999: </td></tr><tr><td><dfn id="handler-ontimeupdate" role="button" tabindex="0" aria-haspopup="true"><code>ontimeupdate</code></dfn> </td><td> <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code>
24000: </td></tr><tr><td><dfn id="handler-onvolumechange" role="button" tabindex="0" aria-haspopup="true"><code>onvolumechange</code></dfn> </td><td> <code title="event-media-volumechange"><a href="#event-media-volumechange">volumechange</a></code>
24001: </td></tr><tr><td><dfn id="handler-onwaiting" role="button" tabindex="0" aria-haspopup="true"><code>onwaiting</code></dfn> </td><td> <code title="event-media-waiting"><a href="#event-media-waiting">waiting</a></code>
24002:
24003:
24004:
24005:
24006:
24007: </td></tr></tbody></table><hr><p>The following are the <a href="#event-handlers">event handlers</a> (and their
24008: corresponding <a href="#event-handler-event-type" title="event handler event type">event handler
1.589 mike 24009: event types</a>) <span class="impl">that must be</span> supported
24010: by all <a href="#html-elements">HTML elements</a> other than <code><a href="#the-body-element">body</a></code>, as
24011: both content attributes and IDL attributes, and on
24012: <code><a href="#document">Document</a></code> objects, as IDL attributes:</p><table><thead><tr><th><a href="#event-handlers" title="event handlers">Event handler</a> </th><th><a href="#event-handler-event-type">Event handler event type</a>
1.481 mike 24013: </th></tr></thead><tbody><tr><td><dfn id="handler-onblur" role="button" tabindex="0" aria-haspopup="true"><code>onblur</code></dfn> </td><td> <code title="event-blur">blur</code>
24014: </td></tr><tr><td><dfn id="handler-onerror" role="button" tabindex="0" aria-haspopup="true"><code>onerror</code></dfn> </td><td> <code title="event-error">error</code>
24015: </td></tr><tr><td><dfn id="handler-onfocus" role="button" tabindex="0" aria-haspopup="true"><code>onfocus</code></dfn> </td><td> <code title="event-focus">focus</code>
24016: </td></tr><tr><td><dfn id="handler-onload" role="button" tabindex="0" aria-haspopup="true"><code>onload</code></dfn> </td><td> <code title="event-load">load</code>
24017: </td></tr><tr><td><dfn id="handler-onscroll" role="button" tabindex="0" aria-haspopup="true"><code>onscroll</code></dfn> </td><td> <code title="event-scroll">scroll</code>
24018: </td></tr></tbody></table><hr><p>The following are the <a href="#event-handlers">event handlers</a> (and their
24019: corresponding <a href="#event-handler-event-type" title="event handler event type">event handler
1.589 mike 24020: event types</a>) <span class="impl">that must be</span> supported
24021: by <code><a href="#window">Window</a></code> objects, as IDL attributes on the
24022: <code><a href="#window">Window</a></code> object, and with corresponding content
24023: attributes and IDL attributes exposed on the <code><a href="#the-body-element">body</a></code> and
24024: <code><a href="#frameset">frameset</a></code> elements:</p><table><thead><tr><th><a href="#event-handlers" title="event handlers">Event handler</a> </th><th><a href="#event-handler-event-type">Event handler event type</a>
1.481 mike 24025: </th></tr></thead><tbody><tr><td><dfn id="handler-window-onafterprint" role="button" tabindex="0" aria-haspopup="true"><code>onafterprint</code></dfn> </td><td> <code title="event-afterprint">afterprint</code>
24026: </td></tr><tr><td><dfn id="handler-window-onbeforeprint" role="button" tabindex="0" aria-haspopup="true"><code>onbeforeprint</code></dfn> </td><td> <code title="event-beforeprint">beforeprint</code>
24027: </td></tr><tr><td><dfn id="handler-window-onbeforeunload" role="button" tabindex="0" aria-haspopup="true"><code>onbeforeunload</code></dfn> </td><td> <code title="event-beforeunload">beforeunload</code>
24028: </td></tr><tr><td><dfn id="handler-window-onblur" role="button" tabindex="0" aria-haspopup="true"><code>onblur</code></dfn> </td><td> <code title="event-blur">blur</code>
24029: </td></tr><tr><td><dfn id="handler-window-onerror" role="button" tabindex="0" aria-haspopup="true"><code>onerror</code></dfn> </td><td> <code title="event-error">error</code>
24030: </td></tr><tr><td><dfn id="handler-window-onfocus" role="button" tabindex="0" aria-haspopup="true"><code>onfocus</code></dfn> </td><td> <code title="event-focus">focus</code>
24031: </td></tr><tr><td><dfn id="handler-window-onhashchange" role="button" tabindex="0" aria-haspopup="true"><code>onhashchange</code></dfn> </td><td> <code title="event-hashchange"><a href="#event-hashchange">hashchange</a></code>
24032: </td></tr><tr><td><dfn id="handler-window-onload" role="button" tabindex="0" aria-haspopup="true"><code>onload</code></dfn> </td><td> <code title="event-load">load</code>
24033: </td></tr><tr><td><dfn id="handler-window-onmessage" role="button" tabindex="0" aria-haspopup="true"><code>onmessage</code></dfn> </td><td> <code title="event-message">message</code>
24034: </td></tr><tr><td><dfn id="handler-window-onoffline" role="button" tabindex="0" aria-haspopup="true"><code>onoffline</code></dfn> </td><td> <code title="event-offline"><a href="#event-offline">offline</a></code>
24035: </td></tr><tr><td><dfn id="handler-window-ononline" role="button" tabindex="0" aria-haspopup="true"><code>ononline</code></dfn> </td><td> <code title="event-online"><a href="#event-online">online</a></code>
24036: </td></tr><tr><td><dfn id="handler-window-onpagehide" role="button" tabindex="0" aria-haspopup="true"><code>onpagehide</code></dfn> </td><td> <code title="event-pagehide"><a href="#event-pagehide">pagehide</a></code>
24037: </td></tr><tr><td><dfn id="handler-window-onpageshow" role="button" tabindex="0" aria-haspopup="true"><code>onpageshow</code></dfn> </td><td> <code title="event-pageshow"><a href="#event-pageshow">pageshow</a></code>
24038: </td></tr><tr><td><dfn id="handler-window-onpopstate" role="button" tabindex="0" aria-haspopup="true"><code>onpopstate</code></dfn> </td><td> <code title="event-popstate"><a href="#event-popstate">popstate</a></code>
24039: </td></tr><tr><td><dfn id="handler-window-onresize" role="button" tabindex="0" aria-haspopup="true"><code>onresize</code></dfn> </td><td> <code title="event-resize">resize</code> <!-- [CSSOM] -->
24040: </td></tr><tr><td><dfn id="handler-window-onscroll" role="button" tabindex="0" aria-haspopup="true"><code>onscroll</code></dfn> </td><td> <code title="event-scroll">scroll</code>
24041: </td></tr><tr><td><dfn id="handler-window-onstorage" role="button" tabindex="0" aria-haspopup="true"><code>onstorage</code></dfn> </td><td> <code title="event-storage">storage</code>
24042: </td></tr><tr><td><dfn id="handler-window-onunload" role="button" tabindex="0" aria-haspopup="true"><code>onunload</code></dfn> </td><td> <code title="event-unload">unload</code>
24043: </td></tr></tbody></table><p class="note">The <code title="handler-window-onerror"><a href="#handler-window-onerror">onerror</a></code>
1.589 mike 24044: handler is also used for <a href="#runtime-script-errors">reporting script errors</a>.</p><hr><p>The following are the <a href="#event-handlers">event handlers</a> (and their
24045: corresponding <a href="#event-handler-event-type" title="event handler event type">event handler
24046: event types</a>) <span class="impl">that must be</span> supported
24047: on <code><a href="#document">Document</a></code> objects as IDL attributes:</p><table><thead><tr><th><a href="#event-handlers" title="event handlers">Event handler</a> </th><th><a href="#event-handler-event-type">Event handler event type</a>
24048: </th></tr></thead><tbody><tr><td><dfn id="handler-onreadystatechange" role="button" tabindex="0" aria-haspopup="true"><code>onreadystatechange</code></dfn> </td><td> <code title="event-readystatechange"><a href="#event-readystatechange">readystatechange</a></code>
24049: </td></tr></tbody></table><h3 id="atob"><span class="secno">6.2 </span>Base64 utility methods</h3><p>The <code title="dom-windowbase64-atob"><a href="#dom-windowbase64-atob">atob()</a></code> and <code title="dom-windowbase64-btoa"><a href="#dom-windowbase64-btoa">btoa()</a></code> methods allow authors to
1.488 mike 24050: transform content to and from the base64 encoding.</p><pre class="idl">[NoInterfaceObject]
1.446 mike 24051: interface <dfn id="windowbase64" role="button" tabindex="0" aria-haspopup="true">WindowBase64</dfn> {
1.562 mike 24052: DOMString <a href="#dom-windowbase64-btoa" title="dom-windowbase64-btoa">btoa</a>(DOMString btoa);
24053: DOMString <a href="#dom-windowbase64-atob" title="dom-windowbase64-atob">atob</a>(DOMString atob);
1.446 mike 24054: };
24055: <a href="#window">Window</a> implements <a href="#windowbase64">WindowBase64</a>;</pre><p class="note">In these APIs, for mnemonic purposes, the "b" can be
24056: considered to stand for "binary", and the "a" for "ASCII". In
24057: practice, though, for primarily historical reasons, both the input
24058: and output of these functions are Unicode strings.</p><dl class="domintro"><dt><var title="">result</var> = <var title="">window</var> . <code title="dom-windowbase64-btoa" id="dom-windowbase64-btoa"><a href="#dom-windowbase64-btoa">btoa</a></code>( <var title="">data</var> )</dt>
1.1 mike 24059:
1.446 mike 24060: <dd>
1.1 mike 24061:
1.446 mike 24062: <p>Takes the input data, in the form of a Unicode string
24063: containing only characters in the range U+0000 to U+00FF, each
24064: representing a binary byte with values 0x00 to 0xFF respectively,
24065: and converts it to its base64 representation, which it returns.</p>
1.1 mike 24066:
1.612 mike 24067: <p>Throws an <code><a href="#invalidcharactererror">InvalidCharacterError</a></code> exception if the
1.446 mike 24068: input string contains any out-of-range characters.</p>
1.1 mike 24069:
1.446 mike 24070: </dd>
1.1 mike 24071:
1.446 mike 24072: <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-windowbase64-atob" id="dom-windowbase64-atob"><a href="#dom-windowbase64-atob">atob</a></code>( <var title="">data</var> )</dt>
1.1 mike 24073:
1.446 mike 24074: <dd>
1.1 mike 24075:
1.446 mike 24076: <p>Takes the input data, in the form of a Unicode string
24077: containing base64-encoded binary data, decodes it, and returns a
24078: string consisting of characters in the range U+0000 to U+00FF,
24079: each representing a binary byte with values 0x00 to 0xFF
24080: respectively, corresponding to that binary data.</p>
1.1 mike 24081:
1.612 mike 24082: <p>Throws an <code><a href="#invalidcharactererror">InvalidCharacterError</a></code> exception if the
1.446 mike 24083: input string is not valid base64 data.</p>
1.1 mike 24084:
1.446 mike 24085: </dd>
1.1 mike 24086:
1.446 mike 24087: </dl><p class="note">Some base64 encoders add newlines or other
24088: whitespace to their output. The <code title="dom-windowbase64-atob"><a href="#dom-windowbase64-atob">atob()</a></code> method throws an
24089: exception if its input contains characters other than those
24090: described by the regular expression bracket expression <code title="">[+/=0-9A-Za-z]</code>, so other characters need to be
24091: removed before <code title="dom-windowbase64-atob"><a href="#dom-windowbase64-atob">atob()</a></code> is
24092: used for decoding.</p><h3 id="timers"><span class="secno">6.3 </span>Timers</h3><p>The <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code>
24093: and <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code>
1.488 mike 24094: methods allow authors to schedule timer-based callbacks.</p><pre class="idl">[NoInterfaceObject]
1.446 mike 24095: interface <dfn id="windowtimers" role="button" tabindex="0" aria-haspopup="true">WindowTimers</dfn> {
1.562 mike 24096: long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>(Function handler, optional float timeout, any... args);
24097: long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>([AllowAny] DOMString handler, optional float timeout, any... args);
24098: void <a href="#dom-windowtimers-cleartimeout" title="dom-windowtimers-clearTimeout">clearTimeout</a>(long handle);
24099: long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>(Function handler, optional float timeout, any... args);
24100: long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>([AllowAny] DOMString handler, optional float timeout, any... args);
24101: void <a href="#dom-windowtimers-clearinterval" title="dom-windowtimers-clearInterval">clearInterval</a>(long handle);
1.446 mike 24102: };
1.474 mike 24103: <a href="#window">Window</a> implements <a href="#windowtimers">WindowTimers</a>;</pre><dl class="domintro"><dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var>... ] ] )</dt>
1.1 mike 24104:
1.446 mike 24105: <dd>
1.1 mike 24106:
1.446 mike 24107: <p>Schedules a timeout to run <var title="">handler</var> after
24108: <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>
1.1 mike 24109:
1.446 mike 24110: </dd>
1.204 mike 24111:
1.460 mike 24112: <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>
1.204 mike 24113:
1.446 mike 24114: <dd>
1.1 mike 24115:
1.446 mike 24116: <p>Schedules a timeout to compile and run <var title="">code</var>
24117: after <var title="">timeout</var> milliseconds.</p>
1.1 mike 24118:
1.446 mike 24119: </dd>
1.204 mike 24120:
1.458 mike 24121: <dt><var title="">window</var> . <code title="dom-windowtimers-clearTimeout" id="dom-windowtimers-cleartimeout"><a href="#dom-windowtimers-cleartimeout">clearTimeout</a></code>( <var title="">handle</var> )</dt>
1.204 mike 24122:
1.446 mike 24123: <dd>
1.204 mike 24124:
1.446 mike 24125: <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>
1.204 mike 24126:
1.446 mike 24127: </dd>
1.204 mike 24128:
1.474 mike 24129: <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>
1.204 mike 24130:
1.446 mike 24131: <dd>
1.204 mike 24132:
1.446 mike 24133: <p>Schedules a timeout to run <var title="">handler</var> every
24134: <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>
1.204 mike 24135:
1.446 mike 24136: </dd>
1.204 mike 24137:
1.460 mike 24138: <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>
1.204 mike 24139:
1.446 mike 24140: <dd>
1.204 mike 24141:
1.446 mike 24142: <p>Schedules a timeout to compile and run <var title="">code</var>
24143: every <var title="">timeout</var> milliseconds.</p>
1.204 mike 24144:
1.446 mike 24145: </dd>
1.204 mike 24146:
1.458 mike 24147: <dt><var title="">window</var> . <code title="dom-windowtimers-clearInterval" id="dom-windowtimers-clearinterval"><a href="#dom-windowtimers-clearinterval">clearInterval</a></code>( <var title="">handle</var> )</dt>
1.204 mike 24148:
1.446 mike 24149: <dd>
1.204 mike 24150:
1.446 mike 24151: <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>
1.204 mike 24152:
1.446 mike 24153: </dd>
1.204 mike 24154:
1.474 mike 24155: </dl><p class="note">This API does not guarantee that timers will run
1.446 mike 24156: exactly on schedule. Delays due to CPU load, other tasks, etc, are
1.562 mike 24157: to be expected.</p><h3 id="user-prompts"><span class="secno">6.4 </span>User prompts</h3><h4 id="simple-dialogs"><span class="secno">6.4.1 </span>Simple dialogs</h4><dl class="domintro"><dt><var title="">window</var> . <code title="dom-alert" id="dom-alert"><a href="#dom-alert">alert</a></code>(<var title="">message</var>)</dt>
24158: <dd>
24159:
24160: <p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p>
24161:
24162: <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
24163: method is implied when this method is invoked.</p>
24164:
24165: </dd>
24166:
24167: <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-confirm" id="dom-confirm"><a href="#dom-confirm">confirm</a></code>(<var title="">message</var>)</dt>
24168: <dd>
24169:
24170: <p>Displays a modal OK/Cancel prompt with the given message, waits
24171: for the user to dismiss it, and returns true if the user clicks OK
24172: and false if the user clicks Cancel.</p>
24173:
24174: <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
24175: method is implied when this method is invoked.</p>
24176:
24177: </dd>
24178:
24179: <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-prompt" id="dom-prompt"><a href="#dom-prompt">prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt>
24180: <dd>
24181:
24182: <p>Displays a modal text field prompt with the given message,
24183: waits for the user to dismiss it, and returns the value that the
24184: user entered. If the user cancels the prompt, then returns null
24185: instead. If the second argument is present, then the given value
24186: is used as a default.</p>
24187:
24188: <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
24189: method is implied when this method is invoked.</p>
24190:
24191: </dd>
24192:
24193: </dl><h4 id="printing"><span class="secno">6.4.2 </span>Printing</h4><dl class="domintro"><dt><var title="">window</var> . <code title="dom-print" id="dom-print"><a href="#dom-print">print</a></code>()</dt>
24194:
24195: <dd>
24196:
24197: <p>Prompts the user to print the page.</p>
24198:
24199: <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
24200: method is implied when this method is invoked.</p>
24201:
24202: </dd>
24203:
24204: </dl><h4 id="dialogs-implemented-using-separate-documents"><span class="secno">6.4.3 </span>Dialogs implemented using separate documents</h4><dl class="domintro"><dt><var title="">result</var> = <var title="">window</var> . <code title="dom-showModalDialog" id="dom-showmodaldialog"><a href="#dom-showmodaldialog">showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt>
24205:
24206: <dd>
24207:
24208: <p>Prompts the user with the given page, waits for that page to
24209: close, and returns the return value.</p>
24210:
24211: <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
24212: method is implied when this method is invoked.</p>
24213:
24214: </dd>
24215:
24216: </dl><pre class="idl">[NoInterfaceObject] interface <dfn id="windowmodal" role="button" tabindex="0" aria-haspopup="true">WindowModal</dfn> {
24217: readonly attribute any <a href="#dom-windowmodal-dialogarguments" title="dom-WindowModal-dialogArguments">dialogArguments</a>;
24218: attribute DOMString <a href="#dom-windowmodal-returnvalue" title="dom-WindowModal-returnValue">returnValue</a>;
24219: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-WindowModal-dialogArguments" id="dom-windowmodal-dialogarguments"><a href="#dom-windowmodal-dialogarguments">dialogArguments</a></code></dt>
24220:
24221: <dd>
24222:
24223: <p>Returns the <var title="">argument</var> argument that was
24224: passed to the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method.</p>
24225:
24226: </dd>
24227:
24228: <dt><var title="">window</var> . <code title="dom-WindowModal-returnValue" id="dom-windowmodal-returnvalue"><a href="#dom-windowmodal-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt>
24229:
24230: <dd>
24231:
24232: <p>Returns the current return value for the window.</p>
24233:
24234: <p>Can be set, to change the value that will be returned by the
24235: <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code>
24236: method.</p>
24237:
24238: </dd>
24239:
24240: </dl><p class="note">The <code title="dom-window-close"><a href="#dom-window-close">window.close()</a></code> method can be used to
24241: close the browsing context.</p><h3 id="system-state-and-capabilities"><span class="secno">6.5 </span>System state and capabilities</h3><h4 id="the-navigator-object"><span class="secno">6.5.1 </span>The <code><a href="#navigator">Navigator</a></code> object</h4><pre class="idl">interface <dfn id="navigator" role="button" tabindex="0" aria-haspopup="true">Navigator</dfn> {
24242: // objects implementing this interface also implement the interfaces given below
24243: };
24244: <a href="#navigator">Navigator</a> implements <a href="#navigatorid">NavigatorID</a>;
24245: <a href="#navigator">Navigator</a> implements <a href="#navigatoronline">NavigatorOnLine</a>;
24246: <a href="#navigator">Navigator</a> implements <a href="#navigatorcontentutils">NavigatorContentUtils</a>;
24247: <a href="#navigator">Navigator</a> implements <a href="#navigatorstorageutils">NavigatorStorageUtils</a>;</pre><h5 id="client-identification"><span class="secno">6.5.1.1 </span>Client identification</h5><pre class="idl">[NoInterfaceObject]
24248: interface <dfn id="navigatorid" role="button" tabindex="0" aria-haspopup="true">NavigatorID</dfn> { readonly attribute DOMString <a href="#dom-navigator-appname" title="dom-navigator-appName">appName</a>;
24249: readonly attribute DOMString <a href="#dom-navigator-appversion" title="dom-navigator-appVersion">appVersion</a>;
24250: readonly attribute DOMString <a href="#dom-navigator-platform" title="dom-navigator-platform">platform</a>;
24251: readonly attribute DOMString <a href="#dom-navigator-useragent" title="dom-navigator-userAgent">userAgent</a>;
24252: };</pre><p>In certain cases, despite the best efforts of the entire
24253: industry, Web browsers have bugs and limitations that Web authors
24254: are forced to work around.</p><p>This section defines a collection of attributes that can be used
24255: to determine, from script, the kind of user agent in use, in order
24256: to work around these issues.</p><p>Client detection should always be limited to detecting known
24257: current versions; future versions and unknown versions should always
24258: be assumed to be fully compliant.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appName" id="dom-navigator-appname"><a href="#dom-navigator-appname">appName</a></code></dt>
24259: <dd>
24260: <p>Returns the name of the browser.</p>
24261: </dd>
24262:
24263: <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appVersion" id="dom-navigator-appversion"><a href="#dom-navigator-appversion">appVersion</a></code></dt>
24264: <dd>
24265: <p>Returns the version of the browser.</p>
24266: </dd>
24267:
24268: <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-platform" id="dom-navigator-platform"><a href="#dom-navigator-platform">platform</a></code></dt>
24269: <dd>
24270: <p>Returns the name of the platform.</p>
24271: </dd>
24272:
24273: <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-userAgent" id="dom-navigator-useragent"><a href="#dom-navigator-useragent">userAgent</a></code></dt>
24274: <dd>
24275: <p>Returns the complete User-Agent header.</p>
24276: </dd>
24277:
24278: </dl><h5 id="custom-handlers"><span class="secno">6.5.1.2 </span>Custom scheme and content handlers</h5><pre class="idl">[NoInterfaceObject]
24279: interface <dfn id="navigatorcontentutils" role="button" tabindex="0" aria-haspopup="true">NavigatorContentUtils</dfn> {
24280: // content handler registration
24281: void <a href="#dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler">registerProtocolHandler</a>(DOMString scheme, DOMString url, DOMString title);
24282: void <a href="#dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler">registerContentHandler</a>(DOMString mimeType, DOMString url, DOMString title);
1.573 mike 24283: DOMString <a href="#dom-navigator-isprotocolhandlerregistered" title="dom-navigator-isProtocolHandlerRegistered">isProtocolHandlerRegistered</a>(DOMString scheme, DOMString url);
24284: DOMString <a href="#dom-navigator-iscontenthandlerregistered" title="dom-navigator-isContentHandlerRegistered">isContentHandlerRegistered</a>(DOMString mimeType, DOMString url);
24285: void <a href="#dom-navigator-unregisterprotocolhandler" title="dom-navigator-unregisterProtocolHandler">unregisterProtocolHandler</a>(DOMString scheme, DOMString url);
24286: void <a href="#dom-navigator-unregistercontenthandler" title="dom-navigator-unregisterContentHandler">unregisterContentHandler</a>(DOMString mimeType, DOMString url);
1.562 mike 24287: };</pre><p>The <dfn id="dom-navigator-registerprotocolhandler" role="button" tabindex="0" aria-haspopup="true"><code>registerProtocolHandler()</code></dfn>
24288: method allows Web sites to register themselves as possible handlers
24289: for particular schemes. For example, an online telephone messaging
24290: service could register itself as a handler of the <code>sms:</code>
24291: scheme (<a href="#refsRFC5724">[RFC5724]</a>), so that if the user
24292: clicks on such a link, he is given the opportunity to use that Web
24293: site. Analogously, the <dfn id="dom-navigator-registercontenthandler" role="button" tabindex="0" aria-haspopup="true"><code>registerContentHandler()</code></dfn>
24294: method allows Web sites to register themselves as possible handlers
24295: for content in a particular <a href="#mime-type">MIME type</a>. For example, the
24296: same online telephone messaging service could register itself as a
24297: handler for <code>text/directory</code> files (<a href="#refsRFC2425">[RFC2425]</a>), so that if the user has no
24298: native application capable of handling vCards (<a href="#refsRFC2426">[RFC2426]</a>), his Web browser can instead
24299: suggest he use that site to view contact information stored on
24300: vCards that he opens.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerProtocolHandler"><a href="#dom-navigator-registerprotocolhandler">registerProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>, <var title="">title</var>)</dt>
24301: <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>
24302:
24303: <dd>
24304:
24305: <p>Registers a handler for the given scheme or content type, at
24306: the given URL, with the given title.</p>
24307:
24308: <p>The string "<code title="">%s</code>" in the URL is used as a
24309: placeholder for where to put the URL of the content to be
24310: handled.</p>
24311:
1.612 mike 24312: <p>Throws a <code><a href="#securityerror">SecurityError</a></code> exception if the user agent
1.562 mike 24313: blocks the registration (this might happen if trying to register
24314: as a handler for "http", for instance).</p>
24315:
1.612 mike 24316: <p>Throws a <code><a href="#syntaxerror">SyntaxError</a></code> if the "<code title="">%s</code>" string is missing in the URL.</p>
1.562 mike 24317:
24318: </dd>
24319:
1.573 mike 24320: </dl><p>In addition to the registration methods, there are also methods
24321: for determining if particular handlers have been registered, and for
24322: unregistering handlers.</p><dl class="domintro"><dt><var title="">state</var> = <var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-isProtocolHandlerRegistered" id="dom-navigator-isprotocolhandlerregistered"><a href="#dom-navigator-isprotocolhandlerregistered">isProtocolHandlerRegistered</a></code>(<var title="">scheme</var>, <var title="">url</var>)</dt>
24323: <dt><var title="">state</var> = <var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-isContentHandlerRegistered" id="dom-navigator-iscontenthandlerregistered"><a href="#dom-navigator-iscontenthandlerregistered">isContentHandlerRegistered</a></code>(<var title="">mimeType</var>, <var title="">url</var>)</dt>
24324:
24325: <dd>
24326:
24327: <p>Returns one of the following strings describing the state of
24328: the handler given by the arguments:</p>
24329:
24330: <dl><dt><code title="">new</code>
24331: </dt><dd>Indicates that no attempt has been made to register the given
24332: handler (or that the handler has been unregistered). It would be
24333: appropriate to promote the availability of the handler or to just
24334: automatically register the handler.
24335:
24336: </dd><dt><code title="">registered</code>
24337: </dt><dd>Indicates that the given handler has been registered or that
24338: the site is blocked from registering the handler. Trying to
24339: register the handler again would have no effect.
24340:
24341: </dd><dt><code title="">declined</code>
24342: </dt><dd>Indicates that the given handler has been offered but was
24343: rejected. Trying to register the handler again may prompt the
24344: user again.
24345:
24346: </dd></dl></dd>
24347:
24348: <dt><var title="">state</var> = <var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-unregisterProtocolHandler" id="dom-navigator-unregisterprotocolhandler"><a href="#dom-navigator-unregisterprotocolhandler">unregisterProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>)</dt>
24349: <dt><var title="">state</var> = <var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-unregisterContentHandler" id="dom-navigator-unregistercontenthandler"><a href="#dom-navigator-unregistercontenthandler">unregisterContentHandler</a></code>(<var title="">mimeType</var>, <var title="">url</var>)</dt>
24350:
24351: <dd>
24352:
24353: <p>Unregisters the handler given by the arguments.</p>
24354:
24355: </dd>
24356:
1.562 mike 24357: </dl><h5 id="manually-releasing-the-storage-mutex"><span class="secno">6.5.1.5 </span>Manually releasing the storage mutex</h5><pre class="idl">[NoInterfaceObject]
24358: interface <dfn id="navigatorstorageutils" role="button" tabindex="0" aria-haspopup="true">NavigatorStorageUtils</dfn> {
24359: void <a href="#dom-navigator-yieldforstorageupdates" title="dom-navigator-yieldForStorageUpdates">yieldForStorageUpdates</a>();
24360: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-yieldForStorageUpdates" id="dom-navigator-yieldforstorageupdates"><a href="#dom-navigator-yieldforstorageupdates">yieldForStorageUpdates</a></code>()</dt>
24361:
24362: <dd>
24363:
24364: <p>If a script uses the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> API, or the
24365: <code title="dom-localStorage">localStorage</code> API, the
24366: browser will block other scripts from accessing cookies or storage
24367: until the first script finishes.
24368:
24369: <a href="#refsWEBSTORAGE">[WEBSTORAGE]</a>
24370:
24371: </p>
24372:
24373: <p>Calling the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
24374: method tells the user agent to unblock any other scripts that may
24375: be blocked, even though the script hasn't returned.</p>
24376:
24377: <p>Values of cookies and items in the <code>Storage</code> objects
24378: of <code title="dom-localStorage">localStorage</code> attributes
24379: can change after calling this method, whence its name.
24380:
24381: <a href="#refsWEBSTORAGE">[WEBSTORAGE]</a>
24382:
24383: </p>
24384:
24385: </dd>
24386:
24387: </dl><h4 id="the-external-interface"><span class="secno">6.5.2 </span>The <code><a href="#external">External</a></code> interface</h4>
24388: <p>The <dfn id="dom-external" role="button" tabindex="0" aria-haspopup="true"><code>external</code></dfn>
24389: attribute of the <code><a href="#window">Window</a></code> interface must return an
24390: instance of the <code><a href="#external">External</a></code> interface. The same object
24391: must be returned each time.</p>
24392: <pre class="idl">interface <dfn id="external" role="button" tabindex="0" aria-haspopup="true">External</dfn> {
24393: void <a href="#dom-external-addsearchprovider" title="dom-external-AddSearchProvider">AddSearchProvider</a>(DOMString engineURL);
24394: unsigned long <a href="#dom-external-issearchproviderinstalled" title="dom-external-IsSearchProviderInstalled">IsSearchProviderInstalled</a>(DOMString engineURL);
24395: };</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-external"><a href="#dom-external">external</a></code> . <code title="dom-external-AddSearchProvider" id="dom-external-addsearchprovider"><a href="#dom-external-addsearchprovider">AddSearchProvider</a></code>( <var title="">url</var> )</dt>
24396: <dd>
24397:
24398: <p>Adds the search engine described by the OpenSearch description
24399: document at <var title="">url</var>. <a href="#refsOPENSEARCH">[OPENSEARCH]</a></p>
24400:
24401: <p>The OpenSearch description document has to be on the same
24402: server as the script that calls this method.</p>
24403:
24404: </dd>
24405:
24406: <dt><var title="">installed</var> = <var title="">window</var> . <code title="dom-external"><a href="#dom-external">external</a></code> . <code title="dom-external-IsSearchProviderInstalled" id="dom-external-issearchproviderinstalled"><a href="#dom-external-issearchproviderinstalled">IsSearchProviderInstalled</a></code>( <var title="">url</var> )</dt>
24407: <dd>
24408:
24409: <p>Returns a value based on comparing <var title="">url</var> to
24410: the URLs of the results pages of the installed search engines.</p>
24411:
24412: <dl><dt>0 </dt><dd>None of the installed search engines match <var title="">url</var>.
24413: </dd><dt>1 </dt><dd>One or more installed search engines match <var title="">url</var>, but none are the user's default search engine.
24414: </dd><dt>2 </dt><dd>The user's default search engine matches <var title="">url</var>.
24415: </dd></dl><p>The <var title="">url</var> is compared to the URLs of the
24416: results pages of the installed search engines using a prefix
24417: match. Only results pages on the same domain as the script that
24418: calls this method are checked.</p>
24419:
24420: </dd>
24421:
24422: </dl><p class="note">Another way of exposing search engines using
24423: OpenSearch description documents is using a <code><a href="#the-link-element">link</a></code>
24424: element with the <code title="rel-search"><a href="#link-type-search">search</a></code> link
24425: type.</p><h2 id="editing"><span class="secno">7 </span><dfn role="button" tabindex="0" aria-haspopup="true">User interaction</dfn></h2><h3 id="the-hidden-attribute"><span class="secno">7.1 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>hidden</code></dfn> attribute</h3><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
24426: attribute</a>. When specified on an element, it indicates that
24427: the element is not yet, or is no longer, relevant. <span class="impl">User agents should not render elements that have the
24428: <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute
24429: specified.</span></p><div class="example">
24430:
24431: <p>In the following skeletal example, the attribute is used to hide
24432: the Web game's main screen until the user logs in:</p>
24433:
24434: <pre> <h1>The Example Game</h1>
24435: <section id="login">
24436: <h2>Login</h2>
24437: <form>
24438: ...
24439: <!-- calls login() once the user's credentials have been checked -->
24440: </form>
24441: <script>
24442: function login() {
24443: // switch screens
24444: document.getElementById('login').hidden = true;
24445: document.getElementById('game').hidden = false;
24446: }
24447: </script>
24448: </section>
24449: <section id="game" hidden>
24450: ...
24451: </section></pre>
24452:
24453: </div><p>The <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute must not be
24454: used to hide content that could legitimately be shown in another
24455: 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,
24456: because the tabbed interface is merely a kind of overflow
24457: presentation — one could equally well just show all the form
24458: controls in one big page with a scrollbar. It is similarly incorrect
24459: to use this attribute to hide content just from one presentation
24460: — if something is marked <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code>, it is hidden from all
24461: presentations, including, for instance, screen readers.</p><p>Elements that are not <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code>
24462: should not link to or refer to elements that are <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code>.</p><div class="example">
24463:
24464: <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
24465: section marked with the <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code>
24466: attribute. If the content is not applicable or relevant, then there
24467: is no reason to link to it.</p>
24468:
24469: <p>It would similarly be incorrect to use the ARIA <code title="attr-aria-describedby">aria-describedby</code> attribute to
24470: refer to descriptions that are themselves <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code>. Hiding a section means that it
24471: is not applicable or relevant to anyone at the current time, so
24472: clearly it cannot be a valid description of content the user can
24473: interact with.</p>
24474:
24475: </div><p>Elements in a section hidden by the <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute are still active,
24476: e.g. scripts and form controls in such sections still execute
24477: and submit respectively. Only their presentation to the user
24478: changes.</p>
24479: <p>The <dfn id="dom-hidden" role="button" tabindex="0" aria-haspopup="true"><code>hidden</code></dfn> IDL
24480: attribute must <a href="#reflect">reflect</a> the content attribute of the
24481: same name.</p>
24482: <h3 id="activation"><span class="secno">7.2 </span>Activation</h3><dl class="domintro"><dt><var title="">element</var> . <code title="dom-click"><a href="#dom-click">click</a></code>()</dt>
24483:
24484: <dd>
24485:
24486: <p>Acts as if the element was clicked.</p>
24487:
24488: </dd>
24489:
24490: </dl><h3 id="focus"><span class="secno">7.3 </span>Focus</h3><h4 id="sequential-focus-navigation-and-the-tabindex-attribute"><span class="secno">7.3.1 </span>Sequential focus navigation and the <code title="attr-tabindex"><a href="#attr-tabindex">tabindex</a></code> attribute</h4><p>The <dfn id="attr-tabindex" role="button" tabindex="0" aria-haspopup="true"><code>tabindex</code></dfn>
24491: content attribute specifies whether the element is focusable,
24492: whether it can be reached using sequential focus navigation, and the
24493: relative order of the element for the purposes of sequential focus
24494: navigation. The name "tab index" comes from the common use of the
24495: "tab" key to navigate through the focusable elements. The term
24496: "tabbing" refers to moving forward through the focusable elements
24497: that can be reached using sequential focus navigation.</p><p>The <code title="attr-tabindex"><a href="#attr-tabindex">tabindex</a></code> attribute, if
24498: specified, must have a value that is a <a href="#valid-integer">valid
24499: integer</a>.</p>
24500: <p>The <dfn id="dom-tabindex" role="button" tabindex="0" aria-haspopup="true"><code>tabIndex</code></dfn> IDL
24501: attribute must <a href="#reflect">reflect</a> the value of the <code title="attr-tabindex"><a href="#attr-tabindex">tabindex</a></code> content attribute. Its default
24502: value is 0 for elements that are focusable and −1 for
24503: elements that are not focusable.</p>
24504: <h4 id="document-level-focus-apis"><span class="secno">7.3.3 </span>Document-level focus APIs</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-activeElement" id="dom-document-activeelement"><a href="#dom-document-activeelement">activeElement</a></code></dt>
24505:
24506: <dd>
24507:
24508: <p>Returns the currently focused element.</p>
24509:
24510: </dd>
24511:
24512: <dt><var title="">document</var> . <code title="dom-document-hasFocus" id="dom-document-hasfocus"><a href="#dom-document-hasfocus">hasFocus</a></code>()</dt>
24513:
24514: <dd>
24515:
24516: <p>Returns true if the document has focus; otherwise, returns false.</p>
24517:
24518: </dd>
24519:
24520: <dt><var title="">window</var> . <code title="dom-window-focus" id="dom-window-focus"><a href="#dom-window-focus">focus</a></code>()</dt>
24521:
24522: <dd>
24523:
24524: <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p>
24525:
24526: </dd>
24527:
24528: <dt><var title="">window</var> . <code title="dom-window-blur" id="dom-window-blur"><a href="#dom-window-blur">blur</a></code>()</dt>
24529:
24530: <dd>
24531:
24532: <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p>
24533:
24534: </dd>
24535:
24536: </dl><h4 id="element-level-focus-apis"><span class="secno">7.3.4 </span>Element-level focus APIs</h4><dl class="domintro"><dt><var title="">element</var> . <code title="dom-focus" id="dom-focus"><a href="#dom-focus">focus</a></code>()</dt>
24537:
24538: <dd>
24539:
24540: <p>Focuses the element.</p>
24541:
24542: </dd>
24543:
24544: <dt><var title="">element</var> . <code title="dom-blur" id="dom-blur"><a href="#dom-blur">blur</a></code>()</dt>
24545:
24546: <dd>
24547:
24548: <p>Unfocuses the element. Use of this method is discouraged. Focus
24549: another element instead.</p>
24550:
24551: <p>Do not use this method to hide the focus ring if you find the
24552: focus ring unsightly. Instead, use a CSS rule to override the
1.564 mike 24553: 'outline' property. (Be aware, however, that this makes the page
24554: significantly less usable for some people, especially those with
24555: reduced vision who use focus outlines to help them navigate the
24556: page.)</p>
1.562 mike 24557:
24558: <div class="example">
24559:
24560: <p>For example, to hide the outline from links, you could use:</p>
24561:
24562: <pre>:link:focus, :visited:focus { outline: none; }</pre>
24563:
24564: </div>
24565:
24566: </dd>
24567:
24568: </dl><h3 id="assigning-keyboard-shortcuts"><span class="secno">7.4 </span>Assigning keyboard shortcuts</h3><h4 id="introduction-6"><span class="secno">7.4.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>Each element that can be activated or focused can be assigned a
24569: single key combination to activate it, using the <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code> attribute.</p><p>The exact shortcut is determined by the user agent, based on
24570: information about the user's keyboard, what keyboard shortcuts
24571: already exist on the platform, and what other shortcuts have been
24572: specified on the page, using the information provided in the <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code> attribute as a guide.</p><p>In order to ensure that a relevant keyboard shortcut is available
24573: on a wide variety of input devices, the author can provide a number
24574: of alternatives in the <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code>
24575: attribute.</p><p>Each alternative consists of a single character, such as a letter
24576: or digit.</p><p>User agents can provide users with a list of the keyboard
24577: shortcuts, but authors are encouraged to do so also. The <code title="dom-accessKeyLabel"><a href="#dom-accesskeylabel">accessKeyLabel</a></code> IDL attribute
24578: returns a string representing the actual key combination assigned by
24579: the user agent.</p><h4 id="the-accesskey-attribute"><span class="secno">7.4.2 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>accesskey</code></dfn> attribute</h4><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
24580: <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code> attribute's value is
24581: used by the user agent as a guide for creating a keyboard shortcut
24582: that activates or focuses the element.</p><p>If specified, the value must be an <a href="#ordered-set-of-unique-space-separated-tokens">ordered set of unique
24583: space-separated tokens</a> that are <a href="#case-sensitive">case-sensitive</a>,
24584: each of which must be exactly one Unicode code point in length.</p><div class="example">
24585:
24586: <p>In the following example, a variety of links are given with
24587: access keys so that keyboard users familiar with the site can
24588: more quickly navigate to the relevant pages:</p>
24589:
24590: <pre><nav>
24591: <p>
24592: <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
24593: <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
24594: <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
24595: <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
24596: <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
24597: </p>
24598: </nav></pre>
24599:
24600: </div><div class="example">
24601:
24602: <p>In the following example, the search field is given two possible
24603: access keys, "s" and "0" (in that order). A user agent on a device
24604: with a full keyboard might pick
24605: <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the
24606: shortcut key, while a user agent on a small device with just a
24607: numeric keypad might pick just the plain unadorned key
24608: <kbd><kbd>0</kbd></kbd>:</p>
24609:
24610: <pre><form action="/search">
24611: <label>Search: <input type="search" name="q" accesskey="s 0"></label>
24612: <input type="submit">
24613: </form></pre>
24614:
24615: </div><div class="example">
24616:
24617: <p>In the following example, a button has possible access keys
24618: described. A script then tries to update the button's label to
24619: advertise the key combination the user agent selected.</p>
24620:
24621: <pre><input type=submit accesskey="N @ 1" value="Compose">
24622: ...
24623: <script>
24624: function labelButton(button) {
24625: if (button.accessKeyLabel)
24626: button.value += ' (' + button.accessKeyLabel + ')';
24627: }
24628: var inputs = document.getElementsByTagName('input');
24629: for (var i = 0; i < inputs.length; i += 1) {
24630: if (inputs[i].type == "submit")
24631: labelButton(inputs[i]);
24632: }
24633: </script></pre>
24634:
24635: <p>On one user agent, the button's label might become
24636: "<samp>Compose (⌘N)</samp>". On another, it might become
24637: "<samp>Compose (Alt+⇧+1)</samp>". If the user agent doesn't
24638: assign a key, it will be just "<samp>Compose</samp>". The exact
24639: string depends on what the <a href="#assigned-access-key">assigned access key</a> is, and
24640: on how the user agent represents that key combination.</p>
24641:
24642: </div>
24643: <p>The <dfn id="dom-accesskey" role="button" tabindex="0" aria-haspopup="true"><code>accessKey</code></dfn> IDL
24644: attribute must <a href="#reflect">reflect</a> the <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code> content attribute.</p>
1.575 mike 24645: <h3 id="editing-0"><span class="secno">7.5 </span>Editing</h3><h4 id="contenteditable"><span class="secno">7.5.1 </span>Making document regions editable: The <code title="attr-contenteditable"><a href="#attr-contenteditable">contenteditable</a></code> content
24646: attribute</h4><p>The <dfn id="attr-contenteditable" role="button" tabindex="0" aria-haspopup="true"><code>contenteditable</code></dfn>
1.562 mike 24647: attribute is an <a href="#enumerated-attribute">enumerated attribute</a> whose keywords are
24648: 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
24649: addition, there is a third state, the <i>inherit</i> state, which is
24650: the <i>missing value default</i> (and the <i>invalid value
24651: default</i>).</p><p>The <i>true</i> state indicates that the element is editable. The
24652: <i>inherit</i> state indicates that the element is editable if its
24653: parent is. The <i>false</i> state indicates that the element is not
24654: editable.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-contentEditable" id="dom-contenteditable"><a href="#dom-contenteditable">contentEditable</a></code> [ = <var title="">value</var> ]</dt>
24655:
24656: <dd>
24657:
24658: <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">inherit</code>", based
24659: on the state of the <code title="attr-contenteditable"><a href="#attr-contenteditable">contenteditable</a></code> attribute.</p>
24660:
24661: <p>Can be set, to change that state.</p>
24662:
1.612 mike 24663: <p>Throws a <code><a href="#syntaxerror">SyntaxError</a></code> exception if the new value
1.562 mike 24664: isn't one of those strings.</p>
24665:
24666: </dd>
24667:
24668: <dt><var title="">element</var> . <code title="dom-isContentEditable" id="dom-iscontenteditable"><a href="#dom-iscontenteditable">isContentEditable</a></code></dt>
24669:
24670: <dd>
24671:
24672: <p>Returns true if the element is editable; otherwise, returns false.</p>
24673:
24674: </dd>
24675:
1.575 mike 24676: </dl><h4 id="making-entire-documents-editable:-the-designmode-idl-attribute"><span class="secno">7.5.2 </span>Making entire documents editable: The <code title="dom-document-designMode"><a href="#designMode">designMode</a></code> IDL attribute</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-designMode" id="dom-document-designmode"><a href="#designMode">designMode</a></code> [ = <var title="">value</var> ]</dt>
1.562 mike 24677:
24678: <dd>
24679:
24680: <p>Returns "<code title="">on</code>" if the document is editable,
24681: and "<code title="">off</code>" if it isn't.</p>
24682:
24683: <p>Can be set, to change the document's current state.</p>
24684:
24685: </dd>
24686:
1.598 mike 24687: </dl><h4 id="best-practices-for-in-page-editors"><span class="secno">7.5.3 </span>Best practices for in-page editors</h4><p>Authors are encouraged to set the 'white-space' property on <a href="#editing-host" title="editing host">editing hosts</a> and on markup that was
24688: originally created through these editing mechanisms to the value
24689: 'pre-wrap'. Default HTML whitespace handling is not well suited to
24690: WYSIWYG editing, and line wrapping will not work correctly in some
24691: corner cases if 'white-space' is left at its default value.</p><div class="example">
24692:
24693: <p>As an example of problems that occur if the default 'normal'
24694: value is used instead, consider the case of the user typing
24695: "<kbd>yellow␣␣ball</kbd>", with two spaces (here
24696: represented by "␣") between the words. With the editing
24697: rules in place for the default value of 'white-space' ('normal'),
24698: the resulting markup will either consist of
24699: "<samp>yellow&nbsp; ball</samp>" or
24700: "<samp>yellow &nbsp;ball</samp>"; i.e., there will be a
24701: non-breaking space between the two words in addition to the regular
24702: space. This is necessary because the 'normal' value for
24703: 'white-space' requires adjacent regular spaces to be collapsed
24704: together.</p>
24705:
24706: <p>In the former case, "<samp>yellow⍽</samp>" might wrap to
24707: the next line ("⍽" being used here to represent a
24708: non-breaking space) even though "<samp>yellow</samp>" alone might
24709: fit at the end of the line; in the latter case,
24710: "<samp>⍽ball</samp>", if wrapped to the start of the line,
24711: would have visible indentation from the non-breaking space.</p>
24712:
24713: <p>When 'white-space' is set to 'pre-wrap', however, the editing
24714: rules will instead simply put two regular spaces between the words,
24715: and should the two words be split at the end of a line, the spaces
24716: would be neatly removed from the rendering.</p>
24717:
1.612 mike 24718: </div><h4 id="editing-apis"><span class="secno">7.5.4 </span>Editing APIs</h4><p>The definition of the terms <dfn id="active-range" role="button" tabindex="0" aria-haspopup="true">active range</dfn>, <dfn id="editing-host" role="button" tabindex="0" aria-haspopup="true">editing
1.575 mike 24719: host</dfn>, and <dfn id="editable" role="button" tabindex="0" aria-haspopup="true">editable</dfn>, the user interface requirements
24720: of elements that are <a href="#editing-host" title="editing host">editing hosts</a>
24721: or <a href="#editable">editable</a>, and the
24722:
24723: <dfn id="execCommand" role="button" tabindex="0" aria-haspopup="true"><code>execCommand()</code></dfn>,
24724: <dfn id="dom-document-querycommandenabled" role="button" tabindex="0" aria-haspopup="true"><code>queryCommandEnabled()</code></dfn>,
24725: <dfn id="dom-document-querycommandindeterm" role="button" tabindex="0" aria-haspopup="true"><code>queryCommandIndeterm()</code></dfn>,
24726: <dfn id="dom-document-querycommandstate" role="button" tabindex="0" aria-haspopup="true"><code>queryCommandState()</code></dfn>,
24727: <dfn id="dom-document-querycommandsupported" role="button" tabindex="0" aria-haspopup="true"><code>queryCommandSupported()</code></dfn>, and
24728: <dfn id="dom-document-querycommandvalue" role="button" tabindex="0" aria-haspopup="true"><code>queryCommandValue()</code></dfn>
24729:
24730: methods are defined in the HTML Editing APIs specification. Text
24731: selections are defined in the DOM Range specification. The
24732: interaction of editing and the undo/redo features in user agents is
1.602 mike 24733: defined by the UndoManager and DOM Transaction specification. <a href="#refsEDITING">[EDITING]</a> <a href="#refsDOMRANGE">[DOMRANGE]</a> <a href="#refsUNDO">[UNDO]</a></p><p class="XXX"><dfn id="undo-transaction-history" role="button" tabindex="0" aria-haspopup="true">undo transaction history</dfn> is currently
1.575 mike 24734: defined in <a href="#refsUNDO">[UNDO]</a> but this spec hasn't been
1.612 mike 24735: updated to make sense with the new definition</p><h4 id="spelling-and-grammar-checking"><span class="secno">7.5.5 </span>Spelling and grammar checking</h4><p>The <dfn id="attr-spellcheck" role="button" tabindex="0" aria-haspopup="true"><code>spellcheck</code></dfn>
1.562 mike 24736: attribute is an <a href="#enumerated-attribute">enumerated attribute</a> whose keywords are
24737: 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
24738: addition, there is a third state, the <i>default</i> state, which is
24739: the <i>missing value default</i> (and the <i>invalid value
1.581 mike 24740: default</i>).</p><p class="note">The <i>true</i> state indicates that the element is
24741: to have its spelling and grammar checked. The <i>default</i> state
24742: indicates that the element is to act according to a default
24743: behavior, possibly based on the parent element's own <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> state, as defined below.
24744: The <i>false</i> state indicates that the element is not to be
24745: checked.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-spellcheck" id="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code> [ = <var title="">value</var> ]</dt>
1.562 mike 24746:
24747: <dd>
24748:
24749: <p>Returns true if the element is to have its spelling and grammar
24750: checked; otherwise, returns false.</p>
24751:
24752: <p>Can be set, to override the default and set the <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute.</p>
24753:
24754: </dd>
24755:
24756: </dl><p class="note">This specification does not define the user
24757: interface for spelling and grammar checkers. A user agent could
24758: offer on-demand checking, could perform continuous checking while
1.575 mike 24759: the checking is enabled, or could use other interfaces.</p><h3 id="dnd"><span class="secno">7.6 </span><dfn role="button" tabindex="0" aria-haspopup="true">Drag and drop</dfn></h3><p>This section defines an event-based drag-and-drop mechanism.</p><p>This specification does not define exactly what a
1.562 mike 24760: <em>drag-and-drop operation</em> actually is.</p><p>On a visual medium with a pointing device, a drag operation could
24761: be the default action of a <code title="event-mousedown">mousedown</code> event that is followed by a
24762: series of <code title="event-mousemove">mousemove</code> events, and
24763: the drop could be triggered by the mouse being released.</p><p>When using an input modality other than a pointing device, users
24764: would probably have to explicitly indicate their intention to
24765: perform a drag-and-drop operation, stating what they wish to drag
1.575 mike 24766: and where they wish to drop it, respectively.</p><h4 id="introduction-7"><span class="secno">7.6.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>To make an element draggable is simple: give the element a <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute, and set an event
1.562 mike 24767: listener for <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> that
24768: stores the data being dragged.</p><p>The event handler typically needs to check that it's not a text
24769: selection that is being dragged, and then needs to store data into
24770: the <code><a href="#datatransfer">DataTransfer</a></code> object and set the allowed effects
24771: (copy, move, link, or some combination).</p><p>For example:</p><pre><p>What fruits do you like?</p>
24772: <ol ondragstart="dragStartHandler(event)">
24773: <li draggable="true" data-value="fruit-apple">Apples</li>
24774: <li draggable="true" data-value="fruit-orange">Oranges</li>
24775: <li draggable="true" data-value="fruit-pear">Pears</li>
24776: </ol>
24777: <script>
24778: var internalDNDType = 'text/x-example'; // set this to something specific to your site
24779: function dragStartHandler(event) {
24780: if (event.target instanceof HTMLLIElement) {
24781: // use the element's data-value="" attribute as the value to be moving:
24782: event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
24783: event.dataTransfer.effectAllowed = 'move'; // only allow moves
24784: } else {
24785: event.preventDefault(); // don't allow selection to be dragged
24786: }
24787: }
24788: </script></pre><hr><p>To accept a drop, the drop target has to have a <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code> attribute and listen to the
24789: <code title="drop-event">drop</code> event.</p><p>The value of the <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code>
24790: attribute specifies what kind of data to accept (e.g. "<code title="">s:text/plain</code>" to accept any text strings, or
24791: "<code>f:image/png</code>" to accept a PNG image file) and what kind
24792: of feedback to give (e.g. "<code>move</code>" to indicate that the
24793: data will be moved).</p><p class="note">Instead of using the <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code> attribute, a drop target can
24794: handle the <code title="event-dragenter"><a href="#event-dragenter">dragenter</a></code> event (to
24795: report whether or not the drop target is to accept the drop) and the
24796: <code title="event-dragover"><a href="#event-dragover">dragover</a></code> event (to specify what
24797: feedback is to be shown to the user).</p><p>The <code title="event-drop"><a href="#event-drop">drop</a></code> event allows the actual
24798: drop to be performed. This event needs to be canceled, so that the
24799: <code title="dom-DataTransfer-DropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code>
24800: attribute's value can be used by the source (otherwise it's
24801: reset).</p><p>For example:</p><pre><p>Drop your favorite fruits below:</p>
24802: <ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
24803: <-- don't forget to change the "text/x-example" type to something
24804: specific to your site -->
24805: </ol>
24806: <script>
24807: var internalDNDType = 'text/x-example'; // set this to something specific to your site
24808: function dropHandler(event) {
24809: var li = document.createElement('li');
24810: var data = event.dataTransfer.getData(internalDNDType);
24811: if (data == 'fruit-apple') {
24812: li.textContent = 'Apples';
24813: } else if (data == 'fruit-orange') {
24814: li.textContent = 'Oranges';
24815: } else if (data == 'fruit-pear') {
24816: li.textContent = 'Pears';
24817: } else {
24818: li.textContent = 'Unknown Fruit';
24819: }
24820: event.target.appendChild(li);
24821: }
24822: </script></pre><hr><p>To remove the original element (the one that was dragged) from
24823: the display, the <code title="event-dragend"><a href="#event-dragend">dragend</a></code> event
24824: can be used.</p><p>For our example here, that means updating the original markup to
24825: handle that event:</p><pre><p>What fruits do you like?</p>
24826: <ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
24827: <em>...as before...</em>
24828: </ol>
24829: <script>
24830: function dragStartHandler(event) {
24831: // <em>...as before...</em>
24832: }
24833: function dragEndHandler(event) {
24834: // remove the dragged element
24835: event.target.parentNode.removeChild(event.target);
24836: }
1.575 mike 24837: </script></pre><h4 id="the-drag-data-store"><span class="secno">7.6.2 </span>The drag data store</h4><p>The data that underlies a drag-and-drop operation, known as the
1.562 mike 24838: <dfn id="drag-data-store" role="button" tabindex="0" aria-haspopup="true">drag data store</dfn>, consists of the following information:</p><ul><li><p>A <dfn id="drag-data-store-item-list" role="button" tabindex="0" aria-haspopup="true">drag data store item list</dfn>, which is a list of
24839: items representing the dragged data, each consisting of the
24840: following information:</p>
24841:
24842: <dl><dt><dfn id="the-drag-data-item-kind" role="button" tabindex="0" aria-haspopup="true">The drag data item kind</dfn></dt>
24843:
24844: <dd>
24845:
24846: <p>The kind of data:</p>
24847:
24848: <dl><dt><i>Plain Unicode string</i></dt>
24849: <dd>
24850: <p>Text.</p>
24851: </dd>
24852:
24853:
1.608 mike 24854: <dt><i title="">File</i></dt>
1.562 mike 24855: <dd>
24856: <p>Binary data with a file name.</p>
24857: </dd>
24858:
24859:
24860: </dl></dd>
24861:
24862: <dt><dfn id="the-drag-data-item-type-string" role="button" tabindex="0" aria-haspopup="true">The drag data item type string</dfn></dt>
24863:
24864: <dd>
24865:
24866: <p>A Unicode string giving the type or format of the data,
24867: generally given by a <a href="#mime-type">MIME type</a>. Some values that
24868: are not <a href="#mime-type" title="MIME type">MIME types</a> are
24869: special-cased for legacy reasons. The API does not enforce the
24870: use of <a href="#mime-type" title="MIME type">MIME types</a>; other values
24871: can be used as well. In all cases, however, the values are all
24872: <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a> by the API.</p>
24873:
24874: <p class="note">Strings that contain <a href="#space-character" title="space
24875: character">space characters</a> cannot be used with the <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code> attribute, so authors are
24876: encouraged to use only <a href="#mime-type" title="MIME type">MIME types</a>
24877: or custom strings (without spaces).</p>
24878:
24879: <p>There is a limit of one <i>Plain Unicode string</i> item per
24880: <a href="#the-drag-data-item-type-string" title="The drag data item type string">item type
24881: string</a>.</p>
24882: </dd>
24883:
24884: <dt>The actual data</dt>
24885:
24886: <dd><p>A Unicode or binary string, in some cases with a file name
24887: (itself a Unicode string), as
24888: per <a href="#the-drag-data-item-kind">the drag data item kind</a>.</p></dd>
24889:
24890: </dl><p>The <a href="#drag-data-store-item-list">drag data store item list</a> is ordered in the
24891: order that the items were added to the list; most recently added
24892: last.</p>
24893:
24894: </li>
24895:
24896: <li>
24897:
24898: <p>The following information, used to generate the UI feedback
24899: during the drag:</p>
24900:
24901: <ul><li>User-agent-defined default feedback information, known as the
24902: <dfn id="drag-data-store-default-feedback" role="button" tabindex="0" aria-haspopup="true">drag data store default feedback</dfn>.</li>
24903:
24904: <li>A list of zero or more elements known as the <dfn id="drag-data-store-elements-list" role="button" tabindex="0" aria-haspopup="true">drag data
24905: store elements list</dfn>.</li>
24906:
24907: <li>Optionally, a bitmap image and the coordinate of a point
24908: within that image, known as the <dfn id="drag-data-store-bitmap" role="button" tabindex="0" aria-haspopup="true">drag data store bitmap</dfn>
24909: and <dfn id="drag-data-store-hot-spot-coordinate" role="button" tabindex="0" aria-haspopup="true">drag data store hot spot coordinate</dfn>.</li>
24910:
24911: </ul></li>
24912:
24913: <li>
24914:
24915: <p>A <dfn id="drag-data-store-mode" role="button" tabindex="0" aria-haspopup="true">drag data store mode</dfn>, which is one of the
24916: following:</p>
24917:
24918: <dl><dt><dfn id="concept-dnd-rw" role="button" tabindex="0" aria-haspopup="true">Read/write mode</dfn></dt>
24919: <dd>
24920:
24921: <p>For the <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> event.
24922: New data can be added to the <a href="#drag-data-store">drag data store</a>.</p>
24923:
24924: </dd>
24925:
24926: <dt><dfn id="concept-dnd-ro" role="button" tabindex="0" aria-haspopup="true">Read-only mode</dfn></dt>
24927: <dd>
24928:
24929: <p>For the <code title="event-drop"><a href="#event-drop">drop</a></code> event. The list of
24930: items representing dragged data can be read, including the data.
24931: No new data can be added.</p>
24932:
24933: </dd>
24934:
24935: <dt><dfn id="concept-dnd-p" role="button" tabindex="0" aria-haspopup="true">Protected mode</dfn></dt>
24936: <dd>
24937:
24938: <p>For all other events. The formats and kinds in the <a href="#drag-data-store">drag
24939: data store</a> list of items representing dragged data can be
24940: enumerated, but the data itself is unavailable and no new data can
24941: be added.</p>
24942:
24943: </dd>
24944:
24945: </dl></li>
24946:
24947: <li>
24948:
24949: <p>A <dfn id="drag-data-store-allowed-effects-state" role="button" tabindex="0" aria-haspopup="true">drag data store allowed effects state</dfn>, which is a
24950: string.</p>
24951:
24952: </li>
24953:
24954: </ul><p>When a <a href="#drag-data-store">drag data store</a> is <dfn id="create-a-drag-data-store" role="button" tabindex="0" aria-haspopup="true">created</dfn>, it must be initialized such that its
24955: <a href="#drag-data-store-item-list">drag data store item list</a> is empty, it has no
24956: <a href="#drag-data-store-default-feedback">drag data store default feedback</a>, its <a href="#drag-data-store-elements-list">drag data
24957: store elements list</a> is empty, it has no <a href="#drag-data-store-bitmap">drag data store
24958: bitmap</a> / <a href="#drag-data-store-hot-spot-coordinate">drag data store hot spot coordinate</a>,
24959: its <a href="#drag-data-store-mode">drag data store mode</a> is <a href="#concept-dnd-p" title="concept-dnd-p">protected mode</a>, and its <a href="#drag-data-store-allowed-effects-state">drag data
1.575 mike 24960: store allowed effects state</a> is the string "<code title="">uninitialized</code>".</p><h4 id="the-datatransfer-interface"><span class="secno">7.6.3 </span>The <code><a href="#datatransfer">DataTransfer</a></code> interface</h4><p><code><a href="#datatransfer">DataTransfer</a></code> objects are used to expose the
1.562 mike 24961: <a href="#drag-data-store">drag data store</a> that underlies a drag-and-drop
24962: operation.</p><pre class="idl">interface <dfn id="datatransfer" role="button" tabindex="0" aria-haspopup="true">DataTransfer</dfn> {
24963: attribute DOMString <a href="#dom-datatransfer-dropeffect" title="dom-DataTransfer-dropEffect">dropEffect</a>;
24964: attribute DOMString <a href="#dom-datatransfer-effectallowed" title="dom-DataTransfer-effectAllowed">effectAllowed</a>;
24965:
24966: readonly attribute <a href="#datatransferitemlist">DataTransferItemList</a> <a href="#dom-datatransfer-items" title="dom-DataTransfer-items">items</a>;
24967:
24968: void <a href="#dom-datatransfer-setdragimage" title="dom-DataTransfer-setDragImage">setDragImage</a>(Element image, long x, long y);
24969: void <a href="#dom-datatransfer-addelement" title="dom-DataTransfer-addElement">addElement</a>(Element element);
24970:
24971: /* old interface */
24972: readonly attribute DOMStringList <a href="#dom-datatransfer-types" title="dom-DataTransfer-types">types</a>;
24973: DOMString <a href="#dom-datatransfer-getdata" title="dom-DataTransfer-getData">getData</a>(DOMString format);
24974: void <a href="#dom-datatransfer-setdata" title="dom-DataTransfer-setData">setData</a>(DOMString format, DOMString data);
24975: void <a href="#dom-datatransfer-cleardata" title="dom-DataTransfer-clearData">clearData</a>(optional DOMString format);
24976: readonly attribute <a href="#filelist">FileList</a> <a href="#dom-datatransfer-files" title="dom-DataTransfer-files">files</a>;
24977: };</pre><dl class="domintro"><dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-dropEffect" id="dom-datatransfer-dropeffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code> [ = <var title="">value</var> ]</dt>
24978:
24979: <dd>
24980:
24981: <p>Returns the kind of operation that is currently selected. If
24982: the kind of operation isn't one of those that is allowed by the
24983: <code title="dom-DataTransfer-effectAllowed"><a href="#dom-datatransfer-effectallowed">effectAllowed</a></code>
24984: attribute, then the operation will fail.</p>
24985:
24986: <p>Can be set, to change the selected operation.</p>
24987:
24988: <p>The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">link</code>", and "<code title="">move</code>".</p>
24989:
24990: </dd>
24991:
24992:
24993: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-effectAllowed" id="dom-datatransfer-effectallowed"><a href="#dom-datatransfer-effectallowed">effectAllowed</a></code> [ = <var title="">value</var> ]</dt>
24994:
24995: <dd>
24996:
24997: <p>Returns the kinds of operations that are to be allowed.</p>
24998:
24999: <p>Can be set, to change the allowed operations.</p>
25000:
25001: <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>
25002:
25003: </dd>
25004:
25005:
25006: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-items" id="dom-datatransfer-items"><a href="#dom-datatransfer-items">items</a></code></dt>
25007:
25008: <dd>
25009:
25010: <p>Returns a <code><a href="#datatransferitemlist">DataTransferItemList</a></code> object, with the drag data.</p>
25011:
25012: </dd>
25013:
25014:
25015: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-setDragImage" id="dom-datatransfer-setdragimage"><a href="#dom-datatransfer-setdragimage">setDragImage</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</dt>
25016:
25017: <dd>
25018:
25019: <p>Uses the given element to update the drag feedback, replacing any previously specified feedback.</p>
25020:
25021: </dd>
25022:
25023:
25024: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-addElement" id="dom-datatransfer-addelement"><a href="#dom-datatransfer-addelement">addElement</a></code>(<var title="">element</var>)</dt>
25025:
25026: <dd>
25027:
25028: <p>Adds the given element to the list of elements used to render the drag feedback.</p>
25029:
25030: </dd>
25031:
25032:
25033: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-types" id="dom-datatransfer-types"><a href="#dom-datatransfer-types">types</a></code></dt>
25034:
25035: <dd>
25036:
25037: <p>Returns a <code>DOMStringList</code> listing the formats that
25038: were set in the <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code>
25039: event. In addition, if any files are being dragged, then one of
25040: the types will be the string "<code title="">Files</code>".</p>
25041:
25042: </dd>
25043:
25044:
25045: <dt><var title="">data</var> = <var title="">dataTransfer</var> . <code title="dom-DataTransfer-getData" id="dom-datatransfer-getdata"><a href="#dom-datatransfer-getdata">getData</a></code>(<var title="">format</var>)</dt>
25046:
25047: <dd>
25048:
25049: <p>Returns the specified data. If there is no such data, returns the empty string.</p>
25050:
25051: </dd>
25052:
25053:
25054: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-setData" id="dom-datatransfer-setdata"><a href="#dom-datatransfer-setdata">setData</a></code>(<var title="">format</var>, <var title="">data</var>)</dt>
25055:
25056: <dd>
25057:
25058: <p>Adds the specified data.</p>
25059:
25060: </dd>
25061:
25062:
25063: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-clearData" id="dom-datatransfer-cleardata"><a href="#dom-datatransfer-cleardata">clearData</a></code>( [ <var title="">format</var> ] )</dt>
25064:
25065: <dd>
25066:
25067: <p>Removes the data of the specified formats. Removes all data if
25068: the argument is omitted.</p>
25069:
25070: </dd>
25071:
25072:
25073: <dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-files" id="dom-datatransfer-files"><a href="#dom-datatransfer-files">files</a></code></dt>
25074:
25075: <dd>
25076:
25077: <p>Returns a <code><a href="#filelist">FileList</a></code> of the files being dragged, if any.</p>
25078:
25079: </dd>
25080:
25081: </dl><p><code><a href="#datatransfer">DataTransfer</a></code> objects are used during the <a href="#dndevents">drag-and-drop events</a>, and are only valid while
1.575 mike 25082: those events are being fired.</p><h5 id="the-datatransferitemlist-interface"><span class="secno">7.6.3.1 </span>The <code><a href="#datatransferitemlist">DataTransferItemList</a></code> interface</h5><p>Each <code><a href="#datatransfer">DataTransfer</a></code> object is associated with a
1.562 mike 25083: <code><a href="#datatransferitemlist">DataTransferItemList</a></code> object.</p><pre class="idl">interface <dfn id="datatransferitemlist" role="button" tabindex="0" aria-haspopup="true">DataTransferItemList</dfn> {
25084: readonly attribute unsigned long <a href="#dom-datatransferitemlist-length" title="dom-DataTransferItemList-length">length</a>;
25085: <a href="#dom-datatransferitemlist-item" title="dom-DataTransferItemList-item">getter</a> <a href="#datatransferitem">DataTransferItem</a> (unsigned long index);
25086: <a href="#dom-datatransferitemlist-removeitem" title="dom-DataTransferItemList-removeItem">deleter</a> void (unsigned long index);
25087: void <a href="#dom-datatransferitemlist-clear" title="dom-DataTransferItemList-clear">clear</a>();
25088:
25089: <a href="#datatransferitem">DataTransferItem</a>? <a href="#dom-datatransferitemlist-add" title="dom-DataTransferItemList-add">add</a>(DOMString data, DOMString type); <a href="#datatransferitem">DataTransferItem</a>? <a href="#dom-datatransferitemlist-add" title="dom-DataTransferItemList-add">add</a>(<a href="#file">File</a> data);};</pre><dl class="domintro"><dt><var title="">items</var> . <code title="dom-DataTransferItemList-length" id="dom-datatransferitemlist-length"><a href="#dom-datatransferitemlist-length">length</a></code></dt>
25090:
25091: <dd><p>Returns the number of items in the <a href="#drag-data-store">drag data store</a>.</p></dd>
25092:
25093:
25094: <dt><var title="">items</var>[<var title="">index</var>]</dt>
25095:
25096: <dd>
25097:
25098: <p>Returns the <code><a href="#datatransferitem">DataTransferItem</a></code> object representing the <var title="">index</var>th entry in the <a href="#drag-data-store">drag data store</a>.</p>
25099:
25100: </dd>
25101:
25102:
25103: <dt><code title="">delete</code> <var title="">items</var>[<var title="">index</var>]</dt>
25104:
25105: <dd>
25106:
25107: <p>Removes the <var title="">index</var>th entry in the <a href="#drag-data-store">drag data store</a>.</p>
25108:
25109: </dd>
25110:
25111:
25112: <dt><var title="">items</var> . <code title="dom-DataTransferItemList-clear" id="dom-datatransferitemlist-clear"><a href="#dom-datatransferitemlist-clear">clear</a></code>()</dt>
25113:
25114: <dd>
25115:
25116: <p>Removes all the entries in the <a href="#drag-data-store">drag data store</a>.</p>
25117:
25118: </dd>
25119:
25120:
25121: <dt><var title="">items</var> . <code title="dom-DataTransferItemList-add" id="dom-datatransferitemlist-add"><a href="#dom-datatransferitemlist-add">add</a></code>(<var title="">data</var>)</dt>
25122: <dt><var title="">items</var> . <code title="dom-DataTransferItemList-add"><a href="#dom-datatransferitemlist-add">add</a></code>(<var title="">data</var>, <var title="">type</var>)</dt>
25123:
25124: <dd>
25125:
25126: <p>Adds a new entry for the given data to the <a href="#drag-data-store">drag data
25127: store</a>. If the data is plain text
25128: then a <var title="">type</var> string has to be provided
25129: also.</p>
25130:
25131: </dd>
25132:
1.575 mike 25133: </dl><h5 id="the-datatransferitem-interface"><span class="secno">7.6.3.2 </span>The <code><a href="#datatransferitem">DataTransferItem</a></code> interface</h5><p>Each <code><a href="#datatransferitem">DataTransferItem</a></code> object is associated with a
1.562 mike 25134: <code><a href="#datatransfer">DataTransfer</a></code> object.</p><pre class="idl">interface <dfn id="datatransferitem" role="button" tabindex="0" aria-haspopup="true">DataTransferItem</dfn> {
25135: readonly attribute DOMString <a href="#dom-datatransferitem-kind" title="dom-DataTransferItem-kind">kind</a>;
25136: readonly attribute DOMString <a href="#dom-datatransferitem-type" title="dom-DataTransferItem-type">type</a>;
25137: void <a href="#dom-datatransferitem-getasstring" title="dom-DataTransferItem-getAsString">getAsString</a>(<a href="#functionstringcallback">FunctionStringCallback</a>? callback); <a href="#file">File</a>? <a href="#dom-datatransferitem-getasfile" title="dom-DataTransferItem-getAsFile">getAsFile</a>();};
25138:
25139: [Callback=FunctionOnly, NoInterfaceObject]
25140: interface <dfn id="functionstringcallback" role="button" tabindex="0" aria-haspopup="true">FunctionStringCallback</dfn> {
25141: void <span title="dom-FunctionStringCallback-handleEvent">handleEvent</span>(DOMString data);
25142: };</pre><dl class="domintro"><dt><var title="">item</var> . <code title="dom-DataTransferItem-kind" id="dom-datatransferitem-kind"><a href="#dom-datatransferitem-kind">kind</a></code></dt>
25143: <dd>
25144:
25145: <p>Returns <a href="#the-drag-data-item-kind">the drag data item kind</a>, one of: "string",
25146: "file".</p>
25147:
25148: </dd>
25149:
25150: <dt><var title="">item</var> . <code title="dom-DataTransferItem-type" id="dom-datatransferitem-type"><a href="#dom-datatransferitem-type">type</a></code></dt>
25151: <dd>
25152:
25153: <p>Returns <a href="#the-drag-data-item-type-string">the drag data item type string</a>.</p>
25154:
25155: </dd>
25156:
25157: <dt><var title="">item</var> . <code title="dom-DataTransferItem-getAsString" id="dom-datatransferitem-getasstring"><a href="#dom-datatransferitem-getasstring">getAsString</a></code>(<var title="">callback</var>)</dt>
25158: <dd>
25159:
25160: <p>Invokes the callback with the string data as the argument, if <a href="#the-drag-data-item-kind">the drag data item kind</a> is <i>Plain Unicode string</i>.</p>
25161:
25162: </dd>
25163:
25164:
25165: <dt><var title="">file</var> = <var title="">item</var> . <code title="dom-DataTransferItem-getAsFile" id="dom-datatransferitem-getasfile"><a href="#dom-datatransferitem-getasfile">getAsFile</a></code>()</dt>
25166: <dd>
25167:
25168: <p>Returns a <code><a href="#file">File</a></code> object, if <a href="#the-drag-data-item-kind">the drag data item kind</a> is <i><a href="#file">File</a></i>.</p>
25169:
25170: </dd>
25171:
25172:
1.575 mike 25173: </dl><h4 id="the-dragevent-interface"><span class="secno">7.6.4 </span>The <code><a href="#dragevent">DragEvent</a></code> interface</h4><p>The drag-and-drop processing model involves several events. They
1.590 mike 25174: all use the <code><a href="#dragevent">DragEvent</a></code> interface.</p><pre class="idl">[Constructor(DOMString type, optional <a href="#drageventinit">DragEventInit</a> eventInitDict)]
25175: interface <dfn id="dragevent" role="button" tabindex="0" aria-haspopup="true">DragEvent</dfn> : <a href="#mouseevent">MouseEvent</a> {
1.562 mike 25176: readonly attribute <a href="#datatransfer">DataTransfer</a>? <a href="#dom-dragevent-datatransfer" title="dom-DragEvent-dataTransfer">dataTransfer</a>;
1.590 mike 25177: };
1.562 mike 25178:
1.590 mike 25179: dictionary <dfn id="drageventinit" role="button" tabindex="0" aria-haspopup="true">DragEventInit</dfn> : <a href="#mouseeventinit">MouseEventInit</a> {
25180: <a href="#datatransfer">DataTransfer</a>? dataTransfer;
1.562 mike 25181: };</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-DragEvent-dataTransfer" id="dom-dragevent-datatransfer"><a href="#dom-dragevent-datatransfer">dataTransfer</a></code></dt>
25182:
25183: <dd>
25184:
25185: <p>Returns the <code><a href="#datatransfer">DataTransfer</a></code> object for the event.</p>
25186:
25187: </dd>
25188:
1.590 mike 25189: </dl><h4 id="dndevents"><span class="secno">7.6.6 </span>Events summary</h4><p><i>This section is non-normative.</i></p><p>The following events are involved in the drag-and-drop
1.562 mike 25190: model.</p><table><thead><tr><th> Event Name </th>
25191: <th> Target </th>
25192:
25193: <th> Cancelable? </th>
25194: <th> <a href="#drag-data-store-mode">Drag data store mode</a> </th>
25195:
25196: <th> <code title="dom-DataTransfer-dropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code> </th>
25197: <th> Default Action </th>
25198: </tr></thead><tbody><tr><td><dfn id="event-dragstart" role="button" tabindex="0" aria-haspopup="true"><code>dragstart</code></dfn></td>
25199: <td><a href="#source-node">Source node</a></td>
25200:
25201: <td>✓ Cancelable</td>
25202: <td><a href="#concept-dnd-rw" title="concept-dnd-rw">Read/write mode</a>
25203:
25204: </td><td>"<code title="">none</code>"</td>
25205: <td>Initiate the drag-and-drop operation</td>
25206: </tr><tr><td><dfn id="event-drag" role="button" tabindex="0" aria-haspopup="true"><code>drag</code></dfn></td>
25207: <td><a href="#source-node">Source node</a></td>
25208:
25209: <td>✓ Cancelable</td>
25210: <td><a href="#concept-dnd-p" title="concept-dnd-p">Protected mode</a>
25211:
25212: </td><td>"<code title="">none</code>"</td>
25213: <td>Continue the drag-and-drop operation</td>
25214: </tr><tr><td><dfn id="event-dragenter" role="button" tabindex="0" aria-haspopup="true"><code>dragenter</code></dfn></td>
25215: <td><a href="#immediate-user-selection">Immediate user selection</a> or <a href="#the-body-element-0">the body element</a></td>
25216:
25217: <td>✓ Cancelable</td>
25218: <td><a href="#concept-dnd-p" title="concept-dnd-p">Protected mode</a>
25219:
25220: </td><td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
25221: <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>
25222: </tr><tr><td><dfn id="event-dragleave" role="button" tabindex="0" aria-haspopup="true"><code>dragleave</code></dfn></td>
25223: <td><a href="#current-target-element" title="current target element">Previous target element</a></td>
25224:
25225: <td>—</td>
25226: <td><a href="#concept-dnd-p" title="concept-dnd-p">Protected mode</a>
25227:
25228: </td><td>"<code title="">none</code>"</td>
25229: <td>None</td>
25230: </tr><tr><td><dfn id="event-dragover" role="button" tabindex="0" aria-haspopup="true"><code>dragover</code></dfn></td>
25231: <td><a href="#current-target-element">Current target element</a></td>
25232:
25233: <td>✓ Cancelable</td>
25234: <td><a href="#concept-dnd-p" title="concept-dnd-p">Protected mode</a>
25235:
25236: </td><td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
25237: <td>Reset the <a href="#current-drag-operation">current drag operation</a> to "none"</td>
25238: </tr><tr><td><dfn id="event-drop" role="button" tabindex="0" aria-haspopup="true"><code>drop</code></dfn></td>
25239: <td><a href="#current-target-element">Current target element</a></td>
25240:
25241: <td>✓ Cancelable</td>
25242: <td><a href="#concept-dnd-ro" title="concept-dnd-ro">Read-only mode</a>
25243:
25244: </td><td><a href="#current-drag-operation">Current drag operation</a></td>
25245: <td>Varies</td>
25246: </tr><tr><td><dfn id="event-dragend" role="button" tabindex="0" aria-haspopup="true"><code>dragend</code></dfn></td>
25247: <td><a href="#source-node">Source node</a></td>
25248:
25249: <td>—</td>
25250: <td><a href="#concept-dnd-p" title="concept-dnd-p">Protected mode</a>
25251:
25252: </td><td><a href="#current-drag-operation">Current drag operation</a></td>
25253: <td>Varies</td>
25254: </tr></tbody></table><p>Not shown in the above table: all these events bubble, and the
25255: <code title="dom-DataTransfer-effectAllowed"><a href="#dom-datatransfer-effectallowed">effectAllowed</a></code>
25256: attribute always has the value it had after the previous event was
25257: fired, defaulting to "<code title="">uninitialized</code>" in the
1.575 mike 25258: <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> event.</p><h4 id="the-draggable-attribute"><span class="secno">7.6.7 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>draggable</code></dfn> attribute</h4><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
1.562 mike 25259: <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute is an
25260: <a href="#enumerated-attribute">enumerated attribute</a>. It has three states. The first
25261: state is <i>true</i> and it has the keyword <code title="">true</code>. The second state is <i>false</i> and it has
25262: the keyword <code title="">false</code>. The third state is
25263: <i>auto</i>; it has no keywords but it is the <i>missing value
25264: default</i>.</p><p>The <i>true</i> state means the element is draggable; the
25265: <i>false</i> state means that it is not. The <i>auto</i> state
25266: uses the default behavior of the user agent.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-draggable" id="dom-draggable"><a href="#dom-draggable">draggable</a></code> [ = <var title="">value</var> ]</dt>
25267:
25268: <dd>
25269:
25270: <p>Returns true if the element is draggable; otherwise, returns
25271: false.</p>
25272:
25273: <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>
25274:
25275: </dd>
25276:
1.575 mike 25277: </dl><h4 id="the-dropzone-attribute"><span class="secno">7.6.8 </span>The <dfn role="button" tabindex="0" aria-haspopup="true"><code>dropzone</code></dfn> attribute</h4><p>All <a href="#html-elements">HTML elements</a> may have the <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code> content attribute set. When
1.562 mike 25278: specified, its value must be an <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique
25279: space-separated tokens</a> that are <a href="#ascii-case-insensitive">ASCII
25280: case-insensitive</a>. The allowed values are the following:</p><dl><dt><dfn id="attr-dropzone-copy" role="button" tabindex="0" aria-haspopup="true"><code>copy</code></dfn></dt>
25281:
25282: <dd><p>Indicates that dropping an accepted item on the element will
25283: result in a copy of the dragged data.</p>
25284:
25285:
25286: </dd><dt><dfn id="attr-dropzone-move" role="button" tabindex="0" aria-haspopup="true"><code>move</code></dfn></dt>
25287:
25288: <dd><p>Indicates that dropping an accepted item on the element will
25289: result in the dragged data being moved to the new location.</p>
25290:
25291:
25292: </dd><dt><dfn id="attr-dropzone-link" role="button" tabindex="0" aria-haspopup="true"><code>link</code></dfn></dt>
25293:
25294: <dd><p>Indicates that dropping an accepted item on the element will
25295: result in a link to the original data.</p>
25296:
25297:
25298: </dd><dt>Any keyword with three characters or more, beginning with the
25299: two characters U+0073 LATIN SMALL LETTER S and U+003A COLON or
25300: U+0053 LATIN CAPITAL LETTER S and U+003A COLON (i.e. an <a href="#ascii-case-insensitive">ASCII
25301: case-insensitive</a> match for the string "<code title="">s:</code>")<dt>
25302:
25303: </dt></dt><dd><p>Indicates that items with <a href="#the-drag-data-item-kind">the drag data item
25304: kind</a> <i>Plain Unicode string</i> and <a href="#the-drag-data-item-type-string">the drag data
25305: item type string</a> set to a value that matches the remainder
25306: of the keyword are accepted.</p></dd>
25307:
25308:
25309: <dt>Any keyword with three characters or more, beginning with the
25310: two characters U+0066 LATIN SMALL LETTER F and U+003A COLON or
25311: U+0046 LATIN CAPITAL LETTER F and U+003A COLON (i.e. an <a href="#ascii-case-insensitive">ASCII
25312: case-insensitive</a> match for the string "<code title="">f:</code>")<dt>
25313:
25314: </dt></dt><dd><p>Indicates that items with <a href="#the-drag-data-item-kind">the drag data item
25315: kind</a> <i><a href="#file">File</a></i> and <a href="#the-drag-data-item-type-string">the drag data item type
25316: string</a> set to a value that matches the remainder of the
25317: keyword are accepted.</p></dd>
25318:
25319:
25320: </dl><p>The <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code> content
25321: attribute's values must not have more than one of the three feedback
25322: values (<code title="attr-dropzone-copy"><a href="#attr-dropzone-copy">copy</a></code>, <code title="attr-dropzone-move"><a href="#attr-dropzone-move">move</a></code>, and <code title="attr-dropzone-link"><a href="#attr-dropzone-link">link</a></code>) specified. If none are
25323: specified, the <code title="attr-dropzone-copy"><a href="#attr-dropzone-copy">copy</a></code> value is
25324: implied.</p>
25325: <p>The <dfn id="dom-dropzone" role="button" tabindex="0" aria-haspopup="true"><code>dropzone</code></dfn> IDL
25326: attribute must <a href="#reflect">reflect</a> the content attribute of the
25327: same name.</p>
25328: <div class="example">
25329:
25330: <p>In this example, a <code><a href="#the-div-element">div</a></code> element is made into a drop
25331: target for image files using the <code title="attr-dropzone"><a href="#the-dropzone-attribute">dropzone</a></code> attribute. Images dropped
25332: into the target are then displayed.</p>
25333:
25334: <pre><div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
25335: <p>Drop an image here to have it displayed.</p>
25336: </div>
25337: <script>
25338: function receive(event, element) {
25339: var data = event.dataTransfer.items;
25340: for (var i = 0; i < data.length; i += 1) {
25341: if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
25342: var img = new Image();
25343: img.src = window.createObjectURL(data[i].getAsFile());
25344: element.appendChild(img);
25345: }
25346: }
25347: }
25348: </script></pre>
25349:
1.575 mike 25350: </div><h2 id="syntax"><span class="secno">8 </span><dfn role="button" tabindex="0" aria-haspopup="true">The HTML syntax</dfn></h2><p class="note">This section only describes the rules for resources
1.562 mike 25351: labeled with an <a href="#html-mime-type">HTML MIME type</a>. Rules for XML resources
25352: are discussed in the section below entitled "<a href="#the-xhtml-syntax">The XHTML
25353: syntax</a>".</p><h3 id="writing"><span class="secno">8.1 </span>Writing HTML documents</h3><p>Documents must consist of the following parts, in the given
25354: order:</p><ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.</li>
25355:
25356: <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
25357: <a href="#space-character" title="space character">space characters</a>.</li>
25358:
25359: <li>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a>.
25360:
25361: </li><li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
25362: <a href="#space-character" title="space character">space characters</a>.</li>
25363:
25364: <li>The root element, in the form of an <code><a href="#the-html-element">html</a></code> <a href="#syntax-elements" title="syntax-elements">element</a>.</li>
25365:
25366: <li>Any number of <a href="#syntax-comments" title="syntax-comments">comments</a> and
25367: <a href="#space-character" title="space character">space characters</a>.</li>
25368:
25369: </ol><p>The various types of content mentioned above are described in the
25370: next few sections.</p><p>In addition, there are some restrictions on how <a href="#character-encoding-declaration" title="character encoding declaration">character encoding
25371: declarations</a> are to be serialized, as discussed in the
25372: section on that topic.</p><div class="note">
25373:
25374: <p>Space characters before the root <code><a href="#the-html-element">html</a></code> element, and
25375: space characters at the start of the <code><a href="#the-html-element">html</a></code> element and
25376: before the <code><a href="#the-head-element">head</a></code> element, will be dropped when the
25377: document is parsed; space characters <em>after</em> the root
25378: <code><a href="#the-html-element">html</a></code> element will be parsed as if they were at the end
25379: of the <code><a href="#the-body-element">body</a></code> element. Thus, space characters around the
25380: root element do not round-trip.</p>
25381:
25382: <p>It is suggested that newlines be inserted after the DOCTYPE,
25383: after any comments that are before the root element, after the
25384: <code><a href="#the-html-element">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
25385: that are inside the <code><a href="#the-html-element">html</a></code> element but before the
25386: <code><a href="#the-head-element">head</a></code> element.</p>
25387:
25388: </div><p>Many strings in the HTML syntax (e.g. the names of elements and
25389: their attributes) are case-insensitive, but only for characters in
25390: the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL
25391: LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL
25392: LETTER Z). For convenience, in this section this is just referred to
25393: as "case-insensitive".</p><h4 id="the-doctype"><span class="secno">8.1.1 </span>The DOCTYPE</h4><p>A <dfn id="syntax-doctype" role="button" tabindex="0" aria-haspopup="true">DOCTYPE</dfn> is a required preamble.</p><p class="note">DOCTYPEs are required for legacy reasons. When
25394: omitted, browsers tend to use a different rendering mode that is
25395: incompatible with some specifications. Including the DOCTYPE in a
25396: document ensures that the browser makes a best-effort attempt at
25397: following the relevant specifications.</p><p>A DOCTYPE must consist of the following components, in this
25398: order:</p><ol class="brief"><li>A string that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title=""><!DOCTYPE</code>".</li>
25399: <li>One or more <a href="#space-character" title="space character">space characters</a>.</li>
25400: <li>A string that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">html</code>".</li>
25401: <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>
25402: <li>Zero or more <a href="#space-character" title="space character">space characters</a>.</li>
25403: <li>A U+003E GREATER-THAN SIGN character (>).</li>
25404: </ol><p class="note">In other words, <code><!DOCTYPE html></code>,
25405: case-insensitively.</p><hr><p>For the purposes of HTML generators that cannot output HTML
25406: markup with the short DOCTYPE "<code title=""><!DOCTYPE
25407: html></code>", a <dfn id="doctype-legacy-string" role="button" tabindex="0" aria-haspopup="true">DOCTYPE legacy string</dfn> may be inserted
25408: into the DOCTYPE (in the position defined above). This string must
25409: consist of:</p><ol class="brief"><li>One or more <a href="#space-character" title="space character">space characters</a>.</li>
25410: <li>A string that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">SYSTEM</code>".</li>
25411: <li>One or more <a href="#space-character" title="space character">space characters</a>.</li>
25412: <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).</li>
25413: <li>The literal string "<code><a href="#about:legacy-compat">about:legacy-compat</a></code>".</li>
25414: <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>
25415: </ol><p class="note">In other words, <code><!DOCTYPE html SYSTEM
25416: "about:legacy-compat"></code> or <code><!DOCTYPE html SYSTEM
25417: 'about:legacy-compat'></code>, case-insensitively except for the
25418: part in single or double quotes.</p><p>The <a href="#doctype-legacy-string">DOCTYPE legacy string</a> should not be used unless
25419: the document is generated from a system that cannot output the
25420: shorter string.</p><hr><p>To help authors transition from HTML4 and XHTML1, an
25421: <dfn id="obsolete-permitted-doctype-string" role="button" tabindex="0" aria-haspopup="true">obsolete permitted DOCTYPE string</dfn> can be inserted into
25422: the DOCTYPE (in the position defined above). This string must
25423: consist of:</p><ol class="brief"><li>One or more <a href="#space-character" title="space character">space characters</a>.</li>
25424: <li>A string that is an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="">PUBLIC</code>".</li>
25425: <li>One or more <a href="#space-character" title="space character">space characters</a>.</li>
25426: <li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>first quote mark</i>).</li>
25427: <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>
25428: <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>
25429: <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>
25430: <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>
25431: <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>
25432: <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>
25433: </ol><table><caption>
25434: Allowed values for public and system identifiers in an <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a>.
25435: </caption>
25436: <thead><tr><th> Public identifier
25437: </th><th> System identifier
25438: </th></tr></thead><tbody><tr><td> <code title="">-//W3C//DTD HTML 4.0//EN</code>
25439: </td><td>
25440: </td></tr><tr><td> <code title="">-//W3C//DTD HTML 4.0//EN</code>
25441: </td><td> <code title="">http://www.w3.org/TR/REC-html40/strict.dtd</code>
25442: </td></tr><tr><td> <code title="">-//W3C//DTD HTML 4.01//EN</code>
25443: </td><td>
25444: </td></tr><tr><td> <code title="">-//W3C//DTD HTML 4.01//EN</code>
25445: </td><td> <code title="">http://www.w3.org/TR/html4/strict.dtd</code>
25446: </td></tr><tr><td> <code title="">-//W3C//DTD XHTML 1.0 Strict//EN</code>
25447: </td><td> <code title="">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</code>
25448: </td></tr><tr><td> <code title="">-//W3C//DTD XHTML 1.1//EN</code>
25449: </td><td> <code title="">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</code>
25450: </td></tr></tbody></table><p>A <a href="#syntax-doctype" title="syntax-doctype">DOCTYPE</a> containing an
25451: <a href="#obsolete-permitted-doctype-string">obsolete permitted DOCTYPE string</a> is an <dfn id="obsolete-permitted-doctype" role="button" tabindex="0" aria-haspopup="true">obsolete
25452: permitted DOCTYPE</dfn>. Authors should not use <a href="#obsolete-permitted-doctype" title="obsolete permitted DOCTYPE">obsolete permitted
25453: DOCTYPEs</a>, as they are unnecessarily long.</p><h4 id="elements-0"><span class="secno">8.1.2 </span>Elements</h4><p>There are five different kinds of <dfn id="syntax-elements" role="button" tabindex="0" aria-haspopup="true">elements</dfn>: <a href="#void-elements">void elements</a>,
25454: <a href="#raw-text-elements">raw text elements</a>, <a href="#rcdata-elements">RCDATA elements</a>,
25455: <a href="#foreign-elements">foreign elements</a>, and <a href="#normal-elements">normal elements</a>.</p><dl><dt><dfn id="void-elements" role="button" tabindex="0" aria-haspopup="true">Void elements</dfn></dt>
25456:
25457: <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>,
25458: <code><a href="#the-col-element">col</a></code>, <code><a href="#the-command-element">command</a></code>, <code><a href="#the-embed-element">embed</a></code>,
25459: <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>,
25460: <code><a href="#the-keygen-element">keygen</a></code>, <code><a href="#the-link-element">link</a></code>, <code><a href="#the-meta-element">meta</a></code>,
25461: <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>,
25462: <code><a href="#the-wbr-element">wbr</a></code></dd>
25463:
25464:
25465: <dt><dfn id="raw-text-elements" role="button" tabindex="0" aria-haspopup="true">Raw text elements</dfn></dt>
25466:
25467: <dd><code><a href="#the-script-element">script</a></code>, <code><a href="#the-style-element">style</a></code></dd>
25468: <dt><dfn id="rcdata-elements" role="button" tabindex="0" aria-haspopup="true">RCDATA elements</dfn></dt>
25469:
25470: <dd><code><a href="#the-textarea-element">textarea</a></code>, <code><a href="#the-title-element">title</a></code></dd>
25471:
25472: <dt><dfn id="foreign-elements" role="button" tabindex="0" aria-haspopup="true">Foreign elements</dfn></dt>
25473:
25474: <dd>Elements from the <a href="#mathml-namespace">MathML namespace</a>
25475: and the <a href="#svg-namespace">SVG namespace</a>.</dd>
25476:
25477: <dt><dfn id="normal-elements" role="button" tabindex="0" aria-haspopup="true">Normal elements</dfn></dt>
25478:
25479: <dd>All other allowed <a href="#html-elements">HTML elements</a> are normal
25480: elements.</dd>
25481:
25482: </dl><p><dfn id="syntax-tags" role="button" tabindex="0" aria-haspopup="true">Tags</dfn> are used to delimit the start
25483: and end of elements in the markup. <a href="#raw-text-elements" title="raw text
25484: elements">Raw text</a>, <a href="#rcdata-elements" title="RCDATA
25485: elements">RCDATA</a>, and <a href="#normal-elements" title="normal
25486: elements">normal</a> elements have a <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> to indicate where they
25487: begin, and an <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a> to
25488: indicate where they end. The start and end tags of certain
25489: <a href="#normal-elements">normal elements</a> can be <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>, as described
25490: later. Those that cannot be omitted must not be omitted. <a href="#void-elements">Void
25491: elements</a> only have a start tag; end tags must not be
25492: specified for <a href="#void-elements">void elements</a>. <a href="#foreign-elements">Foreign
25493: elements</a> must either have a start tag and an end tag, or a
25494: start tag that is marked as self-closing, in which case they must
25495: not have an end tag.</p><p>The contents of the element must be placed between just after the
25496: start tag (which <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied,
25497: in certain cases</a>) and just before the end tag (which again,
25498: <a href="#syntax-tag-omission" title="syntax-tag-omission">might be implied in certain
25499: cases</a>). The exact allowed contents of each individual element
25500: depend on the content model of that element, as described earlier in
25501: this specification. Elements must not contain content that their
25502: content model disallows. In addition to the restrictions placed on
25503: the contents by those content models, however, the five types of
25504: elements have additional <em>syntactic</em> requirements.</p><p><a href="#void-elements">Void elements</a> can't have any contents (since there's
25505: no end tag, no content can be put between the start tag and the end
25506: tag).</p><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
25507: below.</p><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
25508: must not contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.
25509: There are also <a href="#cdata-rcdata-restrictions">further
25510: restrictions</a> described below.</p><p><a href="#foreign-elements">Foreign elements</a> whose start tag is marked as
25511: self-closing can't have any contents (since, again, as there's no
25512: end tag, no content can be put between the start tag and the end
25513: tag). <a href="#foreign-elements">Foreign elements</a> whose start tag is <em>not</em>
25514: 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
25515: contain the character U+003C LESS-THAN SIGN (<) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.</p><div class="note">
25516:
25517: <p>The HTML syntax does not support namespace
25518: declarations, even in <a href="#foreign-elements">foreign elements</a>.</p>
25519:
25520: <p>For instance, consider the following HTML fragment:</p>
25521:
25522: <pre><p>
25523: <svg>
25524: <metadata>
25525: <!-- this is invalid -->
25526: <cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/>
25527: </metadata>
25528: </svg>
25529: </p></pre>
25530:
25531: <p>The innermost element, <code title="">cdr:license</code>, is
25532: actually in the SVG namespace, as the "<code title="">xmlns:cdr</code>" attribute has no effect (unlike in
25533: XML). In fact, as the comment in the fragment above says, the
25534: fragment is actually non-conforming. This is because the SVG
25535: specification does not define any elements called "<code title="">cdr:license</code>" in the SVG namespace.</p>
25536:
25537: </div><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
25538: contain the character U+003C LESS-THAN SIGN (<) or an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>. Some
25539: <a href="#normal-elements">normal elements</a> also have <a href="#element-restrictions">yet more restrictions</a> on what
25540: content they are allowed to hold, beyond the restrictions imposed by
25541: the content model and those described in this paragraph. Those
25542: restrictions are described below.</p><p>Tags contain a <dfn id="syntax-tag-name" role="button" tabindex="0" aria-haspopup="true">tag name</dfn>,
25543: giving the element's name. HTML elements all have names that only
25544: use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
25545: NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER
25546: Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER
25547: Z. In the HTML syntax, tag names, even those for <a href="#foreign-elements">foreign
25548: elements</a>, may be written with any mix of lower- and uppercase
25549: letters that, when converted to all-lowercase, matches the element's
25550: tag name; tag names are case-insensitive.</p><h5 id="start-tags"><span class="secno">8.1.2.1 </span>Start tags</h5><p><dfn id="syntax-start-tag" role="button" tabindex="0" aria-haspopup="true">Start tags</dfn> must have the
25551: following format:</p><ol><li>The first character of a start tag must be a U+003C LESS-THAN
25552: SIGN character (<).</li>
25553:
25554: <li>The next few characters of a start tag must be the element's
25555: <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li>
25556:
25557: <li>If there are to be any attributes in the next step, there must
25558: first be one or more <a href="#space-character" title="space character">space
25559: characters</a>.</li>
25560:
25561: <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
25562: below. Attributes must be separated from each other by one or more
25563: <a href="#space-character" title="space character">space characters</a>.</li>
25564:
25565: <li>After the attributes, or after the <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a> if there are no attributes,
25566: there may be one or more <a href="#space-character" title="space character">space
25567: characters</a>. (Some attributes are required to be followed by
25568: a space. See the <a href="#syntax-attributes" title="syntax-attributes">attributes
25569: section</a> below.)</li>
25570:
25571: <li>Then, if the element is one of the <a href="#void-elements">void elements</a>,
25572: or if the element is a <a href="#foreign-elements" title="foreign elements">foreign
25573: element</a>, then there may be a single U+002F SOLIDUS character
25574: (/). This character has no effect on <a href="#void-elements">void elements</a>,
25575: but on <a href="#foreign-elements">foreign elements</a> it marks the start tag as
25576: self-closing.</li>
25577:
25578: <li>Finally, start tags must be closed by a U+003E GREATER-THAN
25579: SIGN character (>).</li>
25580:
25581: </ol><h5 id="end-tags"><span class="secno">8.1.2.2 </span>End tags</h5><p><dfn id="syntax-end-tag" role="button" tabindex="0" aria-haspopup="true">End tags</dfn> must have the
25582: following format:</p><ol><li>The first character of an end tag must be a U+003C LESS-THAN
25583: SIGN character (<).</li>
25584:
25585: <li>The second character of an end tag must be a U+002F SOLIDUS
25586: character (/).</li>
25587:
25588: <li>The next few characters of an end tag must be the element's
25589: <a href="#syntax-tag-name" title="syntax-tag-name">tag name</a>.</li>
25590:
25591: <li>After the tag name, there may be one or more <a href="#space-character" title="space
25592: character">space characters</a>.</li>
25593:
25594: <li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN
25595: character (>).</li>
25596:
25597: </ol><h5 id="attributes-0"><span class="secno">8.1.2.3 </span>Attributes</h5><p><dfn id="syntax-attributes" role="button" tabindex="0" aria-haspopup="true">Attributes</dfn> for an element
25598: are expressed inside the element's start tag.</p><p>Attributes have a name and a value. <dfn id="syntax-attribute-name" role="button" tabindex="0" aria-haspopup="true">Attribute names</dfn> must consist of
25599: one or more characters other than the <a href="#space-character" title="space
25600: character">space characters</a>, U+0000 NULL, U+0022 QUOTATION
25601: MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN
25602: (>), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters,
25603: the control characters, and any characters that are not defined by
25604: Unicode. In the HTML syntax, attribute names, even those for
25605: <a href="#foreign-elements">foreign elements</a>, may be written with any mix of lower-
25606: and uppercase letters that are an <a href="#ascii-case-insensitive">ASCII
25607: case-insensitive</a> match for the attribute's name.</p><p><dfn id="syntax-attribute-value" role="button" tabindex="0" aria-haspopup="true">Attribute values</dfn> are a
25608: 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
25609: additional restriction that the text cannot contain an <a href="#syntax-ambiguous-ampersand" title="syntax-ambiguous-ampersand">ambiguous ampersand</a>.</p><p>Attributes can be specified in four different ways:</p><dl><dt>Empty attribute syntax</dt>
25610:
25611: <dd>
25612:
25613: <p>Just the <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute
25614: name</a>. The value is implicitly the empty string.</p>
25615:
25616: <div class="example">
25617:
25618: <p>In the following example, the <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute is given with
25619: the empty attribute syntax:</p>
25620:
25621: <pre><input <em>disabled</em>></pre>
25622:
25623: </div>
25624:
25625: <p>If an attribute using the empty attribute syntax is to be
25626: followed by another attribute, then there must be a <a href="#space-character">space
25627: character</a> separating the two.</p>
25628:
25629: </dd>
25630:
25631: <dt id="unquoted">Unquoted attribute value syntax</dt>
25632:
25633: <dd>
25634:
25635: <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
25636: followed by zero or more <a href="#space-character" title="space character">space
25637: characters</a>, followed by a single U+003D EQUALS SIGN
25638: character, followed by zero or more <a href="#space-character" title="space
25639: character">space characters</a>, followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
25640: addition to the requirements given above for attribute values,
25641: must not contain any literal <a href="#space-character" title="space character">space
25642: characters</a>, any U+0022 QUOTATION MARK characters ("),
25643: U+0027 APOSTROPHE characters ('), U+003D EQUALS SIGN
25644: characters (=), U+003C LESS-THAN SIGN characters (<), U+003E
25645: GREATER-THAN SIGN characters (>), or U+0060 GRAVE ACCENT
25646: characters (`), and must not be the empty string.</p>
25647:
25648:
25649:
25650: <div class="example">
25651:
25652: <p>In the following example, the <code title="attr-input-value"><a href="#attr-input-value">value</a></code> attribute is given
25653: with the unquoted attribute value syntax:</p>
25654:
25655: <pre><input <em>value=yes</em>></pre>
25656:
25657: </div>
25658:
25659: <p>If an attribute using the unquoted attribute syntax is to be
25660: followed by another attribute or by the optional U+002F SOLIDUS
25661: character (/) allowed in step 6 of the <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> syntax above, then there
25662: must be a <a href="#space-character">space character</a> separating the two.</p>
25663:
25664: </dd>
25665:
25666: <dt>Single-quoted attribute value syntax</dt>
25667:
25668: <dd>
25669:
25670: <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
25671: followed by zero or more <a href="#space-character" title="space character">space
25672: characters</a>, followed by a single U+003D EQUALS SIGN
25673: character, followed by zero or more <a href="#space-character" title="space
25674: character">space characters</a>, followed by a single U+0027
25675: APOSTROPHE character ('), followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
25676: addition to the requirements given above for attribute values,
25677: must not contain any literal U+0027 APOSTROPHE characters ('), and
25678: finally followed by a second single U+0027 APOSTROPHE character
25679: (').</p>
25680:
25681: <div class="example">
25682:
25683: <p>In the following example, the <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute is given with the
25684: single-quoted attribute value syntax:</p>
25685:
25686: <pre><input <em>type='checkbox'</em>></pre>
25687:
25688: </div>
25689:
25690: <p>If an attribute using the single-quoted attribute syntax is to
25691: be followed by another attribute, then there must be a <a href="#space-character">space
25692: character</a> separating the two.</p>
25693:
25694: </dd>
25695:
25696: <dt>Double-quoted attribute value syntax</dt>
25697:
25698: <dd>
25699:
25700: <p>The <a href="#syntax-attribute-name" title="syntax-attribute-name">attribute name</a>,
25701: followed by zero or more <a href="#space-character" title="space character">space
25702: characters</a>, followed by a single U+003D EQUALS SIGN
25703: character, followed by zero or more <a href="#space-character" title="space
25704: character">space characters</a>, followed by a single U+0022
25705: QUOTATION MARK character ("), followed by the <a href="#syntax-attribute-value" title="syntax-attribute-value">attribute value</a>, which, in
25706: addition to the requirements given above for attribute values,
25707: must not contain any literal U+0022 QUOTATION MARK characters ("),
25708: and finally followed by a second single U+0022 QUOTATION MARK
25709: character (").</p>
25710:
25711: <div class="example">
25712:
25713: <p>In the following example, the <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code> attribute is given with the
25714: double-quoted attribute value syntax:</p>
25715:
25716: <pre><input <em>name="be evil"</em>></pre>
25717:
25718: </div>
25719:
25720: <p>If an attribute using the double-quoted attribute syntax is to
25721: be followed by another attribute, then there must be a <a href="#space-character">space
25722: character</a> separating the two.</p>
25723:
25724: </dd>
25725:
25726: </dl><p>There must never be two or more attributes on the same start tag
25727: whose names are an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for
25728: each other.</p><hr><p>When a <a href="#foreign-elements" title="foreign elements">foreign element</a> has
25729: one of the namespaced attributes given by the local name and
25730: namespace of the first and second cells of a row from the following
25731: table, it must be written using the name given by the third cell
25732: from the same row.</p><table><thead><tr><th> Local name </th><th> Namespace </th><th> Attribute name
25733: </th></tr></thead><tbody><tr><td> <code title="">actuate</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:actuate</code>
25734: </td></tr><tr><td> <code title="">arcrole</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:arcrole</code>
25735: </td></tr><tr><td> <code title="">href</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:href</code>
25736: </td></tr><tr><td> <code title="">role</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:role</code>
25737: </td></tr><tr><td> <code title="">show</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:show</code>
25738: </td></tr><tr><td> <code title="">title</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:title</code>
25739: </td></tr><tr><td> <code title="">type</code> </td><td> <a href="#xlink-namespace">XLink namespace</a> </td><td> <code title="">xlink:type</code>
25740: </td></tr><tr><td> <code title="">base</code> </td><td> <a href="#xml-namespace">XML namespace</a> </td><td> <code title="">xml:base</code>
25741: </td></tr><tr><td> <code title="">lang</code> </td><td> <a href="#xml-namespace">XML namespace</a> </td><td> <code title="">xml:lang</code>
25742: </td></tr><tr><td> <code title="">space</code> </td><td> <a href="#xml-namespace">XML namespace</a> </td><td> <code title="">xml:space</code>
25743: </td></tr><tr><td> <code title="">xmlns</code> </td><td> <a href="#xmlns-namespace">XMLNS namespace</a> </td><td> <code title="">xmlns</code>
25744: </td></tr><tr><td> <code title="">xlink</code> </td><td> <a href="#xmlns-namespace">XMLNS namespace</a> </td><td> <code title="">xmlns:xlink</code>
25745: </td></tr></tbody></table><p>No other namespaced attribute can be expressed in <a href="#syntax">the
25746: HTML syntax</a>.</p><h5 id="optional-tags"><span class="secno">8.1.2.4 </span>Optional tags</h5><p>Certain tags can be <dfn id="syntax-tag-omission" role="button" tabindex="0" aria-haspopup="true">omitted</dfn>.</p><p class="note">Omitting an element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> in the situations
25747: described below does not mean the element is not present; it is
25748: implied, but it is still there. For example, an HTML document always
25749: has a root <code><a href="#the-html-element">html</a></code> element, even if the string <code title=""><html></code> doesn't appear anywhere in the markup.</p><p>An <code><a href="#the-html-element">html</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
25750: first thing inside the <code><a href="#the-html-element">html</a></code> element is not a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>An <code><a href="#the-html-element">html</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25751: tag</a> may be omitted if the <code><a href="#the-html-element">html</a></code> element is not
25752: immediately followed by a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="#the-head-element">head</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
25753: element is empty, or if the first thing inside the
25754: <code><a href="#the-head-element">head</a></code> element is an element.</p><p>A <code><a href="#the-head-element">head</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25755: tag</a> may be omitted if the <code><a href="#the-head-element">head</a></code> element is not
25756: immediately followed by a <a href="#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="#the-body-element">body</a></code> element's <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a> may be omitted if the
25757: element is empty, or if the first thing inside the <code><a href="#the-body-element">body</a></code>
25758: 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
25759: inside the <code><a href="#the-body-element">body</a></code> element is a <code><a href="#the-script-element">script</a></code> or
25760: <code><a href="#the-style-element">style</a></code> element. </p><p>A <code><a href="#the-body-element">body</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25761: tag</a> may be omitted if the <code><a href="#the-body-element">body</a></code> element is not
25762: immediately followed by a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="#the-li-element">li</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25763: tag</a> may be omitted if the <code><a href="#the-li-element">li</a></code> element is
25764: immediately followed by another <code><a href="#the-li-element">li</a></code> element or if there
25765: is no more content in the parent element.</p><p>A <code><a href="#the-dt-element">dt</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25766: tag</a> may be omitted if the <code><a href="#the-dt-element">dt</a></code> element is
25767: immediately followed by another <code><a href="#the-dt-element">dt</a></code> element or a
25768: <code><a href="#the-dd-element">dd</a></code> element.</p><p>A <code><a href="#the-dd-element">dd</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25769: tag</a> may be omitted if the <code><a href="#the-dd-element">dd</a></code> element is
25770: immediately followed by another <code><a href="#the-dd-element">dd</a></code> element or a
25771: <code><a href="#the-dt-element">dt</a></code> element, or if there is no more content in the
25772: parent element.</p><p>A <code><a href="#the-p-element">p</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25773: tag</a> may be omitted if the <code><a href="#the-p-element">p</a></code> element is
25774: immediately followed by an <code><a href="#the-address-element">address</a></code>,
25775: <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>,
25776: <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>,
25777: <code><a href="#the-fieldset-element">fieldset</a></code>, <code><a href="#the-footer-element">footer</a></code>, <code><a href="#the-form-element">form</a></code>,
25778: <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>,
25779: <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>, <code><a href="#the-header-element">header</a></code>,
25780: <code><a href="#the-hgroup-element">hgroup</a></code>, <code><a href="#the-hr-element">hr</a></code>, <code><a href="#the-menu-element">menu</a></code>,
25781: <code><a href="#the-nav-element">nav</a></code>, <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>,
25782: <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>,
25783: element, or if there is no more content in the parent element and
25784: the parent element is not an <code><a href="#the-a-element">a</a></code> element.</p><p>An <code><a href="#the-rt-element">rt</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25785: tag</a> may be omitted if the <code><a href="#the-rt-element">rt</a></code> element is
25786: immediately followed by an <code><a href="#the-rt-element">rt</a></code> or <code><a href="#the-rp-element">rp</a></code>
25787: element, or if there is no more content in the parent element.</p><p>An <code><a href="#the-rp-element">rp</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25788: tag</a> may be omitted if the <code><a href="#the-rp-element">rp</a></code> element is
25789: immediately followed by an <code><a href="#the-rt-element">rt</a></code> or <code><a href="#the-rp-element">rp</a></code>
25790: element, or if there is no more content in the parent element.</p><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
25791: <code><a href="#the-optgroup-element">optgroup</a></code> element is immediately followed by
25792: another <code><a href="#the-optgroup-element">optgroup</a></code> element, or if there is no
25793: more content in the parent element.</p><p>An <code><a href="#the-option-element">option</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25794: tag</a> may be omitted if the <code><a href="#the-option-element">option</a></code> element is
25795: immediately followed by another <code><a href="#the-option-element">option</a></code> element, or if
25796: it is immediately followed by an <code><a href="#the-optgroup-element">optgroup</a></code> element, or
25797: if there is no more content in the parent element.</p><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
25798: first thing inside the <code><a href="#the-colgroup-element">colgroup</a></code> element is a
25799: <code><a href="#the-col-element">col</a></code> element, and if the element is not immediately
25800: 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
25801: omitted if the element is empty.)</p><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
25802: <code><a href="#the-colgroup-element">colgroup</a></code> element is not immediately followed by a
25803: <a href="#space-character">space character</a> or a <a href="#syntax-comments" title="syntax-comments">comment</a>.</p><p>A <code><a href="#the-thead-element">thead</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25804: tag</a> may be omitted if the <code><a href="#the-thead-element">thead</a></code> element is
25805: immediately followed by a <code><a href="#the-tbody-element">tbody</a></code> or <code><a href="#the-tfoot-element">tfoot</a></code>
25806: element.</p><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
25807: first thing inside the <code><a href="#the-tbody-element">tbody</a></code> element is a
25808: <code><a href="#the-tr-element">tr</a></code> element, and if the element is not immediately
25809: preceded by a <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, or
25810: <code><a href="#the-tfoot-element">tfoot</a></code> element whose <a href="#syntax-end-tag" title="syntax-end-tag">end
25811: tag</a> has been omitted. (It can't be omitted if the element is
25812: empty.)</p><p>A <code><a href="#the-tbody-element">tbody</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25813: tag</a> may be omitted if the <code><a href="#the-tbody-element">tbody</a></code> element is
25814: immediately followed by a <code><a href="#the-tbody-element">tbody</a></code> or <code><a href="#the-tfoot-element">tfoot</a></code>
25815: element, or if there is no more content in the parent element.</p><p>A <code><a href="#the-tfoot-element">tfoot</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25816: tag</a> may be omitted if the <code><a href="#the-tfoot-element">tfoot</a></code> element is
25817: immediately followed by a <code><a href="#the-tbody-element">tbody</a></code> element, or if there is
25818: no more content in the parent element.</p><p>A <code><a href="#the-tr-element">tr</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25819: tag</a> may be omitted if the <code><a href="#the-tr-element">tr</a></code> element is
25820: immediately followed by another <code><a href="#the-tr-element">tr</a></code> element, or if there
25821: is no more content in the parent element.</p><p>A <code><a href="#the-td-element">td</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25822: tag</a> may be omitted if the <code><a href="#the-td-element">td</a></code> element is
25823: immediately followed by a <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code>
25824: element, or if there is no more content in the parent element.</p><p>A <code><a href="#the-th-element">th</a></code> element's <a href="#syntax-end-tag" title="syntax-end-tag">end
25825: tag</a> may be omitted if the <code><a href="#the-th-element">th</a></code> element is
25826: immediately followed by a <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code>
25827: element, or if there is no more content in the parent element.</p><p><strong>However</strong>, a <a href="#syntax-start-tag" title="syntax-start-tag">start
25828: tag</a> must never be omitted if it has any attributes.</p><h5 id="element-restrictions"><span class="secno">8.1.2.5 </span>Restrictions on content models</h5><p>For historical reasons, certain elements have extra restrictions
25829: beyond even the restrictions given by their content model.</p><p>A <code><a href="#the-table-element">table</a></code> element must not contain <code><a href="#the-tr-element">tr</a></code>
25830: elements, even though these elements are technically allowed inside
25831: <code><a href="#the-table-element">table</a></code> elements according to the content models
25832: described in this specification. (If a <code><a href="#the-tr-element">tr</a></code> element is
25833: put inside a <code><a href="#the-table-element">table</a></code> in the markup, it will in fact imply
25834: a <code><a href="#the-tbody-element">tbody</a></code> start tag before it.)</p><p>A single <a href="#syntax-newlines" title="syntax-newlines">newline</a> may be
25835: placed immediately after the <a href="#syntax-start-tag" title="syntax-start-tag">start
25836: tag</a> of <code><a href="#the-pre-element">pre</a></code> and <code><a href="#the-textarea-element">textarea</a></code>
25837: elements. This does not affect the processing of the element. The
25838: otherwise optional <a href="#syntax-newlines" title="syntax-newlines">newline</a>
25839: <em>must</em> be included if the element's contents themselves start
25840: with a <a href="#syntax-newlines" title="syntax-newlines">newline</a> (because
25841: otherwise the leading newline in the contents would be treated like
25842: the optional newline, and ignored).</p><div class="example">
25843: <p>The following two <code><a href="#the-pre-element">pre</a></code> blocks are equivalent:</p>
25844: <pre><pre>Hello</pre></pre>
25845: <pre><pre><br>Hello</pre></pre>
25846: </div><h5 id="cdata-rcdata-restrictions"><span class="secno">8.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</h5><p>The text in <a href="#raw-text-elements" title="raw text elements">raw text</a> and
25847: <a href="#rcdata-elements">RCDATA elements</a> must not contain any occurrences of the
25848: string "<code title=""></</code>" (U+003C LESS-THAN SIGN, U+002F
25849: SOLIDUS) followed by characters that case-insensitively match the
25850: tag name of the element followed by one of U+0009 CHARACTER
25851: TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D
25852: CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (>), or
25853: U+002F SOLIDUS (/).</p><h4 id="text-0"><span class="secno">8.1.3 </span>Text</h4><p><dfn id="syntax-text" role="button" tabindex="0" aria-haspopup="true">Text</dfn> is allowed inside elements,
25854: attribute values, and comments. Text must consist of <a href="#unicode-character" title="Unicode character">Unicode characters</a>. Text must not
25855: contain U+0000 characters. Text must not contain permanently
25856: undefined Unicode characters (noncharacters). Text must not contain
25857: control characters other than <a href="#space-character" title="space character">space
25858: characters</a>. Extra constraints are placed on what is and what
25859: is not allowed in text based on where the text is to be put, as
25860: described in the other sections.</p><h5 id="newlines"><span class="secno">8.1.3.1 </span>Newlines</h5><p><dfn id="syntax-newlines" role="button" tabindex="0" aria-haspopup="true">Newlines</dfn> in HTML may be
25861: represented either as U+000D CARRIAGE RETURN (CR) characters, U+000A
25862: LINE FEED (LF) characters, or pairs of U+000D CARRIAGE RETURN (CR),
25863: U+000A LINE FEED (LF) characters in that order.</p><p>Where <a href="#syntax-charref" title="syntax-charref">character references</a>
25864: are allowed, a character reference of a U+000A LINE FEED (LF)
25865: character (but not a U+000D CARRIAGE RETURN (CR) character) also
25866: represents a <a href="#syntax-newlines" title="syntax-newlines">newline</a>.</p><h4 id="character-references"><span class="secno">8.1.4 </span>Character references</h4><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" role="button" tabindex="0" aria-haspopup="true">character references</dfn>. These can be used
25867: to escape characters that couldn't otherwise legally be included in
25868: <a href="#syntax-text" title="syntax-text">text</a>.</p><p>Character references must start with a U+0026 AMPERSAND character
25869: (&). Following this, there are three possible kinds of character
25870: references:</p><dl><dt>Named character references</dt>
25871:
25872: <dd>The ampersand must be followed by one of the names given in the
25873: <a href="#named-character-references">named character references</a> section, using the same
25874: case. <span class="impl">The name must be one that is terminated by
25875: a U+003B SEMICOLON character (;).</span></dd>
25876:
25877:
25878: <dt>Decimal numeric character reference</dt>
25879:
25880: <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
25881: character (#), followed by one or more digits in the range U+0030
25882: DIGIT ZERO (0) to U+0039 DIGIT NINE (9), representing a base-ten
25883: integer that corresponds to a Unicode code point that is allowed
25884: according to the definition below. The digits must then be followed
25885: by a U+003B SEMICOLON character (;).</dd>
25886:
25887:
25888: <dt>Hexadecimal numeric character reference</dt>
25889:
25890: <dd>The ampersand must be followed by a U+0023 NUMBER SIGN
25891: character (#), which must be followed by either a U+0078 LATIN
25892: SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X
25893: character (X), which must then be followed by one or more digits in
25894: the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061
25895: LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, and U+0041
25896: LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F,
25897: representing a base-sixteen integer that corresponds to a Unicode
25898: code point that is allowed according to the definition below. The
25899: digits must then be followed by a U+003B SEMICOLON character
25900: (;).</dd>
25901:
25902: </dl><p>The numeric character reference forms described above are allowed
25903: to reference any Unicode code point other than U+0000, U+000D,
25904: permanently undefined Unicode characters (noncharacters), and
25905: control characters other than <a href="#space-character" title="space character">space
25906: characters</a>.</p><p>An <dfn id="syntax-ambiguous-ampersand" role="button" tabindex="0" aria-haspopup="true">ambiguous
25907: ampersand</dfn> is a U+0026 AMPERSAND character (&) that is
25908: followed by one or more characters in the range U+0030 DIGIT ZERO
25909: (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A
25910: LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A
25911: LATIN CAPITAL LETTER Z, followed by a U+003B SEMICOLON character
25912: (;), where these characters do not match any of the names given in
25913: the <a href="#named-character-references">named character references</a> section.</p><h4 id="cdata-sections"><span class="secno">8.1.5 </span>CDATA sections</h4><p><dfn id="syntax-cdata" role="button" tabindex="0" aria-haspopup="true">CDATA sections</dfn> must consist of
25914: the following components, in this order:</p><ol><li>The string "<code title=""><![CDATA[</code>".</li>
25915:
25916: <li>Optionally, <a href="#syntax-text" title="syntax-text">text</a>, with the
25917: additional restriction that the text must not contain the string
25918: "<code title="">]]></code>".</li>
25919:
25920: <li>The string "<code title="">]]></code>".</li>
25921:
25922: </ol><div class="example">
25923:
25924: <p>CDATA sections can only be used in foreign content (MathML or
25925: SVG). In this example, a CDATA section is used to escape the
25926: contents of an <code>ms</code> element:</p>
25927:
25928: <pre><p>You can add a string to a number, but this stringifies the number:</p>
25929: <math>
25930: <ms><![CDATA[x<y]]></ms>
25931: <mo>+</mo>
25932: <mn>3</mn>
25933: <mo>=</mo>
25934: <ms><![CDATA[x<y3]]></ms>
25935: </math></pre>
25936:
25937: </div><h4 id="comments"><span class="secno">8.1.6 </span>Comments</h4><p><dfn id="syntax-comments" role="button" tabindex="0" aria-haspopup="true">Comments</dfn> must start with the
25938: four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
25939: MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<code title=""><!--</code>). Following this sequence, the comment may
25940: have <a href="#syntax-text" title="syntax-text">text</a>, with the additional
25941: restriction that the text must not start with a single U+003E
25942: GREATER-THAN SIGN character (>), nor start with a U+002D
25943: HYPHEN-MINUS character (-) followed by a U+003E GREATER-THAN SIGN
25944: (>) character, nor contain two consecutive U+002D HYPHEN-MINUS
25945: characters (<code title="">--</code>), nor end with a U+002D
25946: HYPHEN-MINUS character (-). Finally, the comment must be ended by
25947: the three character sequence U+002D HYPHEN-MINUS, U+002D
25948: HYPHEN-MINUS, U+003E GREATER-THAN SIGN (<code title="">--></code>).</p><h3 id="named-character-references"><span class="secno">8.5 </span><dfn role="button" tabindex="0" aria-haspopup="true">Named character references</dfn></h3><p>This table lists the character reference names that are supported
25949: by HTML, and the code points to which they refer. It is referenced
25950: by the previous sections.</p><div id="named-character-references-table">
1.627 mike 25951: <table><thead><tr><th> Name </th> <th> Character(s) </th> <th> Glyph </th> </tr></thead><tbody><tr id="entity-Aacute"><td> <code title="">Aacute;</code> </td> <td> U+000C1 </td> <td> <span class="glyph" title="">Á</span> </td> </tr><tr class="impl" id="entity-Aacute-legacy"><td> <code title="">Aacute</code> </td> <td> U+000C1 </td> <td> <span title="">Á</span> </td> </tr><tr id="entity-aacute"><td> <code title="">aacute;</code> </td> <td> U+000E1 </td> <td> <span class="glyph" title="">á</span> </td> </tr><tr class="impl" id="entity-aacute-legacy"><td> <code title="">aacute</code> </td> <td> U+000E1 </td> <td> <span title="">á</span> </td> </tr><tr id="entity-Abreve"><td> <code title="">Abreve;</code> </td> <td> U+00102 </td> <td> <span class="glyph" title="">Ă</span> </td> </tr><tr id="entity-abreve"><td> <code title="">abreve;</code> </td> <td> U+00103 </td> <td> <span class="glyph" title="">ă</span> </td> </tr><tr id="entity-ac"><td> <code title="">ac;</code> </td> <td> U+0223E </td> <td> <span class="glyph" title="">∾</span> </td> </tr><tr id="entity-acd"><td> <code title="">acd;</code> </td> <td> U+0223F </td> <td> <span class="glyph" title="">∿</span> </td> </tr><tr id="entity-acE"><td> <code title="">acE;</code> </td> <td> U+0223E U+00333 </td> <td> <span class="glyph compound" title="">∾̳</span> </td> </tr><tr id="entity-Acirc"><td> <code title="">Acirc;</code> </td> <td> U+000C2 </td> <td> <span class="glyph" title="">Â</span> </td> </tr><tr class="impl" id="entity-Acirc-legacy"><td> <code title="">Acirc</code> </td> <td> U+000C2 </td> <td> <span title="">Â</span> </td> </tr><tr id="entity-acirc"><td> <code title="">acirc;</code> </td> <td> U+000E2 </td> <td> <span class="glyph" title="">â</span> </td> </tr><tr class="impl" id="entity-acirc-legacy"><td> <code title="">acirc</code> </td> <td> U+000E2 </td> <td> <span title="">â</span> </td> </tr><tr id="entity-acute"><td> <code title="">acute;</code> </td> <td> U+000B4 </td> <td> <span class="glyph" title="">´</span> </td> </tr><tr class="impl" id="entity-acute-legacy"><td> <code title="">acute</code> </td> <td> U+000B4 </td> <td> <span title="">´</span> </td> </tr><tr id="entity-Acy"><td> <code title="">Acy;</code> </td> <td> U+00410 </td> <td> <span class="glyph" title="">А</span> </td> </tr><tr id="entity-acy"><td> <code title="">acy;</code> </td> <td> U+00430 </td> <td> <span class="glyph" title="">а</span> </td> </tr><tr id="entity-AElig"><td> <code title="">AElig;</code> </td> <td> U+000C6 </td> <td> <span class="glyph" title="">Æ</span> </td> </tr><tr class="impl" id="entity-AElig-legacy"><td> <code title="">AElig</code> </td> <td> U+000C6 </td> <td> <span title="">Æ</span> </td> </tr><tr id="entity-aelig"><td> <code title="">aelig;</code> </td> <td> U+000E6 </td> <td> <span class="glyph" title="">æ</span> </td> </tr><tr class="impl" id="entity-aelig-legacy"><td> <code title="">aelig</code> </td> <td> U+000E6 </td> <td> <span title="">æ</span> </td> </tr><tr id="entity-af"><td> <code title="">af;</code> </td> <td> U+02061 </td> <td> <span class="glyph" title="">⁡</span> </td> </tr><tr id="entity-Afr"><td> <code title="">Afr;</code> </td> <td> U+1D504 </td> <td> <span class="glyph" title="">𝔄</span> </td> </tr><tr id="entity-afr"><td> <code title="">afr;</code> </td> <td> U+1D51E </td> <td> <span class="glyph" title="">𝔞</span> </td> </tr><tr id="entity-Agrave"><td> <code title="">Agrave;</code> </td> <td> U+000C0 </td> <td> <span class="glyph" title="">À</span> </td> </tr><tr class="impl" id="entity-Agrave-legacy"><td> <code title="">Agrave</code> </td> <td> U+000C0 </td> <td> <span title="">À</span> </td> </tr><tr id="entity-agrave"><td> <code title="">agrave;</code> </td> <td> U+000E0 </td> <td> <span class="glyph" title="">à</span> </td> </tr><tr class="impl" id="entity-agrave-legacy"><td> <code title="">agrave</code> </td> <td> U+000E0 </td> <td> <span title="">à</span> </td> </tr><tr id="entity-alefsym"><td> <code title="">alefsym;</code> </td> <td> U+02135 </td> <td> <span class="glyph" title="">ℵ</span> </td> </tr><tr id="entity-aleph"><td> <code title="">aleph;</code> </td> <td> U+02135 </td> <td> <span class="glyph" title="">ℵ</span> </td> </tr><tr id="entity-Alpha"><td> <code title="">Alpha;</code> </td> <td> U+00391 </td> <td> <span class="glyph" title="">Α</span> </td> </tr><tr id="entity-alpha"><td> <code title="">alpha;</code> </td> <td> U+003B1 </td> <td> <span class="glyph" title="">α</span> </td> </tr><tr id="entity-Amacr"><td> <code title="">Amacr;</code> </td> <td> U+00100 </td> <td> <span class="glyph" title="">Ā</span> </td> </tr><tr id="entity-amacr"><td> <code title="">amacr;</code> </td> <td> U+00101 </td> <td> <span class="glyph" title="">ā</span> </td> </tr><tr id="entity-amalg"><td> <code title="">amalg;</code> </td> <td> U+02A3F </td> <td> <span class="glyph" title="">⨿</span> </td> </tr><tr id="entity-AMP"><td> <code title="">AMP;</code> </td> <td> U+00026 </td> <td> <span class="glyph" title="">&</span> </td> </tr><tr class="impl" id="entity-AMP-legacy"><td> <code title="">AMP</code> </td> <td> U+00026 </td> <td> <span title="">&</span> </td> </tr><tr id="entity-amp"><td> <code title="">amp;</code> </td> <td> U+00026 </td> <td> <span class="glyph" title="">&</span> </td> </tr><tr class="impl" id="entity-amp-legacy"><td> <code title="">amp</code> </td> <td> U+00026 </td> <td> <span title="">&</span> </td> </tr><tr id="entity-And"><td> <code title="">And;</code> </td> <td> U+02A53 </td> <td> <span class="glyph" title="">⩓</span> </td> </tr><tr id="entity-and"><td> <code title="">and;</code> </td> <td> U+02227 </td> <td> <span class="glyph" title="">∧</span> </td> </tr><tr id="entity-andand"><td> <code title="">andand;</code> </td> <td> U+02A55 </td> <td> <span class="glyph" title="">⩕</span> </td> </tr><tr id="entity-andd"><td> <code title="">andd;</code> </td> <td> U+02A5C </td> <td> <span class="glyph" title="">⩜</span> </td> </tr><tr id="entity-andslope"><td> <code title="">andslope;</code> </td> <td> U+02A58 </td> <td> <span class="glyph" title="">⩘</span> </td> </tr><tr id="entity-andv"><td> <code title="">andv;</code> </td> <td> U+02A5A </td> <td> <span class="glyph" title="">⩚</span> </td> </tr><tr id="entity-ang"><td> <code title="">ang;</code> </td> <td> U+02220 </td> <td> <span class="glyph" title="">∠</span> </td> </tr><tr id="entity-ange"><td> <code title="">ange;</code> </td> <td> U+029A4 </td> <td> <span class="glyph" title="">⦤</span> </td> </tr><tr id="entity-angle"><td> <code title="">angle;</code> </td> <td> U+02220 </td> <td> <span class="glyph" title="">∠</span> </td> </tr><tr id="entity-angmsd"><td> <code title="">angmsd;</code> </td> <td> U+02221 </td> <td> <span class="glyph" title="">∡</span> </td> </tr><tr id="entity-angmsdaa"><td> <code title="">angmsdaa;</code> </td> <td> U+029A8 </td> <td> <span class="glyph" title="">⦨</span> </td> </tr><tr id="entity-angmsdab"><td> <code title="">angmsdab;</code> </td> <td> U+029A9 </td> <td> <span class="glyph" title="">⦩</span> </td> </tr><tr id="entity-angmsdac"><td> <code title="">angmsdac;</code> </td> <td> U+029AA </td> <td> <span class="glyph" title="">⦪</span> </td> </tr><tr id="entity-angmsdad"><td> <code title="">angmsdad;</code> </td> <td> U+029AB </td> <td> <span class="glyph" title="">⦫</span> </td> </tr><tr id="entity-angmsdae"><td> <code title="">angmsdae;</code> </td> <td> U+029AC </td> <td> <span class="glyph" title="">⦬</span> </td> </tr><tr id="entity-angmsdaf"><td> <code title="">angmsdaf;</code> </td> <td> U+029AD </td> <td> <span class="glyph" title="">⦭</span> </td> </tr><tr id="entity-angmsdag"><td> <code title="">angmsdag;</code> </td> <td> U+029AE </td> <td> <span class="glyph" title="">⦮</span> </td> </tr><tr id="entity-angmsdah"><td> <code title="">angmsdah;</code> </td> <td> U+029AF </td> <td> <span class="glyph" title="">⦯</span> </td> </tr><tr id="entity-angrt"><td> <code title="">angrt;</code> </td> <td> U+0221F </td> <td> <span class="glyph" title="">∟</span> </td> </tr><tr id="entity-angrtvb"><td> <code title="">angrtvb;</code> </td> <td> U+022BE </td> <td> <span class="glyph" title="">⊾</span> </td> </tr><tr id="entity-angrtvbd"><td> <code title="">angrtvbd;</code> </td> <td> U+0299D </td> <td> <span class="glyph" title="">⦝</span> </td> </tr><tr id="entity-angsph"><td> <code title="">angsph;</code> </td> <td> U+02222 </td> <td> <span class="glyph" title="">∢</span> </td> </tr><tr id="entity-angst"><td> <code title="">angst;</code> </td> <td> U+000C5 </td> <td> <span class="glyph" title="">Å</span> </td> </tr><tr id="entity-angzarr"><td> <code title="">angzarr;</code> </td> <td> U+0237C </td> <td> <span class="glyph" title="">⍼</span> </td> </tr><tr id="entity-Aogon"><td> <code title="">Aogon;</code> </td> <td> U+00104 </td> <td> <span class="glyph" title="">Ą</span> </td> </tr><tr id="entity-aogon"><td> <code title="">aogon;</code> </td> <td> U+00105 </td> <td> <span class="glyph" title="">ą</span> </td> </tr><tr id="entity-Aopf"><td> <code title="">Aopf;</code> </td> <td> U+1D538 </td> <td> <span class="glyph" title="">𝔸</span> </td> </tr><tr id="entity-aopf"><td> <code title="">aopf;</code> </td> <td> U+1D552 </td> <td> <span class="glyph" title="">𝕒</span> </td> </tr><tr id="entity-ap"><td> <code title="">ap;</code> </td> <td> U+02248 </td> <td> <span class="glyph" title="">≈</span> </td> </tr><tr id="entity-apacir"><td> <code title="">apacir;</code> </td> <td> U+02A6F </td> <td> <span class="glyph" title="">⩯</span> </td> </tr><tr id="entity-apE"><td> <code title="">apE;</code> </td> <td> U+02A70 </td> <td> <span class="glyph" title="">⩰</span> </td> </tr><tr id="entity-ape"><td> <code title="">ape;</code> </td> <td> U+0224A </td> <td> <span class="glyph" title="">≊</span> </td> </tr><tr id="entity-apid"><td> <code title="">apid;</code> </td> <td> U+0224B </td> <td> <span class="glyph" title="">≋</span> </td> </tr><tr id="entity-apos"><td> <code title="">apos;</code> </td> <td> U+00027 </td> <td> <span class="glyph" title="">'</span> </td> </tr><tr id="entity-ApplyFunction"><td> <code title="">ApplyFunction;</code> </td> <td> U+02061 </td> <td> <span class="glyph" title="">⁡</span> </td> </tr><tr id="entity-approx"><td> <code title="">approx;</code> </td> <td> U+02248 </td> <td> <span class="glyph" title="">≈</span> </td> </tr><tr id="entity-approxeq"><td> <code title="">approxeq;</code> </td> <td> U+0224A </td> <td> <span class="glyph" title="">≊</span> </td> </tr><tr id="entity-Aring"><td> <code title="">Aring;</code> </td> <td> U+000C5 </td> <td> <span class="glyph" title="">Å</span> </td> </tr><tr class="impl" id="entity-Aring-legacy"><td> <code title="">Aring</code> </td> <td> U+000C5 </td> <td> <span title="">Å</span> </td> </tr><tr id="entity-aring"><td> <code title="">aring;</code> </td> <td> U+000E5 </td> <td> <span class="glyph" title="">å</span> </td> </tr><tr class="impl" id="entity-aring-legacy"><td> <code title="">aring</code> </td> <td> U+000E5 </td> <td> <span title="">å</span> </td> </tr><tr id="entity-Ascr"><td> <code title="">Ascr;</code> </td> <td> U+1D49C </td> <td> <span class="glyph" title="">𝒜</span> </td> </tr><tr id="entity-ascr"><td> <code title="">ascr;</code> </td> <td> U+1D4B6 </td> <td> <span class="glyph" title="">𝒶</span> </td> </tr><tr id="entity-Assign"><td> <code title="">Assign;</code> </td> <td> U+02254 </td> <td> <span class="glyph" title="">≔</span> </td> </tr><tr id="entity-ast"><td> <code title="">ast;</code> </td> <td> U+0002A </td> <td> <span class="glyph" title="">*</span> </td> </tr><tr id="entity-asymp"><td> <code title="">asymp;</code> </td> <td> U+02248 </td> <td> <span class="glyph" title="">≈</span> </td> </tr><tr id="entity-asympeq"><td> <code title="">asympeq;</code> </td> <td> U+0224D </td> <td> <span class="glyph" title="">≍</span> </td> </tr><tr id="entity-Atilde"><td> <code title="">Atilde;</code> </td> <td> U+000C3 </td> <td> <span class="glyph" title="">Ã</span> </td> </tr><tr class="impl" id="entity-Atilde-legacy"><td> <code title="">Atilde</code> </td> <td> U+000C3 </td> <td> <span title="">Ã</span> </td> </tr><tr id="entity-atilde"><td> <code title="">atilde;</code> </td> <td> U+000E3 </td> <td> <span class="glyph" title="">ã</span> </td> </tr><tr class="impl" id="entity-atilde-legacy"><td> <code title="">atilde</code> </td> <td> U+000E3 </td> <td> <span title="">ã</span> </td> </tr><tr id="entity-Auml"><td> <code title="">Auml;</code> </td> <td> U+000C4 </td> <td> <span class="glyph" title="">Ä</span> </td> </tr><tr class="impl" id="entity-Auml-legacy"><td> <code title="">Auml</code> </td> <td> U+000C4 </td> <td> <span title="">Ä</span> </td> </tr><tr id="entity-auml"><td> <code title="">auml;</code> </td> <td> U+000E4 </td> <td> <span class="glyph" title="">ä</span> </td> </tr><tr class="impl" id="entity-auml-legacy"><td> <code title="">auml</code> </td> <td> U+000E4 </td> <td> <span title="">ä</span> </td> </tr><tr id="entity-awconint"><td> <code title="">awconint;</code> </td> <td> U+02233 </td> <td> <span class="glyph" title="">∳</span> </td> </tr><tr id="entity-awint"><td> <code title="">awint;</code> </td> <td> U+02A11 </td> <td> <span class="glyph" title="">⨑</span> </td> </tr><tr id="entity-backcong"><td> <code title="">backcong;</code> </td> <td> U+0224C </td> <td> <span class="glyph" title="">≌</span> </td> </tr><tr id="entity-backepsilon"><td> <code title="">backepsilon;</code> </td> <td> U+003F6 </td> <td> <span class="glyph" title="">϶</span> </td> </tr><tr id="entity-backprime"><td> <code title="">backprime;</code> </td> <td> U+02035 </td> <td> <span class="glyph" title="">‵</span> </td> </tr><tr id="entity-backsim"><td> <code title="">backsim;</code> </td> <td> U+0223D </td> <td> <span class="glyph" title="">∽</span> </td> </tr><tr id="entity-backsimeq"><td> <code title="">backsimeq;</code> </td> <td> U+022CD </td> <td> <span class="glyph" title="">⋍</span> </td> </tr><tr id="entity-Backslash"><td> <code title="">Backslash;</code> </td> <td> U+02216 </td> <td> <span class="glyph" title="">∖</span> </td> </tr><tr id="entity-Barv"><td> <code title="">Barv;</code> </td> <td> U+02AE7 </td> <td> <span class="glyph" title="">⫧</span> </td> </tr><tr id="entity-barvee"><td> <code title="">barvee;</code> </td> <td> U+022BD </td> <td> <span class="glyph" title="">⊽</span> </td> </tr><tr id="entity-Barwed"><td> <code title="">Barwed;</code> </td> <td> U+02306 </td> <td> <span class="glyph" title="">⌆</span> </td> </tr><tr id="entity-barwed"><td> <code title="">barwed;</code> </td> <td> U+02305 </td> <td> <span class="glyph" title="">⌅</span> </td> </tr><tr id="entity-barwedge"><td> <code title="">barwedge;</code> </td> <td> U+02305 </td> <td> <span class="glyph" title="">⌅</span> </td> </tr><tr id="entity-bbrk"><td> <code title="">bbrk;</code> </td> <td> U+023B5 </td> <td> <span class="glyph" title="">⎵</span> </td> </tr><tr id="entity-bbrktbrk"><td> <code title="">bbrktbrk;</code> </td> <td> U+023B6 </td> <td> <span class="glyph" title="">⎶</span> </td> </tr><tr id="entity-bcong"><td> <code title="">bcong;</code> </td> <td> U+0224C </td> <td> <span class="glyph" title="">≌</span> </td> </tr><tr id="entity-Bcy"><td> <code title="">Bcy;</code> </td> <td> U+00411 </td> <td> <span class="glyph" title="">Б</span> </td> </tr><tr id="entity-bcy"><td> <code title="">bcy;</code> </td> <td> U+00431 </td> <td> <span class="glyph" title="">б</span> </td> </tr><tr id="entity-bdquo"><td> <code title="">bdquo;</code> </td> <td> U+0201E </td> <td> <span class="glyph" title="">„</span> </td> </tr><tr id="entity-becaus"><td> <code title="">becaus;</code> </td> <td> U+02235 </td> <td> <span class="glyph" title="">∵</span> </td> </tr><tr id="entity-Because"><td> <code title="">Because;</code> </td> <td> U+02235 </td> <td> <span class="glyph" title="">∵</span> </td> </tr><tr id="entity-because"><td> <code title="">because;</code> </td> <td> U+02235 </td> <td> <span class="glyph" title="">∵</span> </td> </tr><tr id="entity-bemptyv"><td> <code title="">bemptyv;</code> </td> <td> U+029B0 </td> <td> <span class="glyph" title="">⦰</span> </td> </tr><tr id="entity-bepsi"><td> <code title="">bepsi;</code> </td> <td> U+003F6 </td> <td> <span class="glyph" title="">϶</span> </td> </tr><tr id="entity-bernou"><td> <code title="">bernou;</code> </td> <td> U+0212C </td> <td> <span class="glyph" title="">ℬ</span> </td> </tr><tr id="entity-Bernoullis"><td> <code title="">Bernoullis;</code> </td> <td> U+0212C </td> <td> <span class="glyph" title="">ℬ</span> </td> </tr><tr id="entity-Beta"><td> <code title="">Beta;</code> </td> <td> U+00392 </td> <td> <span class="glyph" title="">Β</span> </td> </tr><tr id="entity-beta"><td> <code title="">beta;</code> </td> <td> U+003B2 </td> <td> <span class="glyph" title="">β</span> </td> </tr><tr id="entity-beth"><td> <code title="">beth;</code> </td> <td> U+02136 </td> <td> <span class="glyph" title="">ℶ</span> </td> </tr><tr id="entity-between"><td> <code title="">between;</code> </td> <td> U+0226C </td> <td> <span class="glyph" title="">≬</span> </td> </tr><tr id="entity-Bfr"><td> <code title="">Bfr;</code> </td> <td> U+1D505 </td> <td> <span class="glyph" title="">𝔅</span> </td> </tr><tr id="entity-bfr"><td> <code title="">bfr;</code> </td> <td> U+1D51F </td> <td> <span class="glyph" title="">𝔟</span> </td> </tr><tr id="entity-bigcap"><td> <code title="">bigcap;</code> </td> <td> U+022C2 </td> <td> <span class="glyph" title="">⋂</span> </td> </tr><tr id="entity-bigcirc"><td> <code title="">bigcirc;</code> </td> <td> U+025EF </td> <td> <span class="glyph" title="">◯</span> </td> </tr><tr id="entity-bigcup"><td> <code title="">bigcup;</code> </td> <td> U+022C3 </td> <td> <span class="glyph" title="">⋃</span> </td> </tr><tr id="entity-bigodot"><td> <code title="">bigodot;</code> </td> <td> U+02A00 </td> <td> <span class="glyph" title="">⨀</span> </td> </tr><tr id="entity-bigoplus"><td> <code title="">bigoplus;</code> </td> <td> U+02A01 </td> <td> <span class="glyph" title="">⨁</span> </td> </tr><tr id="entity-bigotimes"><td> <code title="">bigotimes;</code> </td> <td> U+02A02 </td> <td> <span class="glyph" title="">⨂</span> </td> </tr><tr id="entity-bigsqcup"><td> <code title="">bigsqcup;</code> </td> <td> U+02A06 </td> <td> <span class="glyph" title="">⨆</span> </td> </tr><tr id="entity-bigstar"><td> <code title="">bigstar;</code> </td> <td> U+02605 </td> <td> <span class="glyph" title="">★</span> </td> </tr><tr id="entity-bigtriangledown"><td> <code title="">bigtriangledown;</code> </td> <td> U+025BD </td> <td> <span class="glyph" title="">▽</span> </td> </tr><tr id="entity-bigtriangleup"><td> <code title="">bigtriangleup;</code> </td> <td> U+025B3 </td> <td> <span class="glyph" title="">△</span> </td> </tr><tr id="entity-biguplus"><td> <code title="">biguplus;</code> </td> <td> U+02A04 </td> <td> <span class="glyph" title="">⨄</span> </td> </tr><tr id="entity-bigvee"><td> <code title="">bigvee;</code> </td> <td> U+022C1 </td> <td> <span class="glyph" title="">⋁</span> </td> </tr><tr id="entity-bigwedge"><td> <code title="">bigwedge;</code> </td> <td> U+022C0 </td> <td> <span class="glyph" title="">⋀</span> </td> </tr><tr id="entity-bkarow"><td> <code title="">bkarow;</code> </td> <td> U+0290D </td> <td> <span class="glyph" title="">⤍</span> </td> </tr><tr id="entity-blacklozenge"><td> <code title="">blacklozenge;</code> </td> <td> U+029EB </td> <td> <span class="glyph" title="">⧫</span> </td> </tr><tr id="entity-blacksquare"><td> <code title="">blacksquare;</code> </td> <td> U+025AA </td> <td> <span class="glyph" title="">▪</span> </td> </tr><tr id="entity-blacktriangle"><td> <code title="">blacktriangle;</code> </td> <td> U+025B4 </td> <td> <span class="glyph" title="">▴</span> </td> </tr><tr id="entity-blacktriangledown"><td> <code title="">blacktriangledown;</code> </td> <td> U+025BE </td> <td> <span class="glyph" title="">▾</span> </td> </tr><tr id="entity-blacktriangleleft"><td> <code title="">blacktriangleleft;</code> </td> <td> U+025C2 </td> <td> <span class="glyph" title="">◂</span> </td> </tr><tr id="entity-blacktriangleright"><td> <code title="">blacktriangleright;</code> </td> <td> U+025B8 </td> <td> <span class="glyph" title="">▸</span> </td> </tr><tr id="entity-blank"><td> <code title="">blank;</code> </td> <td> U+02423 </td> <td> <span class="glyph" title="">␣</span> </td> </tr><tr id="entity-blk12"><td> <code title="">blk12;</code> </td> <td> U+02592 </td> <td> <span class="glyph" title="">▒</span> </td> </tr><tr id="entity-blk14"><td> <code title="">blk14;</code> </td> <td> U+02591 </td> <td> <span class="glyph" title="">░</span> </td> </tr><tr id="entity-blk34"><td> <code title="">blk34;</code> </td> <td> U+02593 </td> <td> <span class="glyph" title="">▓</span> </td> </tr><tr id="entity-block"><td> <code title="">block;</code> </td> <td> U+02588 </td> <td> <span class="glyph" title="">█</span> </td> </tr><tr id="entity-bne"><td> <code title="">bne;</code> </td> <td> U+0003D U+020E5 </td> <td> <span class="glyph compound" title="">=⃥</span> </td> </tr><tr id="entity-bnequiv"><td> <code title="">bnequiv;</code> </td> <td> U+02261 U+020E5 </td> <td> <span class="glyph compound" title="">≡⃥</span> </td> </tr><tr id="entity-bNot"><td> <code title="">bNot;</code> </td> <td> U+02AED </td> <td> <span class="glyph" title="">⫭</span> </td> </tr><tr id="entity-bnot"><td> <code title="">bnot;</code> </td> <td> U+02310 </td> <td> <span class="glyph" title="">⌐</span> </td> </tr><tr id="entity-Bopf"><td> <code title="">Bopf;</code> </td> <td> U+1D539 </td> <td> <span class="glyph" title="">𝔹</span> </td> </tr><tr id="entity-bopf"><td> <code title="">bopf;</code> </td> <td> U+1D553 </td> <td> <span class="glyph" title="">𝕓</span> </td> </tr><tr id="entity-bot"><td> <code title="">bot;</code> </td> <td> U+022A5 </td> <td> <span class="glyph" title="">⊥</span> </td> </tr><tr id="entity-bottom"><td> <code title="">bottom;</code> </td> <td> U+022A5 </td> <td> <span class="glyph" title="">⊥</span> </td> </tr><tr id="entity-bowtie"><td> <code title="">bowtie;</code> </td> <td> U+022C8 </td> <td> <span class="glyph" title="">⋈</span> </td> </tr><tr id="entity-boxbox"><td> <code title="">boxbox;</code> </td> <td> U+029C9 </td> <td> <span class="glyph" title="">⧉</span> </td> </tr><tr id="entity-boxDL"><td> <code title="">boxDL;</code> </td> <td> U+02557 </td> <td> <span class="glyph" title="">╗</span> </td> </tr><tr id="entity-boxDl"><td> <code title="">boxDl;</code> </td> <td> U+02556 </td> <td> <span class="glyph" title="">╖</span> </td> </tr><tr id="entity-boxdL"><td> <code title="">boxdL;</code> </td> <td> U+02555 </td> <td> <span class="glyph" title="">╕</span> </td> </tr><tr id="entity-boxdl"><td> <code title="">boxdl;</code> </td> <td> U+02510 </td> <td> <span class="glyph" title="">┐</span> </td> </tr><tr id="entity-boxDR"><td> <code title="">boxDR;</code> </td> <td> U+02554 </td> <td> <span class="glyph" title="">╔</span> </td> </tr><tr id="entity-boxDr"><td> <code title="">boxDr;</code> </td> <td> U+02553 </td> <td> <span class="glyph" title="">╓</span> </td> </tr><tr id="entity-boxdR"><td> <code title="">boxdR;</code> </td> <td> U+02552 </td> <td> <span class="glyph" title="">╒</span> </td> </tr><tr id="entity-boxdr"><td> <code title="">boxdr;</code> </td> <td> U+0250C </td> <td> <span class="glyph" title="">┌</span> </td> </tr><tr id="entity-boxH"><td> <code title="">boxH;</code> </td> <td> U+02550 </td> <td> <span class="glyph" title="">═</span> </td> </tr><tr id="entity-boxh"><td> <code title="">boxh;</code> </td> <td> U+02500 </td> <td> <span class="glyph" title="">─</span> </td> </tr><tr id="entity-boxHD"><td> <code title="">boxHD;</code> </td> <td> U+02566 </td> <td> <span class="glyph" title="">╦</span> </td> </tr><tr id="entity-boxHd"><td> <code title="">boxHd;</code> </td> <td> U+02564 </td> <td> <span class="glyph" title="">╤</span> </td> </tr><tr id="entity-boxhD"><td> <code title="">boxhD;</code> </td> <td> U+02565 </td> <td> <span class="glyph" title="">╥</span> </td> </tr><tr id="entity-boxhd"><td> <code title="">boxhd;</code> </td> <td> U+0252C </td> <td> <span class="glyph" title="">┬</span> </td> </tr><tr id="entity-boxHU"><td> <code title="">boxHU;</code> </td> <td> U+02569 </td> <td> <span class="glyph" title="">╩</span> </td> </tr><tr id="entity-boxHu"><td> <code title="">boxHu;</code> </td> <td> U+02567 </td> <td> <span class="glyph" title="">╧</span> </td> </tr><tr id="entity-boxhU"><td> <code title="">boxhU;</code> </td> <td> U+02568 </td> <td> <span class="glyph" title="">╨</span> </td> </tr><tr id="entity-boxhu"><td> <code title="">boxhu;</code> </td> <td> U+02534 </td> <td> <span class="glyph" title="">┴</span> </td> </tr><tr id="entity-boxminus"><td> <code title="">boxminus;</code> </td> <td> U+0229F </td> <td> <span class="glyph" title="">⊟</span> </td> </tr><tr id="entity-boxplus"><td> <code title="">boxplus;</code> </td> <td> U+0229E </td> <td> <span class="glyph" title="">⊞</span> </td> </tr><tr id="entity-boxtimes"><td> <code title="">boxtimes;</code> </td> <td> U+022A0 </td> <td> <span class="glyph" title="">⊠</span> </td> </tr><tr id="entity-boxUL"><td> <code title="">boxUL;</code> </td> <td> U+0255D </td> <td> <span class="glyph" title="">╝</span> </td> </tr><tr id="entity-boxUl"><td> <code title="">boxUl;</code> </td> <td> U+0255C </td> <td> <span class="glyph" title="">╜</span> </td> </tr><tr id="entity-boxuL"><td> <code title="">boxuL;</code> </td> <td> U+0255B </td> <td> <span class="glyph" title="">╛</span> </td> </tr><tr id="entity-boxul"><td> <code title="">boxul;</code> </td> <td> U+02518 </td> <td> <span class="glyph" title="">┘</span> </td> </tr><tr id="entity-boxUR"><td> <code title="">boxUR;</code> </td> <td> U+0255A </td> <td> <span class="glyph" title="">╚</span> </td> </tr><tr id="entity-boxUr"><td> <code title="">boxUr;</code> </td> <td> U+02559 </td> <td> <span class="glyph" title="">╙</span> </td> </tr><tr id="entity-boxuR"><td> <code title="">boxuR;</code> </td> <td> U+02558 </td> <td> <span class="glyph" title="">╘</span> </td> </tr><tr id="entity-boxur"><td> <code title="">boxur;</code> </td> <td> U+02514 </td> <td> <span class="glyph" title="">└</span> </td> </tr><tr id="entity-boxV"><td> <code title="">boxV;</code> </td> <td> U+02551 </td> <td> <span class="glyph" title="">║</span> </td> </tr><tr id="entity-boxv"><td> <code title="">boxv;</code> </td> <td> U+02502 </td> <td> <span class="glyph" title="">│</span> </td> </tr><tr id="entity-boxVH"><td> <code title="">boxVH;</code> </td> <td> U+0256C </td> <td> <span class="glyph" title="">╬</span> </td> </tr><tr id="entity-boxVh"><td> <code title="">boxVh;</code> </td> <td> U+0256B </td> <td> <span class="glyph" title="">╫</span> </td> </tr><tr id="entity-boxvH"><td> <code title="">boxvH;</code> </td> <td> U+0256A </td> <td> <span class="glyph" title="">╪</span> </td> </tr><tr id="entity-boxvh"><td> <code title="">boxvh;</code> </td> <td> U+0253C </td> <td> <span class="glyph" title="">┼</span> </td> </tr><tr id="entity-boxVL"><td> <code title="">boxVL;</code> </td> <td> U+02563 </td> <td> <span class="glyph" title="">╣</span> </td> </tr><tr id="entity-boxVl"><td> <code title="">boxVl;</code> </td> <td> U+02562 </td> <td> <span class="glyph" title="">╢</span> </td> </tr><tr id="entity-boxvL"><td> <code title="">boxvL;</code> </td> <td> U+02561 </td> <td> <span class="glyph" title="">╡</span> </td> </tr><tr id="entity-boxvl"><td> <code title="">boxvl;</code> </td> <td> U+02524 </td> <td> <span class="glyph" title="">┤</span> </td> </tr><tr id="entity-boxVR"><td> <code title="">boxVR;</code> </td> <td> U+02560 </td> <td> <span class="glyph" title="">╠</span> </td> </tr><tr id="entity-boxVr"><td> <code title="">boxVr;</code> </td> <td> U+0255F </td> <td> <span class="glyph" title="">╟</span> </td> </tr><tr id="entity-boxvR"><td> <code title="">boxvR;</code> </td> <td> U+0255E </td> <td> <span class="glyph" title="">╞</span> </td> </tr><tr id="entity-boxvr"><td> <code title="">boxvr;</code> </td> <td> U+0251C </td> <td> <span class="glyph" title="">├</span> </td> </tr><tr id="entity-bprime"><td> <code title="">bprime;</code> </td> <td> U+02035 </td> <td> <span class="glyph" title="">‵</span> </td> </tr><tr id="entity-Breve"><td> <code title="">Breve;</code> </td> <td> U+002D8 </td> <td> <span class="glyph" title="">˘</span> </td> </tr><tr id="entity-breve"><td> <code title="">breve;</code> </td> <td> U+002D8 </td> <td> <span class="glyph" title="">˘</span> </td> </tr><tr id="entity-brvbar"><td> <code title="">brvbar;</code> </td> <td> U+000A6 </td> <td> <span class="glyph" title="">¦</span> </td> </tr><tr class="impl" id="entity-brvbar-legacy"><td> <code title="">brvbar</code> </td> <td> U+000A6 </td> <td> <span title="">¦</span> </td> </tr><tr id="entity-Bscr"><td> <code title="">Bscr;</code> </td> <td> U+0212C </td> <td> <span class="glyph" title="">ℬ</span> </td> </tr><tr id="entity-bscr"><td> <code title="">bscr;</code> </td> <td> U+1D4B7 </td> <td> <span class="glyph" title="">𝒷</span> </td> </tr><tr id="entity-bsemi"><td> <code title="">bsemi;</code> </td> <td> U+0204F </td> <td> <span class="glyph" title="">⁏</span> </td> </tr><tr id="entity-bsim"><td> <code title="">bsim;</code> </td> <td> U+0223D </td> <td> <span class="glyph" title="">∽</span> </td> </tr><tr id="entity-bsime"><td> <code title="">bsime;</code> </td> <td> U+022CD </td> <td> <span class="glyph" title="">⋍</span> </td> </tr><tr id="entity-bsol"><td> <code title="">bsol;</code> </td> <td> U+0005C </td> <td> <span class="glyph" title="">\</span> </td> </tr><tr id="entity-bsolb"><td> <code title="">bsolb;</code> </td> <td> U+029C5 </td> <td> <span class="glyph" title="">⧅</span> </td> </tr><tr id="entity-bsolhsub"><td> <code title="">bsolhsub;</code> </td> <td> U+027C8 </td> <td> <span class="glyph" title="">⟈</span> </td> </tr><tr id="entity-bull"><td> <code title="">bull;</code> </td> <td> U+02022 </td> <td> <span class="glyph" title="">•</span> </td> </tr><tr id="entity-bullet"><td> <code title="">bullet;</code> </td> <td> U+02022 </td> <td> <span class="glyph" title="">•</span> </td> </tr><tr id="entity-bump"><td> <code title="">bump;</code> </td> <td> U+0224E </td> <td> <span class="glyph" title="">≎</span> </td> </tr><tr id="entity-bumpE"><td> <code title="">bumpE;</code> </td> <td> U+02AAE </td> <td> <span class="glyph" title="">⪮</span> </td> </tr><tr id="entity-bumpe"><td> <code title="">bumpe;</code> </td> <td> U+0224F </td> <td> <span class="glyph" title="">≏</span> </td> </tr><tr id="entity-Bumpeq"><td> <code title="">Bumpeq;</code> </td> <td> U+0224E </td> <td> <span class="glyph" title="">≎</span> </td> </tr><tr id="entity-bumpeq"><td> <code title="">bumpeq;</code> </td> <td> U+0224F </td> <td> <span class="glyph" title="">≏</span> </td> </tr><tr id="entity-Cacute"><td> <code title="">Cacute;</code> </td> <td> U+00106 </td> <td> <span class="glyph" title="">Ć</span> </td> </tr><tr id="entity-cacute"><td> <code title="">cacute;</code> </td> <td> U+00107 </td> <td> <span class="glyph" title="">ć</span> </td> </tr><tr id="entity-Cap"><td> <code title="">Cap;</code> </td> <td> U+022D2 </td> <td> <span class="glyph" title="">⋒</span> </td> </tr><tr id="entity-cap"><td> <code title="">cap;</code> </td> <td> U+02229 </td> <td> <span class="glyph" title="">∩</span> </td> </tr><tr id="entity-capand"><td> <code title="">capand;</code> </td> <td> U+02A44 </td> <td> <span class="glyph" title="">⩄</span> </td> </tr><tr id="entity-capbrcup"><td> <code title="">capbrcup;</code> </td> <td> U+02A49 </td> <td> <span class="glyph" title="">⩉</span> </td> </tr><tr id="entity-capcap"><td> <code title="">capcap;</code> </td> <td> U+02A4B </td> <td> <span class="glyph" title="">⩋</span> </td> </tr><tr id="entity-capcup"><td> <code title="">capcup;</code> </td> <td> U+02A47 </td> <td> <span class="glyph" title="">⩇</span> </td> </tr><tr id="entity-capdot"><td> <code title="">capdot;</code> </td> <td> U+02A40 </td> <td> <span class="glyph" title="">⩀</span> </td> </tr><tr id="entity-CapitalDifferentialD"><td> <code title="">CapitalDifferentialD;</code> </td> <td> U+02145 </td> <td> <span class="glyph" title="">ⅅ</span> </td> </tr><tr id="entity-caps"><td> <code title="">caps;</code> </td> <td> U+02229 U+0FE00 </td> <td> <span class="glyph compound" title="">∩︀</span> </td> </tr><tr id="entity-caret"><td> <code title="">caret;</code> </td> <td> U+02041 </td> <td> <span class="glyph" title="">⁁</span> </td> </tr><tr id="entity-caron"><td> <code title="">caron;</code> </td> <td> U+002C7 </td> <td> <span class="glyph" title="">ˇ</span> </td> </tr><tr id="entity-Cayleys"><td> <code title="">Cayleys;</code> </td> <td> U+0212D </td> <td> <span class="glyph" title="">ℭ</span> </td> </tr><tr id="entity-ccaps"><td> <code title="">ccaps;</code> </td> <td> U+02A4D </td> <td> <span class="glyph" title="">⩍</span> </td> </tr><tr id="entity-Ccaron"><td> <code title="">Ccaron;</code> </td> <td> U+0010C </td> <td> <span class="glyph" title="">Č</span> </td> </tr><tr id="entity-ccaron"><td> <code title="">ccaron;</code> </td> <td> U+0010D </td> <td> <span class="glyph" title="">č</span> </td> </tr><tr id="entity-Ccedil"><td> <code title="">Ccedil;</code> </td> <td> U+000C7 </td> <td> <span class="glyph" title="">Ç</span> </td> </tr><tr class="impl" id="entity-Ccedil-legacy"><td> <code title="">Ccedil</code> </td> <td> U+000C7 </td> <td> <span title="">Ç</span> </td> </tr><tr id="entity-ccedil"><td> <code title="">ccedil;</code> </td> <td> U+000E7 </td> <td> <span class="glyph" title="">ç</span> </td> </tr><tr class="impl" id="entity-ccedil-legacy"><td> <code title="">ccedil</code> </td> <td> U+000E7 </td> <td> <span title="">ç</span> </td> </tr><tr id="entity-Ccirc"><td> <code title="">Ccirc;</code> </td> <td> U+00108 </td> <td> <span class="glyph" title="">Ĉ</span> </td> </tr><tr id="entity-ccirc"><td> <code title="">ccirc;</code> </td> <td> U+00109 </td> <td> <span class="glyph" title="">ĉ</span> </td> </tr><tr id="entity-Cconint"><td> <code title="">Cconint;</code> </td> <td> U+02230 </td> <td> <span class="glyph" title="">∰</span> </td> </tr><tr id="entity-ccups"><td> <code title="">ccups;</code> </td> <td> U+02A4C </td> <td> <span class="glyph" title="">⩌</span> </td> </tr><tr id="entity-ccupssm"><td> <code title="">ccupssm;</code> </td> <td> U+02A50 </td> <td> <span class="glyph" title="">⩐</span> </td> </tr><tr id="entity-Cdot"><td> <code title="">Cdot;</code> </td> <td> U+0010A </td> <td> <span class="glyph" title="">Ċ</span> </td> </tr><tr id="entity-cdot"><td> <code title="">cdot;</code> </td> <td> U+0010B </td> <td> <span class="glyph" title="">ċ</span> </td> </tr><tr id="entity-cedil"><td> <code title="">cedil;</code> </td> <td> U+000B8 </td> <td> <span class="glyph" title="">¸</span> </td> </tr><tr class="impl" id="entity-cedil-legacy"><td> <code title="">cedil</code> </td> <td> U+000B8 </td> <td> <span title="">¸</span> </td> </tr><tr id="entity-Cedilla"><td> <code title="">Cedilla;</code> </td> <td> U+000B8 </td> <td> <span class="glyph" title="">¸</span> </td> </tr><tr id="entity-cemptyv"><td> <code title="">cemptyv;</code> </td> <td> U+029B2 </td> <td> <span class="glyph" title="">⦲</span> </td> </tr><tr id="entity-cent"><td> <code title="">cent;</code> </td> <td> U+000A2 </td> <td> <span class="glyph" title="">¢</span> </td> </tr><tr class="impl" id="entity-cent-legacy"><td> <code title="">cent</code> </td> <td> U+000A2 </td> <td> <span title="">¢</span> </td> </tr><tr id="entity-CenterDot"><td> <code title="">CenterDot;</code> </td> <td> U+000B7 </td> <td> <span class="glyph" title="">·</span> </td> </tr><tr id="entity-centerdot"><td> <code title="">centerdot;</code> </td> <td> U+000B7 </td> <td> <span class="glyph" title="">·</span> </td> </tr><tr id="entity-Cfr"><td> <code title="">Cfr;</code> </td> <td> U+0212D </td> <td> <span class="glyph" title="">ℭ</span> </td> </tr><tr id="entity-cfr"><td> <code title="">cfr;</code> </td> <td> U+1D520 </td> <td> <span class="glyph" title="">𝔠</span> </td> </tr><tr id="entity-CHcy"><td> <code title="">CHcy;</code> </td> <td> U+00427 </td> <td> <span class="glyph" title="">Ч</span> </td> </tr><tr id="entity-chcy"><td> <code title="">chcy;</code> </td> <td> U+00447 </td> <td> <span class="glyph" title="">ч</span> </td> </tr><tr id="entity-check"><td> <code title="">check;</code> </td> <td> U+02713 </td> <td> <span class="glyph" title="">✓</span> </td> </tr><tr id="entity-checkmark"><td> <code title="">checkmark;</code> </td> <td> U+02713 </td> <td> <span class="glyph" title="">✓</span> </td> </tr><tr id="entity-Chi"><td> <code title="">Chi;</code> </td> <td> U+003A7 </td> <td> <span class="glyph" title="">Χ</span> </td> </tr><tr id="entity-chi"><td> <code title="">chi;</code> </td> <td> U+003C7 </td> <td> <span class="glyph" title="">χ</span> </td> </tr><tr id="entity-cir"><td> <code title="">cir;</code> </td> <td> U+025CB </td> <td> <span class="glyph" title="">○</span> </td> </tr><tr id="entity-circ"><td> <code title="">circ;</code> </td> <td> U+002C6 </td> <td> <span class="glyph" title="">ˆ</span> </td> </tr><tr id="entity-circeq"><td> <code title="">circeq;</code> </td> <td> U+02257 </td> <td> <span class="glyph" title="">≗</span> </td> </tr><tr id="entity-circlearrowleft"><td> <code title="">circlearrowleft;</code> </td> <td> U+021BA </td> <td> <span class="glyph" title="">↺</span> </td> </tr><tr id="entity-circlearrowright"><td> <code title="">circlearrowright;</code> </td> <td> U+021BB </td> <td> <span class="glyph" title="">↻</span> </td> </tr><tr id="entity-circledast"><td> <code title="">circledast;</code> </td> <td> U+0229B </td> <td> <span class="glyph" title="">⊛</span> </td> </tr><tr id="entity-circledcirc"><td> <code title="">circledcirc;</code> </td> <td> U+0229A </td> <td> <span class="glyph" title="">⊚</span> </td> </tr><tr id="entity-circleddash"><td> <code title="">circleddash;</code> </td> <td> U+0229D </td> <td> <span class="glyph" title="">⊝</span> </td> </tr><tr id="entity-CircleDot"><td> <code title="">CircleDot;</code> </td> <td> U+02299 </td> <td> <span class="glyph" title="">⊙</span> </td> </tr><tr id="entity-circledR"><td> <code title="">circledR;</code> </td> <td> U+000AE </td> <td> <span class="glyph" title="">®</span> </td> </tr><tr id="entity-circledS"><td> <code title="">circledS;</code> </td> <td> U+024C8 </td> <td> <span class="glyph" title="">Ⓢ</span> </td> </tr><tr id="entity-CircleMinus"><td> <code title="">CircleMinus;</code> </td> <td> U+02296 </td> <td> <span class="glyph" title="">⊖</span> </td> </tr><tr id="entity-CirclePlus"><td> <code title="">CirclePlus;</code> </td> <td> U+02295 </td> <td> <span class="glyph" title="">⊕</span> </td> </tr><tr id="entity-CircleTimes"><td> <code title="">CircleTimes;</code> </td> <td> U+02297 </td> <td> <span class="glyph" title="">⊗</span> </td> </tr><tr id="entity-cirE"><td> <code title="">cirE;</code> </td> <td> U+029C3 </td> <td> <span class="glyph" title="">⧃</span> </td> </tr><tr id="entity-cire"><td> <code title="">cire;</code> </td> <td> U+02257 </td> <td> <span class="glyph" title="">≗</span> </td> </tr><tr id="entity-cirfnint"><td> <code title="">cirfnint;</code> </td> <td> U+02A10 </td> <td> <span class="glyph" title="">⨐</span> </td> </tr><tr id="entity-cirmid"><td> <code title="">cirmid;</code> </td> <td> U+02AEF </td> <td> <span class="glyph" title="">⫯</span> </td> </tr><tr id="entity-cirscir"><td> <code title="">cirscir;</code> </td> <td> U+029C2 </td> <td> <span class="glyph" title="">⧂</span> </td> </tr><tr id="entity-ClockwiseContourIntegral"><td> <code title="">ClockwiseContourIntegral;</code> </td> <td> U+02232 </td> <td> <span class="glyph" title="">∲</span> </td> </tr><tr id="entity-CloseCurlyDoubleQuote"><td> <code title="">CloseCurlyDoubleQuote;</code> </td> <td> U+0201D </td> <td> <span class="glyph" title="">”</span> </td> </tr><tr id="entity-CloseCurlyQuote"><td> <code title="">CloseCurlyQuote;</code> </td> <td> U+02019 </td> <td> <span class="glyph" title="">’</span> </td> </tr><tr id="entity-clubs"><td> <code title="">clubs;</code> </td> <td> U+02663 </td> <td> <span class="glyph" title="">♣</span> </td> </tr><tr id="entity-clubsuit"><td> <code title="">clubsuit;</code> </td> <td> U+02663 </td> <td> <span class="glyph" title="">♣</span> </td> </tr><tr id="entity-Colon"><td> <code title="">Colon;</code> </td> <td> U+02237 </td> <td> <span class="glyph" title="">∷</span> </td> </tr><tr id="entity-colon"><td> <code title="">colon;</code> </td> <td> U+0003A </td> <td> <span class="glyph" title="">:</span> </td> </tr><tr id="entity-Colone"><td> <code title="">Colone;</code> </td> <td> U+02A74 </td> <td> <span class="glyph" title="">⩴</span> </td> </tr><tr id="entity-colone"><td> <code title="">colone;</code> </td> <td> U+02254 </td> <td> <span class="glyph" title="">≔</span> </td> </tr><tr id="entity-coloneq"><td> <code title="">coloneq;</code> </td> <td> U+02254 </td> <td> <span class="glyph" title="">≔</span> </td> </tr><tr id="entity-comma"><td> <code title="">comma;</code> </td> <td> U+0002C </td> <td> <span class="glyph" title="">,</span> </td> </tr><tr id="entity-commat"><td> <code title="">commat;</code> </td> <td> U+00040 </td> <td> <span class="glyph" title="">@</span> </td> </tr><tr id="entity-comp"><td> <code title="">comp;</code> </td> <td> U+02201 </td> <td> <span class="glyph" title="">∁</span> </td> </tr><tr id="entity-compfn"><td> <code title="">compfn;</code> </td> <td> U+02218 </td> <td> <span class="glyph" title="">∘</span> </td> </tr><tr id="entity-complement"><td> <code title="">complement;</code> </td> <td> U+02201 </td> <td> <span class="glyph" title="">∁</span> </td> </tr><tr id="entity-complexes"><td> <code title="">complexes;</code> </td> <td> U+02102 </td> <td> <span class="glyph" title="">ℂ</span> </td> </tr><tr id="entity-cong"><td> <code title="">cong;</code> </td> <td> U+02245 </td> <td> <span class="glyph" title="">≅</span> </td> </tr><tr id="entity-congdot"><td> <code title="">congdot;</code> </td> <td> U+02A6D </td> <td> <span class="glyph" title="">⩭</span> </td> </tr><tr id="entity-Congruent"><td> <code title="">Congruent;</code> </td> <td> U+02261 </td> <td> <span class="glyph" title="">≡</span> </td> </tr><tr id="entity-Conint"><td> <code title="">Conint;</code> </td> <td> U+0222F </td> <td> <span class="glyph" title="">∯</span> </td> </tr><tr id="entity-conint"><td> <code title="">conint;</code> </td> <td> U+0222E </td> <td> <span class="glyph" title="">∮</span> </td> </tr><tr id="entity-ContourIntegral"><td> <code title="">ContourIntegral;</code> </td> <td> U+0222E </td> <td> <span class="glyph" title="">∮</span> </td> </tr><tr id="entity-Copf"><td> <code title="">Copf;</code> </td> <td> U+02102 </td> <td> <span class="glyph" title="">ℂ</span> </td> </tr><tr id="entity-copf"><td> <code title="">copf;</code> </td> <td> U+1D554 </td> <td> <span class="glyph" title="">𝕔</span> </td> </tr><tr id="entity-coprod"><td> <code title="">coprod;</code> </td> <td> U+02210 </td> <td> <span class="glyph" title="">∐</span> </td> </tr><tr id="entity-Coproduct"><td> <code title="">Coproduct;</code> </td> <td> U+02210 </td> <td> <span class="glyph" title="">∐</span> </td> </tr><tr id="entity-COPY"><td> <code title="">COPY;</code> </td> <td> U+000A9 </td> <td> <span class="glyph" title="">©</span> </td> </tr><tr class="impl" id="entity-COPY-legacy"><td> <code title="">COPY</code> </td> <td> U+000A9 </td> <td> <span title="">©</span> </td> </tr><tr id="entity-copy"><td> <code title="">copy;</code> </td> <td> U+000A9 </td> <td> <span class="glyph" title="">©</span> </td> </tr><tr class="impl" id="entity-copy-legacy"><td> <code title="">copy</code> </td> <td> U+000A9 </td> <td> <span title="">©</span> </td> </tr><tr id="entity-copysr"><td> <code title="">copysr;</code> </td> <td> U+02117 </td> <td> <span class="glyph" title="">℗</span> </td> </tr><tr id="entity-CounterClockwiseContourIntegral"><td> <code title="">CounterClockwiseContourIntegral;</code> </td> <td> U+02233 </td> <td> <span class="glyph" title="">∳</span> </td> </tr><tr id="entity-crarr"><td> <code title="">crarr;</code> </td> <td> U+021B5 </td> <td> <span class="glyph" title="">↵</span> </td> </tr><tr id="entity-Cross"><td> <code title="">Cross;</code> </td> <td> U+02A2F </td> <td> <span class="glyph" title="">⨯</span> </td> </tr><tr id="entity-cross"><td> <code title="">cross;</code> </td> <td> U+02717 </td> <td> <span class="glyph" title="">✗</span> </td> </tr><tr id="entity-Cscr"><td> <code title="">Cscr;</code> </td> <td> U+1D49E </td> <td> <span class="glyph" title="">𝒞</span> </td> </tr><tr id="entity-cscr"><td> <code title="">cscr;</code> </td> <td> U+1D4B8 </td> <td> <span class="glyph" title="">𝒸</span> </td> </tr><tr id="entity-csub"><td> <code title="">csub;</code> </td> <td> U+02ACF </td> <td> <span class="glyph" title="">⫏</span> </td> </tr><tr id="entity-csube"><td> <code title="">csube;</code> </td> <td> U+02AD1 </td> <td> <span class="glyph" title="">⫑</span> </td> </tr><tr id="entity-csup"><td> <code title="">csup;</code> </td> <td> U+02AD0 </td> <td> <span class="glyph" title="">⫐</span> </td> </tr><tr id="entity-csupe"><td> <code title="">csupe;</code> </td> <td> U+02AD2 </td> <td> <span class="glyph" title="">⫒</span> </td> </tr><tr id="entity-ctdot"><td> <code title="">ctdot;</code> </td> <td> U+022EF </td> <td> <span class="glyph" title="">⋯</span> </td> </tr><tr id="entity-cudarrl"><td> <code title="">cudarrl;</code> </td> <td> U+02938 </td> <td> <span class="glyph" title="">⤸</span> </td> </tr><tr id="entity-cudarrr"><td> <code title="">cudarrr;</code> </td> <td> U+02935 </td> <td> <span class="glyph" title="">⤵</span> </td> </tr><tr id="entity-cuepr"><td> <code title="">cuepr;</code> </td> <td> U+022DE </td> <td> <span class="glyph" title="">⋞</span> </td> </tr><tr id="entity-cuesc"><td> <code title="">cuesc;</code> </td> <td> U+022DF </td> <td> <span class="glyph" title="">⋟</span> </td> </tr><tr id="entity-cularr"><td> <code title="">cularr;</code> </td> <td> U+021B6 </td> <td> <span class="glyph" title="">↶</span> </td> </tr><tr id="entity-cularrp"><td> <code title="">cularrp;</code> </td> <td> U+0293D </td> <td> <span class="glyph" title="">⤽</span> </td> </tr><tr id="entity-Cup"><td> <code title="">Cup;</code> </td> <td> U+022D3 </td> <td> <span class="glyph" title="">⋓</span> </td> </tr><tr id="entity-cup"><td> <code title="">cup;</code> </td> <td> U+0222A </td> <td> <span class="glyph" title="">∪</span> </td> </tr><tr id="entity-cupbrcap"><td> <code title="">cupbrcap;</code> </td> <td> U+02A48 </td> <td> <span class="glyph" title="">⩈</span> </td> </tr><tr id="entity-CupCap"><td> <code title="">CupCap;</code> </td> <td> U+0224D </td> <td> <span class="glyph" title="">≍</span> </td> </tr><tr id="entity-cupcap"><td> <code title="">cupcap;</code> </td> <td> U+02A46 </td> <td> <span class="glyph" title="">⩆</span> </td> </tr><tr id="entity-cupcup"><td> <code title="">cupcup;</code> </td> <td> U+02A4A </td> <td> <span class="glyph" title="">⩊</span> </td> </tr><tr id="entity-cupdot"><td> <code title="">cupdot;</code> </td> <td> U+0228D </td> <td> <span class="glyph" title="">⊍</span> </td> </tr><tr id="entity-cupor"><td> <code title="">cupor;</code> </td> <td> U+02A45 </td> <td> <span class="glyph" title="">⩅</span> </td> </tr><tr id="entity-cups"><td> <code title="">cups;</code> </td> <td> U+0222A U+0FE00 </td> <td> <span class="glyph compound" title="">∪︀</span> </td> </tr><tr id="entity-curarr"><td> <code title="">curarr;</code> </td> <td> U+021B7 </td> <td> <span class="glyph" title="">↷</span> </td> </tr><tr id="entity-curarrm"><td> <code title="">curarrm;</code> </td> <td> U+0293C </td> <td> <span class="glyph" title="">⤼</span> </td> </tr><tr id="entity-curlyeqprec"><td> <code title="">curlyeqprec;</code> </td> <td> U+022DE </td> <td> <span class="glyph" title="">⋞</span> </td> </tr><tr id="entity-curlyeqsucc"><td> <code title="">curlyeqsucc;</code> </td> <td> U+022DF </td> <td> <span class="glyph" title="">⋟</span> </td> </tr><tr id="entity-curlyvee"><td> <code title="">curlyvee;</code> </td> <td> U+022CE </td> <td> <span class="glyph" title="">⋎</span> </td> </tr><tr id="entity-curlywedge"><td> <code title="">curlywedge;</code> </td> <td> U+022CF </td> <td> <span class="glyph" title="">⋏</span> </td> </tr><tr id="entity-curren"><td> <code title="">curren;</code> </td> <td> U+000A4 </td> <td> <span class="glyph" title="">¤</span> </td> </tr><tr class="impl" id="entity-curren-legacy"><td> <code title="">curren</code> </td> <td> U+000A4 </td> <td> <span title="">¤</span> </td> </tr><tr id="entity-curvearrowleft"><td> <code title="">curvearrowleft;</code> </td> <td> U+021B6 </td> <td> <span class="glyph" title="">↶</span> </td> </tr><tr id="entity-curvearrowright"><td> <code title="">curvearrowright;</code> </td> <td> U+021B7 </td> <td> <span class="glyph" title="">↷</span> </td> </tr><tr id="entity-cuvee"><td> <code title="">cuvee;</code> </td> <td> U+022CE </td> <td> <span class="glyph" title="">⋎</span> </td> </tr><tr id="entity-cuwed"><td> <code title="">cuwed;</code> </td> <td> U+022CF </td> <td> <span class="glyph" title="">⋏</span> </td> </tr><tr id="entity-cwconint"><td> <code title="">cwconint;</code> </td> <td> U+02232 </td> <td> <span class="glyph" title="">∲</span> </td> </tr><tr id="entity-cwint"><td> <code title="">cwint;</code> </td> <td> U+02231 </td> <td> <span class="glyph" title="">∱</span> </td> </tr><tr id="entity-cylcty"><td> <code title="">cylcty;</code> </td> <td> U+0232D </td> <td> <span class="glyph" title="">⌭</span> </td> </tr><tr id="entity-Dagger"><td> <code title="">Dagger;</code> </td> <td> U+02021 </td> <td> <span class="glyph" title="">‡</span> </td> </tr><tr id="entity-dagger"><td> <code title="">dagger;</code> </td> <td> U+02020 </td> <td> <span class="glyph" title="">†</span> </td> </tr><tr id="entity-daleth"><td> <code title="">daleth;</code> </td> <td> U+02138 </td> <td> <span class="glyph" title="">ℸ</span> </td> </tr><tr id="entity-Darr"><td> <code title="">Darr;</code> </td> <td> U+021A1 </td> <td> <span class="glyph" title="">↡</span> </td> </tr><tr id="entity-dArr"><td> <code title="">dArr;</code> </td> <td> U+021D3 </td> <td> <span class="glyph" title="">⇓</span> </td> </tr><tr id="entity-darr"><td> <code title="">darr;</code> </td> <td> U+02193 </td> <td> <span class="glyph" title="">↓</span> </td> </tr><tr id="entity-dash"><td> <code title="">dash;</code> </td> <td> U+02010 </td> <td> <span class="glyph" title="">‐</span> </td> </tr><tr id="entity-Dashv"><td> <code title="">Dashv;</code> </td> <td> U+02AE4 </td> <td> <span class="glyph" title="">⫤</span> </td> </tr><tr id="entity-dashv"><td> <code title="">dashv;</code> </td> <td> U+022A3 </td> <td> <span class="glyph" title="">⊣</span> </td> </tr><tr id="entity-dbkarow"><td> <code title="">dbkarow;</code> </td> <td> U+0290F </td> <td> <span class="glyph" title="">⤏</span> </td> </tr><tr id="entity-dblac"><td> <code title="">dblac;</code> </td> <td> U+002DD </td> <td> <span class="glyph" title="">˝</span> </td> </tr><tr id="entity-Dcaron"><td> <code title="">Dcaron;</code> </td> <td> U+0010E </td> <td> <span class="glyph" title="">Ď</span> </td> </tr><tr id="entity-dcaron"><td> <code title="">dcaron;</code> </td> <td> U+0010F </td> <td> <span class="glyph" title="">ď</span> </td> </tr><tr id="entity-Dcy"><td> <code title="">Dcy;</code> </td> <td> U+00414 </td> <td> <span class="glyph" title="">Д</span> </td> </tr><tr id="entity-dcy"><td> <code title="">dcy;</code> </td> <td> U+00434 </td> <td> <span class="glyph" title="">д</span> </td> </tr><tr id="entity-DD"><td> <code title="">DD;</code> </td> <td> U+02145 </td> <td> <span class="glyph" title="">ⅅ</span> </td> </tr><tr id="entity-dd"><td> <code title="">dd;</code> </td> <td> U+02146 </td> <td> <span class="glyph" title="">ⅆ</span> </td> </tr><tr id="entity-ddagger"><td> <code title="">ddagger;</code> </td> <td> U+02021 </td> <td> <span class="glyph" title="">‡</span> </td> </tr><tr id="entity-ddarr"><td> <code title="">ddarr;</code> </td> <td> U+021CA </td> <td> <span class="glyph" title="">⇊</span> </td> </tr><tr id="entity-DDotrahd"><td> <code title="">DDotrahd;</code> </td> <td> U+02911 </td> <td> <span class="glyph" title="">⤑</span> </td> </tr><tr id="entity-ddotseq"><td> <code title="">ddotseq;</code> </td> <td> U+02A77 </td> <td> <span class="glyph" title="">⩷</span> </td> </tr><tr id="entity-deg"><td> <code title="">deg;</code> </td> <td> U+000B0 </td> <td> <span class="glyph" title="">°</span> </td> </tr><tr class="impl" id="entity-deg-legacy"><td> <code title="">deg</code> </td> <td> U+000B0 </td> <td> <span title="">°</span> </td> </tr><tr id="entity-Del"><td> <code title="">Del;</code> </td> <td> U+02207 </td> <td> <span class="glyph" title="">∇</span> </td> </tr><tr id="entity-Delta"><td> <code title="">Delta;</code> </td> <td> U+00394 </td> <td> <span class="glyph" title="">Δ</span> </td> </tr><tr id="entity-delta"><td> <code title="">delta;</code> </td> <td> U+003B4 </td> <td> <span class="glyph" title="">δ</span> </td> </tr><tr id="entity-demptyv"><td> <code title="">demptyv;</code> </td> <td> U+029B1 </td> <td> <span class="glyph" title="">⦱</span> </td> </tr><tr id="entity-dfisht"><td> <code title="">dfisht;</code> </td> <td> U+0297F </td> <td> <span class="glyph" title="">⥿</span> </td> </tr><tr id="entity-Dfr"><td> <code title="">Dfr;</code> </td> <td> U+1D507 </td> <td> <span class="glyph" title="">𝔇</span> </td> </tr><tr id="entity-dfr"><td> <code title="">dfr;</code> </td> <td> U+1D521 </td> <td> <span class="glyph" title="">𝔡</span> </td> </tr><tr id="entity-dHar"><td> <code title="">dHar;</code> </td> <td> U+02965 </td> <td> <span class="glyph" title="">⥥</span> </td> </tr><tr id="entity-dharl"><td> <code title="">dharl;</code> </td> <td> U+021C3 </td> <td> <span class="glyph" title="">⇃</span> </td> </tr><tr id="entity-dharr"><td> <code title="">dharr;</code> </td> <td> U+021C2 </td> <td> <span class="glyph" title="">⇂</span> </td> </tr><tr id="entity-DiacriticalAcute"><td> <code title="">DiacriticalAcute;</code> </td> <td> U+000B4 </td> <td> <span class="glyph" title="">´</span> </td> </tr><tr id="entity-DiacriticalDot"><td> <code title="">DiacriticalDot;</code> </td> <td> U+002D9 </td> <td> <span class="glyph" title="">˙</span> </td> </tr><tr id="entity-DiacriticalDoubleAcute"><td> <code title="">DiacriticalDoubleAcute;</code> </td> <td> U+002DD </td> <td> <span class="glyph" title="">˝</span> </td> </tr><tr id="entity-DiacriticalGrave"><td> <code title="">DiacriticalGrave;</code> </td> <td> U+00060 </td> <td> <span class="glyph" title="">`</span> </td> </tr><tr id="entity-DiacriticalTilde"><td> <code title="">DiacriticalTilde;</code> </td> <td> U+002DC </td> <td> <span class="glyph" title="">˜</span> </td> </tr><tr id="entity-diam"><td> <code title="">diam;</code> </td> <td> U+022C4 </td> <td> <span class="glyph" title="">⋄</span> </td> </tr><tr id="entity-Diamond"><td> <code title="">Diamond;</code> </td> <td> U+022C4 </td> <td> <span class="glyph" title="">⋄</span> </td> </tr><tr id="entity-diamond"><td> <code title="">diamond;</code> </td> <td> U+022C4 </td> <td> <span class="glyph" title="">⋄</span> </td> </tr><tr id="entity-diamondsuit"><td> <code title="">diamondsuit;</code> </td> <td> U+02666 </td> <td> <span class="glyph" title="">♦</span> </td> </tr><tr id="entity-diams"><td> <code title="">diams;</code> </td> <td> U+02666 </td> <td> <span class="glyph" title="">♦</span> </td> </tr><tr id="entity-die"><td> <code title="">die;</code> </td> <td> U+000A8 </td> <td> <span class="glyph" title="">¨</span> </td> </tr><tr id="entity-DifferentialD"><td> <code title="">DifferentialD;</code> </td> <td> U+02146 </td> <td> <span class="glyph" title="">ⅆ</span> </td> </tr><tr id="entity-digamma"><td> <code title="">digamma;</code> </td> <td> U+003DD </td> <td> <span class="glyph" title="">ϝ</span> </td> </tr><tr id="entity-disin"><td> <code title="">disin;</code> </td> <td> U+022F2 </td> <td> <span class="glyph" title="">⋲</span> </td> </tr><tr id="entity-div"><td> <code title="">div;</code> </td> <td> U+000F7 </td> <td> <span class="glyph" title="">÷</span> </td> </tr><tr id="entity-divide"><td> <code title="">divide;</code> </td> <td> U+000F7 </td> <td> <span class="glyph" title="">÷</span> </td> </tr><tr class="impl" id="entity-divide-legacy"><td> <code title="">divide</code> </td> <td> U+000F7 </td> <td> <span title="">÷</span> </td> </tr><tr id="entity-divideontimes"><td> <code title="">divideontimes;</code> </td> <td> U+022C7 </td> <td> <span class="glyph" title="">⋇</span> </td> </tr><tr id="entity-divonx"><td> <code title="">divonx;</code> </td> <td> U+022C7 </td> <td> <span class="glyph" title="">⋇</span> </td> </tr><tr id="entity-DJcy"><td> <code title="">DJcy;</code> </td> <td> U+00402 </td> <td> <span class="glyph" title="">Ђ</span> </td> </tr><tr id="entity-djcy"><td> <code title="">djcy;</code> </td> <td> U+00452 </td> <td> <span class="glyph" title="">ђ</span> </td> </tr><tr id="entity-dlcorn"><td> <code title="">dlcorn;</code> </td> <td> U+0231E </td> <td> <span class="glyph" title="">⌞</span> </td> </tr><tr id="entity-dlcrop"><td> <code title="">dlcrop;</code> </td> <td> U+0230D </td> <td> <span class="glyph" title="">⌍</span> </td> </tr><tr id="entity-dollar"><td> <code title="">dollar;</code> </td> <td> U+00024 </td> <td> <span class="glyph" title="">$</span> </td> </tr><tr id="entity-Dopf"><td> <code title="">Dopf;</code> </td> <td> U+1D53B </td> <td> <span class="glyph" title="">𝔻</span> </td> </tr><tr id="entity-dopf"><td> <code title="">dopf;</code> </td> <td> U+1D555 </td> <td> <span class="glyph" title="">𝕕</span> </td> </tr><tr id="entity-Dot"><td> <code title="">Dot;</code> </td> <td> U+000A8 </td> <td> <span class="glyph" title="">¨</span> </td> </tr><tr id="entity-dot"><td> <code title="">dot;</code> </td> <td> U+002D9 </td> <td> <span class="glyph" title="">˙</span> </td> </tr><tr id="entity-DotDot"><td> <code title="">DotDot;</code> </td> <td> U+020DC </td> <td> <span class="glyph composition" title="">◌⃜</span> </td> </tr><tr id="entity-doteq"><td> <code title="">doteq;</code> </td> <td> U+02250 </td> <td> <span class="glyph" title="">≐</span> </td> </tr><tr id="entity-doteqdot"><td> <code title="">doteqdot;</code> </td> <td> U+02251 </td> <td> <span class="glyph" title="">≑</span> </td> </tr><tr id="entity-DotEqual"><td> <code title="">DotEqual;</code> </td> <td> U+02250 </td> <td> <span class="glyph" title="">≐</span> </td> </tr><tr id="entity-dotminus"><td> <code title="">dotminus;</code> </td> <td> U+02238 </td> <td> <span class="glyph" title="">∸</span> </td> </tr><tr id="entity-dotplus"><td> <code title="">dotplus;</code> </td> <td> U+02214 </td> <td> <span class="glyph" title="">∔</span> </td> </tr><tr id="entity-dotsquare"><td> <code title="">dotsquare;</code> </td> <td> U+022A1 </td> <td> <span class="glyph" title="">⊡</span> </td> </tr><tr id="entity-doublebarwedge"><td> <code title="">doublebarwedge;</code> </td> <td> U+02306 </td> <td> <span class="glyph" title="">⌆</span> </td> </tr><tr id="entity-DoubleContourIntegral"><td> <code title="">DoubleContourIntegral;</code> </td> <td> U+0222F </td> <td> <span class="glyph" title="">∯</span> </td> </tr><tr id="entity-DoubleDot"><td> <code title="">DoubleDot;</code> </td> <td> U+000A8 </td> <td> <span class="glyph" title="">¨</span> </td> </tr><tr id="entity-DoubleDownArrow"><td> <code title="">DoubleDownArrow;</code> </td> <td> U+021D3 </td> <td> <span class="glyph" title="">⇓</span> </td> </tr><tr id="entity-DoubleLeftArrow"><td> <code title="">DoubleLeftArrow;</code> </td> <td> U+021D0 </td> <td> <span class="glyph" title="">⇐</span> </td> </tr><tr id="entity-DoubleLeftRightArrow"><td> <code title="">DoubleLeftRightArrow;</code> </td> <td> U+021D4 </td> <td> <span class="glyph" title="">⇔</span> </td> </tr><tr id="entity-DoubleLeftTee"><td> <code title="">DoubleLeftTee;</code> </td> <td> U+02AE4 </td> <td> <span class="glyph" title="">⫤</span> </td> </tr><tr id="entity-DoubleLongLeftArrow"><td> <code title="">DoubleLongLeftArrow;</code> </td> <td> U+027F8 </td> <td> <span class="glyph" title="">⟸</span> </td> </tr><tr id="entity-DoubleLongLeftRightArrow"><td> <code title="">DoubleLongLeftRightArrow;</code> </td> <td> U+027FA </td> <td> <span class="glyph" title="">⟺</span> </td> </tr><tr id="entity-DoubleLongRightArrow"><td> <code title="">DoubleLongRightArrow;</code> </td> <td> U+027F9 </td> <td> <span class="glyph" title="">⟹</span> </td> </tr><tr id="entity-DoubleRightArrow"><td> <code title="">DoubleRightArrow;</code> </td> <td> U+021D2 </td> <td> <span class="glyph" title="">⇒</span> </td> </tr><tr id="entity-DoubleRightTee"><td> <code title="">DoubleRightTee;</code> </td> <td> U+022A8 </td> <td> <span class="glyph" title="">⊨</span> </td> </tr><tr id="entity-DoubleUpArrow"><td> <code title="">DoubleUpArrow;</code> </td> <td> U+021D1 </td> <td> <span class="glyph" title="">⇑</span> </td> </tr><tr id="entity-DoubleUpDownArrow"><td> <code title="">DoubleUpDownArrow;</code> </td> <td> U+021D5 </td> <td> <span class="glyph" title="">⇕</span> </td> </tr><tr id="entity-DoubleVerticalBar"><td> <code title="">DoubleVerticalBar;</code> </td> <td> U+02225 </td> <td> <span class="glyph" title="">∥</span> </td> </tr><tr id="entity-DownArrow"><td> <code title="">DownArrow;</code> </td> <td> U+02193 </td> <td> <span class="glyph" title="">↓</span> </td> </tr><tr id="entity-Downarrow"><td> <code title="">Downarrow;</code> </td> <td> U+021D3 </td> <td> <span class="glyph" title="">⇓</span> </td> </tr><tr id="entity-downarrow"><td> <code title="">downarrow;</code> </td> <td> U+02193 </td> <td> <span class="glyph" title="">↓</span> </td> </tr><tr id="entity-DownArrowBar"><td> <code title="">DownArrowBar;</code> </td> <td> U+02913 </td> <td> <span class="glyph" title="">⤓</span> </td> </tr><tr id="entity-DownArrowUpArrow"><td> <code title="">DownArrowUpArrow;</code> </td> <td> U+021F5 </td> <td> <span class="glyph" title="">⇵</span> </td> </tr><tr id="entity-DownBreve"><td> <code title="">DownBreve;</code> </td> <td> U+00311 </td> <td> <span class="glyph composition" title="">◌̑</span> </td> </tr><tr id="entity-downdownarrows"><td> <code title="">downdownarrows;</code> </td> <td> U+021CA </td> <td> <span class="glyph" title="">⇊</span> </td> </tr><tr id="entity-downharpoonleft"><td> <code title="">downharpoonleft;</code> </td> <td> U+021C3 </td> <td> <span class="glyph" title="">⇃</span> </td> </tr><tr id="entity-downharpoonright"><td> <code title="">downharpoonright;</code> </td> <td> U+021C2 </td> <td> <span class="glyph" title="">⇂</span> </td> </tr><tr id="entity-DownLeftRightVector"><td> <code title="">DownLeftRightVector;</code> </td> <td> U+02950 </td> <td> <span class="glyph" title="">⥐</span> </td> </tr><tr id="entity-DownLeftTeeVector"><td> <code title="">DownLeftTeeVector;</code> </td> <td> U+0295E </td> <td> <span class="glyph" title="">⥞</span> </td> </tr><tr id="entity-DownLeftVector"><td> <code title="">DownLeftVector;</code> </td> <td> U+021BD </td> <td> <span class="glyph" title="">↽</span> </td> </tr><tr id="entity-DownLeftVectorBar"><td> <code title="">DownLeftVectorBar;</code> </td> <td> U+02956 </td> <td> <span class="glyph" title="">⥖</span> </td> </tr><tr id="entity-DownRightTeeVector"><td> <code title="">DownRightTeeVector;</code> </td> <td> U+0295F </td> <td> <span class="glyph" title="">⥟</span> </td> </tr><tr id="entity-DownRightVector"><td> <code title="">DownRightVector;</code> </td> <td> U+021C1 </td> <td> <span class="glyph" title="">⇁</span> </td> </tr><tr id="entity-DownRightVectorBar"><td> <code title="">DownRightVectorBar;</code> </td> <td> U+02957 </td> <td> <span class="glyph" title="">⥗</span> </td> </tr><tr id="entity-DownTee"><td> <code title="">DownTee;</code> </td> <td> U+022A4 </td> <td> <span class="glyph" title="">⊤</span> </td> </tr><tr id="entity-DownTeeArrow"><td> <code title="">DownTeeArrow;</code> </td> <td> U+021A7 </td> <td> <span class="glyph" title="">↧</span> </td> </tr><tr id="entity-drbkarow"><td> <code title="">drbkarow;</code> </td> <td> U+02910 </td> <td> <span class="glyph" title="">⤐</span> </td> </tr><tr id="entity-drcorn"><td> <code title="">drcorn;</code> </td> <td> U+0231F </td> <td> <span class="glyph" title="">⌟</span> </td> </tr><tr id="entity-drcrop"><td> <code title="">drcrop;</code> </td> <td> U+0230C </td> <td> <span class="glyph" title="">⌌</span> </td> </tr><tr id="entity-Dscr"><td> <code title="">Dscr;</code> </td> <td> U+1D49F </td> <td> <span class="glyph" title="">𝒟</span> </td> </tr><tr id="entity-dscr"><td> <code title="">dscr;</code> </td> <td> U+1D4B9 </td> <td> <span class="glyph" title="">𝒹</span> </td> </tr><tr id="entity-DScy"><td> <code title="">DScy;</code> </td> <td> U+00405 </td> <td> <span class="glyph" title="">Ѕ</span> </td> </tr><tr id="entity-dscy"><td> <code title="">dscy;</code> </td> <td> U+00455 </td> <td> <span class="glyph" title="">ѕ</span> </td> </tr><tr id="entity-dsol"><td> <code title="">dsol;</code> </td> <td> U+029F6 </td> <td> <span class="glyph" title="">⧶</span> </td> </tr><tr id="entity-Dstrok"><td> <code title="">Dstrok;</code> </td> <td> U+00110 </td> <td> <span class="glyph" title="">Đ</span> </td> </tr><tr id="entity-dstrok"><td> <code title="">dstrok;</code> </td> <td> U+00111 </td> <td> <span class="glyph" title="">đ</span> </td> </tr><tr id="entity-dtdot"><td> <code title="">dtdot;</code> </td> <td> U+022F1 </td> <td> <span class="glyph" title="">⋱</span> </td> </tr><tr id="entity-dtri"><td> <code title="">dtri;</code> </td> <td> U+025BF </td> <td> <span class="glyph" title="">▿</span> </td> </tr><tr id="entity-dtrif"><td> <code title="">dtrif;</code> </td> <td> U+025BE </td> <td> <span class="glyph" title="">▾</span> </td> </tr><tr id="entity-duarr"><td> <code title="">duarr;</code> </td> <td> U+021F5 </td> <td> <span class="glyph" title="">⇵</span> </td> </tr><tr id="entity-duhar"><td> <code title="">duhar;</code> </td> <td> U+0296F </td> <td> <span class="glyph" title="">⥯</span> </td> </tr><tr id="entity-dwangle"><td> <code title="">dwangle;</code> </td> <td> U+029A6 </td> <td> <span class="glyph" title="">⦦</span> </td> </tr><tr id="entity-DZcy"><td> <code title="">DZcy;</code> </td> <td> U+0040F </td> <td> <span class="glyph" title="">Џ</span> </td> </tr><tr id="entity-dzcy"><td> <code title="">dzcy;</code> </td> <td> U+0045F </td> <td> <span class="glyph" title="">џ</span> </td> </tr><tr id="entity-dzigrarr"><td> <code title="">dzigrarr;</code> </td> <td> U+027FF </td> <td> <span class="glyph" title="">⟿</span> </td> </tr><tr id="entity-Eacute"><td> <code title="">Eacute;</code> </td> <td> U+000C9 </td> <td> <span class="glyph" title="">É</span> </td> </tr><tr class="impl" id="entity-Eacute-legacy"><td> <code title="">Eacute</code> </td> <td> U+000C9 </td> <td> <span title="">É</span> </td> </tr><tr id="entity-eacute"><td> <code title="">eacute;</code> </td> <td> U+000E9 </td> <td> <span class="glyph" title="">é</span> </td> </tr><tr class="impl" id="entity-eacute-legacy"><td> <code title="">eacute</code> </td> <td> U+000E9 </td> <td> <span title="">é</span> </td> </tr><tr id="entity-easter"><td> <code title="">easter;</code> </td> <td> U+02A6E </td> <td> <span class="glyph" title="">⩮</span> </td> </tr><tr id="entity-Ecaron"><td> <code title="">Ecaron;</code> </td> <td> U+0011A </td> <td> <span class="glyph" title="">Ě</span> </td> </tr><tr id="entity-ecaron"><td> <code title="">ecaron;</code> </td> <td> U+0011B </td> <td> <span class="glyph" title="">ě</span> </td> </tr><tr id="entity-ecir"><td> <code title="">ecir;</code> </td> <td> U+02256 </td> <td> <span class="glyph" title="">≖</span> </td> </tr><tr id="entity-Ecirc"><td> <code title="">Ecirc;</code> </td> <td> U+000CA </td> <td> <span class="glyph" title="">Ê</span> </td> </tr><tr class="impl" id="entity-Ecirc-legacy"><td> <code title="">Ecirc</code> </td> <td> U+000CA </td> <td> <span title="">Ê</span> </td> </tr><tr id="entity-ecirc"><td> <code title="">ecirc;</code> </td> <td> U+000EA </td> <td> <span class="glyph" title="">ê</span> </td> </tr><tr class="impl" id="entity-ecirc-legacy"><td> <code title="">ecirc</code> </td> <td> U+000EA </td> <td> <span title="">ê</span> </td> </tr><tr id="entity-ecolon"><td> <code title="">ecolon;</code> </td> <td> U+02255 </td> <td> <span class="glyph" title="">≕</span> </td> </tr><tr id="entity-Ecy"><td> <code title="">Ecy;</code> </td> <td> U+0042D </td> <td> <span class="glyph" title="">Э</span> </td> </tr><tr id="entity-ecy"><td> <code title="">ecy;</code> </td> <td> U+0044D </td> <td> <span class="glyph" title="">э</span> </td> </tr><tr id="entity-eDDot"><td> <code title="">eDDot;</code> </td> <td> U+02A77 </td> <td> <span class="glyph" title="">⩷</span> </td> </tr><tr id="entity-Edot"><td> <code title="">Edot;</code> </td> <td> U+00116 </td> <td> <span class="glyph" title="">Ė</span> </td> </tr><tr id="entity-eDot"><td> <code title="">eDot;</code> </td> <td> U+02251 </td> <td> <span class="glyph" title="">≑</span> </td> </tr><tr id="entity-edot"><td> <code title="">edot;</code> </td> <td> U+00117 </td> <td> <span class="glyph" title="">ė</span> </td> </tr><tr id="entity-ee"><td> <code title="">ee;</code> </td> <td> U+02147 </td> <td> <span class="glyph" title="">ⅇ</span> </td> </tr><tr id="entity-efDot"><td> <code title="">efDot;</code> </td> <td> U+02252 </td> <td> <span class="glyph" title="">≒</span> </td> </tr><tr id="entity-Efr"><td> <code title="">Efr;</code> </td> <td> U+1D508 </td> <td> <span class="glyph" title="">𝔈</span> </td> </tr><tr id="entity-efr"><td> <code title="">efr;</code> </td> <td> U+1D522 </td> <td> <span class="glyph" title="">𝔢</span> </td> </tr><tr id="entity-eg"><td> <code title="">eg;</code> </td> <td> U+02A9A </td> <td> <span class="glyph" title="">⪚</span> </td> </tr><tr id="entity-Egrave"><td> <code title="">Egrave;</code> </td> <td> U+000C8 </td> <td> <span class="glyph" title="">È</span> </td> </tr><tr class="impl" id="entity-Egrave-legacy"><td> <code title="">Egrave</code> </td> <td> U+000C8 </td> <td> <span title="">È</span> </td> </tr><tr id="entity-egrave"><td> <code title="">egrave;</code> </td> <td> U+000E8 </td> <td> <span class="glyph" title="">è</span> </td> </tr><tr class="impl" id="entity-egrave-legacy"><td> <code title="">egrave</code> </td> <td> U+000E8 </td> <td> <span title="">è</span> </td> </tr><tr id="entity-egs"><td> <code title="">egs;</code> </td> <td> U+02A96 </td> <td> <span class="glyph" title="">⪖</span> </td> </tr><tr id="entity-egsdot"><td> <code title="">egsdot;</code> </td> <td> U+02A98 </td> <td> <span class="glyph" title="">⪘</span> </td> </tr><tr id="entity-el"><td> <code title="">el;</code> </td> <td> U+02A99 </td> <td> <span class="glyph" title="">⪙</span> </td> </tr><tr id="entity-Element"><td> <code title="">Element;</code> </td> <td> U+02208 </td> <td> <span class="glyph" title="">∈</span> </td> </tr><tr id="entity-elinters"><td> <code title="">elinters;</code> </td> <td> U+023E7 </td> <td> <span class="glyph" title="">⏧</span> </td> </tr><tr id="entity-ell"><td> <code title="">ell;</code> </td> <td> U+02113 </td> <td> <span class="glyph" title="">ℓ</span> </td> </tr><tr id="entity-els"><td> <code title="">els;</code> </td> <td> U+02A95 </td> <td> <span class="glyph" title="">⪕</span> </td> </tr><tr id="entity-elsdot"><td> <code title="">elsdot;</code> </td> <td> U+02A97 </td> <td> <span class="glyph" title="">⪗</span> </td> </tr><tr id="entity-Emacr"><td> <code title="">Emacr;</code> </td> <td> U+00112 </td> <td> <span class="glyph" title="">Ē</span> </td> </tr><tr id="entity-emacr"><td> <code title="">emacr;</code> </td> <td> U+00113 </td> <td> <span class="glyph" title="">ē</span> </td> </tr><tr id="entity-empty"><td> <code title="">empty;</code> </td> <td> U+02205 </td> <td> <span class="glyph" title="">∅</span> </td> </tr><tr id="entity-emptyset"><td> <code title="">emptyset;</code> </td> <td> U+02205 </td> <td> <span class="glyph" title="">∅</span> </td> </tr><tr id="entity-EmptySmallSquare"><td> <code title="">EmptySmallSquare;</code> </td> <td> U+025FB </td> <td> <span class="glyph" title="">◻</span> </td> </tr><tr id="entity-emptyv"><td> <code title="">emptyv;</code> </td> <td> U+02205 </td> <td> <span class="glyph" title="">∅</span> </td> </tr><tr id="entity-EmptyVerySmallSquare"><td> <code title="">EmptyVerySmallSquare;</code> </td> <td> U+025AB </td> <td> <span class="glyph" title="">▫</span> </td> </tr><tr id="entity-emsp"><td> <code title="">emsp;</code> </td> <td> U+02003 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-emsp13"><td> <code title="">emsp13;</code> </td> <td> U+02004 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-emsp14"><td> <code title="">emsp14;</code> </td> <td> U+02005 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-ENG"><td> <code title="">ENG;</code> </td> <td> U+0014A </td> <td> <span class="glyph" title="">Ŋ</span> </td> </tr><tr id="entity-eng"><td> <code title="">eng;</code> </td> <td> U+0014B </td> <td> <span class="glyph" title="">ŋ</span> </td> </tr><tr id="entity-ensp"><td> <code title="">ensp;</code> </td> <td> U+02002 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-Eogon"><td> <code title="">Eogon;</code> </td> <td> U+00118 </td> <td> <span class="glyph" title="">Ę</span> </td> </tr><tr id="entity-eogon"><td> <code title="">eogon;</code> </td> <td> U+00119 </td> <td> <span class="glyph" title="">ę</span> </td> </tr><tr id="entity-Eopf"><td> <code title="">Eopf;</code> </td> <td> U+1D53C </td> <td> <span class="glyph" title="">𝔼</span> </td> </tr><tr id="entity-eopf"><td> <code title="">eopf;</code> </td> <td> U+1D556 </td> <td> <span class="glyph" title="">𝕖</span> </td> </tr><tr id="entity-epar"><td> <code title="">epar;</code> </td> <td> U+022D5 </td> <td> <span class="glyph" title="">⋕</span> </td> </tr><tr id="entity-eparsl"><td> <code title="">eparsl;</code> </td> <td> U+029E3 </td> <td> <span class="glyph" title="">⧣</span> </td> </tr><tr id="entity-eplus"><td> <code title="">eplus;</code> </td> <td> U+02A71 </td> <td> <span class="glyph" title="">⩱</span> </td> </tr><tr id="entity-epsi"><td> <code title="">epsi;</code> </td> <td> U+003B5 </td> <td> <span class="glyph" title="">ε</span> </td> </tr><tr id="entity-Epsilon"><td> <code title="">Epsilon;</code> </td> <td> U+00395 </td> <td> <span class="glyph" title="">Ε</span> </td> </tr><tr id="entity-epsilon"><td> <code title="">epsilon;</code> </td> <td> U+003B5 </td> <td> <span class="glyph" title="">ε</span> </td> </tr><tr id="entity-epsiv"><td> <code title="">epsiv;</code> </td> <td> U+003F5 </td> <td> <span class="glyph" title="">ϵ</span> </td> </tr><tr id="entity-eqcirc"><td> <code title="">eqcirc;</code> </td> <td> U+02256 </td> <td> <span class="glyph" title="">≖</span> </td> </tr><tr id="entity-eqcolon"><td> <code title="">eqcolon;</code> </td> <td> U+02255 </td> <td> <span class="glyph" title="">≕</span> </td> </tr><tr id="entity-eqsim"><td> <code title="">eqsim;</code> </td> <td> U+02242 </td> <td> <span class="glyph" title="">≂</span> </td> </tr><tr id="entity-eqslantgtr"><td> <code title="">eqslantgtr;</code> </td> <td> U+02A96 </td> <td> <span class="glyph" title="">⪖</span> </td> </tr><tr id="entity-eqslantless"><td> <code title="">eqslantless;</code> </td> <td> U+02A95 </td> <td> <span class="glyph" title="">⪕</span> </td> </tr><tr id="entity-Equal"><td> <code title="">Equal;</code> </td> <td> U+02A75 </td> <td> <span class="glyph" title="">⩵</span> </td> </tr><tr id="entity-equals"><td> <code title="">equals;</code> </td> <td> U+0003D </td> <td> <span class="glyph" title="">=</span> </td> </tr><tr id="entity-EqualTilde"><td> <code title="">EqualTilde;</code> </td> <td> U+02242 </td> <td> <span class="glyph" title="">≂</span> </td> </tr><tr id="entity-equest"><td> <code title="">equest;</code> </td> <td> U+0225F </td> <td> <span class="glyph" title="">≟</span> </td> </tr><tr id="entity-Equilibrium"><td> <code title="">Equilibrium;</code> </td> <td> U+021CC </td> <td> <span class="glyph" title="">⇌</span> </td> </tr><tr id="entity-equiv"><td> <code title="">equiv;</code> </td> <td> U+02261 </td> <td> <span class="glyph" title="">≡</span> </td> </tr><tr id="entity-equivDD"><td> <code title="">equivDD;</code> </td> <td> U+02A78 </td> <td> <span class="glyph" title="">⩸</span> </td> </tr><tr id="entity-eqvparsl"><td> <code title="">eqvparsl;</code> </td> <td> U+029E5 </td> <td> <span class="glyph" title="">⧥</span> </td> </tr><tr id="entity-erarr"><td> <code title="">erarr;</code> </td> <td> U+02971 </td> <td> <span class="glyph" title="">⥱</span> </td> </tr><tr id="entity-erDot"><td> <code title="">erDot;</code> </td> <td> U+02253 </td> <td> <span class="glyph" title="">≓</span> </td> </tr><tr id="entity-Escr"><td> <code title="">Escr;</code> </td> <td> U+02130 </td> <td> <span class="glyph" title="">ℰ</span> </td> </tr><tr id="entity-escr"><td> <code title="">escr;</code> </td> <td> U+0212F </td> <td> <span class="glyph" title="">ℯ</span> </td> </tr><tr id="entity-esdot"><td> <code title="">esdot;</code> </td> <td> U+02250 </td> <td> <span class="glyph" title="">≐</span> </td> </tr><tr id="entity-Esim"><td> <code title="">Esim;</code> </td> <td> U+02A73 </td> <td> <span class="glyph" title="">⩳</span> </td> </tr><tr id="entity-esim"><td> <code title="">esim;</code> </td> <td> U+02242 </td> <td> <span class="glyph" title="">≂</span> </td> </tr><tr id="entity-Eta"><td> <code title="">Eta;</code> </td> <td> U+00397 </td> <td> <span class="glyph" title="">Η</span> </td> </tr><tr id="entity-eta"><td> <code title="">eta;</code> </td> <td> U+003B7 </td> <td> <span class="glyph" title="">η</span> </td> </tr><tr id="entity-ETH"><td> <code title="">ETH;</code> </td> <td> U+000D0 </td> <td> <span class="glyph" title="">Ð</span> </td> </tr><tr class="impl" id="entity-ETH-legacy"><td> <code title="">ETH</code> </td> <td> U+000D0 </td> <td> <span title="">Ð</span> </td> </tr><tr id="entity-eth"><td> <code title="">eth;</code> </td> <td> U+000F0 </td> <td> <span class="glyph" title="">ð</span> </td> </tr><tr class="impl" id="entity-eth-legacy"><td> <code title="">eth</code> </td> <td> U+000F0 </td> <td> <span title="">ð</span> </td> </tr><tr id="entity-Euml"><td> <code title="">Euml;</code> </td> <td> U+000CB </td> <td> <span class="glyph" title="">Ë</span> </td> </tr><tr class="impl" id="entity-Euml-legacy"><td> <code title="">Euml</code> </td> <td> U+000CB </td> <td> <span title="">Ë</span> </td> </tr><tr id="entity-euml"><td> <code title="">euml;</code> </td> <td> U+000EB </td> <td> <span class="glyph" title="">ë</span> </td> </tr><tr class="impl" id="entity-euml-legacy"><td> <code title="">euml</code> </td> <td> U+000EB </td> <td> <span title="">ë</span> </td> </tr><tr id="entity-euro"><td> <code title="">euro;</code> </td> <td> U+020AC </td> <td> <span class="glyph" title="">€</span> </td> </tr><tr id="entity-excl"><td> <code title="">excl;</code> </td> <td> U+00021 </td> <td> <span class="glyph" title="">!</span> </td> </tr><tr id="entity-exist"><td> <code title="">exist;</code> </td> <td> U+02203 </td> <td> <span class="glyph" title="">∃</span> </td> </tr><tr id="entity-Exists"><td> <code title="">Exists;</code> </td> <td> U+02203 </td> <td> <span class="glyph" title="">∃</span> </td> </tr><tr id="entity-expectation"><td> <code title="">expectation;</code> </td> <td> U+02130 </td> <td> <span class="glyph" title="">ℰ</span> </td> </tr><tr id="entity-ExponentialE"><td> <code title="">ExponentialE;</code> </td> <td> U+02147 </td> <td> <span class="glyph" title="">ⅇ</span> </td> </tr><tr id="entity-exponentiale"><td> <code title="">exponentiale;</code> </td> <td> U+02147 </td> <td> <span class="glyph" title="">ⅇ</span> </td> </tr><tr id="entity-fallingdotseq"><td> <code title="">fallingdotseq;</code> </td> <td> U+02252 </td> <td> <span class="glyph" title="">≒</span> </td> </tr><tr id="entity-Fcy"><td> <code title="">Fcy;</code> </td> <td> U+00424 </td> <td> <span class="glyph" title="">Ф</span> </td> </tr><tr id="entity-fcy"><td> <code title="">fcy;</code> </td> <td> U+00444 </td> <td> <span class="glyph" title="">ф</span> </td> </tr><tr id="entity-female"><td> <code title="">female;</code> </td> <td> U+02640 </td> <td> <span class="glyph" title="">♀</span> </td> </tr><tr id="entity-ffilig"><td> <code title="">ffilig;</code> </td> <td> U+0FB03 </td> <td> <span class="glyph" title="">ffi</span> </td> </tr><tr id="entity-fflig"><td> <code title="">fflig;</code> </td> <td> U+0FB00 </td> <td> <span class="glyph" title="">ff</span> </td> </tr><tr id="entity-ffllig"><td> <code title="">ffllig;</code> </td> <td> U+0FB04 </td> <td> <span class="glyph" title="">ffl</span> </td> </tr><tr id="entity-Ffr"><td> <code title="">Ffr;</code> </td> <td> U+1D509 </td> <td> <span class="glyph" title="">𝔉</span> </td> </tr><tr id="entity-ffr"><td> <code title="">ffr;</code> </td> <td> U+1D523 </td> <td> <span class="glyph" title="">𝔣</span> </td> </tr><tr id="entity-filig"><td> <code title="">filig;</code> </td> <td> U+0FB01 </td> <td> <span class="glyph" title="">fi</span> </td> </tr><tr id="entity-FilledSmallSquare"><td> <code title="">FilledSmallSquare;</code> </td> <td> U+025FC </td> <td> <span class="glyph" title="">◼</span> </td> </tr><tr id="entity-FilledVerySmallSquare"><td> <code title="">FilledVerySmallSquare;</code> </td> <td> U+025AA </td> <td> <span class="glyph" title="">▪</span> </td> </tr><tr id="entity-fjlig"><td> <code title="">fjlig;</code> </td> <td> U+00066 U+0006A </td> <td> <span class="glyph compound" title="">fj</span> </td> </tr><tr id="entity-flat"><td> <code title="">flat;</code> </td> <td> U+0266D </td> <td> <span class="glyph" title="">♭</span> </td> </tr><tr id="entity-fllig"><td> <code title="">fllig;</code> </td> <td> U+0FB02 </td> <td> <span class="glyph" title="">fl</span> </td> </tr><tr id="entity-fltns"><td> <code title="">fltns;</code> </td> <td> U+025B1 </td> <td> <span class="glyph" title="">▱</span> </td> </tr><tr id="entity-fnof"><td> <code title="">fnof;</code> </td> <td> U+00192 </td> <td> <span class="glyph" title="">ƒ</span> </td> </tr><tr id="entity-Fopf"><td> <code title="">Fopf;</code> </td> <td> U+1D53D </td> <td> <span class="glyph" title="">𝔽</span> </td> </tr><tr id="entity-fopf"><td> <code title="">fopf;</code> </td> <td> U+1D557 </td> <td> <span class="glyph" title="">𝕗</span> </td> </tr><tr id="entity-ForAll"><td> <code title="">ForAll;</code> </td> <td> U+02200 </td> <td> <span class="glyph" title="">∀</span> </td> </tr><tr id="entity-forall"><td> <code title="">forall;</code> </td> <td> U+02200 </td> <td> <span class="glyph" title="">∀</span> </td> </tr><tr id="entity-fork"><td> <code title="">fork;</code> </td> <td> U+022D4 </td> <td> <span class="glyph" title="">⋔</span> </td> </tr><tr id="entity-forkv"><td> <code title="">forkv;</code> </td> <td> U+02AD9 </td> <td> <span class="glyph" title="">⫙</span> </td> </tr><tr id="entity-Fouriertrf"><td> <code title="">Fouriertrf;</code> </td> <td> U+02131 </td> <td> <span class="glyph" title="">ℱ</span> </td> </tr><tr id="entity-fpartint"><td> <code title="">fpartint;</code> </td> <td> U+02A0D </td> <td> <span class="glyph" title="">⨍</span> </td> </tr><tr id="entity-frac12"><td> <code title="">frac12;</code> </td> <td> U+000BD </td> <td> <span class="glyph" title="">½</span> </td> </tr><tr class="impl" id="entity-frac12-legacy"><td> <code title="">frac12</code> </td> <td> U+000BD </td> <td> <span title="">½</span> </td> </tr><tr id="entity-frac13"><td> <code title="">frac13;</code> </td> <td> U+02153 </td> <td> <span class="glyph" title="">⅓</span> </td> </tr><tr id="entity-frac14"><td> <code title="">frac14;</code> </td> <td> U+000BC </td> <td> <span class="glyph" title="">¼</span> </td> </tr><tr class="impl" id="entity-frac14-legacy"><td> <code title="">frac14</code> </td> <td> U+000BC </td> <td> <span title="">¼</span> </td> </tr><tr id="entity-frac15"><td> <code title="">frac15;</code> </td> <td> U+02155 </td> <td> <span class="glyph" title="">⅕</span> </td> </tr><tr id="entity-frac16"><td> <code title="">frac16;</code> </td> <td> U+02159 </td> <td> <span class="glyph" title="">⅙</span> </td> </tr><tr id="entity-frac18"><td> <code title="">frac18;</code> </td> <td> U+0215B </td> <td> <span class="glyph" title="">⅛</span> </td> </tr><tr id="entity-frac23"><td> <code title="">frac23;</code> </td> <td> U+02154 </td> <td> <span class="glyph" title="">⅔</span> </td> </tr><tr id="entity-frac25"><td> <code title="">frac25;</code> </td> <td> U+02156 </td> <td> <span class="glyph" title="">⅖</span> </td> </tr><tr id="entity-frac34"><td> <code title="">frac34;</code> </td> <td> U+000BE </td> <td> <span class="glyph" title="">¾</span> </td> </tr><tr class="impl" id="entity-frac34-legacy"><td> <code title="">frac34</code> </td> <td> U+000BE </td> <td> <span title="">¾</span> </td> </tr><tr id="entity-frac35"><td> <code title="">frac35;</code> </td> <td> U+02157 </td> <td> <span class="glyph" title="">⅗</span> </td> </tr><tr id="entity-frac38"><td> <code title="">frac38;</code> </td> <td> U+0215C </td> <td> <span class="glyph" title="">⅜</span> </td> </tr><tr id="entity-frac45"><td> <code title="">frac45;</code> </td> <td> U+02158 </td> <td> <span class="glyph" title="">⅘</span> </td> </tr><tr id="entity-frac56"><td> <code title="">frac56;</code> </td> <td> U+0215A </td> <td> <span class="glyph" title="">⅚</span> </td> </tr><tr id="entity-frac58"><td> <code title="">frac58;</code> </td> <td> U+0215D </td> <td> <span class="glyph" title="">⅝</span> </td> </tr><tr id="entity-frac78"><td> <code title="">frac78;</code> </td> <td> U+0215E </td> <td> <span class="glyph" title="">⅞</span> </td> </tr><tr id="entity-frasl"><td> <code title="">frasl;</code> </td> <td> U+02044 </td> <td> <span class="glyph" title="">⁄</span> </td> </tr><tr id="entity-frown"><td> <code title="">frown;</code> </td> <td> U+02322 </td> <td> <span class="glyph" title="">⌢</span> </td> </tr><tr id="entity-Fscr"><td> <code title="">Fscr;</code> </td> <td> U+02131 </td> <td> <span class="glyph" title="">ℱ</span> </td> </tr><tr id="entity-fscr"><td> <code title="">fscr;</code> </td> <td> U+1D4BB </td> <td> <span class="glyph" title="">𝒻</span> </td> </tr><tr id="entity-gacute"><td> <code title="">gacute;</code> </td> <td> U+001F5 </td> <td> <span class="glyph" title="">ǵ</span> </td> </tr><tr id="entity-Gamma"><td> <code title="">Gamma;</code> </td> <td> U+00393 </td> <td> <span class="glyph" title="">Γ</span> </td> </tr><tr id="entity-gamma"><td> <code title="">gamma;</code> </td> <td> U+003B3 </td> <td> <span class="glyph" title="">γ</span> </td> </tr><tr id="entity-Gammad"><td> <code title="">Gammad;</code> </td> <td> U+003DC </td> <td> <span class="glyph" title="">Ϝ</span> </td> </tr><tr id="entity-gammad"><td> <code title="">gammad;</code> </td> <td> U+003DD </td> <td> <span class="glyph" title="">ϝ</span> </td> </tr><tr id="entity-gap"><td> <code title="">gap;</code> </td> <td> U+02A86 </td> <td> <span class="glyph" title="">⪆</span> </td> </tr><tr id="entity-Gbreve"><td> <code title="">Gbreve;</code> </td> <td> U+0011E </td> <td> <span class="glyph" title="">Ğ</span> </td> </tr><tr id="entity-gbreve"><td> <code title="">gbreve;</code> </td> <td> U+0011F </td> <td> <span class="glyph" title="">ğ</span> </td> </tr><tr id="entity-Gcedil"><td> <code title="">Gcedil;</code> </td> <td> U+00122 </td> <td> <span class="glyph" title="">Ģ</span> </td> </tr><tr id="entity-Gcirc"><td> <code title="">Gcirc;</code> </td> <td> U+0011C </td> <td> <span class="glyph" title="">Ĝ</span> </td> </tr><tr id="entity-gcirc"><td> <code title="">gcirc;</code> </td> <td> U+0011D </td> <td> <span class="glyph" title="">ĝ</span> </td> </tr><tr id="entity-Gcy"><td> <code title="">Gcy;</code> </td> <td> U+00413 </td> <td> <span class="glyph" title="">Г</span> </td> </tr><tr id="entity-gcy"><td> <code title="">gcy;</code> </td> <td> U+00433 </td> <td> <span class="glyph" title="">г</span> </td> </tr><tr id="entity-Gdot"><td> <code title="">Gdot;</code> </td> <td> U+00120 </td> <td> <span class="glyph" title="">Ġ</span> </td> </tr><tr id="entity-gdot"><td> <code title="">gdot;</code> </td> <td> U+00121 </td> <td> <span class="glyph" title="">ġ</span> </td> </tr><tr id="entity-gE"><td> <code title="">gE;</code> </td> <td> U+02267 </td> <td> <span class="glyph" title="">≧</span> </td> </tr><tr id="entity-ge"><td> <code title="">ge;</code> </td> <td> U+02265 </td> <td> <span class="glyph" title="">≥</span> </td> </tr><tr id="entity-gEl"><td> <code title="">gEl;</code> </td> <td> U+02A8C </td> <td> <span class="glyph" title="">⪌</span> </td> </tr><tr id="entity-gel"><td> <code title="">gel;</code> </td> <td> U+022DB </td> <td> <span class="glyph" title="">⋛</span> </td> </tr><tr id="entity-geq"><td> <code title="">geq;</code> </td> <td> U+02265 </td> <td> <span class="glyph" title="">≥</span> </td> </tr><tr id="entity-geqq"><td> <code title="">geqq;</code> </td> <td> U+02267 </td> <td> <span class="glyph" title="">≧</span> </td> </tr><tr id="entity-geqslant"><td> <code title="">geqslant;</code> </td> <td> U+02A7E </td> <td> <span class="glyph" title="">⩾</span> </td> </tr><tr id="entity-ges"><td> <code title="">ges;</code> </td> <td> U+02A7E </td> <td> <span class="glyph" title="">⩾</span> </td> </tr><tr id="entity-gescc"><td> <code title="">gescc;</code> </td> <td> U+02AA9 </td> <td> <span class="glyph" title="">⪩</span> </td> </tr><tr id="entity-gesdot"><td> <code title="">gesdot;</code> </td> <td> U+02A80 </td> <td> <span class="glyph" title="">⪀</span> </td> </tr><tr id="entity-gesdoto"><td> <code title="">gesdoto;</code> </td> <td> U+02A82 </td> <td> <span class="glyph" title="">⪂</span> </td> </tr><tr id="entity-gesdotol"><td> <code title="">gesdotol;</code> </td> <td> U+02A84 </td> <td> <span class="glyph" title="">⪄</span> </td> </tr><tr id="entity-gesl"><td> <code title="">gesl;</code> </td> <td> U+022DB U+0FE00 </td> <td> <span class="glyph compound" title="">⋛︀</span> </td> </tr><tr id="entity-gesles"><td> <code title="">gesles;</code> </td> <td> U+02A94 </td> <td> <span class="glyph" title="">⪔</span> </td> </tr><tr id="entity-Gfr"><td> <code title="">Gfr;</code> </td> <td> U+1D50A </td> <td> <span class="glyph" title="">𝔊</span> </td> </tr><tr id="entity-gfr"><td> <code title="">gfr;</code> </td> <td> U+1D524 </td> <td> <span class="glyph" title="">𝔤</span> </td> </tr><tr id="entity-Gg"><td> <code title="">Gg;</code> </td> <td> U+022D9 </td> <td> <span class="glyph" title="">⋙</span> </td> </tr><tr id="entity-gg"><td> <code title="">gg;</code> </td> <td> U+0226B </td> <td> <span class="glyph" title="">≫</span> </td> </tr><tr id="entity-ggg"><td> <code title="">ggg;</code> </td> <td> U+022D9 </td> <td> <span class="glyph" title="">⋙</span> </td> </tr><tr id="entity-gimel"><td> <code title="">gimel;</code> </td> <td> U+02137 </td> <td> <span class="glyph" title="">ℷ</span> </td> </tr><tr id="entity-GJcy"><td> <code title="">GJcy;</code> </td> <td> U+00403 </td> <td> <span class="glyph" title="">Ѓ</span> </td> </tr><tr id="entity-gjcy"><td> <code title="">gjcy;</code> </td> <td> U+00453 </td> <td> <span class="glyph" title="">ѓ</span> </td> </tr><tr id="entity-gl"><td> <code title="">gl;</code> </td> <td> U+02277 </td> <td> <span class="glyph" title="">≷</span> </td> </tr><tr id="entity-gla"><td> <code title="">gla;</code> </td> <td> U+02AA5 </td> <td> <span class="glyph" title="">⪥</span> </td> </tr><tr id="entity-glE"><td> <code title="">glE;</code> </td> <td> U+02A92 </td> <td> <span class="glyph" title="">⪒</span> </td> </tr><tr id="entity-glj"><td> <code title="">glj;</code> </td> <td> U+02AA4 </td> <td> <span class="glyph" title="">⪤</span> </td> </tr><tr id="entity-gnap"><td> <code title="">gnap;</code> </td> <td> U+02A8A </td> <td> <span class="glyph" title="">⪊</span> </td> </tr><tr id="entity-gnapprox"><td> <code title="">gnapprox;</code> </td> <td> U+02A8A </td> <td> <span class="glyph" title="">⪊</span> </td> </tr><tr id="entity-gnE"><td> <code title="">gnE;</code> </td> <td> U+02269 </td> <td> <span class="glyph" title="">≩</span> </td> </tr><tr id="entity-gne"><td> <code title="">gne;</code> </td> <td> U+02A88 </td> <td> <span class="glyph" title="">⪈</span> </td> </tr><tr id="entity-gneq"><td> <code title="">gneq;</code> </td> <td> U+02A88 </td> <td> <span class="glyph" title="">⪈</span> </td> </tr><tr id="entity-gneqq"><td> <code title="">gneqq;</code> </td> <td> U+02269 </td> <td> <span class="glyph" title="">≩</span> </td> </tr><tr id="entity-gnsim"><td> <code title="">gnsim;</code> </td> <td> U+022E7 </td> <td> <span class="glyph" title="">⋧</span> </td> </tr><tr id="entity-Gopf"><td> <code title="">Gopf;</code> </td> <td> U+1D53E </td> <td> <span class="glyph" title="">𝔾</span> </td> </tr><tr id="entity-gopf"><td> <code title="">gopf;</code> </td> <td> U+1D558 </td> <td> <span class="glyph" title="">𝕘</span> </td> </tr><tr id="entity-grave"><td> <code title="">grave;</code> </td> <td> U+00060 </td> <td> <span class="glyph" title="">`</span> </td> </tr><tr id="entity-GreaterEqual"><td> <code title="">GreaterEqual;</code> </td> <td> U+02265 </td> <td> <span class="glyph" title="">≥</span> </td> </tr><tr id="entity-GreaterEqualLess"><td> <code title="">GreaterEqualLess;</code> </td> <td> U+022DB </td> <td> <span class="glyph" title="">⋛</span> </td> </tr><tr id="entity-GreaterFullEqual"><td> <code title="">GreaterFullEqual;</code> </td> <td> U+02267 </td> <td> <span class="glyph" title="">≧</span> </td> </tr><tr id="entity-GreaterGreater"><td> <code title="">GreaterGreater;</code> </td> <td> U+02AA2 </td> <td> <span class="glyph" title="">⪢</span> </td> </tr><tr id="entity-GreaterLess"><td> <code title="">GreaterLess;</code> </td> <td> U+02277 </td> <td> <span class="glyph" title="">≷</span> </td> </tr><tr id="entity-GreaterSlantEqual"><td> <code title="">GreaterSlantEqual;</code> </td> <td> U+02A7E </td> <td> <span class="glyph" title="">⩾</span> </td> </tr><tr id="entity-GreaterTilde"><td> <code title="">GreaterTilde;</code> </td> <td> U+02273 </td> <td> <span class="glyph" title="">≳</span> </td> </tr><tr id="entity-Gscr"><td> <code title="">Gscr;</code> </td> <td> U+1D4A2 </td> <td> <span class="glyph" title="">𝒢</span> </td> </tr><tr id="entity-gscr"><td> <code title="">gscr;</code> </td> <td> U+0210A </td> <td> <span class="glyph" title="">ℊ</span> </td> </tr><tr id="entity-gsim"><td> <code title="">gsim;</code> </td> <td> U+02273 </td> <td> <span class="glyph" title="">≳</span> </td> </tr><tr id="entity-gsime"><td> <code title="">gsime;</code> </td> <td> U+02A8E </td> <td> <span class="glyph" title="">⪎</span> </td> </tr><tr id="entity-gsiml"><td> <code title="">gsiml;</code> </td> <td> U+02A90 </td> <td> <span class="glyph" title="">⪐</span> </td> </tr><tr id="entity-GT"><td> <code title="">GT;</code> </td> <td> U+0003E </td> <td> <span class="glyph" title="">></span> </td> </tr><tr class="impl" id="entity-GT-legacy"><td> <code title="">GT</code> </td> <td> U+0003E </td> <td> <span title="">></span> </td> </tr><tr id="entity-Gt"><td> <code title="">Gt;</code> </td> <td> U+0226B </td> <td> <span class="glyph" title="">≫</span> </td> </tr><tr id="entity-gt"><td> <code title="">gt;</code> </td> <td> U+0003E </td> <td> <span class="glyph" title="">></span> </td> </tr><tr class="impl" id="entity-gt-legacy"><td> <code title="">gt</code> </td> <td> U+0003E </td> <td> <span title="">></span> </td> </tr><tr id="entity-gtcc"><td> <code title="">gtcc;</code> </td> <td> U+02AA7 </td> <td> <span class="glyph" title="">⪧</span> </td> </tr><tr id="entity-gtcir"><td> <code title="">gtcir;</code> </td> <td> U+02A7A </td> <td> <span class="glyph" title="">⩺</span> </td> </tr><tr id="entity-gtdot"><td> <code title="">gtdot;</code> </td> <td> U+022D7 </td> <td> <span class="glyph" title="">⋗</span> </td> </tr><tr id="entity-gtlPar"><td> <code title="">gtlPar;</code> </td> <td> U+02995 </td> <td> <span class="glyph" title="">⦕</span> </td> </tr><tr id="entity-gtquest"><td> <code title="">gtquest;</code> </td> <td> U+02A7C </td> <td> <span class="glyph" title="">⩼</span> </td> </tr><tr id="entity-gtrapprox"><td> <code title="">gtrapprox;</code> </td> <td> U+02A86 </td> <td> <span class="glyph" title="">⪆</span> </td> </tr><tr id="entity-gtrarr"><td> <code title="">gtrarr;</code> </td> <td> U+02978 </td> <td> <span class="glyph" title="">⥸</span> </td> </tr><tr id="entity-gtrdot"><td> <code title="">gtrdot;</code> </td> <td> U+022D7 </td> <td> <span class="glyph" title="">⋗</span> </td> </tr><tr id="entity-gtreqless"><td> <code title="">gtreqless;</code> </td> <td> U+022DB </td> <td> <span class="glyph" title="">⋛</span> </td> </tr><tr id="entity-gtreqqless"><td> <code title="">gtreqqless;</code> </td> <td> U+02A8C </td> <td> <span class="glyph" title="">⪌</span> </td> </tr><tr id="entity-gtrless"><td> <code title="">gtrless;</code> </td> <td> U+02277 </td> <td> <span class="glyph" title="">≷</span> </td> </tr><tr id="entity-gtrsim"><td> <code title="">gtrsim;</code> </td> <td> U+02273 </td> <td> <span class="glyph" title="">≳</span> </td> </tr><tr id="entity-gvertneqq"><td> <code title="">gvertneqq;</code> </td> <td> U+02269 U+0FE00 </td> <td> <span class="glyph compound" title="">≩︀</span> </td> </tr><tr id="entity-gvnE"><td> <code title="">gvnE;</code> </td> <td> U+02269 U+0FE00 </td> <td> <span class="glyph compound" title="">≩︀</span> </td> </tr><tr id="entity-Hacek"><td> <code title="">Hacek;</code> </td> <td> U+002C7 </td> <td> <span class="glyph" title="">ˇ</span> </td> </tr><tr id="entity-hairsp"><td> <code title="">hairsp;</code> </td> <td> U+0200A </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-half"><td> <code title="">half;</code> </td> <td> U+000BD </td> <td> <span class="glyph" title="">½</span> </td> </tr><tr id="entity-hamilt"><td> <code title="">hamilt;</code> </td> <td> U+0210B </td> <td> <span class="glyph" title="">ℋ</span> </td> </tr><tr id="entity-HARDcy"><td> <code title="">HARDcy;</code> </td> <td> U+0042A </td> <td> <span class="glyph" title="">Ъ</span> </td> </tr><tr id="entity-hardcy"><td> <code title="">hardcy;</code> </td> <td> U+0044A </td> <td> <span class="glyph" title="">ъ</span> </td> </tr><tr id="entity-hArr"><td> <code title="">hArr;</code> </td> <td> U+021D4 </td> <td> <span class="glyph" title="">⇔</span> </td> </tr><tr id="entity-harr"><td> <code title="">harr;</code> </td> <td> U+02194 </td> <td> <span class="glyph" title="">↔</span> </td> </tr><tr id="entity-harrcir"><td> <code title="">harrcir;</code> </td> <td> U+02948 </td> <td> <span class="glyph" title="">⥈</span> </td> </tr><tr id="entity-harrw"><td> <code title="">harrw;</code> </td> <td> U+021AD </td> <td> <span class="glyph" title="">↭</span> </td> </tr><tr id="entity-Hat"><td> <code title="">Hat;</code> </td> <td> U+0005E </td> <td> <span class="glyph" title="">^</span> </td> </tr><tr id="entity-hbar"><td> <code title="">hbar;</code> </td> <td> U+0210F </td> <td> <span class="glyph" title="">ℏ</span> </td> </tr><tr id="entity-Hcirc"><td> <code title="">Hcirc;</code> </td> <td> U+00124 </td> <td> <span class="glyph" title="">Ĥ</span> </td> </tr><tr id="entity-hcirc"><td> <code title="">hcirc;</code> </td> <td> U+00125 </td> <td> <span class="glyph" title="">ĥ</span> </td> </tr><tr id="entity-hearts"><td> <code title="">hearts;</code> </td> <td> U+02665 </td> <td> <span class="glyph" title="">♥</span> </td> </tr><tr id="entity-heartsuit"><td> <code title="">heartsuit;</code> </td> <td> U+02665 </td> <td> <span class="glyph" title="">♥</span> </td> </tr><tr id="entity-hellip"><td> <code title="">hellip;</code> </td> <td> U+02026 </td> <td> <span class="glyph" title="">…</span> </td> </tr><tr id="entity-hercon"><td> <code title="">hercon;</code> </td> <td> U+022B9 </td> <td> <span class="glyph" title="">⊹</span> </td> </tr><tr id="entity-Hfr"><td> <code title="">Hfr;</code> </td> <td> U+0210C </td> <td> <span class="glyph" title="">ℌ</span> </td> </tr><tr id="entity-hfr"><td> <code title="">hfr;</code> </td> <td> U+1D525 </td> <td> <span class="glyph" title="">𝔥</span> </td> </tr><tr id="entity-HilbertSpace"><td> <code title="">HilbertSpace;</code> </td> <td> U+0210B </td> <td> <span class="glyph" title="">ℋ</span> </td> </tr><tr id="entity-hksearow"><td> <code title="">hksearow;</code> </td> <td> U+02925 </td> <td> <span class="glyph" title="">⤥</span> </td> </tr><tr id="entity-hkswarow"><td> <code title="">hkswarow;</code> </td> <td> U+02926 </td> <td> <span class="glyph" title="">⤦</span> </td> </tr><tr id="entity-hoarr"><td> <code title="">hoarr;</code> </td> <td> U+021FF </td> <td> <span class="glyph" title="">⇿</span> </td> </tr><tr id="entity-homtht"><td> <code title="">homtht;</code> </td> <td> U+0223B </td> <td> <span class="glyph" title="">∻</span> </td> </tr><tr id="entity-hookleftarrow"><td> <code title="">hookleftarrow;</code> </td> <td> U+021A9 </td> <td> <span class="glyph" title="">↩</span> </td> </tr><tr id="entity-hookrightarrow"><td> <code title="">hookrightarrow;</code> </td> <td> U+021AA </td> <td> <span class="glyph" title="">↪</span> </td> </tr><tr id="entity-Hopf"><td> <code title="">Hopf;</code> </td> <td> U+0210D </td> <td> <span class="glyph" title="">ℍ</span> </td> </tr><tr id="entity-hopf"><td> <code title="">hopf;</code> </td> <td> U+1D559 </td> <td> <span class="glyph" title="">𝕙</span> </td> </tr><tr id="entity-horbar"><td> <code title="">horbar;</code> </td> <td> U+02015 </td> <td> <span class="glyph" title="">―</span> </td> </tr><tr id="entity-HorizontalLine"><td> <code title="">HorizontalLine;</code> </td> <td> U+02500 </td> <td> <span class="glyph" title="">─</span> </td> </tr><tr id="entity-Hscr"><td> <code title="">Hscr;</code> </td> <td> U+0210B </td> <td> <span class="glyph" title="">ℋ</span> </td> </tr><tr id="entity-hscr"><td> <code title="">hscr;</code> </td> <td> U+1D4BD </td> <td> <span class="glyph" title="">𝒽</span> </td> </tr><tr id="entity-hslash"><td> <code title="">hslash;</code> </td> <td> U+0210F </td> <td> <span class="glyph" title="">ℏ</span> </td> </tr><tr id="entity-Hstrok"><td> <code title="">Hstrok;</code> </td> <td> U+00126 </td> <td> <span class="glyph" title="">Ħ</span> </td> </tr><tr id="entity-hstrok"><td> <code title="">hstrok;</code> </td> <td> U+00127 </td> <td> <span class="glyph" title="">ħ</span> </td> </tr><tr id="entity-HumpDownHump"><td> <code title="">HumpDownHump;</code> </td> <td> U+0224E </td> <td> <span class="glyph" title="">≎</span> </td> </tr><tr id="entity-HumpEqual"><td> <code title="">HumpEqual;</code> </td> <td> U+0224F </td> <td> <span class="glyph" title="">≏</span> </td> </tr><tr id="entity-hybull"><td> <code title="">hybull;</code> </td> <td> U+02043 </td> <td> <span class="glyph" title="">⁃</span> </td> </tr><tr id="entity-hyphen"><td> <code title="">hyphen;</code> </td> <td> U+02010 </td> <td> <span class="glyph" title="">‐</span> </td> </tr><tr id="entity-Iacute"><td> <code title="">Iacute;</code> </td> <td> U+000CD </td> <td> <span class="glyph" title="">Í</span> </td> </tr><tr class="impl" id="entity-Iacute-legacy"><td> <code title="">Iacute</code> </td> <td> U+000CD </td> <td> <span title="">Í</span> </td> </tr><tr id="entity-iacute"><td> <code title="">iacute;</code> </td> <td> U+000ED </td> <td> <span class="glyph" title="">í</span> </td> </tr><tr class="impl" id="entity-iacute-legacy"><td> <code title="">iacute</code> </td> <td> U+000ED </td> <td> <span title="">í</span> </td> </tr><tr id="entity-ic"><td> <code title="">ic;</code> </td> <td> U+02063 </td> <td> <span class="glyph" title="">⁣</span> </td> </tr><tr id="entity-Icirc"><td> <code title="">Icirc;</code> </td> <td> U+000CE </td> <td> <span class="glyph" title="">Î</span> </td> </tr><tr class="impl" id="entity-Icirc-legacy"><td> <code title="">Icirc</code> </td> <td> U+000CE </td> <td> <span title="">Î</span> </td> </tr><tr id="entity-icirc"><td> <code title="">icirc;</code> </td> <td> U+000EE </td> <td> <span class="glyph" title="">î</span> </td> </tr><tr class="impl" id="entity-icirc-legacy"><td> <code title="">icirc</code> </td> <td> U+000EE </td> <td> <span title="">î</span> </td> </tr><tr id="entity-Icy"><td> <code title="">Icy;</code> </td> <td> U+00418 </td> <td> <span class="glyph" title="">И</span> </td> </tr><tr id="entity-icy"><td> <code title="">icy;</code> </td> <td> U+00438 </td> <td> <span class="glyph" title="">и</span> </td> </tr><tr id="entity-Idot"><td> <code title="">Idot;</code> </td> <td> U+00130 </td> <td> <span class="glyph" title="">İ</span> </td> </tr><tr id="entity-IEcy"><td> <code title="">IEcy;</code> </td> <td> U+00415 </td> <td> <span class="glyph" title="">Е</span> </td> </tr><tr id="entity-iecy"><td> <code title="">iecy;</code> </td> <td> U+00435 </td> <td> <span class="glyph" title="">е</span> </td> </tr><tr id="entity-iexcl"><td> <code title="">iexcl;</code> </td> <td> U+000A1 </td> <td> <span class="glyph" title="">¡</span> </td> </tr><tr class="impl" id="entity-iexcl-legacy"><td> <code title="">iexcl</code> </td> <td> U+000A1 </td> <td> <span title="">¡</span> </td> </tr><tr id="entity-iff"><td> <code title="">iff;</code> </td> <td> U+021D4 </td> <td> <span class="glyph" title="">⇔</span> </td> </tr><tr id="entity-Ifr"><td> <code title="">Ifr;</code> </td> <td> U+02111 </td> <td> <span class="glyph" title="">ℑ</span> </td> </tr><tr id="entity-ifr"><td> <code title="">ifr;</code> </td> <td> U+1D526 </td> <td> <span class="glyph" title="">𝔦</span> </td> </tr><tr id="entity-Igrave"><td> <code title="">Igrave;</code> </td> <td> U+000CC </td> <td> <span class="glyph" title="">Ì</span> </td> </tr><tr class="impl" id="entity-Igrave-legacy"><td> <code title="">Igrave</code> </td> <td> U+000CC </td> <td> <span title="">Ì</span> </td> </tr><tr id="entity-igrave"><td> <code title="">igrave;</code> </td> <td> U+000EC </td> <td> <span class="glyph" title="">ì</span> </td> </tr><tr class="impl" id="entity-igrave-legacy"><td> <code title="">igrave</code> </td> <td> U+000EC </td> <td> <span title="">ì</span> </td> </tr><tr id="entity-ii"><td> <code title="">ii;</code> </td> <td> U+02148 </td> <td> <span class="glyph" title="">ⅈ</span> </td> </tr><tr id="entity-iiiint"><td> <code title="">iiiint;</code> </td> <td> U+02A0C </td> <td> <span class="glyph" title="">⨌</span> </td> </tr><tr id="entity-iiint"><td> <code title="">iiint;</code> </td> <td> U+0222D </td> <td> <span class="glyph" title="">∭</span> </td> </tr><tr id="entity-iinfin"><td> <code title="">iinfin;</code> </td> <td> U+029DC </td> <td> <span class="glyph" title="">⧜</span> </td> </tr><tr id="entity-iiota"><td> <code title="">iiota;</code> </td> <td> U+02129 </td> <td> <span class="glyph" title="">℩</span> </td> </tr><tr id="entity-IJlig"><td> <code title="">IJlig;</code> </td> <td> U+00132 </td> <td> <span class="glyph" title="">IJ</span> </td> </tr><tr id="entity-ijlig"><td> <code title="">ijlig;</code> </td> <td> U+00133 </td> <td> <span class="glyph" title="">ij</span> </td> </tr><tr id="entity-Im"><td> <code title="">Im;</code> </td> <td> U+02111 </td> <td> <span class="glyph" title="">ℑ</span> </td> </tr><tr id="entity-Imacr"><td> <code title="">Imacr;</code> </td> <td> U+0012A </td> <td> <span class="glyph" title="">Ī</span> </td> </tr><tr id="entity-imacr"><td> <code title="">imacr;</code> </td> <td> U+0012B </td> <td> <span class="glyph" title="">ī</span> </td> </tr><tr id="entity-image"><td> <code title="">image;</code> </td> <td> U+02111 </td> <td> <span class="glyph" title="">ℑ</span> </td> </tr><tr id="entity-ImaginaryI"><td> <code title="">ImaginaryI;</code> </td> <td> U+02148 </td> <td> <span class="glyph" title="">ⅈ</span> </td> </tr><tr id="entity-imagline"><td> <code title="">imagline;</code> </td> <td> U+02110 </td> <td> <span class="glyph" title="">ℐ</span> </td> </tr><tr id="entity-imagpart"><td> <code title="">imagpart;</code> </td> <td> U+02111 </td> <td> <span class="glyph" title="">ℑ</span> </td> </tr><tr id="entity-imath"><td> <code title="">imath;</code> </td> <td> U+00131 </td> <td> <span class="glyph" title="">ı</span> </td> </tr><tr id="entity-imof"><td> <code title="">imof;</code> </td> <td> U+022B7 </td> <td> <span class="glyph" title="">⊷</span> </td> </tr><tr id="entity-imped"><td> <code title="">imped;</code> </td> <td> U+001B5 </td> <td> <span class="glyph" title="">Ƶ</span> </td> </tr><tr id="entity-Implies"><td> <code title="">Implies;</code> </td> <td> U+021D2 </td> <td> <span class="glyph" title="">⇒</span> </td> </tr><tr id="entity-in"><td> <code title="">in;</code> </td> <td> U+02208 </td> <td> <span class="glyph" title="">∈</span> </td> </tr><tr id="entity-incare"><td> <code title="">incare;</code> </td> <td> U+02105 </td> <td> <span class="glyph" title="">℅</span> </td> </tr><tr id="entity-infin"><td> <code title="">infin;</code> </td> <td> U+0221E </td> <td> <span class="glyph" title="">∞</span> </td> </tr><tr id="entity-infintie"><td> <code title="">infintie;</code> </td> <td> U+029DD </td> <td> <span class="glyph" title="">⧝</span> </td> </tr><tr id="entity-inodot"><td> <code title="">inodot;</code> </td> <td> U+00131 </td> <td> <span class="glyph" title="">ı</span> </td> </tr><tr id="entity-Int"><td> <code title="">Int;</code> </td> <td> U+0222C </td> <td> <span class="glyph" title="">∬</span> </td> </tr><tr id="entity-int"><td> <code title="">int;</code> </td> <td> U+0222B </td> <td> <span class="glyph" title="">∫</span> </td> </tr><tr id="entity-intcal"><td> <code title="">intcal;</code> </td> <td> U+022BA </td> <td> <span class="glyph" title="">⊺</span> </td> </tr><tr id="entity-integers"><td> <code title="">integers;</code> </td> <td> U+02124 </td> <td> <span class="glyph" title="">ℤ</span> </td> </tr><tr id="entity-Integral"><td> <code title="">Integral;</code> </td> <td> U+0222B </td> <td> <span class="glyph" title="">∫</span> </td> </tr><tr id="entity-intercal"><td> <code title="">intercal;</code> </td> <td> U+022BA </td> <td> <span class="glyph" title="">⊺</span> </td> </tr><tr id="entity-Intersection"><td> <code title="">Intersection;</code> </td> <td> U+022C2 </td> <td> <span class="glyph" title="">⋂</span> </td> </tr><tr id="entity-intlarhk"><td> <code title="">intlarhk;</code> </td> <td> U+02A17 </td> <td> <span class="glyph" title="">⨗</span> </td> </tr><tr id="entity-intprod"><td> <code title="">intprod;</code> </td> <td> U+02A3C </td> <td> <span class="glyph" title="">⨼</span> </td> </tr><tr id="entity-InvisibleComma"><td> <code title="">InvisibleComma;</code> </td> <td> U+02063 </td> <td> <span class="glyph" title="">⁣</span> </td> </tr><tr id="entity-InvisibleTimes"><td> <code title="">InvisibleTimes;</code> </td> <td> U+02062 </td> <td> <span class="glyph" title="">⁢</span> </td> </tr><tr id="entity-IOcy"><td> <code title="">IOcy;</code> </td> <td> U+00401 </td> <td> <span class="glyph" title="">Ё</span> </td> </tr><tr id="entity-iocy"><td> <code title="">iocy;</code> </td> <td> U+00451 </td> <td> <span class="glyph" title="">ё</span> </td> </tr><tr id="entity-Iogon"><td> <code title="">Iogon;</code> </td> <td> U+0012E </td> <td> <span class="glyph" title="">Į</span> </td> </tr><tr id="entity-iogon"><td> <code title="">iogon;</code> </td> <td> U+0012F </td> <td> <span class="glyph" title="">į</span> </td> </tr><tr id="entity-Iopf"><td> <code title="">Iopf;</code> </td> <td> U+1D540 </td> <td> <span class="glyph" title="">𝕀</span> </td> </tr><tr id="entity-iopf"><td> <code title="">iopf;</code> </td> <td> U+1D55A </td> <td> <span class="glyph" title="">𝕚</span> </td> </tr><tr id="entity-Iota"><td> <code title="">Iota;</code> </td> <td> U+00399 </td> <td> <span class="glyph" title="">Ι</span> </td> </tr><tr id="entity-iota"><td> <code title="">iota;</code> </td> <td> U+003B9 </td> <td> <span class="glyph" title="">ι</span> </td> </tr><tr id="entity-iprod"><td> <code title="">iprod;</code> </td> <td> U+02A3C </td> <td> <span class="glyph" title="">⨼</span> </td> </tr><tr id="entity-iquest"><td> <code title="">iquest;</code> </td> <td> U+000BF </td> <td> <span class="glyph" title="">¿</span> </td> </tr><tr class="impl" id="entity-iquest-legacy"><td> <code title="">iquest</code> </td> <td> U+000BF </td> <td> <span title="">¿</span> </td> </tr><tr id="entity-Iscr"><td> <code title="">Iscr;</code> </td> <td> U+02110 </td> <td> <span class="glyph" title="">ℐ</span> </td> </tr><tr id="entity-iscr"><td> <code title="">iscr;</code> </td> <td> U+1D4BE </td> <td> <span class="glyph" title="">𝒾</span> </td> </tr><tr id="entity-isin"><td> <code title="">isin;</code> </td> <td> U+02208 </td> <td> <span class="glyph" title="">∈</span> </td> </tr><tr id="entity-isindot"><td> <code title="">isindot;</code> </td> <td> U+022F5 </td> <td> <span class="glyph" title="">⋵</span> </td> </tr><tr id="entity-isinE"><td> <code title="">isinE;</code> </td> <td> U+022F9 </td> <td> <span class="glyph" title="">⋹</span> </td> </tr><tr id="entity-isins"><td> <code title="">isins;</code> </td> <td> U+022F4 </td> <td> <span class="glyph" title="">⋴</span> </td> </tr><tr id="entity-isinsv"><td> <code title="">isinsv;</code> </td> <td> U+022F3 </td> <td> <span class="glyph" title="">⋳</span> </td> </tr><tr id="entity-isinv"><td> <code title="">isinv;</code> </td> <td> U+02208 </td> <td> <span class="glyph" title="">∈</span> </td> </tr><tr id="entity-it"><td> <code title="">it;</code> </td> <td> U+02062 </td> <td> <span class="glyph" title="">⁢</span> </td> </tr><tr id="entity-Itilde"><td> <code title="">Itilde;</code> </td> <td> U+00128 </td> <td> <span class="glyph" title="">Ĩ</span> </td> </tr><tr id="entity-itilde"><td> <code title="">itilde;</code> </td> <td> U+00129 </td> <td> <span class="glyph" title="">ĩ</span> </td> </tr><tr id="entity-Iukcy"><td> <code title="">Iukcy;</code> </td> <td> U+00406 </td> <td> <span class="glyph" title="">І</span> </td> </tr><tr id="entity-iukcy"><td> <code title="">iukcy;</code> </td> <td> U+00456 </td> <td> <span class="glyph" title="">і</span> </td> </tr><tr id="entity-Iuml"><td> <code title="">Iuml;</code> </td> <td> U+000CF </td> <td> <span class="glyph" title="">Ï</span> </td> </tr><tr class="impl" id="entity-Iuml-legacy"><td> <code title="">Iuml</code> </td> <td> U+000CF </td> <td> <span title="">Ï</span> </td> </tr><tr id="entity-iuml"><td> <code title="">iuml;</code> </td> <td> U+000EF </td> <td> <span class="glyph" title="">ï</span> </td> </tr><tr class="impl" id="entity-iuml-legacy"><td> <code title="">iuml</code> </td> <td> U+000EF </td> <td> <span title="">ï</span> </td> </tr><tr id="entity-Jcirc"><td> <code title="">Jcirc;</code> </td> <td> U+00134 </td> <td> <span class="glyph" title="">Ĵ</span> </td> </tr><tr id="entity-jcirc"><td> <code title="">jcirc;</code> </td> <td> U+00135 </td> <td> <span class="glyph" title="">ĵ</span> </td> </tr><tr id="entity-Jcy"><td> <code title="">Jcy;</code> </td> <td> U+00419 </td> <td> <span class="glyph" title="">Й</span> </td> </tr><tr id="entity-jcy"><td> <code title="">jcy;</code> </td> <td> U+00439 </td> <td> <span class="glyph" title="">й</span> </td> </tr><tr id="entity-Jfr"><td> <code title="">Jfr;</code> </td> <td> U+1D50D </td> <td> <span class="glyph" title="">𝔍</span> </td> </tr><tr id="entity-jfr"><td> <code title="">jfr;</code> </td> <td> U+1D527 </td> <td> <span class="glyph" title="">𝔧</span> </td> </tr><tr id="entity-jmath"><td> <code title="">jmath;</code> </td> <td> U+00237 </td> <td> <span class="glyph" title="">ȷ</span> </td> </tr><tr id="entity-Jopf"><td> <code title="">Jopf;</code> </td> <td> U+1D541 </td> <td> <span class="glyph" title="">𝕁</span> </td> </tr><tr id="entity-jopf"><td> <code title="">jopf;</code> </td> <td> U+1D55B </td> <td> <span class="glyph" title="">𝕛</span> </td> </tr><tr id="entity-Jscr"><td> <code title="">Jscr;</code> </td> <td> U+1D4A5 </td> <td> <span class="glyph" title="">𝒥</span> </td> </tr><tr id="entity-jscr"><td> <code title="">jscr;</code> </td> <td> U+1D4BF </td> <td> <span class="glyph" title="">𝒿</span> </td> </tr><tr id="entity-Jsercy"><td> <code title="">Jsercy;</code> </td> <td> U+00408 </td> <td> <span class="glyph" title="">Ј</span> </td> </tr><tr id="entity-jsercy"><td> <code title="">jsercy;</code> </td> <td> U+00458 </td> <td> <span class="glyph" title="">ј</span> </td> </tr><tr id="entity-Jukcy"><td> <code title="">Jukcy;</code> </td> <td> U+00404 </td> <td> <span class="glyph" title="">Є</span> </td> </tr><tr id="entity-jukcy"><td> <code title="">jukcy;</code> </td> <td> U+00454 </td> <td> <span class="glyph" title="">є</span> </td> </tr><tr id="entity-Kappa"><td> <code title="">Kappa;</code> </td> <td> U+0039A </td> <td> <span class="glyph" title="">Κ</span> </td> </tr><tr id="entity-kappa"><td> <code title="">kappa;</code> </td> <td> U+003BA </td> <td> <span class="glyph" title="">κ</span> </td> </tr><tr id="entity-kappav"><td> <code title="">kappav;</code> </td> <td> U+003F0 </td> <td> <span class="glyph" title="">ϰ</span> </td> </tr><tr id="entity-Kcedil"><td> <code title="">Kcedil;</code> </td> <td> U+00136 </td> <td> <span class="glyph" title="">Ķ</span> </td> </tr><tr id="entity-kcedil"><td> <code title="">kcedil;</code> </td> <td> U+00137 </td> <td> <span class="glyph" title="">ķ</span> </td> </tr><tr id="entity-Kcy"><td> <code title="">Kcy;</code> </td> <td> U+0041A </td> <td> <span class="glyph" title="">К</span> </td> </tr><tr id="entity-kcy"><td> <code title="">kcy;</code> </td> <td> U+0043A </td> <td> <span class="glyph" title="">к</span> </td> </tr><tr id="entity-Kfr"><td> <code title="">Kfr;</code> </td> <td> U+1D50E </td> <td> <span class="glyph" title="">𝔎</span> </td> </tr><tr id="entity-kfr"><td> <code title="">kfr;</code> </td> <td> U+1D528 </td> <td> <span class="glyph" title="">𝔨</span> </td> </tr><tr id="entity-kgreen"><td> <code title="">kgreen;</code> </td> <td> U+00138 </td> <td> <span class="glyph" title="">ĸ</span> </td> </tr><tr id="entity-KHcy"><td> <code title="">KHcy;</code> </td> <td> U+00425 </td> <td> <span class="glyph" title="">Х</span> </td> </tr><tr id="entity-khcy"><td> <code title="">khcy;</code> </td> <td> U+00445 </td> <td> <span class="glyph" title="">х</span> </td> </tr><tr id="entity-KJcy"><td> <code title="">KJcy;</code> </td> <td> U+0040C </td> <td> <span class="glyph" title="">Ќ</span> </td> </tr><tr id="entity-kjcy"><td> <code title="">kjcy;</code> </td> <td> U+0045C </td> <td> <span class="glyph" title="">ќ</span> </td> </tr><tr id="entity-Kopf"><td> <code title="">Kopf;</code> </td> <td> U+1D542 </td> <td> <span class="glyph" title="">𝕂</span> </td> </tr><tr id="entity-kopf"><td> <code title="">kopf;</code> </td> <td> U+1D55C </td> <td> <span class="glyph" title="">𝕜</span> </td> </tr><tr id="entity-Kscr"><td> <code title="">Kscr;</code> </td> <td> U+1D4A6 </td> <td> <span class="glyph" title="">𝒦</span> </td> </tr><tr id="entity-kscr"><td> <code title="">kscr;</code> </td> <td> U+1D4C0 </td> <td> <span class="glyph" title="">𝓀</span> </td> </tr><tr id="entity-lAarr"><td> <code title="">lAarr;</code> </td> <td> U+021DA </td> <td> <span class="glyph" title="">⇚</span> </td> </tr><tr id="entity-Lacute"><td> <code title="">Lacute;</code> </td> <td> U+00139 </td> <td> <span class="glyph" title="">Ĺ</span> </td> </tr><tr id="entity-lacute"><td> <code title="">lacute;</code> </td> <td> U+0013A </td> <td> <span class="glyph" title="">ĺ</span> </td> </tr><tr id="entity-laemptyv"><td> <code title="">laemptyv;</code> </td> <td> U+029B4 </td> <td> <span class="glyph" title="">⦴</span> </td> </tr><tr id="entity-lagran"><td> <code title="">lagran;</code> </td> <td> U+02112 </td> <td> <span class="glyph" title="">ℒ</span> </td> </tr><tr id="entity-Lambda"><td> <code title="">Lambda;</code> </td> <td> U+0039B </td> <td> <span class="glyph" title="">Λ</span> </td> </tr><tr id="entity-lambda"><td> <code title="">lambda;</code> </td> <td> U+003BB </td> <td> <span class="glyph" title="">λ</span> </td> </tr><tr id="entity-Lang"><td> <code title="">Lang;</code> </td> <td> U+027EA </td> <td> <span class="glyph" title="">⟪</span> </td> </tr><tr id="entity-lang"><td> <code title="">lang;</code> </td> <td> U+027E8 </td> <td> <span class="glyph" title="">〈</span> </td> </tr><tr id="entity-langd"><td> <code title="">langd;</code> </td> <td> U+02991 </td> <td> <span class="glyph" title="">⦑</span> </td> </tr><tr id="entity-langle"><td> <code title="">langle;</code> </td> <td> U+027E8 </td> <td> <span class="glyph" title="">〈</span> </td> </tr><tr id="entity-lap"><td> <code title="">lap;</code> </td> <td> U+02A85 </td> <td> <span class="glyph" title="">⪅</span> </td> </tr><tr id="entity-Laplacetrf"><td> <code title="">Laplacetrf;</code> </td> <td> U+02112 </td> <td> <span class="glyph" title="">ℒ</span> </td> </tr><tr id="entity-laquo"><td> <code title="">laquo;</code> </td> <td> U+000AB </td> <td> <span class="glyph" title="">«</span> </td> </tr><tr class="impl" id="entity-laquo-legacy"><td> <code title="">laquo</code> </td> <td> U+000AB </td> <td> <span title="">«</span> </td> </tr><tr id="entity-Larr"><td> <code title="">Larr;</code> </td> <td> U+0219E </td> <td> <span class="glyph" title="">↞</span> </td> </tr><tr id="entity-lArr"><td> <code title="">lArr;</code> </td> <td> U+021D0 </td> <td> <span class="glyph" title="">⇐</span> </td> </tr><tr id="entity-larr"><td> <code title="">larr;</code> </td> <td> U+02190 </td> <td> <span class="glyph" title="">←</span> </td> </tr><tr id="entity-larrb"><td> <code title="">larrb;</code> </td> <td> U+021E4 </td> <td> <span class="glyph" title="">⇤</span> </td> </tr><tr id="entity-larrbfs"><td> <code title="">larrbfs;</code> </td> <td> U+0291F </td> <td> <span class="glyph" title="">⤟</span> </td> </tr><tr id="entity-larrfs"><td> <code title="">larrfs;</code> </td> <td> U+0291D </td> <td> <span class="glyph" title="">⤝</span> </td> </tr><tr id="entity-larrhk"><td> <code title="">larrhk;</code> </td> <td> U+021A9 </td> <td> <span class="glyph" title="">↩</span> </td> </tr><tr id="entity-larrlp"><td> <code title="">larrlp;</code> </td> <td> U+021AB </td> <td> <span class="glyph" title="">↫</span> </td> </tr><tr id="entity-larrpl"><td> <code title="">larrpl;</code> </td> <td> U+02939 </td> <td> <span class="glyph" title="">⤹</span> </td> </tr><tr id="entity-larrsim"><td> <code title="">larrsim;</code> </td> <td> U+02973 </td> <td> <span class="glyph" title="">⥳</span> </td> </tr><tr id="entity-larrtl"><td> <code title="">larrtl;</code> </td> <td> U+021A2 </td> <td> <span class="glyph" title="">↢</span> </td> </tr><tr id="entity-lat"><td> <code title="">lat;</code> </td> <td> U+02AAB </td> <td> <span class="glyph" title="">⪫</span> </td> </tr><tr id="entity-lAtail"><td> <code title="">lAtail;</code> </td> <td> U+0291B </td> <td> <span class="glyph" title="">⤛</span> </td> </tr><tr id="entity-latail"><td> <code title="">latail;</code> </td> <td> U+02919 </td> <td> <span class="glyph" title="">⤙</span> </td> </tr><tr id="entity-late"><td> <code title="">late;</code> </td> <td> U+02AAD </td> <td> <span class="glyph" title="">⪭</span> </td> </tr><tr id="entity-lates"><td> <code title="">lates;</code> </td> <td> U+02AAD U+0FE00 </td> <td> <span class="glyph compound" title="">⪭︀</span> </td> </tr><tr id="entity-lBarr"><td> <code title="">lBarr;</code> </td> <td> U+0290E </td> <td> <span class="glyph" title="">⤎</span> </td> </tr><tr id="entity-lbarr"><td> <code title="">lbarr;</code> </td> <td> U+0290C </td> <td> <span class="glyph" title="">⤌</span> </td> </tr><tr id="entity-lbbrk"><td> <code title="">lbbrk;</code> </td> <td> U+02772 </td> <td> <span class="glyph" title="">❲</span> </td> </tr><tr id="entity-lbrace"><td> <code title="">lbrace;</code> </td> <td> U+0007B </td> <td> <span class="glyph" title="">{</span> </td> </tr><tr id="entity-lbrack"><td> <code title="">lbrack;</code> </td> <td> U+0005B </td> <td> <span class="glyph" title="">[</span> </td> </tr><tr id="entity-lbrke"><td> <code title="">lbrke;</code> </td> <td> U+0298B </td> <td> <span class="glyph" title="">⦋</span> </td> </tr><tr id="entity-lbrksld"><td> <code title="">lbrksld;</code> </td> <td> U+0298F </td> <td> <span class="glyph" title="">⦏</span> </td> </tr><tr id="entity-lbrkslu"><td> <code title="">lbrkslu;</code> </td> <td> U+0298D </td> <td> <span class="glyph" title="">⦍</span> </td> </tr><tr id="entity-Lcaron"><td> <code title="">Lcaron;</code> </td> <td> U+0013D </td> <td> <span class="glyph" title="">Ľ</span> </td> </tr><tr id="entity-lcaron"><td> <code title="">lcaron;</code> </td> <td> U+0013E </td> <td> <span class="glyph" title="">ľ</span> </td> </tr><tr id="entity-Lcedil"><td> <code title="">Lcedil;</code> </td> <td> U+0013B </td> <td> <span class="glyph" title="">Ļ</span> </td> </tr><tr id="entity-lcedil"><td> <code title="">lcedil;</code> </td> <td> U+0013C </td> <td> <span class="glyph" title="">ļ</span> </td> </tr><tr id="entity-lceil"><td> <code title="">lceil;</code> </td> <td> U+02308 </td> <td> <span class="glyph" title="">⌈</span> </td> </tr><tr id="entity-lcub"><td> <code title="">lcub;</code> </td> <td> U+0007B </td> <td> <span class="glyph" title="">{</span> </td> </tr><tr id="entity-Lcy"><td> <code title="">Lcy;</code> </td> <td> U+0041B </td> <td> <span class="glyph" title="">Л</span> </td> </tr><tr id="entity-lcy"><td> <code title="">lcy;</code> </td> <td> U+0043B </td> <td> <span class="glyph" title="">л</span> </td> </tr><tr id="entity-ldca"><td> <code title="">ldca;</code> </td> <td> U+02936 </td> <td> <span class="glyph" title="">⤶</span> </td> </tr><tr id="entity-ldquo"><td> <code title="">ldquo;</code> </td> <td> U+0201C </td> <td> <span class="glyph" title="">“</span> </td> </tr><tr id="entity-ldquor"><td> <code title="">ldquor;</code> </td> <td> U+0201E </td> <td> <span class="glyph" title="">„</span> </td> </tr><tr id="entity-ldrdhar"><td> <code title="">ldrdhar;</code> </td> <td> U+02967 </td> <td> <span class="glyph" title="">⥧</span> </td> </tr><tr id="entity-ldrushar"><td> <code title="">ldrushar;</code> </td> <td> U+0294B </td> <td> <span class="glyph" title="">⥋</span> </td> </tr><tr id="entity-ldsh"><td> <code title="">ldsh;</code> </td> <td> U+021B2 </td> <td> <span class="glyph" title="">↲</span> </td> </tr><tr id="entity-lE"><td> <code title="">lE;</code> </td> <td> U+02266 </td> <td> <span class="glyph" title="">≦</span> </td> </tr><tr id="entity-le"><td> <code title="">le;</code> </td> <td> U+02264 </td> <td> <span class="glyph" title="">≤</span> </td> </tr><tr id="entity-LeftAngleBracket"><td> <code title="">LeftAngleBracket;</code> </td> <td> U+027E8 </td> <td> <span class="glyph" title="">〈</span> </td> </tr><tr id="entity-LeftArrow"><td> <code title="">LeftArrow;</code> </td> <td> U+02190 </td> <td> <span class="glyph" title="">←</span> </td> </tr><tr id="entity-Leftarrow"><td> <code title="">Leftarrow;</code> </td> <td> U+021D0 </td> <td> <span class="glyph" title="">⇐</span> </td> </tr><tr id="entity-leftarrow"><td> <code title="">leftarrow;</code> </td> <td> U+02190 </td> <td> <span class="glyph" title="">←</span> </td> </tr><tr id="entity-LeftArrowBar"><td> <code title="">LeftArrowBar;</code> </td> <td> U+021E4 </td> <td> <span class="glyph" title="">⇤</span> </td> </tr><tr id="entity-LeftArrowRightArrow"><td> <code title="">LeftArrowRightArrow;</code> </td> <td> U+021C6 </td> <td> <span class="glyph" title="">⇆</span> </td> </tr><tr id="entity-leftarrowtail"><td> <code title="">leftarrowtail;</code> </td> <td> U+021A2 </td> <td> <span class="glyph" title="">↢</span> </td> </tr><tr id="entity-LeftCeiling"><td> <code title="">LeftCeiling;</code> </td> <td> U+02308 </td> <td> <span class="glyph" title="">⌈</span> </td> </tr><tr id="entity-LeftDoubleBracket"><td> <code title="">LeftDoubleBracket;</code> </td> <td> U+027E6 </td> <td> <span class="glyph" title="">⟦</span> </td> </tr><tr id="entity-LeftDownTeeVector"><td> <code title="">LeftDownTeeVector;</code> </td> <td> U+02961 </td> <td> <span class="glyph" title="">⥡</span> </td> </tr><tr id="entity-LeftDownVector"><td> <code title="">LeftDownVector;</code> </td> <td> U+021C3 </td> <td> <span class="glyph" title="">⇃</span> </td> </tr><tr id="entity-LeftDownVectorBar"><td> <code title="">LeftDownVectorBar;</code> </td> <td> U+02959 </td> <td> <span class="glyph" title="">⥙</span> </td> </tr><tr id="entity-LeftFloor"><td> <code title="">LeftFloor;</code> </td> <td> U+0230A </td> <td> <span class="glyph" title="">⌊</span> </td> </tr><tr id="entity-leftharpoondown"><td> <code title="">leftharpoondown;</code> </td> <td> U+021BD </td> <td> <span class="glyph" title="">↽</span> </td> </tr><tr id="entity-leftharpoonup"><td> <code title="">leftharpoonup;</code> </td> <td> U+021BC </td> <td> <span class="glyph" title="">↼</span> </td> </tr><tr id="entity-leftleftarrows"><td> <code title="">leftleftarrows;</code> </td> <td> U+021C7 </td> <td> <span class="glyph" title="">⇇</span> </td> </tr><tr id="entity-LeftRightArrow"><td> <code title="">LeftRightArrow;</code> </td> <td> U+02194 </td> <td> <span class="glyph" title="">↔</span> </td> </tr><tr id="entity-Leftrightarrow"><td> <code title="">Leftrightarrow;</code> </td> <td> U+021D4 </td> <td> <span class="glyph" title="">⇔</span> </td> </tr><tr id="entity-leftrightarrow"><td> <code title="">leftrightarrow;</code> </td> <td> U+02194 </td> <td> <span class="glyph" title="">↔</span> </td> </tr><tr id="entity-leftrightarrows"><td> <code title="">leftrightarrows;</code> </td> <td> U+021C6 </td> <td> <span class="glyph" title="">⇆</span> </td> </tr><tr id="entity-leftrightharpoons"><td> <code title="">leftrightharpoons;</code> </td> <td> U+021CB </td> <td> <span class="glyph" title="">⇋</span> </td> </tr><tr id="entity-leftrightsquigarrow"><td> <code title="">leftrightsquigarrow;</code> </td> <td> U+021AD </td> <td> <span class="glyph" title="">↭</span> </td> </tr><tr id="entity-LeftRightVector"><td> <code title="">LeftRightVector;</code> </td> <td> U+0294E </td> <td> <span class="glyph" title="">⥎</span> </td> </tr><tr id="entity-LeftTee"><td> <code title="">LeftTee;</code> </td> <td> U+022A3 </td> <td> <span class="glyph" title="">⊣</span> </td> </tr><tr id="entity-LeftTeeArrow"><td> <code title="">LeftTeeArrow;</code> </td> <td> U+021A4 </td> <td> <span class="glyph" title="">↤</span> </td> </tr><tr id="entity-LeftTeeVector"><td> <code title="">LeftTeeVector;</code> </td> <td> U+0295A </td> <td> <span class="glyph" title="">⥚</span> </td> </tr><tr id="entity-leftthreetimes"><td> <code title="">leftthreetimes;</code> </td> <td> U+022CB </td> <td> <span class="glyph" title="">⋋</span> </td> </tr><tr id="entity-LeftTriangle"><td> <code title="">LeftTriangle;</code> </td> <td> U+022B2 </td> <td> <span class="glyph" title="">⊲</span> </td> </tr><tr id="entity-LeftTriangleBar"><td> <code title="">LeftTriangleBar;</code> </td> <td> U+029CF </td> <td> <span class="glyph" title="">⧏</span> </td> </tr><tr id="entity-LeftTriangleEqual"><td> <code title="">LeftTriangleEqual;</code> </td> <td> U+022B4 </td> <td> <span class="glyph" title="">⊴</span> </td> </tr><tr id="entity-LeftUpDownVector"><td> <code title="">LeftUpDownVector;</code> </td> <td> U+02951 </td> <td> <span class="glyph" title="">⥑</span> </td> </tr><tr id="entity-LeftUpTeeVector"><td> <code title="">LeftUpTeeVector;</code> </td> <td> U+02960 </td> <td> <span class="glyph" title="">⥠</span> </td> </tr><tr id="entity-LeftUpVector"><td> <code title="">LeftUpVector;</code> </td> <td> U+021BF </td> <td> <span class="glyph" title="">↿</span> </td> </tr><tr id="entity-LeftUpVectorBar"><td> <code title="">LeftUpVectorBar;</code> </td> <td> U+02958 </td> <td> <span class="glyph" title="">⥘</span> </td> </tr><tr id="entity-LeftVector"><td> <code title="">LeftVector;</code> </td> <td> U+021BC </td> <td> <span class="glyph" title="">↼</span> </td> </tr><tr id="entity-LeftVectorBar"><td> <code title="">LeftVectorBar;</code> </td> <td> U+02952 </td> <td> <span class="glyph" title="">⥒</span> </td> </tr><tr id="entity-lEg"><td> <code title="">lEg;</code> </td> <td> U+02A8B </td> <td> <span class="glyph" title="">⪋</span> </td> </tr><tr id="entity-leg"><td> <code title="">leg;</code> </td> <td> U+022DA </td> <td> <span class="glyph" title="">⋚</span> </td> </tr><tr id="entity-leq"><td> <code title="">leq;</code> </td> <td> U+02264 </td> <td> <span class="glyph" title="">≤</span> </td> </tr><tr id="entity-leqq"><td> <code title="">leqq;</code> </td> <td> U+02266 </td> <td> <span class="glyph" title="">≦</span> </td> </tr><tr id="entity-leqslant"><td> <code title="">leqslant;</code> </td> <td> U+02A7D </td> <td> <span class="glyph" title="">⩽</span> </td> </tr><tr id="entity-les"><td> <code title="">les;</code> </td> <td> U+02A7D </td> <td> <span class="glyph" title="">⩽</span> </td> </tr><tr id="entity-lescc"><td> <code title="">lescc;</code> </td> <td> U+02AA8 </td> <td> <span class="glyph" title="">⪨</span> </td> </tr><tr id="entity-lesdot"><td> <code title="">lesdot;</code> </td> <td> U+02A7F </td> <td> <span class="glyph" title="">⩿</span> </td> </tr><tr id="entity-lesdoto"><td> <code title="">lesdoto;</code> </td> <td> U+02A81 </td> <td> <span class="glyph" title="">⪁</span> </td> </tr><tr id="entity-lesdotor"><td> <code title="">lesdotor;</code> </td> <td> U+02A83 </td> <td> <span class="glyph" title="">⪃</span> </td> </tr><tr id="entity-lesg"><td> <code title="">lesg;</code> </td> <td> U+022DA U+0FE00 </td> <td> <span class="glyph compound" title="">⋚︀</span> </td> </tr><tr id="entity-lesges"><td> <code title="">lesges;</code> </td> <td> U+02A93 </td> <td> <span class="glyph" title="">⪓</span> </td> </tr><tr id="entity-lessapprox"><td> <code title="">lessapprox;</code> </td> <td> U+02A85 </td> <td> <span class="glyph" title="">⪅</span> </td> </tr><tr id="entity-lessdot"><td> <code title="">lessdot;</code> </td> <td> U+022D6 </td> <td> <span class="glyph" title="">⋖</span> </td> </tr><tr id="entity-lesseqgtr"><td> <code title="">lesseqgtr;</code> </td> <td> U+022DA </td> <td> <span class="glyph" title="">⋚</span> </td> </tr><tr id="entity-lesseqqgtr"><td> <code title="">lesseqqgtr;</code> </td> <td> U+02A8B </td> <td> <span class="glyph" title="">⪋</span> </td> </tr><tr id="entity-LessEqualGreater"><td> <code title="">LessEqualGreater;</code> </td> <td> U+022DA </td> <td> <span class="glyph" title="">⋚</span> </td> </tr><tr id="entity-LessFullEqual"><td> <code title="">LessFullEqual;</code> </td> <td> U+02266 </td> <td> <span class="glyph" title="">≦</span> </td> </tr><tr id="entity-LessGreater"><td> <code title="">LessGreater;</code> </td> <td> U+02276 </td> <td> <span class="glyph" title="">≶</span> </td> </tr><tr id="entity-lessgtr"><td> <code title="">lessgtr;</code> </td> <td> U+02276 </td> <td> <span class="glyph" title="">≶</span> </td> </tr><tr id="entity-LessLess"><td> <code title="">LessLess;</code> </td> <td> U+02AA1 </td> <td> <span class="glyph" title="">⪡</span> </td> </tr><tr id="entity-lesssim"><td> <code title="">lesssim;</code> </td> <td> U+02272 </td> <td> <span class="glyph" title="">≲</span> </td> </tr><tr id="entity-LessSlantEqual"><td> <code title="">LessSlantEqual;</code> </td> <td> U+02A7D </td> <td> <span class="glyph" title="">⩽</span> </td> </tr><tr id="entity-LessTilde"><td> <code title="">LessTilde;</code> </td> <td> U+02272 </td> <td> <span class="glyph" title="">≲</span> </td> </tr><tr id="entity-lfisht"><td> <code title="">lfisht;</code> </td> <td> U+0297C </td> <td> <span class="glyph" title="">⥼</span> </td> </tr><tr id="entity-lfloor"><td> <code title="">lfloor;</code> </td> <td> U+0230A </td> <td> <span class="glyph" title="">⌊</span> </td> </tr><tr id="entity-Lfr"><td> <code title="">Lfr;</code> </td> <td> U+1D50F </td> <td> <span class="glyph" title="">𝔏</span> </td> </tr><tr id="entity-lfr"><td> <code title="">lfr;</code> </td> <td> U+1D529 </td> <td> <span class="glyph" title="">𝔩</span> </td> </tr><tr id="entity-lg"><td> <code title="">lg;</code> </td> <td> U+02276 </td> <td> <span class="glyph" title="">≶</span> </td> </tr><tr id="entity-lgE"><td> <code title="">lgE;</code> </td> <td> U+02A91 </td> <td> <span class="glyph" title="">⪑</span> </td> </tr><tr id="entity-lHar"><td> <code title="">lHar;</code> </td> <td> U+02962 </td> <td> <span class="glyph" title="">⥢</span> </td> </tr><tr id="entity-lhard"><td> <code title="">lhard;</code> </td> <td> U+021BD </td> <td> <span class="glyph" title="">↽</span> </td> </tr><tr id="entity-lharu"><td> <code title="">lharu;</code> </td> <td> U+021BC </td> <td> <span class="glyph" title="">↼</span> </td> </tr><tr id="entity-lharul"><td> <code title="">lharul;</code> </td> <td> U+0296A </td> <td> <span class="glyph" title="">⥪</span> </td> </tr><tr id="entity-lhblk"><td> <code title="">lhblk;</code> </td> <td> U+02584 </td> <td> <span class="glyph" title="">▄</span> </td> </tr><tr id="entity-LJcy"><td> <code title="">LJcy;</code> </td> <td> U+00409 </td> <td> <span class="glyph" title="">Љ</span> </td> </tr><tr id="entity-ljcy"><td> <code title="">ljcy;</code> </td> <td> U+00459 </td> <td> <span class="glyph" title="">љ</span> </td> </tr><tr id="entity-Ll"><td> <code title="">Ll;</code> </td> <td> U+022D8 </td> <td> <span class="glyph" title="">⋘</span> </td> </tr><tr id="entity-ll"><td> <code title="">ll;</code> </td> <td> U+0226A </td> <td> <span class="glyph" title="">≪</span> </td> </tr><tr id="entity-llarr"><td> <code title="">llarr;</code> </td> <td> U+021C7 </td> <td> <span class="glyph" title="">⇇</span> </td> </tr><tr id="entity-llcorner"><td> <code title="">llcorner;</code> </td> <td> U+0231E </td> <td> <span class="glyph" title="">⌞</span> </td> </tr><tr id="entity-Lleftarrow"><td> <code title="">Lleftarrow;</code> </td> <td> U+021DA </td> <td> <span class="glyph" title="">⇚</span> </td> </tr><tr id="entity-llhard"><td> <code title="">llhard;</code> </td> <td> U+0296B </td> <td> <span class="glyph" title="">⥫</span> </td> </tr><tr id="entity-lltri"><td> <code title="">lltri;</code> </td> <td> U+025FA </td> <td> <span class="glyph" title="">◺</span> </td> </tr><tr id="entity-Lmidot"><td> <code title="">Lmidot;</code> </td> <td> U+0013F </td> <td> <span class="glyph" title="">Ŀ</span> </td> </tr><tr id="entity-lmidot"><td> <code title="">lmidot;</code> </td> <td> U+00140 </td> <td> <span class="glyph" title="">ŀ</span> </td> </tr><tr id="entity-lmoust"><td> <code title="">lmoust;</code> </td> <td> U+023B0 </td> <td> <span class="glyph" title="">⎰</span> </td> </tr><tr id="entity-lmoustache"><td> <code title="">lmoustache;</code> </td> <td> U+023B0 </td> <td> <span class="glyph" title="">⎰</span> </td> </tr><tr id="entity-lnap"><td> <code title="">lnap;</code> </td> <td> U+02A89 </td> <td> <span class="glyph" title="">⪉</span> </td> </tr><tr id="entity-lnapprox"><td> <code title="">lnapprox;</code> </td> <td> U+02A89 </td> <td> <span class="glyph" title="">⪉</span> </td> </tr><tr id="entity-lnE"><td> <code title="">lnE;</code> </td> <td> U+02268 </td> <td> <span class="glyph" title="">≨</span> </td> </tr><tr id="entity-lne"><td> <code title="">lne;</code> </td> <td> U+02A87 </td> <td> <span class="glyph" title="">⪇</span> </td> </tr><tr id="entity-lneq"><td> <code title="">lneq;</code> </td> <td> U+02A87 </td> <td> <span class="glyph" title="">⪇</span> </td> </tr><tr id="entity-lneqq"><td> <code title="">lneqq;</code> </td> <td> U+02268 </td> <td> <span class="glyph" title="">≨</span> </td> </tr><tr id="entity-lnsim"><td> <code title="">lnsim;</code> </td> <td> U+022E6 </td> <td> <span class="glyph" title="">⋦</span> </td> </tr><tr id="entity-loang"><td> <code title="">loang;</code> </td> <td> U+027EC </td> <td> <span class="glyph" title="">⟬</span> </td> </tr><tr id="entity-loarr"><td> <code title="">loarr;</code> </td> <td> U+021FD </td> <td> <span class="glyph" title="">⇽</span> </td> </tr><tr id="entity-lobrk"><td> <code title="">lobrk;</code> </td> <td> U+027E6 </td> <td> <span class="glyph" title="">⟦</span> </td> </tr><tr id="entity-LongLeftArrow"><td> <code title="">LongLeftArrow;</code> </td> <td> U+027F5 </td> <td> <span class="glyph" title="">⟵</span> </td> </tr><tr id="entity-Longleftarrow"><td> <code title="">Longleftarrow;</code> </td> <td> U+027F8 </td> <td> <span class="glyph" title="">⟸</span> </td> </tr><tr id="entity-longleftarrow"><td> <code title="">longleftarrow;</code> </td> <td> U+027F5 </td> <td> <span class="glyph" title="">⟵</span> </td> </tr><tr id="entity-LongLeftRightArrow"><td> <code title="">LongLeftRightArrow;</code> </td> <td> U+027F7 </td> <td> <span class="glyph" title="">⟷</span> </td> </tr><tr id="entity-Longleftrightarrow"><td> <code title="">Longleftrightarrow;</code> </td> <td> U+027FA </td> <td> <span class="glyph" title="">⟺</span> </td> </tr><tr id="entity-longleftrightarrow"><td> <code title="">longleftrightarrow;</code> </td> <td> U+027F7 </td> <td> <span class="glyph" title="">⟷</span> </td> </tr><tr id="entity-longmapsto"><td> <code title="">longmapsto;</code> </td> <td> U+027FC </td> <td> <span class="glyph" title="">⟼</span> </td> </tr><tr id="entity-LongRightArrow"><td> <code title="">LongRightArrow;</code> </td> <td> U+027F6 </td> <td> <span class="glyph" title="">⟶</span> </td> </tr><tr id="entity-Longrightarrow"><td> <code title="">Longrightarrow;</code> </td> <td> U+027F9 </td> <td> <span class="glyph" title="">⟹</span> </td> </tr><tr id="entity-longrightarrow"><td> <code title="">longrightarrow;</code> </td> <td> U+027F6 </td> <td> <span class="glyph" title="">⟶</span> </td> </tr><tr id="entity-looparrowleft"><td> <code title="">looparrowleft;</code> </td> <td> U+021AB </td> <td> <span class="glyph" title="">↫</span> </td> </tr><tr id="entity-looparrowright"><td> <code title="">looparrowright;</code> </td> <td> U+021AC </td> <td> <span class="glyph" title="">↬</span> </td> </tr><tr id="entity-lopar"><td> <code title="">lopar;</code> </td> <td> U+02985 </td> <td> <span class="glyph" title="">⦅</span> </td> </tr><tr id="entity-Lopf"><td> <code title="">Lopf;</code> </td> <td> U+1D543 </td> <td> <span class="glyph" title="">𝕃</span> </td> </tr><tr id="entity-lopf"><td> <code title="">lopf;</code> </td> <td> U+1D55D </td> <td> <span class="glyph" title="">𝕝</span> </td> </tr><tr id="entity-loplus"><td> <code title="">loplus;</code> </td> <td> U+02A2D </td> <td> <span class="glyph" title="">⨭</span> </td> </tr><tr id="entity-lotimes"><td> <code title="">lotimes;</code> </td> <td> U+02A34 </td> <td> <span class="glyph" title="">⨴</span> </td> </tr><tr id="entity-lowast"><td> <code title="">lowast;</code> </td> <td> U+02217 </td> <td> <span class="glyph" title="">∗</span> </td> </tr><tr id="entity-lowbar"><td> <code title="">lowbar;</code> </td> <td> U+0005F </td> <td> <span class="glyph" title="">_</span> </td> </tr><tr id="entity-LowerLeftArrow"><td> <code title="">LowerLeftArrow;</code> </td> <td> U+02199 </td> <td> <span class="glyph" title="">↙</span> </td> </tr><tr id="entity-LowerRightArrow"><td> <code title="">LowerRightArrow;</code> </td> <td> U+02198 </td> <td> <span class="glyph" title="">↘</span> </td> </tr><tr id="entity-loz"><td> <code title="">loz;</code> </td> <td> U+025CA </td> <td> <span class="glyph" title="">◊</span> </td> </tr><tr id="entity-lozenge"><td> <code title="">lozenge;</code> </td> <td> U+025CA </td> <td> <span class="glyph" title="">◊</span> </td> </tr><tr id="entity-lozf"><td> <code title="">lozf;</code> </td> <td> U+029EB </td> <td> <span class="glyph" title="">⧫</span> </td> </tr><tr id="entity-lpar"><td> <code title="">lpar;</code> </td> <td> U+00028 </td> <td> <span class="glyph" title="">(</span> </td> </tr><tr id="entity-lparlt"><td> <code title="">lparlt;</code> </td> <td> U+02993 </td> <td> <span class="glyph" title="">⦓</span> </td> </tr><tr id="entity-lrarr"><td> <code title="">lrarr;</code> </td> <td> U+021C6 </td> <td> <span class="glyph" title="">⇆</span> </td> </tr><tr id="entity-lrcorner"><td> <code title="">lrcorner;</code> </td> <td> U+0231F </td> <td> <span class="glyph" title="">⌟</span> </td> </tr><tr id="entity-lrhar"><td> <code title="">lrhar;</code> </td> <td> U+021CB </td> <td> <span class="glyph" title="">⇋</span> </td> </tr><tr id="entity-lrhard"><td> <code title="">lrhard;</code> </td> <td> U+0296D </td> <td> <span class="glyph" title="">⥭</span> </td> </tr><tr id="entity-lrm"><td> <code title="">lrm;</code> </td> <td> U+0200E </td> <td> <span class="glyph" title="">‎</span> </td> </tr><tr id="entity-lrtri"><td> <code title="">lrtri;</code> </td> <td> U+022BF </td> <td> <span class="glyph" title="">⊿</span> </td> </tr><tr id="entity-lsaquo"><td> <code title="">lsaquo;</code> </td> <td> U+02039 </td> <td> <span class="glyph" title="">‹</span> </td> </tr><tr id="entity-Lscr"><td> <code title="">Lscr;</code> </td> <td> U+02112 </td> <td> <span class="glyph" title="">ℒ</span> </td> </tr><tr id="entity-lscr"><td> <code title="">lscr;</code> </td> <td> U+1D4C1 </td> <td> <span class="glyph" title="">𝓁</span> </td> </tr><tr id="entity-Lsh"><td> <code title="">Lsh;</code> </td> <td> U+021B0 </td> <td> <span class="glyph" title="">↰</span> </td> </tr><tr id="entity-lsh"><td> <code title="">lsh;</code> </td> <td> U+021B0 </td> <td> <span class="glyph" title="">↰</span> </td> </tr><tr id="entity-lsim"><td> <code title="">lsim;</code> </td> <td> U+02272 </td> <td> <span class="glyph" title="">≲</span> </td> </tr><tr id="entity-lsime"><td> <code title="">lsime;</code> </td> <td> U+02A8D </td> <td> <span class="glyph" title="">⪍</span> </td> </tr><tr id="entity-lsimg"><td> <code title="">lsimg;</code> </td> <td> U+02A8F </td> <td> <span class="glyph" title="">⪏</span> </td> </tr><tr id="entity-lsqb"><td> <code title="">lsqb;</code> </td> <td> U+0005B </td> <td> <span class="glyph" title="">[</span> </td> </tr><tr id="entity-lsquo"><td> <code title="">lsquo;</code> </td> <td> U+02018 </td> <td> <span class="glyph" title="">‘</span> </td> </tr><tr id="entity-lsquor"><td> <code title="">lsquor;</code> </td> <td> U+0201A </td> <td> <span class="glyph" title="">‚</span> </td> </tr><tr id="entity-Lstrok"><td> <code title="">Lstrok;</code> </td> <td> U+00141 </td> <td> <span class="glyph" title="">Ł</span> </td> </tr><tr id="entity-lstrok"><td> <code title="">lstrok;</code> </td> <td> U+00142 </td> <td> <span class="glyph" title="">ł</span> </td> </tr><tr id="entity-LT"><td> <code title="">LT;</code> </td> <td> U+0003C </td> <td> <span class="glyph" title=""><</span> </td> </tr><tr class="impl" id="entity-LT-legacy"><td> <code title="">LT</code> </td> <td> U+0003C </td> <td> <span title=""><</span> </td> </tr><tr id="entity-Lt"><td> <code title="">Lt;</code> </td> <td> U+0226A </td> <td> <span class="glyph" title="">≪</span> </td> </tr><tr id="entity-lt"><td> <code title="">lt;</code> </td> <td> U+0003C </td> <td> <span class="glyph" title=""><</span> </td> </tr><tr class="impl" id="entity-lt-legacy"><td> <code title="">lt</code> </td> <td> U+0003C </td> <td> <span title=""><</span> </td> </tr><tr id="entity-ltcc"><td> <code title="">ltcc;</code> </td> <td> U+02AA6 </td> <td> <span class="glyph" title="">⪦</span> </td> </tr><tr id="entity-ltcir"><td> <code title="">ltcir;</code> </td> <td> U+02A79 </td> <td> <span class="glyph" title="">⩹</span> </td> </tr><tr id="entity-ltdot"><td> <code title="">ltdot;</code> </td> <td> U+022D6 </td> <td> <span class="glyph" title="">⋖</span> </td> </tr><tr id="entity-lthree"><td> <code title="">lthree;</code> </td> <td> U+022CB </td> <td> <span class="glyph" title="">⋋</span> </td> </tr><tr id="entity-ltimes"><td> <code title="">ltimes;</code> </td> <td> U+022C9 </td> <td> <span class="glyph" title="">⋉</span> </td> </tr><tr id="entity-ltlarr"><td> <code title="">ltlarr;</code> </td> <td> U+02976 </td> <td> <span class="glyph" title="">⥶</span> </td> </tr><tr id="entity-ltquest"><td> <code title="">ltquest;</code> </td> <td> U+02A7B </td> <td> <span class="glyph" title="">⩻</span> </td> </tr><tr id="entity-ltri"><td> <code title="">ltri;</code> </td> <td> U+025C3 </td> <td> <span class="glyph" title="">◃</span> </td> </tr><tr id="entity-ltrie"><td> <code title="">ltrie;</code> </td> <td> U+022B4 </td> <td> <span class="glyph" title="">⊴</span> </td> </tr><tr id="entity-ltrif"><td> <code title="">ltrif;</code> </td> <td> U+025C2 </td> <td> <span class="glyph" title="">◂</span> </td> </tr><tr id="entity-ltrPar"><td> <code title="">ltrPar;</code> </td> <td> U+02996 </td> <td> <span class="glyph" title="">⦖</span> </td> </tr><tr id="entity-lurdshar"><td> <code title="">lurdshar;</code> </td> <td> U+0294A </td> <td> <span class="glyph" title="">⥊</span> </td> </tr><tr id="entity-luruhar"><td> <code title="">luruhar;</code> </td> <td> U+02966 </td> <td> <span class="glyph" title="">⥦</span> </td> </tr><tr id="entity-lvertneqq"><td> <code title="">lvertneqq;</code> </td> <td> U+02268 U+0FE00 </td> <td> <span class="glyph compound" title="">≨︀</span> </td> </tr><tr id="entity-lvnE"><td> <code title="">lvnE;</code> </td> <td> U+02268 U+0FE00 </td> <td> <span class="glyph compound" title="">≨︀</span> </td> </tr><tr id="entity-macr"><td> <code title="">macr;</code> </td> <td> U+000AF </td> <td> <span class="glyph" title="">¯</span> </td> </tr><tr class="impl" id="entity-macr-legacy"><td> <code title="">macr</code> </td> <td> U+000AF </td> <td> <span title="">¯</span> </td> </tr><tr id="entity-male"><td> <code title="">male;</code> </td> <td> U+02642 </td> <td> <span class="glyph" title="">♂</span> </td> </tr><tr id="entity-malt"><td> <code title="">malt;</code> </td> <td> U+02720 </td> <td> <span class="glyph" title="">✠</span> </td> </tr><tr id="entity-maltese"><td> <code title="">maltese;</code> </td> <td> U+02720 </td> <td> <span class="glyph" title="">✠</span> </td> </tr><tr id="entity-Map"><td> <code title="">Map;</code> </td> <td> U+02905 </td> <td> <span class="glyph" title="">⤅</span> </td> </tr><tr id="entity-map"><td> <code title="">map;</code> </td> <td> U+021A6 </td> <td> <span class="glyph" title="">↦</span> </td> </tr><tr id="entity-mapsto"><td> <code title="">mapsto;</code> </td> <td> U+021A6 </td> <td> <span class="glyph" title="">↦</span> </td> </tr><tr id="entity-mapstodown"><td> <code title="">mapstodown;</code> </td> <td> U+021A7 </td> <td> <span class="glyph" title="">↧</span> </td> </tr><tr id="entity-mapstoleft"><td> <code title="">mapstoleft;</code> </td> <td> U+021A4 </td> <td> <span class="glyph" title="">↤</span> </td> </tr><tr id="entity-mapstoup"><td> <code title="">mapstoup;</code> </td> <td> U+021A5 </td> <td> <span class="glyph" title="">↥</span> </td> </tr><tr id="entity-marker"><td> <code title="">marker;</code> </td> <td> U+025AE </td> <td> <span class="glyph" title="">▮</span> </td> </tr><tr id="entity-mcomma"><td> <code title="">mcomma;</code> </td> <td> U+02A29 </td> <td> <span class="glyph" title="">⨩</span> </td> </tr><tr id="entity-Mcy"><td> <code title="">Mcy;</code> </td> <td> U+0041C </td> <td> <span class="glyph" title="">М</span> </td> </tr><tr id="entity-mcy"><td> <code title="">mcy;</code> </td> <td> U+0043C </td> <td> <span class="glyph" title="">м</span> </td> </tr><tr id="entity-mdash"><td> <code title="">mdash;</code> </td> <td> U+02014 </td> <td> <span class="glyph" title="">—</span> </td> </tr><tr id="entity-mDDot"><td> <code title="">mDDot;</code> </td> <td> U+0223A </td> <td> <span class="glyph" title="">∺</span> </td> </tr><tr id="entity-measuredangle"><td> <code title="">measuredangle;</code> </td> <td> U+02221 </td> <td> <span class="glyph" title="">∡</span> </td> </tr><tr id="entity-MediumSpace"><td> <code title="">MediumSpace;</code> </td> <td> U+0205F </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-Mellintrf"><td> <code title="">Mellintrf;</code> </td> <td> U+02133 </td> <td> <span class="glyph" title="">ℳ</span> </td> </tr><tr id="entity-Mfr"><td> <code title="">Mfr;</code> </td> <td> U+1D510 </td> <td> <span class="glyph" title="">𝔐</span> </td> </tr><tr id="entity-mfr"><td> <code title="">mfr;</code> </td> <td> U+1D52A </td> <td> <span class="glyph" title="">𝔪</span> </td> </tr><tr id="entity-mho"><td> <code title="">mho;</code> </td> <td> U+02127 </td> <td> <span class="glyph" title="">℧</span> </td> </tr><tr id="entity-micro"><td> <code title="">micro;</code> </td> <td> U+000B5 </td> <td> <span class="glyph" title="">µ</span> </td> </tr><tr class="impl" id="entity-micro-legacy"><td> <code title="">micro</code> </td> <td> U+000B5 </td> <td> <span title="">µ</span> </td> </tr><tr id="entity-mid"><td> <code title="">mid;</code> </td> <td> U+02223 </td> <td> <span class="glyph" title="">∣</span> </td> </tr><tr id="entity-midast"><td> <code title="">midast;</code> </td> <td> U+0002A </td> <td> <span class="glyph" title="">*</span> </td> </tr><tr id="entity-midcir"><td> <code title="">midcir;</code> </td> <td> U+02AF0 </td> <td> <span class="glyph" title="">⫰</span> </td> </tr><tr id="entity-middot"><td> <code title="">middot;</code> </td> <td> U+000B7 </td> <td> <span class="glyph" title="">·</span> </td> </tr><tr class="impl" id="entity-middot-legacy"><td> <code title="">middot</code> </td> <td> U+000B7 </td> <td> <span title="">·</span> </td> </tr><tr id="entity-minus"><td> <code title="">minus;</code> </td> <td> U+02212 </td> <td> <span class="glyph" title="">−</span> </td> </tr><tr id="entity-minusb"><td> <code title="">minusb;</code> </td> <td> U+0229F </td> <td> <span class="glyph" title="">⊟</span> </td> </tr><tr id="entity-minusd"><td> <code title="">minusd;</code> </td> <td> U+02238 </td> <td> <span class="glyph" title="">∸</span> </td> </tr><tr id="entity-minusdu"><td> <code title="">minusdu;</code> </td> <td> U+02A2A </td> <td> <span class="glyph" title="">⨪</span> </td> </tr><tr id="entity-MinusPlus"><td> <code title="">MinusPlus;</code> </td> <td> U+02213 </td> <td> <span class="glyph" title="">∓</span> </td> </tr><tr id="entity-mlcp"><td> <code title="">mlcp;</code> </td> <td> U+02ADB </td> <td> <span class="glyph" title="">⫛</span> </td> </tr><tr id="entity-mldr"><td> <code title="">mldr;</code> </td> <td> U+02026 </td> <td> <span class="glyph" title="">…</span> </td> </tr><tr id="entity-mnplus"><td> <code title="">mnplus;</code> </td> <td> U+02213 </td> <td> <span class="glyph" title="">∓</span> </td> </tr><tr id="entity-models"><td> <code title="">models;</code> </td> <td> U+022A7 </td> <td> <span class="glyph" title="">⊧</span> </td> </tr><tr id="entity-Mopf"><td> <code title="">Mopf;</code> </td> <td> U+1D544 </td> <td> <span class="glyph" title="">𝕄</span> </td> </tr><tr id="entity-mopf"><td> <code title="">mopf;</code> </td> <td> U+1D55E </td> <td> <span class="glyph" title="">𝕞</span> </td> </tr><tr id="entity-mp"><td> <code title="">mp;</code> </td> <td> U+02213 </td> <td> <span class="glyph" title="">∓</span> </td> </tr><tr id="entity-Mscr"><td> <code title="">Mscr;</code> </td> <td> U+02133 </td> <td> <span class="glyph" title="">ℳ</span> </td> </tr><tr id="entity-mscr"><td> <code title="">mscr;</code> </td> <td> U+1D4C2 </td> <td> <span class="glyph" title="">𝓂</span> </td> </tr><tr id="entity-mstpos"><td> <code title="">mstpos;</code> </td> <td> U+0223E </td> <td> <span class="glyph" title="">∾</span> </td> </tr><tr id="entity-Mu"><td> <code title="">Mu;</code> </td> <td> U+0039C </td> <td> <span class="glyph" title="">Μ</span> </td> </tr><tr id="entity-mu"><td> <code title="">mu;</code> </td> <td> U+003BC </td> <td> <span class="glyph" title="">μ</span> </td> </tr><tr id="entity-multimap"><td> <code title="">multimap;</code> </td> <td> U+022B8 </td> <td> <span class="glyph" title="">⊸</span> </td> </tr><tr id="entity-mumap"><td> <code title="">mumap;</code> </td> <td> U+022B8 </td> <td> <span class="glyph" title="">⊸</span> </td> </tr><tr id="entity-nabla"><td> <code title="">nabla;</code> </td> <td> U+02207 </td> <td> <span class="glyph" title="">∇</span> </td> </tr><tr id="entity-Nacute"><td> <code title="">Nacute;</code> </td> <td> U+00143 </td> <td> <span class="glyph" title="">Ń</span> </td> </tr><tr id="entity-nacute"><td> <code title="">nacute;</code> </td> <td> U+00144 </td> <td> <span class="glyph" title="">ń</span> </td> </tr><tr id="entity-nang"><td> <code title="">nang;</code> </td> <td> U+02220 U+020D2 </td> <td> <span class="glyph compound" title="">∠⃒</span> </td> </tr><tr id="entity-nap"><td> <code title="">nap;</code> </td> <td> U+02249 </td> <td> <span class="glyph" title="">≉</span> </td> </tr><tr id="entity-napE"><td> <code title="">napE;</code> </td> <td> U+02A70 U+00338 </td> <td> <span class="glyph compound" title="">⩰̸</span> </td> </tr><tr id="entity-napid"><td> <code title="">napid;</code> </td> <td> U+0224B U+00338 </td> <td> <span class="glyph compound" title="">≋̸</span> </td> </tr><tr id="entity-napos"><td> <code title="">napos;</code> </td> <td> U+00149 </td> <td> <span class="glyph" title="">ʼn</span> </td> </tr><tr id="entity-napprox"><td> <code title="">napprox;</code> </td> <td> U+02249 </td> <td> <span class="glyph" title="">≉</span> </td> </tr><tr id="entity-natur"><td> <code title="">natur;</code> </td> <td> U+0266E </td> <td> <span class="glyph" title="">♮</span> </td> </tr><tr id="entity-natural"><td> <code title="">natural;</code> </td> <td> U+0266E </td> <td> <span class="glyph" title="">♮</span> </td> </tr><tr id="entity-naturals"><td> <code title="">naturals;</code> </td> <td> U+02115 </td> <td> <span class="glyph" title="">ℕ</span> </td> </tr><tr id="entity-nbsp"><td> <code title="">nbsp;</code> </td> <td> U+000A0 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr class="impl" id="entity-nbsp-legacy"><td> <code title="">nbsp</code> </td> <td> U+000A0 </td> <td> <span title=""> </span> </td> </tr><tr id="entity-nbump"><td> <code title="">nbump;</code> </td> <td> U+0224E U+00338 </td> <td> <span class="glyph compound" title="">≎̸</span> </td> </tr><tr id="entity-nbumpe"><td> <code title="">nbumpe;</code> </td> <td> U+0224F U+00338 </td> <td> <span class="glyph compound" title="">≏̸</span> </td> </tr><tr id="entity-ncap"><td> <code title="">ncap;</code> </td> <td> U+02A43 </td> <td> <span class="glyph" title="">⩃</span> </td> </tr><tr id="entity-Ncaron"><td> <code title="">Ncaron;</code> </td> <td> U+00147 </td> <td> <span class="glyph" title="">Ň</span> </td> </tr><tr id="entity-ncaron"><td> <code title="">ncaron;</code> </td> <td> U+00148 </td> <td> <span class="glyph" title="">ň</span> </td> </tr><tr id="entity-Ncedil"><td> <code title="">Ncedil;</code> </td> <td> U+00145 </td> <td> <span class="glyph" title="">Ņ</span> </td> </tr><tr id="entity-ncedil"><td> <code title="">ncedil;</code> </td> <td> U+00146 </td> <td> <span class="glyph" title="">ņ</span> </td> </tr><tr id="entity-ncong"><td> <code title="">ncong;</code> </td> <td> U+02247 </td> <td> <span class="glyph" title="">≇</span> </td> </tr><tr id="entity-ncongdot"><td> <code title="">ncongdot;</code> </td> <td> U+02A6D U+00338 </td> <td> <span class="glyph compound" title="">⩭̸</span> </td> </tr><tr id="entity-ncup"><td> <code title="">ncup;</code> </td> <td> U+02A42 </td> <td> <span class="glyph" title="">⩂</span> </td> </tr><tr id="entity-Ncy"><td> <code title="">Ncy;</code> </td> <td> U+0041D </td> <td> <span class="glyph" title="">Н</span> </td> </tr><tr id="entity-ncy"><td> <code title="">ncy;</code> </td> <td> U+0043D </td> <td> <span class="glyph" title="">н</span> </td> </tr><tr id="entity-ndash"><td> <code title="">ndash;</code> </td> <td> U+02013 </td> <td> <span class="glyph" title="">–</span> </td> </tr><tr id="entity-ne"><td> <code title="">ne;</code> </td> <td> U+02260 </td> <td> <span class="glyph" title="">≠</span> </td> </tr><tr id="entity-nearhk"><td> <code title="">nearhk;</code> </td> <td> U+02924 </td> <td> <span class="glyph" title="">⤤</span> </td> </tr><tr id="entity-neArr"><td> <code title="">neArr;</code> </td> <td> U+021D7 </td> <td> <span class="glyph" title="">⇗</span> </td> </tr><tr id="entity-nearr"><td> <code title="">nearr;</code> </td> <td> U+02197 </td> <td> <span class="glyph" title="">↗</span> </td> </tr><tr id="entity-nearrow"><td> <code title="">nearrow;</code> </td> <td> U+02197 </td> <td> <span class="glyph" title="">↗</span> </td> </tr><tr id="entity-nedot"><td> <code title="">nedot;</code> </td> <td> U+02250 U+00338 </td> <td> <span class="glyph compound" title="">≐̸</span> </td> </tr><tr id="entity-NegativeMediumSpace"><td> <code title="">NegativeMediumSpace;</code> </td> <td> U+0200B </td> <td> <span class="glyph" title="">​</span> </td> </tr><tr id="entity-NegativeThickSpace"><td> <code title="">NegativeThickSpace;</code> </td> <td> U+0200B </td> <td> <span class="glyph" title="">​</span> </td> </tr><tr id="entity-NegativeThinSpace"><td> <code title="">NegativeThinSpace;</code> </td> <td> U+0200B </td> <td> <span class="glyph" title="">​</span> </td> </tr><tr id="entity-NegativeVeryThinSpace"><td> <code title="">NegativeVeryThinSpace;</code> </td> <td> U+0200B </td> <td> <span class="glyph" title="">​</span> </td> </tr><tr id="entity-nequiv"><td> <code title="">nequiv;</code> </td> <td> U+02262 </td> <td> <span class="glyph" title="">≢</span> </td> </tr><tr id="entity-nesear"><td> <code title="">nesear;</code> </td> <td> U+02928 </td> <td> <span class="glyph" title="">⤨</span> </td> </tr><tr id="entity-nesim"><td> <code title="">nesim;</code> </td> <td> U+02242 U+00338 </td> <td> <span class="glyph compound" title="">≂̸</span> </td> </tr><tr id="entity-NestedGreaterGreater"><td> <code title="">NestedGreaterGreater;</code> </td> <td> U+0226B </td> <td> <span class="glyph" title="">≫</span> </td> </tr><tr id="entity-NestedLessLess"><td> <code title="">NestedLessLess;</code> </td> <td> U+0226A </td> <td> <span class="glyph" title="">≪</span> </td> </tr><tr id="entity-NewLine"><td> <code title="">NewLine;</code> </td> <td> U+0000A </td> <td> <span class="glyph control" title="">␊</span> </td> </tr><tr id="entity-nexist"><td> <code title="">nexist;</code> </td> <td> U+02204 </td> <td> <span class="glyph" title="">∄</span> </td> </tr><tr id="entity-nexists"><td> <code title="">nexists;</code> </td> <td> U+02204 </td> <td> <span class="glyph" title="">∄</span> </td> </tr><tr id="entity-Nfr"><td> <code title="">Nfr;</code> </td> <td> U+1D511 </td> <td> <span class="glyph" title="">𝔑</span> </td> </tr><tr id="entity-nfr"><td> <code title="">nfr;</code> </td> <td> U+1D52B </td> <td> <span class="glyph" title="">𝔫</span> </td> </tr><tr id="entity-ngE"><td> <code title="">ngE;</code> </td> <td> U+02267 U+00338 </td> <td> <span class="glyph compound" title="">≧̸</span> </td> </tr><tr id="entity-nge"><td> <code title="">nge;</code> </td> <td> U+02271 </td> <td> <span class="glyph" title="">≱</span> </td> </tr><tr id="entity-ngeq"><td> <code title="">ngeq;</code> </td> <td> U+02271 </td> <td> <span class="glyph" title="">≱</span> </td> </tr><tr id="entity-ngeqq"><td> <code title="">ngeqq;</code> </td> <td> U+02267 U+00338 </td> <td> <span class="glyph compound" title="">≧̸</span> </td> </tr><tr id="entity-ngeqslant"><td> <code title="">ngeqslant;</code> </td> <td> U+02A7E U+00338 </td> <td> <span class="glyph compound" title="">⩾̸</span> </td> </tr><tr id="entity-nges"><td> <code title="">nges;</code> </td> <td> U+02A7E U+00338 </td> <td> <span class="glyph compound" title="">⩾̸</span> </td> </tr><tr id="entity-nGg"><td> <code title="">nGg;</code> </td> <td> U+022D9 U+00338 </td> <td> <span class="glyph compound" title="">⋙̸</span> </td> </tr><tr id="entity-ngsim"><td> <code title="">ngsim;</code> </td> <td> U+02275 </td> <td> <span class="glyph" title="">≵</span> </td> </tr><tr id="entity-nGt"><td> <code title="">nGt;</code> </td> <td> U+0226B U+020D2 </td> <td> <span class="glyph compound" title="">≫⃒</span> </td> </tr><tr id="entity-ngt"><td> <code title="">ngt;</code> </td> <td> U+0226F </td> <td> <span class="glyph" title="">≯</span> </td> </tr><tr id="entity-ngtr"><td> <code title="">ngtr;</code> </td> <td> U+0226F </td> <td> <span class="glyph" title="">≯</span> </td> </tr><tr id="entity-nGtv"><td> <code title="">nGtv;</code> </td> <td> U+0226B U+00338 </td> <td> <span class="glyph compound" title="">≫̸</span> </td> </tr><tr id="entity-nhArr"><td> <code title="">nhArr;</code> </td> <td> U+021CE </td> <td> <span class="glyph" title="">⇎</span> </td> </tr><tr id="entity-nharr"><td> <code title="">nharr;</code> </td> <td> U+021AE </td> <td> <span class="glyph" title="">↮</span> </td> </tr><tr id="entity-nhpar"><td> <code title="">nhpar;</code> </td> <td> U+02AF2 </td> <td> <span class="glyph" title="">⫲</span> </td> </tr><tr id="entity-ni"><td> <code title="">ni;</code> </td> <td> U+0220B </td> <td> <span class="glyph" title="">∋</span> </td> </tr><tr id="entity-nis"><td> <code title="">nis;</code> </td> <td> U+022FC </td> <td> <span class="glyph" title="">⋼</span> </td> </tr><tr id="entity-nisd"><td> <code title="">nisd;</code> </td> <td> U+022FA </td> <td> <span class="glyph" title="">⋺</span> </td> </tr><tr id="entity-niv"><td> <code title="">niv;</code> </td> <td> U+0220B </td> <td> <span class="glyph" title="">∋</span> </td> </tr><tr id="entity-NJcy"><td> <code title="">NJcy;</code> </td> <td> U+0040A </td> <td> <span class="glyph" title="">Њ</span> </td> </tr><tr id="entity-njcy"><td> <code title="">njcy;</code> </td> <td> U+0045A </td> <td> <span class="glyph" title="">њ</span> </td> </tr><tr id="entity-nlArr"><td> <code title="">nlArr;</code> </td> <td> U+021CD </td> <td> <span class="glyph" title="">⇍</span> </td> </tr><tr id="entity-nlarr"><td> <code title="">nlarr;</code> </td> <td> U+0219A </td> <td> <span class="glyph" title="">↚</span> </td> </tr><tr id="entity-nldr"><td> <code title="">nldr;</code> </td> <td> U+02025 </td> <td> <span class="glyph" title="">‥</span> </td> </tr><tr id="entity-nlE"><td> <code title="">nlE;</code> </td> <td> U+02266 U+00338 </td> <td> <span class="glyph compound" title="">≦̸</span> </td> </tr><tr id="entity-nle"><td> <code title="">nle;</code> </td> <td> U+02270 </td> <td> <span class="glyph" title="">≰</span> </td> </tr><tr id="entity-nLeftarrow"><td> <code title="">nLeftarrow;</code> </td> <td> U+021CD </td> <td> <span class="glyph" title="">⇍</span> </td> </tr><tr id="entity-nleftarrow"><td> <code title="">nleftarrow;</code> </td> <td> U+0219A </td> <td> <span class="glyph" title="">↚</span> </td> </tr><tr id="entity-nLeftrightarrow"><td> <code title="">nLeftrightarrow;</code> </td> <td> U+021CE </td> <td> <span class="glyph" title="">⇎</span> </td> </tr><tr id="entity-nleftrightarrow"><td> <code title="">nleftrightarrow;</code> </td> <td> U+021AE </td> <td> <span class="glyph" title="">↮</span> </td> </tr><tr id="entity-nleq"><td> <code title="">nleq;</code> </td> <td> U+02270 </td> <td> <span class="glyph" title="">≰</span> </td> </tr><tr id="entity-nleqq"><td> <code title="">nleqq;</code> </td> <td> U+02266 U+00338 </td> <td> <span class="glyph compound" title="">≦̸</span> </td> </tr><tr id="entity-nleqslant"><td> <code title="">nleqslant;</code> </td> <td> U+02A7D U+00338 </td> <td> <span class="glyph compound" title="">⩽̸</span> </td> </tr><tr id="entity-nles"><td> <code title="">nles;</code> </td> <td> U+02A7D U+00338 </td> <td> <span class="glyph compound" title="">⩽̸</span> </td> </tr><tr id="entity-nless"><td> <code title="">nless;</code> </td> <td> U+0226E </td> <td> <span class="glyph" title="">≮</span> </td> </tr><tr id="entity-nLl"><td> <code title="">nLl;</code> </td> <td> U+022D8 U+00338 </td> <td> <span class="glyph compound" title="">⋘̸</span> </td> </tr><tr id="entity-nlsim"><td> <code title="">nlsim;</code> </td> <td> U+02274 </td> <td> <span class="glyph" title="">≴</span> </td> </tr><tr id="entity-nLt"><td> <code title="">nLt;</code> </td> <td> U+0226A U+020D2 </td> <td> <span class="glyph compound" title="">≪⃒</span> </td> </tr><tr id="entity-nlt"><td> <code title="">nlt;</code> </td> <td> U+0226E </td> <td> <span class="glyph" title="">≮</span> </td> </tr><tr id="entity-nltri"><td> <code title="">nltri;</code> </td> <td> U+022EA </td> <td> <span class="glyph" title="">⋪</span> </td> </tr><tr id="entity-nltrie"><td> <code title="">nltrie;</code> </td> <td> U+022EC </td> <td> <span class="glyph" title="">⋬</span> </td> </tr><tr id="entity-nLtv"><td> <code title="">nLtv;</code> </td> <td> U+0226A U+00338 </td> <td> <span class="glyph compound" title="">≪̸</span> </td> </tr><tr id="entity-nmid"><td> <code title="">nmid;</code> </td> <td> U+02224 </td> <td> <span class="glyph" title="">∤</span> </td> </tr><tr id="entity-NoBreak"><td> <code title="">NoBreak;</code> </td> <td> U+02060 </td> <td> <span class="glyph" title="">⁠</span> </td> </tr><tr id="entity-NonBreakingSpace"><td> <code title="">NonBreakingSpace;</code> </td> <td> U+000A0 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-Nopf"><td> <code title="">Nopf;</code> </td> <td> U+02115 </td> <td> <span class="glyph" title="">ℕ</span> </td> </tr><tr id="entity-nopf"><td> <code title="">nopf;</code> </td> <td> U+1D55F </td> <td> <span class="glyph" title="">𝕟</span> </td> </tr><tr id="entity-Not"><td> <code title="">Not;</code> </td> <td> U+02AEC </td> <td> <span class="glyph" title="">⫬</span> </td> </tr><tr id="entity-not"><td> <code title="">not;</code> </td> <td> U+000AC </td> <td> <span class="glyph" title="">¬</span> </td> </tr><tr class="impl" id="entity-not-legacy"><td> <code title="">not</code> </td> <td> U+000AC </td> <td> <span title="">¬</span> </td> </tr><tr id="entity-NotCongruent"><td> <code title="">NotCongruent;</code> </td> <td> U+02262 </td> <td> <span class="glyph" title="">≢</span> </td> </tr><tr id="entity-NotCupCap"><td> <code title="">NotCupCap;</code> </td> <td> U+0226D </td> <td> <span class="glyph" title="">≭</span> </td> </tr><tr id="entity-NotDoubleVerticalBar"><td> <code title="">NotDoubleVerticalBar;</code> </td> <td> U+02226 </td> <td> <span class="glyph" title="">∦</span> </td> </tr><tr id="entity-NotElement"><td> <code title="">NotElement;</code> </td> <td> U+02209 </td> <td> <span class="glyph" title="">∉</span> </td> </tr><tr id="entity-NotEqual"><td> <code title="">NotEqual;</code> </td> <td> U+02260 </td> <td> <span class="glyph" title="">≠</span> </td> </tr><tr id="entity-NotEqualTilde"><td> <code title="">NotEqualTilde;</code> </td> <td> U+02242 U+00338 </td> <td> <span class="glyph compound" title="">≂̸</span> </td> </tr><tr id="entity-NotExists"><td> <code title="">NotExists;</code> </td> <td> U+02204 </td> <td> <span class="glyph" title="">∄</span> </td> </tr><tr id="entity-NotGreater"><td> <code title="">NotGreater;</code> </td> <td> U+0226F </td> <td> <span class="glyph" title="">≯</span> </td> </tr><tr id="entity-NotGreaterEqual"><td> <code title="">NotGreaterEqual;</code> </td> <td> U+02271 </td> <td> <span class="glyph" title="">≱</span> </td> </tr><tr id="entity-NotGreaterFullEqual"><td> <code title="">NotGreaterFullEqual;</code> </td> <td> U+02267 U+00338 </td> <td> <span class="glyph compound" title="">≧̸</span> </td> </tr><tr id="entity-NotGreaterGreater"><td> <code title="">NotGreaterGreater;</code> </td> <td> U+0226B U+00338 </td> <td> <span class="glyph compound" title="">≫̸</span> </td> </tr><tr id="entity-NotGreaterLess"><td> <code title="">NotGreaterLess;</code> </td> <td> U+02279 </td> <td> <span class="glyph" title="">≹</span> </td> </tr><tr id="entity-NotGreaterSlantEqual"><td> <code title="">NotGreaterSlantEqual;</code> </td> <td> U+02A7E U+00338 </td> <td> <span class="glyph compound" title="">⩾̸</span> </td> </tr><tr id="entity-NotGreaterTilde"><td> <code title="">NotGreaterTilde;</code> </td> <td> U+02275 </td> <td> <span class="glyph" title="">≵</span> </td> </tr><tr id="entity-NotHumpDownHump"><td> <code title="">NotHumpDownHump;</code> </td> <td> U+0224E U+00338 </td> <td> <span class="glyph compound" title="">≎̸</span> </td> </tr><tr id="entity-NotHumpEqual"><td> <code title="">NotHumpEqual;</code> </td> <td> U+0224F U+00338 </td> <td> <span class="glyph compound" title="">≏̸</span> </td> </tr><tr id="entity-notin"><td> <code title="">notin;</code> </td> <td> U+02209 </td> <td> <span class="glyph" title="">∉</span> </td> </tr><tr id="entity-notindot"><td> <code title="">notindot;</code> </td> <td> U+022F5 U+00338 </td> <td> <span class="glyph compound" title="">⋵̸</span> </td> </tr><tr id="entity-notinE"><td> <code title="">notinE;</code> </td> <td> U+022F9 U+00338 </td> <td> <span class="glyph compound" title="">⋹̸</span> </td> </tr><tr id="entity-notinva"><td> <code title="">notinva;</code> </td> <td> U+02209 </td> <td> <span class="glyph" title="">∉</span> </td> </tr><tr id="entity-notinvb"><td> <code title="">notinvb;</code> </td> <td> U+022F7 </td> <td> <span class="glyph" title="">⋷</span> </td> </tr><tr id="entity-notinvc"><td> <code title="">notinvc;</code> </td> <td> U+022F6 </td> <td> <span class="glyph" title="">⋶</span> </td> </tr><tr id="entity-NotLeftTriangle"><td> <code title="">NotLeftTriangle;</code> </td> <td> U+022EA </td> <td> <span class="glyph" title="">⋪</span> </td> </tr><tr id="entity-NotLeftTriangleBar"><td> <code title="">NotLeftTriangleBar;</code> </td> <td> U+029CF U+00338 </td> <td> <span class="glyph compound" title="">⧏̸</span> </td> </tr><tr id="entity-NotLeftTriangleEqual"><td> <code title="">NotLeftTriangleEqual;</code> </td> <td> U+022EC </td> <td> <span class="glyph" title="">⋬</span> </td> </tr><tr id="entity-NotLess"><td> <code title="">NotLess;</code> </td> <td> U+0226E </td> <td> <span class="glyph" title="">≮</span> </td> </tr><tr id="entity-NotLessEqual"><td> <code title="">NotLessEqual;</code> </td> <td> U+02270 </td> <td> <span class="glyph" title="">≰</span> </td> </tr><tr id="entity-NotLessGreater"><td> <code title="">NotLessGreater;</code> </td> <td> U+02278 </td> <td> <span class="glyph" title="">≸</span> </td> </tr><tr id="entity-NotLessLess"><td> <code title="">NotLessLess;</code> </td> <td> U+0226A U+00338 </td> <td> <span class="glyph compound" title="">≪̸</span> </td> </tr><tr id="entity-NotLessSlantEqual"><td> <code title="">NotLessSlantEqual;</code> </td> <td> U+02A7D U+00338 </td> <td> <span class="glyph compound" title="">⩽̸</span> </td> </tr><tr id="entity-NotLessTilde"><td> <code title="">NotLessTilde;</code> </td> <td> U+02274 </td> <td> <span class="glyph" title="">≴</span> </td> </tr><tr id="entity-NotNestedGreaterGreater"><td> <code title="">NotNestedGreaterGreater;</code> </td> <td> U+02AA2 U+00338 </td> <td> <span class="glyph compound" title="">⪢̸</span> </td> </tr><tr id="entity-NotNestedLessLess"><td> <code title="">NotNestedLessLess;</code> </td> <td> U+02AA1 U+00338 </td> <td> <span class="glyph compound" title="">⪡̸</span> </td> </tr><tr id="entity-notni"><td> <code title="">notni;</code> </td> <td> U+0220C </td> <td> <span class="glyph" title="">∌</span> </td> </tr><tr id="entity-notniva"><td> <code title="">notniva;</code> </td> <td> U+0220C </td> <td> <span class="glyph" title="">∌</span> </td> </tr><tr id="entity-notnivb"><td> <code title="">notnivb;</code> </td> <td> U+022FE </td> <td> <span class="glyph" title="">⋾</span> </td> </tr><tr id="entity-notnivc"><td> <code title="">notnivc;</code> </td> <td> U+022FD </td> <td> <span class="glyph" title="">⋽</span> </td> </tr><tr id="entity-NotPrecedes"><td> <code title="">NotPrecedes;</code> </td> <td> U+02280 </td> <td> <span class="glyph" title="">⊀</span> </td> </tr><tr id="entity-NotPrecedesEqual"><td> <code title="">NotPrecedesEqual;</code> </td> <td> U+02AAF U+00338 </td> <td> <span class="glyph compound" title="">⪯̸</span> </td> </tr><tr id="entity-NotPrecedesSlantEqual"><td> <code title="">NotPrecedesSlantEqual;</code> </td> <td> U+022E0 </td> <td> <span class="glyph" title="">⋠</span> </td> </tr><tr id="entity-NotReverseElement"><td> <code title="">NotReverseElement;</code> </td> <td> U+0220C </td> <td> <span class="glyph" title="">∌</span> </td> </tr><tr id="entity-NotRightTriangle"><td> <code title="">NotRightTriangle;</code> </td> <td> U+022EB </td> <td> <span class="glyph" title="">⋫</span> </td> </tr><tr id="entity-NotRightTriangleBar"><td> <code title="">NotRightTriangleBar;</code> </td> <td> U+029D0 U+00338 </td> <td> <span class="glyph compound" title="">⧐̸</span> </td> </tr><tr id="entity-NotRightTriangleEqual"><td> <code title="">NotRightTriangleEqual;</code> </td> <td> U+022ED </td> <td> <span class="glyph" title="">⋭</span> </td> </tr><tr id="entity-NotSquareSubset"><td> <code title="">NotSquareSubset;</code> </td> <td> U+0228F U+00338 </td> <td> <span class="glyph compound" title="">⊏̸</span> </td> </tr><tr id="entity-NotSquareSubsetEqual"><td> <code title="">NotSquareSubsetEqual;</code> </td> <td> U+022E2 </td> <td> <span class="glyph" title="">⋢</span> </td> </tr><tr id="entity-NotSquareSuperset"><td> <code title="">NotSquareSuperset;</code> </td> <td> U+02290 U+00338 </td> <td> <span class="glyph compound" title="">⊐̸</span> </td> </tr><tr id="entity-NotSquareSupersetEqual"><td> <code title="">NotSquareSupersetEqual;</code> </td> <td> U+022E3 </td> <td> <span class="glyph" title="">⋣</span> </td> </tr><tr id="entity-NotSubset"><td> <code title="">NotSubset;</code> </td> <td> U+02282 U+020D2 </td> <td> <span class="glyph compound" title="">⊂⃒</span> </td> </tr><tr id="entity-NotSubsetEqual"><td> <code title="">NotSubsetEqual;</code> </td> <td> U+02288 </td> <td> <span class="glyph" title="">⊈</span> </td> </tr><tr id="entity-NotSucceeds"><td> <code title="">NotSucceeds;</code> </td> <td> U+02281 </td> <td> <span class="glyph" title="">⊁</span> </td> </tr><tr id="entity-NotSucceedsEqual"><td> <code title="">NotSucceedsEqual;</code> </td> <td> U+02AB0 U+00338 </td> <td> <span class="glyph compound" title="">⪰̸</span> </td> </tr><tr id="entity-NotSucceedsSlantEqual"><td> <code title="">NotSucceedsSlantEqual;</code> </td> <td> U+022E1 </td> <td> <span class="glyph" title="">⋡</span> </td> </tr><tr id="entity-NotSucceedsTilde"><td> <code title="">NotSucceedsTilde;</code> </td> <td> U+0227F U+00338 </td> <td> <span class="glyph compound" title="">≿̸</span> </td> </tr><tr id="entity-NotSuperset"><td> <code title="">NotSuperset;</code> </td> <td> U+02283 U+020D2 </td> <td> <span class="glyph compound" title="">⊃⃒</span> </td> </tr><tr id="entity-NotSupersetEqual"><td> <code title="">NotSupersetEqual;</code> </td> <td> U+02289 </td> <td> <span class="glyph" title="">⊉</span> </td> </tr><tr id="entity-NotTilde"><td> <code title="">NotTilde;</code> </td> <td> U+02241 </td> <td> <span class="glyph" title="">≁</span> </td> </tr><tr id="entity-NotTildeEqual"><td> <code title="">NotTildeEqual;</code> </td> <td> U+02244 </td> <td> <span class="glyph" title="">≄</span> </td> </tr><tr id="entity-NotTildeFullEqual"><td> <code title="">NotTildeFullEqual;</code> </td> <td> U+02247 </td> <td> <span class="glyph" title="">≇</span> </td> </tr><tr id="entity-NotTildeTilde"><td> <code title="">NotTildeTilde;</code> </td> <td> U+02249 </td> <td> <span class="glyph" title="">≉</span> </td> </tr><tr id="entity-NotVerticalBar"><td> <code title="">NotVerticalBar;</code> </td> <td> U+02224 </td> <td> <span class="glyph" title="">∤</span> </td> </tr><tr id="entity-npar"><td> <code title="">npar;</code> </td> <td> U+02226 </td> <td> <span class="glyph" title="">∦</span> </td> </tr><tr id="entity-nparallel"><td> <code title="">nparallel;</code> </td> <td> U+02226 </td> <td> <span class="glyph" title="">∦</span> </td> </tr><tr id="entity-nparsl"><td> <code title="">nparsl;</code> </td> <td> U+02AFD U+020E5 </td> <td> <span class="glyph compound" title="">⫽⃥</span> </td> </tr><tr id="entity-npart"><td> <code title="">npart;</code> </td> <td> U+02202 U+00338 </td> <td> <span class="glyph compound" title="">∂̸</span> </td> </tr><tr id="entity-npolint"><td> <code title="">npolint;</code> </td> <td> U+02A14 </td> <td> <span class="glyph" title="">⨔</span> </td> </tr><tr id="entity-npr"><td> <code title="">npr;</code> </td> <td> U+02280 </td> <td> <span class="glyph" title="">⊀</span> </td> </tr><tr id="entity-nprcue"><td> <code title="">nprcue;</code> </td> <td> U+022E0 </td> <td> <span class="glyph" title="">⋠</span> </td> </tr><tr id="entity-npre"><td> <code title="">npre;</code> </td> <td> U+02AAF U+00338 </td> <td> <span class="glyph compound" title="">⪯̸</span> </td> </tr><tr id="entity-nprec"><td> <code title="">nprec;</code> </td> <td> U+02280 </td> <td> <span class="glyph" title="">⊀</span> </td> </tr><tr id="entity-npreceq"><td> <code title="">npreceq;</code> </td> <td> U+02AAF U+00338 </td> <td> <span class="glyph compound" title="">⪯̸</span> </td> </tr><tr id="entity-nrArr"><td> <code title="">nrArr;</code> </td> <td> U+021CF </td> <td> <span class="glyph" title="">⇏</span> </td> </tr><tr id="entity-nrarr"><td> <code title="">nrarr;</code> </td> <td> U+0219B </td> <td> <span class="glyph" title="">↛</span> </td> </tr><tr id="entity-nrarrc"><td> <code title="">nrarrc;</code> </td> <td> U+02933 U+00338 </td> <td> <span class="glyph compound" title="">⤳̸</span> </td> </tr><tr id="entity-nrarrw"><td> <code title="">nrarrw;</code> </td> <td> U+0219D U+00338 </td> <td> <span class="glyph compound" title="">↝̸</span> </td> </tr><tr id="entity-nRightarrow"><td> <code title="">nRightarrow;</code> </td> <td> U+021CF </td> <td> <span class="glyph" title="">⇏</span> </td> </tr><tr id="entity-nrightarrow"><td> <code title="">nrightarrow;</code> </td> <td> U+0219B </td> <td> <span class="glyph" title="">↛</span> </td> </tr><tr id="entity-nrtri"><td> <code title="">nrtri;</code> </td> <td> U+022EB </td> <td> <span class="glyph" title="">⋫</span> </td> </tr><tr id="entity-nrtrie"><td> <code title="">nrtrie;</code> </td> <td> U+022ED </td> <td> <span class="glyph" title="">⋭</span> </td> </tr><tr id="entity-nsc"><td> <code title="">nsc;</code> </td> <td> U+02281 </td> <td> <span class="glyph" title="">⊁</span> </td> </tr><tr id="entity-nsccue"><td> <code title="">nsccue;</code> </td> <td> U+022E1 </td> <td> <span class="glyph" title="">⋡</span> </td> </tr><tr id="entity-nsce"><td> <code title="">nsce;</code> </td> <td> U+02AB0 U+00338 </td> <td> <span class="glyph compound" title="">⪰̸</span> </td> </tr><tr id="entity-Nscr"><td> <code title="">Nscr;</code> </td> <td> U+1D4A9 </td> <td> <span class="glyph" title="">𝒩</span> </td> </tr><tr id="entity-nscr"><td> <code title="">nscr;</code> </td> <td> U+1D4C3 </td> <td> <span class="glyph" title="">𝓃</span> </td> </tr><tr id="entity-nshortmid"><td> <code title="">nshortmid;</code> </td> <td> U+02224 </td> <td> <span class="glyph" title="">∤</span> </td> </tr><tr id="entity-nshortparallel"><td> <code title="">nshortparallel;</code> </td> <td> U+02226 </td> <td> <span class="glyph" title="">∦</span> </td> </tr><tr id="entity-nsim"><td> <code title="">nsim;</code> </td> <td> U+02241 </td> <td> <span class="glyph" title="">≁</span> </td> </tr><tr id="entity-nsime"><td> <code title="">nsime;</code> </td> <td> U+02244 </td> <td> <span class="glyph" title="">≄</span> </td> </tr><tr id="entity-nsimeq"><td> <code title="">nsimeq;</code> </td> <td> U+02244 </td> <td> <span class="glyph" title="">≄</span> </td> </tr><tr id="entity-nsmid"><td> <code title="">nsmid;</code> </td> <td> U+02224 </td> <td> <span class="glyph" title="">∤</span> </td> </tr><tr id="entity-nspar"><td> <code title="">nspar;</code> </td> <td> U+02226 </td> <td> <span class="glyph" title="">∦</span> </td> </tr><tr id="entity-nsqsube"><td> <code title="">nsqsube;</code> </td> <td> U+022E2 </td> <td> <span class="glyph" title="">⋢</span> </td> </tr><tr id="entity-nsqsupe"><td> <code title="">nsqsupe;</code> </td> <td> U+022E3 </td> <td> <span class="glyph" title="">⋣</span> </td> </tr><tr id="entity-nsub"><td> <code title="">nsub;</code> </td> <td> U+02284 </td> <td> <span class="glyph" title="">⊄</span> </td> </tr><tr id="entity-nsubE"><td> <code title="">nsubE;</code> </td> <td> U+02AC5 U+00338 </td> <td> <span class="glyph compound" title="">⫅̸</span> </td> </tr><tr id="entity-nsube"><td> <code title="">nsube;</code> </td> <td> U+02288 </td> <td> <span class="glyph" title="">⊈</span> </td> </tr><tr id="entity-nsubset"><td> <code title="">nsubset;</code> </td> <td> U+02282 U+020D2 </td> <td> <span class="glyph compound" title="">⊂⃒</span> </td> </tr><tr id="entity-nsubseteq"><td> <code title="">nsubseteq;</code> </td> <td> U+02288 </td> <td> <span class="glyph" title="">⊈</span> </td> </tr><tr id="entity-nsubseteqq"><td> <code title="">nsubseteqq;</code> </td> <td> U+02AC5 U+00338 </td> <td> <span class="glyph compound" title="">⫅̸</span> </td> </tr><tr id="entity-nsucc"><td> <code title="">nsucc;</code> </td> <td> U+02281 </td> <td> <span class="glyph" title="">⊁</span> </td> </tr><tr id="entity-nsucceq"><td> <code title="">nsucceq;</code> </td> <td> U+02AB0 U+00338 </td> <td> <span class="glyph compound" title="">⪰̸</span> </td> </tr><tr id="entity-nsup"><td> <code title="">nsup;</code> </td> <td> U+02285 </td> <td> <span class="glyph" title="">⊅</span> </td> </tr><tr id="entity-nsupE"><td> <code title="">nsupE;</code> </td> <td> U+02AC6 U+00338 </td> <td> <span class="glyph compound" title="">⫆̸</span> </td> </tr><tr id="entity-nsupe"><td> <code title="">nsupe;</code> </td> <td> U+02289 </td> <td> <span class="glyph" title="">⊉</span> </td> </tr><tr id="entity-nsupset"><td> <code title="">nsupset;</code> </td> <td> U+02283 U+020D2 </td> <td> <span class="glyph compound" title="">⊃⃒</span> </td> </tr><tr id="entity-nsupseteq"><td> <code title="">nsupseteq;</code> </td> <td> U+02289 </td> <td> <span class="glyph" title="">⊉</span> </td> </tr><tr id="entity-nsupseteqq"><td> <code title="">nsupseteqq;</code> </td> <td> U+02AC6 U+00338 </td> <td> <span class="glyph compound" title="">⫆̸</span> </td> </tr><tr id="entity-ntgl"><td> <code title="">ntgl;</code> </td> <td> U+02279 </td> <td> <span class="glyph" title="">≹</span> </td> </tr><tr id="entity-Ntilde"><td> <code title="">Ntilde;</code> </td> <td> U+000D1 </td> <td> <span class="glyph" title="">Ñ</span> </td> </tr><tr class="impl" id="entity-Ntilde-legacy"><td> <code title="">Ntilde</code> </td> <td> U+000D1 </td> <td> <span title="">Ñ</span> </td> </tr><tr id="entity-ntilde"><td> <code title="">ntilde;</code> </td> <td> U+000F1 </td> <td> <span class="glyph" title="">ñ</span> </td> </tr><tr class="impl" id="entity-ntilde-legacy"><td> <code title="">ntilde</code> </td> <td> U+000F1 </td> <td> <span title="">ñ</span> </td> </tr><tr id="entity-ntlg"><td> <code title="">ntlg;</code> </td> <td> U+02278 </td> <td> <span class="glyph" title="">≸</span> </td> </tr><tr id="entity-ntriangleleft"><td> <code title="">ntriangleleft;</code> </td> <td> U+022EA </td> <td> <span class="glyph" title="">⋪</span> </td> </tr><tr id="entity-ntrianglelefteq"><td> <code title="">ntrianglelefteq;</code> </td> <td> U+022EC </td> <td> <span class="glyph" title="">⋬</span> </td> </tr><tr id="entity-ntriangleright"><td> <code title="">ntriangleright;</code> </td> <td> U+022EB </td> <td> <span class="glyph" title="">⋫</span> </td> </tr><tr id="entity-ntrianglerighteq"><td> <code title="">ntrianglerighteq;</code> </td> <td> U+022ED </td> <td> <span class="glyph" title="">⋭</span> </td> </tr><tr id="entity-Nu"><td> <code title="">Nu;</code> </td> <td> U+0039D </td> <td> <span class="glyph" title="">Ν</span> </td> </tr><tr id="entity-nu"><td> <code title="">nu;</code> </td> <td> U+003BD </td> <td> <span class="glyph" title="">ν</span> </td> </tr><tr id="entity-num"><td> <code title="">num;</code> </td> <td> U+00023 </td> <td> <span class="glyph" title="">#</span> </td> </tr><tr id="entity-numero"><td> <code title="">numero;</code> </td> <td> U+02116 </td> <td> <span class="glyph" title="">№</span> </td> </tr><tr id="entity-numsp"><td> <code title="">numsp;</code> </td> <td> U+02007 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-nvap"><td> <code title="">nvap;</code> </td> <td> U+0224D U+020D2 </td> <td> <span class="glyph compound" title="">≍⃒</span> </td> </tr><tr id="entity-nVDash"><td> <code title="">nVDash;</code> </td> <td> U+022AF </td> <td> <span class="glyph" title="">⊯</span> </td> </tr><tr id="entity-nVdash"><td> <code title="">nVdash;</code> </td> <td> U+022AE </td> <td> <span class="glyph" title="">⊮</span> </td> </tr><tr id="entity-nvDash"><td> <code title="">nvDash;</code> </td> <td> U+022AD </td> <td> <span class="glyph" title="">⊭</span> </td> </tr><tr id="entity-nvdash"><td> <code title="">nvdash;</code> </td> <td> U+022AC </td> <td> <span class="glyph" title="">⊬</span> </td> </tr><tr id="entity-nvge"><td> <code title="">nvge;</code> </td> <td> U+02265 U+020D2 </td> <td> <span class="glyph compound" title="">≥⃒</span> </td> </tr><tr id="entity-nvgt"><td> <code title="">nvgt;</code> </td> <td> U+0003E U+020D2 </td> <td> <span class="glyph compound" title="">>⃒</span> </td> </tr><tr id="entity-nvHarr"><td> <code title="">nvHarr;</code> </td> <td> U+02904 </td> <td> <span class="glyph" title="">⤄</span> </td> </tr><tr id="entity-nvinfin"><td> <code title="">nvinfin;</code> </td> <td> U+029DE </td> <td> <span class="glyph" title="">⧞</span> </td> </tr><tr id="entity-nvlArr"><td> <code title="">nvlArr;</code> </td> <td> U+02902 </td> <td> <span class="glyph" title="">⤂</span> </td> </tr><tr id="entity-nvle"><td> <code title="">nvle;</code> </td> <td> U+02264 U+020D2 </td> <td> <span class="glyph compound" title="">≤⃒</span> </td> </tr><tr id="entity-nvlt"><td> <code title="">nvlt;</code> </td> <td> U+0003C U+020D2 </td> <td> <span class="glyph compound" title=""><⃒</span> </td> </tr><tr id="entity-nvltrie"><td> <code title="">nvltrie;</code> </td> <td> U+022B4 U+020D2 </td> <td> <span class="glyph compound" title="">⊴⃒</span> </td> </tr><tr id="entity-nvrArr"><td> <code title="">nvrArr;</code> </td> <td> U+02903 </td> <td> <span class="glyph" title="">⤃</span> </td> </tr><tr id="entity-nvrtrie"><td> <code title="">nvrtrie;</code> </td> <td> U+022B5 U+020D2 </td> <td> <span class="glyph compound" title="">⊵⃒</span> </td> </tr><tr id="entity-nvsim"><td> <code title="">nvsim;</code> </td> <td> U+0223C U+020D2 </td> <td> <span class="glyph compound" title="">∼⃒</span> </td> </tr><tr id="entity-nwarhk"><td> <code title="">nwarhk;</code> </td> <td> U+02923 </td> <td> <span class="glyph" title="">⤣</span> </td> </tr><tr id="entity-nwArr"><td> <code title="">nwArr;</code> </td> <td> U+021D6 </td> <td> <span class="glyph" title="">⇖</span> </td> </tr><tr id="entity-nwarr"><td> <code title="">nwarr;</code> </td> <td> U+02196 </td> <td> <span class="glyph" title="">↖</span> </td> </tr><tr id="entity-nwarrow"><td> <code title="">nwarrow;</code> </td> <td> U+02196 </td> <td> <span class="glyph" title="">↖</span> </td> </tr><tr id="entity-nwnear"><td> <code title="">nwnear;</code> </td> <td> U+02927 </td> <td> <span class="glyph" title="">⤧</span> </td> </tr><tr id="entity-Oacute"><td> <code title="">Oacute;</code> </td> <td> U+000D3 </td> <td> <span class="glyph" title="">Ó</span> </td> </tr><tr class="impl" id="entity-Oacute-legacy"><td> <code title="">Oacute</code> </td> <td> U+000D3 </td> <td> <span title="">Ó</span> </td> </tr><tr id="entity-oacute"><td> <code title="">oacute;</code> </td> <td> U+000F3 </td> <td> <span class="glyph" title="">ó</span> </td> </tr><tr class="impl" id="entity-oacute-legacy"><td> <code title="">oacute</code> </td> <td> U+000F3 </td> <td> <span title="">ó</span> </td> </tr><tr id="entity-oast"><td> <code title="">oast;</code> </td> <td> U+0229B </td> <td> <span class="glyph" title="">⊛</span> </td> </tr><tr id="entity-ocir"><td> <code title="">ocir;</code> </td> <td> U+0229A </td> <td> <span class="glyph" title="">⊚</span> </td> </tr><tr id="entity-Ocirc"><td> <code title="">Ocirc;</code> </td> <td> U+000D4 </td> <td> <span class="glyph" title="">Ô</span> </td> </tr><tr class="impl" id="entity-Ocirc-legacy"><td> <code title="">Ocirc</code> </td> <td> U+000D4 </td> <td> <span title="">Ô</span> </td> </tr><tr id="entity-ocirc"><td> <code title="">ocirc;</code> </td> <td> U+000F4 </td> <td> <span class="glyph" title="">ô</span> </td> </tr><tr class="impl" id="entity-ocirc-legacy"><td> <code title="">ocirc</code> </td> <td> U+000F4 </td> <td> <span title="">ô</span> </td> </tr><tr id="entity-Ocy"><td> <code title="">Ocy;</code> </td> <td> U+0041E </td> <td> <span class="glyph" title="">О</span> </td> </tr><tr id="entity-ocy"><td> <code title="">ocy;</code> </td> <td> U+0043E </td> <td> <span class="glyph" title="">о</span> </td> </tr><tr id="entity-odash"><td> <code title="">odash;</code> </td> <td> U+0229D </td> <td> <span class="glyph" title="">⊝</span> </td> </tr><tr id="entity-Odblac"><td> <code title="">Odblac;</code> </td> <td> U+00150 </td> <td> <span class="glyph" title="">Ő</span> </td> </tr><tr id="entity-odblac"><td> <code title="">odblac;</code> </td> <td> U+00151 </td> <td> <span class="glyph" title="">ő</span> </td> </tr><tr id="entity-odiv"><td> <code title="">odiv;</code> </td> <td> U+02A38 </td> <td> <span class="glyph" title="">⨸</span> </td> </tr><tr id="entity-odot"><td> <code title="">odot;</code> </td> <td> U+02299 </td> <td> <span class="glyph" title="">⊙</span> </td> </tr><tr id="entity-odsold"><td> <code title="">odsold;</code> </td> <td> U+029BC </td> <td> <span class="glyph" title="">⦼</span> </td> </tr><tr id="entity-OElig"><td> <code title="">OElig;</code> </td> <td> U+00152 </td> <td> <span class="glyph" title="">Œ</span> </td> </tr><tr id="entity-oelig"><td> <code title="">oelig;</code> </td> <td> U+00153 </td> <td> <span class="glyph" title="">œ</span> </td> </tr><tr id="entity-ofcir"><td> <code title="">ofcir;</code> </td> <td> U+029BF </td> <td> <span class="glyph" title="">⦿</span> </td> </tr><tr id="entity-Ofr"><td> <code title="">Ofr;</code> </td> <td> U+1D512 </td> <td> <span class="glyph" title="">𝔒</span> </td> </tr><tr id="entity-ofr"><td> <code title="">ofr;</code> </td> <td> U+1D52C </td> <td> <span class="glyph" title="">𝔬</span> </td> </tr><tr id="entity-ogon"><td> <code title="">ogon;</code> </td> <td> U+002DB </td> <td> <span class="glyph" title="">˛</span> </td> </tr><tr id="entity-Ograve"><td> <code title="">Ograve;</code> </td> <td> U+000D2 </td> <td> <span class="glyph" title="">Ò</span> </td> </tr><tr class="impl" id="entity-Ograve-legacy"><td> <code title="">Ograve</code> </td> <td> U+000D2 </td> <td> <span title="">Ò</span> </td> </tr><tr id="entity-ograve"><td> <code title="">ograve;</code> </td> <td> U+000F2 </td> <td> <span class="glyph" title="">ò</span> </td> </tr><tr class="impl" id="entity-ograve-legacy"><td> <code title="">ograve</code> </td> <td> U+000F2 </td> <td> <span title="">ò</span> </td> </tr><tr id="entity-ogt"><td> <code title="">ogt;</code> </td> <td> U+029C1 </td> <td> <span class="glyph" title="">⧁</span> </td> </tr><tr id="entity-ohbar"><td> <code title="">ohbar;</code> </td> <td> U+029B5 </td> <td> <span class="glyph" title="">⦵</span> </td> </tr><tr id="entity-ohm"><td> <code title="">ohm;</code> </td> <td> U+003A9 </td> <td> <span class="glyph" title="">Ω</span> </td> </tr><tr id="entity-oint"><td> <code title="">oint;</code> </td> <td> U+0222E </td> <td> <span class="glyph" title="">∮</span> </td> </tr><tr id="entity-olarr"><td> <code title="">olarr;</code> </td> <td> U+021BA </td> <td> <span class="glyph" title="">↺</span> </td> </tr><tr id="entity-olcir"><td> <code title="">olcir;</code> </td> <td> U+029BE </td> <td> <span class="glyph" title="">⦾</span> </td> </tr><tr id="entity-olcross"><td> <code title="">olcross;</code> </td> <td> U+029BB </td> <td> <span class="glyph" title="">⦻</span> </td> </tr><tr id="entity-oline"><td> <code title="">oline;</code> </td> <td> U+0203E </td> <td> <span class="glyph" title="">‾</span> </td> </tr><tr id="entity-olt"><td> <code title="">olt;</code> </td> <td> U+029C0 </td> <td> <span class="glyph" title="">⧀</span> </td> </tr><tr id="entity-Omacr"><td> <code title="">Omacr;</code> </td> <td> U+0014C </td> <td> <span class="glyph" title="">Ō</span> </td> </tr><tr id="entity-omacr"><td> <code title="">omacr;</code> </td> <td> U+0014D </td> <td> <span class="glyph" title="">ō</span> </td> </tr><tr id="entity-Omega"><td> <code title="">Omega;</code> </td> <td> U+003A9 </td> <td> <span class="glyph" title="">Ω</span> </td> </tr><tr id="entity-omega"><td> <code title="">omega;</code> </td> <td> U+003C9 </td> <td> <span class="glyph" title="">ω</span> </td> </tr><tr id="entity-Omicron"><td> <code title="">Omicron;</code> </td> <td> U+0039F </td> <td> <span class="glyph" title="">Ο</span> </td> </tr><tr id="entity-omicron"><td> <code title="">omicron;</code> </td> <td> U+003BF </td> <td> <span class="glyph" title="">ο</span> </td> </tr><tr id="entity-omid"><td> <code title="">omid;</code> </td> <td> U+029B6 </td> <td> <span class="glyph" title="">⦶</span> </td> </tr><tr id="entity-ominus"><td> <code title="">ominus;</code> </td> <td> U+02296 </td> <td> <span class="glyph" title="">⊖</span> </td> </tr><tr id="entity-Oopf"><td> <code title="">Oopf;</code> </td> <td> U+1D546 </td> <td> <span class="glyph" title="">𝕆</span> </td> </tr><tr id="entity-oopf"><td> <code title="">oopf;</code> </td> <td> U+1D560 </td> <td> <span class="glyph" title="">𝕠</span> </td> </tr><tr id="entity-opar"><td> <code title="">opar;</code> </td> <td> U+029B7 </td> <td> <span class="glyph" title="">⦷</span> </td> </tr><tr id="entity-OpenCurlyDoubleQuote"><td> <code title="">OpenCurlyDoubleQuote;</code> </td> <td> U+0201C </td> <td> <span class="glyph" title="">“</span> </td> </tr><tr id="entity-OpenCurlyQuote"><td> <code title="">OpenCurlyQuote;</code> </td> <td> U+02018 </td> <td> <span class="glyph" title="">‘</span> </td> </tr><tr id="entity-operp"><td> <code title="">operp;</code> </td> <td> U+029B9 </td> <td> <span class="glyph" title="">⦹</span> </td> </tr><tr id="entity-oplus"><td> <code title="">oplus;</code> </td> <td> U+02295 </td> <td> <span class="glyph" title="">⊕</span> </td> </tr><tr id="entity-Or"><td> <code title="">Or;</code> </td> <td> U+02A54 </td> <td> <span class="glyph" title="">⩔</span> </td> </tr><tr id="entity-or"><td> <code title="">or;</code> </td> <td> U+02228 </td> <td> <span class="glyph" title="">∨</span> </td> </tr><tr id="entity-orarr"><td> <code title="">orarr;</code> </td> <td> U+021BB </td> <td> <span class="glyph" title="">↻</span> </td> </tr><tr id="entity-ord"><td> <code title="">ord;</code> </td> <td> U+02A5D </td> <td> <span class="glyph" title="">⩝</span> </td> </tr><tr id="entity-order"><td> <code title="">order;</code> </td> <td> U+02134 </td> <td> <span class="glyph" title="">ℴ</span> </td> </tr><tr id="entity-orderof"><td> <code title="">orderof;</code> </td> <td> U+02134 </td> <td> <span class="glyph" title="">ℴ</span> </td> </tr><tr id="entity-ordf"><td> <code title="">ordf;</code> </td> <td> U+000AA </td> <td> <span class="glyph" title="">ª</span> </td> </tr><tr class="impl" id="entity-ordf-legacy"><td> <code title="">ordf</code> </td> <td> U+000AA </td> <td> <span title="">ª</span> </td> </tr><tr id="entity-ordm"><td> <code title="">ordm;</code> </td> <td> U+000BA </td> <td> <span class="glyph" title="">º</span> </td> </tr><tr class="impl" id="entity-ordm-legacy"><td> <code title="">ordm</code> </td> <td> U+000BA </td> <td> <span title="">º</span> </td> </tr><tr id="entity-origof"><td> <code title="">origof;</code> </td> <td> U+022B6 </td> <td> <span class="glyph" title="">⊶</span> </td> </tr><tr id="entity-oror"><td> <code title="">oror;</code> </td> <td> U+02A56 </td> <td> <span class="glyph" title="">⩖</span> </td> </tr><tr id="entity-orslope"><td> <code title="">orslope;</code> </td> <td> U+02A57 </td> <td> <span class="glyph" title="">⩗</span> </td> </tr><tr id="entity-orv"><td> <code title="">orv;</code> </td> <td> U+02A5B </td> <td> <span class="glyph" title="">⩛</span> </td> </tr><tr id="entity-oS"><td> <code title="">oS;</code> </td> <td> U+024C8 </td> <td> <span class="glyph" title="">Ⓢ</span> </td> </tr><tr id="entity-Oscr"><td> <code title="">Oscr;</code> </td> <td> U+1D4AA </td> <td> <span class="glyph" title="">𝒪</span> </td> </tr><tr id="entity-oscr"><td> <code title="">oscr;</code> </td> <td> U+02134 </td> <td> <span class="glyph" title="">ℴ</span> </td> </tr><tr id="entity-Oslash"><td> <code title="">Oslash;</code> </td> <td> U+000D8 </td> <td> <span class="glyph" title="">Ø</span> </td> </tr><tr class="impl" id="entity-Oslash-legacy"><td> <code title="">Oslash</code> </td> <td> U+000D8 </td> <td> <span title="">Ø</span> </td> </tr><tr id="entity-oslash"><td> <code title="">oslash;</code> </td> <td> U+000F8 </td> <td> <span class="glyph" title="">ø</span> </td> </tr><tr class="impl" id="entity-oslash-legacy"><td> <code title="">oslash</code> </td> <td> U+000F8 </td> <td> <span title="">ø</span> </td> </tr><tr id="entity-osol"><td> <code title="">osol;</code> </td> <td> U+02298 </td> <td> <span class="glyph" title="">⊘</span> </td> </tr><tr id="entity-Otilde"><td> <code title="">Otilde;</code> </td> <td> U+000D5 </td> <td> <span class="glyph" title="">Õ</span> </td> </tr><tr class="impl" id="entity-Otilde-legacy"><td> <code title="">Otilde</code> </td> <td> U+000D5 </td> <td> <span title="">Õ</span> </td> </tr><tr id="entity-otilde"><td> <code title="">otilde;</code> </td> <td> U+000F5 </td> <td> <span class="glyph" title="">õ</span> </td> </tr><tr class="impl" id="entity-otilde-legacy"><td> <code title="">otilde</code> </td> <td> U+000F5 </td> <td> <span title="">õ</span> </td> </tr><tr id="entity-Otimes"><td> <code title="">Otimes;</code> </td> <td> U+02A37 </td> <td> <span class="glyph" title="">⨷</span> </td> </tr><tr id="entity-otimes"><td> <code title="">otimes;</code> </td> <td> U+02297 </td> <td> <span class="glyph" title="">⊗</span> </td> </tr><tr id="entity-otimesas"><td> <code title="">otimesas;</code> </td> <td> U+02A36 </td> <td> <span class="glyph" title="">⨶</span> </td> </tr><tr id="entity-Ouml"><td> <code title="">Ouml;</code> </td> <td> U+000D6 </td> <td> <span class="glyph" title="">Ö</span> </td> </tr><tr class="impl" id="entity-Ouml-legacy"><td> <code title="">Ouml</code> </td> <td> U+000D6 </td> <td> <span title="">Ö</span> </td> </tr><tr id="entity-ouml"><td> <code title="">ouml;</code> </td> <td> U+000F6 </td> <td> <span class="glyph" title="">ö</span> </td> </tr><tr class="impl" id="entity-ouml-legacy"><td> <code title="">ouml</code> </td> <td> U+000F6 </td> <td> <span title="">ö</span> </td> </tr><tr id="entity-ovbar"><td> <code title="">ovbar;</code> </td> <td> U+0233D </td> <td> <span class="glyph" title="">⌽</span> </td> </tr><tr id="entity-OverBar"><td> <code title="">OverBar;</code> </td> <td> U+0203E </td> <td> <span class="glyph" title="">‾</span> </td> </tr><tr id="entity-OverBrace"><td> <code title="">OverBrace;</code> </td> <td> U+023DE </td> <td> <span class="glyph" title="">⏞</span> </td> </tr><tr id="entity-OverBracket"><td> <code title="">OverBracket;</code> </td> <td> U+023B4 </td> <td> <span class="glyph" title="">⎴</span> </td> </tr><tr id="entity-OverParenthesis"><td> <code title="">OverParenthesis;</code> </td> <td> U+023DC </td> <td> <span class="glyph" title="">⏜</span> </td> </tr><tr id="entity-par"><td> <code title="">par;</code> </td> <td> U+02225 </td> <td> <span class="glyph" title="">∥</span> </td> </tr><tr id="entity-para"><td> <code title="">para;</code> </td> <td> U+000B6 </td> <td> <span class="glyph" title="">¶</span> </td> </tr><tr class="impl" id="entity-para-legacy"><td> <code title="">para</code> </td> <td> U+000B6 </td> <td> <span title="">¶</span> </td> </tr><tr id="entity-parallel"><td> <code title="">parallel;</code> </td> <td> U+02225 </td> <td> <span class="glyph" title="">∥</span> </td> </tr><tr id="entity-parsim"><td> <code title="">parsim;</code> </td> <td> U+02AF3 </td> <td> <span class="glyph" title="">⫳</span> </td> </tr><tr id="entity-parsl"><td> <code title="">parsl;</code> </td> <td> U+02AFD </td> <td> <span class="glyph" title="">⫽</span> </td> </tr><tr id="entity-part"><td> <code title="">part;</code> </td> <td> U+02202 </td> <td> <span class="glyph" title="">∂</span> </td> </tr><tr id="entity-PartialD"><td> <code title="">PartialD;</code> </td> <td> U+02202 </td> <td> <span class="glyph" title="">∂</span> </td> </tr><tr id="entity-Pcy"><td> <code title="">Pcy;</code> </td> <td> U+0041F </td> <td> <span class="glyph" title="">П</span> </td> </tr><tr id="entity-pcy"><td> <code title="">pcy;</code> </td> <td> U+0043F </td> <td> <span class="glyph" title="">п</span> </td> </tr><tr id="entity-percnt"><td> <code title="">percnt;</code> </td> <td> U+00025 </td> <td> <span class="glyph" title="">%</span> </td> </tr><tr id="entity-period"><td> <code title="">period;</code> </td> <td> U+0002E </td> <td> <span class="glyph" title="">.</span> </td> </tr><tr id="entity-permil"><td> <code title="">permil;</code> </td> <td> U+02030 </td> <td> <span class="glyph" title="">‰</span> </td> </tr><tr id="entity-perp"><td> <code title="">perp;</code> </td> <td> U+022A5 </td> <td> <span class="glyph" title="">⊥</span> </td> </tr><tr id="entity-pertenk"><td> <code title="">pertenk;</code> </td> <td> U+02031 </td> <td> <span class="glyph" title="">‱</span> </td> </tr><tr id="entity-Pfr"><td> <code title="">Pfr;</code> </td> <td> U+1D513 </td> <td> <span class="glyph" title="">𝔓</span> </td> </tr><tr id="entity-pfr"><td> <code title="">pfr;</code> </td> <td> U+1D52D </td> <td> <span class="glyph" title="">𝔭</span> </td> </tr><tr id="entity-Phi"><td> <code title="">Phi;</code> </td> <td> U+003A6 </td> <td> <span class="glyph" title="">Φ</span> </td> </tr><tr id="entity-phi"><td> <code title="">phi;</code> </td> <td> U+003C6 </td> <td> <span class="glyph" title="">φ</span> </td> </tr><tr id="entity-phiv"><td> <code title="">phiv;</code> </td> <td> U+003D5 </td> <td> <span class="glyph" title="">ϕ</span> </td> </tr><tr id="entity-phmmat"><td> <code title="">phmmat;</code> </td> <td> U+02133 </td> <td> <span class="glyph" title="">ℳ</span> </td> </tr><tr id="entity-phone"><td> <code title="">phone;</code> </td> <td> U+0260E </td> <td> <span class="glyph" title="">☎</span> </td> </tr><tr id="entity-Pi"><td> <code title="">Pi;</code> </td> <td> U+003A0 </td> <td> <span class="glyph" title="">Π</span> </td> </tr><tr id="entity-pi"><td> <code title="">pi;</code> </td> <td> U+003C0 </td> <td> <span class="glyph" title="">π</span> </td> </tr><tr id="entity-pitchfork"><td> <code title="">pitchfork;</code> </td> <td> U+022D4 </td> <td> <span class="glyph" title="">⋔</span> </td> </tr><tr id="entity-piv"><td> <code title="">piv;</code> </td> <td> U+003D6 </td> <td> <span class="glyph" title="">ϖ</span> </td> </tr><tr id="entity-planck"><td> <code title="">planck;</code> </td> <td> U+0210F </td> <td> <span class="glyph" title="">ℏ</span> </td> </tr><tr id="entity-planckh"><td> <code title="">planckh;</code> </td> <td> U+0210E </td> <td> <span class="glyph" title="">ℎ</span> </td> </tr><tr id="entity-plankv"><td> <code title="">plankv;</code> </td> <td> U+0210F </td> <td> <span class="glyph" title="">ℏ</span> </td> </tr><tr id="entity-plus"><td> <code title="">plus;</code> </td> <td> U+0002B </td> <td> <span class="glyph" title="">+</span> </td> </tr><tr id="entity-plusacir"><td> <code title="">plusacir;</code> </td> <td> U+02A23 </td> <td> <span class="glyph" title="">⨣</span> </td> </tr><tr id="entity-plusb"><td> <code title="">plusb;</code> </td> <td> U+0229E </td> <td> <span class="glyph" title="">⊞</span> </td> </tr><tr id="entity-pluscir"><td> <code title="">pluscir;</code> </td> <td> U+02A22 </td> <td> <span class="glyph" title="">⨢</span> </td> </tr><tr id="entity-plusdo"><td> <code title="">plusdo;</code> </td> <td> U+02214 </td> <td> <span class="glyph" title="">∔</span> </td> </tr><tr id="entity-plusdu"><td> <code title="">plusdu;</code> </td> <td> U+02A25 </td> <td> <span class="glyph" title="">⨥</span> </td> </tr><tr id="entity-pluse"><td> <code title="">pluse;</code> </td> <td> U+02A72 </td> <td> <span class="glyph" title="">⩲</span> </td> </tr><tr id="entity-PlusMinus"><td> <code title="">PlusMinus;</code> </td> <td> U+000B1 </td> <td> <span class="glyph" title="">±</span> </td> </tr><tr id="entity-plusmn"><td> <code title="">plusmn;</code> </td> <td> U+000B1 </td> <td> <span class="glyph" title="">±</span> </td> </tr><tr class="impl" id="entity-plusmn-legacy"><td> <code title="">plusmn</code> </td> <td> U+000B1 </td> <td> <span title="">±</span> </td> </tr><tr id="entity-plussim"><td> <code title="">plussim;</code> </td> <td> U+02A26 </td> <td> <span class="glyph" title="">⨦</span> </td> </tr><tr id="entity-plustwo"><td> <code title="">plustwo;</code> </td> <td> U+02A27 </td> <td> <span class="glyph" title="">⨧</span> </td> </tr><tr id="entity-pm"><td> <code title="">pm;</code> </td> <td> U+000B1 </td> <td> <span class="glyph" title="">±</span> </td> </tr><tr id="entity-Poincareplane"><td> <code title="">Poincareplane;</code> </td> <td> U+0210C </td> <td> <span class="glyph" title="">ℌ</span> </td> </tr><tr id="entity-pointint"><td> <code title="">pointint;</code> </td> <td> U+02A15 </td> <td> <span class="glyph" title="">⨕</span> </td> </tr><tr id="entity-Popf"><td> <code title="">Popf;</code> </td> <td> U+02119 </td> <td> <span class="glyph" title="">ℙ</span> </td> </tr><tr id="entity-popf"><td> <code title="">popf;</code> </td> <td> U+1D561 </td> <td> <span class="glyph" title="">𝕡</span> </td> </tr><tr id="entity-pound"><td> <code title="">pound;</code> </td> <td> U+000A3 </td> <td> <span class="glyph" title="">£</span> </td> </tr><tr class="impl" id="entity-pound-legacy"><td> <code title="">pound</code> </td> <td> U+000A3 </td> <td> <span title="">£</span> </td> </tr><tr id="entity-Pr"><td> <code title="">Pr;</code> </td> <td> U+02ABB </td> <td> <span class="glyph" title="">⪻</span> </td> </tr><tr id="entity-pr"><td> <code title="">pr;</code> </td> <td> U+0227A </td> <td> <span class="glyph" title="">≺</span> </td> </tr><tr id="entity-prap"><td> <code title="">prap;</code> </td> <td> U+02AB7 </td> <td> <span class="glyph" title="">⪷</span> </td> </tr><tr id="entity-prcue"><td> <code title="">prcue;</code> </td> <td> U+0227C </td> <td> <span class="glyph" title="">≼</span> </td> </tr><tr id="entity-prE"><td> <code title="">prE;</code> </td> <td> U+02AB3 </td> <td> <span class="glyph" title="">⪳</span> </td> </tr><tr id="entity-pre"><td> <code title="">pre;</code> </td> <td> U+02AAF </td> <td> <span class="glyph" title="">⪯</span> </td> </tr><tr id="entity-prec"><td> <code title="">prec;</code> </td> <td> U+0227A </td> <td> <span class="glyph" title="">≺</span> </td> </tr><tr id="entity-precapprox"><td> <code title="">precapprox;</code> </td> <td> U+02AB7 </td> <td> <span class="glyph" title="">⪷</span> </td> </tr><tr id="entity-preccurlyeq"><td> <code title="">preccurlyeq;</code> </td> <td> U+0227C </td> <td> <span class="glyph" title="">≼</span> </td> </tr><tr id="entity-Precedes"><td> <code title="">Precedes;</code> </td> <td> U+0227A </td> <td> <span class="glyph" title="">≺</span> </td> </tr><tr id="entity-PrecedesEqual"><td> <code title="">PrecedesEqual;</code> </td> <td> U+02AAF </td> <td> <span class="glyph" title="">⪯</span> </td> </tr><tr id="entity-PrecedesSlantEqual"><td> <code title="">PrecedesSlantEqual;</code> </td> <td> U+0227C </td> <td> <span class="glyph" title="">≼</span> </td> </tr><tr id="entity-PrecedesTilde"><td> <code title="">PrecedesTilde;</code> </td> <td> U+0227E </td> <td> <span class="glyph" title="">≾</span> </td> </tr><tr id="entity-preceq"><td> <code title="">preceq;</code> </td> <td> U+02AAF </td> <td> <span class="glyph" title="">⪯</span> </td> </tr><tr id="entity-precnapprox"><td> <code title="">precnapprox;</code> </td> <td> U+02AB9 </td> <td> <span class="glyph" title="">⪹</span> </td> </tr><tr id="entity-precneqq"><td> <code title="">precneqq;</code> </td> <td> U+02AB5 </td> <td> <span class="glyph" title="">⪵</span> </td> </tr><tr id="entity-precnsim"><td> <code title="">precnsim;</code> </td> <td> U+022E8 </td> <td> <span class="glyph" title="">⋨</span> </td> </tr><tr id="entity-precsim"><td> <code title="">precsim;</code> </td> <td> U+0227E </td> <td> <span class="glyph" title="">≾</span> </td> </tr><tr id="entity-Prime"><td> <code title="">Prime;</code> </td> <td> U+02033 </td> <td> <span class="glyph" title="">″</span> </td> </tr><tr id="entity-prime"><td> <code title="">prime;</code> </td> <td> U+02032 </td> <td> <span class="glyph" title="">′</span> </td> </tr><tr id="entity-primes"><td> <code title="">primes;</code> </td> <td> U+02119 </td> <td> <span class="glyph" title="">ℙ</span> </td> </tr><tr id="entity-prnap"><td> <code title="">prnap;</code> </td> <td> U+02AB9 </td> <td> <span class="glyph" title="">⪹</span> </td> </tr><tr id="entity-prnE"><td> <code title="">prnE;</code> </td> <td> U+02AB5 </td> <td> <span class="glyph" title="">⪵</span> </td> </tr><tr id="entity-prnsim"><td> <code title="">prnsim;</code> </td> <td> U+022E8 </td> <td> <span class="glyph" title="">⋨</span> </td> </tr><tr id="entity-prod"><td> <code title="">prod;</code> </td> <td> U+0220F </td> <td> <span class="glyph" title="">∏</span> </td> </tr><tr id="entity-Product"><td> <code title="">Product;</code> </td> <td> U+0220F </td> <td> <span class="glyph" title="">∏</span> </td> </tr><tr id="entity-profalar"><td> <code title="">profalar;</code> </td> <td> U+0232E </td> <td> <span class="glyph" title="">⌮</span> </td> </tr><tr id="entity-profline"><td> <code title="">profline;</code> </td> <td> U+02312 </td> <td> <span class="glyph" title="">⌒</span> </td> </tr><tr id="entity-profsurf"><td> <code title="">profsurf;</code> </td> <td> U+02313 </td> <td> <span class="glyph" title="">⌓</span> </td> </tr><tr id="entity-prop"><td> <code title="">prop;</code> </td> <td> U+0221D </td> <td> <span class="glyph" title="">∝</span> </td> </tr><tr id="entity-Proportion"><td> <code title="">Proportion;</code> </td> <td> U+02237 </td> <td> <span class="glyph" title="">∷</span> </td> </tr><tr id="entity-Proportional"><td> <code title="">Proportional;</code> </td> <td> U+0221D </td> <td> <span class="glyph" title="">∝</span> </td> </tr><tr id="entity-propto"><td> <code title="">propto;</code> </td> <td> U+0221D </td> <td> <span class="glyph" title="">∝</span> </td> </tr><tr id="entity-prsim"><td> <code title="">prsim;</code> </td> <td> U+0227E </td> <td> <span class="glyph" title="">≾</span> </td> </tr><tr id="entity-prurel"><td> <code title="">prurel;</code> </td> <td> U+022B0 </td> <td> <span class="glyph" title="">⊰</span> </td> </tr><tr id="entity-Pscr"><td> <code title="">Pscr;</code> </td> <td> U+1D4AB </td> <td> <span class="glyph" title="">𝒫</span> </td> </tr><tr id="entity-pscr"><td> <code title="">pscr;</code> </td> <td> U+1D4C5 </td> <td> <span class="glyph" title="">𝓅</span> </td> </tr><tr id="entity-Psi"><td> <code title="">Psi;</code> </td> <td> U+003A8 </td> <td> <span class="glyph" title="">Ψ</span> </td> </tr><tr id="entity-psi"><td> <code title="">psi;</code> </td> <td> U+003C8 </td> <td> <span class="glyph" title="">ψ</span> </td> </tr><tr id="entity-puncsp"><td> <code title="">puncsp;</code> </td> <td> U+02008 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-Qfr"><td> <code title="">Qfr;</code> </td> <td> U+1D514 </td> <td> <span class="glyph" title="">𝔔</span> </td> </tr><tr id="entity-qfr"><td> <code title="">qfr;</code> </td> <td> U+1D52E </td> <td> <span class="glyph" title="">𝔮</span> </td> </tr><tr id="entity-qint"><td> <code title="">qint;</code> </td> <td> U+02A0C </td> <td> <span class="glyph" title="">⨌</span> </td> </tr><tr id="entity-Qopf"><td> <code title="">Qopf;</code> </td> <td> U+0211A </td> <td> <span class="glyph" title="">ℚ</span> </td> </tr><tr id="entity-qopf"><td> <code title="">qopf;</code> </td> <td> U+1D562 </td> <td> <span class="glyph" title="">𝕢</span> </td> </tr><tr id="entity-qprime"><td> <code title="">qprime;</code> </td> <td> U+02057 </td> <td> <span class="glyph" title="">⁗</span> </td> </tr><tr id="entity-Qscr"><td> <code title="">Qscr;</code> </td> <td> U+1D4AC </td> <td> <span class="glyph" title="">𝒬</span> </td> </tr><tr id="entity-qscr"><td> <code title="">qscr;</code> </td> <td> U+1D4C6 </td> <td> <span class="glyph" title="">𝓆</span> </td> </tr><tr id="entity-quaternions"><td> <code title="">quaternions;</code> </td> <td> U+0210D </td> <td> <span class="glyph" title="">ℍ</span> </td> </tr><tr id="entity-quatint"><td> <code title="">quatint;</code> </td> <td> U+02A16 </td> <td> <span class="glyph" title="">⨖</span> </td> </tr><tr id="entity-quest"><td> <code title="">quest;</code> </td> <td> U+0003F </td> <td> <span class="glyph" title="">?</span> </td> </tr><tr id="entity-questeq"><td> <code title="">questeq;</code> </td> <td> U+0225F </td> <td> <span class="glyph" title="">≟</span> </td> </tr><tr id="entity-QUOT"><td> <code title="">QUOT;</code> </td> <td> U+00022 </td> <td> <span class="glyph" title="">"</span> </td> </tr><tr class="impl" id="entity-QUOT-legacy"><td> <code title="">QUOT</code> </td> <td> U+00022 </td> <td> <span title="">"</span> </td> </tr><tr id="entity-quot"><td> <code title="">quot;</code> </td> <td> U+00022 </td> <td> <span class="glyph" title="">"</span> </td> </tr><tr class="impl" id="entity-quot-legacy"><td> <code title="">quot</code> </td> <td> U+00022 </td> <td> <span title="">"</span> </td> </tr><tr id="entity-rAarr"><td> <code title="">rAarr;</code> </td> <td> U+021DB </td> <td> <span class="glyph" title="">⇛</span> </td> </tr><tr id="entity-race"><td> <code title="">race;</code> </td> <td> U+0223D U+00331 </td> <td> <span class="glyph compound" title="">∽̱</span> </td> </tr><tr id="entity-Racute"><td> <code title="">Racute;</code> </td> <td> U+00154 </td> <td> <span class="glyph" title="">Ŕ</span> </td> </tr><tr id="entity-racute"><td> <code title="">racute;</code> </td> <td> U+00155 </td> <td> <span class="glyph" title="">ŕ</span> </td> </tr><tr id="entity-radic"><td> <code title="">radic;</code> </td> <td> U+0221A </td> <td> <span class="glyph" title="">√</span> </td> </tr><tr id="entity-raemptyv"><td> <code title="">raemptyv;</code> </td> <td> U+029B3 </td> <td> <span class="glyph" title="">⦳</span> </td> </tr><tr id="entity-Rang"><td> <code title="">Rang;</code> </td> <td> U+027EB </td> <td> <span class="glyph" title="">⟫</span> </td> </tr><tr id="entity-rang"><td> <code title="">rang;</code> </td> <td> U+027E9 </td> <td> <span class="glyph" title="">〉</span> </td> </tr><tr id="entity-rangd"><td> <code title="">rangd;</code> </td> <td> U+02992 </td> <td> <span class="glyph" title="">⦒</span> </td> </tr><tr id="entity-range"><td> <code title="">range;</code> </td> <td> U+029A5 </td> <td> <span class="glyph" title="">⦥</span> </td> </tr><tr id="entity-rangle"><td> <code title="">rangle;</code> </td> <td> U+027E9 </td> <td> <span class="glyph" title="">〉</span> </td> </tr><tr id="entity-raquo"><td> <code title="">raquo;</code> </td> <td> U+000BB </td> <td> <span class="glyph" title="">»</span> </td> </tr><tr class="impl" id="entity-raquo-legacy"><td> <code title="">raquo</code> </td> <td> U+000BB </td> <td> <span title="">»</span> </td> </tr><tr id="entity-Rarr"><td> <code title="">Rarr;</code> </td> <td> U+021A0 </td> <td> <span class="glyph" title="">↠</span> </td> </tr><tr id="entity-rArr"><td> <code title="">rArr;</code> </td> <td> U+021D2 </td> <td> <span class="glyph" title="">⇒</span> </td> </tr><tr id="entity-rarr"><td> <code title="">rarr;</code> </td> <td> U+02192 </td> <td> <span class="glyph" title="">→</span> </td> </tr><tr id="entity-rarrap"><td> <code title="">rarrap;</code> </td> <td> U+02975 </td> <td> <span class="glyph" title="">⥵</span> </td> </tr><tr id="entity-rarrb"><td> <code title="">rarrb;</code> </td> <td> U+021E5 </td> <td> <span class="glyph" title="">⇥</span> </td> </tr><tr id="entity-rarrbfs"><td> <code title="">rarrbfs;</code> </td> <td> U+02920 </td> <td> <span class="glyph" title="">⤠</span> </td> </tr><tr id="entity-rarrc"><td> <code title="">rarrc;</code> </td> <td> U+02933 </td> <td> <span class="glyph" title="">⤳</span> </td> </tr><tr id="entity-rarrfs"><td> <code title="">rarrfs;</code> </td> <td> U+0291E </td> <td> <span class="glyph" title="">⤞</span> </td> </tr><tr id="entity-rarrhk"><td> <code title="">rarrhk;</code> </td> <td> U+021AA </td> <td> <span class="glyph" title="">↪</span> </td> </tr><tr id="entity-rarrlp"><td> <code title="">rarrlp;</code> </td> <td> U+021AC </td> <td> <span class="glyph" title="">↬</span> </td> </tr><tr id="entity-rarrpl"><td> <code title="">rarrpl;</code> </td> <td> U+02945 </td> <td> <span class="glyph" title="">⥅</span> </td> </tr><tr id="entity-rarrsim"><td> <code title="">rarrsim;</code> </td> <td> U+02974 </td> <td> <span class="glyph" title="">⥴</span> </td> </tr><tr id="entity-Rarrtl"><td> <code title="">Rarrtl;</code> </td> <td> U+02916 </td> <td> <span class="glyph" title="">⤖</span> </td> </tr><tr id="entity-rarrtl"><td> <code title="">rarrtl;</code> </td> <td> U+021A3 </td> <td> <span class="glyph" title="">↣</span> </td> </tr><tr id="entity-rarrw"><td> <code title="">rarrw;</code> </td> <td> U+0219D </td> <td> <span class="glyph" title="">↝</span> </td> </tr><tr id="entity-rAtail"><td> <code title="">rAtail;</code> </td> <td> U+0291C </td> <td> <span class="glyph" title="">⤜</span> </td> </tr><tr id="entity-ratail"><td> <code title="">ratail;</code> </td> <td> U+0291A </td> <td> <span class="glyph" title="">⤚</span> </td> </tr><tr id="entity-ratio"><td> <code title="">ratio;</code> </td> <td> U+02236 </td> <td> <span class="glyph" title="">∶</span> </td> </tr><tr id="entity-rationals"><td> <code title="">rationals;</code> </td> <td> U+0211A </td> <td> <span class="glyph" title="">ℚ</span> </td> </tr><tr id="entity-RBarr"><td> <code title="">RBarr;</code> </td> <td> U+02910 </td> <td> <span class="glyph" title="">⤐</span> </td> </tr><tr id="entity-rBarr"><td> <code title="">rBarr;</code> </td> <td> U+0290F </td> <td> <span class="glyph" title="">⤏</span> </td> </tr><tr id="entity-rbarr"><td> <code title="">rbarr;</code> </td> <td> U+0290D </td> <td> <span class="glyph" title="">⤍</span> </td> </tr><tr id="entity-rbbrk"><td> <code title="">rbbrk;</code> </td> <td> U+02773 </td> <td> <span class="glyph" title="">❳</span> </td> </tr><tr id="entity-rbrace"><td> <code title="">rbrace;</code> </td> <td> U+0007D </td> <td> <span class="glyph" title="">}</span> </td> </tr><tr id="entity-rbrack"><td> <code title="">rbrack;</code> </td> <td> U+0005D </td> <td> <span class="glyph" title="">]</span> </td> </tr><tr id="entity-rbrke"><td> <code title="">rbrke;</code> </td> <td> U+0298C </td> <td> <span class="glyph" title="">⦌</span> </td> </tr><tr id="entity-rbrksld"><td> <code title="">rbrksld;</code> </td> <td> U+0298E </td> <td> <span class="glyph" title="">⦎</span> </td> </tr><tr id="entity-rbrkslu"><td> <code title="">rbrkslu;</code> </td> <td> U+02990 </td> <td> <span class="glyph" title="">⦐</span> </td> </tr><tr id="entity-Rcaron"><td> <code title="">Rcaron;</code> </td> <td> U+00158 </td> <td> <span class="glyph" title="">Ř</span> </td> </tr><tr id="entity-rcaron"><td> <code title="">rcaron;</code> </td> <td> U+00159 </td> <td> <span class="glyph" title="">ř</span> </td> </tr><tr id="entity-Rcedil"><td> <code title="">Rcedil;</code> </td> <td> U+00156 </td> <td> <span class="glyph" title="">Ŗ</span> </td> </tr><tr id="entity-rcedil"><td> <code title="">rcedil;</code> </td> <td> U+00157 </td> <td> <span class="glyph" title="">ŗ</span> </td> </tr><tr id="entity-rceil"><td> <code title="">rceil;</code> </td> <td> U+02309 </td> <td> <span class="glyph" title="">⌉</span> </td> </tr><tr id="entity-rcub"><td> <code title="">rcub;</code> </td> <td> U+0007D </td> <td> <span class="glyph" title="">}</span> </td> </tr><tr id="entity-Rcy"><td> <code title="">Rcy;</code> </td> <td> U+00420 </td> <td> <span class="glyph" title="">Р</span> </td> </tr><tr id="entity-rcy"><td> <code title="">rcy;</code> </td> <td> U+00440 </td> <td> <span class="glyph" title="">р</span> </td> </tr><tr id="entity-rdca"><td> <code title="">rdca;</code> </td> <td> U+02937 </td> <td> <span class="glyph" title="">⤷</span> </td> </tr><tr id="entity-rdldhar"><td> <code title="">rdldhar;</code> </td> <td> U+02969 </td> <td> <span class="glyph" title="">⥩</span> </td> </tr><tr id="entity-rdquo"><td> <code title="">rdquo;</code> </td> <td> U+0201D </td> <td> <span class="glyph" title="">”</span> </td> </tr><tr id="entity-rdquor"><td> <code title="">rdquor;</code> </td> <td> U+0201D </td> <td> <span class="glyph" title="">”</span> </td> </tr><tr id="entity-rdsh"><td> <code title="">rdsh;</code> </td> <td> U+021B3 </td> <td> <span class="glyph" title="">↳</span> </td> </tr><tr id="entity-Re"><td> <code title="">Re;</code> </td> <td> U+0211C </td> <td> <span class="glyph" title="">ℜ</span> </td> </tr><tr id="entity-real"><td> <code title="">real;</code> </td> <td> U+0211C </td> <td> <span class="glyph" title="">ℜ</span> </td> </tr><tr id="entity-realine"><td> <code title="">realine;</code> </td> <td> U+0211B </td> <td> <span class="glyph" title="">ℛ</span> </td> </tr><tr id="entity-realpart"><td> <code title="">realpart;</code> </td> <td> U+0211C </td> <td> <span class="glyph" title="">ℜ</span> </td> </tr><tr id="entity-reals"><td> <code title="">reals;</code> </td> <td> U+0211D </td> <td> <span class="glyph" title="">ℝ</span> </td> </tr><tr id="entity-rect"><td> <code title="">rect;</code> </td> <td> U+025AD </td> <td> <span class="glyph" title="">▭</span> </td> </tr><tr id="entity-REG"><td> <code title="">REG;</code> </td> <td> U+000AE </td> <td> <span class="glyph" title="">®</span> </td> </tr><tr class="impl" id="entity-REG-legacy"><td> <code title="">REG</code> </td> <td> U+000AE </td> <td> <span title="">®</span> </td> </tr><tr id="entity-reg"><td> <code title="">reg;</code> </td> <td> U+000AE </td> <td> <span class="glyph" title="">®</span> </td> </tr><tr class="impl" id="entity-reg-legacy"><td> <code title="">reg</code> </td> <td> U+000AE </td> <td> <span title="">®</span> </td> </tr><tr id="entity-ReverseElement"><td> <code title="">ReverseElement;</code> </td> <td> U+0220B </td> <td> <span class="glyph" title="">∋</span> </td> </tr><tr id="entity-ReverseEquilibrium"><td> <code title="">ReverseEquilibrium;</code> </td> <td> U+021CB </td> <td> <span class="glyph" title="">⇋</span> </td> </tr><tr id="entity-ReverseUpEquilibrium"><td> <code title="">ReverseUpEquilibrium;</code> </td> <td> U+0296F </td> <td> <span class="glyph" title="">⥯</span> </td> </tr><tr id="entity-rfisht"><td> <code title="">rfisht;</code> </td> <td> U+0297D </td> <td> <span class="glyph" title="">⥽</span> </td> </tr><tr id="entity-rfloor"><td> <code title="">rfloor;</code> </td> <td> U+0230B </td> <td> <span class="glyph" title="">⌋</span> </td> </tr><tr id="entity-Rfr"><td> <code title="">Rfr;</code> </td> <td> U+0211C </td> <td> <span class="glyph" title="">ℜ</span> </td> </tr><tr id="entity-rfr"><td> <code title="">rfr;</code> </td> <td> U+1D52F </td> <td> <span class="glyph" title="">𝔯</span> </td> </tr><tr id="entity-rHar"><td> <code title="">rHar;</code> </td> <td> U+02964 </td> <td> <span class="glyph" title="">⥤</span> </td> </tr><tr id="entity-rhard"><td> <code title="">rhard;</code> </td> <td> U+021C1 </td> <td> <span class="glyph" title="">⇁</span> </td> </tr><tr id="entity-rharu"><td> <code title="">rharu;</code> </td> <td> U+021C0 </td> <td> <span class="glyph" title="">⇀</span> </td> </tr><tr id="entity-rharul"><td> <code title="">rharul;</code> </td> <td> U+0296C </td> <td> <span class="glyph" title="">⥬</span> </td> </tr><tr id="entity-Rho"><td> <code title="">Rho;</code> </td> <td> U+003A1 </td> <td> <span class="glyph" title="">Ρ</span> </td> </tr><tr id="entity-rho"><td> <code title="">rho;</code> </td> <td> U+003C1 </td> <td> <span class="glyph" title="">ρ</span> </td> </tr><tr id="entity-rhov"><td> <code title="">rhov;</code> </td> <td> U+003F1 </td> <td> <span class="glyph" title="">ϱ</span> </td> </tr><tr id="entity-RightAngleBracket"><td> <code title="">RightAngleBracket;</code> </td> <td> U+027E9 </td> <td> <span class="glyph" title="">〉</span> </td> </tr><tr id="entity-RightArrow"><td> <code title="">RightArrow;</code> </td> <td> U+02192 </td> <td> <span class="glyph" title="">→</span> </td> </tr><tr id="entity-Rightarrow"><td> <code title="">Rightarrow;</code> </td> <td> U+021D2 </td> <td> <span class="glyph" title="">⇒</span> </td> </tr><tr id="entity-rightarrow"><td> <code title="">rightarrow;</code> </td> <td> U+02192 </td> <td> <span class="glyph" title="">→</span> </td> </tr><tr id="entity-RightArrowBar"><td> <code title="">RightArrowBar;</code> </td> <td> U+021E5 </td> <td> <span class="glyph" title="">⇥</span> </td> </tr><tr id="entity-RightArrowLeftArrow"><td> <code title="">RightArrowLeftArrow;</code> </td> <td> U+021C4 </td> <td> <span class="glyph" title="">⇄</span> </td> </tr><tr id="entity-rightarrowtail"><td> <code title="">rightarrowtail;</code> </td> <td> U+021A3 </td> <td> <span class="glyph" title="">↣</span> </td> </tr><tr id="entity-RightCeiling"><td> <code title="">RightCeiling;</code> </td> <td> U+02309 </td> <td> <span class="glyph" title="">⌉</span> </td> </tr><tr id="entity-RightDoubleBracket"><td> <code title="">RightDoubleBracket;</code> </td> <td> U+027E7 </td> <td> <span class="glyph" title="">⟧</span> </td> </tr><tr id="entity-RightDownTeeVector"><td> <code title="">RightDownTeeVector;</code> </td> <td> U+0295D </td> <td> <span class="glyph" title="">⥝</span> </td> </tr><tr id="entity-RightDownVector"><td> <code title="">RightDownVector;</code> </td> <td> U+021C2 </td> <td> <span class="glyph" title="">⇂</span> </td> </tr><tr id="entity-RightDownVectorBar"><td> <code title="">RightDownVectorBar;</code> </td> <td> U+02955 </td> <td> <span class="glyph" title="">⥕</span> </td> </tr><tr id="entity-RightFloor"><td> <code title="">RightFloor;</code> </td> <td> U+0230B </td> <td> <span class="glyph" title="">⌋</span> </td> </tr><tr id="entity-rightharpoondown"><td> <code title="">rightharpoondown;</code> </td> <td> U+021C1 </td> <td> <span class="glyph" title="">⇁</span> </td> </tr><tr id="entity-rightharpoonup"><td> <code title="">rightharpoonup;</code> </td> <td> U+021C0 </td> <td> <span class="glyph" title="">⇀</span> </td> </tr><tr id="entity-rightleftarrows"><td> <code title="">rightleftarrows;</code> </td> <td> U+021C4 </td> <td> <span class="glyph" title="">⇄</span> </td> </tr><tr id="entity-rightleftharpoons"><td> <code title="">rightleftharpoons;</code> </td> <td> U+021CC </td> <td> <span class="glyph" title="">⇌</span> </td> </tr><tr id="entity-rightrightarrows"><td> <code title="">rightrightarrows;</code> </td> <td> U+021C9 </td> <td> <span class="glyph" title="">⇉</span> </td> </tr><tr id="entity-rightsquigarrow"><td> <code title="">rightsquigarrow;</code> </td> <td> U+0219D </td> <td> <span class="glyph" title="">↝</span> </td> </tr><tr id="entity-RightTee"><td> <code title="">RightTee;</code> </td> <td> U+022A2 </td> <td> <span class="glyph" title="">⊢</span> </td> </tr><tr id="entity-RightTeeArrow"><td> <code title="">RightTeeArrow;</code> </td> <td> U+021A6 </td> <td> <span class="glyph" title="">↦</span> </td> </tr><tr id="entity-RightTeeVector"><td> <code title="">RightTeeVector;</code> </td> <td> U+0295B </td> <td> <span class="glyph" title="">⥛</span> </td> </tr><tr id="entity-rightthreetimes"><td> <code title="">rightthreetimes;</code> </td> <td> U+022CC </td> <td> <span class="glyph" title="">⋌</span> </td> </tr><tr id="entity-RightTriangle"><td> <code title="">RightTriangle;</code> </td> <td> U+022B3 </td> <td> <span class="glyph" title="">⊳</span> </td> </tr><tr id="entity-RightTriangleBar"><td> <code title="">RightTriangleBar;</code> </td> <td> U+029D0 </td> <td> <span class="glyph" title="">⧐</span> </td> </tr><tr id="entity-RightTriangleEqual"><td> <code title="">RightTriangleEqual;</code> </td> <td> U+022B5 </td> <td> <span class="glyph" title="">⊵</span> </td> </tr><tr id="entity-RightUpDownVector"><td> <code title="">RightUpDownVector;</code> </td> <td> U+0294F </td> <td> <span class="glyph" title="">⥏</span> </td> </tr><tr id="entity-RightUpTeeVector"><td> <code title="">RightUpTeeVector;</code> </td> <td> U+0295C </td> <td> <span class="glyph" title="">⥜</span> </td> </tr><tr id="entity-RightUpVector"><td> <code title="">RightUpVector;</code> </td> <td> U+021BE </td> <td> <span class="glyph" title="">↾</span> </td> </tr><tr id="entity-RightUpVectorBar"><td> <code title="">RightUpVectorBar;</code> </td> <td> U+02954 </td> <td> <span class="glyph" title="">⥔</span> </td> </tr><tr id="entity-RightVector"><td> <code title="">RightVector;</code> </td> <td> U+021C0 </td> <td> <span class="glyph" title="">⇀</span> </td> </tr><tr id="entity-RightVectorBar"><td> <code title="">RightVectorBar;</code> </td> <td> U+02953 </td> <td> <span class="glyph" title="">⥓</span> </td> </tr><tr id="entity-ring"><td> <code title="">ring;</code> </td> <td> U+002DA </td> <td> <span class="glyph" title="">˚</span> </td> </tr><tr id="entity-risingdotseq"><td> <code title="">risingdotseq;</code> </td> <td> U+02253 </td> <td> <span class="glyph" title="">≓</span> </td> </tr><tr id="entity-rlarr"><td> <code title="">rlarr;</code> </td> <td> U+021C4 </td> <td> <span class="glyph" title="">⇄</span> </td> </tr><tr id="entity-rlhar"><td> <code title="">rlhar;</code> </td> <td> U+021CC </td> <td> <span class="glyph" title="">⇌</span> </td> </tr><tr id="entity-rlm"><td> <code title="">rlm;</code> </td> <td> U+0200F </td> <td> <span class="glyph" title="">‏</span> </td> </tr><tr id="entity-rmoust"><td> <code title="">rmoust;</code> </td> <td> U+023B1 </td> <td> <span class="glyph" title="">⎱</span> </td> </tr><tr id="entity-rmoustache"><td> <code title="">rmoustache;</code> </td> <td> U+023B1 </td> <td> <span class="glyph" title="">⎱</span> </td> </tr><tr id="entity-rnmid"><td> <code title="">rnmid;</code> </td> <td> U+02AEE </td> <td> <span class="glyph" title="">⫮</span> </td> </tr><tr id="entity-roang"><td> <code title="">roang;</code> </td> <td> U+027ED </td> <td> <span class="glyph" title="">⟭</span> </td> </tr><tr id="entity-roarr"><td> <code title="">roarr;</code> </td> <td> U+021FE </td> <td> <span class="glyph" title="">⇾</span> </td> </tr><tr id="entity-robrk"><td> <code title="">robrk;</code> </td> <td> U+027E7 </td> <td> <span class="glyph" title="">⟧</span> </td> </tr><tr id="entity-ropar"><td> <code title="">ropar;</code> </td> <td> U+02986 </td> <td> <span class="glyph" title="">⦆</span> </td> </tr><tr id="entity-Ropf"><td> <code title="">Ropf;</code> </td> <td> U+0211D </td> <td> <span class="glyph" title="">ℝ</span> </td> </tr><tr id="entity-ropf"><td> <code title="">ropf;</code> </td> <td> U+1D563 </td> <td> <span class="glyph" title="">𝕣</span> </td> </tr><tr id="entity-roplus"><td> <code title="">roplus;</code> </td> <td> U+02A2E </td> <td> <span class="glyph" title="">⨮</span> </td> </tr><tr id="entity-rotimes"><td> <code title="">rotimes;</code> </td> <td> U+02A35 </td> <td> <span class="glyph" title="">⨵</span> </td> </tr><tr id="entity-RoundImplies"><td> <code title="">RoundImplies;</code> </td> <td> U+02970 </td> <td> <span class="glyph" title="">⥰</span> </td> </tr><tr id="entity-rpar"><td> <code title="">rpar;</code> </td> <td> U+00029 </td> <td> <span class="glyph" title="">)</span> </td> </tr><tr id="entity-rpargt"><td> <code title="">rpargt;</code> </td> <td> U+02994 </td> <td> <span class="glyph" title="">⦔</span> </td> </tr><tr id="entity-rppolint"><td> <code title="">rppolint;</code> </td> <td> U+02A12 </td> <td> <span class="glyph" title="">⨒</span> </td> </tr><tr id="entity-rrarr"><td> <code title="">rrarr;</code> </td> <td> U+021C9 </td> <td> <span class="glyph" title="">⇉</span> </td> </tr><tr id="entity-Rrightarrow"><td> <code title="">Rrightarrow;</code> </td> <td> U+021DB </td> <td> <span class="glyph" title="">⇛</span> </td> </tr><tr id="entity-rsaquo"><td> <code title="">rsaquo;</code> </td> <td> U+0203A </td> <td> <span class="glyph" title="">›</span> </td> </tr><tr id="entity-Rscr"><td> <code title="">Rscr;</code> </td> <td> U+0211B </td> <td> <span class="glyph" title="">ℛ</span> </td> </tr><tr id="entity-rscr"><td> <code title="">rscr;</code> </td> <td> U+1D4C7 </td> <td> <span class="glyph" title="">𝓇</span> </td> </tr><tr id="entity-Rsh"><td> <code title="">Rsh;</code> </td> <td> U+021B1 </td> <td> <span class="glyph" title="">↱</span> </td> </tr><tr id="entity-rsh"><td> <code title="">rsh;</code> </td> <td> U+021B1 </td> <td> <span class="glyph" title="">↱</span> </td> </tr><tr id="entity-rsqb"><td> <code title="">rsqb;</code> </td> <td> U+0005D </td> <td> <span class="glyph" title="">]</span> </td> </tr><tr id="entity-rsquo"><td> <code title="">rsquo;</code> </td> <td> U+02019 </td> <td> <span class="glyph" title="">’</span> </td> </tr><tr id="entity-rsquor"><td> <code title="">rsquor;</code> </td> <td> U+02019 </td> <td> <span class="glyph" title="">’</span> </td> </tr><tr id="entity-rthree"><td> <code title="">rthree;</code> </td> <td> U+022CC </td> <td> <span class="glyph" title="">⋌</span> </td> </tr><tr id="entity-rtimes"><td> <code title="">rtimes;</code> </td> <td> U+022CA </td> <td> <span class="glyph" title="">⋊</span> </td> </tr><tr id="entity-rtri"><td> <code title="">rtri;</code> </td> <td> U+025B9 </td> <td> <span class="glyph" title="">▹</span> </td> </tr><tr id="entity-rtrie"><td> <code title="">rtrie;</code> </td> <td> U+022B5 </td> <td> <span class="glyph" title="">⊵</span> </td> </tr><tr id="entity-rtrif"><td> <code title="">rtrif;</code> </td> <td> U+025B8 </td> <td> <span class="glyph" title="">▸</span> </td> </tr><tr id="entity-rtriltri"><td> <code title="">rtriltri;</code> </td> <td> U+029CE </td> <td> <span class="glyph" title="">⧎</span> </td> </tr><tr id="entity-RuleDelayed"><td> <code title="">RuleDelayed;</code> </td> <td> U+029F4 </td> <td> <span class="glyph" title="">⧴</span> </td> </tr><tr id="entity-ruluhar"><td> <code title="">ruluhar;</code> </td> <td> U+02968 </td> <td> <span class="glyph" title="">⥨</span> </td> </tr><tr id="entity-rx"><td> <code title="">rx;</code> </td> <td> U+0211E </td> <td> <span class="glyph" title="">℞</span> </td> </tr><tr id="entity-Sacute"><td> <code title="">Sacute;</code> </td> <td> U+0015A </td> <td> <span class="glyph" title="">Ś</span> </td> </tr><tr id="entity-sacute"><td> <code title="">sacute;</code> </td> <td> U+0015B </td> <td> <span class="glyph" title="">ś</span> </td> </tr><tr id="entity-sbquo"><td> <code title="">sbquo;</code> </td> <td> U+0201A </td> <td> <span class="glyph" title="">‚</span> </td> </tr><tr id="entity-Sc"><td> <code title="">Sc;</code> </td> <td> U+02ABC </td> <td> <span class="glyph" title="">⪼</span> </td> </tr><tr id="entity-sc"><td> <code title="">sc;</code> </td> <td> U+0227B </td> <td> <span class="glyph" title="">≻</span> </td> </tr><tr id="entity-scap"><td> <code title="">scap;</code> </td> <td> U+02AB8 </td> <td> <span class="glyph" title="">⪸</span> </td> </tr><tr id="entity-Scaron"><td> <code title="">Scaron;</code> </td> <td> U+00160 </td> <td> <span class="glyph" title="">Š</span> </td> </tr><tr id="entity-scaron"><td> <code title="">scaron;</code> </td> <td> U+00161 </td> <td> <span class="glyph" title="">š</span> </td> </tr><tr id="entity-sccue"><td> <code title="">sccue;</code> </td> <td> U+0227D </td> <td> <span class="glyph" title="">≽</span> </td> </tr><tr id="entity-scE"><td> <code title="">scE;</code> </td> <td> U+02AB4 </td> <td> <span class="glyph" title="">⪴</span> </td> </tr><tr id="entity-sce"><td> <code title="">sce;</code> </td> <td> U+02AB0 </td> <td> <span class="glyph" title="">⪰</span> </td> </tr><tr id="entity-Scedil"><td> <code title="">Scedil;</code> </td> <td> U+0015E </td> <td> <span class="glyph" title="">Ş</span> </td> </tr><tr id="entity-scedil"><td> <code title="">scedil;</code> </td> <td> U+0015F </td> <td> <span class="glyph" title="">ş</span> </td> </tr><tr id="entity-Scirc"><td> <code title="">Scirc;</code> </td> <td> U+0015C </td> <td> <span class="glyph" title="">Ŝ</span> </td> </tr><tr id="entity-scirc"><td> <code title="">scirc;</code> </td> <td> U+0015D </td> <td> <span class="glyph" title="">ŝ</span> </td> </tr><tr id="entity-scnap"><td> <code title="">scnap;</code> </td> <td> U+02ABA </td> <td> <span class="glyph" title="">⪺</span> </td> </tr><tr id="entity-scnE"><td> <code title="">scnE;</code> </td> <td> U+02AB6 </td> <td> <span class="glyph" title="">⪶</span> </td> </tr><tr id="entity-scnsim"><td> <code title="">scnsim;</code> </td> <td> U+022E9 </td> <td> <span class="glyph" title="">⋩</span> </td> </tr><tr id="entity-scpolint"><td> <code title="">scpolint;</code> </td> <td> U+02A13 </td> <td> <span class="glyph" title="">⨓</span> </td> </tr><tr id="entity-scsim"><td> <code title="">scsim;</code> </td> <td> U+0227F </td> <td> <span class="glyph" title="">≿</span> </td> </tr><tr id="entity-Scy"><td> <code title="">Scy;</code> </td> <td> U+00421 </td> <td> <span class="glyph" title="">С</span> </td> </tr><tr id="entity-scy"><td> <code title="">scy;</code> </td> <td> U+00441 </td> <td> <span class="glyph" title="">с</span> </td> </tr><tr id="entity-sdot"><td> <code title="">sdot;</code> </td> <td> U+022C5 </td> <td> <span class="glyph" title="">⋅</span> </td> </tr><tr id="entity-sdotb"><td> <code title="">sdotb;</code> </td> <td> U+022A1 </td> <td> <span class="glyph" title="">⊡</span> </td> </tr><tr id="entity-sdote"><td> <code title="">sdote;</code> </td> <td> U+02A66 </td> <td> <span class="glyph" title="">⩦</span> </td> </tr><tr id="entity-searhk"><td> <code title="">searhk;</code> </td> <td> U+02925 </td> <td> <span class="glyph" title="">⤥</span> </td> </tr><tr id="entity-seArr"><td> <code title="">seArr;</code> </td> <td> U+021D8 </td> <td> <span class="glyph" title="">⇘</span> </td> </tr><tr id="entity-searr"><td> <code title="">searr;</code> </td> <td> U+02198 </td> <td> <span class="glyph" title="">↘</span> </td> </tr><tr id="entity-searrow"><td> <code title="">searrow;</code> </td> <td> U+02198 </td> <td> <span class="glyph" title="">↘</span> </td> </tr><tr id="entity-sect"><td> <code title="">sect;</code> </td> <td> U+000A7 </td> <td> <span class="glyph" title="">§</span> </td> </tr><tr class="impl" id="entity-sect-legacy"><td> <code title="">sect</code> </td> <td> U+000A7 </td> <td> <span title="">§</span> </td> </tr><tr id="entity-semi"><td> <code title="">semi;</code> </td> <td> U+0003B </td> <td> <span class="glyph" title="">;</span> </td> </tr><tr id="entity-seswar"><td> <code title="">seswar;</code> </td> <td> U+02929 </td> <td> <span class="glyph" title="">⤩</span> </td> </tr><tr id="entity-setminus"><td> <code title="">setminus;</code> </td> <td> U+02216 </td> <td> <span class="glyph" title="">∖</span> </td> </tr><tr id="entity-setmn"><td> <code title="">setmn;</code> </td> <td> U+02216 </td> <td> <span class="glyph" title="">∖</span> </td> </tr><tr id="entity-sext"><td> <code title="">sext;</code> </td> <td> U+02736 </td> <td> <span class="glyph" title="">✶</span> </td> </tr><tr id="entity-Sfr"><td> <code title="">Sfr;</code> </td> <td> U+1D516 </td> <td> <span class="glyph" title="">𝔖</span> </td> </tr><tr id="entity-sfr"><td> <code title="">sfr;</code> </td> <td> U+1D530 </td> <td> <span class="glyph" title="">𝔰</span> </td> </tr><tr id="entity-sfrown"><td> <code title="">sfrown;</code> </td> <td> U+02322 </td> <td> <span class="glyph" title="">⌢</span> </td> </tr><tr id="entity-sharp"><td> <code title="">sharp;</code> </td> <td> U+0266F </td> <td> <span class="glyph" title="">♯</span> </td> </tr><tr id="entity-SHCHcy"><td> <code title="">SHCHcy;</code> </td> <td> U+00429 </td> <td> <span class="glyph" title="">Щ</span> </td> </tr><tr id="entity-shchcy"><td> <code title="">shchcy;</code> </td> <td> U+00449 </td> <td> <span class="glyph" title="">щ</span> </td> </tr><tr id="entity-SHcy"><td> <code title="">SHcy;</code> </td> <td> U+00428 </td> <td> <span class="glyph" title="">Ш</span> </td> </tr><tr id="entity-shcy"><td> <code title="">shcy;</code> </td> <td> U+00448 </td> <td> <span class="glyph" title="">ш</span> </td> </tr><tr id="entity-ShortDownArrow"><td> <code title="">ShortDownArrow;</code> </td> <td> U+02193 </td> <td> <span class="glyph" title="">↓</span> </td> </tr><tr id="entity-ShortLeftArrow"><td> <code title="">ShortLeftArrow;</code> </td> <td> U+02190 </td> <td> <span class="glyph" title="">←</span> </td> </tr><tr id="entity-shortmid"><td> <code title="">shortmid;</code> </td> <td> U+02223 </td> <td> <span class="glyph" title="">∣</span> </td> </tr><tr id="entity-shortparallel"><td> <code title="">shortparallel;</code> </td> <td> U+02225 </td> <td> <span class="glyph" title="">∥</span> </td> </tr><tr id="entity-ShortRightArrow"><td> <code title="">ShortRightArrow;</code> </td> <td> U+02192 </td> <td> <span class="glyph" title="">→</span> </td> </tr><tr id="entity-ShortUpArrow"><td> <code title="">ShortUpArrow;</code> </td> <td> U+02191 </td> <td> <span class="glyph" title="">↑</span> </td> </tr><tr id="entity-shy"><td> <code title="">shy;</code> </td> <td> U+000AD </td> <td> <span class="glyph" title="">­</span> </td> </tr><tr class="impl" id="entity-shy-legacy"><td> <code title="">shy</code> </td> <td> U+000AD </td> <td> <span title="">­</span> </td> </tr><tr id="entity-Sigma"><td> <code title="">Sigma;</code> </td> <td> U+003A3 </td> <td> <span class="glyph" title="">Σ</span> </td> </tr><tr id="entity-sigma"><td> <code title="">sigma;</code> </td> <td> U+003C3 </td> <td> <span class="glyph" title="">σ</span> </td> </tr><tr id="entity-sigmaf"><td> <code title="">sigmaf;</code> </td> <td> U+003C2 </td> <td> <span class="glyph" title="">ς</span> </td> </tr><tr id="entity-sigmav"><td> <code title="">sigmav;</code> </td> <td> U+003C2 </td> <td> <span class="glyph" title="">ς</span> </td> </tr><tr id="entity-sim"><td> <code title="">sim;</code> </td> <td> U+0223C </td> <td> <span class="glyph" title="">∼</span> </td> </tr><tr id="entity-simdot"><td> <code title="">simdot;</code> </td> <td> U+02A6A </td> <td> <span class="glyph" title="">⩪</span> </td> </tr><tr id="entity-sime"><td> <code title="">sime;</code> </td> <td> U+02243 </td> <td> <span class="glyph" title="">≃</span> </td> </tr><tr id="entity-simeq"><td> <code title="">simeq;</code> </td> <td> U+02243 </td> <td> <span class="glyph" title="">≃</span> </td> </tr><tr id="entity-simg"><td> <code title="">simg;</code> </td> <td> U+02A9E </td> <td> <span class="glyph" title="">⪞</span> </td> </tr><tr id="entity-simgE"><td> <code title="">simgE;</code> </td> <td> U+02AA0 </td> <td> <span class="glyph" title="">⪠</span> </td> </tr><tr id="entity-siml"><td> <code title="">siml;</code> </td> <td> U+02A9D </td> <td> <span class="glyph" title="">⪝</span> </td> </tr><tr id="entity-simlE"><td> <code title="">simlE;</code> </td> <td> U+02A9F </td> <td> <span class="glyph" title="">⪟</span> </td> </tr><tr id="entity-simne"><td> <code title="">simne;</code> </td> <td> U+02246 </td> <td> <span class="glyph" title="">≆</span> </td> </tr><tr id="entity-simplus"><td> <code title="">simplus;</code> </td> <td> U+02A24 </td> <td> <span class="glyph" title="">⨤</span> </td> </tr><tr id="entity-simrarr"><td> <code title="">simrarr;</code> </td> <td> U+02972 </td> <td> <span class="glyph" title="">⥲</span> </td> </tr><tr id="entity-slarr"><td> <code title="">slarr;</code> </td> <td> U+02190 </td> <td> <span class="glyph" title="">←</span> </td> </tr><tr id="entity-SmallCircle"><td> <code title="">SmallCircle;</code> </td> <td> U+02218 </td> <td> <span class="glyph" title="">∘</span> </td> </tr><tr id="entity-smallsetminus"><td> <code title="">smallsetminus;</code> </td> <td> U+02216 </td> <td> <span class="glyph" title="">∖</span> </td> </tr><tr id="entity-smashp"><td> <code title="">smashp;</code> </td> <td> U+02A33 </td> <td> <span class="glyph" title="">⨳</span> </td> </tr><tr id="entity-smeparsl"><td> <code title="">smeparsl;</code> </td> <td> U+029E4 </td> <td> <span class="glyph" title="">⧤</span> </td> </tr><tr id="entity-smid"><td> <code title="">smid;</code> </td> <td> U+02223 </td> <td> <span class="glyph" title="">∣</span> </td> </tr><tr id="entity-smile"><td> <code title="">smile;</code> </td> <td> U+02323 </td> <td> <span class="glyph" title="">⌣</span> </td> </tr><tr id="entity-smt"><td> <code title="">smt;</code> </td> <td> U+02AAA </td> <td> <span class="glyph" title="">⪪</span> </td> </tr><tr id="entity-smte"><td> <code title="">smte;</code> </td> <td> U+02AAC </td> <td> <span class="glyph" title="">⪬</span> </td> </tr><tr id="entity-smtes"><td> <code title="">smtes;</code> </td> <td> U+02AAC U+0FE00 </td> <td> <span class="glyph compound" title="">⪬︀</span> </td> </tr><tr id="entity-SOFTcy"><td> <code title="">SOFTcy;</code> </td> <td> U+0042C </td> <td> <span class="glyph" title="">Ь</span> </td> </tr><tr id="entity-softcy"><td> <code title="">softcy;</code> </td> <td> U+0044C </td> <td> <span class="glyph" title="">ь</span> </td> </tr><tr id="entity-sol"><td> <code title="">sol;</code> </td> <td> U+0002F </td> <td> <span class="glyph" title="">/</span> </td> </tr><tr id="entity-solb"><td> <code title="">solb;</code> </td> <td> U+029C4 </td> <td> <span class="glyph" title="">⧄</span> </td> </tr><tr id="entity-solbar"><td> <code title="">solbar;</code> </td> <td> U+0233F </td> <td> <span class="glyph" title="">⌿</span> </td> </tr><tr id="entity-Sopf"><td> <code title="">Sopf;</code> </td> <td> U+1D54A </td> <td> <span class="glyph" title="">𝕊</span> </td> </tr><tr id="entity-sopf"><td> <code title="">sopf;</code> </td> <td> U+1D564 </td> <td> <span class="glyph" title="">𝕤</span> </td> </tr><tr id="entity-spades"><td> <code title="">spades;</code> </td> <td> U+02660 </td> <td> <span class="glyph" title="">♠</span> </td> </tr><tr id="entity-spadesuit"><td> <code title="">spadesuit;</code> </td> <td> U+02660 </td> <td> <span class="glyph" title="">♠</span> </td> </tr><tr id="entity-spar"><td> <code title="">spar;</code> </td> <td> U+02225 </td> <td> <span class="glyph" title="">∥</span> </td> </tr><tr id="entity-sqcap"><td> <code title="">sqcap;</code> </td> <td> U+02293 </td> <td> <span class="glyph" title="">⊓</span> </td> </tr><tr id="entity-sqcaps"><td> <code title="">sqcaps;</code> </td> <td> U+02293 U+0FE00 </td> <td> <span class="glyph compound" title="">⊓︀</span> </td> </tr><tr id="entity-sqcup"><td> <code title="">sqcup;</code> </td> <td> U+02294 </td> <td> <span class="glyph" title="">⊔</span> </td> </tr><tr id="entity-sqcups"><td> <code title="">sqcups;</code> </td> <td> U+02294 U+0FE00 </td> <td> <span class="glyph compound" title="">⊔︀</span> </td> </tr><tr id="entity-Sqrt"><td> <code title="">Sqrt;</code> </td> <td> U+0221A </td> <td> <span class="glyph" title="">√</span> </td> </tr><tr id="entity-sqsub"><td> <code title="">sqsub;</code> </td> <td> U+0228F </td> <td> <span class="glyph" title="">⊏</span> </td> </tr><tr id="entity-sqsube"><td> <code title="">sqsube;</code> </td> <td> U+02291 </td> <td> <span class="glyph" title="">⊑</span> </td> </tr><tr id="entity-sqsubset"><td> <code title="">sqsubset;</code> </td> <td> U+0228F </td> <td> <span class="glyph" title="">⊏</span> </td> </tr><tr id="entity-sqsubseteq"><td> <code title="">sqsubseteq;</code> </td> <td> U+02291 </td> <td> <span class="glyph" title="">⊑</span> </td> </tr><tr id="entity-sqsup"><td> <code title="">sqsup;</code> </td> <td> U+02290 </td> <td> <span class="glyph" title="">⊐</span> </td> </tr><tr id="entity-sqsupe"><td> <code title="">sqsupe;</code> </td> <td> U+02292 </td> <td> <span class="glyph" title="">⊒</span> </td> </tr><tr id="entity-sqsupset"><td> <code title="">sqsupset;</code> </td> <td> U+02290 </td> <td> <span class="glyph" title="">⊐</span> </td> </tr><tr id="entity-sqsupseteq"><td> <code title="">sqsupseteq;</code> </td> <td> U+02292 </td> <td> <span class="glyph" title="">⊒</span> </td> </tr><tr id="entity-squ"><td> <code title="">squ;</code> </td> <td> U+025A1 </td> <td> <span class="glyph" title="">□</span> </td> </tr><tr id="entity-Square"><td> <code title="">Square;</code> </td> <td> U+025A1 </td> <td> <span class="glyph" title="">□</span> </td> </tr><tr id="entity-square"><td> <code title="">square;</code> </td> <td> U+025A1 </td> <td> <span class="glyph" title="">□</span> </td> </tr><tr id="entity-SquareIntersection"><td> <code title="">SquareIntersection;</code> </td> <td> U+02293 </td> <td> <span class="glyph" title="">⊓</span> </td> </tr><tr id="entity-SquareSubset"><td> <code title="">SquareSubset;</code> </td> <td> U+0228F </td> <td> <span class="glyph" title="">⊏</span> </td> </tr><tr id="entity-SquareSubsetEqual"><td> <code title="">SquareSubsetEqual;</code> </td> <td> U+02291 </td> <td> <span class="glyph" title="">⊑</span> </td> </tr><tr id="entity-SquareSuperset"><td> <code title="">SquareSuperset;</code> </td> <td> U+02290 </td> <td> <span class="glyph" title="">⊐</span> </td> </tr><tr id="entity-SquareSupersetEqual"><td> <code title="">SquareSupersetEqual;</code> </td> <td> U+02292 </td> <td> <span class="glyph" title="">⊒</span> </td> </tr><tr id="entity-SquareUnion"><td> <code title="">SquareUnion;</code> </td> <td> U+02294 </td> <td> <span class="glyph" title="">⊔</span> </td> </tr><tr id="entity-squarf"><td> <code title="">squarf;</code> </td> <td> U+025AA </td> <td> <span class="glyph" title="">▪</span> </td> </tr><tr id="entity-squf"><td> <code title="">squf;</code> </td> <td> U+025AA </td> <td> <span class="glyph" title="">▪</span> </td> </tr><tr id="entity-srarr"><td> <code title="">srarr;</code> </td> <td> U+02192 </td> <td> <span class="glyph" title="">→</span> </td> </tr><tr id="entity-Sscr"><td> <code title="">Sscr;</code> </td> <td> U+1D4AE </td> <td> <span class="glyph" title="">𝒮</span> </td> </tr><tr id="entity-sscr"><td> <code title="">sscr;</code> </td> <td> U+1D4C8 </td> <td> <span class="glyph" title="">𝓈</span> </td> </tr><tr id="entity-ssetmn"><td> <code title="">ssetmn;</code> </td> <td> U+02216 </td> <td> <span class="glyph" title="">∖</span> </td> </tr><tr id="entity-ssmile"><td> <code title="">ssmile;</code> </td> <td> U+02323 </td> <td> <span class="glyph" title="">⌣</span> </td> </tr><tr id="entity-sstarf"><td> <code title="">sstarf;</code> </td> <td> U+022C6 </td> <td> <span class="glyph" title="">⋆</span> </td> </tr><tr id="entity-Star"><td> <code title="">Star;</code> </td> <td> U+022C6 </td> <td> <span class="glyph" title="">⋆</span> </td> </tr><tr id="entity-star"><td> <code title="">star;</code> </td> <td> U+02606 </td> <td> <span class="glyph" title="">☆</span> </td> </tr><tr id="entity-starf"><td> <code title="">starf;</code> </td> <td> U+02605 </td> <td> <span class="glyph" title="">★</span> </td> </tr><tr id="entity-straightepsilon"><td> <code title="">straightepsilon;</code> </td> <td> U+003F5 </td> <td> <span class="glyph" title="">ϵ</span> </td> </tr><tr id="entity-straightphi"><td> <code title="">straightphi;</code> </td> <td> U+003D5 </td> <td> <span class="glyph" title="">ϕ</span> </td> </tr><tr id="entity-strns"><td> <code title="">strns;</code> </td> <td> U+000AF </td> <td> <span class="glyph" title="">¯</span> </td> </tr><tr id="entity-Sub"><td> <code title="">Sub;</code> </td> <td> U+022D0 </td> <td> <span class="glyph" title="">⋐</span> </td> </tr><tr id="entity-sub"><td> <code title="">sub;</code> </td> <td> U+02282 </td> <td> <span class="glyph" title="">⊂</span> </td> </tr><tr id="entity-subdot"><td> <code title="">subdot;</code> </td> <td> U+02ABD </td> <td> <span class="glyph" title="">⪽</span> </td> </tr><tr id="entity-subE"><td> <code title="">subE;</code> </td> <td> U+02AC5 </td> <td> <span class="glyph" title="">⫅</span> </td> </tr><tr id="entity-sube"><td> <code title="">sube;</code> </td> <td> U+02286 </td> <td> <span class="glyph" title="">⊆</span> </td> </tr><tr id="entity-subedot"><td> <code title="">subedot;</code> </td> <td> U+02AC3 </td> <td> <span class="glyph" title="">⫃</span> </td> </tr><tr id="entity-submult"><td> <code title="">submult;</code> </td> <td> U+02AC1 </td> <td> <span class="glyph" title="">⫁</span> </td> </tr><tr id="entity-subnE"><td> <code title="">subnE;</code> </td> <td> U+02ACB </td> <td> <span class="glyph" title="">⫋</span> </td> </tr><tr id="entity-subne"><td> <code title="">subne;</code> </td> <td> U+0228A </td> <td> <span class="glyph" title="">⊊</span> </td> </tr><tr id="entity-subplus"><td> <code title="">subplus;</code> </td> <td> U+02ABF </td> <td> <span class="glyph" title="">⪿</span> </td> </tr><tr id="entity-subrarr"><td> <code title="">subrarr;</code> </td> <td> U+02979 </td> <td> <span class="glyph" title="">⥹</span> </td> </tr><tr id="entity-Subset"><td> <code title="">Subset;</code> </td> <td> U+022D0 </td> <td> <span class="glyph" title="">⋐</span> </td> </tr><tr id="entity-subset"><td> <code title="">subset;</code> </td> <td> U+02282 </td> <td> <span class="glyph" title="">⊂</span> </td> </tr><tr id="entity-subseteq"><td> <code title="">subseteq;</code> </td> <td> U+02286 </td> <td> <span class="glyph" title="">⊆</span> </td> </tr><tr id="entity-subseteqq"><td> <code title="">subseteqq;</code> </td> <td> U+02AC5 </td> <td> <span class="glyph" title="">⫅</span> </td> </tr><tr id="entity-SubsetEqual"><td> <code title="">SubsetEqual;</code> </td> <td> U+02286 </td> <td> <span class="glyph" title="">⊆</span> </td> </tr><tr id="entity-subsetneq"><td> <code title="">subsetneq;</code> </td> <td> U+0228A </td> <td> <span class="glyph" title="">⊊</span> </td> </tr><tr id="entity-subsetneqq"><td> <code title="">subsetneqq;</code> </td> <td> U+02ACB </td> <td> <span class="glyph" title="">⫋</span> </td> </tr><tr id="entity-subsim"><td> <code title="">subsim;</code> </td> <td> U+02AC7 </td> <td> <span class="glyph" title="">⫇</span> </td> </tr><tr id="entity-subsub"><td> <code title="">subsub;</code> </td> <td> U+02AD5 </td> <td> <span class="glyph" title="">⫕</span> </td> </tr><tr id="entity-subsup"><td> <code title="">subsup;</code> </td> <td> U+02AD3 </td> <td> <span class="glyph" title="">⫓</span> </td> </tr><tr id="entity-succ"><td> <code title="">succ;</code> </td> <td> U+0227B </td> <td> <span class="glyph" title="">≻</span> </td> </tr><tr id="entity-succapprox"><td> <code title="">succapprox;</code> </td> <td> U+02AB8 </td> <td> <span class="glyph" title="">⪸</span> </td> </tr><tr id="entity-succcurlyeq"><td> <code title="">succcurlyeq;</code> </td> <td> U+0227D </td> <td> <span class="glyph" title="">≽</span> </td> </tr><tr id="entity-Succeeds"><td> <code title="">Succeeds;</code> </td> <td> U+0227B </td> <td> <span class="glyph" title="">≻</span> </td> </tr><tr id="entity-SucceedsEqual"><td> <code title="">SucceedsEqual;</code> </td> <td> U+02AB0 </td> <td> <span class="glyph" title="">⪰</span> </td> </tr><tr id="entity-SucceedsSlantEqual"><td> <code title="">SucceedsSlantEqual;</code> </td> <td> U+0227D </td> <td> <span class="glyph" title="">≽</span> </td> </tr><tr id="entity-SucceedsTilde"><td> <code title="">SucceedsTilde;</code> </td> <td> U+0227F </td> <td> <span class="glyph" title="">≿</span> </td> </tr><tr id="entity-succeq"><td> <code title="">succeq;</code> </td> <td> U+02AB0 </td> <td> <span class="glyph" title="">⪰</span> </td> </tr><tr id="entity-succnapprox"><td> <code title="">succnapprox;</code> </td> <td> U+02ABA </td> <td> <span class="glyph" title="">⪺</span> </td> </tr><tr id="entity-succneqq"><td> <code title="">succneqq;</code> </td> <td> U+02AB6 </td> <td> <span class="glyph" title="">⪶</span> </td> </tr><tr id="entity-succnsim"><td> <code title="">succnsim;</code> </td> <td> U+022E9 </td> <td> <span class="glyph" title="">⋩</span> </td> </tr><tr id="entity-succsim"><td> <code title="">succsim;</code> </td> <td> U+0227F </td> <td> <span class="glyph" title="">≿</span> </td> </tr><tr id="entity-SuchThat"><td> <code title="">SuchThat;</code> </td> <td> U+0220B </td> <td> <span class="glyph" title="">∋</span> </td> </tr><tr id="entity-Sum"><td> <code title="">Sum;</code> </td> <td> U+02211 </td> <td> <span class="glyph" title="">∑</span> </td> </tr><tr id="entity-sum"><td> <code title="">sum;</code> </td> <td> U+02211 </td> <td> <span class="glyph" title="">∑</span> </td> </tr><tr id="entity-sung"><td> <code title="">sung;</code> </td> <td> U+0266A </td> <td> <span class="glyph" title="">♪</span> </td> </tr><tr id="entity-Sup"><td> <code title="">Sup;</code> </td> <td> U+022D1 </td> <td> <span class="glyph" title="">⋑</span> </td> </tr><tr id="entity-sup"><td> <code title="">sup;</code> </td> <td> U+02283 </td> <td> <span class="glyph" title="">⊃</span> </td> </tr><tr id="entity-sup1"><td> <code title="">sup1;</code> </td> <td> U+000B9 </td> <td> <span class="glyph" title="">¹</span> </td> </tr><tr class="impl" id="entity-sup1-legacy"><td> <code title="">sup1</code> </td> <td> U+000B9 </td> <td> <span title="">¹</span> </td> </tr><tr id="entity-sup2"><td> <code title="">sup2;</code> </td> <td> U+000B2 </td> <td> <span class="glyph" title="">²</span> </td> </tr><tr class="impl" id="entity-sup2-legacy"><td> <code title="">sup2</code> </td> <td> U+000B2 </td> <td> <span title="">²</span> </td> </tr><tr id="entity-sup3"><td> <code title="">sup3;</code> </td> <td> U+000B3 </td> <td> <span class="glyph" title="">³</span> </td> </tr><tr class="impl" id="entity-sup3-legacy"><td> <code title="">sup3</code> </td> <td> U+000B3 </td> <td> <span title="">³</span> </td> </tr><tr id="entity-supdot"><td> <code title="">supdot;</code> </td> <td> U+02ABE </td> <td> <span class="glyph" title="">⪾</span> </td> </tr><tr id="entity-supdsub"><td> <code title="">supdsub;</code> </td> <td> U+02AD8 </td> <td> <span class="glyph" title="">⫘</span> </td> </tr><tr id="entity-supE"><td> <code title="">supE;</code> </td> <td> U+02AC6 </td> <td> <span class="glyph" title="">⫆</span> </td> </tr><tr id="entity-supe"><td> <code title="">supe;</code> </td> <td> U+02287 </td> <td> <span class="glyph" title="">⊇</span> </td> </tr><tr id="entity-supedot"><td> <code title="">supedot;</code> </td> <td> U+02AC4 </td> <td> <span class="glyph" title="">⫄</span> </td> </tr><tr id="entity-Superset"><td> <code title="">Superset;</code> </td> <td> U+02283 </td> <td> <span class="glyph" title="">⊃</span> </td> </tr><tr id="entity-SupersetEqual"><td> <code title="">SupersetEqual;</code> </td> <td> U+02287 </td> <td> <span class="glyph" title="">⊇</span> </td> </tr><tr id="entity-suphsol"><td> <code title="">suphsol;</code> </td> <td> U+027C9 </td> <td> <span class="glyph" title="">⟉</span> </td> </tr><tr id="entity-suphsub"><td> <code title="">suphsub;</code> </td> <td> U+02AD7 </td> <td> <span class="glyph" title="">⫗</span> </td> </tr><tr id="entity-suplarr"><td> <code title="">suplarr;</code> </td> <td> U+0297B </td> <td> <span class="glyph" title="">⥻</span> </td> </tr><tr id="entity-supmult"><td> <code title="">supmult;</code> </td> <td> U+02AC2 </td> <td> <span class="glyph" title="">⫂</span> </td> </tr><tr id="entity-supnE"><td> <code title="">supnE;</code> </td> <td> U+02ACC </td> <td> <span class="glyph" title="">⫌</span> </td> </tr><tr id="entity-supne"><td> <code title="">supne;</code> </td> <td> U+0228B </td> <td> <span class="glyph" title="">⊋</span> </td> </tr><tr id="entity-supplus"><td> <code title="">supplus;</code> </td> <td> U+02AC0 </td> <td> <span class="glyph" title="">⫀</span> </td> </tr><tr id="entity-Supset"><td> <code title="">Supset;</code> </td> <td> U+022D1 </td> <td> <span class="glyph" title="">⋑</span> </td> </tr><tr id="entity-supset"><td> <code title="">supset;</code> </td> <td> U+02283 </td> <td> <span class="glyph" title="">⊃</span> </td> </tr><tr id="entity-supseteq"><td> <code title="">supseteq;</code> </td> <td> U+02287 </td> <td> <span class="glyph" title="">⊇</span> </td> </tr><tr id="entity-supseteqq"><td> <code title="">supseteqq;</code> </td> <td> U+02AC6 </td> <td> <span class="glyph" title="">⫆</span> </td> </tr><tr id="entity-supsetneq"><td> <code title="">supsetneq;</code> </td> <td> U+0228B </td> <td> <span class="glyph" title="">⊋</span> </td> </tr><tr id="entity-supsetneqq"><td> <code title="">supsetneqq;</code> </td> <td> U+02ACC </td> <td> <span class="glyph" title="">⫌</span> </td> </tr><tr id="entity-supsim"><td> <code title="">supsim;</code> </td> <td> U+02AC8 </td> <td> <span class="glyph" title="">⫈</span> </td> </tr><tr id="entity-supsub"><td> <code title="">supsub;</code> </td> <td> U+02AD4 </td> <td> <span class="glyph" title="">⫔</span> </td> </tr><tr id="entity-supsup"><td> <code title="">supsup;</code> </td> <td> U+02AD6 </td> <td> <span class="glyph" title="">⫖</span> </td> </tr><tr id="entity-swarhk"><td> <code title="">swarhk;</code> </td> <td> U+02926 </td> <td> <span class="glyph" title="">⤦</span> </td> </tr><tr id="entity-swArr"><td> <code title="">swArr;</code> </td> <td> U+021D9 </td> <td> <span class="glyph" title="">⇙</span> </td> </tr><tr id="entity-swarr"><td> <code title="">swarr;</code> </td> <td> U+02199 </td> <td> <span class="glyph" title="">↙</span> </td> </tr><tr id="entity-swarrow"><td> <code title="">swarrow;</code> </td> <td> U+02199 </td> <td> <span class="glyph" title="">↙</span> </td> </tr><tr id="entity-swnwar"><td> <code title="">swnwar;</code> </td> <td> U+0292A </td> <td> <span class="glyph" title="">⤪</span> </td> </tr><tr id="entity-szlig"><td> <code title="">szlig;</code> </td> <td> U+000DF </td> <td> <span class="glyph" title="">ß</span> </td> </tr><tr class="impl" id="entity-szlig-legacy"><td> <code title="">szlig</code> </td> <td> U+000DF </td> <td> <span title="">ß</span> </td> </tr><tr id="entity-Tab"><td> <code title="">Tab;</code> </td> <td> U+00009 </td> <td> <span class="glyph control" title="">␉</span> </td> </tr><tr id="entity-target"><td> <code title="">target;</code> </td> <td> U+02316 </td> <td> <span class="glyph" title="">⌖</span> </td> </tr><tr id="entity-Tau"><td> <code title="">Tau;</code> </td> <td> U+003A4 </td> <td> <span class="glyph" title="">Τ</span> </td> </tr><tr id="entity-tau"><td> <code title="">tau;</code> </td> <td> U+003C4 </td> <td> <span class="glyph" title="">τ</span> </td> </tr><tr id="entity-tbrk"><td> <code title="">tbrk;</code> </td> <td> U+023B4 </td> <td> <span class="glyph" title="">⎴</span> </td> </tr><tr id="entity-Tcaron"><td> <code title="">Tcaron;</code> </td> <td> U+00164 </td> <td> <span class="glyph" title="">Ť</span> </td> </tr><tr id="entity-tcaron"><td> <code title="">tcaron;</code> </td> <td> U+00165 </td> <td> <span class="glyph" title="">ť</span> </td> </tr><tr id="entity-Tcedil"><td> <code title="">Tcedil;</code> </td> <td> U+00162 </td> <td> <span class="glyph" title="">Ţ</span> </td> </tr><tr id="entity-tcedil"><td> <code title="">tcedil;</code> </td> <td> U+00163 </td> <td> <span class="glyph" title="">ţ</span> </td> </tr><tr id="entity-Tcy"><td> <code title="">Tcy;</code> </td> <td> U+00422 </td> <td> <span class="glyph" title="">Т</span> </td> </tr><tr id="entity-tcy"><td> <code title="">tcy;</code> </td> <td> U+00442 </td> <td> <span class="glyph" title="">т</span> </td> </tr><tr id="entity-tdot"><td> <code title="">tdot;</code> </td> <td> U+020DB </td> <td> <span class="glyph composition" title="">◌⃛</span> </td> </tr><tr id="entity-telrec"><td> <code title="">telrec;</code> </td> <td> U+02315 </td> <td> <span class="glyph" title="">⌕</span> </td> </tr><tr id="entity-Tfr"><td> <code title="">Tfr;</code> </td> <td> U+1D517 </td> <td> <span class="glyph" title="">𝔗</span> </td> </tr><tr id="entity-tfr"><td> <code title="">tfr;</code> </td> <td> U+1D531 </td> <td> <span class="glyph" title="">𝔱</span> </td> </tr><tr id="entity-there4"><td> <code title="">there4;</code> </td> <td> U+02234 </td> <td> <span class="glyph" title="">∴</span> </td> </tr><tr id="entity-Therefore"><td> <code title="">Therefore;</code> </td> <td> U+02234 </td> <td> <span class="glyph" title="">∴</span> </td> </tr><tr id="entity-therefore"><td> <code title="">therefore;</code> </td> <td> U+02234 </td> <td> <span class="glyph" title="">∴</span> </td> </tr><tr id="entity-Theta"><td> <code title="">Theta;</code> </td> <td> U+00398 </td> <td> <span class="glyph" title="">Θ</span> </td> </tr><tr id="entity-theta"><td> <code title="">theta;</code> </td> <td> U+003B8 </td> <td> <span class="glyph" title="">θ</span> </td> </tr><tr id="entity-thetasym"><td> <code title="">thetasym;</code> </td> <td> U+003D1 </td> <td> <span class="glyph" title="">ϑ</span> </td> </tr><tr id="entity-thetav"><td> <code title="">thetav;</code> </td> <td> U+003D1 </td> <td> <span class="glyph" title="">ϑ</span> </td> </tr><tr id="entity-thickapprox"><td> <code title="">thickapprox;</code> </td> <td> U+02248 </td> <td> <span class="glyph" title="">≈</span> </td> </tr><tr id="entity-thicksim"><td> <code title="">thicksim;</code> </td> <td> U+0223C </td> <td> <span class="glyph" title="">∼</span> </td> </tr><tr id="entity-ThickSpace"><td> <code title="">ThickSpace;</code> </td> <td> U+0205F U+0200A </td> <td> <span class="glyph compound" title="">  </span> </td> </tr><tr id="entity-thinsp"><td> <code title="">thinsp;</code> </td> <td> U+02009 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-ThinSpace"><td> <code title="">ThinSpace;</code> </td> <td> U+02009 </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-thkap"><td> <code title="">thkap;</code> </td> <td> U+02248 </td> <td> <span class="glyph" title="">≈</span> </td> </tr><tr id="entity-thksim"><td> <code title="">thksim;</code> </td> <td> U+0223C </td> <td> <span class="glyph" title="">∼</span> </td> </tr><tr id="entity-THORN"><td> <code title="">THORN;</code> </td> <td> U+000DE </td> <td> <span class="glyph" title="">Þ</span> </td> </tr><tr class="impl" id="entity-THORN-legacy"><td> <code title="">THORN</code> </td> <td> U+000DE </td> <td> <span title="">Þ</span> </td> </tr><tr id="entity-thorn"><td> <code title="">thorn;</code> </td> <td> U+000FE </td> <td> <span class="glyph" title="">þ</span> </td> </tr><tr class="impl" id="entity-thorn-legacy"><td> <code title="">thorn</code> </td> <td> U+000FE </td> <td> <span title="">þ</span> </td> </tr><tr id="entity-Tilde"><td> <code title="">Tilde;</code> </td> <td> U+0223C </td> <td> <span class="glyph" title="">∼</span> </td> </tr><tr id="entity-tilde"><td> <code title="">tilde;</code> </td> <td> U+002DC </td> <td> <span class="glyph" title="">˜</span> </td> </tr><tr id="entity-TildeEqual"><td> <code title="">TildeEqual;</code> </td> <td> U+02243 </td> <td> <span class="glyph" title="">≃</span> </td> </tr><tr id="entity-TildeFullEqual"><td> <code title="">TildeFullEqual;</code> </td> <td> U+02245 </td> <td> <span class="glyph" title="">≅</span> </td> </tr><tr id="entity-TildeTilde"><td> <code title="">TildeTilde;</code> </td> <td> U+02248 </td> <td> <span class="glyph" title="">≈</span> </td> </tr><tr id="entity-times"><td> <code title="">times;</code> </td> <td> U+000D7 </td> <td> <span class="glyph" title="">×</span> </td> </tr><tr class="impl" id="entity-times-legacy"><td> <code title="">times</code> </td> <td> U+000D7 </td> <td> <span title="">×</span> </td> </tr><tr id="entity-timesb"><td> <code title="">timesb;</code> </td> <td> U+022A0 </td> <td> <span class="glyph" title="">⊠</span> </td> </tr><tr id="entity-timesbar"><td> <code title="">timesbar;</code> </td> <td> U+02A31 </td> <td> <span class="glyph" title="">⨱</span> </td> </tr><tr id="entity-timesd"><td> <code title="">timesd;</code> </td> <td> U+02A30 </td> <td> <span class="glyph" title="">⨰</span> </td> </tr><tr id="entity-tint"><td> <code title="">tint;</code> </td> <td> U+0222D </td> <td> <span class="glyph" title="">∭</span> </td> </tr><tr id="entity-toea"><td> <code title="">toea;</code> </td> <td> U+02928 </td> <td> <span class="glyph" title="">⤨</span> </td> </tr><tr id="entity-top"><td> <code title="">top;</code> </td> <td> U+022A4 </td> <td> <span class="glyph" title="">⊤</span> </td> </tr><tr id="entity-topbot"><td> <code title="">topbot;</code> </td> <td> U+02336 </td> <td> <span class="glyph" title="">⌶</span> </td> </tr><tr id="entity-topcir"><td> <code title="">topcir;</code> </td> <td> U+02AF1 </td> <td> <span class="glyph" title="">⫱</span> </td> </tr><tr id="entity-Topf"><td> <code title="">Topf;</code> </td> <td> U+1D54B </td> <td> <span class="glyph" title="">𝕋</span> </td> </tr><tr id="entity-topf"><td> <code title="">topf;</code> </td> <td> U+1D565 </td> <td> <span class="glyph" title="">𝕥</span> </td> </tr><tr id="entity-topfork"><td> <code title="">topfork;</code> </td> <td> U+02ADA </td> <td> <span class="glyph" title="">⫚</span> </td> </tr><tr id="entity-tosa"><td> <code title="">tosa;</code> </td> <td> U+02929 </td> <td> <span class="glyph" title="">⤩</span> </td> </tr><tr id="entity-tprime"><td> <code title="">tprime;</code> </td> <td> U+02034 </td> <td> <span class="glyph" title="">‴</span> </td> </tr><tr id="entity-TRADE"><td> <code title="">TRADE;</code> </td> <td> U+02122 </td> <td> <span class="glyph" title="">™</span> </td> </tr><tr id="entity-trade"><td> <code title="">trade;</code> </td> <td> U+02122 </td> <td> <span class="glyph" title="">™</span> </td> </tr><tr id="entity-triangle"><td> <code title="">triangle;</code> </td> <td> U+025B5 </td> <td> <span class="glyph" title="">▵</span> </td> </tr><tr id="entity-triangledown"><td> <code title="">triangledown;</code> </td> <td> U+025BF </td> <td> <span class="glyph" title="">▿</span> </td> </tr><tr id="entity-triangleleft"><td> <code title="">triangleleft;</code> </td> <td> U+025C3 </td> <td> <span class="glyph" title="">◃</span> </td> </tr><tr id="entity-trianglelefteq"><td> <code title="">trianglelefteq;</code> </td> <td> U+022B4 </td> <td> <span class="glyph" title="">⊴</span> </td> </tr><tr id="entity-triangleq"><td> <code title="">triangleq;</code> </td> <td> U+0225C </td> <td> <span class="glyph" title="">≜</span> </td> </tr><tr id="entity-triangleright"><td> <code title="">triangleright;</code> </td> <td> U+025B9 </td> <td> <span class="glyph" title="">▹</span> </td> </tr><tr id="entity-trianglerighteq"><td> <code title="">trianglerighteq;</code> </td> <td> U+022B5 </td> <td> <span class="glyph" title="">⊵</span> </td> </tr><tr id="entity-tridot"><td> <code title="">tridot;</code> </td> <td> U+025EC </td> <td> <span class="glyph" title="">◬</span> </td> </tr><tr id="entity-trie"><td> <code title="">trie;</code> </td> <td> U+0225C </td> <td> <span class="glyph" title="">≜</span> </td> </tr><tr id="entity-triminus"><td> <code title="">triminus;</code> </td> <td> U+02A3A </td> <td> <span class="glyph" title="">⨺</span> </td> </tr><tr id="entity-TripleDot"><td> <code title="">TripleDot;</code> </td> <td> U+020DB </td> <td> <span class="glyph composition" title="">◌⃛</span> </td> </tr><tr id="entity-triplus"><td> <code title="">triplus;</code> </td> <td> U+02A39 </td> <td> <span class="glyph" title="">⨹</span> </td> </tr><tr id="entity-trisb"><td> <code title="">trisb;</code> </td> <td> U+029CD </td> <td> <span class="glyph" title="">⧍</span> </td> </tr><tr id="entity-tritime"><td> <code title="">tritime;</code> </td> <td> U+02A3B </td> <td> <span class="glyph" title="">⨻</span> </td> </tr><tr id="entity-trpezium"><td> <code title="">trpezium;</code> </td> <td> U+023E2 </td> <td> <span class="glyph" title="">⏢</span> </td> </tr><tr id="entity-Tscr"><td> <code title="">Tscr;</code> </td> <td> U+1D4AF </td> <td> <span class="glyph" title="">𝒯</span> </td> </tr><tr id="entity-tscr"><td> <code title="">tscr;</code> </td> <td> U+1D4C9 </td> <td> <span class="glyph" title="">𝓉</span> </td> </tr><tr id="entity-TScy"><td> <code title="">TScy;</code> </td> <td> U+00426 </td> <td> <span class="glyph" title="">Ц</span> </td> </tr><tr id="entity-tscy"><td> <code title="">tscy;</code> </td> <td> U+00446 </td> <td> <span class="glyph" title="">ц</span> </td> </tr><tr id="entity-TSHcy"><td> <code title="">TSHcy;</code> </td> <td> U+0040B </td> <td> <span class="glyph" title="">Ћ</span> </td> </tr><tr id="entity-tshcy"><td> <code title="">tshcy;</code> </td> <td> U+0045B </td> <td> <span class="glyph" title="">ћ</span> </td> </tr><tr id="entity-Tstrok"><td> <code title="">Tstrok;</code> </td> <td> U+00166 </td> <td> <span class="glyph" title="">Ŧ</span> </td> </tr><tr id="entity-tstrok"><td> <code title="">tstrok;</code> </td> <td> U+00167 </td> <td> <span class="glyph" title="">ŧ</span> </td> </tr><tr id="entity-twixt"><td> <code title="">twixt;</code> </td> <td> U+0226C </td> <td> <span class="glyph" title="">≬</span> </td> </tr><tr id="entity-twoheadleftarrow"><td> <code title="">twoheadleftarrow;</code> </td> <td> U+0219E </td> <td> <span class="glyph" title="">↞</span> </td> </tr><tr id="entity-twoheadrightarrow"><td> <code title="">twoheadrightarrow;</code> </td> <td> U+021A0 </td> <td> <span class="glyph" title="">↠</span> </td> </tr><tr id="entity-Uacute"><td> <code title="">Uacute;</code> </td> <td> U+000DA </td> <td> <span class="glyph" title="">Ú</span> </td> </tr><tr class="impl" id="entity-Uacute-legacy"><td> <code title="">Uacute</code> </td> <td> U+000DA </td> <td> <span title="">Ú</span> </td> </tr><tr id="entity-uacute"><td> <code title="">uacute;</code> </td> <td> U+000FA </td> <td> <span class="glyph" title="">ú</span> </td> </tr><tr class="impl" id="entity-uacute-legacy"><td> <code title="">uacute</code> </td> <td> U+000FA </td> <td> <span title="">ú</span> </td> </tr><tr id="entity-Uarr"><td> <code title="">Uarr;</code> </td> <td> U+0219F </td> <td> <span class="glyph" title="">↟</span> </td> </tr><tr id="entity-uArr"><td> <code title="">uArr;</code> </td> <td> U+021D1 </td> <td> <span class="glyph" title="">⇑</span> </td> </tr><tr id="entity-uarr"><td> <code title="">uarr;</code> </td> <td> U+02191 </td> <td> <span class="glyph" title="">↑</span> </td> </tr><tr id="entity-Uarrocir"><td> <code title="">Uarrocir;</code> </td> <td> U+02949 </td> <td> <span class="glyph" title="">⥉</span> </td> </tr><tr id="entity-Ubrcy"><td> <code title="">Ubrcy;</code> </td> <td> U+0040E </td> <td> <span class="glyph" title="">Ў</span> </td> </tr><tr id="entity-ubrcy"><td> <code title="">ubrcy;</code> </td> <td> U+0045E </td> <td> <span class="glyph" title="">ў</span> </td> </tr><tr id="entity-Ubreve"><td> <code title="">Ubreve;</code> </td> <td> U+0016C </td> <td> <span class="glyph" title="">Ŭ</span> </td> </tr><tr id="entity-ubreve"><td> <code title="">ubreve;</code> </td> <td> U+0016D </td> <td> <span class="glyph" title="">ŭ</span> </td> </tr><tr id="entity-Ucirc"><td> <code title="">Ucirc;</code> </td> <td> U+000DB </td> <td> <span class="glyph" title="">Û</span> </td> </tr><tr class="impl" id="entity-Ucirc-legacy"><td> <code title="">Ucirc</code> </td> <td> U+000DB </td> <td> <span title="">Û</span> </td> </tr><tr id="entity-ucirc"><td> <code title="">ucirc;</code> </td> <td> U+000FB </td> <td> <span class="glyph" title="">û</span> </td> </tr><tr class="impl" id="entity-ucirc-legacy"><td> <code title="">ucirc</code> </td> <td> U+000FB </td> <td> <span title="">û</span> </td> </tr><tr id="entity-Ucy"><td> <code title="">Ucy;</code> </td> <td> U+00423 </td> <td> <span class="glyph" title="">У</span> </td> </tr><tr id="entity-ucy"><td> <code title="">ucy;</code> </td> <td> U+00443 </td> <td> <span class="glyph" title="">у</span> </td> </tr><tr id="entity-udarr"><td> <code title="">udarr;</code> </td> <td> U+021C5 </td> <td> <span class="glyph" title="">⇅</span> </td> </tr><tr id="entity-Udblac"><td> <code title="">Udblac;</code> </td> <td> U+00170 </td> <td> <span class="glyph" title="">Ű</span> </td> </tr><tr id="entity-udblac"><td> <code title="">udblac;</code> </td> <td> U+00171 </td> <td> <span class="glyph" title="">ű</span> </td> </tr><tr id="entity-udhar"><td> <code title="">udhar;</code> </td> <td> U+0296E </td> <td> <span class="glyph" title="">⥮</span> </td> </tr><tr id="entity-ufisht"><td> <code title="">ufisht;</code> </td> <td> U+0297E </td> <td> <span class="glyph" title="">⥾</span> </td> </tr><tr id="entity-Ufr"><td> <code title="">Ufr;</code> </td> <td> U+1D518 </td> <td> <span class="glyph" title="">𝔘</span> </td> </tr><tr id="entity-ufr"><td> <code title="">ufr;</code> </td> <td> U+1D532 </td> <td> <span class="glyph" title="">𝔲</span> </td> </tr><tr id="entity-Ugrave"><td> <code title="">Ugrave;</code> </td> <td> U+000D9 </td> <td> <span class="glyph" title="">Ù</span> </td> </tr><tr class="impl" id="entity-Ugrave-legacy"><td> <code title="">Ugrave</code> </td> <td> U+000D9 </td> <td> <span title="">Ù</span> </td> </tr><tr id="entity-ugrave"><td> <code title="">ugrave;</code> </td> <td> U+000F9 </td> <td> <span class="glyph" title="">ù</span> </td> </tr><tr class="impl" id="entity-ugrave-legacy"><td> <code title="">ugrave</code> </td> <td> U+000F9 </td> <td> <span title="">ù</span> </td> </tr><tr id="entity-uHar"><td> <code title="">uHar;</code> </td> <td> U+02963 </td> <td> <span class="glyph" title="">⥣</span> </td> </tr><tr id="entity-uharl"><td> <code title="">uharl;</code> </td> <td> U+021BF </td> <td> <span class="glyph" title="">↿</span> </td> </tr><tr id="entity-uharr"><td> <code title="">uharr;</code> </td> <td> U+021BE </td> <td> <span class="glyph" title="">↾</span> </td> </tr><tr id="entity-uhblk"><td> <code title="">uhblk;</code> </td> <td> U+02580 </td> <td> <span class="glyph" title="">▀</span> </td> </tr><tr id="entity-ulcorn"><td> <code title="">ulcorn;</code> </td> <td> U+0231C </td> <td> <span class="glyph" title="">⌜</span> </td> </tr><tr id="entity-ulcorner"><td> <code title="">ulcorner;</code> </td> <td> U+0231C </td> <td> <span class="glyph" title="">⌜</span> </td> </tr><tr id="entity-ulcrop"><td> <code title="">ulcrop;</code> </td> <td> U+0230F </td> <td> <span class="glyph" title="">⌏</span> </td> </tr><tr id="entity-ultri"><td> <code title="">ultri;</code> </td> <td> U+025F8 </td> <td> <span class="glyph" title="">◸</span> </td> </tr><tr id="entity-Umacr"><td> <code title="">Umacr;</code> </td> <td> U+0016A </td> <td> <span class="glyph" title="">Ū</span> </td> </tr><tr id="entity-umacr"><td> <code title="">umacr;</code> </td> <td> U+0016B </td> <td> <span class="glyph" title="">ū</span> </td> </tr><tr id="entity-uml"><td> <code title="">uml;</code> </td> <td> U+000A8 </td> <td> <span class="glyph" title="">¨</span> </td> </tr><tr class="impl" id="entity-uml-legacy"><td> <code title="">uml</code> </td> <td> U+000A8 </td> <td> <span title="">¨</span> </td> </tr><tr id="entity-UnderBar"><td> <code title="">UnderBar;</code> </td> <td> U+0005F </td> <td> <span class="glyph" title="">_</span> </td> </tr><tr id="entity-UnderBrace"><td> <code title="">UnderBrace;</code> </td> <td> U+023DF </td> <td> <span class="glyph" title="">⏟</span> </td> </tr><tr id="entity-UnderBracket"><td> <code title="">UnderBracket;</code> </td> <td> U+023B5 </td> <td> <span class="glyph" title="">⎵</span> </td> </tr><tr id="entity-UnderParenthesis"><td> <code title="">UnderParenthesis;</code> </td> <td> U+023DD </td> <td> <span class="glyph" title="">⏝</span> </td> </tr><tr id="entity-Union"><td> <code title="">Union;</code> </td> <td> U+022C3 </td> <td> <span class="glyph" title="">⋃</span> </td> </tr><tr id="entity-UnionPlus"><td> <code title="">UnionPlus;</code> </td> <td> U+0228E </td> <td> <span class="glyph" title="">⊎</span> </td> </tr><tr id="entity-Uogon"><td> <code title="">Uogon;</code> </td> <td> U+00172 </td> <td> <span class="glyph" title="">Ų</span> </td> </tr><tr id="entity-uogon"><td> <code title="">uogon;</code> </td> <td> U+00173 </td> <td> <span class="glyph" title="">ų</span> </td> </tr><tr id="entity-Uopf"><td> <code title="">Uopf;</code> </td> <td> U+1D54C </td> <td> <span class="glyph" title="">𝕌</span> </td> </tr><tr id="entity-uopf"><td> <code title="">uopf;</code> </td> <td> U+1D566 </td> <td> <span class="glyph" title="">𝕦</span> </td> </tr><tr id="entity-UpArrow"><td> <code title="">UpArrow;</code> </td> <td> U+02191 </td> <td> <span class="glyph" title="">↑</span> </td> </tr><tr id="entity-Uparrow"><td> <code title="">Uparrow;</code> </td> <td> U+021D1 </td> <td> <span class="glyph" title="">⇑</span> </td> </tr><tr id="entity-uparrow"><td> <code title="">uparrow;</code> </td> <td> U+02191 </td> <td> <span class="glyph" title="">↑</span> </td> </tr><tr id="entity-UpArrowBar"><td> <code title="">UpArrowBar;</code> </td> <td> U+02912 </td> <td> <span class="glyph" title="">⤒</span> </td> </tr><tr id="entity-UpArrowDownArrow"><td> <code title="">UpArrowDownArrow;</code> </td> <td> U+021C5 </td> <td> <span class="glyph" title="">⇅</span> </td> </tr><tr id="entity-UpDownArrow"><td> <code title="">UpDownArrow;</code> </td> <td> U+02195 </td> <td> <span class="glyph" title="">↕</span> </td> </tr><tr id="entity-Updownarrow"><td> <code title="">Updownarrow;</code> </td> <td> U+021D5 </td> <td> <span class="glyph" title="">⇕</span> </td> </tr><tr id="entity-updownarrow"><td> <code title="">updownarrow;</code> </td> <td> U+02195 </td> <td> <span class="glyph" title="">↕</span> </td> </tr><tr id="entity-UpEquilibrium"><td> <code title="">UpEquilibrium;</code> </td> <td> U+0296E </td> <td> <span class="glyph" title="">⥮</span> </td> </tr><tr id="entity-upharpoonleft"><td> <code title="">upharpoonleft;</code> </td> <td> U+021BF </td> <td> <span class="glyph" title="">↿</span> </td> </tr><tr id="entity-upharpoonright"><td> <code title="">upharpoonright;</code> </td> <td> U+021BE </td> <td> <span class="glyph" title="">↾</span> </td> </tr><tr id="entity-uplus"><td> <code title="">uplus;</code> </td> <td> U+0228E </td> <td> <span class="glyph" title="">⊎</span> </td> </tr><tr id="entity-UpperLeftArrow"><td> <code title="">UpperLeftArrow;</code> </td> <td> U+02196 </td> <td> <span class="glyph" title="">↖</span> </td> </tr><tr id="entity-UpperRightArrow"><td> <code title="">UpperRightArrow;</code> </td> <td> U+02197 </td> <td> <span class="glyph" title="">↗</span> </td> </tr><tr id="entity-Upsi"><td> <code title="">Upsi;</code> </td> <td> U+003D2 </td> <td> <span class="glyph" title="">ϒ</span> </td> </tr><tr id="entity-upsi"><td> <code title="">upsi;</code> </td> <td> U+003C5 </td> <td> <span class="glyph" title="">υ</span> </td> </tr><tr id="entity-upsih"><td> <code title="">upsih;</code> </td> <td> U+003D2 </td> <td> <span class="glyph" title="">ϒ</span> </td> </tr><tr id="entity-Upsilon"><td> <code title="">Upsilon;</code> </td> <td> U+003A5 </td> <td> <span class="glyph" title="">Υ</span> </td> </tr><tr id="entity-upsilon"><td> <code title="">upsilon;</code> </td> <td> U+003C5 </td> <td> <span class="glyph" title="">υ</span> </td> </tr><tr id="entity-UpTee"><td> <code title="">UpTee;</code> </td> <td> U+022A5 </td> <td> <span class="glyph" title="">⊥</span> </td> </tr><tr id="entity-UpTeeArrow"><td> <code title="">UpTeeArrow;</code> </td> <td> U+021A5 </td> <td> <span class="glyph" title="">↥</span> </td> </tr><tr id="entity-upuparrows"><td> <code title="">upuparrows;</code> </td> <td> U+021C8 </td> <td> <span class="glyph" title="">⇈</span> </td> </tr><tr id="entity-urcorn"><td> <code title="">urcorn;</code> </td> <td> U+0231D </td> <td> <span class="glyph" title="">⌝</span> </td> </tr><tr id="entity-urcorner"><td> <code title="">urcorner;</code> </td> <td> U+0231D </td> <td> <span class="glyph" title="">⌝</span> </td> </tr><tr id="entity-urcrop"><td> <code title="">urcrop;</code> </td> <td> U+0230E </td> <td> <span class="glyph" title="">⌎</span> </td> </tr><tr id="entity-Uring"><td> <code title="">Uring;</code> </td> <td> U+0016E </td> <td> <span class="glyph" title="">Ů</span> </td> </tr><tr id="entity-uring"><td> <code title="">uring;</code> </td> <td> U+0016F </td> <td> <span class="glyph" title="">ů</span> </td> </tr><tr id="entity-urtri"><td> <code title="">urtri;</code> </td> <td> U+025F9 </td> <td> <span class="glyph" title="">◹</span> </td> </tr><tr id="entity-Uscr"><td> <code title="">Uscr;</code> </td> <td> U+1D4B0 </td> <td> <span class="glyph" title="">𝒰</span> </td> </tr><tr id="entity-uscr"><td> <code title="">uscr;</code> </td> <td> U+1D4CA </td> <td> <span class="glyph" title="">𝓊</span> </td> </tr><tr id="entity-utdot"><td> <code title="">utdot;</code> </td> <td> U+022F0 </td> <td> <span class="glyph" title="">⋰</span> </td> </tr><tr id="entity-Utilde"><td> <code title="">Utilde;</code> </td> <td> U+00168 </td> <td> <span class="glyph" title="">Ũ</span> </td> </tr><tr id="entity-utilde"><td> <code title="">utilde;</code> </td> <td> U+00169 </td> <td> <span class="glyph" title="">ũ</span> </td> </tr><tr id="entity-utri"><td> <code title="">utri;</code> </td> <td> U+025B5 </td> <td> <span class="glyph" title="">▵</span> </td> </tr><tr id="entity-utrif"><td> <code title="">utrif;</code> </td> <td> U+025B4 </td> <td> <span class="glyph" title="">▴</span> </td> </tr><tr id="entity-uuarr"><td> <code title="">uuarr;</code> </td> <td> U+021C8 </td> <td> <span class="glyph" title="">⇈</span> </td> </tr><tr id="entity-Uuml"><td> <code title="">Uuml;</code> </td> <td> U+000DC </td> <td> <span class="glyph" title="">Ü</span> </td> </tr><tr class="impl" id="entity-Uuml-legacy"><td> <code title="">Uuml</code> </td> <td> U+000DC </td> <td> <span title="">Ü</span> </td> </tr><tr id="entity-uuml"><td> <code title="">uuml;</code> </td> <td> U+000FC </td> <td> <span class="glyph" title="">ü</span> </td> </tr><tr class="impl" id="entity-uuml-legacy"><td> <code title="">uuml</code> </td> <td> U+000FC </td> <td> <span title="">ü</span> </td> </tr><tr id="entity-uwangle"><td> <code title="">uwangle;</code> </td> <td> U+029A7 </td> <td> <span class="glyph" title="">⦧</span> </td> </tr><tr id="entity-vangrt"><td> <code title="">vangrt;</code> </td> <td> U+0299C </td> <td> <span class="glyph" title="">⦜</span> </td> </tr><tr id="entity-varepsilon"><td> <code title="">varepsilon;</code> </td> <td> U+003F5 </td> <td> <span class="glyph" title="">ϵ</span> </td> </tr><tr id="entity-varkappa"><td> <code title="">varkappa;</code> </td> <td> U+003F0 </td> <td> <span class="glyph" title="">ϰ</span> </td> </tr><tr id="entity-varnothing"><td> <code title="">varnothing;</code> </td> <td> U+02205 </td> <td> <span class="glyph" title="">∅</span> </td> </tr><tr id="entity-varphi"><td> <code title="">varphi;</code> </td> <td> U+003D5 </td> <td> <span class="glyph" title="">ϕ</span> </td> </tr><tr id="entity-varpi"><td> <code title="">varpi;</code> </td> <td> U+003D6 </td> <td> <span class="glyph" title="">ϖ</span> </td> </tr><tr id="entity-varpropto"><td> <code title="">varpropto;</code> </td> <td> U+0221D </td> <td> <span class="glyph" title="">∝</span> </td> </tr><tr id="entity-vArr"><td> <code title="">vArr;</code> </td> <td> U+021D5 </td> <td> <span class="glyph" title="">⇕</span> </td> </tr><tr id="entity-varr"><td> <code title="">varr;</code> </td> <td> U+02195 </td> <td> <span class="glyph" title="">↕</span> </td> </tr><tr id="entity-varrho"><td> <code title="">varrho;</code> </td> <td> U+003F1 </td> <td> <span class="glyph" title="">ϱ</span> </td> </tr><tr id="entity-varsigma"><td> <code title="">varsigma;</code> </td> <td> U+003C2 </td> <td> <span class="glyph" title="">ς</span> </td> </tr><tr id="entity-varsubsetneq"><td> <code title="">varsubsetneq;</code> </td> <td> U+0228A U+0FE00 </td> <td> <span class="glyph compound" title="">⊊︀</span> </td> </tr><tr id="entity-varsubsetneqq"><td> <code title="">varsubsetneqq;</code> </td> <td> U+02ACB U+0FE00 </td> <td> <span class="glyph compound" title="">⫋︀</span> </td> </tr><tr id="entity-varsupsetneq"><td> <code title="">varsupsetneq;</code> </td> <td> U+0228B U+0FE00 </td> <td> <span class="glyph compound" title="">⊋︀</span> </td> </tr><tr id="entity-varsupsetneqq"><td> <code title="">varsupsetneqq;</code> </td> <td> U+02ACC U+0FE00 </td> <td> <span class="glyph compound" title="">⫌︀</span> </td> </tr><tr id="entity-vartheta"><td> <code title="">vartheta;</code> </td> <td> U+003D1 </td> <td> <span class="glyph" title="">ϑ</span> </td> </tr><tr id="entity-vartriangleleft"><td> <code title="">vartriangleleft;</code> </td> <td> U+022B2 </td> <td> <span class="glyph" title="">⊲</span> </td> </tr><tr id="entity-vartriangleright"><td> <code title="">vartriangleright;</code> </td> <td> U+022B3 </td> <td> <span class="glyph" title="">⊳</span> </td> </tr><tr id="entity-Vbar"><td> <code title="">Vbar;</code> </td> <td> U+02AEB </td> <td> <span class="glyph" title="">⫫</span> </td> </tr><tr id="entity-vBar"><td> <code title="">vBar;</code> </td> <td> U+02AE8 </td> <td> <span class="glyph" title="">⫨</span> </td> </tr><tr id="entity-vBarv"><td> <code title="">vBarv;</code> </td> <td> U+02AE9 </td> <td> <span class="glyph" title="">⫩</span> </td> </tr><tr id="entity-Vcy"><td> <code title="">Vcy;</code> </td> <td> U+00412 </td> <td> <span class="glyph" title="">В</span> </td> </tr><tr id="entity-vcy"><td> <code title="">vcy;</code> </td> <td> U+00432 </td> <td> <span class="glyph" title="">в</span> </td> </tr><tr id="entity-VDash"><td> <code title="">VDash;</code> </td> <td> U+022AB </td> <td> <span class="glyph" title="">⊫</span> </td> </tr><tr id="entity-Vdash"><td> <code title="">Vdash;</code> </td> <td> U+022A9 </td> <td> <span class="glyph" title="">⊩</span> </td> </tr><tr id="entity-vDash"><td> <code title="">vDash;</code> </td> <td> U+022A8 </td> <td> <span class="glyph" title="">⊨</span> </td> </tr><tr id="entity-vdash"><td> <code title="">vdash;</code> </td> <td> U+022A2 </td> <td> <span class="glyph" title="">⊢</span> </td> </tr><tr id="entity-Vdashl"><td> <code title="">Vdashl;</code> </td> <td> U+02AE6 </td> <td> <span class="glyph" title="">⫦</span> </td> </tr><tr id="entity-Vee"><td> <code title="">Vee;</code> </td> <td> U+022C1 </td> <td> <span class="glyph" title="">⋁</span> </td> </tr><tr id="entity-vee"><td> <code title="">vee;</code> </td> <td> U+02228 </td> <td> <span class="glyph" title="">∨</span> </td> </tr><tr id="entity-veebar"><td> <code title="">veebar;</code> </td> <td> U+022BB </td> <td> <span class="glyph" title="">⊻</span> </td> </tr><tr id="entity-veeeq"><td> <code title="">veeeq;</code> </td> <td> U+0225A </td> <td> <span class="glyph" title="">≚</span> </td> </tr><tr id="entity-vellip"><td> <code title="">vellip;</code> </td> <td> U+022EE </td> <td> <span class="glyph" title="">⋮</span> </td> </tr><tr id="entity-Verbar"><td> <code title="">Verbar;</code> </td> <td> U+02016 </td> <td> <span class="glyph" title="">‖</span> </td> </tr><tr id="entity-verbar"><td> <code title="">verbar;</code> </td> <td> U+0007C </td> <td> <span class="glyph" title="">|</span> </td> </tr><tr id="entity-Vert"><td> <code title="">Vert;</code> </td> <td> U+02016 </td> <td> <span class="glyph" title="">‖</span> </td> </tr><tr id="entity-vert"><td> <code title="">vert;</code> </td> <td> U+0007C </td> <td> <span class="glyph" title="">|</span> </td> </tr><tr id="entity-VerticalBar"><td> <code title="">VerticalBar;</code> </td> <td> U+02223 </td> <td> <span class="glyph" title="">∣</span> </td> </tr><tr id="entity-VerticalLine"><td> <code title="">VerticalLine;</code> </td> <td> U+0007C </td> <td> <span class="glyph" title="">|</span> </td> </tr><tr id="entity-VerticalSeparator"><td> <code title="">VerticalSeparator;</code> </td> <td> U+02758 </td> <td> <span class="glyph" title="">❘</span> </td> </tr><tr id="entity-VerticalTilde"><td> <code title="">VerticalTilde;</code> </td> <td> U+02240 </td> <td> <span class="glyph" title="">≀</span> </td> </tr><tr id="entity-VeryThinSpace"><td> <code title="">VeryThinSpace;</code> </td> <td> U+0200A </td> <td> <span class="glyph" title=""> </span> </td> </tr><tr id="entity-Vfr"><td> <code title="">Vfr;</code> </td> <td> U+1D519 </td> <td> <span class="glyph" title="">𝔙</span> </td> </tr><tr id="entity-vfr"><td> <code title="">vfr;</code> </td> <td> U+1D533 </td> <td> <span class="glyph" title="">𝔳</span> </td> </tr><tr id="entity-vltri"><td> <code title="">vltri;</code> </td> <td> U+022B2 </td> <td> <span class="glyph" title="">⊲</span> </td> </tr><tr id="entity-vnsub"><td> <code title="">vnsub;</code> </td> <td> U+02282 U+020D2 </td> <td> <span class="glyph compound" title="">⊂⃒</span> </td> </tr><tr id="entity-vnsup"><td> <code title="">vnsup;</code> </td> <td> U+02283 U+020D2 </td> <td> <span class="glyph compound" title="">⊃⃒</span> </td> </tr><tr id="entity-Vopf"><td> <code title="">Vopf;</code> </td> <td> U+1D54D </td> <td> <span class="glyph" title="">𝕍</span> </td> </tr><tr id="entity-vopf"><td> <code title="">vopf;</code> </td> <td> U+1D567 </td> <td> <span class="glyph" title="">𝕧</span> </td> </tr><tr id="entity-vprop"><td> <code title="">vprop;</code> </td> <td> U+0221D </td> <td> <span class="glyph" title="">∝</span> </td> </tr><tr id="entity-vrtri"><td> <code title="">vrtri;</code> </td> <td> U+022B3 </td> <td> <span class="glyph" title="">⊳</span> </td> </tr><tr id="entity-Vscr"><td> <code title="">Vscr;</code> </td> <td> U+1D4B1 </td> <td> <span class="glyph" title="">𝒱</span> </td> </tr><tr id="entity-vscr"><td> <code title="">vscr;</code> </td> <td> U+1D4CB </td> <td> <span class="glyph" title="">𝓋</span> </td> </tr><tr id="entity-vsubnE"><td> <code title="">vsubnE;</code> </td> <td> U+02ACB U+0FE00 </td> <td> <span class="glyph compound" title="">⫋︀</span> </td> </tr><tr id="entity-vsubne"><td> <code title="">vsubne;</code> </td> <td> U+0228A U+0FE00 </td> <td> <span class="glyph compound" title="">⊊︀</span> </td> </tr><tr id="entity-vsupnE"><td> <code title="">vsupnE;</code> </td> <td> U+02ACC U+0FE00 </td> <td> <span class="glyph compound" title="">⫌︀</span> </td> </tr><tr id="entity-vsupne"><td> <code title="">vsupne;</code> </td> <td> U+0228B U+0FE00 </td> <td> <span class="glyph compound" title="">⊋︀</span> </td> </tr><tr id="entity-Vvdash"><td> <code title="">Vvdash;</code> </td> <td> U+022AA </td> <td> <span class="glyph" title="">⊪</span> </td> </tr><tr id="entity-vzigzag"><td> <code title="">vzigzag;</code> </td> <td> U+0299A </td> <td> <span class="glyph" title="">⦚</span> </td> </tr><tr id="entity-Wcirc"><td> <code title="">Wcirc;</code> </td> <td> U+00174 </td> <td> <span class="glyph" title="">Ŵ</span> </td> </tr><tr id="entity-wcirc"><td> <code title="">wcirc;</code> </td> <td> U+00175 </td> <td> <span class="glyph" title="">ŵ</span> </td> </tr><tr id="entity-wedbar"><td> <code title="">wedbar;</code> </td> <td> U+02A5F </td> <td> <span class="glyph" title="">⩟</span> </td> </tr><tr id="entity-Wedge"><td> <code title="">Wedge;</code> </td> <td> U+022C0 </td> <td> <span class="glyph" title="">⋀</span> </td> </tr><tr id="entity-wedge"><td> <code title="">wedge;</code> </td> <td> U+02227 </td> <td> <span class="glyph" title="">∧</span> </td> </tr><tr id="entity-wedgeq"><td> <code title="">wedgeq;</code> </td> <td> U+02259 </td> <td> <span class="glyph" title="">≙</span> </td> </tr><tr id="entity-weierp"><td> <code title="">weierp;</code> </td> <td> U+02118 </td> <td> <span class="glyph" title="">℘</span> </td> </tr><tr id="entity-Wfr"><td> <code title="">Wfr;</code> </td> <td> U+1D51A </td> <td> <span class="glyph" title="">𝔚</span> </td> </tr><tr id="entity-wfr"><td> <code title="">wfr;</code> </td> <td> U+1D534 </td> <td> <span class="glyph" title="">𝔴</span> </td> </tr><tr id="entity-Wopf"><td> <code title="">Wopf;</code> </td> <td> U+1D54E </td> <td> <span class="glyph" title="">𝕎</span> </td> </tr><tr id="entity-wopf"><td> <code title="">wopf;</code> </td> <td> U+1D568 </td> <td> <span class="glyph" title="">𝕨</span> </td> </tr><tr id="entity-wp"><td> <code title="">wp;</code> </td> <td> U+02118 </td> <td> <span class="glyph" title="">℘</span> </td> </tr><tr id="entity-wr"><td> <code title="">wr;</code> </td> <td> U+02240 </td> <td> <span class="glyph" title="">≀</span> </td> </tr><tr id="entity-wreath"><td> <code title="">wreath;</code> </td> <td> U+02240 </td> <td> <span class="glyph" title="">≀</span> </td> </tr><tr id="entity-Wscr"><td> <code title="">Wscr;</code> </td> <td> U+1D4B2 </td> <td> <span class="glyph" title="">𝒲</span> </td> </tr><tr id="entity-wscr"><td> <code title="">wscr;</code> </td> <td> U+1D4CC </td> <td> <span class="glyph" title="">𝓌</span> </td> </tr><tr id="entity-xcap"><td> <code title="">xcap;</code> </td> <td> U+022C2 </td> <td> <span class="glyph" title="">⋂</span> </td> </tr><tr id="entity-xcirc"><td> <code title="">xcirc;</code> </td> <td> U+025EF </td> <td> <span class="glyph" title="">◯</span> </td> </tr><tr id="entity-xcup"><td> <code title="">xcup;</code> </td> <td> U+022C3 </td> <td> <span class="glyph" title="">⋃</span> </td> </tr><tr id="entity-xdtri"><td> <code title="">xdtri;</code> </td> <td> U+025BD </td> <td> <span class="glyph" title="">▽</span> </td> </tr><tr id="entity-Xfr"><td> <code title="">Xfr;</code> </td> <td> U+1D51B </td> <td> <span class="glyph" title="">𝔛</span> </td> </tr><tr id="entity-xfr"><td> <code title="">xfr;</code> </td> <td> U+1D535 </td> <td> <span class="glyph" title="">𝔵</span> </td> </tr><tr id="entity-xhArr"><td> <code title="">xhArr;</code> </td> <td> U+027FA </td> <td> <span class="glyph" title="">⟺</span> </td> </tr><tr id="entity-xharr"><td> <code title="">xharr;</code> </td> <td> U+027F7 </td> <td> <span class="glyph" title="">⟷</span> </td> </tr><tr id="entity-Xi"><td> <code title="">Xi;</code> </td> <td> U+0039E </td> <td> <span class="glyph" title="">Ξ</span> </td> </tr><tr id="entity-xi"><td> <code title="">xi;</code> </td> <td> U+003BE </td> <td> <span class="glyph" title="">ξ</span> </td> </tr><tr id="entity-xlArr"><td> <code title="">xlArr;</code> </td> <td> U+027F8 </td> <td> <span class="glyph" title="">⟸</span> </td> </tr><tr id="entity-xlarr"><td> <code title="">xlarr;</code> </td> <td> U+027F5 </td> <td> <span class="glyph" title="">⟵</span> </td> </tr><tr id="entity-xmap"><td> <code title="">xmap;</code> </td> <td> U+027FC </td> <td> <span class="glyph" title="">⟼</span> </td> </tr><tr id="entity-xnis"><td> <code title="">xnis;</code> </td> <td> U+022FB </td> <td> <span class="glyph" title="">⋻</span> </td> </tr><tr id="entity-xodot"><td> <code title="">xodot;</code> </td> <td> U+02A00 </td> <td> <span class="glyph" title="">⨀</span> </td> </tr><tr id="entity-Xopf"><td> <code title="">Xopf;</code> </td> <td> U+1D54F </td> <td> <span class="glyph" title="">𝕏</span> </td> </tr><tr id="entity-xopf"><td> <code title="">xopf;</code> </td> <td> U+1D569 </td> <td> <span class="glyph" title="">𝕩</span> </td> </tr><tr id="entity-xoplus"><td> <code title="">xoplus;</code> </td> <td> U+02A01 </td> <td> <span class="glyph" title="">⨁</span> </td> </tr><tr id="entity-xotime"><td> <code title="">xotime;</code> </td> <td> U+02A02 </td> <td> <span class="glyph" title="">⨂</span> </td> </tr><tr id="entity-xrArr"><td> <code title="">xrArr;</code> </td> <td> U+027F9 </td> <td> <span class="glyph" title="">⟹</span> </td> </tr><tr id="entity-xrarr"><td> <code title="">xrarr;</code> </td> <td> U+027F6 </td> <td> <span class="glyph" title="">⟶</span> </td> </tr><tr id="entity-Xscr"><td> <code title="">Xscr;</code> </td> <td> U+1D4B3 </td> <td> <span class="glyph" title="">𝒳</span> </td> </tr><tr id="entity-xscr"><td> <code title="">xscr;</code> </td> <td> U+1D4CD </td> <td> <span class="glyph" title="">𝓍</span> </td> </tr><tr id="entity-xsqcup"><td> <code title="">xsqcup;</code> </td> <td> U+02A06 </td> <td> <span class="glyph" title="">⨆</span> </td> </tr><tr id="entity-xuplus"><td> <code title="">xuplus;</code> </td> <td> U+02A04 </td> <td> <span class="glyph" title="">⨄</span> </td> </tr><tr id="entity-xutri"><td> <code title="">xutri;</code> </td> <td> U+025B3 </td> <td> <span class="glyph" title="">△</span> </td> </tr><tr id="entity-xvee"><td> <code title="">xvee;</code> </td> <td> U+022C1 </td> <td> <span class="glyph" title="">⋁</span> </td> </tr><tr id="entity-xwedge"><td> <code title="">xwedge;</code> </td> <td> U+022C0 </td> <td> <span class="glyph" title="">⋀</span> </td> </tr><tr id="entity-Yacute"><td> <code title="">Yacute;</code> </td> <td> U+000DD </td> <td> <span class="glyph" title="">Ý</span> </td> </tr><tr class="impl" id="entity-Yacute-legacy"><td> <code title="">Yacute</code> </td> <td> U+000DD </td> <td> <span title="">Ý</span> </td> </tr><tr id="entity-yacute"><td> <code title="">yacute;</code> </td> <td> U+000FD </td> <td> <span class="glyph" title="">ý</span> </td> </tr><tr class="impl" id="entity-yacute-legacy"><td> <code title="">yacute</code> </td> <td> U+000FD </td> <td> <span title="">ý</span> </td> </tr><tr id="entity-YAcy"><td> <code title="">YAcy;</code> </td> <td> U+0042F </td> <td> <span class="glyph" title="">Я</span> </td> </tr><tr id="entity-yacy"><td> <code title="">yacy;</code> </td> <td> U+0044F </td> <td> <span class="glyph" title="">я</span> </td> </tr><tr id="entity-Ycirc"><td> <code title="">Ycirc;</code> </td> <td> U+00176 </td> <td> <span class="glyph" title="">Ŷ</span> </td> </tr><tr id="entity-ycirc"><td> <code title="">ycirc;</code> </td> <td> U+00177 </td> <td> <span class="glyph" title="">ŷ</span> </td> </tr><tr id="entity-Ycy"><td> <code title="">Ycy;</code> </td> <td> U+0042B </td> <td> <span class="glyph" title="">Ы</span> </td> </tr><tr id="entity-ycy"><td> <code title="">ycy;</code> </td> <td> U+0044B </td> <td> <span class="glyph" title="">ы</span> </td> </tr><tr id="entity-yen"><td> <code title="">yen;</code> </td> <td> U+000A5 </td> <td> <span class="glyph" title="">¥</span> </td> </tr><tr class="impl" id="entity-yen-legacy"><td> <code title="">yen</code> </td> <td> U+000A5 </td> <td> <span title="">¥</span> </td> </tr><tr id="entity-Yfr"><td> <code title="">Yfr;</code> </td> <td> U+1D51C </td> <td> <span class="glyph" title="">𝔜</span> </td> </tr><tr id="entity-yfr"><td> <code title="">yfr;</code> </td> <td> U+1D536 </td> <td> <span class="glyph" title="">𝔶</span> </td> </tr><tr id="entity-YIcy"><td> <code title="">YIcy;</code> </td> <td> U+00407 </td> <td> <span class="glyph" title="">Ї</span> </td> </tr><tr id="entity-yicy"><td> <code title="">yicy;</code> </td> <td> U+00457 </td> <td> <span class="glyph" title="">ї</span> </td> </tr><tr id="entity-Yopf"><td> <code title="">Yopf;</code> </td> <td> U+1D550 </td> <td> <span class="glyph" title="">𝕐</span> </td> </tr><tr id="entity-yopf"><td> <code title="">yopf;</code> </td> <td> U+1D56A </td> <td> <span class="glyph" title="">𝕪</span> </td> </tr><tr id="entity-Yscr"><td> <code title="">Yscr;</code> </td> <td> U+1D4B4 </td> <td> <span class="glyph" title="">𝒴</span> </td> </tr><tr id="entity-yscr"><td> <code title="">yscr;</code> </td> <td> U+1D4CE </td> <td> <span class="glyph" title="">𝓎</span> </td> </tr><tr id="entity-YUcy"><td> <code title="">YUcy;</code> </td> <td> U+0042E </td> <td> <span class="glyph" title="">Ю</span> </td> </tr><tr id="entity-yucy"><td> <code title="">yucy;</code> </td> <td> U+0044E </td> <td> <span class="glyph" title="">ю</span> </td> </tr><tr id="entity-Yuml"><td> <code title="">Yuml;</code> </td> <td> U+00178 </td> <td> <span class="glyph" title="">Ÿ</span> </td> </tr><tr id="entity-yuml"><td> <code title="">yuml;</code> </td> <td> U+000FF </td> <td> <span class="glyph" title="">ÿ</span> </td> </tr><tr class="impl" id="entity-yuml-legacy"><td> <code title="">yuml</code> </td> <td> U+000FF </td> <td> <span title="">ÿ</span> </td> </tr><tr id="entity-Zacute"><td> <code title="">Zacute;</code> </td> <td> U+00179 </td> <td> <span class="glyph" title="">Ź</span> </td> </tr><tr id="entity-zacute"><td> <code title="">zacute;</code> </td> <td> U+0017A </td> <td> <span class="glyph" title="">ź</span> </td> </tr><tr id="entity-Zcaron"><td> <code title="">Zcaron;</code> </td> <td> U+0017D </td> <td> <span class="glyph" title="">Ž</span> </td> </tr><tr id="entity-zcaron"><td> <code title="">zcaron;</code> </td> <td> U+0017E </td> <td> <span class="glyph" title="">ž</span> </td> </tr><tr id="entity-Zcy"><td> <code title="">Zcy;</code> </td> <td> U+00417 </td> <td> <span class="glyph" title="">З</span> </td> </tr><tr id="entity-zcy"><td> <code title="">zcy;</code> </td> <td> U+00437 </td> <td> <span class="glyph" title="">з</span> </td> </tr><tr id="entity-Zdot"><td> <code title="">Zdot;</code> </td> <td> U+0017B </td> <td> <span class="glyph" title="">Ż</span> </td> </tr><tr id="entity-zdot"><td> <code title="">zdot;</code> </td> <td> U+0017C </td> <td> <span class="glyph" title="">ż</span> </td> </tr><tr id="entity-zeetrf"><td> <code title="">zeetrf;</code> </td> <td> U+02128 </td> <td> <span class="glyph" title="">ℨ</span> </td> </tr><tr id="entity-ZeroWidthSpace"><td> <code title="">ZeroWidthSpace;</code> </td> <td> U+0200B </td> <td> <span class="glyph" title="">​</span> </td> </tr><tr id="entity-Zeta"><td> <code title="">Zeta;</code> </td> <td> U+00396 </td> <td> <span class="glyph" title="">Ζ</span> </td> </tr><tr id="entity-zeta"><td> <code title="">zeta;</code> </td> <td> U+003B6 </td> <td> <span class="glyph" title="">ζ</span> </td> </tr><tr id="entity-Zfr"><td> <code title="">Zfr;</code> </td> <td> U+02128 </td> <td> <span class="glyph" title="">ℨ</span> </td> </tr><tr id="entity-zfr"><td> <code title="">zfr;</code> </td> <td> U+1D537 </td> <td> <span class="glyph" title="">𝔷</span> </td> </tr><tr id="entity-ZHcy"><td> <code title="">ZHcy;</code> </td> <td> U+00416 </td> <td> <span class="glyph" title="">Ж</span> </td> </tr><tr id="entity-zhcy"><td> <code title="">zhcy;</code> </td> <td> U+00436 </td> <td> <span class="glyph" title="">ж</span> </td> </tr><tr id="entity-zigrarr"><td> <code title="">zigrarr;</code> </td> <td> U+021DD </td> <td> <span class="glyph" title="">⇝</span> </td> </tr><tr id="entity-Zopf"><td> <code title="">Zopf;</code> </td> <td> U+02124 </td> <td> <span class="glyph" title="">ℤ</span> </td> </tr><tr id="entity-zopf"><td> <code title="">zopf;</code> </td> <td> U+1D56B </td> <td> <span class="glyph" title="">𝕫</span> </td> </tr><tr id="entity-Zscr"><td> <code title="">Zscr;</code> </td> <td> U+1D4B5 </td> <td> <span class="glyph" title="">𝒵</span> </td> </tr><tr id="entity-zscr"><td> <code title="">zscr;</code> </td> <td> U+1D4CF </td> <td> <span class="glyph" title="">𝓏</span> </td> </tr><tr id="entity-zwj"><td> <code title="">zwj;</code> </td> <td> U+0200D </td> <td> <span class="glyph" title="">‍</span> </td> </tr><tr id="entity-zwnj"><td> <code title="">zwnj;</code> </td> <td> U+0200C </td> <td> <span class="glyph" title="">‌</span> </td> </tr></tbody></table></div><p><i>The glyphs displayed above are non-normative. Refer to the
1.562 mike 25952: Unicode specifications for formal definitions of the characters
25953: listed above.</i></p><h2 id="the-xhtml-syntax"><span class="secno">9 </span><dfn id="xhtml" role="button" tabindex="0" aria-haspopup="true">The XHTML syntax</dfn></h2><p class="note">This section only describes the rules for XML
25954: resources. Rules for <code><a href="#text-html">text/html</a></code> resources are discussed
25955: in the section above entitled "<a href="#syntax">The HTML syntax</a>".</p><p>The syntax for using HTML with XML, whether in XHTML documents or
25956: embedded in other XML documents, is defined in the XML and
25957: Namespaces in XML specifications. <a href="#refsXML">[XML]</a> <a href="#refsXMLNS">[XMLNS]</a></p><p>This specification does not define any syntax-level requirements
25958: beyond those defined for XML proper.</p><p>XML documents may contain a <code>DOCTYPE</code> if desired, but
25959: this is not required to conform to this specification. This
25960: specification does not define a public or system identifier, nor
25961: provide a format DTD.</p><p class="note">According to the XML specification, XML processors
25962: are not guaranteed to process the external DTD subset referenced in
25963: the DOCTYPE. This means, for example, that using entity references
25964: for characters in XHTML documents is unsafe if they are defined in
25965: an external file (except for <code title="">&lt;</code>, <code title="">&gt;</code>, <code title="">&amp;</code>, <code title="">&quot;</code> and <code title="">&apos;</code>).</p><h2 id="obsolete"><span class="secno">11 </span>Obsolete features</h2><h3 id="obsolete-but-conforming-features"><span class="secno">11.1 </span>Obsolete but conforming features</h3><p>Features listed in this section will trigger warnings in
25966: conformance checkers.</p><p>Authors should not specify a <code title="attr-img-border"><a href="#attr-img-border">border</a></code> attribute on an
25967: <code><a href="#the-img-element">img</a></code> element. If the attribute is present, its value
25968: must be the string "<code title="">0</code>". CSS should be used
25969: instead.</p><p>Authors should not specify a <code title="attr-script-language"><a href="#attr-script-language">language</a></code> attribute on a
25970: <code><a href="#the-script-element">script</a></code> element. If the attribute is present, its value
25971: must be an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string
25972: "<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
25973: its value must be an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for
25974: the string "<code title="">text/javascript</code>". The attribute
25975: should be entirely omitted instead (with the value "<code title="">JavaScript</code>", it has no effect), or replaced with use
25976: of the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute.</p><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>
25977: elements. If the attribute is present, its value must not be the
25978: empty string and must neither be equal to the value of any of the
25979: <a href="#concept-id" title="concept-id">IDs</a> in the element's <a href="#home-subtree">home
25980: 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
25981: any of the other <code title="attr-a-name"><a href="#attr-a-name">name</a></code> attributes on
25982: <code><a href="#the-a-element">a</a></code> elements in the element's <a href="#home-subtree">home
25983: subtree</a>. If this attribute is present and the element has an
25984: <a href="#concept-id" title="concept-id">ID</a>, then the attribute's value must
25985: be equal to the element's <a href="#concept-id" title="concept-id">ID</a>. In
25986: earlier versions of the language, this attribute was intended as a
25987: 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>
1.597 mike 25988: attribute should be used instead.</p><p>Authors should not, but may despite requirements to the contrary
25989: elsewhere in this specification, specify the <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code> and <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attributes on <code><a href="#the-input-element">input</a></code>
25990: elements whose <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attributes
25991: are in the <a href="#number-state" title="attr-input-type-number">Number</a> state.
25992: One valid reason for using these attributes regardless is to help
25993: legacy user agents that do not support <code><a href="#the-input-element">input</a></code> elements
25994: with <code title="">type="number"</code> to still render the text
25995: field with a useful width.</p><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
1.562 mike 25996: permitted DOCTYPE</a> will also trigger a warning.</p><h3 id="non-conforming-features"><span class="secno">11.2 </span>Non-conforming features</h3><p>Elements in the following list are entirely obsolete, and must
25997: not be used by authors:</p><dl><dt><code><a href="#the-applet-element">applet</a></code></dt>
25998: <dd><p>Use <code><a href="#the-embed-element">embed</a></code> or <code><a href="#the-object-element">object</a></code> instead.</p></dd>
25999:
26000: <dt><dfn id="acronym" role="button" tabindex="0" aria-haspopup="true"><code>acronym</code></dfn></dt>
26001: <dd><p>Use <code><a href="#the-abbr-element">abbr</a></code> instead.</p></dd>
26002:
26003: <dt><dfn id="bgsound" role="button" tabindex="0" aria-haspopup="true"><code>bgsound</code></dfn></dt>
26004: <dd><p>Use <code><a href="#the-audio-element">audio</a></code> instead.</p></dd>
26005:
26006: <dt><dfn id="dir" role="button" tabindex="0" aria-haspopup="true"><code>dir</code></dfn></dt>
26007: <dd><p>Use <code><a href="#the-ul-element">ul</a></code> instead.</p></dd>
26008:
26009: <dt><code><a href="#frame">frame</a></code></dt>
26010: <dt><code><a href="#frameset">frameset</a></code></dt>
26011: <dt><dfn id="noframes" role="button" tabindex="0" aria-haspopup="true"><code>noframes</code></dfn></dt>
26012: <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.</p></dd>
26013:
26014: <dt><dfn id="isindex-0" role="button" tabindex="0" aria-haspopup="true"><code>isindex</code></dfn></dt>
26015: <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.</p></dd>
26016:
26017: <dt><dfn id="listing" role="button" tabindex="0" aria-haspopup="true"><code>listing</code></dfn></dt>
26018: <dd><p>Use <code><a href="#the-pre-element">pre</a></code> and <code><a href="#the-code-element">code</a></code> instead.</p></dd>
26019:
26020: <dt><dfn id="nextid" role="button" tabindex="0" aria-haspopup="true"><code>nextid</code></dfn></dt>
26021: <dd><p>Use GUIDs instead.</p></dd>
26022:
26023: <dt><dfn id="noembed" role="button" tabindex="0" aria-haspopup="true"><code>noembed</code></dfn></dt>
26024: <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.</p></dd>
26025:
26026: <dt><dfn id="plaintext" role="button" tabindex="0" aria-haspopup="true"><code>plaintext</code></dfn></dt>
26027: <dd><p>Use the "<code>text/plain</code>" <a href="#mime-type">MIME type</a> instead.</p></dd>
26028:
26029: <dt><dfn id="rb" role="button" tabindex="0" aria-haspopup="true"><code>rb</code></dfn></dt>
26030: <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.</p></dd>
26031:
26032: <dt><dfn id="strike" role="button" tabindex="0" aria-haspopup="true"><code>strike</code></dfn></dt>
26033: <dd><p>Use <code><a href="#the-del-element">del</a></code> instead if the element is marking an edit, otherwise use <code><a href="#the-s-element">s</a></code> instead.</p></dd>
26034:
26035: <dt><dfn id="xmp" role="button" tabindex="0" aria-haspopup="true"><code>xmp</code></dfn></dt>
1.587 mike 26036: <dd><p>Use <code><a href="#the-pre-element">pre</a></code> and <code><a href="#the-code-element">code</a></code> instead, and escape "<code title=""><</code>" and "<code title="">&</code>" characters as "<code title="">&lt;</code>" and "<code title="">&amp;</code>" respectively.</p></dd>
1.562 mike 26037:
26038: <dt><dfn id="basefont" role="button" tabindex="0" aria-haspopup="true"><code>basefont</code></dfn></dt>
26039: <dt><dfn id="big" role="button" tabindex="0" aria-haspopup="true"><code>big</code></dfn></dt>
26040: <dt><dfn id="blink" role="button" tabindex="0" aria-haspopup="true"><code>blink</code></dfn></dt>
26041: <dt><dfn id="center" role="button" tabindex="0" aria-haspopup="true"><code>center</code></dfn></dt>
26042: <dt><dfn id="font" role="button" tabindex="0" aria-haspopup="true"><code>font</code></dfn></dt>
26043: <dt><code><a href="#the-marquee-element">marquee</a></code></dt>
26044: <dt><dfn id="multicol" role="button" tabindex="0" aria-haspopup="true"><code>multicol</code></dfn></dt>
26045: <dt><dfn id="nobr" role="button" tabindex="0" aria-haspopup="true"><code>nobr</code></dfn></dt>
26046: <dt><dfn id="spacer" role="button" tabindex="0" aria-haspopup="true"><code>spacer</code></dfn></dt>
26047: <dt><dfn id="tt" role="button" tabindex="0" aria-haspopup="true"><code>tt</code></dfn></dt>
26048:
26049: <dd>
26050:
26051: <p>Use appropriate elements and/or CSS instead.</p>
26052:
26053: <p>Where the <code><a href="#tt">tt</a></code> element would have been used for
26054: marking up keyboard input, consider the <code><a href="#the-kbd-element">kbd</a></code> element;
26055: for variables, consider the <code><a href="#the-var-element">var</a></code> element; for computer
26056: code, consider the <code><a href="#the-code-element">code</a></code> element; and for computer
26057: output, consider the <code><a href="#the-samp-element">samp</a></code> element.</p>
26058:
26059: <p>Similarly, if the <code><a href="#big">big</a></code> element is being used to
26060: denote a heading, consider using the <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element; if
26061: it is being used for marking up important passages, consider the
26062: <code><a href="#the-strong-element">strong</a></code> element; and if it is being used for
26063: highlighting text for reference purposes, consider the
26064: <code><a href="#the-mark-element">mark</a></code> element.</p>
26065:
26066: <p>See also the <a href="#usage-summary">text-level semantics
26067: usage summary</a> for more suggestions with examples.</p>
26068:
26069: </dd>
26070:
26071: </dl><hr><p>The following attributes are obsolete (though the elements are
26072: still part of the language), and must not be used by authors:</p><dl><dt><dfn id="attr-a-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn> on <code><a href="#the-a-element">a</a></code> elements</dt>
26073: <dt><dfn id="attr-link-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn> on <code><a href="#the-link-element">link</a></code> elements</dt>
26074: <dd><p>Use an HTTP Content-Type header on the linked resource instead.</p></dd>
26075:
26076: <dt><dfn id="attr-a-coords" role="button" tabindex="0" aria-haspopup="true"><code>coords</code></dfn> on <code><a href="#the-a-element">a</a></code> elements</dt>
26077: <dt><dfn id="attr-a-shape" role="button" tabindex="0" aria-haspopup="true"><code>shape</code></dfn> on <code><a href="#the-a-element">a</a></code> elements</dt>
26078: <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.</p></dd>
26079:
26080: <dt><dfn id="attr-a-methods" role="button" tabindex="0" aria-haspopup="true"><code>methods</code></dfn> on <code><a href="#the-a-element">a</a></code> elements</dt>
26081: <dt><dfn id="attr-link-methods" role="button" tabindex="0" aria-haspopup="true"><code>methods</code></dfn> on <code><a href="#the-link-element">link</a></code> elements</dt>
26082: <dd><p>Use the HTTP OPTIONS feature instead.</p></dd>
26083:
26084: <dt><dfn id="attr-a-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> on <code><a href="#the-a-element">a</a></code> elements (except as noted in the previous section)</dt>
26085: <dt><dfn id="attr-embed-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> on <code><a href="#the-embed-element">embed</a></code> elements</dt>
26086: <dt><dfn id="attr-img-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> on <code><a href="#the-img-element">img</a></code> elements</dt>
26087: <dt><dfn id="attr-option-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> on <code><a href="#the-option-element">option</a></code> elements</dt>
26088: <dd><p>Use the <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute instead.</p></dd>
26089:
26090: <dt><dfn id="attr-a-rev" role="button" tabindex="0" aria-haspopup="true"><code>rev</code></dfn> on <code><a href="#the-a-element">a</a></code> elements</dt>
26091: <dt><dfn id="attr-link-rev" role="button" tabindex="0" aria-haspopup="true"><code>rev</code></dfn> on <code><a href="#the-link-element">link</a></code> elements</dt>
26092: <dd><p>Use the <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code>
26093: attribute instead, with an opposite term. (For example, instead of
26094: <code title="">rev="made"</code>, use <code title="">rel="author"</code>.)</p></dd>
26095:
26096: <dt><dfn id="attr-a-urn" role="button" tabindex="0" aria-haspopup="true"><code>urn</code></dfn> on <code><a href="#the-a-element">a</a></code> elements</dt>
26097: <dt><dfn id="attr-link-urn" role="button" tabindex="0" aria-haspopup="true"><code>urn</code></dfn> on <code><a href="#the-link-element">link</a></code> elements</dt>
26098: <dd><p>Specify the preferred persistent identifier using the <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute instead.</p></dd>
26099:
26100: <dt><dfn id="attr-form-accept" role="button" tabindex="0" aria-haspopup="true"><code>accept</code></dfn> on <code><a href="#the-form-element">form</a></code> elements</dt>
26101: <dd><p>Use the <code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code> attribute directly on the <code><a href="#the-input-element">input</a></code> elements instead.</p></dd>
26102:
26103: <dt><dfn id="attr-area-nohref" role="button" tabindex="0" aria-haspopup="true"><code>nohref</code></dfn> on <code><a href="#the-area-element">area</a></code> elements</dt>
26104: <dd><p>Omitting the <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>
26105: attribute is sufficient; the <code title="attr-area-nohref"><a href="#attr-area-nohref">nohref</a></code> attribute is
26106: unnecessary. Omit it altogether.</p></dd>
26107:
26108: <dt><dfn id="attr-head-profile" role="button" tabindex="0" aria-haspopup="true"><code>profile</code></dfn> on <code><a href="#the-head-element">head</a></code> elements</dt>
26109: <dd><p>When used for declaring which <code><a href="#the-meta-element">meta</a></code> terms are
26110: used in the document, unnecessary; omit it altogether, and <a href="#concept-meta-extensions" title="concept-meta-extensions">register the names</a>.</p></dd>
26111: <dd><p>When used for triggering specific user agent behaviors: use
26112: a <code><a href="#the-link-element">link</a></code> element instead.</p></dd>
26113:
26114: <dt><dfn id="attr-html-version" role="button" tabindex="0" aria-haspopup="true"><code>version</code></dfn> on <code><a href="#the-html-element">html</a></code> elements</dt>
26115: <dd><p>Unnecessary. Omit it altogether.</p></dd>
26116:
26117: <dt><dfn id="attr-input-usemap" role="button" tabindex="0" aria-haspopup="true"><code>usemap</code></dfn> on <code><a href="#the-input-element">input</a></code> elements</dt>
26118: <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.</p></dd>
26119:
26120: <dt><dfn id="attr-iframe-longdesc" role="button" tabindex="0" aria-haspopup="true"><code>longdesc</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26121: <dt><dfn id="attr-img-longdesc" role="button" tabindex="0" aria-haspopup="true"><code>longdesc</code></dfn> on <code><a href="#the-img-element">img</a></code> elements</dt>
26122: <dd><p>Use a regular <code><a href="#the-a-element">a</a></code> element to link to the
26123: description, or (in the case of images) use an <a href="#image-map">image
26124: map</a> to provide a link from the image to the image's
26125: description.</p></dd>
26126:
26127: <dt><dfn id="attr-img-lowsrc" role="button" tabindex="0" aria-haspopup="true"><code>lowsrc</code></dfn> on <code><a href="#the-img-element">img</a></code> elements</dt>
26128: <dd><p>Use a progressive JPEG image (given in the <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute),
26129: instead of using two separate images.</p></dd>
26130:
26131: <dt><dfn id="attr-link-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn> on <code><a href="#the-link-element">link</a></code> elements</dt>
26132: <dd><p>Unnecessary. Omit it altogether.</p></dd>
26133:
26134: <dt><dfn id="attr-meta-scheme" role="button" tabindex="0" aria-haspopup="true"><code>scheme</code></dfn> on <code><a href="#the-meta-element">meta</a></code> elements</dt>
26135: <dd><p>Use only one scheme per field, or make the scheme declaration part of the value.</p></dd>
26136:
26137: <dt><dfn id="attr-object-archive" role="button" tabindex="0" aria-haspopup="true"><code>archive</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26138: <dt><dfn id="attr-object-classid" role="button" tabindex="0" aria-haspopup="true"><code>classid</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26139: <dt><dfn id="attr-object-code" role="button" tabindex="0" aria-haspopup="true"><code>code</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26140: <dt><dfn id="attr-object-codebase" role="button" tabindex="0" aria-haspopup="true"><code>codebase</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26141: <dt><dfn id="attr-object-codetype" role="button" tabindex="0" aria-haspopup="true"><code>codetype</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26142: <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
26143: in particular, the <code><a href="#the-param-element">param</a></code> element can be used.</p></dd>
26144:
26145: <dt><dfn id="attr-object-declare" role="button" tabindex="0" aria-haspopup="true"><code>declare</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26146: <dd><p>Repeat the <code><a href="#the-object-element">object</a></code> element completely each time the resource is to be reused.</p></dd>
26147:
26148: <dt><dfn id="attr-object-standby" role="button" tabindex="0" aria-haspopup="true"><code>standby</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26149: <dd><p>Optimize the linked resource so that it loads quickly or, at least, incrementally.</p></dd>
26150:
26151: <dt><dfn id="attr-param-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> on <code><a href="#the-param-element">param</a></code> elements</dt>
26152: <dt><dfn id="attr-param-valuetype" role="button" tabindex="0" aria-haspopup="true"><code>valuetype</code></dfn> on <code><a href="#the-param-element">param</a></code> elements</dt>
26153: <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
26154: value types.</p></dd>
26155:
26156: <dt><dfn id="attr-script-language" role="button" tabindex="0" aria-haspopup="true"><code>language</code></dfn> on <code><a href="#the-script-element">script</a></code> elements (except as noted in the previous section)</dt>
26157: <dd><p>Use the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute
26158: instead.</p></dd>
26159:
26160: <dt><dfn id="attr-script-event" role="button" tabindex="0" aria-haspopup="true"><code>event</code></dfn> on <code><a href="#the-script-element">script</a></code> elements</dt>
26161: <dt><dfn id="attr-script-for" role="button" tabindex="0" aria-haspopup="true"><code>for</code></dfn> on <code><a href="#the-script-element">script</a></code> elements</dt>
1.590 mike 26162: <dd><p>Use DOM Events mechanisms to register event listeners. <a href="#refsDOMCORE">[DOMCORE]</a></p></dd>
1.562 mike 26163:
26164: <dt><dfn id="attr-table-datapagesize" role="button" tabindex="0" aria-haspopup="true"><code>datapagesize</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26165: <dd><p>Unnecessary. Omit it altogether.</p></dd>
26166:
26167: <dt><dfn id="attr-table-summary" role="button" tabindex="0" aria-haspopup="true"><code>summary</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26168: <dd><p>Use one of the <a href="#table-descriptions-techniques">techniques for describing
26169: tables</a> given in the <code><a href="#the-table-element">table</a></code> section
26170: instead.</p></dd>
26171:
26172: <dt><dfn id="attr-tdth-abbr" role="button" tabindex="0" aria-haspopup="true"><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>
26173: <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>
26174:
26175: </dd><dt><dfn id="attr-tdth-axis" role="button" tabindex="0" aria-haspopup="true"><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>
26176: <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>
26177:
26178: </dd><dt><dfn id="attr-td-scope" role="button" tabindex="0" aria-haspopup="true"><code>scope</code></dfn> on <code><a href="#the-td-element">td</a></code> elements</dt>
26179: <dd><p>Use <code><a href="#the-th-element">th</a></code> elements for heading cells.</p>
26180:
26181: </dd><dt><dfn id="attr-datasrc" role="button" tabindex="0" aria-haspopup="true"><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>
26182: <dt><dfn id="attr-datafld" role="button" tabindex="0" aria-haspopup="true"><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>
26183: <dt><dfn id="attr-dataformatas" role="button" tabindex="0" aria-haspopup="true"><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>, and <code><a href="#the-table-element">table</a></code> elements</dt>
26184: <dd><p>Use script and a mechanism such as <code>XMLHttpRequest</code> to populate the page dynamically. <a href="#refsXHR">[XHR]</a></p></dd>
26185:
26186: <dt><dfn id="attr-body-alink" role="button" tabindex="0" aria-haspopup="true"><code>alink</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26187: <dt><dfn id="attr-body-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgcolor</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26188: <dt><dfn id="attr-body-link" role="button" tabindex="0" aria-haspopup="true"><code>link</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26189: <dt><dfn id="attr-body-marginbottom" role="button" tabindex="0" aria-haspopup="true"><code>marginbottom</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26190: <dt><dfn id="attr-body-marginheight" role="button" tabindex="0" aria-haspopup="true"><code>marginheight</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26191: <dt><dfn id="attr-body-marginleft" role="button" tabindex="0" aria-haspopup="true"><code>marginleft</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26192: <dt><dfn id="attr-body-marginright" role="button" tabindex="0" aria-haspopup="true"><code>marginright</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26193: <dt><dfn id="attr-body-margintop" role="button" tabindex="0" aria-haspopup="true"><code>margintop</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26194: <dt><dfn id="attr-body-marginwidth" role="button" tabindex="0" aria-haspopup="true"><code>marginwidth</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26195: <dt><dfn id="attr-body-text" role="button" tabindex="0" aria-haspopup="true"><code>text</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26196: <dt><dfn id="attr-body-vlink" role="button" tabindex="0" aria-haspopup="true"><code>vlink</code></dfn> on <code><a href="#the-body-element">body</a></code> elements</dt>
26197: <dt><dfn id="attr-br-clear" role="button" tabindex="0" aria-haspopup="true"><code>clear</code></dfn> on <code><a href="#the-br-element">br</a></code> elements</dt>
26198: <dt><dfn id="attr-caption-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-caption-element">caption</a></code> elements</dt>
26199: <dt><dfn id="attr-col-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-col-element">col</a></code> elements</dt>
26200: <dt><dfn id="attr-col-char" role="button" tabindex="0" aria-haspopup="true"><code>char</code></dfn> on <code><a href="#the-col-element">col</a></code> elements</dt>
26201: <dt><dfn id="attr-col-charoff" role="button" tabindex="0" aria-haspopup="true"><code>charoff</code></dfn> on <code><a href="#the-col-element">col</a></code> elements</dt>
26202: <dt><dfn id="attr-col-valign" role="button" tabindex="0" aria-haspopup="true"><code>valign</code></dfn> on <code><a href="#the-col-element">col</a></code> elements</dt>
26203: <dt><dfn id="attr-col-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> on <code><a href="#the-col-element">col</a></code> elements</dt>
26204: <dt><dfn id="attr-div-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-div-element">div</a></code> elements</dt>
26205: <dt><dfn id="attr-dl-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> on <code><a href="#the-dl-element">dl</a></code> elements</dt>
26206: <dt><dfn id="attr-embed-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-embed-element">embed</a></code> elements</dt>
26207: <dt><dfn id="attr-embed-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn> on <code><a href="#the-embed-element">embed</a></code> elements</dt>
26208: <dt><dfn id="attr-embed-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> on <code><a href="#the-embed-element">embed</a></code> elements</dt>
26209: <dt><dfn id="attr-hr-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-hr-element">hr</a></code> elements</dt>
26210: <dt><dfn id="attr-hr-color" role="button" tabindex="0" aria-haspopup="true"><code>color</code></dfn> on <code><a href="#the-hr-element">hr</a></code> elements</dt>
26211: <dt><dfn id="attr-hr-noshade" role="button" tabindex="0" aria-haspopup="true"><code>noshade</code></dfn> on <code><a href="#the-hr-element">hr</a></code> elements</dt>
26212: <dt><dfn id="attr-hr-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn> on <code><a href="#the-hr-element">hr</a></code> elements</dt>
26213: <dt><dfn id="attr-hr-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> on <code><a href="#the-hr-element">hr</a></code> elements</dt>
26214: <dt><dfn id="attr-hx-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <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">h6</a></code> elements</dt>
26215: <dt><dfn id="attr-iframe-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26216: <dt><dfn id="attr-iframe-allowtransparency" role="button" tabindex="0" aria-haspopup="true"><code>allowtransparency</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26217: <dt><dfn id="attr-iframe-frameborder" role="button" tabindex="0" aria-haspopup="true"><code>frameborder</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26218: <dt><dfn id="attr-iframe-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26219: <dt><dfn id="attr-iframe-marginheight" role="button" tabindex="0" aria-haspopup="true"><code>marginheight</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26220: <dt><dfn id="attr-iframe-marginwidth" role="button" tabindex="0" aria-haspopup="true"><code>marginwidth</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26221: <dt><dfn id="attr-iframe-scrolling" role="button" tabindex="0" aria-haspopup="true"><code>scrolling</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26222: <dt><dfn id="attr-iframe-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> on <code><a href="#the-iframe-element">iframe</a></code> elements</dt>
26223: <dt><dfn id="attr-input-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-input-element">input</a></code> elements</dt>
26224: <dt><dfn id="attr-input-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn> on <code><a href="#the-input-element">input</a></code> elements</dt>
26225: <dt><dfn id="attr-input-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> on <code><a href="#the-input-element">input</a></code> elements</dt>
26226: <dt><dfn id="attr-img-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-img-element">img</a></code> elements</dt>
26227: <dt><dfn id="attr-img-border" role="button" tabindex="0" aria-haspopup="true"><code>border</code></dfn> on <code><a href="#the-img-element">img</a></code> elements (except as noted in the previous section)</dt>
26228: <dt><dfn id="attr-img-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn> on <code><a href="#the-img-element">img</a></code> elements</dt>
26229: <dt><dfn id="attr-img-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> on <code><a href="#the-img-element">img</a></code> elements</dt>
26230: <dt><dfn id="attr-legend-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-legend-element">legend</a></code> elements</dt>
26231: <dt><dfn id="attr-li-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> on <code><a href="#the-li-element">li</a></code> elements</dt>
26232: <dt><dfn id="attr-menu-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> on <code><a href="#the-menu-element">menu</a></code> elements</dt>
26233: <dt><dfn id="attr-object-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26234: <dt><dfn id="attr-object-border" role="button" tabindex="0" aria-haspopup="true"><code>border</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26235: <dt><dfn id="attr-object-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26236: <dt><dfn id="attr-object-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> on <code><a href="#the-object-element">object</a></code> elements</dt>
26237: <dt><dfn id="attr-ol-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> on <code><a href="#the-ol-element">ol</a></code> elements</dt>
26238: <dt><dfn id="attr-p-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-p-element">p</a></code> elements</dt>
26239: <dt><dfn id="attr-pre-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> on <code><a href="#the-pre-element">pre</a></code> elements</dt>
26240: <dt><dfn id="attr-table-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26241: <dt><dfn id="attr-table-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgcolor</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26242: <dt><dfn id="attr-table-cellpadding" role="button" tabindex="0" aria-haspopup="true"><code>cellpadding</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26243: <dt><dfn id="attr-table-cellspacing" role="button" tabindex="0" aria-haspopup="true"><code>cellspacing</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26244: <dt><dfn id="attr-table-frame" role="button" tabindex="0" aria-haspopup="true"><code>frame</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26245: <dt><dfn id="attr-table-rules" role="button" tabindex="0" aria-haspopup="true"><code>rules</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26246: <dt><dfn id="attr-table-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> on <code><a href="#the-table-element">table</a></code> elements</dt>
26247: <dt><dfn id="attr-tbody-align" role="button" tabindex="0" aria-haspopup="true"><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>
26248: <dt><dfn id="attr-tbody-char" role="button" tabindex="0" aria-haspopup="true"><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>
26249: <dt><dfn id="attr-tbody-charoff" role="button" tabindex="0" aria-haspopup="true"><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>
26250: <dt><dfn id="attr-tbody-valign" role="button" tabindex="0" aria-haspopup="true"><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>
26251: <dt><dfn id="attr-tdth-align" role="button" tabindex="0" aria-haspopup="true"><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>
26252: <dt><dfn id="attr-tdth-bgcolor" role="button" tabindex="0" aria-haspopup="true"><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>
26253: <dt><dfn id="attr-tdth-char" role="button" tabindex="0" aria-haspopup="true"><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>
26254: <dt><dfn id="attr-tdth-charoff" role="button" tabindex="0" aria-haspopup="true"><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>
26255: <dt><dfn id="attr-tdth-height" role="button" tabindex="0" aria-haspopup="true"><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>
26256: <dt><dfn id="attr-tdth-nowrap" role="button" tabindex="0" aria-haspopup="true"><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>
26257: <dt><dfn id="attr-tdth-valign" role="button" tabindex="0" aria-haspopup="true"><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>
26258: <dt><dfn id="attr-tdth-width" role="button" tabindex="0" aria-haspopup="true"><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>
26259: <dt><dfn id="attr-tr-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> on <code><a href="#the-tr-element">tr</a></code> elements</dt>
26260: <dt><dfn id="attr-tr-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgcolor</code></dfn> on <code><a href="#the-tr-element">tr</a></code> elements</dt>
26261: <dt><dfn id="attr-tr-char" role="button" tabindex="0" aria-haspopup="true"><code>char</code></dfn> on <code><a href="#the-tr-element">tr</a></code> elements</dt>
26262: <dt><dfn id="attr-tr-charoff" role="button" tabindex="0" aria-haspopup="true"><code>charoff</code></dfn> on <code><a href="#the-tr-element">tr</a></code> elements</dt>
26263: <dt><dfn id="attr-tr-valign" role="button" tabindex="0" aria-haspopup="true"><code>valign</code></dfn> on <code><a href="#the-tr-element">tr</a></code> elements</dt>
26264: <dt><dfn id="attr-ul-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> on <code><a href="#the-ul-element">ul</a></code> elements</dt>
26265: <dt><dfn id="attr-ul-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> on <code><a href="#the-ul-element">ul</a></code> elements</dt>
26266: <dt><dfn id="attr-background" role="button" tabindex="0" aria-haspopup="true"><code>background</code></dfn> on <code><a href="#the-body-element">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>
26267: <dd><p>Use CSS instead.</p></dd>
26268:
26269: </dl><hr><p>The <code title="attr-table-border"><a href="#attr-table-border">border</a></code> attribute on
26270: the <code><a href="#the-table-element">table</a></code> element can be used to provide basic fallback
26271: styling for the purpose of making tables legible in browsing
26272: environments where CSS support is limited or absent, such as
26273: text-based browsers, WYSIWYG editors, and in situations where CSS
26274: support is disabled or the style sheet is lost. Only the empty
26275: string and the value "<code title="">1</code>" may be used as <code title="attr-table-border"><a href="#attr-table-border">border</a></code> values for this purpose.
26276: Other values are considered obsolete. To regulate the thickness of
26277: such borders, authors should instead use CSS.</p>
26278: <p>The <dfn id="dom-applet-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn>, <dfn id="dom-applet-alt" role="button" tabindex="0" aria-haspopup="true"><code>alt</code></dfn>, <dfn id="dom-applet-archive" role="button" tabindex="0" aria-haspopup="true"><code>archive</code></dfn>, <dfn id="dom-applet-code" role="button" tabindex="0" aria-haspopup="true"><code>code</code></dfn>, <dfn id="dom-applet-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn>, <dfn id="dom-applet-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn>, <dfn id="dom-applet-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>, <dfn id="dom-applet-object" role="button" tabindex="0" aria-haspopup="true"><code>object</code></dfn>, <dfn id="dom-applet-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn>, and <dfn id="dom-applet-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> IDL attributes
26279: must <a href="#reflect">reflect</a> the respective content attributes of the
26280: same name. For the purposes of reflection, the <code><a href="#the-applet-element">applet</a></code>
26281: element's <code title="attr-applet-object">object</code> content
26282: attribute is defined as containing a <a href="#url">URL</a>.</p>
26283:
26284: <p>The <dfn id="dom-applet-codebase" role="button" tabindex="0" aria-haspopup="true"><code>codeBase</code></dfn>
26285: IDL attribute must <a href="#reflect">reflect</a> the <code title="attr-applet-codebase">codebase</code> content attribute,
26286: which for the purposes of reflection is defined as containing a
26287: <a href="#url">URL</a>.</p>
26288:
26289: <p>The <dfn id="dom-marquee-behavior" role="button" tabindex="0" aria-haspopup="true"><code>behavior</code></dfn>, <dfn id="dom-marquee-direction" role="button" tabindex="0" aria-haspopup="true"><code>direction</code></dfn>, <dfn id="dom-marquee-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn>, <dfn id="dom-marquee-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn>, <dfn id="dom-marquee-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn>, and <dfn id="dom-marquee-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> IDL attributes
26290: must <a href="#reflect">reflect</a> the respective content attributes of the
26291: same name.</p>
26292:
26293: <p>The <dfn id="dom-marquee-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgColor</code></dfn>
26294: IDL attribute must <a href="#reflect">reflect</a> the <code title="attr-marquee-bgcolor">bgcolor</code> content attribute.</p>
26295:
26296: <p>The <dfn id="dom-marquee-scrollamount" role="button" tabindex="0" aria-haspopup="true"><code>scrollAmount</code></dfn>
26297: IDL attribute must <a href="#reflect">reflect</a> the <code title="attr-marquee-scrollamount">scrollamount</code> content
26298: attribute. The default value is 6.</p>
26299:
26300: <p>The <dfn id="dom-marquee-scrolldelay" role="button" tabindex="0" aria-haspopup="true"><code>scrollDelay</code></dfn> IDL
26301: attribute must <a href="#reflect">reflect</a> the <code title="attr-marquee-scrolldelay">scrolldelay</code> content
26302: attribute. The default value is 85.</p>
26303:
26304: <p>The <dfn id="dom-marquee-truespeed" role="button" tabindex="0" aria-haspopup="true"><code>trueSpeed</code></dfn> IDL
26305: attribute must <a href="#reflect">reflect</a> the <code title="attr-marquee-truespeed"><a href="#attr-marquee-truespeed">truespeed</a></code> content
26306: attribute.</p>
26307:
26308: <p>The <dfn id="dom-frameset-cols" role="button" tabindex="0" aria-haspopup="true"><code>cols</code></dfn> and
26309: <dfn id="dom-frameset-rows" role="button" tabindex="0" aria-haspopup="true"><code>rows</code></dfn> IDL
26310: attributes of the <code><a href="#frameset">frameset</a></code> element must
26311: <a href="#reflect">reflect</a> the respective content attributes of the same
26312: name.</p>
26313:
26314: <p>The <dfn id="dom-frame-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>, <dfn id="dom-frame-scrolling" role="button" tabindex="0" aria-haspopup="true"><code>scrolling</code></dfn>, and <dfn id="dom-frame-src" role="button" tabindex="0" aria-haspopup="true"><code>src</code></dfn> IDL attributes of the
26315: <code><a href="#frame">frame</a></code> element must <a href="#reflect">reflect</a> the respective
26316: content attributes of the same name.</p>
26317:
26318: <p>The <dfn id="dom-frame-frameborder" role="button" tabindex="0" aria-haspopup="true"><code>frameBorder</code></dfn> IDL
26319: attribute of the <code><a href="#frame">frame</a></code> element must
26320: <a href="#reflect">reflect</a> the element's <code title="attr-frame-frameborder">frameborder</code> content
26321: attribute.</p>
26322:
26323: <p>The <dfn id="dom-frame-longdesc" role="button" tabindex="0" aria-haspopup="true"><code>longDesc</code></dfn>
26324: IDL attribute of the <code><a href="#frame">frame</a></code> element must
26325: <a href="#reflect">reflect</a> the element's <code title="attr-frame-longdesc">longdesc</code> content attribute, which
26326: for the purposes of reflection is defined as containing a
26327: <a href="#url">URL</a>.</p>
26328:
1.611 mike 26329: <p>The <dfn id="dom-frame-noresize" role="button" tabindex="0" aria-haspopup="true"><code>noResize</code></dfn>
26330: IDL attribute of the <code><a href="#frame">frame</a></code> element must
26331: <a href="#reflect">reflect</a> the element's <code title="attr-frame-noresize">noresize</code> content attribute.</p>
26332:
1.562 mike 26333: <p>The <dfn id="dom-frame-marginheight" role="button" tabindex="0" aria-haspopup="true"><code>marginHeight</code></dfn> IDL
26334: attribute of the <code><a href="#frame">frame</a></code> element must
26335: <a href="#reflect">reflect</a> the element's <code title="attr-frame-marginheight">marginheight</code> content
26336: attribute.</p>
26337:
26338: <p>The <dfn id="dom-frame-marginwidth" role="button" tabindex="0" aria-haspopup="true"><code>marginWidth</code></dfn> IDL
26339: attribute of the <code><a href="#frame">frame</a></code> element must
26340: <a href="#reflect">reflect</a> the element's <code title="attr-frame-marginwidth">marginwidth</code> content
26341: attribute.</p>
26342:
26343: <p>The <dfn id="dom-a-coords" role="button" tabindex="0" aria-haspopup="true"><code>coords</code></dfn>, <dfn id="dom-a-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn>, <dfn id="dom-a-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>, <dfn id="dom-a-rev" role="button" tabindex="0" aria-haspopup="true"><code>rev</code></dfn>, and <dfn id="dom-a-shape" role="button" tabindex="0" aria-haspopup="true"><code>shape</code></dfn> IDL attributes of the
26344: <code><a href="#the-a-element">a</a></code> element must <a href="#reflect">reflect</a> the respective
26345: content attributes of the same name.</p>
26346:
26347: <p>The <dfn id="dom-area-nohref" role="button" tabindex="0" aria-haspopup="true"><code>noHref</code></dfn> IDL
26348: attribute of the <code><a href="#the-area-element">area</a></code> element must <a href="#reflect">reflect</a>
26349: the element's <code title="attr-area-nohref"><a href="#attr-area-nohref">nohref</a></code> content
26350: attribute.</p>
26351:
26352: <p>The <dfn id="dom-basefont-color" role="button" tabindex="0" aria-haspopup="true"><code>color</code></dfn>,
26353: <dfn id="dom-basefont-face" role="button" tabindex="0" aria-haspopup="true"><code>face</code></dfn>, and <dfn id="dom-basefont-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn> IDL attributes of
26354: the <code><a href="#basefont">basefont</a></code> element must <a href="#reflect">reflect</a> the
26355: respective content attributes of the same name.</p>
26356:
26357: <p>The <dfn id="dom-body-text" role="button" tabindex="0" aria-haspopup="true"><code>text</code></dfn> IDL
26358: attribute of the <code><a href="#the-body-element">body</a></code> element must <a href="#reflect">reflect</a>
26359: the element's <code title="attr-body-text"><a href="#attr-body-text">text</a></code> content
26360: attribute.</p>
26361:
26362: <p>The <dfn id="dom-body-link" role="button" tabindex="0" aria-haspopup="true"><code>link</code></dfn> IDL
26363: attribute of the <code><a href="#the-body-element">body</a></code> element must <a href="#reflect">reflect</a>
26364: the element's <code title="attr-body-link"><a href="#attr-body-link">link</a></code> content
26365: attribute.</p>
26366:
26367: <p>The <dfn id="dom-body-alink" role="button" tabindex="0" aria-haspopup="true"><code>aLink</code></dfn> IDL
26368: attribute of the <code><a href="#the-body-element">body</a></code> element must <a href="#reflect">reflect</a>
26369: the element's <code title="attr-body-alink"><a href="#attr-body-alink">alink</a></code> content
26370: attribute.</p>
26371:
26372: <p>The <dfn id="dom-body-vlink" role="button" tabindex="0" aria-haspopup="true"><code>vLink</code></dfn> IDL
26373: attribute of the <code><a href="#the-body-element">body</a></code> element must <a href="#reflect">reflect</a>
26374: the element's <code title="attr-body-vlink"><a href="#attr-body-vlink">vlink</a></code> content
26375: attribute.</p>
26376:
1.611 mike 26377: <p>The <dfn id="dom-body-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgColor</code></dfn> IDL
26378: attribute of the <code><a href="#the-body-element">body</a></code> element must <a href="#reflect">reflect</a>
26379: the element's <code title="attr-body-bgcolor"><a href="#attr-body-bgcolor">bgcolor</a></code> content
26380: attribute.</p>
26381:
26382: <p>The <dfn id="dom-body-background" role="button" tabindex="0" aria-haspopup="true"><code>background</code></dfn> IDL
26383: attribute of the <code><a href="#the-body-element">body</a></code> element must <a href="#reflect">reflect</a>
26384: the element's <code title="attr-background"><a href="#attr-background">background</a></code>
26385: content attribute. (The <code title="attr-background"><a href="#attr-background">background</a></code> content is <em>not</em>
26386: defined to contain a <a href="#url">URL</a>, despite rules regarding its
26387: handling in the rendering section above.)</p>
26388:
1.562 mike 26389: <p>The <dfn id="dom-br-clear" role="button" tabindex="0" aria-haspopup="true"><code>clear</code></dfn> IDL
26390: attribute of the <code><a href="#the-br-element">br</a></code> element must <a href="#reflect">reflect</a>
26391: the content attribute of the same name.</p>
26392:
26393: <p>The <dfn id="dom-caption-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26394: attribute of the <code><a href="#the-caption-element">caption</a></code> element must
26395: <a href="#reflect">reflect</a> the content attribute of the same name.</p>
26396:
26397: <p>The <dfn id="dom-col-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> and <dfn id="dom-col-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> IDL attributes of
26398: the <code><a href="#the-col-element">col</a></code> element must <a href="#reflect">reflect</a> the
26399: respective content attributes of the same name.</p>
26400:
26401: <p>The <dfn id="dom-col-ch" role="button" tabindex="0" aria-haspopup="true"><code>ch</code></dfn> IDL attribute
26402: of the <code><a href="#the-col-element">col</a></code> element must <a href="#reflect">reflect</a> the
26403: element's <code title="attr-col-char"><a href="#attr-col-char">char</a></code> content
26404: attribute.</p>
26405:
26406: <p>The <dfn id="dom-col-choff" role="button" tabindex="0" aria-haspopup="true"><code>chOff</code></dfn> IDL
26407: attribute of the <code><a href="#the-col-element">col</a></code> element must <a href="#reflect">reflect</a>
26408: the element's <code title="attr-col-charoff"><a href="#attr-col-charoff">charoff</a></code> content
26409: attribute.</p>
26410:
26411: <p>The <dfn id="dom-col-valign" role="button" tabindex="0" aria-haspopup="true"><code>vAlign</code></dfn> IDL
26412: attribute of the <code><a href="#the-col-element">col</a></code> element must <a href="#reflect">reflect</a>
26413: the element's <code title="attr-col-valign"><a href="#attr-col-valign">valign</a></code> content
26414: attribute.</p>
26415:
26416: <p>The <dfn id="dom-dir-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> IDL
26417: attribute of the <code><a href="#dir">dir</a></code> element must <a href="#reflect">reflect</a>
26418: the content attribute of the same name.</p>
26419:
26420: <p>The <dfn id="dom-div-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26421: attribute of the <code><a href="#the-div-element">div</a></code> element must <a href="#reflect">reflect</a>
26422: the content attribute of the same name.</p>
26423:
26424: <p>The <dfn id="dom-dl-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> IDL
26425: attribute of the <code><a href="#the-dl-element">dl</a></code> element must <a href="#reflect">reflect</a>
26426: the content attribute of the same name.</p>
26427:
26428: <p>The <dfn id="dom-embed-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn> and <dfn id="dom-embed-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL attributes of
26429: the <code><a href="#the-embed-element">embed</a></code> element must <a href="#reflect">reflect</a> the
26430: respective content attributes of the same name.</p>
26431:
26432: <p>The <dfn id="dom-font-color" role="button" tabindex="0" aria-haspopup="true"><code>color</code></dfn>,
26433: <dfn id="dom-font-face" role="button" tabindex="0" aria-haspopup="true"><code>face</code></dfn>, and <dfn id="dom-font-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn> IDL attributes of
26434: the <code><a href="#font">font</a></code> element must <a href="#reflect">reflect</a> the
26435: respective content attributes of the same name.</p>
26436:
26437: <p>The <dfn id="dom-hx-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26438: attribute of the <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">h6</a></code> elements must
26439: <a href="#reflect">reflect</a> the content attribute of the same name.</p>
26440:
26441: <p>The <dfn id="dom-hr-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn>, <dfn id="dom-hr-color" role="button" tabindex="0" aria-haspopup="true"><code>color</code></dfn>, <dfn id="dom-hr-size" role="button" tabindex="0" aria-haspopup="true"><code>size</code></dfn>, and <dfn id="dom-hr-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> IDL attributes of the
26442: <code><a href="#the-hr-element">hr</a></code> element must <a href="#reflect">reflect</a> the respective
26443: content attributes of the same name.</p>
26444:
26445: <p>The <dfn id="dom-hr-noshade" role="button" tabindex="0" aria-haspopup="true"><code>noShade</code></dfn> IDL
26446: attribute of the <code><a href="#the-hr-element">hr</a></code> element must <a href="#reflect">reflect</a>
26447: the element's <code title="attr-input-noshade">noshade</code>
26448: content attribute.</p>
26449:
26450: <p>The <dfn id="dom-html-version" role="button" tabindex="0" aria-haspopup="true"><code>version</code></dfn> IDL
26451: attribute of the <code><a href="#the-html-element">html</a></code> element must <a href="#reflect">reflect</a>
26452: the content attribute of the same name.</p>
26453:
26454: <p>The <dfn id="dom-iframe-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> and
26455: <dfn id="dom-iframe-scrolling" role="button" tabindex="0" aria-haspopup="true"><code>scrolling</code></dfn> IDL
26456: attributes of the <code><a href="#the-iframe-element">iframe</a></code> element must
26457: <a href="#reflect">reflect</a> the respective content attributes of the same
26458: name.</p>
26459:
26460: <p>The <dfn id="dom-iframe-frameborder" role="button" tabindex="0" aria-haspopup="true"><code>frameBorder</code></dfn> IDL
26461: attribute of the <code><a href="#the-iframe-element">iframe</a></code> element must
26462: <a href="#reflect">reflect</a> the element's <code title="attr-iframe-frameborder"><a href="#attr-iframe-frameborder">frameborder</a></code> content
26463: attribute.</p>
26464:
26465: <p>The <dfn id="dom-iframe-longdesc" role="button" tabindex="0" aria-haspopup="true"><code>longDesc</code></dfn>
26466: IDL attribute of the <code><a href="#the-iframe-element">iframe</a></code> element must
26467: <a href="#reflect">reflect</a> the element's <code title="attr-iframe-longdesc"><a href="#attr-iframe-longdesc">longdesc</a></code> content attribute,
26468: which for the purposes of reflection is defined as containing a
26469: <a href="#url">URL</a>.</p>
26470:
26471: <p>The <dfn id="dom-iframe-marginheight" role="button" tabindex="0" aria-haspopup="true"><code>marginHeight</code></dfn> IDL
26472: attribute of the <code><a href="#the-iframe-element">iframe</a></code> element must
26473: <a href="#reflect">reflect</a> the element's <code title="attr-iframe-marginheight"><a href="#attr-iframe-marginheight">marginheight</a></code> content
26474: attribute.</p>
26475:
26476: <p>The <dfn id="dom-iframe-marginwidth" role="button" tabindex="0" aria-haspopup="true"><code>marginWidth</code></dfn> IDL
26477: attribute of the <code><a href="#the-iframe-element">iframe</a></code> element must
26478: <a href="#reflect">reflect</a> the element's <code title="attr-iframe-marginwidth"><a href="#attr-iframe-marginwidth">marginwidth</a></code> content
26479: attribute.</p>
26480:
26481: <p>The <dfn id="dom-img-name" role="button" tabindex="0" aria-haspopup="true"><code>name</code></dfn>, <dfn id="dom-img-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn>, <dfn id="dom-img-border" role="button" tabindex="0" aria-haspopup="true"><code>border</code></dfn>, <dfn id="dom-img-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn>, and <dfn id="dom-img-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> IDL attributes of
26482: the <code><a href="#the-img-element">img</a></code> element must <a href="#reflect">reflect</a> the
26483: respective content attributes of the same name.</p>
26484:
26485: <p>The <dfn id="dom-img-longdesc" role="button" tabindex="0" aria-haspopup="true"><code>longDesc</code></dfn> IDL
26486: attribute of the <code><a href="#the-img-element">img</a></code> element must <a href="#reflect">reflect</a>
26487: the element's <code title="attr-img-longdesc"><a href="#attr-img-longdesc">longdesc</a></code>
26488: content attribute, which for the purposes of reflection is defined
26489: as containing a <a href="#url">URL</a>.</p>
26490:
26491: <p>The <dfn id="dom-input-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26492: attribute of the <code><a href="#the-input-element">input</a></code> element must <a href="#reflect">reflect</a>
26493: the content attribute of the same name.</p>
26494:
26495: <p>The <dfn id="dom-input-usemap" role="button" tabindex="0" aria-haspopup="true"><code>useMap</code></dfn> IDL
26496: attribute of the <code><a href="#the-input-element">input</a></code> element must
26497: <a href="#reflect">reflect</a> the element's <code title="attr-input-usemap"><a href="#attr-input-usemap">usemap</a></code> content attribute.</p>
26498:
26499: <p>The <dfn id="dom-legend-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26500: attribute of the <code><a href="#the-legend-element">legend</a></code> element must <a href="#reflect">reflect</a>
26501: the content attribute of the same name.</p>
26502:
26503: <p>The <dfn id="dom-li-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL
26504: attribute of the <code><a href="#the-li-element">li</a></code> element must <a href="#reflect">reflect</a>
26505: the content attribute of the same name.</p>
26506:
26507: <p>The <dfn id="dom-link-charset" role="button" tabindex="0" aria-haspopup="true"><code>charset</code></dfn>,
26508: <dfn id="dom-link-rev" role="button" tabindex="0" aria-haspopup="true"><code>rev</code></dfn>, and <dfn id="dom-link-target" role="button" tabindex="0" aria-haspopup="true"><code>target</code></dfn> IDL attributes of
26509: the <code><a href="#the-link-element">link</a></code> element must <a href="#reflect">reflect</a> the
26510: respective content attributes of the same name.</p>
26511:
26512: <p>The <dfn id="dom-menu-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> IDL
26513: attribute of the <code><a href="#the-menu-element">menu</a></code> element must <a href="#reflect">reflect</a>
26514: the content attribute of the same name.</p>
26515:
26516: <p>The <dfn id="dom-meta-scheme" role="button" tabindex="0" aria-haspopup="true"><code>scheme</code></dfn> IDL
26517: attribute of the <code><a href="#the-meta-element">meta</a></code> element must <a href="#reflect">reflect</a>
26518: the content attribute of the same name.</p>
26519:
26520: <p>The <dfn id="dom-object-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn>, <dfn id="dom-object-archive" role="button" tabindex="0" aria-haspopup="true"><code>archive</code></dfn>, <dfn id="dom-object-border" role="button" tabindex="0" aria-haspopup="true"><code>border</code></dfn>, <dfn id="dom-object-code" role="button" tabindex="0" aria-haspopup="true"><code>code</code></dfn>, <dfn id="dom-object-declare" role="button" tabindex="0" aria-haspopup="true"><code>declare</code></dfn>, <dfn id="dom-object-hspace" role="button" tabindex="0" aria-haspopup="true"><code>hspace</code></dfn>, <dfn id="dom-object-standby" role="button" tabindex="0" aria-haspopup="true"><code>standby</code></dfn>, and <dfn id="dom-object-vspace" role="button" tabindex="0" aria-haspopup="true"><code>vspace</code></dfn> IDL attributes
26521: of the <code><a href="#the-object-element">object</a></code> element must <a href="#reflect">reflect</a> the
26522: respective content attributes of the same name.</p>
26523:
26524: <p>The <dfn id="dom-object-codebase" role="button" tabindex="0" aria-haspopup="true"><code>codeBase</code></dfn>
26525: IDL attribute of the <code><a href="#the-object-element">object</a></code> element must
26526: <a href="#reflect">reflect</a> the element's <code title="attr-object-codebase"><a href="#attr-object-codebase">codebase</a></code> content attribute,
26527: which for the purposes of reflection is defined as containing a
26528: <a href="#url">URL</a>.</p>
26529:
26530: <p>The <dfn id="dom-object-codetype" role="button" tabindex="0" aria-haspopup="true"><code>codeType</code></dfn> IDL
26531: attribute of the <code><a href="#the-object-element">object</a></code> element must <a href="#reflect">reflect</a>
26532: the element's <code title="attr-object-codetype"><a href="#attr-object-codetype">codetype</a></code> content
26533: attribute.</p>
26534:
26535: <p>The <dfn id="dom-ol-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> IDL
26536: attribute of the <code><a href="#the-ol-element">ol</a></code> element must <a href="#reflect">reflect</a>
26537: the content attribute of the same name.</p>
26538:
26539: <p>The <dfn id="dom-p-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26540: attribute of the <code><a href="#the-p-element">p</a></code> element must <a href="#reflect">reflect</a>
26541: the content attribute of the same name.</p>
26542:
26543: <p>The <dfn id="dom-param-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL
26544: attribute of the <code><a href="#the-param-element">param</a></code> element must
26545: <a href="#reflect">reflect</a> the content attribute of the same name.</p>
26546:
26547: <p>The <dfn id="dom-param-valuetype" role="button" tabindex="0" aria-haspopup="true"><code>valueType</code></dfn>
26548: IDL attribute of the <code><a href="#the-param-element">param</a></code> element must
26549: <a href="#reflect">reflect</a> the element's <code title="attr-param-valuetype"><a href="#attr-param-valuetype">valuetype</a></code> content attribute.</p>
26550:
26551: <p>The <dfn id="dom-pre-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> IDL
26552: attribute of the <code><a href="#the-pre-element">pre</a></code> element must <a href="#reflect">reflect</a>
26553: the content attribute of the same name.</p>
26554:
26555: <p>The <dfn id="dom-table-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn>, <dfn id="dom-table-frame" role="button" tabindex="0" aria-haspopup="true"><code>frame</code></dfn>, <dfn id="dom-table-summary" role="button" tabindex="0" aria-haspopup="true"><code>summary</code></dfn>, <dfn id="dom-table-rules" role="button" tabindex="0" aria-haspopup="true"><code>rules</code></dfn>, and <dfn id="dom-table-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn>, IDL attributes of
26556: the <code><a href="#the-table-element">table</a></code> element must <a href="#reflect">reflect</a> the
26557: respective content attributes of the same name.</p>
26558:
26559: <p>The <dfn id="dom-table-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgColor</code></dfn> IDL
26560: attribute of the <code><a href="#the-table-element">table</a></code> element must <a href="#reflect">reflect</a>
26561: the element's <code title="attr-table-bgcolor"><a href="#attr-table-bgcolor">bgcolor</a></code> content
26562: attribute.</p>
26563:
26564: <p>The <dfn id="dom-table-cellpadding" role="button" tabindex="0" aria-haspopup="true"><code>cellPadding</code></dfn> IDL
26565: attribute of the <code><a href="#the-table-element">table</a></code> element must <a href="#reflect">reflect</a>
26566: the element's <code title="attr-table-cellpadding"><a href="#attr-table-cellpadding">cellpadding</a></code> content
26567: attribute.</p>
26568:
26569: <p>The <dfn id="dom-table-cellspacing" role="button" tabindex="0" aria-haspopup="true"><code>cellSpacing</code></dfn> IDL
26570: attribute of the <code><a href="#the-table-element">table</a></code> element must <a href="#reflect">reflect</a>
26571: the element's <code title="attr-table-cellspacing"><a href="#attr-table-cellspacing">cellspacing</a></code> content
26572: attribute.</p>
26573:
26574: <p>The <dfn id="dom-tbody-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26575: attribute of the <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, and
26576: <code><a href="#the-tfoot-element">tfoot</a></code> elements must <a href="#reflect">reflect</a> the content
26577: attribute of the same name.</p>
26578:
26579: <p>The <dfn id="dom-tbody-ch" role="button" tabindex="0" aria-haspopup="true"><code>ch</code></dfn> IDL attribute
26580: of the <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, and
26581: <code><a href="#the-tfoot-element">tfoot</a></code> elements must <a href="#reflect">reflect</a> the elements'
26582: <code title="attr-tbody-char"><a href="#attr-tbody-char">char</a></code> content attributes.</p>
26583:
26584: <p>The <dfn id="dom-tbody-choff" role="button" tabindex="0" aria-haspopup="true"><code>chOff</code></dfn> IDL
26585: attribute of the <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, and
26586: <code><a href="#the-tfoot-element">tfoot</a></code> elements must <a href="#reflect">reflect</a> the elements'
26587: <code title="attr-tbody-charoff"><a href="#attr-tbody-charoff">charoff</a></code> content attributes.</p>
26588:
26589: <p>The <dfn id="dom-tbody-valign" role="button" tabindex="0" aria-haspopup="true"><code>vAlign</code></dfn> IDL
26590: attribute of the <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, and
26591: <code><a href="#the-tfoot-element">tfoot</a></code> element must <a href="#reflect">reflect</a> the elements'
26592: <code title="attr-tbody-valign"><a href="#attr-tbody-valign">valign</a></code> content
26593: attributes.</p>
26594:
26595: <p>The <dfn id="dom-tdth-abbr" role="button" tabindex="0" aria-haspopup="true"><code>abbr</code></dfn>, <dfn id="dom-tdth-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn>, <dfn id="dom-tdth-axis" role="button" tabindex="0" aria-haspopup="true"><code>axis</code></dfn>, <dfn id="dom-tdth-height" role="button" tabindex="0" aria-haspopup="true"><code>height</code></dfn>, and <dfn id="dom-tdth-width" role="button" tabindex="0" aria-haspopup="true"><code>width</code></dfn> IDL attributes of
26596: the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements must
26597: <a href="#reflect">reflect</a> the respective content attributes of the same
26598: name.</p>
26599:
26600: <p>The <dfn id="dom-tdth-ch" role="button" tabindex="0" aria-haspopup="true"><code>ch</code></dfn> IDL
26601: attribute of the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements must
26602: <a href="#reflect">reflect</a> the elements' <code title="attr-tdth-char"><a href="#attr-tdth-char">char</a></code> content attributes.</p>
26603:
26604: <p>The <dfn id="dom-tdth-choff" role="button" tabindex="0" aria-haspopup="true"><code>chOff</code></dfn> IDL
26605: attribute of the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements must
26606: <a href="#reflect">reflect</a> the elements' <code title="attr-tdth-charoff"><a href="#attr-tdth-charoff">charoff</a></code> content attributes.</p>
26607:
26608: <p>The <dfn id="dom-tdth-nowrap" role="button" tabindex="0" aria-haspopup="true"><code>noWrap</code></dfn> IDL
26609: attribute of the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements must
26610: <a href="#reflect">reflect</a> the elements' <code title="attr-tdth-nowrap"><a href="#attr-tdth-nowrap">nowrap</a></code> content attributes.</p>
26611:
26612: <p>The <dfn id="dom-tdth-valign" role="button" tabindex="0" aria-haspopup="true"><code>vAlign</code></dfn> IDL
26613: attribute of the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> element must
26614: <a href="#reflect">reflect</a> the elements' <code title="attr-tdth-valign"><a href="#attr-tdth-valign">valign</a></code> content attributes.</p>
26615:
1.611 mike 26616: <p>The <dfn id="dom-tdth-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgColor</code></dfn> IDL
26617: attribute of the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements must
26618: <a href="#reflect">reflect</a> the elements' <code title="attr-tdth-bgcolor"><a href="#attr-tdth-bgcolor">bgcolor</a></code> content attributes.</p>
26619:
1.562 mike 26620: <p>The <dfn id="dom-tr-align" role="button" tabindex="0" aria-haspopup="true"><code>align</code></dfn> IDL
26621: attribute of the <code><a href="#the-tr-element">tr</a></code> element must <a href="#reflect">reflect</a>
26622: the content attribute of the same name.</p>
26623:
26624: <p>The <dfn id="dom-tr-ch" role="button" tabindex="0" aria-haspopup="true"><code>ch</code></dfn> IDL attribute of
26625: the <code><a href="#the-tr-element">tr</a></code> element must <a href="#reflect">reflect</a> the element's
26626: <code title="attr-tr-char"><a href="#attr-tr-char">char</a></code> content attribute.</p>
26627:
26628: <p>The <dfn id="dom-tr-choff" role="button" tabindex="0" aria-haspopup="true"><code>chOff</code></dfn> IDL
26629: attribute of the <code><a href="#the-tr-element">tr</a></code> element must <a href="#reflect">reflect</a>
26630: the element's <code title="attr-tr-charoff"><a href="#attr-tr-charoff">charoff</a></code> content
26631: attribute.</p>
26632:
26633: <p>The <dfn id="dom-tr-valign" role="button" tabindex="0" aria-haspopup="true"><code>vAlign</code></dfn> IDL
26634: attribute of the <code><a href="#the-tr-element">tr</a></code> element must <a href="#reflect">reflect</a>
26635: the element's <code title="attr-tr-valign"><a href="#attr-tr-valign">valign</a></code> content
26636: attribute.</p>
26637:
1.611 mike 26638: <p>The <dfn id="dom-tr-bgcolor" role="button" tabindex="0" aria-haspopup="true"><code>bgColor</code></dfn> IDL
26639: attribute of the <code><a href="#the-tr-element">tr</a></code> element must <a href="#reflect">reflect</a>
26640: the element's <code title="attr-tr-bgcolor"><a href="#attr-tr-bgcolor">bgcolor</a></code> content
26641: attribute.</p>
26642:
1.562 mike 26643: <p>The <dfn id="dom-ul-compact" role="button" tabindex="0" aria-haspopup="true"><code>compact</code></dfn> and
26644: <dfn id="dom-ul-type" role="button" tabindex="0" aria-haspopup="true"><code>type</code></dfn> IDL attributes of
26645: the <code><a href="#the-ul-element">ul</a></code> element must <a href="#reflect">reflect</a> the respective
26646: content attributes of the same name.</p>
26647:
26648: <p>The attributes of the <code><a href="#document">Document</a></code> object listed in the
26649: first column of the following table must <a href="#reflect">reflect</a> the
26650: content attribute on <a href="#the-body-element-0">the body element</a> with the name
26651: given in the corresponding cell in the second column on the same
26652: row, if <a href="#the-body-element-0">the body element</a> is a <code><a href="#the-body-element">body</a></code> element
26653: (as opposed to a <code><a href="#frameset">frameset</a></code> element). When there is no
26654: <a href="#the-body-element-0" title="the body element">body element</a> or if it is a
26655: <code><a href="#frameset">frameset</a></code> element, the attributes must instead return
26656: the empty string on getting and do nothing on setting.</p>
26657: <h2 id="iana"><span class="secno">12 </span>IANA considerations</h2><h3 id="text-html"><span class="secno">12.1 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>text/html</code></dfn></h3><p>This registration is for community review and will be submitted
26658: to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
26659: <dd>text</dd>
26660: <dt>Subtype name:</dt>
26661: <dd>html</dd>
26662: <dt>Required parameters:</dt>
26663: <dd>No required parameters</dd>
26664: <dt>Optional parameters:</dt>
26665: <dd>
26666: <dl><dt><code title="">charset</code></dt>
26667: <dd>
26668: <p>The <code title="">charset</code> parameter may be provided
26669: to definitively specify the <a href="#document-s-character-encoding">document's character
26670: encoding</a>, overriding any <a href="#character-encoding-declaration" title="character encoding
26671: declaration">character encoding declarations</a> in the
26672: document. The parameter's value must be the name of the
26673: character encoding used to serialize the file, must be a valid
26674: character encoding name, and must be an <a href="#ascii-case-insensitive">ASCII
26675: case-insensitive</a> match for the <a href="#preferred-mime-name">preferred MIME
26676: name</a> for that encoding. <a href="#refsIANACHARSET">[IANACHARSET]</a></p>
26677: </dd>
26678: </dl></dd>
26679: <dt>Encoding considerations:</dt>
1.608 mike 26680: <dd>
26681: 8bit (see the section on <a href="#character-encoding-declaration" title="character encoding
26682: declaration">character encoding declarations</a>)
26683: </dd>
1.562 mike 26684: <dt>Security considerations:</dt>
26685: <dd>
26686:
26687: <p>Entire novels have been written about the security
26688: considerations that apply to HTML documents. Many are listed in
26689: this document, to which the reader is referred for more
26690: details. Some general concerns bear mentioning here, however:</p>
26691:
26692: <p>HTML is scripted language, and has a large number of APIs (some
26693: of which are described in this document). Script can expose the
26694: user to potential risks of information leakage, credential
26695: leakage, cross-site scripting attacks, cross-site request
26696: forgeries, and a host of other problems. While the designs in this
26697: specification are intended to be safe if implemented correctly, a
26698: full implementation is a massive undertaking and, as with any
26699: software, user agents are likely to have security bugs.</p>
26700:
26701: <p>Even without scripting, there are specific features in HTML
26702: which, for historical reasons, are required for broad
26703: compatibility with legacy content but that expose the user to
26704: unfortunate security problems. In particular, the <code><a href="#the-img-element">img</a></code>
26705: element can be used in conjunction with some other features as a
26706: way to effect a port scan from the user's location on the
26707: Internet. This can expose local network topologies that the
26708: attacker would otherwise not be able to determine.</p>
26709:
26710: <p>HTML relies on a compartmentalization scheme sometimes known as
26711: the <i>same-origin policy</i>. An <a href="#origin">origin</a> in most
26712: cases consists of all the pages served from the same host, on the
26713: same port, using the same protocol.</p>
26714:
26715: <p>It is critical, therefore, to ensure that any untrusted content
26716: that forms part of a site be hosted on a different
26717: <a href="#origin">origin</a> than any sensitive content on that site.
26718: Untrusted content can easily spoof any other page on the same
26719: origin, read data from that origin, cause scripts in that origin
26720: to execute, submit forms to and from that origin even if they are
26721: protected from cross-site request forgery attacks by unique
26722: tokens, and make use of any third-party resources exposed to or
26723: rights granted to that origin.</p>
26724:
26725: </dd>
26726: <dt>Interoperability considerations:</dt>
26727: <dd>
26728: Rules for processing both conforming and non-conforming content
26729: are defined in this specification.
26730: </dd>
26731: <dt>Published specification:</dt>
26732: <dd id="authors-using-html">
26733: This document is the relevant specification. Labeling a resource
26734: with the <code><a href="#text-html">text/html</a></code> type asserts that the resource is
26735: an <a href="#html-documents" title="HTML documents">HTML document</a> using
26736: <a href="#syntax">the HTML syntax</a>.
26737: </dd>
26738: <dt>Applications that use this media type:</dt>
26739: <dd>
26740: Web browsers, tools for processing Web content, HTML authoring
26741: tools, search engines, validators.
26742: </dd>
26743: <dt>Additional information:</dt>
26744: <dd>
26745: <dl><dt>Magic number(s):</dt>
26746: <dd>No sequence of bytes can uniquely identify an HTML
26747: document. More information on detecting HTML documents is
26748: available in the Media Type Sniffing specification. <a href="#refsMIMESNIFF">[MIMESNIFF]</a></dd>
26749: <dt>File extension(s):</dt>
26750: <dd>"<code title="">html</code>" and "<code title="">htm</code>"
26751: are commonly, but certainly not exclusively, used as the
26752: extension for HTML documents.</dd>
26753: <dt>Macintosh file type code(s):</dt>
26754: <dd><code title="">TEXT</code></dd>
26755: </dl></dd>
26756: <dt>Person & email address to contact for further information:</dt>
26757: <dd>Ian Hickson <ian@hixie.ch></dd>
26758: <dt>Intended usage:</dt>
26759: <dd>Common</dd>
26760: <dt>Restrictions on usage:</dt>
26761: <dd>No restrictions apply.</dd>
26762: <dt>Author:</dt>
26763: <dd>Ian Hickson <ian@hixie.ch></dd>
26764: <dt>Change controller:</dt>
26765: <dd>W3C</dd>
26766: </dl><p>Fragment identifiers used with <code><a href="#text-html">text/html</a></code> resources
1.569 mike 26767: either refer to <a href="#the-indicated-part-of-the-document">the indicated part of the document</a> or
26768: provide state information for in-page scripts.</p><h3 id="text-html-sandboxed"><span class="secno">12.2 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>text/html-sandboxed</code></dfn></h3><p>This registration is for community review and will be submitted
1.562 mike 26769: to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
26770: <dd>text</dd>
26771: <dt>Subtype name:</dt>
26772: <dd>html-sandboxed</dd>
26773: <dt>Required parameters:</dt>
26774: <dd>No required parameters</dd>
26775: <dt>Optional parameters:</dt>
26776: <dd>Same as for <code><a href="#text-html">text/html</a></code></dd>
26777: <dt>Encoding considerations:</dt>
26778: <dd>Same as for <code><a href="#text-html">text/html</a></code></dd>
26779: <dt>Security considerations:</dt>
26780: <dd>
26781: <p>The purpose of the <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> MIME type
26782: is to provide a way for content providers to indicate that they
26783: want the file to be interpreted in a manner that does not give the
26784: file's contents access to the rest of the site. This is achieved
26785: by assigning the <code><a href="#document">Document</a></code> objects generated from
26786: resources labeled as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> unique
26787: origins.</p>
26788: <p>To avoid having legacy user agents treating resources labeled
26789: as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> as regular
26790: <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
26791: resources labeled as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code>.</p>
26792: <p>Furthermore, since the <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> MIME
26793: type impacts the origin security model, authors should be careful
26794: to prevent tampering with the MIME type labeling mechanism itself
26795: when documents are labeled as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code>. If
26796: an attacker can cause a file to be served as
26797: <code><a href="#text-html">text/html</a></code> instead of
26798: <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code>, then the sandboxing will not
26799: take effect and a cross-site scripting attack will become
26800: possible.</p>
26801: <p>Beyond this, the type is identical to <code><a href="#text-html">text/html</a></code>,
26802: and the same considerations apply.</p>
26803: </dd>
26804: <dt>Interoperability considerations:</dt>
26805: <dd>Same as for <code><a href="#text-html">text/html</a></code></dd>
26806: <dt>Published specification:</dt>
26807: <dd>
26808: This document is the relevant specification. Labeling a resource
26809: with the <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> type asserts that the
26810: resource is an <a href="#html-documents" title="HTML documents">HTML document</a>
26811: using <a href="#syntax">the HTML syntax</a>.
26812: </dd>
26813: <dt>Applications that use this media type:</dt>
26814: <dd>Same as for <code><a href="#text-html">text/html</a></code></dd>
26815: <dt>Additional information:</dt>
26816: <dd>
26817: <dl><dt>Magic number(s):</dt>
26818: <dd>Documents labeled as <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code> are
26819: heuristically indistinguishable from those labeled as
26820: <code><a href="#text-html">text/html</a></code>.</dd>
26821: <dt>File extension(s):</dt>
26822: <dd>"<code title="">sandboxed</code>"</dd>
26823: <dt>Macintosh file type code(s):</dt>
26824: <dd><code title="">TEXT</code></dd>
26825: </dl></dd>
26826: <dt>Person & email address to contact for further information:</dt>
26827: <dd>Ian Hickson <ian@hixie.ch></dd>
26828: <dt>Intended usage:</dt>
26829: <dd>Common</dd>
26830: <dt>Restrictions on usage:</dt>
26831: <dd>No restrictions apply.</dd>
26832: <dt>Author:</dt>
26833: <dd>Ian Hickson <ian@hixie.ch></dd>
26834: <dt>Change controller:</dt>
26835: <dd>W3C</dd>
26836: </dl><p>Fragment identifiers used with <code><a href="#text-html-sandboxed">text/html-sandboxed</a></code>
1.569 mike 26837: resources either refer to <a href="#the-indicated-part-of-the-document">the indicated part of the
26838: document</a> or provide state information for in-page
1.608 mike 26839: scripts.</p><h3 id="multipart-x-mixed-replace"><span class="secno">12.3 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>multipart/x-mixed-replace</code></dfn></h3><p>This registration is for community review and will be submitted
26840: to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
26841: <dd>multipart</dd>
26842: <dt>Subtype name:</dt>
26843: <dd>x-mixed-replace</dd>
26844: <dt>Required parameters:</dt>
26845: <dd>
26846: <ul class="brief"><li><code title="">boundary</code> (defined in RFC2046) <a href="#refsRFC2046">[RFC2046]</a>
26847: </li></ul></dd>
26848: <dt>Optional parameters:</dt>
26849: <dd>No optional parameters.</dd>
26850: <dt>Encoding considerations:</dt>
26851: <dd>binary</dd>
26852: <dt>Security considerations:</dt>
26853: <dd>
26854: Subresources of a <code><a href="#multipart-x-mixed-replace">multipart/x-mixed-replace</a></code>
26855: resource can be of any type, including types with non-trivial
26856: security implications such as <code><a href="#text-html">text/html</a></code>.
26857: </dd>
26858: <dt>Interoperability considerations:</dt>
26859: <dd>
26860: None.
26861: </dd>
26862: <dt>Published specification:</dt>
26863: <dd>
26864: This specification describes processing rules for Web browsers.
26865: Conformance requirements for generating resources with this type are the same as for <code>multipart/mixed</code>. <a href="#refsRFC2046">[RFC2046]</a>
26866: </dd>
26867: <dt>Applications that use this media type:</dt>
26868: <dd>
26869: This type is intended to be used in resources generated by Web servers, for consumption by Web browsers.
26870: </dd>
26871: <dt>Additional information:</dt>
26872: <dd>
26873: <dl><dt>Magic number(s):</dt>
26874: <dd>No sequence of bytes can uniquely identify a <code><a href="#multipart-x-mixed-replace">multipart/x-mixed-replace</a></code> resource.</dd>
26875: <dt>File extension(s):</dt>
26876: <dd>No specific file extensions are recommended for this type.</dd>
26877: <dt>Macintosh file type code(s):</dt>
26878: <dd>No specific Macintosh file type codes are recommended for this type.</dd>
26879: </dl></dd>
26880: <dt>Person & email address to contact for further information:</dt>
26881: <dd>Ian Hickson <ian@hixie.ch></dd>
26882: <dt>Intended usage:</dt>
26883: <dd>Common</dd>
26884: <dt>Restrictions on usage:</dt>
26885: <dd>No restrictions apply.</dd>
26886: <dt>Author:</dt>
26887: <dd>Ian Hickson <ian@hixie.ch></dd>
26888: <dt>Change controller:</dt>
26889: <dd>W3C</dd>
26890: </dl><p>Fragment identifiers used with
26891: <code><a href="#multipart-x-mixed-replace">multipart/x-mixed-replace</a></code> resources apply to each body
26892: part as defined by the type used by that body part.</p><h3 id="application-xhtml-xml"><span class="secno">12.4 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>application/xhtml+xml</code></dfn></h3><p>This registration is for community review and will be submitted
1.562 mike 26893: to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
26894: <dd>application</dd>
26895: <dt>Subtype name:</dt>
26896: <dd>xhtml+xml</dd>
26897: <dt>Required parameters:</dt>
26898: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26899: <dt>Optional parameters:</dt>
26900: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26901: <dt>Encoding considerations:</dt>
26902: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26903: <dt>Security considerations:</dt>
26904: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26905: <dt>Interoperability considerations:</dt>
26906: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26907: <dt id="authors-using-xhtml">Published specification:</dt>
26908: <dd>
26909: Labeling a resource with the <code><a href="#application-xhtml-xml">application/xhtml+xml</a></code>
26910: type asserts that the resource is an XML document that likely has
26911: a root element from the <a href="#html-namespace-0">HTML namespace</a>. As such, the
26912: relevant specifications are the XML specification, the Namespaces
26913: in XML specification, and this specification. <a href="#refsXML">[XML]</a> <a href="#refsXMLNS">[XMLNS]</a>
26914: </dd>
26915: <dt>Applications that use this media type:</dt>
26916: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26917: <dt>Additional information:</dt>
26918: <dd>
26919: <dl><dt>Magic number(s):</dt>
26920: <dd>Same as for <code>application/xml</code> <a href="#refsRFC3023">[RFC3023]</a></dd>
26921: <dt>File extension(s):</dt>
26922: <dd>"<code title="">xhtml</code>" and "<code title="">xht</code>"
26923: are sometimes used as extensions for XML resources that have a
26924: root element from the <a href="#html-namespace-0">HTML namespace</a>.</dd>
26925: <dt>Macintosh file type code(s):</dt>
26926: <dd><code title="">TEXT</code></dd>
26927: </dl></dd>
26928: <dt>Person & email address to contact for further information:</dt>
26929: <dd>Ian Hickson <ian@hixie.ch></dd>
26930: <dt>Intended usage:</dt>
26931: <dd>Common</dd>
26932: <dt>Restrictions on usage:</dt>
26933: <dd>No restrictions apply.</dd>
26934: <dt>Author:</dt>
26935: <dd>Ian Hickson <ian@hixie.ch></dd>
26936: <dt>Change controller:</dt>
26937: <dd>W3C</dd>
26938: </dl><p>Fragment identifiers used with <code><a href="#application-xhtml-xml">application/xhtml+xml</a></code>
26939: resources have the same semantics as with any <a href="#xml-mime-type">XML MIME
1.608 mike 26940: type</a>. <a href="#refsRFC3023">[RFC3023]</a></p><h3 id="application-x-www-form-urlencoded"><span class="secno">12.5 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>application/x-www-form-urlencoded</code></dfn></h3><p>This registration is for community review and will be submitted
1.562 mike 26941: to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
26942: <dd>application</dd>
26943: <dt>Subtype name:</dt>
26944: <dd>x-www-form-urlencoded</dd>
26945: <dt>Required parameters:</dt>
26946: <dd>No parameters</dd>
26947: <dt>Optional parameters:</dt>
26948: <dd>No parameters</dd>
26949: <dt>Encoding considerations:</dt>
1.608 mike 26950: <dd>7bit (US-ASCII encoding of octets that themselves can be encoding text using any <a href="#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>)</dd>
1.562 mike 26951: <dt>Security considerations:</dt>
26952: <dd>
26953: <p>In isolation, an <code><a href="#application-x-www-form-urlencoded">application/x-www-form-urlencoded</a></code>
26954: payload poses no security risks. However, as this type is usually
26955: used as part of a form submission, all the risks that apply to
26956: HTML forms need to be considered in the context of this type.</p>
26957: </dd>
26958: <dt>Interoperability considerations:</dt>
26959: <dd>
26960: Rules for generating and processing
26961: <code><a href="#application-x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> payloads are
26962: defined in this specification.
26963: </dd>
26964: <dt>Published specification:</dt>
26965: <dd>
26966: This document is the relevant specification.
26967: </dd>
26968: <dt>Applications that use this media type:</dt>
26969: <dd>
26970: Web browsers and servers.
26971: </dd>
26972: <dt>Additional information:</dt>
26973: <dd>
26974: <dl><dt>Magic number(s):</dt>
26975: <dd>There is no reliable mechanism for recognising <code><a href="#application-x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> payloads.</dd>
26976: <dt>File extension(s):</dt>
26977: <dd>Not applicable.</dd>
26978: <dt>Macintosh file type code(s):</dt>
26979: <dd>Not applicable.</dd>
26980: </dl></dd>
26981: <dt>Person & email address to contact for further information:</dt>
26982: <dd>Ian Hickson <ian@hixie.ch></dd>
26983: <dt>Intended usage:</dt>
26984: <dd>Common</dd>
26985: <dt>Restrictions on usage:</dt>
26986: <dd>This type is only intended to be used to describe HTML form
26987: submission payloads.</dd>
26988: <dt>Author:</dt>
26989: <dd>Ian Hickson <ian@hixie.ch></dd>
26990: <dt>Change controller:</dt>
26991: <dd>W3C</dd>
26992: </dl><p>Fragment identifiers have no meaning with the
26993: <code><a href="#application-x-www-form-urlencoded">application/x-www-form-urlencoded</a></code> type as this type is
26994: only used for uploaded payloads that do not have <a href="#url">URL</a>
1.608 mike 26995: identifiers.</p><h3 id="text-cache-manifest"><span class="secno">12.6 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>text/cache-manifest</code></dfn></h3><p>This registration is for community review and will be submitted
1.562 mike 26996: to the IESG for review, approval, and registration with IANA.</p><dl><dt>Type name:</dt>
26997: <dd>text</dd>
26998: <dt>Subtype name:</dt>
26999: <dd>cache-manifest</dd>
27000: <dt>Required parameters:</dt>
27001: <dd>No parameters</dd>
27002: <dt>Optional parameters:</dt>
27003: <dd>No parameters</dd>
27004: <dt>Encoding considerations:</dt>
1.608 mike 27005: <dd>8bit (always UTF-8)</dd>
1.562 mike 27006: <dt>Security considerations:</dt>
27007: <dd>
27008: <p>Cache manifests themselves pose no immediate risk unless
27009: sensitive information is included within the
27010: manifest. Implementations, however, are required to follow
27011: specific rules when populating a cache based on a cache manifest,
27012: to ensure that certain origin-based restrictions are
27013: honored. Failure to correctly implement these rules can result in
27014: information leakage, cross-site scripting attacks, and the
27015: like.</p>
27016: </dd>
27017: <dt>Interoperability considerations:</dt>
27018: <dd>
27019: Rules for processing both conforming and non-conforming content
27020: are defined in this specification.
27021: </dd>
27022: <dt>Published specification:</dt>
27023: <dd>
27024: This document is the relevant specification.
27025: </dd>
27026: <dt>Applications that use this media type:</dt>
27027: <dd>
27028: Web browsers.
27029: </dd>
27030: <dt>Additional information:</dt>
27031: <dd>
27032: <dl><dt>Magic number(s):</dt>
27033: <dd>Cache manifests begin with the string "<code title="">CACHE
27034: MANIFEST</code>", followed by either a U+0020 SPACE character, a
27035: U+0009 CHARACTER TABULATION (tab) character, a U+000A LINE FEED
27036: (LF) character, or a U+000D CARRIAGE RETURN (CR) character.</dd>
27037: <dt>File extension(s):</dt>
27038: <dd>"<code title="">appcache</code>"</dd>
27039: <dt>Macintosh file type code(s):</dt>
27040: <dd>No specific Macintosh file type codes are recommended for this type.</dd>
27041: </dl></dd>
27042: <dt>Person & email address to contact for further information:</dt>
27043: <dd>Ian Hickson <ian@hixie.ch></dd>
27044: <dt>Intended usage:</dt>
27045: <dd>Common</dd>
27046: <dt>Restrictions on usage:</dt>
27047: <dd>No restrictions apply.</dd>
27048: <dt>Author:</dt>
27049: <dd>Ian Hickson <ian@hixie.ch></dd>
27050: <dt>Change controller:</dt>
27051: <dd>W3C</dd>
27052: </dl><p>Fragment identifiers have no meaning with
1.608 mike 27053: <code><a href="#text-cache-manifest">text/cache-manifest</a></code> resources.</p><h3 id="web-scheme-prefix"><span class="secno">12.7 </span><dfn role="button" tabindex="0" aria-haspopup="true"><code>web+</code> scheme prefix</dfn></h3><p>This section describes a convention for use with the IANA URI
1.572 mike 27054: scheme registry. It does not itself register a specific scheme. <a href="#refsRFC4395">[RFC4395]</a></p><dl><dt>URI scheme name</dt>
27055: <dd>
27056: Schemes starting with the four characters "<code title="">web+</code>" followed by one or more letters in the range
27057: <code title="">a</code>-<code title="">z</code>.
27058: </dd>
27059: <dt>Status</dt>
27060: <dd>permanent</dd>
27061: <dt>URI scheme syntax</dt>
27062: <dd>Scheme-specific.</dd>
27063: <dt>URI scheme semantics</dt>
27064: <dd>Scheme-specific.</dd>
27065: <dt>Encoding considerations</dt>
27066: <dd>All "<code title="">web+</code>" schemes should use UTF-8 encodings were relevant.</dd>
27067: <dt>Applications/protocols that use this URI scheme name</dt>
27068: <dd>Scheme-specific.</dd>
27069: <dt>Interoperability considerations</dt>
27070: <dd>The scheme is expected to be used in the context of Web applications.</dd>
27071: <dt>Security considerations</dt>
27072: <dd>
27073: Any Web page is able to register a handler for all "<code title="">web+</code>" schemes. As such, these schemes must not be
27074: used for features intended to be core platform features (e.g.
27075: network transfer protocols like HTTP or FTP). Similarly, such
27076: schemes must not store confidential information in their URLs,
27077: such as usernames, passwords, personal information, or
27078: confidential project names.
27079: </dd>
27080: <dt>Contact</dt>
27081: <dd>Ian Hickson <ian@hixie.ch></dd>
27082: <dt>Author/Change controller</dt>
27083: <dd>Ian Hickson <ian@hixie.ch></dd>
27084: <dt>References</dt>
27085: <dd>W3C</dd>
27086: </dl><h2 class="no-num" id="index">Index</h2><h3 class="no-num" id="elements-1">Elements</h3><p><i>This section is non-normative.</i></p><table><caption>List of elements</caption>
1.562 mike 27087: <thead><tr><th> Element
27088: </th><th> Description
27089: </th><th> Categories
27090: </th><th> Parents†
27091: </th><th> Children
27092: </th><th> Attributes
27093: </th><th> Interface
27094: </th></tr></thead><tbody><tr><th><code><a href="#the-a-element">a</a></code></th>
27095: <td>Hyperlink</td>
27096: <td><a href="#flow-content" title="Flow content">flow</a>;
27097: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*;
27098: <a href="#interactive-content" title="Interactive content">interactive</a></td>
27099: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27100: <td><a href="#transparent">transparent</a>*</td>
27101: <td><a href="#global-attributes" title="global attributes">globals</a>;
27102: <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>;
27103: <code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">target</a></code>;
27104: <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code>;
27105: <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code>;
27106: <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code>;
27107: <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code></td>
27108: <td><code><a href="#htmlanchorelement">HTMLAnchorElement</a></code></td>
27109: </tr><tr><th><code><a href="#the-abbr-element">abbr</a></code></th>
27110: <td>Abbreviation</td>
27111: <td><a href="#flow-content" title="Flow content">flow</a>;
27112: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27113: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27114: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27115: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27116: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27117: </tr><tr><th><code><a href="#the-address-element">address</a></code></th>
27118: <td>Contact information for a page or <code><a href="#the-article-element">article</a></code> element</td>
1.602 mike 27119: <td><a href="#flow-content" title="Flow content">flow</a></td>
1.562 mike 27120: <td><a href="#flow-content" title="Flow content">flow</a></td>
27121: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
27122: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27123: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27124: </tr><tr><th><code><a href="#the-area-element">area</a></code></th>
27125: <td>Hyperlink or dead area on an image map</td>
27126: <td><a href="#flow-content" title="Flow content">flow</a>;
27127: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27128: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27129: <td>empty</td>
27130: <td><a href="#global-attributes" title="global attributes">globals</a>;
27131: <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>;
27132: <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code>;
27133: <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>;
27134: <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>;
27135: <code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">target</a></code>;
27136: <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code>;
27137: <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code>;
27138: <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code>;
27139: <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code></td>
27140: <td><code><a href="#htmlareaelement">HTMLAreaElement</a></code></td>
27141: </tr><tr><th><code><a href="#the-article-element">article</a></code></th>
27142: <td>Self-contained syndicatable or reusable composition</td>
27143: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27144: <a href="#sectioning-content" title="Sectioning content">sectioning</a></td>
1.562 mike 27145: <td><a href="#flow-content" title="Flow content">flow</a></td>
27146: <td><a href="#flow-content" title="Flow content">flow</a></td>
27147: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27148: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27149: </tr><tr><th><code><a href="#the-aside-element">aside</a></code></th>
27150: <td>Sidebar for tangentially related content</td>
27151: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27152: <a href="#sectioning-content" title="Sectioning content">sectioning</a></td>
1.562 mike 27153: <td><a href="#flow-content" title="Flow content">flow</a></td>
27154: <td><a href="#flow-content" title="Flow content">flow</a></td>
27155: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27156: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27157: </tr><tr><th><code><a href="#the-audio-element">audio</a></code></th>
27158: <td>Audio player</td>
27159: <td><a href="#flow-content" title="Flow content">flow</a>;
27160: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27161: <a href="#embedded-content" title="Embedded content">embedded</a>;
27162: <a href="#interactive-content" title="Interactive content">interactive</a></td>
27163: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27164: <td><code><a href="#the-source-element">source</a></code>*;
27165: <a href="#transparent">transparent</a>*</td>
27166: <td><a href="#global-attributes" title="global attributes">globals</a>;
27167: <code title="attr-media-src"><a href="#attr-media-src">src</a></code>;
27168: <code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">crossorigin</a></code>;
27169: <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code>;
27170: <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code>;
27171: <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code>;
27172: <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>;
27173: <code title="attr-media-muted"><a href="#attr-media-muted">muted</a></code>;
27174: <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code></td>
27175: <td><code><a href="#htmlaudioelement">HTMLAudioElement</a></code></td>
27176: </tr><tr><th><code><a href="#the-b-element">b</a></code></th>
27177: <td>Keywords</td>
27178: <td><a href="#flow-content" title="Flow content">flow</a>;
27179: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27180: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27181: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27182: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27183: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27184: </tr><tr><th><code><a href="#the-base-element">base</a></code></th>
27185: <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>
27186: <td><a href="#metadata-content" title="Metadata content">metadata</a></td>
27187: <td><code><a href="#the-head-element">head</a></code></td>
27188: <td>empty</td>
27189: <td><a href="#global-attributes" title="global attributes">globals</a>;
27190: <code title="attr-base-href"><a href="#attr-base-href">href</a></code>;
27191: <code title="attr-base-target"><a href="#attr-base-target">target</a></code></td>
27192: <td><code><a href="#htmlbaseelement">HTMLBaseElement</a></code></td>
27193: </tr><tr><th><code><a href="#the-bdi-element">bdi</a></code></th>
27194: <td>Text directionality isolation</td>
27195: <td><a href="#flow-content" title="Flow content">flow</a>;
27196: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27197: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27198: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27199: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27200: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27201: </tr><tr><th><code><a href="#the-bdo-element">bdo</a></code></th>
27202: <td>Text directionality formatting</td>
27203: <td><a href="#flow-content" title="Flow content">flow</a>;
27204: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27205: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27206: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27207: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27208: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27209: </tr><tr><th><code><a href="#the-blockquote-element">blockquote</a></code></th>
27210: <td>A section quoted from another source</td>
27211: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27212: <a href="#sectioning-root" title="Sectioning root">sectioning root</a></td>
1.562 mike 27213: <td><a href="#flow-content" title="Flow content">flow</a></td>
27214: <td><a href="#flow-content" title="Flow content">flow</a></td>
27215: <td><a href="#global-attributes" title="global attributes">globals</a>;
27216: <code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code></td>
27217: <td><code><a href="#htmlquoteelement">HTMLQuoteElement</a></code></td>
27218: </tr><tr><th><code><a href="#the-body-element">body</a></code></th>
27219: <td>Document body</td>
27220: <td><a href="#sectioning-root" title="Sectioning root">sectioning root</a></td>
27221: <td><code><a href="#the-html-element">html</a></code></td>
27222: <td><a href="#flow-content" title="Flow content">flow</a></td>
27223: <td><a href="#global-attributes" title="global attributes">globals</a>;
27224: <code title="handler-window-onafterprint"><a href="#handler-window-onafterprint">onafterprint</a></code>;
27225: <code title="handler-window-onbeforeprint"><a href="#handler-window-onbeforeprint">onbeforeprint</a></code>;
27226: <code title="handler-window-onbeforeunload"><a href="#handler-window-onbeforeunload">onbeforeunload</a></code>;
27227: <code title="handler-window-onblur"><a href="#handler-window-onblur">onblur</a></code>;
27228: <code title="handler-window-onerror"><a href="#handler-window-onerror">onerror</a></code>;
27229: <code title="handler-window-onfocus"><a href="#handler-window-onfocus">onfocus</a></code>;
27230: <code title="handler-window-onhashchange"><a href="#handler-window-onhashchange">onhashchange</a></code>;
27231: <code title="handler-window-onload"><a href="#handler-window-onload">onload</a></code>;
27232: <code title="handler-window-onmessage"><a href="#handler-window-onmessage">onmessage</a></code>;
27233: <code title="handler-window-onoffline"><a href="#handler-window-onoffline">onoffline</a></code>;
27234: <code title="handler-window-ononline"><a href="#handler-window-ononline">ononline</a></code>;
27235: <code title="handler-window-onpagehide"><a href="#handler-window-onpagehide">onpagehide</a></code>;
27236: <code title="handler-window-onpageshow"><a href="#handler-window-onpageshow">onpageshow</a></code>;
27237: <code title="handler-window-onpopstate"><a href="#handler-window-onpopstate">onpopstate</a></code>;
27238: <code title="handler-window-onresize"><a href="#handler-window-onresize">onresize</a></code>;
27239: <code title="handler-window-onscroll"><a href="#handler-window-onscroll">onscroll</a></code>;
27240: <code title="handler-window-onstorage"><a href="#handler-window-onstorage">onstorage</a></code>;
27241: <code title="handler-window-onunload"><a href="#handler-window-onunload">onunload</a></code></td>
27242: <td><code><a href="#htmlbodyelement">HTMLBodyElement</a></code></td>
27243: </tr><tr><th><code><a href="#the-br-element">br</a></code></th>
27244: <td>Line break, e.g. in poem or postal address</td>
27245: <td><a href="#flow-content" title="Flow content">flow</a>;
27246: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27247: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27248: <td>empty</td>
27249: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27250: <td><code><a href="#htmlbrelement">HTMLBRElement</a></code></td>
27251: </tr><tr><th><code><a href="#the-button-element">button</a></code></th>
27252: <td>Button control</td>
27253: <td><a href="#flow-content" title="Flow content">flow</a>;
27254: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27255: <a href="#interactive-content" title="Interactive content">interactive</a>;
27256: <a href="#category-listed" title="category-listed">listed</a>;
27257: <a href="#category-label" title="category-label">labelable</a>;
27258: <a href="#category-submit" title="category-submit">submittable</a>;
27259: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27260: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27261: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27262: <td><a href="#global-attributes" title="global attributes">globals</a>;
27263: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>;
27264: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code>;
27265: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27266: <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>;
27267: <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>;
27268: <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>;
27269: <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>;
27270: <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>;
27271: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>;
27272: <code title="attr-button-type"><a href="#attr-button-type">type</a></code>;
27273: <code title="attr-button-value"><a href="#attr-button-value">value</a></code></td>
27274: <td><code><a href="#htmlbuttonelement">HTMLButtonElement</a></code></td>
27275: </tr><tr><th><code><a href="#the-canvas-element">canvas</a></code></th>
27276: <td>Scriptable bitmap canvas</td>
27277: <td><a href="#flow-content" title="Flow content">flow</a>;
27278: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27279: <a href="#embedded-content" title="Embedded content">embedded</a></td>
27280: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27281: <td><a href="#transparent">transparent</a></td>
27282: <td><a href="#global-attributes" title="global attributes">globals</a>;
27283: <code title="attr-canvas-width"><a href="#attr-canvas-width">width</a></code>;
27284: <code title="attr-canvas-height"><a href="#attr-canvas-height">height</a></code></td>
27285: <td><code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code></td>
27286: </tr><tr><th><code><a href="#the-caption-element">caption</a></code></th>
27287: <td>Table caption</td>
27288: <td>none</td>
27289: <td><code><a href="#the-table-element">table</a></code></td>
27290: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
27291: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27292: <td><code><a href="#htmltablecaptionelement">HTMLTableCaptionElement</a></code></td>
27293: </tr><tr><th><code><a href="#the-cite-element">cite</a></code></th>
27294: <td>Title of a work</td>
27295: <td><a href="#flow-content" title="Flow content">flow</a>;
27296: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27297: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27298: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27299: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27300: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27301: </tr><tr><th><code><a href="#the-code-element">code</a></code></th>
27302: <td>Computer code</td>
27303: <td><a href="#flow-content" title="Flow content">flow</a>;
27304: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27305: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27306: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27307: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27308: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27309: </tr><tr><th><code><a href="#the-col-element">col</a></code></th>
27310: <td>Table column</td>
27311: <td>none</td>
27312: <td><code><a href="#the-colgroup-element">colgroup</a></code></td>
27313: <td>empty</td>
27314: <td><a href="#global-attributes" title="global attributes">globals</a>;
27315: <code title="attr-col-span"><a href="#attr-col-span">span</a></code></td>
27316: <td><code><a href="#htmltablecolelement">HTMLTableColElement</a></code></td>
27317: </tr><tr><th><code><a href="#the-colgroup-element">colgroup</a></code></th>
27318: <td>Group of columns in a table</td>
27319: <td>none</td>
27320: <td><code><a href="#the-table-element">table</a></code></td>
27321: <td><code><a href="#the-col-element">col</a></code></td>
27322: <td><a href="#global-attributes" title="global attributes">globals</a>;
27323: <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code></td>
27324: <td><code><a href="#htmltablecolelement">HTMLTableColElement</a></code></td>
27325: </tr><tr><th><code><a href="#the-command-element">command</a></code></th>
27326: <td>Menu command</td>
27327: <td><a href="#metadata-content" title="Metadata content">metadata</a>;
27328: <a href="#flow-content" title="Flow content">flow</a>;
27329: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27330: <td><code><a href="#the-head-element">head</a></code>;
27331: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27332: <td>empty</td>
27333: <td><a href="#global-attributes" title="global attributes">globals</a>;
27334: <code title="attr-command-type"><a href="#attr-command-type">type</a></code>;
27335: <code title="attr-command-label"><a href="#attr-command-label">label</a></code>;
27336: <code title="attr-command-icon"><a href="#attr-command-icon">icon</a></code>;
27337: <code title="attr-command-disabled"><a href="#attr-command-disabled">disabled</a></code>;
27338: <code title="attr-command-checked"><a href="#attr-command-checked">checked</a></code>;
27339: <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">radiogroup</a></code></td>
27340: <td><code><a href="#htmlcommandelement">HTMLCommandElement</a></code></td>
27341: </tr><tr><th><code><a href="#the-datalist-element">datalist</a></code></th>
27342: <td>Container for options for <a href="#attr-input-list" title="attr-input-list">combo box control</a></td>
27343: <td><a href="#flow-content" title="Flow content">flow</a>;
27344: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27345: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27346: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27347: <code><a href="#the-option-element">option</a></code></td>
27348: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27349: <td><code><a href="#htmldatalistelement">HTMLDataListElement</a></code></td>
27350: </tr><tr><th><code><a href="#the-dd-element">dd</a></code></th>
27351: <td>Content for corresponding <code><a href="#the-dt-element">dt</a></code> element(s)</td>
27352: <td>none</td>
27353: <td><code><a href="#the-dl-element">dl</a></code></td>
27354: <td><a href="#flow-content" title="Flow content">flow</a></td>
27355: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27356: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27357: </tr><tr><th><code><a href="#the-del-element">del</a></code></th>
27358: <td>A removal from the document</td>
27359: <td><a href="#flow-content" title="Flow content">flow</a>;
27360: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27361: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27362: <td><a href="#transparent">transparent</a></td>
27363: <td><a href="#global-attributes" title="global attributes">globals</a>;
27364: <code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code>;
27365: <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code></td>
27366: <td><code><a href="#htmlmodelement">HTMLModElement</a></code></td>
27367: </tr><tr><th><code><a href="#the-details-element">details</a></code></th>
27368: <td>Disclosure control for hiding details</td>
27369: <td><a href="#flow-content" title="Flow content">flow</a>;
27370: <a href="#sectioning-root" title="Sectioning root">sectioning root</a>;
27371: <a href="#interactive-content" title="Interactive content">interactive</a></td>
27372: <td><a href="#flow-content" title="Flow content">flow</a></td>
27373: <td><code><a href="#the-summary-element">summary</a></code>*;
27374: <a href="#flow-content" title="Flow content">flow</a></td>
27375: <td><a href="#global-attributes" title="global attributes">globals</a>;
27376: <code title="attr-details-open"><a href="#attr-details-open">open</a></code></td>
27377: <td><code><a href="#htmldetailselement">HTMLDetailsElement</a></code></td>
27378: </tr><tr><th><code><a href="#the-dfn-element">dfn</a></code></th>
27379: <td>Defining instance</td>
27380: <td><a href="#flow-content" title="Flow content">flow</a>;
27381: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27382: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27383: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27384: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27385: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27386: </tr><tr><th><code><a href="#the-div-element">div</a></code></th>
27387: <td>Generic flow container</td>
1.602 mike 27388: <td><a href="#flow-content" title="Flow content">flow</a></td>
1.562 mike 27389: <td><a href="#flow-content" title="Flow content">flow</a></td>
27390: <td><a href="#flow-content" title="Flow content">flow</a></td>
27391: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27392: <td><code><a href="#htmldivelement">HTMLDivElement</a></code></td>
27393: </tr><tr><th><code><a href="#the-dl-element">dl</a></code></th>
27394: <td>Association list consisting of zero or more name-value groups</td>
27395: <td><a href="#flow-content" title="Flow content">flow</a></td>
27396: <td><a href="#flow-content" title="Flow content">flow</a></td>
27397: <td><code><a href="#the-dt-element">dt</a></code>*;
27398: <code><a href="#the-dd-element">dd</a></code>*</td>
27399: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27400: <td><code><a href="#htmldlistelement">HTMLDListElement</a></code></td>
27401: </tr><tr><th><code><a href="#the-dt-element">dt</a></code></th>
27402: <td>Legend for corresponding <code><a href="#the-dd-element">dd</a></code> element(s)</td>
27403: <td>none</td>
27404: <td><code><a href="#the-dl-element">dl</a></code></td>
1.620 mike 27405: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
1.562 mike 27406: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27407: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27408: </tr><tr><th><code><a href="#the-em-element">em</a></code></th>
27409: <td>Stress emphasis</td>
27410: <td><a href="#flow-content" title="Flow content">flow</a>;
27411: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27412: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27413: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27414: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27415: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27416: </tr><tr><th><code><a href="#the-embed-element">embed</a></code></th>
27417: <td><a href="#plugin">Plugin</a></td>
27418: <td><a href="#flow-content" title="Flow content">flow</a>;
27419: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27420: <a href="#embedded-content" title="Embedded content">embedded</a>;
27421: <a href="#interactive-content" title="Interactive content">interactive</a></td>
27422: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27423: <td>empty</td>
27424: <td><a href="#global-attributes" title="global attributes">globals</a>;
27425: <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code>;
27426: <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code>;
27427: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code>;
27428: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code>;
27429: any*</td>
27430: <td><code><a href="#htmlembedelement">HTMLEmbedElement</a></code></td>
27431: </tr><tr><th><code><a href="#the-fieldset-element">fieldset</a></code></th>
27432: <td>Group of form controls</td>
27433: <td><a href="#flow-content" title="Flow content">flow</a>;
27434: <a href="#sectioning-root" title="Sectioning root">sectioning root</a>;
27435: <a href="#category-listed" title="category-listed">listed</a>;
27436: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27437: <td><a href="#flow-content" title="Flow content">flow</a></td>
27438: <td><code><a href="#the-legend-element">legend</a></code>*;
27439: <a href="#flow-content" title="Flow content">flow</a></td>
27440: <td><a href="#global-attributes" title="global attributes">globals</a>;
27441: <code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">disabled</a></code>;
27442: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27443: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></td>
27444: <td><code><a href="#htmlfieldsetelement">HTMLFieldSetElement</a></code></td>
27445: </tr><tr><th><code><a href="#the-figcaption-element">figcaption</a></code></th>
27446: <td>Caption for <code><a href="#the-figure-element">figure</a></code></td>
27447: <td>none</td>
27448: <td><code><a href="#the-figure-element">figure</a></code></td>
27449: <td><a href="#flow-content" title="Flow content">flow</a></td>
27450: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27451: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27452: </tr><tr><th><code><a href="#the-figure-element">figure</a></code></th>
27453: <td>Figure with optional caption</td>
27454: <td><a href="#flow-content" title="Flow content">flow</a>;
27455: <a href="#sectioning-root" title="Sectioning root">sectioning root</a></td>
27456: <td><a href="#flow-content" title="Flow content">flow</a></td>
27457: <td><code><a href="#the-figcaption-element">figcaption</a></code>*;
27458: <a href="#flow-content" title="Flow content">flow</a></td>
27459: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27460: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27461: </tr><tr><th><code><a href="#the-footer-element">footer</a></code></th>
27462: <td>Footer for a page or section</td>
1.602 mike 27463: <td><a href="#flow-content" title="Flow content">flow</a></td>
1.562 mike 27464: <td><a href="#flow-content" title="Flow content">flow</a></td>
27465: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
27466: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27467: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27468: </tr><tr><th><code><a href="#the-form-element">form</a></code></th>
27469: <td>User-submittable form</td>
27470: <td><a href="#flow-content" title="Flow content">flow</a></td>
27471: <td><a href="#flow-content" title="Flow content">flow</a></td>
27472: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
27473: <td><a href="#global-attributes" title="global attributes">globals</a>;
27474: <code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code>;
27475: <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>;
27476: <code title="attr-form-autocomplete"><a href="#attr-form-autocomplete">autocomplete</a></code>;
27477: <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code>;
27478: <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code>;
27479: <code title="attr-form-name"><a href="#attr-form-name">name</a></code>;
27480: <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code>;
27481: <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code></td>
27482: <td><code><a href="#htmlformelement">HTMLFormElement</a></code></td>
27483: </tr><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>
27484: <td>Section heading</td>
27485: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27486: <a href="#heading-content" title="Heading content">heading</a></td>
1.562 mike 27487: <td><code><a href="#the-hgroup-element">hgroup</a></code>;
27488: <a href="#flow-content" title="Flow content">flow</a></td>
27489: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27490: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27491: <td><code><a href="#htmlheadingelement">HTMLHeadingElement</a></code></td>
27492: </tr><tr><th><code><a href="#the-head-element">head</a></code></th>
27493: <td>Container for document metadata</td>
27494: <td>none</td>
27495: <td><code><a href="#the-html-element">html</a></code></td>
27496: <td><a href="#metadata-content" title="Metadata content">metadata content</a>*</td>
27497: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27498: <td><code><a href="#htmlheadelement">HTMLHeadElement</a></code></td>
27499: </tr><tr><th><code><a href="#the-header-element">header</a></code></th>
27500: <td>Introductory or navigational aids for a page or section</td>
1.602 mike 27501: <td><a href="#flow-content" title="Flow content">flow</a></td>
1.562 mike 27502: <td><a href="#flow-content" title="Flow content">flow</a></td>
27503: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
27504: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27505: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27506: </tr><tr><th><code><a href="#the-hgroup-element">hgroup</a></code></th>
27507: <td>heading group</td>
27508: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27509: <a href="#heading-content" title="Heading content">heading</a></td>
1.562 mike 27510: <td><a href="#flow-content" title="Flow content">flow</a></td>
27511: <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>
27512: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27513: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27514: </tr><tr><th><code><a href="#the-hr-element">hr</a></code></th>
27515: <td>Thematic break</td>
27516: <td><a href="#flow-content" title="Flow content">flow</a></td>
27517: <td><a href="#flow-content" title="Flow content">flow</a></td>
27518: <td>empty</td>
27519: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27520: <td><code><a href="#htmlhrelement">HTMLHRElement</a></code></td>
27521: </tr><tr><th><code><a href="#the-html-element">html</a></code></th>
27522: <td>Root element</td>
27523: <td>none</td>
27524: <td>none*</td>
27525: <td><code><a href="#the-head-element">head</a></code>*;
27526: <code><a href="#the-body-element">body</a></code>*</td>
27527: <td><a href="#global-attributes" title="global attributes">globals</a>;
27528: <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code></td>
27529: <td><code><a href="#htmlhtmlelement">HTMLHtmlElement</a></code></td>
27530: </tr><tr><th><code><a href="#the-i-element">i</a></code></th>
27531: <td>Alternate voice</td>
27532: <td><a href="#flow-content" title="Flow content">flow</a>;
27533: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27534: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27535: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27536: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27537: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27538: </tr><tr><th><code><a href="#the-iframe-element">iframe</a></code></th>
27539: <td><a href="#nested-browsing-context">Nested browsing context</a></td>
27540: <td><a href="#flow-content" title="Flow content">flow</a>;
27541: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27542: <a href="#embedded-content" title="Embedded content">embedded</a>;
27543: <a href="#interactive-content" title="Interactive content">interactive</a></td>
27544: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27545: <td>text*</td>
27546: <td><a href="#global-attributes" title="global attributes">globals</a>;
27547: <code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code>;
27548: <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">srcdoc</a></code>;
27549: <code title="attr-iframe-name"><a href="#attr-iframe-name">name</a></code>;
27550: <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code>;
27551: <code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">seamless</a></code>;
27552: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code>;
27553: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></td>
27554: <td><code><a href="#htmliframeelement">HTMLIFrameElement</a></code></td>
27555: </tr><tr><th><code><a href="#the-img-element">img</a></code></th>
27556: <td>Image</td>
27557: <td><a href="#flow-content" title="Flow content">flow</a>;
27558: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27559: <a href="#embedded-content" title="Embedded content">embedded</a>;
27560: <a href="#interactive-content" title="Interactive content">interactive</a>*</td>
27561: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27562: <td>empty</td>
27563: <td><a href="#global-attributes" title="global attributes">globals</a>;
27564: <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>;
27565: <code title="attr-img-src"><a href="#attr-img-src">src</a></code>;
27566: <code title="attr-img-crossorigin"><a href="#attr-img-crossorigin">crossorigin</a></code>;
27567: <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code>;
27568: <code title="attr-img-ismap"><a href="#attr-img-ismap">ismap</a></code>;
27569: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code>;
27570: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></td>
27571: <td><code><a href="#htmlimageelement">HTMLImageElement</a></code></td>
27572: </tr><tr><th><code><a href="#the-input-element">input</a></code></th>
27573: <td>Form control</td>
27574: <td><a href="#flow-content" title="Flow content">flow</a>;
27575: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27576: <a href="#interactive-content" title="Interactive content">interactive</a>*;
27577: <a href="#category-listed" title="category-listed">listed</a>;
27578: <a href="#category-label" title="category-label">labelable</a>;
27579: <a href="#category-submit" title="category-submit">submittable</a>;
27580: <a href="#category-reset" title="category-reset">resettable</a>;
27581: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27582: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27583: <td>empty</td>
27584: <td><a href="#global-attributes" title="global attributes">globals</a>;
27585: <code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>;
27586: <code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>;
27587: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code>;
27588: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>;
27589: <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code>;
27590: <code title="attr-input-dirname"><a href="#attr-input-dirname">dirname</a></code>;
27591: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code>;
27592: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27593: <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>;
27594: <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>;
27595: <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>;
27596: <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>;
27597: <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>;
27598: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code>;
27599: <code title="attr-input-list"><a href="#attr-input-list">list</a></code>;
27600: <code title="attr-input-max"><a href="#attr-input-max">max</a></code>;
27601: <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code>;
27602: <code title="attr-input-min"><a href="#attr-input-min">min</a></code>;
27603: <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code>;
27604: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>;
27605: <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code>;
27606: <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>;
27607: <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code>;
27608: <code title="attr-input-required"><a href="#attr-input-required">required</a></code>;
27609: <code title="attr-input-size"><a href="#attr-input-size">size</a></code>;
27610: <code title="attr-input-src"><a href="#attr-input-src">src</a></code>;
27611: <code title="attr-input-step"><a href="#attr-input-step">step</a></code>;
27612: <code title="attr-input-type"><a href="#attr-input-type">type</a></code>;
27613: <code title="attr-input-value"><a href="#attr-input-value">value</a></code>;
27614: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code></td>
27615: <td><code><a href="#htmlinputelement">HTMLInputElement</a></code></td>
27616: </tr><tr><th><code><a href="#the-ins-element">ins</a></code></th>
27617: <td>An addition to the document</td>
27618: <td><a href="#flow-content" title="Flow content">flow</a>;
27619: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27620: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27621: <td><a href="#transparent">transparent</a></td>
27622: <td><a href="#global-attributes" title="global attributes">globals</a>;
27623: <code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code>;
27624: <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code></td>
27625: <td><code><a href="#htmlmodelement">HTMLModElement</a></code></td>
27626: </tr><tr><th><code><a href="#the-kbd-element">kbd</a></code></th>
27627: <td>User input</td>
27628: <td><a href="#flow-content" title="Flow content">flow</a>;
27629: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27630: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27631: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27632: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27633: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27634: </tr><tr><th><code><a href="#the-keygen-element">keygen</a></code></th>
27635: <td>Cryptographic key-pair generator form control</td>
27636: <td><a href="#flow-content" title="Flow content">flow</a>;
27637: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27638: <a href="#interactive-content" title="Interactive content">interactive</a>;
27639: <a href="#category-listed" title="category-listed">listed</a>;
27640: <a href="#category-label" title="category-label">labelable</a>;
27641: <a href="#category-submit" title="category-submit">submittable</a>;
27642: <a href="#category-reset" title="category-reset">resettable</a>;
27643: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27644: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27645: <td>empty</td>
27646: <td><a href="#global-attributes" title="global attributes">globals</a>;
27647: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>;
27648: <code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">challenge</a></code>;
27649: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code>;
27650: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27651: <code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keytype</a></code>;
27652: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></td>
27653: <td><code><a href="#htmlkeygenelement">HTMLKeygenElement</a></code></td>
27654: </tr><tr><th><code><a href="#the-label-element">label</a></code></th>
27655: <td>Caption for a form control</td>
27656: <td><a href="#flow-content" title="Flow content">flow</a>;
27657: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27658: <a href="#interactive-content" title="Interactive content">interactive</a>;
27659: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27660: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27661: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27662: <td><a href="#global-attributes" title="global attributes">globals</a>;
27663: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27664: <code title="attr-label-for"><a href="#attr-label-for">for</a></code></td>
27665: <td><code><a href="#htmllabelelement">HTMLLabelElement</a></code></td>
27666: </tr><tr><th><code><a href="#the-legend-element">legend</a></code></th>
27667: <td>Caption for <code><a href="#the-fieldset-element">fieldset</a></code></td>
27668: <td>none</td>
27669: <td><code><a href="#the-fieldset-element">fieldset</a></code></td>
27670: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27671: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27672: <td><code><a href="#htmllegendelement">HTMLLegendElement</a></code></td>
27673: </tr><tr><th><code><a href="#the-li-element">li</a></code></th>
27674: <td>List item</td>
27675: <td>none</td>
27676: <td><code><a href="#the-ol-element">ol</a></code>; <code><a href="#the-ul-element">ul</a></code>; <code><a href="#the-menu-element">menu</a></code></td>
27677: <td><a href="#flow-content" title="Flow content">flow</a></td>
27678: <td><a href="#global-attributes" title="global attributes">globals</a>;
27679: <code title="attr-li-value"><a href="#attr-li-value">value</a></code>*</td>
27680: <td><code><a href="#htmllielement">HTMLLIElement</a></code></td>
27681: </tr><tr><th><code><a href="#the-link-element">link</a></code></th>
27682: <td>Link metadata</td>
27683: <td><a href="#metadata-content" title="Metadata content">metadata</a>;
27684: <a href="#flow-content" title="Flow content">flow</a>*;
27685: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27686: <td><code><a href="#the-head-element">head</a></code>;
27687: <code><a href="#the-noscript-element">noscript</a></code>*;
27688: <a href="#phrasing-content" title="phrasing content">phrasing</a>*</td>
27689: <td>empty</td>
27690: <td><a href="#global-attributes" title="global attributes">globals</a>;
27691: <code title="attr-link-href"><a href="#attr-link-href">href</a></code>;
27692: <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code>;
27693: <code title="attr-link-media"><a href="#attr-link-media">media</a></code>;
27694: <code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code>;
27695: <code title="attr-link-type"><a href="#attr-link-type">type</a></code>;
27696: <code title="attr-link-sizes"><a href="#attr-link-sizes">sizes</a></code></td>
27697: <td><code><a href="#htmllinkelement">HTMLLinkElement</a></code></td>
27698: </tr><tr><th><code><a href="#the-map-element">map</a></code></th>
27699: <td><a href="#image-map">Image map</a></td>
27700: <td><a href="#flow-content" title="Flow content">flow</a>;
27701: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27702: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27703: <td><a href="#transparent">transparent</a>;
27704: <code><a href="#the-area-element">area</a></code>*</td>
27705: <td><a href="#global-attributes" title="global attributes">globals</a>;
27706: <code title="attr-map-name"><a href="#attr-map-name">name</a></code></td>
27707: <td><code><a href="#htmlmapelement">HTMLMapElement</a></code></td>
27708: </tr><tr><th><code><a href="#the-mark-element">mark</a></code></th>
27709: <td>Highlight</td>
27710: <td><a href="#flow-content" title="Flow content">flow</a>;
27711: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27712: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27713: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27714: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27715: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27716: </tr><tr><th><code><a href="#the-menu-element">menu</a></code></th>
27717: <td>Menu of commands</td>
27718: <td><a href="#flow-content" title="Flow content">flow</a>;
27719: <a href="#interactive-content" title="Interactive content">interactive</a>*</td>
27720: <td><a href="#flow-content" title="Flow content">flow</a></td>
27721: <td><code><a href="#the-li-element">li</a></code>*;
27722: <a href="#flow-content" title="Flow content">flow</a></td>
27723: <td><a href="#global-attributes" title="global attributes">globals</a>;
27724: <code title="attr-menu-type"><a href="#attr-menu-type">type</a></code>;
27725: <code title="attr-menu-label"><a href="#attr-menu-label">label</a></code></td>
27726: <td><code><a href="#htmlmenuelement">HTMLMenuElement</a></code></td>
27727: </tr><tr><th><code><a href="#the-meta-element">meta</a></code></th>
27728: <td>Text metadata</td>
27729: <td><a href="#metadata-content" title="Metadata content">metadata</a>;
27730: <a href="#flow-content" title="Flow content">flow</a>*;
27731: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27732: <td><code><a href="#the-head-element">head</a></code>;
27733: <code><a href="#the-noscript-element">noscript</a></code>*;
27734: <a href="#phrasing-content" title="phrasing content">phrasing</a>*</td>
27735: <td>empty</td>
27736: <td><a href="#global-attributes" title="global attributes">globals</a>;
27737: <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>;
27738: <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>;
27739: <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code>;
27740: <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code></td>
27741: <td><code><a href="#htmlmetaelement">HTMLMetaElement</a></code></td>
27742: </tr><tr><th><code><a href="#the-meter-element">meter</a></code></th>
27743: <td>Gauge</td>
27744: <td><a href="#flow-content" title="Flow content">flow</a>;
27745: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27746: <a href="#category-label" title="category-label">labelable</a></td>
27747: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27748: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27749: <td><a href="#global-attributes" title="global attributes">globals</a>;
27750: <code title="attr-meter-value"><a href="#attr-meter-value">value</a></code>;
27751: <code title="attr-meter-min"><a href="#attr-meter-min">min</a></code>;
27752: <code title="attr-meter-max"><a href="#attr-meter-max">max</a></code>;
27753: <code title="attr-meter-low"><a href="#attr-meter-low">low</a></code>;
27754: <code title="attr-meter-high"><a href="#attr-meter-high">high</a></code>;
27755: <code title="attr-meter-optimum"><a href="#attr-meter-optimum">optimum</a></code>;
27756: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></td>
27757: <td><code><a href="#htmlmeterelement">HTMLMeterElement</a></code></td>
27758: </tr><tr><th><code><a href="#the-nav-element">nav</a></code></th>
27759: <td>Section with navigational links</td>
27760: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27761: <a href="#sectioning-content" title="Sectioning content">sectioning</a></td>
1.562 mike 27762: <td><a href="#flow-content" title="Flow content">flow</a></td>
27763: <td><a href="#flow-content" title="Flow content">flow</a></td>
27764: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27765: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27766: </tr><tr><th><code><a href="#the-noscript-element">noscript</a></code></th>
27767: <td>Fallback content for script</td>
27768: <td><a href="#metadata-content" title="Metadata content">metadata</a>;
27769: <a href="#flow-content" title="Flow content">flow</a>;
27770: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27771: <td><code><a href="#the-head-element">head</a></code>*;
27772: <a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27773: <td>varies*</td>
27774: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27775: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27776: </tr><tr><th><code><a href="#the-object-element">object</a></code></th>
27777: <td>Image, <a href="#nested-browsing-context">nested browsing context</a>, or <a href="#plugin">plugin</a></td>
27778: <td><a href="#flow-content" title="Flow content">flow</a>;
27779: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27780: <a href="#embedded-content" title="Embedded content">embedded</a>;
27781: <a href="#interactive-content" title="Interactive content">interactive</a>*;
27782: <a href="#category-listed" title="category-listed">listed</a>;
27783: <a href="#category-submit" title="category-submit">submittable</a>;
27784: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27785: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27786: <td><code><a href="#the-param-element">param</a></code>*;
27787: <a href="#transparent">transparent</a></td>
27788: <td><a href="#global-attributes" title="global attributes">globals</a>;
27789: <code title="attr-object-data"><a href="#attr-object-data">data</a></code>;
27790: <code title="attr-object-type"><a href="#attr-object-type">type</a></code>;
27791: <code title="attr-object-typemustmatch"><a href="#attr-object-typemustmatch">typemustmatch</a></code>;
27792: <code title="attr-object-name"><a href="#attr-object-name">name</a></code>;
27793: <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code>;
27794: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27795: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code>;
27796: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></td>
27797: <td><code><a href="#htmlobjectelement">HTMLObjectElement</a></code></td>
27798: </tr><tr><th><code><a href="#the-ol-element">ol</a></code></th>
27799: <td>Ordered list</td>
27800: <td><a href="#flow-content" title="Flow content">flow</a></td>
27801: <td><a href="#flow-content" title="Flow content">flow</a></td>
27802: <td><code><a href="#the-li-element">li</a></code></td>
27803: <td><a href="#global-attributes" title="global attributes">globals</a>;
27804: <code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code>;
27805: <code title="attr-ol-start"><a href="#attr-ol-start">start</a></code></td>
27806: <td><code><a href="#htmlolistelement">HTMLOListElement</a></code></td>
27807: </tr><tr><th><code><a href="#the-optgroup-element">optgroup</a></code></th>
27808: <td>Group of options in a list box</td>
27809: <td>none</td>
27810: <td><code><a href="#the-select-element">select</a></code></td>
27811: <td><code><a href="#the-option-element">option</a></code></td>
27812: <td><a href="#global-attributes" title="global attributes">globals</a>;
27813: <code title="attr-optgroup-disabled"><a href="#attr-optgroup-disabled">disabled</a></code>;
27814: <code title="attr-optgroup-label"><a href="#attr-optgroup-label">label</a></code></td>
27815: <td><code><a href="#htmloptgroupelement">HTMLOptGroupElement</a></code></td>
27816: </tr><tr><th><code><a href="#the-option-element">option</a></code></th>
27817: <td>Option in a list box or combo box control</td>
27818: <td>none</td>
27819: <td><code><a href="#the-select-element">select</a></code>;
27820: <code><a href="#the-datalist-element">datalist</a></code>;
27821: <code><a href="#the-optgroup-element">optgroup</a></code></td>
27822: <td><a href="#text-content" title="text content">text</a></td>
27823: <td><a href="#global-attributes" title="global attributes">globals</a>;
27824: <code title="attr-option-disabled"><a href="#attr-option-disabled">disabled</a></code>;
27825: <code title="attr-option-label"><a href="#attr-option-label">label</a></code>;
27826: <code title="attr-option-selected"><a href="#attr-option-selected">selected</a></code>;
27827: <code title="attr-option-value"><a href="#attr-option-value">value</a></code></td>
27828: <td><code><a href="#htmloptionelement">HTMLOptionElement</a></code></td>
27829: </tr><tr><th><code><a href="#the-output-element">output</a></code></th>
27830: <td>Calculated output value</td>
27831: <td><a href="#flow-content" title="Flow content">flow</a>;
27832: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27833: <a href="#category-listed" title="category-listed">listed</a>;
27834: <a href="#category-label" title="category-label">labelable</a>;
27835: <a href="#category-reset" title="category-reset">resettable</a>;
27836: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27837: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27838: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27839: <td><a href="#global-attributes" title="global attributes">globals</a>;
27840: <code title="attr-output-for"><a href="#attr-output-for">for</a></code>;
27841: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27842: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code></td>
27843: <td><code><a href="#htmloutputelement">HTMLOutputElement</a></code></td>
27844: </tr><tr><th><code><a href="#the-p-element">p</a></code></th>
27845: <td>Paragraph</td>
1.602 mike 27846: <td><a href="#flow-content" title="Flow content">flow</a></td>
1.562 mike 27847: <td><a href="#flow-content" title="Flow content">flow</a></td>
27848: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27849: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27850: <td><code><a href="#htmlparagraphelement">HTMLParagraphElement</a></code></td>
27851: </tr><tr><th><code><a href="#the-param-element">param</a></code></th>
27852: <td>Parameter for <code><a href="#the-object-element">object</a></code></td>
27853: <td>none</td>
27854: <td><code><a href="#the-object-element">object</a></code></td>
27855: <td>empty</td>
27856: <td><a href="#global-attributes" title="global attributes">globals</a>;
27857: <code title="attr-param-name"><a href="#attr-param-name">name</a></code>;
27858: <code title="attr-param-value"><a href="#attr-param-value">value</a></code></td>
27859: <td><code><a href="#htmlparamelement">HTMLParamElement</a></code></td>
27860: </tr><tr><th><code><a href="#the-pre-element">pre</a></code></th>
27861: <td>Block of preformatted text</td>
1.602 mike 27862: <td><a href="#flow-content" title="Flow content">flow</a></td>
1.562 mike 27863: <td><a href="#flow-content" title="Flow content">flow</a></td>
27864: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27865: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27866: <td><code><a href="#htmlpreelement">HTMLPreElement</a></code></td>
27867: </tr><tr><th><code><a href="#the-progress-element">progress</a></code></th>
27868: <td>Progress bar</td>
27869: <td><a href="#flow-content" title="Flow content">flow</a>;
27870: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27871: <a href="#category-label" title="category-label">labelable</a></td>
27872: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27873: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
27874: <td><a href="#global-attributes" title="global attributes">globals</a>;
27875: <code title="attr-progress-value"><a href="#attr-progress-value">value</a></code>;
27876: <code title="attr-progress-max"><a href="#attr-progress-max">max</a></code>;
27877: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code></td>
27878: <td><code><a href="#htmlprogresselement">HTMLProgressElement</a></code></td>
27879: </tr><tr><th><code><a href="#the-q-element">q</a></code></th>
27880: <td>Quotation</td>
27881: <td><a href="#flow-content" title="Flow content">flow</a>;
27882: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27883: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27884: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27885: <td><a href="#global-attributes" title="global attributes">globals</a>;
27886: <code title="attr-q-cite"><a href="#attr-q-cite">cite</a></code></td>
27887: <td><code><a href="#htmlquoteelement">HTMLQuoteElement</a></code></td>
27888: </tr><tr><th><code><a href="#the-rp-element">rp</a></code></th>
27889: <td>Parenthesis for ruby annotation text</td>
27890: <td>none</td>
27891: <td><code><a href="#the-ruby-element">ruby</a></code></td>
27892: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27893: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27894: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27895: </tr><tr><th><code><a href="#the-rt-element">rt</a></code></th>
27896: <td>Ruby annotation text</td>
27897: <td>none</td>
27898: <td><code><a href="#the-ruby-element">ruby</a></code></td>
27899: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27900: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27901: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27902: </tr><tr><th><code><a href="#the-ruby-element">ruby</a></code></th>
27903: <td>Ruby annotation(s)</td>
27904: <td><a href="#flow-content" title="Flow content">flow</a>;
27905: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27906: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27907: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27908: <code><a href="#the-rt-element">rt</a></code>;
27909: <code><a href="#the-rp-element">rp</a></code>*</td>
27910: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27911: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27912: </tr><tr><th><code><a href="#the-s-element">s</a></code></th>
27913: <td>Inaccurate text</td>
27914: <td><a href="#flow-content" title="Flow content">flow</a>;
27915: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27916: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27917: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27918: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27919: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27920: </tr><tr><th><code><a href="#the-samp-element">samp</a></code></th>
27921: <td>Computer output</td>
27922: <td><a href="#flow-content" title="Flow content">flow</a>;
27923: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27924: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27925: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27926: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27927: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27928: </tr><tr><th><code><a href="#the-script-element">script</a></code></th>
27929: <td>Embedded script</td>
27930: <td><a href="#metadata-content" title="Metadata content">metadata</a>;
27931: <a href="#flow-content" title="Flow content">flow</a>;
27932: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27933: <td><code><a href="#the-head-element">head</a></code>;
27934: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27935: <td>script, data, or script documentation*</td>
27936: <td><a href="#global-attributes" title="global attributes">globals</a>;
27937: <code title="attr-script-src"><a href="#attr-script-src">src</a></code>;
27938: <code title="attr-script-async"><a href="#attr-script-async">async</a></code>;
27939: <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code>;
27940: <code title="attr-script-type"><a href="#attr-script-type">type</a></code>;
27941: <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code></td>
27942: <td><code><a href="#htmlscriptelement">HTMLScriptElement</a></code></td>
27943: </tr><tr><th><code><a href="#the-section-element">section</a></code></th>
27944: <td>Generic document or application section</td>
27945: <td><a href="#flow-content" title="Flow content">flow</a>;
1.602 mike 27946: <a href="#sectioning-content" title="Sectioning content">sectioning</a></td>
1.562 mike 27947: <td><a href="#flow-content" title="Flow content">flow</a></td>
27948: <td><a href="#flow-content" title="Flow content">flow</a></td>
27949: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27950: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27951: </tr><tr><th><code><a href="#the-select-element">select</a></code></th>
27952: <td>List box control</td>
27953: <td><a href="#flow-content" title="Flow content">flow</a>;
27954: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
27955: <a href="#interactive-content" title="Interactive content">interactive</a>;
27956: <a href="#category-listed" title="category-listed">listed</a>;
27957: <a href="#category-label" title="category-label">labelable</a>;
27958: <a href="#category-submit" title="category-submit">submittable</a>;
27959: <a href="#category-reset" title="category-reset">resettable</a>;
27960: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
27961: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27962: <td><code><a href="#the-option-element">option</a></code>, <code><a href="#the-optgroup-element">optgroup</a></code></td>
27963: <td><a href="#global-attributes" title="global attributes">globals</a>;
27964: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>;
27965: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code>;
27966: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
27967: <code title="attr-select-multiple"><a href="#attr-select-multiple">multiple</a></code>;
27968: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>;
27969: <code title="attr-select-required"><a href="#attr-select-required">required</a></code>;
27970: <code title="attr-select-size"><a href="#attr-select-size">size</a></code></td>
27971: <td><code><a href="#htmlselectelement">HTMLSelectElement</a></code></td>
27972: </tr><tr><th><code><a href="#the-small-element">small</a></code></th>
27973: <td>Side comment</td>
27974: <td><a href="#flow-content" title="Flow content">flow</a>;
27975: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27976: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27977: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27978: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27979: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
27980: </tr><tr><th><code><a href="#the-source-element">source</a></code></th>
27981: <td>Media source for <code><a href="#the-video-element">video</a></code> or <code><a href="#the-audio-element">audio</a></code></td>
27982: <td>none</td>
27983: <td><code><a href="#the-video-element">video</a></code>;
27984: <code><a href="#the-audio-element">audio</a></code></td>
27985: <td>empty</td>
27986: <td><a href="#global-attributes" title="global attributes">globals</a>;
27987: <code title="attr-source-src"><a href="#attr-source-src">src</a></code>;
27988: <code title="attr-source-type"><a href="#attr-source-type">type</a></code>;
27989: <code title="attr-source-media"><a href="#attr-source-media">media</a></code></td>
27990: <td><code><a href="#htmlsourceelement">HTMLSourceElement</a></code></td>
27991: </tr><tr><th><code><a href="#the-span-element">span</a></code></th>
27992: <td>Generic phrasing container</td>
27993: <td><a href="#flow-content" title="Flow content">flow</a>;
27994: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27995: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27996: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
27997: <td><a href="#global-attributes" title="global attributes">globals</a></td>
27998: <td><code><a href="#htmlspanelement">HTMLSpanElement</a></code></td>
27999: </tr><tr><th><code><a href="#the-strong-element">strong</a></code></th>
28000: <td>Importance</td>
28001: <td><a href="#flow-content" title="Flow content">flow</a>;
28002: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28003: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28004: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28005: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28006: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28007: </tr><tr><th><code><a href="#the-style-element">style</a></code></th>
28008: <td>Embedded styling information</td>
28009: <td><a href="#metadata-content" title="Metadata content">metadata</a>;
28010: <a href="#flow-content" title="Flow content">flow</a></td>
28011: <td><code><a href="#the-head-element">head</a></code>;
28012: <code><a href="#the-noscript-element">noscript</a></code>*;
28013: <a href="#flow-content" title="flow content">flow</a>*</td>
28014: <td>varies*</td>
28015: <td><a href="#global-attributes" title="global attributes">globals</a>;
28016: <code title="attr-style-media"><a href="#attr-style-media">media</a></code>;
28017: <code title="attr-style-type"><a href="#attr-style-type">type</a></code>;
28018: <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code></td>
28019: <td><code><a href="#htmlstyleelement">HTMLStyleElement</a></code></td>
28020: </tr><tr><th><code><a href="#the-sub-and-sup-elements">sub</a></code></th>
28021: <td>Subscript</td>
28022: <td><a href="#flow-content" title="Flow content">flow</a>;
28023: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28024: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28025: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28026: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28027: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28028: </tr><tr><th><code><a href="#the-summary-element">summary</a></code></th>
28029: <td>Caption for <code><a href="#the-details-element">details</a></code></td>
28030: <td>none</td>
28031: <td><code><a href="#the-details-element">details</a></code></td>
28032: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28033: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28034: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28035: </tr><tr><th><code><a href="#the-sub-and-sup-elements">sup</a></code></th>
28036: <td>Superscript</td>
28037: <td><a href="#flow-content" title="Flow content">flow</a>;
28038: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28039: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28040: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28041: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28042: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28043: </tr><tr><th><code><a href="#the-table-element">table</a></code></th>
28044: <td>Table</td>
28045: <td><a href="#flow-content" title="Flow content">flow</a></td>
28046: <td><a href="#flow-content" title="Flow content">flow</a></td>
28047: <td><code><a href="#the-caption-element">caption</a></code>*;
28048: <code><a href="#the-colgroup-element">colgroup</a></code>*;
28049: <code><a href="#the-thead-element">thead</a></code>*;
28050: <code><a href="#the-tbody-element">tbody</a></code>*;
28051: <code><a href="#the-tfoot-element">tfoot</a></code>*;
28052: <code><a href="#the-tr-element">tr</a></code>*</td>
28053: <td><a href="#global-attributes" title="global attributes">globals</a>;
28054: <code title="attr-table-border"><a href="#attr-table-border">border</a></code></td>
28055: <td><code><a href="#htmltableelement">HTMLTableElement</a></code></td>
28056: </tr><tr><th><code><a href="#the-tbody-element">tbody</a></code></th>
28057: <td>Group of rows in a table</td>
28058: <td>none</td>
28059: <td><code><a href="#the-table-element">table</a></code></td>
28060: <td><code><a href="#the-tr-element">tr</a></code></td>
28061: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28062: <td><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code></td>
28063: </tr><tr><th><code><a href="#the-td-element">td</a></code></th>
28064: <td>Table cell</td>
28065: <td><a href="#sectioning-root" title="Sectioning root">sectioning root</a></td>
28066: <td><code><a href="#the-tr-element">tr</a></code></td>
28067: <td><a href="#flow-content" title="Flow content">flow</a></td>
28068: <td><a href="#global-attributes" title="global attributes">globals</a>;
28069: <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code>;
28070: <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code>;
28071: <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code></td>
28072: <td><code><a href="#htmltabledatacellelement">HTMLTableDataCellElement</a></code></td>
28073: </tr><tr><th><code><a href="#the-textarea-element">textarea</a></code></th>
28074: <td>Multiline text field</td>
28075: <td><a href="#flow-content" title="Flow content">flow</a>;
28076: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
28077: <a href="#interactive-content" title="Interactive content">interactive</a>;
28078: <a href="#category-listed" title="category-listed">listed</a>;
28079: <a href="#category-label" title="category-label">labelable</a>;
28080: <a href="#category-submit" title="category-submit">submittable</a>;
28081: <a href="#category-reset" title="category-reset">resettable</a>;
28082: <a href="#form-associated-element" title="Form-associated element">form-associated</a></td>
28083: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28084: <td><a href="#text-content" title="text content">text</a></td>
28085: <td><a href="#global-attributes" title="global attributes">globals</a>;
28086: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code>;
28087: <code title="attr-textarea-cols"><a href="#attr-textarea-cols">cols</a></code>;
28088: <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">dirname</a></code>;
28089: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code>;
28090: <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code>;
28091: <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">maxlength</a></code>;
28092: <code title="attr-fe-name"><a href="#attr-fe-name">name</a></code>;
28093: <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">placeholder</a></code>;
28094: <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">readonly</a></code>;
28095: <code title="attr-textarea-required"><a href="#attr-textarea-required">required</a></code>;
28096: <code title="attr-textarea-rows"><a href="#attr-textarea-rows">rows</a></code>;
28097: <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">wrap</a></code></td>
28098: <td><code><a href="#htmltextareaelement">HTMLTextAreaElement</a></code></td>
28099: </tr><tr><th><code><a href="#the-tfoot-element">tfoot</a></code></th>
28100: <td>Group of footer rows in a table</td>
28101: <td>none</td>
28102: <td><code><a href="#the-table-element">table</a></code></td>
28103: <td><code><a href="#the-tr-element">tr</a></code></td>
28104: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28105: <td><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code></td>
28106: </tr><tr><th><code><a href="#the-th-element">th</a></code></th>
28107: <td>Table header cell</td>
28108: <td>none</td>
28109: <td><code><a href="#the-tr-element">tr</a></code></td>
1.620 mike 28110: <td><a href="#flow-content" title="Flow content">flow</a>*</td>
1.562 mike 28111: <td><a href="#global-attributes" title="global attributes">globals</a>;
28112: <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code>;
28113: <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code>;
28114: <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code>;
28115: <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code></td>
28116: <td><code><a href="#htmltableheadercellelement">HTMLTableHeaderCellElement</a></code></td>
28117: </tr><tr><th><code><a href="#the-thead-element">thead</a></code></th>
28118: <td>Group of heading rows in a table</td>
28119: <td>none</td>
28120: <td><code><a href="#the-table-element">table</a></code></td>
28121: <td><code><a href="#the-tr-element">tr</a></code></td>
28122: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28123: <td><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code></td>
28124: </tr><tr><th><code><a href="#the-time-element">time</a></code></th>
28125: <td>Date and/or time</td>
28126: <td><a href="#flow-content" title="Flow content">flow</a>;
28127: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28128: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28129: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a>*</td>
28130: <td><a href="#global-attributes" title="global attributes">globals</a>;
28131: <code title="attr-time-datetime"><a href="#attr-time-datetime">datetime</a></code>;
28132: <code title="attr-time-pubdate"><a href="#attr-time-pubdate">pubdate</a></code></td>
28133: <td><code><a href="#htmltimeelement">HTMLTimeElement</a></code></td>
28134: </tr><tr><th><code><a href="#the-title-element">title</a></code></th>
28135: <td>Document title</td>
28136: <td><a href="#metadata-content" title="Metadata content">metadata</a></td>
28137: <td><code><a href="#the-head-element">head</a></code></td>
28138: <td><a href="#text-content" title="text content">text</a></td>
28139: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28140: <td><code><a href="#htmltitleelement">HTMLTitleElement</a></code></td>
28141: </tr><tr><th><code><a href="#the-tr-element">tr</a></code></th>
28142: <td>Table row</td>
28143: <td>none</td>
28144: <td><code><a href="#the-table-element">table</a></code>;
28145: <code><a href="#the-thead-element">thead</a></code>;
28146: <code><a href="#the-tbody-element">tbody</a></code>;
28147: <code><a href="#the-tfoot-element">tfoot</a></code></td>
28148: <td><code><a href="#the-th-element">th</a></code>*;
28149: <code><a href="#the-td-element">td</a></code></td>
28150: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28151: <td><code><a href="#htmltablerowelement">HTMLTableRowElement</a></code></td>
28152: </tr><tr><th><code><a href="#the-track-element">track</a></code></th>
28153: <td>Timed text track</td>
28154: <td>none</td>
28155: <td><code><a href="#the-audio-element">audio</a></code>;
28156: <code><a href="#the-video-element">video</a></code></td>
28157: <td>empty</td>
28158: <td><a href="#global-attributes" title="global attributes">globals</a>;
28159: <code title="attr-track-default"><a href="#attr-track-default">default</a></code>;
28160: <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code>;
28161: <code title="attr-track-label"><a href="#attr-track-label">label</a></code>;
28162: <code title="attr-track-src"><a href="#attr-track-src">src</a></code>;
28163: <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code></td>
28164: <td><code><a href="#htmltrackelement">HTMLTrackElement</a></code></td>
28165: </tr><tr><th><code><a href="#the-u-element">u</a></code></th>
28166: <td>Keywords</td>
28167: <td><a href="#flow-content" title="Flow content">flow</a>;
28168: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28169: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28170: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28171: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28172: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28173: </tr><tr><th><code><a href="#the-ul-element">ul</a></code></th>
28174: <td>List</td>
28175: <td><a href="#flow-content" title="Flow content">flow</a></td>
28176: <td><a href="#flow-content" title="Flow content">flow</a></td>
28177: <td><code><a href="#the-li-element">li</a></code></td>
28178: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28179: <td><code><a href="#htmlulistelement">HTMLUListElement</a></code></td>
28180: </tr><tr><th><code><a href="#the-var-element">var</a></code></th>
28181: <td>Variable</td>
28182: <td><a href="#flow-content" title="Flow content">flow</a>;
28183: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28184: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28185: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28186: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28187: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28188: </tr><tr><th><code><a href="#the-video-element">video</a></code></th>
28189: <td>Video player</td>
28190: <td><a href="#flow-content" title="Flow content">flow</a>;
28191: <a href="#phrasing-content" title="Phrasing content">phrasing</a>;
28192: <a href="#embedded-content" title="Embedded content">embedded</a>;
28193: <a href="#interactive-content" title="Interactive content">interactive</a></td>
28194: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28195: <td><code><a href="#the-source-element">source</a></code>*;
28196: <a href="#transparent">transparent</a>*</td>
28197: <td><a href="#global-attributes" title="global attributes">globals</a>;
28198: <code title="attr-media-src"><a href="#attr-media-src">src</a></code>;
28199: <code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">crossorigin</a></code>;
28200: <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code>;
28201: <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code>;
28202: <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code>;
28203: <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">mediagroup</a></code>;
28204: <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>;
28205: <code title="attr-media-muted"><a href="#attr-media-muted">muted</a></code>;
28206: <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code>;
28207: <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code>;
28208: <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code></td>
28209: <td><code><a href="#htmlvideoelement">HTMLVideoElement</a></code></td>
28210: </tr><tr><th><code><a href="#the-wbr-element">wbr</a></code></th>
28211: <td>Line breaking opportunity</td>
28212: <td><a href="#flow-content" title="Flow content">flow</a>;
28213: <a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28214: <td><a href="#phrasing-content" title="Phrasing content">phrasing</a></td>
28215: <td>empty</td>
28216: <td><a href="#global-attributes" title="global attributes">globals</a></td>
28217: <td><code><a href="#htmlelement">HTMLElement</a></code></td>
28218: </tr></tbody></table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p><p>† Categories in the "Parents" column refer to parents that
28219: list the given categories in their content model, not to elements
28220: that themselves are in those categories. For example, the
28221: <code><a href="#the-a-element">a</a></code> element's "Parents" column says "phrasing", so any
28222: element whose content model contains the "phrasing" category could
28223: be a parent of an <code><a href="#the-a-element">a</a></code> element. Since the "flow" category
28224: includes all the "phrasing" elements, that means the
28225: <code><a href="#the-address-element">address</a></code> element could be a parent to an <code><a href="#the-a-element">a</a></code>
28226: element.</p><h3 class="no-num" id="element-content-categories">Element content categories</h3><p><i>This section is non-normative.</i></p><table><caption>List of element content categories</caption>
28227: <thead><tr><th> Category
28228: </th><th> Elements
28229: </th><th> Elements with exceptions
28230: </th></tr></thead><tbody><tr><td> <a href="#metadata-content">Metadata content</a>
28231: </td><td>
28232: <code><a href="#the-base-element">base</a></code>;
28233: <code><a href="#the-command-element">command</a></code>;
28234: <code><a href="#the-link-element">link</a></code>;
28235: <code><a href="#the-meta-element">meta</a></code>;
28236: <code><a href="#the-noscript-element">noscript</a></code>;
28237: <code><a href="#the-script-element">script</a></code>;
28238: <code><a href="#the-style-element">style</a></code>;
28239: <code><a href="#the-title-element">title</a></code>
28240: </td><td>
28241: —
28242:
28243: </td></tr><tr><td> <a href="#flow-content">Flow content</a>
28244: </td><td>
28245: <code><a href="#the-a-element">a</a></code>;
28246: <code><a href="#the-abbr-element">abbr</a></code>;
28247: <code><a href="#the-address-element">address</a></code>;
28248: <code><a href="#the-article-element">article</a></code>;
28249: <code><a href="#the-aside-element">aside</a></code>;
28250: <code><a href="#the-audio-element">audio</a></code>;
28251: <code><a href="#the-b-element">b</a></code>;
28252: <code><a href="#the-bdi-element">bdi</a></code>;
28253: <code><a href="#the-bdo-element">bdo</a></code>;
28254: <code><a href="#the-blockquote-element">blockquote</a></code>;
28255: <code><a href="#the-br-element">br</a></code>;
28256: <code><a href="#the-button-element">button</a></code>;
28257: <code><a href="#the-canvas-element">canvas</a></code>;
28258: <code><a href="#the-cite-element">cite</a></code>;
28259: <code><a href="#the-code-element">code</a></code>;
28260: <code><a href="#the-command-element">command</a></code>;
28261: <code><a href="#the-datalist-element">datalist</a></code>;
28262: <code><a href="#the-del-element">del</a></code>;
28263: <code><a href="#the-details-element">details</a></code>;
28264: <code><a href="#the-dfn-element">dfn</a></code>;
28265: <code><a href="#the-div-element">div</a></code>;
28266: <code><a href="#the-dl-element">dl</a></code>;
28267: <code><a href="#the-em-element">em</a></code>;
28268: <code><a href="#the-embed-element">embed</a></code>;
28269: <code><a href="#the-fieldset-element">fieldset</a></code>;
28270: <code><a href="#the-figure-element">figure</a></code>;
28271: <code><a href="#the-footer-element">footer</a></code>;
28272: <code><a href="#the-form-element">form</a></code>;
28273: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>;
28274: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>;
28275: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code>;
28276: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code>;
28277: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code>;
28278: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>;
28279: <code><a href="#the-header-element">header</a></code>;
28280: <code><a href="#the-hgroup-element">hgroup</a></code>;
28281: <code><a href="#the-hr-element">hr</a></code>;
28282: <code><a href="#the-i-element">i</a></code>;
28283: <code><a href="#the-iframe-element">iframe</a></code>;
28284: <code><a href="#the-img-element">img</a></code>;
28285: <code><a href="#the-input-element">input</a></code>;
28286: <code><a href="#the-ins-element">ins</a></code>;
28287: <code><a href="#the-kbd-element">kbd</a></code>;
28288: <code><a href="#the-keygen-element">keygen</a></code>;
28289: <code><a href="#the-label-element">label</a></code>;
28290: <code><a href="#the-map-element">map</a></code>;
28291: <code><a href="#the-mark-element">mark</a></code>;
28292: <code><a href="#math">math</a></code>;
28293: <code><a href="#the-menu-element">menu</a></code>;
28294: <code><a href="#the-meter-element">meter</a></code>;
28295: <code><a href="#the-nav-element">nav</a></code>;
28296: <code><a href="#the-noscript-element">noscript</a></code>;
28297: <code><a href="#the-object-element">object</a></code>;
28298: <code><a href="#the-ol-element">ol</a></code>;
28299: <code><a href="#the-output-element">output</a></code>;
28300: <code><a href="#the-p-element">p</a></code>;
28301: <code><a href="#the-pre-element">pre</a></code>;
28302: <code><a href="#the-progress-element">progress</a></code>;
28303: <code><a href="#the-q-element">q</a></code>;
28304: <code><a href="#the-ruby-element">ruby</a></code>;
28305: <code><a href="#the-s-element">s</a></code>;
28306: <code><a href="#the-samp-element">samp</a></code>;
28307: <code><a href="#the-script-element">script</a></code>;
28308: <code><a href="#the-section-element">section</a></code>;
28309: <code><a href="#the-select-element">select</a></code>;
28310: <code><a href="#the-small-element">small</a></code>;
28311: <code><a href="#the-span-element">span</a></code>;
28312: <code><a href="#the-strong-element">strong</a></code>;
28313: <code><a href="#the-sub-and-sup-elements">sub</a></code>;
28314: <code><a href="#the-sub-and-sup-elements">sup</a></code>;
28315: <code><a href="#svg">svg</a></code>;
28316: <code><a href="#the-table-element">table</a></code>;
28317: <code><a href="#the-textarea-element">textarea</a></code>;
28318: <code><a href="#the-time-element">time</a></code>;
28319: <code><a href="#the-u-element">u</a></code>;
28320: <code><a href="#the-ul-element">ul</a></code>;
28321: <code><a href="#the-var-element">var</a></code>;
28322: <code><a href="#the-video-element">video</a></code>;
28323: <code><a href="#the-wbr-element">wbr</a></code>;
28324: <a href="#text-content" title="text content">Text</a>
28325: </td><td>
28326: <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);
28327: <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)
28328:
28329: </td></tr><tr><td> <a href="#sectioning-content">Sectioning content</a>
28330: </td><td>
28331: <code><a href="#the-article-element">article</a></code>;
28332: <code><a href="#the-aside-element">aside</a></code>;
28333: <code><a href="#the-nav-element">nav</a></code>;
28334: <code><a href="#the-section-element">section</a></code>
28335: </td><td>
28336: —
28337:
28338: </td></tr><tr><td> <a href="#heading-content">Heading content</a>
28339: </td><td>
28340: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>;
28341: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>;
28342: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code>;
28343: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code>;
28344: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code>;
28345: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>;
28346: <code><a href="#the-hgroup-element">hgroup</a></code>
28347: </td><td>
28348: —
28349:
28350: </td></tr><tr><td> <a href="#phrasing-content">Phrasing content</a>
28351: </td><td>
28352: <code><a href="#the-abbr-element">abbr</a></code>;
28353: <code><a href="#the-audio-element">audio</a></code>;
28354: <code><a href="#the-b-element">b</a></code>;
28355: <code><a href="#the-bdi-element">bdi</a></code>;
28356: <code><a href="#the-bdo-element">bdo</a></code>;
28357: <code><a href="#the-br-element">br</a></code>;
28358: <code><a href="#the-button-element">button</a></code>;
28359: <code><a href="#the-canvas-element">canvas</a></code>;
28360: <code><a href="#the-cite-element">cite</a></code>;
28361: <code><a href="#the-code-element">code</a></code>;
28362: <code><a href="#the-command-element">command</a></code>;
28363: <code><a href="#the-datalist-element">datalist</a></code>;
28364: <code><a href="#the-dfn-element">dfn</a></code>;
28365: <code><a href="#the-em-element">em</a></code>;
28366: <code><a href="#the-embed-element">embed</a></code>;
28367: <code><a href="#the-i-element">i</a></code>;
28368: <code><a href="#the-iframe-element">iframe</a></code>;
28369: <code><a href="#the-img-element">img</a></code>;
28370: <code><a href="#the-input-element">input</a></code>;
28371: <code><a href="#the-kbd-element">kbd</a></code>;
28372: <code><a href="#the-keygen-element">keygen</a></code>;
28373: <code><a href="#the-label-element">label</a></code>;
28374: <code><a href="#the-mark-element">mark</a></code>;
28375: <code><a href="#math">math</a></code>;
28376: <code><a href="#the-meter-element">meter</a></code>;
28377: <code><a href="#the-noscript-element">noscript</a></code>;
28378: <code><a href="#the-object-element">object</a></code>;
28379: <code><a href="#the-output-element">output</a></code>;
28380: <code><a href="#the-progress-element">progress</a></code>;
28381: <code><a href="#the-q-element">q</a></code>;
28382: <code><a href="#the-ruby-element">ruby</a></code>;
28383: <code><a href="#the-s-element">s</a></code>;
28384: <code><a href="#the-samp-element">samp</a></code>;
28385: <code><a href="#the-script-element">script</a></code>;
28386: <code><a href="#the-select-element">select</a></code>;
28387: <code><a href="#the-small-element">small</a></code>;
28388: <code><a href="#the-span-element">span</a></code>;
28389: <code><a href="#the-strong-element">strong</a></code>;
28390: <code><a href="#the-sub-and-sup-elements">sub</a></code>;
28391: <code><a href="#the-sub-and-sup-elements">sup</a></code>;
28392: <code><a href="#svg">svg</a></code>;
28393: <code><a href="#the-textarea-element">textarea</a></code>;
28394: <code><a href="#the-time-element">time</a></code>;
28395: <code><a href="#the-u-element">u</a></code>;
28396: <code><a href="#the-var-element">var</a></code>;
28397: <code><a href="#the-video-element">video</a></code>;
28398: <code><a href="#the-wbr-element">wbr</a></code>;
28399: <a href="#text-content" title="text content">Text</a>
28400: </td><td>
28401: <code><a href="#the-a-element">a</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>);
28402: <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);
28403: <code><a href="#the-del-element">del</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>);
28404: <code><a href="#the-ins-element">ins</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>);
28405: <code><a href="#the-map-element">map</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)
28406: </td></tr><tr><td> <a href="#embedded-content">Embedded content</a>
28407: </td><td>
28408: <code><a href="#the-audio-element">audio</a></code>
28409: <code><a href="#the-canvas-element">canvas</a></code>
28410: <code><a href="#the-embed-element">embed</a></code>
28411: <code><a href="#the-iframe-element">iframe</a></code>
28412: <code><a href="#the-img-element">img</a></code>
28413: <code><a href="#math">math</a></code>
28414: <code><a href="#the-object-element">object</a></code>
28415: <code><a href="#svg">svg</a></code>
28416: <code><a href="#the-video-element">video</a></code>
28417: </td><td>
28418: —
28419:
28420: </td></tr><tr><td> <a href="#interactive-content">Interactive content</a>
28421: </td><td>
28422: <code><a href="#the-a-element">a</a></code>;
28423: <code><a href="#the-button-element">button</a></code>;
28424: <code><a href="#the-details-element">details</a></code>;
28425: <code><a href="#the-embed-element">embed</a></code>;
28426: <code><a href="#the-iframe-element">iframe</a></code>;
28427: <code><a href="#the-keygen-element">keygen</a></code>;
28428: <code><a href="#the-label-element">label</a></code>;
28429: <code><a href="#the-select-element">select</a></code>;
28430: <code><a href="#the-textarea-element">textarea</a></code>;
28431: </td><td>
28432: <code><a href="#the-audio-element">audio</a></code> (if the <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute is present);
28433: <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);
28434: <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);
28435: <code><a href="#the-menu-element">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);
28436: <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);
28437: <code><a href="#the-video-element">video</a></code> (if the <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute is present)
28438:
28439: </td></tr><tr><td> <a href="#sectioning-root" title="sectioning root">Sectioning roots</a>
28440: </td><td>
28441: <code><a href="#the-blockquote-element">blockquote</a></code>;
28442: <code><a href="#the-body-element">body</a></code>;
28443: <code><a href="#the-details-element">details</a></code>;
28444: <code><a href="#the-fieldset-element">fieldset</a></code>;
28445: <code><a href="#the-figure-element">figure</a></code>;
28446: <code><a href="#the-td-element">td</a></code>
28447: </td><td>
28448: —
28449:
28450: </td></tr><tr><td> <a href="#form-associated-element" title="form-associated element">Form-associated elements</a>
28451: </td><td>
28452: <code><a href="#the-button-element">button</a></code>;
28453: <code><a href="#the-fieldset-element">fieldset</a></code>;
28454: <code><a href="#the-input-element">input</a></code>;
28455: <code><a href="#the-keygen-element">keygen</a></code>;
28456: <code><a href="#the-label-element">label</a></code>;
28457: <code><a href="#the-object-element">object</a></code>;
28458: <code><a href="#the-output-element">output</a></code>;
28459: <code><a href="#the-select-element">select</a></code>;
28460: <code><a href="#the-textarea-element">textarea</a></code>
28461: </td><td>
28462: —
28463:
28464: </td></tr><tr><td> <a href="#category-listed" title="category-listed">Listed elements</a>
28465: </td><td>
28466: <code><a href="#the-button-element">button</a></code>;
28467: <code><a href="#the-fieldset-element">fieldset</a></code>;
28468: <code><a href="#the-input-element">input</a></code>;
28469: <code><a href="#the-keygen-element">keygen</a></code>;
28470: <code><a href="#the-object-element">object</a></code>;
28471: <code><a href="#the-output-element">output</a></code>;
28472: <code><a href="#the-select-element">select</a></code>;
28473: <code><a href="#the-textarea-element">textarea</a></code>
28474: </td><td>
28475: —
28476:
28477: </td></tr><tr><td> <a href="#category-submit" title="category-submit">Submittable elements</a>
28478: </td><td>
28479: <code><a href="#the-button-element">button</a></code>;
28480: <code><a href="#the-input-element">input</a></code>;
28481: <code><a href="#the-keygen-element">keygen</a></code>;
28482: <code><a href="#the-object-element">object</a></code>;
28483: <code><a href="#the-select-element">select</a></code>;
28484: <code><a href="#the-textarea-element">textarea</a></code>
28485: </td><td>
28486: —
28487:
28488: </td></tr><tr><td> <a href="#category-reset" title="category-reset">Resettable elements</a>
28489: </td><td>
28490: <code><a href="#the-input-element">input</a></code>;
28491: <code><a href="#the-keygen-element">keygen</a></code>;
28492: <code><a href="#the-output-element">output</a></code>;
28493: <code><a href="#the-select-element">select</a></code>;
28494: <code><a href="#the-textarea-element">textarea</a></code>
28495: </td><td>
28496: —
28497:
28498: </td></tr><tr><td> <a href="#category-label" title="category-label">Labelable elements</a>
28499: </td><td>
28500: <code><a href="#the-button-element">button</a></code>;
28501: <code><a href="#the-input-element">input</a></code>;
28502: <code><a href="#the-keygen-element">keygen</a></code>;
28503: <code><a href="#the-meter-element">meter</a></code>;
28504: <code><a href="#the-output-element">output</a></code>;
28505: <code><a href="#the-progress-element">progress</a></code>;
28506: <code><a href="#the-select-element">select</a></code>;
28507: <code><a href="#the-textarea-element">textarea</a></code>
28508: </td><td>
28509: —
28510:
1.629 ! mike 28511: </td></tr><tr><td> <a href="#palpable-content">Palpable content</a>
! 28512: </td><td>
! 28513: <code><a href="#the-a-element">a</a></code>;
! 28514: <code><a href="#the-abbr-element">abbr</a></code>;
! 28515: <code><a href="#the-address-element">address</a></code>;
! 28516: <code><a href="#the-article-element">article</a></code>;
! 28517: <code><a href="#the-aside-element">aside</a></code>;
! 28518: <code><a href="#the-b-element">b</a></code>;
! 28519: <code><a href="#the-bdi-element">bdi</a></code>;
! 28520: <code><a href="#the-bdo-element">bdo</a></code>;
! 28521: <code><a href="#the-blockquote-element">blockquote</a></code>;
! 28522: <code><a href="#the-button-element">button</a></code>;
! 28523: <code><a href="#the-canvas-element">canvas</a></code>;
! 28524: <code><a href="#the-cite-element">cite</a></code>;
! 28525: <code><a href="#the-code-element">code</a></code>;
! 28526: <code><a href="#the-details-element">details</a></code>;
! 28527: <code><a href="#the-dfn-element">dfn</a></code>;
! 28528: <code><a href="#the-div-element">div</a></code>;
! 28529: <code><a href="#the-em-element">em</a></code>;
! 28530: <code><a href="#the-embed-element">embed</a></code>;
! 28531: <code><a href="#the-fieldset-element">fieldset</a></code>;
! 28532: <code><a href="#the-figure-element">figure</a></code>;
! 28533: <code><a href="#the-footer-element">footer</a></code>;
! 28534: <code><a href="#the-form-element">form</a></code>;
! 28535: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>;
! 28536: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>;
! 28537: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code>;
! 28538: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code>;
! 28539: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code>;
! 28540: <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>;
! 28541: <code><a href="#the-header-element">header</a></code>;
! 28542: <code><a href="#the-hgroup-element">hgroup</a></code>;
! 28543: <code><a href="#the-i-element">i</a></code>;
! 28544: <code><a href="#the-iframe-element">iframe</a></code>;
! 28545: <code><a href="#the-img-element">img</a></code>;
! 28546: <code><a href="#the-ins-element">ins</a></code>;
! 28547: <code><a href="#the-kbd-element">kbd</a></code>;
! 28548: <code><a href="#the-keygen-element">keygen</a></code>;
! 28549: <code><a href="#the-label-element">label</a></code>;
! 28550: <code><a href="#the-map-element">map</a></code>;
! 28551: <code><a href="#the-mark-element">mark</a></code>;
! 28552: <code><a href="#math">math</a></code>;
! 28553: <code><a href="#the-meter-element">meter</a></code>;
! 28554: <code><a href="#the-nav-element">nav</a></code>;
! 28555: <code><a href="#the-object-element">object</a></code>;
! 28556: <code><a href="#the-output-element">output</a></code>;
! 28557: <code><a href="#the-p-element">p</a></code>;
! 28558: <code><a href="#the-pre-element">pre</a></code>;
! 28559: <code><a href="#the-progress-element">progress</a></code>;
! 28560: <code><a href="#the-q-element">q</a></code>;
! 28561: <code><a href="#the-ruby-element">ruby</a></code>;
! 28562: <code><a href="#the-s-element">s</a></code>;
! 28563: <code><a href="#the-samp-element">samp</a></code>;
! 28564: <code><a href="#the-section-element">section</a></code>;
! 28565: <code><a href="#the-select-element">select</a></code>;
! 28566: <code><a href="#the-small-element">small</a></code>;
! 28567: <code><a href="#the-span-element">span</a></code>;
! 28568: <code><a href="#the-strong-element">strong</a></code>;
! 28569: <code><a href="#the-sub-and-sup-elements">sub</a></code>;
! 28570: <code><a href="#the-sub-and-sup-elements">sup</a></code>;
! 28571: <code><a href="#svg">svg</a></code>;
! 28572: <code><a href="#the-table-element">table</a></code>;
! 28573: <code><a href="#the-textarea-element">textarea</a></code>;
! 28574: <code><a href="#the-time-element">time</a></code>;
! 28575: <code><a href="#the-u-element">u</a></code>;
! 28576: <code><a href="#the-var-element">var</a></code>;
! 28577: <code><a href="#the-video-element">video</a></code>
! 28578: </td><td>
! 28579: <code><a href="#the-audio-element">audio</a></code> (if the <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute is present);
! 28580: <code><a href="#the-dl-element">dl</a></code> (if the element's children include at least one name-value group);
! 28581: <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);
! 28582: <code><a href="#the-menu-element">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 or the <a href="#list-state" title="list state">list</a> state);
! 28583: <code><a href="#the-ol-element">ol</a></code> (if the element's children include at least one <code><a href="#the-li-element">li</a></code> element);
! 28584: <code><a href="#the-ul-element">ul</a></code> (if the element's children include at least one <code><a href="#the-li-element">li</a></code> element);
! 28585: <a href="#text-content" title="text content">Text</a> that is not <a href="#inter-element-whitespace">inter-element whitespace</a>
! 28586:
1.562 mike 28587: </td></tr></tbody></table><h3 class="no-num" id="attributes-1">Attributes</h3><p><i>This section is non-normative.</i></p><table><caption>List of attributes (excluding event handler content attributes)</caption>
28588: <thead><tr><th> Attribute
28589: </th><th> Element(s)
28590: </th><th> Description
28591: </th><th> Value
28592: </th></tr></thead><tbody><tr><th> <code title="">accept</code>
28593: </th><td> <code title="attr-input-accept"><a href="#attr-input-accept">input</a></code>
28594: </td><td> Hint for expected file type in <a href="#file-upload-state" title="attr-input-type-file">file upload controls</a>
28595: </td><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>
28596: </td></tr><tr><th> <code title="">accept-charset</code>
28597: </th><td> <code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">form</a></code>
28598: </td><td> Character encodings to use for <a href="#form-submission">form submission</a>
28599: </td><td> <a href="#ordered-set-of-unique-space-separated-tokens">Ordered set of unique space-separated tokens</a>, <a href="#ascii-case-insensitive">ASCII case-insensitive</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>*
28600: </td></tr><tr><th> <code title="">accesskey</code>
28601: </th><td> <a href="#the-accesskey-attribute" title="attr-accesskey">HTML elements</a>
28602: </td><td> Keyboard shortcut to activate or focus element
28603: </td><td> <a href="#ordered-set-of-unique-space-separated-tokens">Ordered set of unique space-separated tokens</a>, <a href="#case-sensitive">case-sensitive</a>, consisting of one Unicode code point in length
28604: </td></tr><tr><th> <code title="">action</code>
28605: </th><td> <code title="attr-fs-action"><a href="#attr-fs-action">form</a></code>
28606: </td><td> <a href="#url">URL</a> to use for <a href="#form-submission">form submission</a>
28607: </td><td> <a href="#valid-url-potentially-surrounded-by-spaces">Valid URL potentially surrounded by spaces</a>
28608: </td></tr><tr><th> <code title="">alt</code>
28609: </th><td> <code title="attr-area-alt"><a href="#attr-area-alt">area</a></code>;
28610: <code title="attr-img-alt"><a href="#attr-img-alt">img</a></code>;
28611: <code title="attr-input-alt"><a href="#attr-input-alt">input</a></code>
28612: </td><td> Replacement text for use when images are not available
28613: </td><td> <a href="#attribute-text">Text</a>*
28614: </td></tr><tr><th> <code title="">async</code>
28615: </th><td> <code title="attr-script-async"><a href="#attr-script-async">script</a></code>
28616: </td><td> Execute script asynchronously
28617: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28618: </td></tr><tr><th> <code title="">autocomplete</code>
28619: </th><td> <code title="attr-form-autocomplete"><a href="#attr-form-autocomplete">form</a></code>;
28620: <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">input</a></code>
28621: </td><td> Prevent the user agent from providing autocompletions for the form control(s)
28622: </td><td> "<code title="">on</code>"; "<code title="">off</code>"
28623: </td></tr><tr><th> <code title="">autofocus</code>
28624: </th><td> <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">button</a></code>;
28625: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">input</a></code>;
28626: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">keygen</a></code>;
28627: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">select</a></code>;
28628: <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">textarea</a></code>
28629: </td><td> Automatically focus the form control when the page is loaded
28630: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28631: </td></tr><tr><th> <code title="">autoplay</code>
28632: </th><td> <code title="attr-media-autoplay"><a href="#attr-media-autoplay">audio</a></code>;
28633: <code title="attr-media-autoplay"><a href="#attr-media-autoplay">video</a></code>
28634: </td><td> Hint that the <a href="#media-resource">media resource</a> can be started automatically when the page is loaded
28635: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28636: </td></tr><tr><th> <code title="">border</code>
28637: </th><td> <code title="attr-table-border"><a href="#attr-table-border">table</a></code>
28638: </td><td> Explicit indication that the <code><a href="#the-table-element">table</a></code> element is not being used for layout purposes
28639: </td><td> The empty string, or "<code title="">1</code>"
28640: </td></tr><tr><th> <code title="">challenge</code>
28641: </th><td> <code title="attr-keygen-challenge"><a href="#attr-keygen-challenge">keygen</a></code>
28642: </td><td> String to package with the generated and signed public key
28643: </td><td> <a href="#attribute-text">Text</a>
28644: </td></tr><tr><th> <code title="">charset</code>
28645: </th><td> <code title="attr-meta-charset"><a href="#attr-meta-charset">meta</a></code>
28646: </td><td> <a href="#character-encoding-declaration">Character encoding declaration</a>
28647: </td><td> <a href="#preferred-mime-name">Preferred MIME name</a> of an encoding*
28648: </td></tr><tr><th> <code title="">charset</code>
28649: </th><td> <code title="attr-script-charset"><a href="#attr-script-charset">script</a></code>
28650: </td><td> Character encoding of the external script resource
28651: </td><td> <a href="#preferred-mime-name">Preferred MIME name</a> of an encoding*
28652: </td></tr><tr><th> <code title="">checked</code>
28653: </th><td> <code title="attr-command-checked"><a href="#attr-command-checked">command</a></code>;
28654: <code title="attr-input-checked"><a href="#attr-input-checked">input</a></code>
28655: </td><td> Whether the command or control is checked
28656: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28657: </td></tr><tr><th> <code title="">cite</code>
28658: </th><td> <code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">blockquote</a></code>;
28659: <code title="attr-mod-cite"><a href="#attr-mod-cite">del</a></code>;
28660: <code title="attr-mod-cite"><a href="#attr-mod-cite">ins</a></code>;
28661: <code title="attr-q-cite"><a href="#attr-q-cite">q</a></code>
28662: </td><td> Link to the source of the quotation or more information about the edit
28663: </td><td> <a href="#valid-url-potentially-surrounded-by-spaces">Valid URL potentially surrounded by spaces</a>
28664: </td></tr><tr><th> <code title="">class</code>
28665: </th><td> <a href="#classes" title="attr-class">HTML elements</a>
28666: </td><td> Classes to which the element belongs
28667: </td><td> <a href="#set-of-space-separated-tokens">Set of space-separated tokens</a>
28668: </td></tr><tr><th> <code title="">cols</code>
28669: </th><td> <code title="attr-textarea-cols"><a href="#attr-textarea-cols">textarea</a></code>
28670: </td><td> Maximum number of characters per line
28671: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a> greater than zero
28672: </td></tr><tr><th> <code title="">colspan</code>
28673: </th><td> <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">td</a></code>;
28674: <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">th</a></code>
28675: </td><td> Number of columns that the cell is to span
28676: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a> greater than zero
28677: </td></tr><tr><th> <code title="">content</code>
28678: </th><td> <code title="attr-meta-content"><a href="#attr-meta-content">meta</a></code>
28679: </td><td> Value of the element
28680: </td><td> <a href="#attribute-text">Text</a>*
28681: </td></tr><tr><th> <code title="">contenteditable</code>
28682: </th><td> <a href="#attr-contenteditable" title="attr-contenteditable">HTML elements</a>
1.575 mike 28683: </td><td> Whether the element is an editable
1.562 mike 28684: </td><td> "<code title="">true</code>"; "<code title="">false</code>"
28685: </td></tr><tr><th> <code title="">contextmenu</code>
28686: </th><td> <a href="#attr-contextmenu" title="attr-contextmenu">HTML elements</a>
28687: </td><td> The element's context menu
28688: </td><td> <a href="#concept-id" title="concept-id">ID</a>*
28689: </td></tr><tr><th> <code title="">controls</code>
28690: </th><td> <code title="attr-media-controls"><a href="#attr-media-controls">audio</a></code>;
28691: <code title="attr-media-controls"><a href="#attr-media-controls">video</a></code>
28692: </td><td> Show user agent controls
28693: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28694: </td></tr><tr><th> <code title="">coords</code>
28695: </th><td> <code title="attr-area-coords"><a href="#attr-area-coords">area</a></code>
28696: </td><td> Coordinates for the shape to be created in an <a href="#image-map">image map</a>
28697: </td><td> <a href="#valid-list-of-integers">Valid list of integers</a>*
28698: </td></tr><tr><th> <code title="">crossorigin</code>
28699: </th><td> <code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">audio</a></code>;
28700: <code title="attr-img-crossorigin"><a href="#attr-img-crossorigin">img</a></code>;
28701: <code title="attr-media-crossorigin"><a href="#attr-media-crossorigin">video</a></code>
28702: </td><td> How the element handles crossorigin requests.
28703: </td><td> "<code title="attr-crossorigin-anonymous-keyword"><a href="#attr-crossorigin-anonymous-keyword">anonymous</a></code>"; "<code title="attr-crossorigin-use-credentials-keyword"><a href="#attr-crossorigin-use-credentials-keyword">use-credentials</a></code>"
28704: </td></tr><tr><th> <code title="">data</code>
28705: </th><td> <code title="attr-object-data"><a href="#attr-object-data">object</a></code>
28706: </td><td> Address of the resource
28707: </td><td> <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">Valid non-empty URL potentially surrounded by spaces</a>
28708: </td></tr><tr><th> <code title="">datetime</code>
28709: </th><td> <code title="attr-mod-datetime"><a href="#attr-mod-datetime">del</a></code>;
28710: <code title="attr-mod-datetime"><a href="#attr-mod-datetime">ins</a></code>
28711: </td><td> Date and (optionally) time of the change
28712: </td><td> <a href="#valid-date-string-with-optional-time">Valid date string with optional time</a>
28713: </td></tr><tr><th> <code title="">datetime</code>
28714: </th><td> <code title="attr-time-datetime"><a href="#attr-time-datetime">time</a></code>
28715: </td><td> Value of the element
28716: </td><td> <a href="#valid-date-or-time-string">Valid date or time string</a>*
28717: </td></tr><tr><th> <code title="">default</code>
28718: </th><td> <code title="attr-track-default"><a href="#attr-track-default">track</a></code>
28719: </td><td> Enable the track if no other <a href="#text-track">text track</a> is more suitable.
28720: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28721: </td></tr><tr><th> <code title="">defer</code>
28722: </th><td> <code title="attr-script-defer"><a href="#attr-script-defer">script</a></code>
28723: </td><td> Defer script execution
28724: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28725: </td></tr><tr><th> <code title="">dir</code>
28726: </th><td> <a href="#the-dir-attribute" title="attr-dir">HTML elements</a>
28727: </td><td> <a href="#the-directionality" title="the directionality">The text directionality</a> of the element
1.619 mike 28728: </td><td> "<code title="attr-dir-ltr"><a href="#attr-dir-ltr">ltr</a></code>"; "<code title="attr-dir-rtl"><a href="#attr-dir-rtl">rtl</a></code>"; "<code title="attr-dir-auto"><a href="#attr-dir-auto">auto</a></code>"
1.562 mike 28729: </td></tr><tr><th> <code title="">dirname</code>
28730: </th><td> <code title="attr-input-dirname"><a href="#attr-input-dirname">input</a></code>;
28731: <code title="attr-textarea-dirname"><a href="#attr-textarea-dirname">textarea</a></code>
28732: </td><td> Name of form field to use for sending the element's <a href="#the-directionality" title="the directionality">directionality</a> in <a href="#form-submission">form submission</a>
28733: </td><td> <a href="#attribute-text">Text</a>*
28734: </td></tr><tr><th> <code title="">disabled</code>
28735: </th><td> <code title="attr-fe-disabled"><a href="#attr-fe-disabled">button</a></code>;
28736: <code title="attr-command-disabled"><a href="#attr-command-disabled">command</a></code>;
28737: <code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">fieldset</a></code>;
28738: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">input</a></code>;
28739: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">keygen</a></code>;
28740: <code title="attr-optgroup-disabled"><a href="#attr-optgroup-disabled">optgroup</a></code>;
28741: <code title="attr-option-disabled"><a href="#attr-option-disabled">option</a></code>;
28742: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">select</a></code>;
28743: <code title="attr-fe-disabled"><a href="#attr-fe-disabled">textarea</a></code>
28744: </td><td> Whether the form control is disabled
28745: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28746: </td></tr><tr><th> <code title="">draggable</code>
28747: </th><td> <a href="#the-draggable-attribute" title="attr-draggable">HTML elements</a>
28748: </td><td> Whether the element is draggable
28749: </td><td> "<code title="">true</code>"; "<code title="">false</code>"
28750: </td></tr><tr><th> <code title="">dropzone</code>
28751: </th><td> <a href="#the-dropzone-attribute" title="attr-dropzone">HTML elements</a>
28752: </td><td> Accepted item types for drag-and-drop
28753: </td><td> <a href="#unordered-set-of-unique-space-separated-tokens">Unordered set of unique space-separated tokens</a>, <a href="#ascii-case-insensitive">ASCII case-insensitive</a>, consisting of accepted types and drag feedback*
28754: </td></tr><tr><th> <code title="">enctype</code>
28755: </th><td> <code title="attr-fs-enctype"><a href="#attr-fs-enctype">form</a></code>
28756: </td><td> Form data set encoding type to use for <a href="#form-submission">form submission</a>
28757: </td><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>"
28758: </td></tr><tr><th> <code title="">for</code>
28759: </th><td> <code title="attr-label-for"><a href="#attr-label-for">label</a></code>
28760: </td><td> Associate the label with form control
28761: </td><td> <a href="#concept-id" title="concept-id">ID</a>*
28762: </td></tr><tr><th> <code title="">for</code>
28763: </th><td> <code title="attr-output-for"><a href="#attr-output-for">output</a></code>
28764: </td><td> Specifies controls from which the output was calculated
28765: </td><td> <a href="#unordered-set-of-unique-space-separated-tokens">Unordered set of unique space-separated tokens</a>, <a href="#case-sensitive">case-sensitive</a>, consisting of IDs*
28766: </td></tr><tr><th> <code title="">form</code>
28767: </th><td> <code title="attr-fae-form"><a href="#attr-fae-form">button</a></code>;
28768: <code title="attr-fae-form"><a href="#attr-fae-form">fieldset</a></code>;
28769: <code title="attr-fae-form"><a href="#attr-fae-form">input</a></code>;
28770: <code title="attr-fae-form"><a href="#attr-fae-form">keygen</a></code>;
28771: <code title="attr-fae-form"><a href="#attr-fae-form">label</a></code>;
28772: <code title="attr-fae-form"><a href="#attr-fae-form">object</a></code>;
28773: <code title="attr-fae-form"><a href="#attr-fae-form">output</a></code>;
28774: <code title="attr-fae-form"><a href="#attr-fae-form">select</a></code>;
28775: <code title="attr-fae-form"><a href="#attr-fae-form">textarea</a></code>
28776: </td><td> Associates the control with a <code><a href="#the-form-element">form</a></code> element
28777: </td><td> <a href="#concept-id" title="concept-id">ID</a>*
28778: </td></tr><tr><th> <code title="">formaction</code>
28779: </th><td> <code title="attr-fs-formaction"><a href="#attr-fs-formaction">button</a></code>;
28780: <code title="attr-fs-formaction"><a href="#attr-fs-formaction">input</a></code>
28781: </td><td> <a href="#url">URL</a> to use for <a href="#form-submission">form submission</a>
28782: </td><td> <a href="#valid-url-potentially-surrounded-by-spaces">Valid URL potentially surrounded by spaces</a>
28783: </td></tr><tr><th> <code title="">formenctype</code>
28784: </th><td> <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">button</a></code>;
28785: <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">input</a></code>
28786: </td><td> Form data set encoding type to use for <a href="#form-submission">form submission</a>
28787: </td><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>"
28788: </td></tr><tr><th> <code title="">formmethod</code>
28789: </th><td> <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">button</a></code>;
28790: <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">input</a></code>
28791: </td><td> HTTP method to use for <a href="#form-submission">form submission</a>
28792: </td><td> "<code title="">GET</code>"; "<code title="">POST</code>"
28793: </td></tr><tr><th> <code title="">formnovalidate</code>
28794: </th><td> <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">button</a></code>;
28795: <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">input</a></code>
28796: </td><td> Bypass form control validation for <a href="#form-submission">form submission</a>
28797: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28798: </td></tr><tr><th> <code title="">formtarget</code>
28799: </th><td> <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">button</a></code>;
28800: <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">input</a></code>
28801: </td><td> <a href="#browsing-context">Browsing context</a> for <a href="#form-submission">form submission</a>
28802: </td><td> <a href="#valid-browsing-context-name-or-keyword">Valid browsing context name or keyword</a>
28803: </td></tr><tr><th> <code title="">headers</code>
28804: </th><td> <code title="attr-tdth-headers"><a href="#attr-tdth-headers">td</a></code>;
28805: <code title="attr-tdth-headers"><a href="#attr-tdth-headers">th</a></code>
28806: </td><td> The header cells for this cell
28807: </td><td> <a href="#unordered-set-of-unique-space-separated-tokens">Unordered set of unique space-separated tokens</a>, <a href="#case-sensitive">case-sensitive</a>, consisting of IDs*
28808: </td></tr><tr><th> <code title="">height</code>
28809: </th><td> <code title="attr-canvas-height"><a href="#attr-canvas-height">canvas</a></code>;
28810: <code title="attr-dim-height"><a href="#attr-dim-height">embed</a></code>;
28811: <code title="attr-dim-height"><a href="#attr-dim-height">iframe</a></code>;
28812: <code title="attr-dim-height"><a href="#attr-dim-height">img</a></code>;
28813: <code title="attr-dim-height"><a href="#attr-dim-height">input</a></code>;
28814: <code title="attr-dim-height"><a href="#attr-dim-height">object</a></code>;
28815: <code title="attr-dim-height"><a href="#attr-dim-height">video</a></code>
28816: </td><td> Vertical dimension
28817: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a>
28818: </td></tr><tr><th> <code title="">hidden</code>
28819: </th><td> <a href="#the-hidden-attribute" title="attr-hidden">HTML elements</a>
28820: </td><td> Whether the element is relevant
28821: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28822: </td></tr><tr><th> <code title="">high</code>
28823: </th><td> <code title="attr-meter-high"><a href="#attr-meter-high">meter</a></code>
28824: </td><td> Low limit of high range
28825: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a>*
28826: </td></tr><tr><th> <code title="">href</code>
28827: </th><td> <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">a</a></code>;
28828: <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">area</a></code>
28829: </td><td> Address of the <a href="#hyperlink">hyperlink</a>
28830: </td><td> <a href="#valid-url-potentially-surrounded-by-spaces">Valid URL potentially surrounded by spaces</a>
28831: </td></tr><tr><th> <code title="">href</code>
28832: </th><td> <code title="attr-link-href"><a href="#attr-link-href">link</a></code>
28833: </td><td> Address of the <a href="#hyperlink">hyperlink</a>
28834: </td><td> <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">Valid non-empty URL potentially surrounded by spaces</a>
28835: </td></tr><tr><th> <code title="">href</code>
28836: </th><td> <code title="attr-base-href"><a href="#attr-base-href">base</a></code>
28837: </td><td> <a href="#document-base-url">Document base URL</a>
28838: </td><td> <a href="#valid-url-potentially-surrounded-by-spaces">Valid URL potentially surrounded by spaces</a>
28839: </td></tr><tr><th> <code title="">hreflang</code>
28840: </th><td> <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">a</a></code>;
28841: <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">area</a></code>;
28842: <code title="attr-link-hreflang"><a href="#attr-link-hreflang">link</a></code>
28843: </td><td> Language of the linked resource
28844: </td><td> Valid BCP 47 language tag
28845: </td></tr><tr><th> <code title="">http-equiv</code>
28846: </th><td> <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">meta</a></code>
28847: </td><td> Pragma directive
28848: </td><td> <a href="#attribute-text">Text</a>*
28849: </td></tr><tr><th> <code title="">icon</code>
28850: </th><td> <code title="attr-command-icon"><a href="#attr-command-icon">command</a></code>
28851: </td><td> Icon for the command
28852: </td><td> <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">Valid non-empty URL potentially surrounded by spaces</a>
28853: </td></tr><tr><th> <code title="">id</code>
28854: </th><td> <a href="#the-id-attribute" title="attr-id">HTML elements</a>
28855: </td><td> The element's <a href="#concept-id" title="concept-id">ID</a>
28856: </td><td> <a href="#attribute-text">Text</a>*
28857: </td></tr><tr><th> <code title="">ismap</code>
28858: </th><td> <code title="attr-img-ismap"><a href="#attr-img-ismap">img</a></code>
28859: </td><td> Whether the image is a server-side image map
28860: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28861: </td></tr><tr><th> <code title="">keytype</code>
28862: </th><td> <code title="attr-keygen-keytype"><a href="#attr-keygen-keytype">keygen</a></code>
28863: </td><td> The type of cryptographic key to generate
28864: </td><td> <a href="#attribute-text">Text</a>*
28865: </td></tr><tr><th> <code title="">kind</code>
28866: </th><td> <code title="attr-track-kind"><a href="#attr-track-kind">track</a></code>
28867: </td><td> The type of text track
28868: </td><td> "<code title="attr-track-kind-subtitles"><a href="#attr-track-kind-subtitles">subtitles</a></code>";
28869: "<code title="attr-track-kind-captions"><a href="#attr-track-kind-captions">captions</a></code>";
28870: "<code title="attr-track-kind-descriptions"><a href="#attr-track-kind-descriptions">descriptions</a></code>";
28871: "<code title="attr-track-kind-chapters"><a href="#attr-track-kind-chapters">chapters</a></code>";
28872: "<code title="attr-track-kind-metadata"><a href="#attr-track-kind-metadata">metadata</a></code>"
28873: </td></tr><tr><th> <code title="">label</code>
28874: </th><td> <code title="attr-command-label"><a href="#attr-command-label">command</a></code>;
28875: <code title="attr-menu-label"><a href="#attr-menu-label">menu</a></code>;
28876: <code title="attr-optgroup-label"><a href="#attr-optgroup-label">optgroup</a></code>;
28877: <code title="attr-option-label"><a href="#attr-option-label">option</a></code>;
28878: <code title="attr-track-label"><a href="#attr-track-label">track</a></code>
28879: </td><td> User-visible label
28880: </td><td> <a href="#attribute-text">Text</a>
28881: </td></tr><tr><th> <code title="">lang</code>
28882: </th><td> <a href="#attr-lang" title="attr-lang">HTML elements</a>
28883: </td><td> <a href="#language">Language</a> of the element
28884: </td><td> Valid BCP 47 language tag or the empty string
28885: </td></tr><tr><th> <code title="">list</code>
28886: </th><td> <code title="attr-input-list"><a href="#attr-input-list">input</a></code>
28887: </td><td> List of autocomplete options
28888: </td><td> <a href="#concept-id" title="concept-id">ID</a>*
28889: </td></tr><tr><th> <code title="">loop</code>
28890: </th><td> <code title="attr-media-loop"><a href="#attr-media-loop">audio</a></code>;
28891: <code title="attr-media-loop"><a href="#attr-media-loop">video</a></code>
28892: </td><td> Whether to loop the <a href="#media-resource">media resource</a>
28893: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28894: </td></tr><tr><th> <code title="">low</code>
28895: </th><td> <code title="attr-meter-low"><a href="#attr-meter-low">meter</a></code>
28896: </td><td> High limit of low range
28897: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a>*
28898: </td></tr><tr><th> <code title="">manifest</code>
28899: </th><td> <code title="attr-html-manifest"><a href="#attr-html-manifest">html</a></code>
28900: </td><td> <a href="#concept-appcache-manifest" title="concept-appcache-manifest">Application cache manifest</a>
28901: </td><td> <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">Valid non-empty URL potentially surrounded by spaces</a>
28902: </td></tr><tr><th> <code title="">max</code>
28903: </th><td> <code title="attr-input-max"><a href="#attr-input-max">input</a></code>
28904: </td><td> Maximum value
28905: </td><td> varies*
28906: </td></tr><tr><th> <code title="">max</code>
28907: </th><td> <code title="attr-meter-max"><a href="#attr-meter-max">meter</a></code>;
28908: <code title="attr-progress-max"><a href="#attr-progress-max">progress</a></code>
28909: </td><td> Upper bound of range
28910: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a>*
28911: </td></tr><tr><th> <code title="">maxlength</code>
28912: </th><td> <code title="attr-input-maxlength"><a href="#attr-input-maxlength">input</a></code>;
28913: <code title="attr-textarea-maxlength"><a href="#attr-textarea-maxlength">textarea</a></code>
28914: </td><td> Maximum length of value
28915: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a>
28916: </td></tr><tr><th> <code title="">media</code>
28917: </th><td> <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">a</a></code>;
28918: <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">area</a></code>;
28919: <code title="attr-link-media"><a href="#attr-link-media">link</a></code>;
28920: <code title="attr-source-media"><a href="#attr-source-media">source</a></code>;
28921: <code title="attr-style-media"><a href="#attr-style-media">style</a></code>
28922: </td><td> Applicable media
28923: </td><td> <a href="#valid-media-query">Valid media query</a>
28924: </td></tr><tr><th> <code title="">mediagroup</code>
28925: </th><td> <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">audio</a></code>;
28926: <code title="attr-media-mediagroup"><a href="#attr-media-mediagroup">video</a></code>
28927: </td><td> Groups <a href="#media-element" title="media element">media elements</a> together with an implicit <code><a href="#mediacontroller">MediaController</a></code>
28928: </td><td> <a href="#attribute-text">Text</a>
28929: </td></tr><tr><th> <code title="">method</code>
28930: </th><td> <code title="attr-fs-method"><a href="#attr-fs-method">form</a></code>
28931: </td><td> HTTP method to use for <a href="#form-submission">form submission</a>
28932: </td><td> "<code title="">GET</code>"; "<code title="">POST</code>"
28933: </td></tr><tr><th> <code title="">min</code>
28934: </th><td> <code title="attr-input-min"><a href="#attr-input-min">input</a></code>
28935: </td><td> Minimum value
28936: </td><td> varies*
28937: </td></tr><tr><th> <code title="">min</code>
28938: </th><td> <code title="attr-meter-min"><a href="#attr-meter-min">meter</a></code>
28939: </td><td> Lower bound of range
28940: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a>*
28941: </td></tr><tr><th> <code title="">multiple</code>
28942: </th><td> <code title="attr-input-multiple"><a href="#attr-input-multiple">input</a></code>;
28943: <code title="attr-select-multiple"><a href="#attr-select-multiple">select</a></code>
28944: </td><td> Whether to allow multiple values
28945: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28946: </td></tr><tr><th> <code title="">muted</code>
28947: </th><td> <code title="attr-media-muted"><a href="#attr-media-muted">audio</a></code>;
28948: <code title="attr-media-muted"><a href="#attr-media-muted">video</a></code>
28949: </td><td> Whether to mute the <a href="#media-resource">media resource</a> by default
28950: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28951: </td></tr><tr><th> <code title="">name</code>
28952: </th><td> <code title="attr-fe-name"><a href="#attr-fe-name">button</a></code>;
28953: <code title="attr-fe-name"><a href="#attr-fe-name">fieldset</a></code>;
28954: <code title="attr-fe-name"><a href="#attr-fe-name">input</a></code>;
28955: <code title="attr-fe-name"><a href="#attr-fe-name">keygen</a></code>;
28956: <code title="attr-fe-name"><a href="#attr-fe-name">output</a></code>;
28957: <code title="attr-fe-name"><a href="#attr-fe-name">select</a></code>;
28958: <code title="attr-fe-name"><a href="#attr-fe-name">textarea</a></code>
28959: </td><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
28960: </td><td> <a href="#attribute-text">Text</a>*
28961: </td></tr><tr><th> <code title="">name</code>
28962: </th><td> <code title="attr-form-name"><a href="#attr-form-name">form</a></code>
28963: </td><td> Name of form to use in the <code title="dom-document-forms"><a href="#dom-document-forms">document.forms</a></code> API
28964: </td><td> <a href="#attribute-text">Text</a>*
28965: </td></tr><tr><th> <code title="">name</code>
28966: </th><td> <code title="attr-iframe-name"><a href="#attr-iframe-name">iframe</a></code>;
28967: <code title="attr-object-name"><a href="#attr-object-name">object</a></code>
28968: </td><td> Name of <a href="#nested-browsing-context">nested browsing context</a>
28969: </td><td> <a href="#valid-browsing-context-name-or-keyword">Valid browsing context name or keyword</a>
28970: </td></tr><tr><th> <code title="">name</code>
28971: </th><td> <code title="attr-map-name"><a href="#attr-map-name">map</a></code>
28972: </td><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
28973: </td><td> <a href="#attribute-text">Text</a>*
28974: </td></tr><tr><th> <code title="">name</code>
28975: </th><td> <code title="attr-meta-name"><a href="#attr-meta-name">meta</a></code>
28976: </td><td> Metadata name
28977: </td><td> <a href="#attribute-text">Text</a>*
28978: </td></tr><tr><th> <code title="">name</code>
28979: </th><td> <code title="attr-param-name"><a href="#attr-param-name">param</a></code>
28980: </td><td> Name of parameter
28981: </td><td> <a href="#attribute-text">Text</a>
28982: </td></tr><tr><th> <code title="">novalidate</code>
28983: </th><td> <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">form</a></code>
28984: </td><td> Bypass form control validation for <a href="#form-submission">form submission</a>
28985: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28986: </td></tr><tr><th> <code title="">open</code>
28987: </th><td> <code title="attr-details-open"><a href="#attr-details-open">details</a></code>
28988: </td><td> Whether the details are visible
28989: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
28990: </td></tr><tr><th> <code title="">optimum</code>
28991: </th><td> <code title="attr-meter-optimum"><a href="#attr-meter-optimum">meter</a></code>
28992: </td><td> Optimum value in gauge
28993: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a>*
28994: </td></tr><tr><th> <code title="">pattern</code>
28995: </th><td> <code title="attr-input-pattern"><a href="#attr-input-pattern">input</a></code>
28996: </td><td> Pattern to be matched by the form control's value
28997: </td><td> Regular expression matching the JavaScript <i title="">Pattern</i> production
28998: </td></tr><tr><th> <code title="">placeholder</code>
28999: </th><td> <code title="attr-input-placeholder"><a href="#attr-input-placeholder">input</a></code>;
29000: <code title="attr-textarea-placeholder"><a href="#attr-textarea-placeholder">textarea</a></code>
29001: </td><td> User-visible label to be placed within the form control
29002: </td><td> <a href="#attribute-text">Text</a>*
29003: </td></tr><tr><th> <code title="">poster</code>
29004: </th><td> <code title="attr-video-poster"><a href="#attr-video-poster">video</a></code>
29005: </td><td> Poster frame to show prior to video playback
29006: </td><td> <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">Valid non-empty URL potentially surrounded by spaces</a>
29007: </td></tr><tr><th> <code title="">preload</code>
29008: </th><td> <code title="attr-media-preload"><a href="#attr-media-preload">audio</a></code>;
29009: <code title="attr-media-preload"><a href="#attr-media-preload">video</a></code>
29010: </td><td> Hints how much buffering the <a href="#media-resource">media resource</a> will likely need
29011: </td><td> "<code title="attr-media-preload-none"><a href="#attr-media-preload-none">none</a></code>";
29012: "<code title="attr-media-preload-metadata"><a href="#attr-media-preload-metadata">metadata</a></code>";
29013: "<code title="attr-media-preload-auto"><a href="#attr-media-preload-auto">auto</a></code>"
29014: </td></tr><tr><th> <code title="">pubdate</code>
29015: </th><td> <code title="attr-time-pubdate"><a href="#attr-time-pubdate">time</a></code>
29016: </td><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">body</a></code>
29017: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29018: </td></tr><tr><th> <code title="">radiogroup</code>
29019: </th><td> <code title="attr-command-radiogroup"><a href="#attr-command-radiogroup">command</a></code>
29020: </td><td> Name of group of commands to treat as a radio button group
29021: </td><td> <a href="#attribute-text">Text</a>
29022: </td></tr><tr><th> <code title="">readonly</code>
29023: </th><td> <code title="attr-input-readonly"><a href="#attr-input-readonly">input</a></code>;
29024: <code title="attr-textarea-readonly"><a href="#attr-textarea-readonly">textarea</a></code>
29025: </td><td> Whether to allow the value to be edited by the user
29026: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29027: </td></tr><tr><th> <code title="">rel</code>
29028: </th><td> <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">a</a></code>;
29029: <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">area</a></code>;
29030: <code title="attr-link-rel"><a href="#attr-link-rel">link</a></code>
29031: </td><td> Relationship between the document containing the hyperlink and the destination resource
29032: </td><td> <a href="#set-of-space-separated-tokens">Set of space-separated tokens</a>*
29033: </td></tr><tr><th> <code title="">required</code>
29034: </th><td> <code title="attr-input-required"><a href="#attr-input-required">input</a></code>;
29035: <code title="attr-select-required"><a href="#attr-select-required">select</a></code>;
29036: <code title="attr-textarea-required"><a href="#attr-textarea-required">textarea</a></code>
29037: </td><td> Whether the control is required for <a href="#form-submission">form submission</a>
29038: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29039: </td></tr><tr><th> <code title="">reversed</code>
29040: </th><td> <code title="attr-ol-reversed"><a href="#attr-ol-reversed">ol</a></code>
29041: </td><td> Number the list backwards
29042: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29043: </td></tr><tr><th> <code title="">rows</code>
29044: </th><td> <code title="attr-textarea-rows"><a href="#attr-textarea-rows">textarea</a></code>
29045: </td><td> Number of lines to show
29046: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a> greater than zero
29047: </td></tr><tr><th> <code title="">rowspan</code>
29048: </th><td> <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">td</a></code>;
29049: <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">th</a></code>
29050: </td><td> Number of rows that the cell is to span
29051: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a>
29052: </td></tr><tr><th> <code title="">sandbox</code>
29053: </th><td> <code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">iframe</a></code>
29054: </td><td> Security rules for nested content
29055: </td><td> <a href="#unordered-set-of-unique-space-separated-tokens">Unordered set of unique space-separated tokens</a>, <a href="#ascii-case-insensitive">ASCII case-insensitive</a>, consisting of
29056: "<code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code>",
29057: "<code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>",
29058: "<code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code> and
29059: "<code title="attr-iframe-sandbox-allow-top-navigation"><a href="#attr-iframe-sandbox-allow-top-navigation">allow-top-navigation</a></code>"
29060: </td></tr><tr><th> <code title="">spellcheck</code>
29061: </th><td> <a href="#attr-spellcheck" title="attr-spellcheck">HTML elements</a>
29062: </td><td> Whether the element is to have its spelling and grammar checked
29063: </td><td> "<code title="">true</code>"; "<code title="">false</code>"
29064: </td></tr><tr><th> <code title="">scope</code>
29065: </th><td> <code title="attr-th-scope"><a href="#attr-th-scope">th</a></code>
29066: </td><td> Specifies which cells the header cell applies to
29067: </td><td> "<code title="attr-th-scope-row"><a href="#attr-th-scope-row">row</a></code>";
29068: "<code title="attr-th-scope-col"><a href="#attr-th-scope-col">col</a></code>";
29069: "<code title="attr-th-scope-rowgroup"><a href="#attr-th-scope-rowgroup">rowgroup</a></code>";
29070: "<code title="attr-th-scope-colgroup"><a href="#attr-th-scope-colgroup">colgroup</a></code>"
29071: </td></tr><tr><th> <code title="">scoped</code>
29072: </th><td> <code title="attr-style-scoped"><a href="#attr-style-scoped">style</a></code>
29073: </td><td> Whether the styles apply to the entire document or just the parent subtree
29074: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29075: </td></tr><tr><th> <code title="">seamless</code>
29076: </th><td> <code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">iframe</a></code>
29077: </td><td> Whether to apply the document's styles to the nested content
29078: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29079: </td></tr><tr><th> <code title="">selected</code>
29080: </th><td> <code title="attr-option-selected"><a href="#attr-option-selected">option</a></code>
29081: </td><td> Whether the option is selected by default
29082: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29083: </td></tr><tr><th> <code title="">shape</code>
29084: </th><td> <code title="attr-area-shape"><a href="#attr-area-shape">area</a></code>
29085: </td><td> The kind of shape to be created in an <a href="#image-map">image map</a>
29086: </td><td> "<code title="attr-area-shape-keyword-circle"><a href="#attr-area-shape-keyword-circle">circle</a></code>";
29087: "<code title="attr-area-shape-keyword-default"><a href="#attr-area-shape-keyword-default">default</a></code>";
29088: "<code title="attr-area-shape-keyword-poly"><a href="#attr-area-shape-keyword-poly">poly</a></code>";
29089: "<code title="attr-area-shape-keyword-rect"><a href="#attr-area-shape-keyword-rect">rect</a></code>"
29090: </td></tr><tr><th> <code title="">size</code>
29091: </th><td> <code title="attr-input-size"><a href="#attr-input-size">input</a></code>;
29092: <code title="attr-select-size"><a href="#attr-select-size">select</a></code>
29093: </td><td> Size of the control
29094: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a> greater than zero
29095: </td></tr><tr><th> <code title="">sizes</code>
29096: </th><td> <code title="attr-link-sizes"><a href="#attr-link-sizes">link</a></code>
29097: </td><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>")
29098: </td><td> <a href="#unordered-set-of-unique-space-separated-tokens">Unordered set of unique space-separated tokens</a>, <a href="#ascii-case-insensitive">ASCII case-insensitive</a>, consisting of sizes*
29099: </td></tr><tr><th> <code title="">span</code>
29100: </th><td> <code title="attr-col-span"><a href="#attr-col-span">col</a></code>;
29101: <code title="attr-colgroup-span"><a href="#attr-colgroup-span">colgroup</a></code>
29102: </td><td> Number of columns spanned by the element
29103: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a> greater than zero
29104: </td></tr><tr><th> <code title="">src</code>
29105: </th><td> <code title="attr-media-src"><a href="#attr-media-src">audio</a></code>;
29106: <code title="attr-embed-src"><a href="#attr-embed-src">embed</a></code>;
29107: <code title="attr-iframe-src"><a href="#attr-iframe-src">iframe</a></code>;
29108: <code title="attr-img-src"><a href="#attr-img-src">img</a></code>;
29109: <code title="attr-input-src"><a href="#attr-input-src">input</a></code>;
29110: <code title="attr-script-src"><a href="#attr-script-src">script</a></code>;
29111: <code title="attr-source-src"><a href="#attr-source-src">source</a></code>;
29112: <code title="attr-track-src"><a href="#attr-track-src">track</a></code>;
29113: <code title="attr-media-src"><a href="#attr-media-src">video</a></code>
29114: </td><td> Address of the resource
29115: </td><td> <a href="#valid-non-empty-url-potentially-surrounded-by-spaces">Valid non-empty URL potentially surrounded by spaces</a>
29116: </td></tr><tr><th> <code title="">srcdoc</code>
29117: </th><td> <code title="attr-iframe-srcdoc"><a href="#attr-iframe-srcdoc">iframe</a></code>
29118: </td><td> A document to render in the <code><a href="#the-iframe-element">iframe</a></code>
29119: </td><td> The source of <a href="#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>*
29120: </td></tr><tr><th> <code title="">srclang</code>
29121: </th><td> <code title="attr-track-srclang"><a href="#attr-track-srclang">track</a></code>
29122: </td><td> Language of the text track
29123: </td><td> Valid BCP 47 language tag
29124: </td></tr><tr><th> <code title="">start</code>
29125: </th><td> <code title="attr-ol-start"><a href="#attr-ol-start">ol</a></code>
29126: </td><td> <a href="#ordinal-value">Ordinal value</a> of the first item
29127: </td><td> <a href="#valid-integer">Valid integer</a>
29128: </td></tr><tr><th> <code title="">step</code>
29129: </th><td> <code title="attr-input-step"><a href="#attr-input-step">input</a></code>
29130: </td><td> Granularity to be matched by the form control's value
29131: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a> greater than zero, or "<code title="">any</code>"
29132: </td></tr><tr><th> <code title="">style</code>
29133: </th><td> <a href="#the-style-attribute" title="attr-style">HTML elements</a>
29134: </td><td> Presentational and formatting instructions
29135: </td><td> CSS declarations*
29136: </td></tr><tr><th> <code title="">tabindex</code>
29137: </th><td> <a href="#attr-tabindex" title="attr-tabindex">HTML elements</a>
29138: </td><td> Whether the element is focusable, and the relative order of the element for the purposes of sequential focus navigation
29139: </td><td> <a href="#valid-integer">Valid integer</a>
29140: </td></tr><tr><th> <code title="">target</code>
29141: </th><td> <code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">a</a></code>;
29142: <code title="attr-hyperlink-target"><a href="#attr-hyperlink-target">area</a></code>
29143: </td><td> <a href="#browsing-context">Browsing context</a> for <a href="#hyperlink">hyperlink</a> <a href="#navigate" title="navigate">navigation</a>
29144: </td><td> <a href="#valid-browsing-context-name-or-keyword">Valid browsing context name or keyword</a>
29145: </td></tr><tr><th> <code title="">target</code>
29146: </th><td> <code title="attr-base-target"><a href="#attr-base-target">base</a></code>
29147: </td><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>
29148: </td><td> <a href="#valid-browsing-context-name-or-keyword">Valid browsing context name or keyword</a>
29149: </td></tr><tr><th> <code title="">target</code>
29150: </th><td> <code title="attr-fs-target"><a href="#attr-fs-target">form</a></code>
29151: </td><td> <a href="#browsing-context">Browsing context</a> for <a href="#form-submission">form submission</a>
29152: </td><td> <a href="#valid-browsing-context-name-or-keyword">Valid browsing context name or keyword</a>
29153: </td></tr><tr><th> <code title="">title</code>
29154: </th><td> <a href="#the-title-attribute" title="attr-title">HTML elements</a>
29155: </td><td> Advisory information for the element
29156: </td><td> <a href="#attribute-text">Text</a>
29157: </td></tr><tr><th> <code title="">title</code>
29158: </th><td> <code title="attr-abbr-title"><a href="#attr-abbr-title">abbr</a></code>;
29159: <code title="attr-dfn-title"><a href="#attr-dfn-title">dfn</a></code>
29160: </td><td> Full term or expansion of abbreviation
29161: </td><td> <a href="#attribute-text">Text</a>
29162: </td></tr><tr><th> <code title="">title</code>
29163: </th><td> <code title="attr-command-title"><a href="#attr-command-title">command</a></code>
29164: </td><td> Hint describing the command
29165: </td><td> <a href="#attribute-text">Text</a>
29166: </td></tr><tr><th> <code title="">title</code>
29167: </th><td> <code title="attr-link-title"><a href="#attr-link-title">link</a></code>
29168: </td><td> Title of the link
29169: </td><td> <a href="#attribute-text">Text</a>
29170: </td></tr><tr><th> <code title="">title</code>
29171: </th><td> <code title="attr-link-title"><a href="#attr-link-title">link</a></code>;
29172: <code title="attr-style-title"><a href="#attr-style-title">style</a></code>
29173: </td><td> Alternative style sheet set name
29174: </td><td> <a href="#attribute-text">Text</a>
29175: </td></tr><tr><th> <code title="">type</code>
29176: </th><td> <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">a</a></code>;
29177: <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">area</a></code>;
29178: <code title="attr-link-type"><a href="#attr-link-type">link</a></code>
29179: </td><td> Hint for the type of the referenced resource
29180: </td><td> <a href="#valid-mime-type">Valid MIME type</a>
29181: </td></tr><tr><th> <code title="">type</code>
29182: </th><td> <code title="attr-button-type"><a href="#attr-button-type">button</a></code>
29183: </td><td> Type of button
29184: </td><td> "<code title="attr-button-type-submit"><a href="#attr-button-type-submit">submit</a></code>";
29185: "<code title="attr-button-type-reset"><a href="#attr-button-type-reset">reset</a></code>";
29186: "<code title="attr-button-type-button"><a href="#attr-button-type-button">button</a></code>"
29187: </td></tr><tr><th> <code title="">type</code>
29188: </th><td> <code title="attr-button-type"><a href="#attr-button-type">button</a></code>;
29189: <code title="attr-input-type"><a href="#attr-input-type">input</a></code>
29190: </td><td> Type of form control
29191: </td><td> <a href="#attr-input-type" title="attr-input-type"><code>input</code> type keyword</a>
29192: </td></tr><tr><th> <code title="">type</code>
29193: </th><td> <code title="attr-command-type"><a href="#attr-command-type">command</a></code>
29194: </td><td> Type of command
29195: </td><td> "<code title="attr-command-type-keyword-command"><a href="#attr-command-type-keyword-command">command</a></code>";
29196: "<code title="attr-command-type-keyword-checkbox"><a href="#attr-command-type-keyword-checkbox">checkbox</a></code>";
29197: "<code title="attr-command-type-keyword-radio"><a href="#attr-command-type-keyword-radio">radio</a></code>"
29198: </td></tr><tr><th> <code title="">type</code>
29199: </th><td> <code title="attr-embed-type"><a href="#attr-embed-type">embed</a></code>;
29200: <code title="attr-object-type"><a href="#attr-object-type">object</a></code>;
29201: <code title="attr-script-type"><a href="#attr-script-type">script</a></code>;
29202: <code title="attr-source-type"><a href="#attr-source-type">source</a></code>;
29203: <code title="attr-style-type"><a href="#attr-style-type">style</a></code>
29204: </td><td> Type of embedded resource
29205: </td><td> <a href="#valid-mime-type">Valid MIME type</a>
29206: </td></tr><tr><th> <code title="">type</code>
29207: </th><td> <code title="attr-menu-type"><a href="#attr-menu-type">menu</a></code>
29208: </td><td> Type of menu
29209: </td><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>"
29210: </td></tr><tr><th> <code title="">typemustmatch</code>
29211: </th><td> <code title="attr-object-typemustmatch"><a href="#attr-object-typemustmatch">object</a></code>
29212: </td><td> Whether the <code title="attr-object-type"><a href="#attr-object-type">type</a></code> attribute and the <a href="#content-type">Content-Type</a> value need to match for the resource to be used
29213: </td><td> <a href="#boolean-attribute">Boolean attribute</a>
29214: </td></tr><tr><th> <code title="">usemap</code>
29215: </th><td> <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">img</a></code>;
29216: <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">object</a></code>
29217: </td><td> Name of <a href="#image-map">image map</a> to use
29218: </td><td> <a href="#valid-hash-name-reference">Valid hash-name reference</a>*
29219: </td></tr><tr><th> <code title="">value</code>
29220: </th><td> <code title="attr-button-value"><a href="#attr-button-value">button</a></code>;
29221: <code title="attr-option-value"><a href="#attr-option-value">option</a></code>
29222: </td><td> Value to be used for <a href="#form-submission">form submission</a>
29223: </td><td> <a href="#attribute-text">Text</a>
29224: </td></tr><tr><th> <code title="">value</code>
29225: </th><td> <code title="attr-input-value"><a href="#attr-input-value">input</a></code>
29226: </td><td> Value of the form control
29227: </td><td> varies*
29228: </td></tr><tr><th> <code title="">value</code>
29229: </th><td> <code title="attr-li-value"><a href="#attr-li-value">li</a></code>
29230: </td><td> <a href="#ordinal-value">Ordinal value</a> of the list item
29231: </td><td> <a href="#valid-integer">Valid integer</a>
29232: </td></tr><tr><th> <code title="">value</code>
29233: </th><td> <code title="attr-meter-value"><a href="#attr-meter-value">meter</a></code>;
29234: <code title="attr-progress-value"><a href="#attr-progress-value">progress</a></code>
29235: </td><td> Current value of the element
29236: </td><td> <a href="#valid-floating-point-number">Valid floating point number</a>
29237: </td></tr><tr><th> <code title="">value</code>
29238: </th><td> <code title="attr-param-value"><a href="#attr-param-value">param</a></code>
29239: </td><td> Value of parameter
29240: </td><td> <a href="#attribute-text">Text</a>
29241: </td></tr><tr><th> <code title="">width</code>
29242: </th><td> <code title="attr-canvas-width"><a href="#attr-canvas-width">canvas</a></code>;
29243: <code title="attr-dim-width"><a href="#attr-dim-width">embed</a></code>;
29244: <code title="attr-dim-width"><a href="#attr-dim-width">iframe</a></code>;
29245: <code title="attr-dim-width"><a href="#attr-dim-width">img</a></code>;
29246: <code title="attr-dim-width"><a href="#attr-dim-width">input</a></code>;
29247: <code title="attr-dim-width"><a href="#attr-dim-width">object</a></code>;
29248: <code title="attr-dim-width"><a href="#attr-dim-width">video</a></code>
29249: </td><td> Horizontal dimension
29250: </td><td> <a href="#valid-non-negative-integer">Valid non-negative integer</a>
29251: </td></tr><tr><th> <code title="">wrap</code>
29252: </th><td> <code title="attr-textarea-wrap"><a href="#attr-textarea-wrap">textarea</a></code>
29253: </td><td> How the value of the form control is to be wrapped for <a href="#form-submission">form submission</a>
29254: </td><td> "<code title="attr-textarea-wrap-soft"><a href="#attr-textarea-wrap-soft">soft</a></code>";
29255: "<code title="attr-textarea-wrap-hard"><a href="#attr-textarea-wrap-hard">hard</a></code>"
29256: </td></tr></tbody></table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p><hr><table id="ix-event-handlers"><caption>List of event handler content attributes</caption>
29257: <thead><tr><th> Attribute
29258: </th><th> Element(s)
29259: </th><th> Description
29260: </th><th> Value
29261: </th></tr></thead><tbody><tr><th id="ix-handler-onabort"> <code title="">onabort</code>
29262: </th><td> <span>HTML elements</span>
29263: </td><td> <code title="event-abort">abort</code> event handler
29264: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29265:
29266: </td></tr><tr><th id="ix-handler-window-onafterprint"> <code title="">onafterprint</code>
29267: </th><td> <code title="handler-window-onafterprint"><span>body</span></code>
29268: </td><td> <code title="event-afterprint">afterprint</code> event handler for <code><a href="#window">Window</a></code> object
29269: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29270:
29271: </td></tr><tr><th id="ix-handler-window-onbeforeprint"> <code title="">onbeforeprint</code>
29272: </th><td> <code title="handler-window-onbeforeprint"><span>body</span></code>
29273: </td><td> <code title="event-beforeprint">beforeprint</code> event handler for <code><a href="#window">Window</a></code> object
29274: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29275:
29276: </td></tr><tr><th id="ix-handler-window-onbeforeunload"> <code title="">onbeforeunload</code>
29277: </th><td> <code title="handler-window-onbeforeunload"><span>body</span></code>
29278: </td><td> <code title="event-beforeunload">beforeunload</code> event handler for <code><a href="#window">Window</a></code> object
29279: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29280:
29281: </td></tr><tr><th id="ix-handler-window-onblur"> <code title="">onblur</code>
29282: </th><td> <code title="handler-window-onblur"><span>body</span></code>
29283: </td><td> <code title="event-blur">blur</code> event handler for <code><a href="#window">Window</a></code> object
29284: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29285:
29286: </td></tr><tr><th id="ix-handler-onblur"> <code title="">onblur</code>
29287: </th><td> <span>HTML elements</span>
29288: </td><td> <code title="event-blur">blur</code> event handler
29289: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29290:
29291: </td></tr><tr><th id="ix-handler-oncanplay"> <code title="">oncanplay</code>
29292: </th><td> <span>HTML elements</span>
29293: </td><td> <code title="event-media-canplay"><a href="#event-media-canplay">canplay</a></code> event handler
29294: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29295:
29296: </td></tr><tr><th id="ix-handler-oncanplaythrough"> <code title="">oncanplaythrough</code>
29297: </th><td> <span>HTML elements</span>
29298: </td><td> <code title="event-media-canplaythrough"><a href="#event-media-canplaythrough">canplaythrough</a></code> event handler
29299: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29300:
29301: </td></tr><tr><th id="ix-handler-onchange"> <code title="">onchange</code>
29302: </th><td> <span>HTML elements</span>
29303: </td><td> <code title="event-change">change</code> event handler
29304: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29305:
29306: </td></tr><tr><th id="ix-handler-onclick"> <code title="">onclick</code>
29307: </th><td> <span>HTML elements</span>
29308: </td><td> <code title="event-click"><a href="#event-click">click</a></code> event handler
29309: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29310:
29311: </td></tr><tr><th id="ix-handler-oncontextmenu"> <code title="">oncontextmenu</code>
29312: </th><td> <span>HTML elements</span>
29313: </td><td> <code title="event-contextmenu">contextmenu</code> event handler
29314: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29315:
29316: </td></tr><tr><th id="ix-handler-oncuechange"> <code title="">oncuechange</code>
29317: </th><td> <span>HTML elements</span>
29318: </td><td> <code title="event-cuechange">cuechange</code> event handler
29319: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29320:
29321: </td></tr><tr><th id="ix-handler-ondblclick"> <code title="">ondblclick</code>
29322: </th><td> <span>HTML elements</span>
29323: </td><td> <code title="event-dblclick">dblclick</code> event handler
29324: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29325:
29326: </td></tr><tr><th id="ix-handler-ondrag"> <code title="">ondrag</code>
29327: </th><td> <span>HTML elements</span>
29328: </td><td> <code title="event-drag"><a href="#event-drag">drag</a></code> event handler
29329: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29330:
29331: </td></tr><tr><th id="ix-handler-ondragend"> <code title="">ondragend</code>
29332: </th><td> <span>HTML elements</span>
29333: </td><td> <code title="event-dragend"><a href="#event-dragend">dragend</a></code> event handler
29334: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29335:
29336: </td></tr><tr><th id="ix-handler-ondragenter"> <code title="">ondragenter</code>
29337: </th><td> <span>HTML elements</span>
29338: </td><td> <code title="event-dragenter"><a href="#event-dragenter">dragenter</a></code> event handler
29339: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29340:
29341: </td></tr><tr><th id="ix-handler-ondragleave"> <code title="">ondragleave</code>
29342: </th><td> <span>HTML elements</span>
29343: </td><td> <code title="event-dragleave"><a href="#event-dragleave">dragleave</a></code> event handler
29344: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29345:
29346: </td></tr><tr><th id="ix-handler-ondragover"> <code title="">ondragover</code>
29347: </th><td> <span>HTML elements</span>
29348: </td><td> <code title="event-dragover"><a href="#event-dragover">dragover</a></code> event handler
29349: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29350:
29351: </td></tr><tr><th id="ix-handler-ondragstart"> <code title="">ondragstart</code>
29352: </th><td> <span>HTML elements</span>
29353: </td><td> <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> event handler
29354: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29355:
29356: </td></tr><tr><th id="ix-handler-ondrop"> <code title="">ondrop</code>
29357: </th><td> <span>HTML elements</span>
29358: </td><td> <code title="event-drop"><a href="#event-drop">drop</a></code> event handler
29359: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29360:
29361: </td></tr><tr><th id="ix-handler-ondurationchange"> <code title="">ondurationchange</code>
29362: </th><td> <span>HTML elements</span>
29363: </td><td> <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code> event handler
29364: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29365:
29366: </td></tr><tr><th id="ix-handler-onemptied"> <code title="">onemptied</code>
29367: </th><td> <span>HTML elements</span>
29368: </td><td> <code title="event-media-emptied"><a href="#event-media-emptied">emptied</a></code> event handler
29369: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29370:
29371: </td></tr><tr><th id="ix-handler-onended"> <code title="">onended</code>
29372: </th><td> <span>HTML elements</span>
29373: </td><td> <code title="event-media-ended"><a href="#event-media-ended">ended</a></code> event handler
29374: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29375:
29376: </td></tr><tr><th id="ix-handler-window-onerror"> <code title="">onerror</code>
29377: </th><td> <code title="handler-window-onerror"><span>body</span></code>
29378: </td><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>
29379: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29380:
29381: </td></tr><tr><th id="ix-handler-onerror"> <code title="">onerror</code>
29382: </th><td> <span>HTML elements</span>
29383: </td><td> <code title="event-error">error</code> event handler
29384: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29385:
29386: </td></tr><tr><th id="ix-handler-window-onfocus"> <code title="">onfocus</code>
29387: </th><td> <code title="handler-window-onfocus"><span>body</span></code>
29388: </td><td> <code title="event-focus">focus</code> event handler for <code><a href="#window">Window</a></code> object
29389: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29390:
29391: </td></tr><tr><th id="ix-handler-onfocus"> <code title="">onfocus</code>
29392: </th><td> <span>HTML elements</span>
29393: </td><td> <code title="event-focus">focus</code> event handler
29394: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29395:
29396: </td></tr><tr><th id="ix-handler-window-onhashchange"> <code title="">onhashchange</code>
29397: </th><td> <code title="handler-window-onhashchange"><span>body</span></code>
29398: </td><td> <code title="event-hashchange"><a href="#event-hashchange">hashchange</a></code> event handler for <code><a href="#window">Window</a></code> object
29399: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29400:
29401: </td></tr><tr><th id="ix-handler-oninput"> <code title="">oninput</code>
29402: </th><td> <span>HTML elements</span>
29403: </td><td> <code title="event-input">input</code> event handler
29404: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29405:
29406: </td></tr><tr><th id="ix-handler-oninvalid"> <code title="">oninvalid</code>
29407: </th><td> <span>HTML elements</span>
29408: </td><td> <code title="event-invalid">invalid</code> event handler
29409: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29410:
29411: </td></tr><tr><th id="ix-handler-onkeydown"> <code title="">onkeydown</code>
29412: </th><td> <span>HTML elements</span>
29413: </td><td> <code title="event-keydown">keydown</code> event handler
29414: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29415:
29416: </td></tr><tr><th id="ix-handler-onkeypress"> <code title="">onkeypress</code>
29417: </th><td> <span>HTML elements</span>
29418: </td><td> <code title="event-keypress">keypress</code> event handler
29419: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29420:
29421: </td></tr><tr><th id="ix-handler-onkeyup"> <code title="">onkeyup</code>
29422: </th><td> <span>HTML elements</span>
29423: </td><td> <code title="event-keyup">keyup</code> event handler
29424: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29425:
29426: </td></tr><tr><th id="ix-handler-window-onload"> <code title="">onload</code>
29427: </th><td> <code title="handler-window-onload"><span>body</span></code>
29428: </td><td> <code title="event-load">load</code> event handler for <code><a href="#window">Window</a></code> object
29429: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29430:
29431: </td></tr><tr><th id="ix-handler-onload"> <code title="">onload</code>
29432: </th><td> <span>HTML elements</span>
29433: </td><td> <code title="event-load">load</code> event handler
29434: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29435:
29436: </td></tr><tr><th id="ix-handler-onloadeddata"> <code title="">onloadeddata</code>
29437: </th><td> <span>HTML elements</span>
29438: </td><td> <code title="event-media-loadeddata"><a href="#event-media-loadeddata">loadeddata</a></code> event handler
29439: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29440:
29441: </td></tr><tr><th id="ix-handler-onloadedmetadata"> <code title="">onloadedmetadata</code>
29442: </th><td> <span>HTML elements</span>
29443: </td><td> <code title="event-media-loadedmetadata"><a href="#event-media-loadedmetadata">loadedmetadata</a></code> event handler
29444: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29445:
29446: </td></tr><tr><th id="ix-handler-onloadstart"> <code title="">onloadstart</code>
29447: </th><td> <span>HTML elements</span>
29448: </td><td> <code title="event-media-loadstart"><a href="#event-media-loadstart">loadstart</a></code> event handler
29449: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29450:
29451: </td></tr><tr><th id="ix-handler-window-onmessage"> <code title="">onmessage</code>
29452: </th><td> <code title="handler-window-onmessage"><span>body</span></code>
29453: </td><td> <code title="event-message">message</code> event handler for <code><a href="#window">Window</a></code> object
29454: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29455:
29456: </td></tr><tr><th id="ix-handler-onmousedown"> <code title="">onmousedown</code>
29457: </th><td> <span>HTML elements</span>
29458: </td><td> <code title="event-mousedown">mousedown</code> event handler
29459: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29460:
29461: </td></tr><tr><th id="ix-handler-onmousemove"> <code title="">onmousemove</code>
29462: </th><td> <span>HTML elements</span>
29463: </td><td> <code title="event-mousemove">mousemove</code> event handler
29464: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29465:
29466: </td></tr><tr><th id="ix-handler-onmouseout"> <code title="">onmouseout</code>
29467: </th><td> <span>HTML elements</span>
29468: </td><td> <code title="event-mouseout">mouseout</code> event handler
29469: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29470:
29471: </td></tr><tr><th id="ix-handler-onmouseover"> <code title="">onmouseover</code>
29472: </th><td> <span>HTML elements</span>
29473: </td><td> <code title="event-mouseover">mouseover</code> event handler
29474: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29475:
29476: </td></tr><tr><th id="ix-handler-onmouseup"> <code title="">onmouseup</code>
29477: </th><td> <span>HTML elements</span>
29478: </td><td> <code title="event-mouseup">mouseup</code> event handler
29479: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29480:
29481: </td></tr><tr><th id="ix-handler-onmousewheel"> <code title="">onmousewheel</code>
29482: </th><td> <span>HTML elements</span>
29483: </td><td> <code title="event-mousewheel">mousewheel</code> event handler
29484: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29485:
29486: </td></tr><tr><th id="ix-handler-window-onoffline"> <code title="">onoffline</code>
29487: </th><td> <code title="handler-window-onoffline"><span>body</span></code>
29488: </td><td> <code title="event-offline"><a href="#event-offline">offline</a></code> event handler for <code><a href="#window">Window</a></code> object
29489: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29490:
29491: </td></tr><tr><th id="ix-handler-window-ononline"> <code title="">ononline</code>
29492: </th><td> <code title="handler-window-ononline"><span>body</span></code>
29493: </td><td> <code title="event-online"><a href="#event-online">online</a></code> event handler for <code><a href="#window">Window</a></code> object
29494: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29495:
29496: </td></tr><tr><th id="ix-handler-window-onpagehide"> <code title="">onpagehide</code>
29497: </th><td> <code title="handler-window-onpagehide"><span>body</span></code>
29498: </td><td> <code title="event-pagehide"><a href="#event-pagehide">pagehide</a></code> event handler for <code><a href="#window">Window</a></code> object
29499: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29500:
29501: </td></tr><tr><th id="ix-handler-window-onpageshow"> <code title="">onpageshow</code>
29502: </th><td> <code title="handler-window-onpageshow"><span>body</span></code>
29503: </td><td> <code title="event-pageshow"><a href="#event-pageshow">pageshow</a></code> event handler for <code><a href="#window">Window</a></code> object
29504: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29505:
29506: </td></tr><tr><th id="ix-handler-onpause"> <code title="">onpause</code>
29507: </th><td> <span>HTML elements</span>
29508: </td><td> <code title="event-media-pause"><a href="#event-media-pause">pause</a></code> event handler
29509: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29510:
29511: </td></tr><tr><th id="ix-handler-onplay"> <code title="">onplay</code>
29512: </th><td> <span>HTML elements</span>
29513: </td><td> <code title="event-media-play"><a href="#event-media-play">play</a></code> event handler
29514: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29515:
29516: </td></tr><tr><th id="ix-handler-onplaying"> <code title="">onplaying</code>
29517: </th><td> <span>HTML elements</span>
29518: </td><td> <code title="event-media-playing"><a href="#event-media-playing">playing</a></code> event handler
29519: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29520:
29521: </td></tr><tr><th id="ix-handler-window-onpopstate"> <code title="">onpopstate</code>
29522: </th><td> <code title="handler-window-onpopstate"><span>body</span></code>
29523: </td><td> <code title="event-popstate"><a href="#event-popstate">popstate</a></code> event handler for <code><a href="#window">Window</a></code> object
29524: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29525:
29526: </td></tr><tr><th id="ix-handler-onprogress"> <code title="">onprogress</code>
29527: </th><td> <span>HTML elements</span>
29528: </td><td> <code title="event-media-progress"><a href="#event-media-progress">progress</a></code> event handler
29529: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29530:
29531: </td></tr><tr><th id="ix-handler-onratechange"> <code title="">onratechange</code>
29532: </th><td> <span>HTML elements</span>
29533: </td><td> <code title="event-media-ratechange"><a href="#event-media-ratechange">ratechange</a></code> event handler
29534: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29535:
29536: </td></tr><tr><th id="ix-handler-onreset"> <code title="">onreset</code>
29537: </th><td> <span>HTML elements</span>
29538: </td><td> <code title="event-reset">reset</code> event handler
29539: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29540:
29541: </td></tr><tr><th id="ix-handler-window-onresize"> <code title="">onresize</code>
29542: </th><td> <code title="handler-window-onresize"><span>body</span></code>
29543: </td><td> <code title="event-resize">resize</code> event handler for <code><a href="#window">Window</a></code> object
29544: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29545:
29546: </td></tr><tr><th id="ix-handler-window-onscroll"> <code title="">onscroll</code>
29547: </th><td> <code title="handler-window-onscroll"><span>body</span></code>
29548: </td><td> <code title="event-scroll">scroll</code> event handler for <code><a href="#window">Window</a></code> object
29549: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29550:
29551: </td></tr><tr><th id="ix-handler-onscroll"> <code title="">onscroll</code>
29552: </th><td> <span>HTML elements</span>
29553: </td><td> <code title="event-scroll">scroll</code> event handler
29554: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29555:
29556: </td></tr><tr><th id="ix-handler-onseeked"> <code title="">onseeked</code>
29557: </th><td> <span>HTML elements</span>
29558: </td><td> <code title="event-media-seeked"><a href="#event-media-seeked">seeked</a></code> event handler
29559: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29560:
29561: </td></tr><tr><th id="ix-handler-onseeking"> <code title="">onseeking</code>
29562: </th><td> <span>HTML elements</span>
29563: </td><td> <code title="event-media-seeking"><a href="#event-media-seeking">seeking</a></code> event handler
29564: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29565:
29566: </td></tr><tr><th id="ix-handler-onselect"> <code title="">onselect</code>
29567: </th><td> <span>HTML elements</span>
29568: </td><td> <code title="event-select">select</code> event handler
29569: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29570:
29571: </td></tr><tr><th id="ix-handler-onshow"> <code title="">onshow</code>
29572: </th><td> <span>HTML elements</span>
29573: </td><td> <code title="event-show">show</code> event handler
29574: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29575:
29576: </td></tr><tr><th id="ix-handler-onstalled"> <code title="">onstalled</code>
29577: </th><td> <span>HTML elements</span>
29578: </td><td> <code title="event-media-stalled"><a href="#event-media-stalled">stalled</a></code> event handler
29579: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29580:
29581: </td></tr><tr><th id="ix-handler-window-onstorage"> <code title="">onstorage</code>
29582: </th><td> <code title="handler-window-onstorage"><span>body</span></code>
29583: </td><td> <code title="event-storage">storage</code> event handler for <code><a href="#window">Window</a></code> object
29584: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29585:
29586: </td></tr><tr><th id="ix-handler-onsubmit"> <code title="">onsubmit</code>
29587: </th><td> <span>HTML elements</span>
29588: </td><td> <code title="event-submit">submit</code> event handler
29589: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29590:
29591: </td></tr><tr><th id="ix-handler-onsuspend"> <code title="">onsuspend</code>
29592: </th><td> <span>HTML elements</span>
29593: </td><td> <code title="event-media-suspend"><a href="#event-media-suspend">suspend</a></code> event handler
29594: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29595:
29596: </td></tr><tr><th id="ix-handler-ontimeupdate"> <code title="">ontimeupdate</code>
29597: </th><td> <span>HTML elements</span>
29598: </td><td> <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> event handler
29599: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29600:
29601: </td></tr><tr><th id="ix-handler-window-onunload"> <code title="">onunload</code>
29602: </th><td> <code title="handler-window-onunload"><span>body</span></code>
29603: </td><td> <code title="event-unload">unload</code> event handler for <code><a href="#window">Window</a></code> object
29604: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29605:
29606: </td></tr><tr><th id="ix-handler-onvolumechange"> <code title="">onvolumechange</code>
29607: </th><td> <span>HTML elements</span>
29608: </td><td> <code title="event-media-volumechange"><a href="#event-media-volumechange">volumechange</a></code> event handler
29609: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29610:
29611: </td></tr><tr><th id="ix-handler-onwaiting"> <code title="">onwaiting</code>
29612: </th><td> <span>HTML elements</span>
29613: </td><td> <code title="event-media-waiting"><a href="#event-media-waiting">waiting</a></code> event handler
29614: </td><td> <a href="#event-handler-content-attributes" title="event handler content attributes">Event handler content attribute</a>
29615:
29616: </td></tr></tbody></table><h3 class="no-num" id="interfaces">Interfaces</h3><p><i>This section is non-normative.</i></p><table><caption>List of interfaces for elements</caption>
29617: <thead><tr><th> Element(s)
29618: </th><th> Interface(s)
29619: </th></tr></thead><tbody><tr><td> <code><a href="#the-a-element">a</a></code>
29620: </td><td> <code><a href="#htmlanchorelement">HTMLAnchorElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29621:
29622: </td></tr><tr><td> <code><a href="#the-abbr-element">abbr</a></code>
29623: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29624:
29625: </td></tr><tr><td> <code><a href="#the-address-element">address</a></code>
29626: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29627:
29628: </td></tr><tr><td> <code><a href="#the-area-element">area</a></code>
29629: </td><td> <code><a href="#htmlareaelement">HTMLAreaElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29630:
29631: </td></tr><tr><td> <code><a href="#the-article-element">article</a></code>
29632: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29633:
29634: </td></tr><tr><td> <code><a href="#the-aside-element">aside</a></code>
29635: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29636:
29637: </td></tr><tr><td> <code><a href="#the-audio-element">audio</a></code>
29638: </td><td> <code><a href="#htmlaudioelement">HTMLAudioElement</a></code> : <code><a href="#htmlmediaelement">HTMLMediaElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29639:
29640: </td></tr><tr><td> <code><a href="#the-b-element">b</a></code>
29641: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29642:
29643: </td></tr><tr><td> <code><a href="#the-base-element">base</a></code>
29644: </td><td> <code><a href="#htmlbaseelement">HTMLBaseElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29645:
29646: </td></tr><tr><td> <code><a href="#the-bdi-element">bdi</a></code>
29647: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29648:
29649: </td></tr><tr><td> <code><a href="#the-bdo-element">bdo</a></code>
29650: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29651:
29652: </td></tr><tr><td> <code><a href="#the-blockquote-element">blockquote</a></code>
29653: </td><td> <code><a href="#htmlquoteelement">HTMLQuoteElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29654:
29655: </td></tr><tr><td> <code><a href="#the-body-element">body</a></code>
29656: </td><td> <code><a href="#htmlbodyelement">HTMLBodyElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29657:
29658: </td></tr><tr><td> <code><a href="#the-br-element">br</a></code>
29659: </td><td> <code><a href="#htmlbrelement">HTMLBRElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29660:
29661: </td></tr><tr><td> <code><a href="#the-button-element">button</a></code>
29662: </td><td> <code><a href="#htmlbuttonelement">HTMLButtonElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29663:
29664: </td></tr><tr><td> <code><a href="#the-canvas-element">canvas</a></code>
29665: </td><td> <code><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29666:
29667: </td></tr><tr><td> <code><a href="#the-caption-element">caption</a></code>
29668: </td><td> <code><a href="#htmltablecaptionelement">HTMLTableCaptionElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29669:
29670: </td></tr><tr><td> <code><a href="#the-cite-element">cite</a></code>
29671: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29672:
29673: </td></tr><tr><td> <code><a href="#the-code-element">code</a></code>
29674: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29675:
29676: </td></tr><tr><td> <code><a href="#the-col-element">col</a></code>
29677: </td><td> <code><a href="#htmltablecolelement">HTMLTableColElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29678:
29679: </td></tr><tr><td> <code><a href="#the-colgroup-element">colgroup</a></code>
29680: </td><td> <code><a href="#htmltablecolelement">HTMLTableColElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29681:
29682: </td></tr><tr><td> <code><a href="#the-command-element">command</a></code>
29683: </td><td> <code><a href="#htmlcommandelement">HTMLCommandElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29684:
29685: </td></tr><tr><td> <code><a href="#the-datalist-element">datalist</a></code>
29686: </td><td> <code><a href="#htmldatalistelement">HTMLDataListElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29687:
29688: </td></tr><tr><td> <code><a href="#the-dd-element">dd</a></code>
29689: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29690:
29691: </td></tr><tr><td> <code><a href="#the-del-element">del</a></code>
29692: </td><td> <code><a href="#htmlmodelement">HTMLModElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29693:
29694: </td></tr><tr><td> <code><a href="#the-details-element">details</a></code>
29695: </td><td> <code><a href="#htmldetailselement">HTMLDetailsElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29696:
29697: </td></tr><tr><td> <code><a href="#the-dfn-element">dfn</a></code>
29698: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29699:
29700: </td></tr><tr><td> <code><a href="#the-div-element">div</a></code>
29701: </td><td> <code><a href="#htmldivelement">HTMLDivElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29702:
29703: </td></tr><tr><td> <code><a href="#the-dl-element">dl</a></code>
29704: </td><td> <code><a href="#htmldlistelement">HTMLDListElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29705:
29706: </td></tr><tr><td> <code><a href="#the-dt-element">dt</a></code>
29707: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29708:
29709: </td></tr><tr><td> <code><a href="#the-em-element">em</a></code>
29710: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29711:
29712: </td></tr><tr><td> <code><a href="#the-embed-element">embed</a></code>
29713: </td><td> <code><a href="#htmlembedelement">HTMLEmbedElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29714:
29715: </td></tr><tr><td> <code><a href="#the-fieldset-element">fieldset</a></code>
29716: </td><td> <code><a href="#htmlfieldsetelement">HTMLFieldSetElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29717:
29718: </td></tr><tr><td> <code><a href="#the-figcaption-element">figcaption</a></code>
29719: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29720:
29721: </td></tr><tr><td> <code><a href="#the-figure-element">figure</a></code>
29722: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29723:
29724: </td></tr><tr><td> <code><a href="#the-footer-element">footer</a></code>
29725: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29726:
29727: </td></tr><tr><td> <code><a href="#the-form-element">form</a></code>
29728: </td><td> <code><a href="#htmlformelement">HTMLFormElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29729:
29730: </td></tr><tr><td> <code><a href="#the-head-element">head</a></code>
29731: </td><td> <code><a href="#htmlheadelement">HTMLHeadElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29732:
29733: </td></tr><tr><td> <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>
29734: </td><td> <code><a href="#htmlheadingelement">HTMLHeadingElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29735:
29736: </td></tr><tr><td> <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>
29737: </td><td> <code><a href="#htmlheadingelement">HTMLHeadingElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29738:
29739: </td></tr><tr><td> <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code>
29740: </td><td> <code><a href="#htmlheadingelement">HTMLHeadingElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29741:
29742: </td></tr><tr><td> <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code>
29743: </td><td> <code><a href="#htmlheadingelement">HTMLHeadingElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29744:
29745: </td></tr><tr><td> <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code>
29746: </td><td> <code><a href="#htmlheadingelement">HTMLHeadingElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29747:
29748: </td></tr><tr><td> <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>
29749: </td><td> <code><a href="#htmlheadingelement">HTMLHeadingElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29750:
29751: </td></tr><tr><td> <code><a href="#the-header-element">header</a></code>
29752: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29753:
29754: </td></tr><tr><td> <code><a href="#the-hgroup-element">hgroup</a></code>
29755: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29756:
29757: </td></tr><tr><td> <code><a href="#the-hr-element">hr</a></code>
29758: </td><td> <code><a href="#htmlhrelement">HTMLHRElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29759:
29760: </td></tr><tr><td> <code><a href="#the-html-element">html</a></code>
29761: </td><td> <code><a href="#htmlhtmlelement">HTMLHtmlElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29762:
29763: </td></tr><tr><td> <code><a href="#the-i-element">i</a></code>
29764: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29765:
29766: </td></tr><tr><td> <code><a href="#the-iframe-element">iframe</a></code>
29767: </td><td> <code><a href="#htmliframeelement">HTMLIFrameElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29768:
29769: </td></tr><tr><td> <code><a href="#the-img-element">img</a></code>
29770: </td><td> <code><a href="#htmlimageelement">HTMLImageElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29771:
29772: </td></tr><tr><td> <code><a href="#the-input-element">input</a></code>
29773: </td><td> <code><a href="#htmlinputelement">HTMLInputElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29774:
29775: </td></tr><tr><td> <code><a href="#the-ins-element">ins</a></code>
29776: </td><td> <code><a href="#htmlmodelement">HTMLModElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29777:
29778: </td></tr><tr><td> <code><a href="#the-kbd-element">kbd</a></code>
29779: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29780:
29781: </td></tr><tr><td> <code><a href="#the-keygen-element">keygen</a></code>
29782: </td><td> <code><a href="#htmlkeygenelement">HTMLKeygenElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29783:
29784: </td></tr><tr><td> <code><a href="#the-label-element">label</a></code>
29785: </td><td> <code><a href="#htmllabelelement">HTMLLabelElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29786:
29787: </td></tr><tr><td> <code><a href="#the-legend-element">legend</a></code>
29788: </td><td> <code><a href="#htmllegendelement">HTMLLegendElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29789:
29790: </td></tr><tr><td> <code><a href="#the-li-element">li</a></code>
29791: </td><td> <code><a href="#htmllielement">HTMLLIElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29792:
29793: </td></tr><tr><td> <code><a href="#the-link-element">link</a></code>
29794: </td><td> <code><a href="#htmllinkelement">HTMLLinkElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29795:
29796: </td></tr><tr><td> <code><a href="#the-map-element">map</a></code>
29797: </td><td> <code><a href="#htmlmapelement">HTMLMapElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29798:
29799: </td></tr><tr><td> <code><a href="#the-mark-element">mark</a></code>
29800: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29801:
29802: </td></tr><tr><td> <code><a href="#the-menu-element">menu</a></code>
29803: </td><td> <code><a href="#htmlmenuelement">HTMLMenuElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29804:
29805: </td></tr><tr><td> <code><a href="#the-meta-element">meta</a></code>
29806: </td><td> <code><a href="#htmlmetaelement">HTMLMetaElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29807:
29808: </td></tr><tr><td> <code><a href="#the-meter-element">meter</a></code>
29809: </td><td> <code><a href="#htmlmeterelement">HTMLMeterElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29810:
29811: </td></tr><tr><td> <code><a href="#the-nav-element">nav</a></code>
29812: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29813:
29814: </td></tr><tr><td> <code><a href="#the-noscript-element">noscript</a></code>
29815: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29816:
29817: </td></tr><tr><td> <code><a href="#the-object-element">object</a></code>
29818: </td><td> <code><a href="#htmlobjectelement">HTMLObjectElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29819:
29820: </td></tr><tr><td> <code><a href="#the-ol-element">ol</a></code>
29821: </td><td> <code><a href="#htmlolistelement">HTMLOListElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29822:
29823: </td></tr><tr><td> <code><a href="#the-optgroup-element">optgroup</a></code>
29824: </td><td> <code><a href="#htmloptgroupelement">HTMLOptGroupElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29825:
29826: </td></tr><tr><td> <code><a href="#the-option-element">option</a></code>
29827: </td><td> <code><a href="#htmloptionelement">HTMLOptionElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29828:
29829: </td></tr><tr><td> <code><a href="#the-output-element">output</a></code>
29830: </td><td> <code><a href="#htmloutputelement">HTMLOutputElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29831:
29832: </td></tr><tr><td> <code><a href="#the-p-element">p</a></code>
29833: </td><td> <code><a href="#htmlparagraphelement">HTMLParagraphElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29834:
29835: </td></tr><tr><td> <code><a href="#the-param-element">param</a></code>
29836: </td><td> <code><a href="#htmlparamelement">HTMLParamElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29837:
29838: </td></tr><tr><td> <code><a href="#the-pre-element">pre</a></code>
29839: </td><td> <code><a href="#htmlpreelement">HTMLPreElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29840:
29841: </td></tr><tr><td> <code><a href="#the-progress-element">progress</a></code>
29842: </td><td> <code><a href="#htmlprogresselement">HTMLProgressElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29843:
29844: </td></tr><tr><td> <code><a href="#the-q-element">q</a></code>
29845: </td><td> <code><a href="#htmlquoteelement">HTMLQuoteElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29846:
29847: </td></tr><tr><td> <code><a href="#the-rp-element">rp</a></code>
29848: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29849:
29850: </td></tr><tr><td> <code><a href="#the-rt-element">rt</a></code>
29851: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29852:
29853: </td></tr><tr><td> <code><a href="#the-ruby-element">ruby</a></code>
29854: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29855:
29856: </td></tr><tr><td> <code><a href="#the-s-element">s</a></code>
29857: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29858:
29859: </td></tr><tr><td> <code><a href="#the-samp-element">samp</a></code>
29860: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29861:
29862: </td></tr><tr><td> <code><a href="#the-script-element">script</a></code>
29863: </td><td> <code><a href="#htmlscriptelement">HTMLScriptElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29864:
29865: </td></tr><tr><td> <code><a href="#the-section-element">section</a></code>
29866: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29867:
29868: </td></tr><tr><td> <code><a href="#the-select-element">select</a></code>
29869: </td><td> <code><a href="#htmlselectelement">HTMLSelectElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29870:
29871: </td></tr><tr><td> <code><a href="#the-small-element">small</a></code>
29872: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29873:
29874: </td></tr><tr><td> <code><a href="#the-source-element">source</a></code>
29875: </td><td> <code><a href="#htmlsourceelement">HTMLSourceElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29876:
29877: </td></tr><tr><td> <code><a href="#the-span-element">span</a></code>
29878: </td><td> <code><a href="#htmlspanelement">HTMLSpanElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29879:
29880: </td></tr><tr><td> <code><a href="#the-strong-element">strong</a></code>
29881: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29882:
29883: </td></tr><tr><td> <code><a href="#the-style-element">style</a></code>
29884: </td><td> <code><a href="#htmlstyleelement">HTMLStyleElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29885:
29886: </td></tr><tr><td> <code><a href="#the-sub-and-sup-elements">sub</a></code>
29887: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29888:
29889: </td></tr><tr><td> <code><a href="#the-summary-element">summary</a></code>
29890: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29891:
29892: </td></tr><tr><td> <code><a href="#the-sub-and-sup-elements">sup</a></code>
29893: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29894:
29895: </td></tr><tr><td> <code><a href="#the-table-element">table</a></code>
29896: </td><td> <code><a href="#htmltableelement">HTMLTableElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29897:
29898: </td></tr><tr><td> <code><a href="#the-tbody-element">tbody</a></code>
29899: </td><td> <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29900:
29901: </td></tr><tr><td> <code><a href="#the-td-element">td</a></code>
29902: </td><td> <code><a href="#htmltabledatacellelement">HTMLTableDataCellElement</a></code> : <code><a href="#htmltablecellelement">HTMLTableCellElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29903:
29904: </td></tr><tr><td> <code><a href="#the-textarea-element">textarea</a></code>
29905: </td><td> <code><a href="#htmltextareaelement">HTMLTextAreaElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29906:
29907: </td></tr><tr><td> <code><a href="#the-tfoot-element">tfoot</a></code>
29908: </td><td> <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29909:
29910: </td></tr><tr><td> <code><a href="#the-th-element">th</a></code>
29911: </td><td> <code><a href="#htmltableheadercellelement">HTMLTableHeaderCellElement</a></code> : <code><a href="#htmltablecellelement">HTMLTableCellElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29912:
29913: </td></tr><tr><td> <code><a href="#the-thead-element">thead</a></code>
29914: </td><td> <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29915:
29916: </td></tr><tr><td> <code><a href="#the-time-element">time</a></code>
29917: </td><td> <code><a href="#htmltimeelement">HTMLTimeElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29918:
29919: </td></tr><tr><td> <code><a href="#the-title-element">title</a></code>
29920: </td><td> <code><a href="#htmltitleelement">HTMLTitleElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29921:
29922: </td></tr><tr><td> <code><a href="#the-tr-element">tr</a></code>
29923: </td><td> <code><a href="#htmltablerowelement">HTMLTableRowElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29924:
29925: </td></tr><tr><td> <code><a href="#the-track-element">track</a></code>
29926: </td><td> <code><a href="#htmltrackelement">HTMLTrackElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29927:
29928: </td></tr><tr><td> <code><a href="#the-u-element">u</a></code>
29929: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29930:
29931: </td></tr><tr><td> <code><a href="#the-ul-element">ul</a></code>
29932: </td><td> <code><a href="#htmlulistelement">HTMLUListElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29933:
29934: </td></tr><tr><td> <code><a href="#the-var-element">var</a></code>
29935: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29936:
29937: </td></tr><tr><td> <code><a href="#the-video-element">video</a></code>
29938: </td><td> <code><a href="#htmlvideoelement">HTMLVideoElement</a></code> : <code><a href="#htmlmediaelement">HTMLMediaElement</a></code> : <code><a href="#htmlelement">HTMLElement</a></code>
29939:
29940: </td></tr><tr><td> <code><a href="#the-wbr-element">wbr</a></code>
29941: </td><td> <code><a href="#htmlelement">HTMLElement</a></code>
29942:
29943: </td></tr></tbody></table><h3 class="no-num" id="events-0">Events</h3><p><i>This section is non-normative.</i></p><table><caption>List of events</caption>
29944: <thead><tr><th> Event
29945: </th><th> Interface
29946: </th><th> Description
29947: </th></tr></thead><tbody><tr><td> <code title="event-DOMContentLoaded">DOMContentLoaded</code>
29948: </td><td> <code><a href="#event">Event</a></code>
29949: </td><td> Fired at the <code><a href="#document">Document</a></code> once it and its scripts have loaded, without waiting for other subresources
29950:
29951: </td></tr><tr><td> <code title="event-abort">abort</code>
29952: </td><td> <code><a href="#event">Event</a></code>
29953: </td><td> Fired at the <code><a href="#window">Window</a></code> when the download was aborted by the user
29954:
29955: </td></tr><tr><td> <code title="event-afterprint">afterprint</code>
29956: </td><td> <code><a href="#event">Event</a></code>
29957: </td><td> Fired at the <code><a href="#window">Window</a></code> after printing
29958:
29959: </td></tr><tr><td> <code title="event-beforeprint">beforeprint</code>
29960: </td><td> <code><a href="#event">Event</a></code>
29961: </td><td> Fired at the <code><a href="#window">Window</a></code> before printing
29962:
29963: </td></tr><tr><td> <code title="event-beforeunload">beforeunload</code>
29964: </td><td> <code><a href="#beforeunloadevent">BeforeUnloadEvent</a></code>
29965: </td><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
29966:
29967: </td></tr><tr><td> <code title="event-blur">blur</code>
29968: </td><td> <code><a href="#event">Event</a></code>
29969: </td><td> Fired at nodes losing focus
29970:
29971: </td></tr><tr><td> <code title="event-change">change</code>
29972: </td><td> <code><a href="#event">Event</a></code>
29973: </td><td> Fired at controls when the user commits a value change
29974:
29975: </td></tr><tr><td> <code title="event-click"><a href="#event-click">click</a></code>
29976: </td><td> <code><a href="#event">Event</a></code>
29977: </td><td> Fired at an element before its <a href="#activation-behavior">activation behavior</a> is run
29978:
29979: </td></tr><tr><td> <code title="event-contextmenu">contextmenu</code>
29980: </td><td> <code><a href="#event">Event</a></code>
29981: </td><td> Fired at elements when the user requests their context menu
29982:
29983: </td></tr><tr><td> <code title="event-DOMContentLoaded">DOMContentLoaded</code>
29984: </td><td> <code><a href="#event">Event</a></code>
29985: </td><td> Fired at the <code><a href="#document">Document</a></code> once the parser has finished
29986:
29987: </td></tr><tr><td> <code title="event-error">error</code>
29988: </td><td> <code><a href="#event">Event</a></code>
29989: </td><td> Fired at elements when network and script errors occur
29990:
29991: </td></tr><tr><td> <code title="event-focus">focus</code>
29992: </td><td> <code><a href="#event">Event</a></code>
29993: </td><td> Fired at nodes gaining focus
29994:
29995: </td></tr><tr><td> <code title="event-hashchange"><a href="#event-hashchange">hashchange</a></code>
29996: </td><td> <code><a href="#hashchangeevent">HashChangeEvent</a></code>
29997: </td><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
29998:
29999: </td></tr><tr><td> <code title="event-input">input</code>
30000: </td><td> <code><a href="#event">Event</a></code>
30001: </td><td> Fired at controls when the user changes the value
30002:
30003: </td></tr><tr><td> <code title="event-invalid">invalid</code>
30004: </td><td> <code><a href="#event">Event</a></code>
30005: </td><td> Fired at controls during form validation if they do not satisfy their constraints
30006:
30007: </td></tr><tr><td> <code title="event-load">load</code>
30008: </td><td> <code><a href="#event">Event</a></code>
30009: </td><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
30010:
30011: </td></tr><tr><td> <code title="event-message">message</code>
30012: </td><td> <code>MessageEvent</code>
30013: </td><td> Fired at an object when the object receives a message
30014:
30015: </td></tr><tr><td> <code title="event-offline"><a href="#event-offline">offline</a></code>
30016: </td><td> <code><a href="#event">Event</a></code>
30017: </td><td> Fired at the <code><a href="#window">Window</a></code> when the network connections fails
30018:
30019: </td></tr><tr><td> <code title="event-online"><a href="#event-online">online</a></code>
30020: </td><td> <code><a href="#event">Event</a></code>
30021: </td><td> Fired at the <code><a href="#window">Window</a></code> when the network connections returns
30022:
30023: </td></tr><tr><td> <code title="event-pagehide"><a href="#event-pagehide">pagehide</a></code>
30024: </td><td> <code><a href="#pagetransitionevent">PageTransitionEvent</a></code>
30025: </td><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>
30026:
30027: </td></tr><tr><td> <code title="event-pageshow"><a href="#event-pageshow">pageshow</a></code>
30028: </td><td> <code><a href="#pagetransitionevent">PageTransitionEvent</a></code>
30029: </td><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>
30030:
30031: </td></tr><tr><td> <code title="event-popstate"><a href="#event-popstate">popstate</a></code>
30032: </td><td> <code><a href="#popstateevent">PopStateEvent</a></code>
30033: </td><td> Fired at the <code><a href="#window">Window</a></code> when the user navigates the <a href="#session-history">session history</a>
30034:
30035: </td></tr><tr><td> <code title="event-readystatechange"><a href="#event-readystatechange">readystatechange</a></code>
30036: </td><td> <code><a href="#event">Event</a></code>
30037: </td><td> Fired at the <code><a href="#document">Document</a></code> when it finishes parsing and again when all its subresources have finished loading
30038:
30039: </td></tr><tr><td> <code title="event-reset">reset</code>
30040: </td><td> <code><a href="#event">Event</a></code>
30041: </td><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>
30042:
30043: </td></tr><tr><td> <code title="event-show">show</code>
30044: </td><td> <code><a href="#event">Event</a></code>
30045: </td><td> Fired at a <code><a href="#the-menu-element">menu</a></code> element when it is shown as a context menu
30046:
30047: </td></tr><tr><td> <code title="event-submit">submit</code>
30048: </td><td> <code><a href="#event">Event</a></code>
30049: </td><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>
30050:
30051: </td></tr><tr><td> <code title="event-unload">unload</code>
30052: </td><td> <code><a href="#event">Event</a></code>
30053: </td><td> Fired at the <code><a href="#window">Window</a></code> object when the page is going away
30054:
30055: </td></tr></tbody></table><p class="note">See also <a href="#mediaevents">media element
30056: events</a>, <a href="#mediasteamevents"><code>MediaStream</code> and
30057: <code>PeerConnection</code> events</a>, <a href="#appcacheevents">application cache events</a>, and <a href="#dndevents">drag-and-drop events</a>.</p>
30058: <h2 id="index-of-terms" class="no-num">Index of terms</h2>
30059: <!--index-terms-->
30060: <h2 class="no-num" id="references">References</h2>
30061: <p>All references are normative unless marked "Non-normative".</p><dl><dt id="refsABNF">[ABNF]</dt>
30062: <dd><cite><a href="http://www.ietf.org/rfc/std/std68.txt">Augmented
30063: BNF for Syntax Specifications: ABNF</a></cite>, D. Crocker,
30064: P. Overell. IETF.</dd>
30065:
30066: <dt id="refsABOUT">[ABOUT]</dt>
30067: <dd><cite><a href="http://tools.ietf.org/html/draft-holsten-about-uri-scheme">The
30068: 'about' URI scheme</a></cite>, J. Holsten, L. Hunt. IETF.</dd>
30069:
30070: <dt id="refsARIA">[ARIA]</dt>
30071: <dd><cite><a href="http://www.w3.org/WAI/PF/aria/">Accessible Rich
30072: Internet Applications (WAI-ARIA)</a></cite>, J. Craig, M. Cooper, L. Pappas,
30073: R. Schwerdtfeger, L. Seeman. W3C.</dd>
30074:
30075: <dt id="refsARIAIMPL">[ARIAIMPL]</dt>
30076: <dd><cite><a href="http://www.w3.org/WAI/PF/aria-implementation/">WAI-ARIA 1.0
30077: User Agent Implementation Guide</a></cite>, A. Snow-Weaver,
30078: M. Cooper. W3C.</dd>
30079:
30080: <dt id="refsATAG">[ATAG]</dt>
30081: <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/ATAG20/">Authoring Tool Accessibility
30082: Guidelines (ATAG) 2.0</a></cite>, J. Richards, J. Spellman,
30083: J. Treviranus. W3C.</dd>
30084:
30085: <dt id="refsATOM">[ATOM]</dt>
30086: <dd>(Non-normative) <cite><a href="http://tools.ietf.org/html/rfc4287">The Atom Syndication
30087: Format</a></cite>, M. Nottingham, R. Sayre. IETF.</dd>
30088:
30089: <dt id="refsBCP47">[BCP47]</dt>
30090: <dd><cite><a href="http://www.ietf.org/rfc/bcp/bcp47.txt">Tags for
30091: Identifying Languages; Matching of Language Tags</a></cite>,
30092: A. Phillips, M. Davis. IETF.</dd>
30093:
30094: <dt id="refsBECSS">[BECSS]</dt>
30095: <dd><cite><a href="http://www.w3.org/TR/becss/">Behavioral
30096: Extensions to CSS</a></cite>, I. Hickson. W3C.</dd>
30097:
30098: <dt id="refsBIDI">[BIDI]</dt>
30099: <dd><cite><a href="http://www.unicode.org/reports/tr9/">UAX #9: Unicode
30100: Bidirectional Algorithm</a></cite>, M. Davis. Unicode Consortium.</dd>
30101:
30102: <dt id="refsBOCU1">[BOCU1]</dt>
30103: <dd>(Non-normative) <cite><a href="http://www.unicode.org/notes/tn6/">UTN #6: BOCU-1:
30104: MIME-Compatible Unicode Compression</a></cite>, M. Scherer,
30105: M. Davis. Unicode Consortium.</dd>
30106:
30107: <dt id="refsCESU8">[CESU8]</dt>
30108: <dd>(Non-normative) <cite><a href="http://www.unicode.org/reports/tr26/">UTR #26: Compatibility
30109: Encoding Scheme For UTF-16: 8-BIT (CESU-8)</a></cite>,
30110: T. Phipps. Unicode Consortium.</dd>
30111:
30112: <dt id="refsCHARMOD">[CHARMOD]</dt>
30113: <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/charmod/">Character Model for the World
30114: Wide Web 1.0: Fundamentals</a></cite>, M. Dürst, F. Yergeau,
30115: R. Ishida, M. Wolf, T. Texin. W3C.</dd>
30116:
30117: <dt id="refsCOMPUTABLE">[COMPUTABLE]</dt>
30118: <dd>(Non-normative) <cite><a href="http://www.turingarchive.org/browse.php/B/12">On computable
30119: numbers, with an application to the
30120: Entscheidungsproblem</a></cite>, A. Turing. In <cite>Proceedings of
30121: the London Mathematical Society</cite>, series 2, volume 42, pages
30122: 230-265. London Mathematical Society, 1937.</dd>
30123:
30124: <dt id="refsCOOKIES">[COOKIES]</dt>
30125: <dd><cite><a href="http://tools.ietf.org/html/rfc6265">HTTP State Management Mechanism</a></cite>, A. Barth. IETF.</dd>
30126:
30127: <dt id="refsCORS">[CORS]</dt>
30128: <dd><cite><a href="http://dev.w3.org/2006/waf/access-control/">Cross-Origin
30129: Resource Sharing</a></cite>, A. van Kesteren. W3C.</dd>
30130:
30131: <dt id="refsCP51932">[CP51932]</dt>
30132: <dd><cite><a href="http://www.iana.org/assignments/charset-reg/CP51932">CP51932</a></cite>,
30133: Y. Naruse. IANA.</dd>
30134: <dt id="refsCSS">[CSS]</dt>
30135: <dd><cite><a href="http://www.w3.org/TR/CSS/">Cascading Style Sheets Level 2
30136: Revision 1</a></cite>, B. Bos, T. Çelik, I.
30137: Hickson, H. Lie. W3C.</dd>
30138:
30139: <dt id="refsCSSATTR">[CSSATTR]</dt>
30140: <dd><cite><a href="http://dev.w3.org/csswg/css-style-attr/">CSS Styling Attribute Syntax</a></cite>, T. Çelik, E. Etemad. W3C.</dd>
30141:
30142: <dt id="refsCSSCOLOR">[CSSCOLOR]</dt>
30143: <dd><cite><a href="http://dev.w3.org/csswg/css3-color/">CSS Color
30144: Module Level 3</a></cite>, T. Çelik, C. Lilley, L.
30145: Baron. W3C.</dd>
30146:
30147: <dt id="refsCSSFONTS">[CSSFONTS]</dt>
30148: <dd><cite><a href="http://www.w3.org/TR/css3-fonts/">CSS Fonts
30149: Module Level 3</a></cite>, J. Daggett. W3C.</dd>
30150:
1.570 mike 30151: <dt id="refsCSSIMAGES">[CSSIMAGES]</dt>
30152: <dd><cite><a href="http://dev.w3.org/csswg/css3-images/">CSS Image
30153: Values and Replaced Content Module Level 3</a></cite>, E. Etemad,
30154: T. Atkins. W3C.</dd>
30155:
1.562 mike 30156: <dt id="refsCSSOM">[CSSOM]</dt>
30157: <dd><cite><a href="http://dev.w3.org/csswg/cssom/">Cascading Style Sheets
30158: Object Model (CSSOM)</a></cite>, A. van Kesteren. W3C.</dd>
30159:
30160: <dt id="refsCSSOMVIEW">[CSSOMVIEW]</dt>
30161: <dd><cite><a href="http://dev.w3.org/csswg/cssom-view/">CSSOM View
30162: Module</a></cite>, A. van Kesteren. W3C.</dd>
30163:
30164: <dt id="refsCSSRUBY">[CSSRUBY]</dt>
30165: <dd><cite><a href="http://dev.w3.org/csswg/css3-ruby/">CSS3 Ruby
30166: Module</a></cite>, R. Ishida. W3C.</dd>
30167:
30168: <dt id="refsCSSUI">[CSSUI]</dt>
30169: <dd><cite><a href="http://dev.w3.org/csswg/css3-ui/">CSS3 Basic User
30170: Interface Module</a></cite>, T. Çelik. W3C.</dd>
30171:
30172: <dt id="refsCSSVALUES">[CSSVALUES]</dt>
30173: <dd><cite><a href="http://dev.w3.org/csswg/css3-values/">CSS3
30174: Values and Units</a></cite>, H. Lie, C. Lilley. W3C.</dd>
30175:
30176: <dt id="refsDOMCORE">[DOMCORE]</dt>
30177: <dd><cite><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Web DOM Core</a></cite>, A. van Kesteren. W3C.</dd>
30178:
30179: <dt id="refsDOMEVENTS">[DOMEVENTS]</dt>
30180: <dd><cite><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">Document
30181: Object Model (DOM) Level 3 Events Specification</a></cite>,
30182: D. Schepers. W3C.</dd>
30183:
1.578 mike 30184: <dt id="refsDOMPARSING">[DOMPARSING]</dt>
30185: <dd><cite><a href="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a></cite>, Ms2ger. html5.org.</dd>
1.562 mike 30186:
1.575 mike 30187: <dt id="refsDOMRANGE">[DOMRANGE]</dt>
1.578 mike 30188: <dd><cite><a href="http://html5.org/specs/dom-range.html">DOM Range</a></cite>, A. Gregor, Ms2ger. html5.org.</dd>
1.575 mike 30189:
1.562 mike 30190: <dt id="refsECMA262">[ECMA262]</dt>
30191: <dd><cite><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript
30192: Language Specification</a></cite>. ECMA.</dd>
30193:
1.575 mike 30194: <dt id="refsEDITING">[EDITING]</dt>
30195: <dd><cite><a href="http://aryeh.name/spec/editing/editing.html">HTML Editing APIs</a></cite>, A. Gregor.</dd>
30196:
1.562 mike 30197: <dt id="refsECMA357">[ECMA357]</dt>
30198: <dd>(Non-normative) <cite><a href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMAScript
30199: for XML (E4X) Specification</a></cite>. ECMA.</dd>
30200:
30201: <dt id="refsEUCKR">[EUCKR]</dt>
30202: <dd><cite>Hangul Unix Environment</cite>. Korea Industrial
30203: Standards Association. Ref. No. KS C 5861-1992.</dd>
30204:
30205: <dt id="refsEUCJP">[EUCJP]</dt>
30206: <dd><cite>Definition and Notes of Japanese EUC</cite>. UI-OSF-USLP. In English in the abridged translation of the <a href="http://home.m05.itscom.net/numa/uocjleE.pdf">UI-OSF Application Platform Profile for Japanese Environment</a>, Appendix C.</dd>
30207:
30208: <dt id="refsFILEAPI">[FILEAPI]</dt>
30209: <dd><cite><a href="http://dev.w3.org/2006/webapi/FileUpload/publish/FileAPI.html">File
30210: API</a></cite>, A. Ranganathan. W3C.</dd>
30211:
30212: <dt id="refsFILESYSTEMAPI">[FILESYSTEMAPI]</dt>
30213: <dd><cite><a href="http://dev.w3.org/2009/dap/file-system/file-dir-sys.html">File
30214: API: Directories and System</a></cite>, E. Uhrhane. W3C.</dd>
30215:
30216: <dt id="refsGBK">[GBK]</dt>
30217: <dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
30218: Standardization Technical Committee.</dd>
30219:
30220:
30221: <dt id="refsGRAPHICS">[GRAPHICS]</dt>
30222: <dd>(Non-normative) <cite>Computer Graphics: Principles and
30223: Practice in C</cite>, Second Edition, J. Foley, A. van Dam,
30224: S. Feiner, J. Hughes. Addison-Wesley. ISBN
30225: 0-201-84840-6.</dd>
30226:
30227: <dt id="refsGREGORIAN">[GREGORIAN]</dt>
30228: <dd>(Non-normative) <cite>Inter Gravissimas</cite>, A. Lilius,
30229: C. Clavius. Gregory XIII Papal Bulls, February 1582.</dd>
30230:
30231: <dt id="refsHPAAIG">[HPAAIG]</dt>
30232: <dd><cite><a href="http://dev.w3.org/html5/html-api-map/overview.html">HTML to Platform Accessibility APIs Implementation Guide</a></cite>. W3C.</dd>
30233:
30234: <dt id="refsHTMLALTTECHS">[HTMLALTTECHS]</dt>
30235: <dd>(Non-normative) <cite><a href="http://dev.w3.org/html5/alt-techniques/">HTML5: Techniques for providing useful text alternatives</a></cite>, S. Faulkner. W3C.</dd>
30236:
30237: <dt id="refsHTMLDIFF">[HTMLDIFF]</dt>
30238: <dd>(Non-normative) <cite><a href="http://dev.w3.org/html5/html4-differences/">HTML5
30239: differences from HTML4</a></cite>, A. van Kesteren. W3C.</dd>
30240:
30241: <dt id="refsHTTP">[HTTP]</dt>
30242: <dd><cite><a href="http://tools.ietf.org/html/rfc2616">Hypertext
30243: Transfer Protocol — HTTP/1.1</a></cite>, R. Fielding, J. Gettys,
30244: J. Mogul, H. Frystyk, L. Masinter, P. Leach, T. Berners-Lee. IETF.</dd>
30245:
30246: <dt id="refsIANACHARSET">[IANACHARSET]</dt>
30247: <dd><cite><a href="http://www.iana.org/assignments/character-sets">Character
30248: Sets</a></cite>. IANA.</dd>
30249:
30250: <dt id="refsIANAPERMHEADERS">[IANAPERMHEADERS]</dt>
30251: <dd><cite><a href="http://www.iana.org/assignments/message-headers/perm-headers.html">Permanent
30252: Message Header Field Names</a></cite>. IANA.</dd>
30253:
30254: <dt id="refsISO8601">[ISO8601]</dt>
30255: <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 — Information interchange — Representation of dates and times</a></cite>. ISO.</dd>
30256:
30257: <dt id="refsISO885911">[ISO885911]</dt>
1.598 mike 30258: <dd><cite><a href="http://std.dkuug.dk/jtc1/sc2/open/02n3333.pdf">ISO-8859-11:
1.562 mike 30259: Information technology — 8-bit single-byte coded graphic
30260: character sets — Part 11: Latin/Thai
1.598 mike 30261: alphabet</a></cite>. ISO.</dd>
1.562 mike 30262:
30263: <dt id="refsJPEG">[JPEG]</dt>
30264: <dd><cite><a href="http://www.w3.org/Graphics/JPEG/jfif3.pdf">JPEG File Interchange Format</a></cite>, E. Hamilton.</dd>
30265:
30266: <dt id="refsJSURL">[JSURL]</dt>
30267: <dd><cite><a href="http://tools.ietf.org/html/draft-hoehrmann-javascript-scheme">The
30268: 'javascript' resource identifier scheme</a></cite>,
30269: B. Höhrmann. IETF.</dd>
30270:
30271: <dt id="refsMAILTO">[MAILTO]</dt>
1.602 mike 30272: <dd>(Non-normative) <cite><a href="http://tools.ietf.org/html/rfc6068">The 'mailto' URI scheme</a></cite>, M. Duerst, L. Masinter, J. Zawinski. IETF.</dd>
1.562 mike 30273:
30274: <dt id="refsMATHML">[MATHML]</dt>
30275: <dd><cite><a href="http://www.w3.org/TR/MathML/">Mathematical
30276: Markup Language (MathML)</a></cite>, D. Carlisle, P. Ion, R. Miner,
30277: N. Poppelier. W3C.</dd>
30278:
30279: <dt id="refsMEDIAFRAG">[MEDIAFRAG]</dt>
30280: <dd><cite><a href="http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/">Media
30281: Fragments URI</a></cite>, R. Troncy, E. Mannens, S. Pfeiffer, D.
30282: Van Deursen. W3C.</dd>
30283:
30284: <dt id="refsMFREL">[MFREL]</dt>
30285: <dd><cite><a href="http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions">Microformats Wiki: existing rel values</a></cite>. Microformats.</dd>
30286:
30287: <dt id="refsMIMESNIFF">[MIMESNIFF]</dt>
1.604 mike 30288: <dd><cite><a href="http://mimesniff.spec.whatwg.org/">MIME Sniffing</a></cite>, A. Barth, I. Hickson. WHATWG.</dd>
1.562 mike 30289:
30290: <dt id="refsMQ">[MQ]</dt>
30291: <dd><cite><a href="http://dev.w3.org/csswg/css3-mediaqueries/">Media
30292: Queries</a></cite>, H. Lie, T. Çelik, D. Glazman, A. van
30293: Kesteren. W3C.</dd>
30294:
30295: <dt id="refsNPAPI">[NPAPI]</dt>
30296: <dd>(Non-normative) <cite><a href="http://developer.mozilla.org/en/Gecko_Plugin_API_Reference">Gecko
30297: Plugin API Reference</a></cite>. Mozilla.</dd>
30298:
30299: <dt id="refsOPENSEARCH">[OPENSEARCH]</dt>
30300: <dd><cite><a href="http://www.opensearch.org/Specifications/OpenSearch/1.1#Autodiscovery_in_HTML.2FXHTML">Autodiscovery
30301: in HTML/XHTML</a></cite>. In <cite>OpenSearch 1.1 Draft 4</cite>,
30302: Section 4.6.2. OpenSearch.org.</dd>
30303:
30304: <dt id="refsORIGIN">[ORIGIN]</dt>
30305: <dd><cite><a href="http://tools.ietf.org/html/draft-ietf-websec-origin">The Web Origin Concept</a></cite>, A. Barth. IETF.</dd>
30306:
30307: <dt id="refsPDF">[PDF]</dt>
30308: <dd>(Non-normative) <cite><a href="http://www.adobe.com/devnet/acrobat/pdfs/PDF32000_2008.pdf">Document management — Portable document format — Part 1: PDF</a></cite>. ISO.</dd>
30309:
30310: <dt id="refsPINGBACK">[PINGBACK]</dt>
30311: <dd><cite><a href="http://www.hixie.ch/specs/pingback/pingback">Pingback
30312: 1.0</a></cite>, S. Langridge, I. Hickson.</dd>
30313:
30314: <dt id="refsPNG">[PNG]</dt>
30315: <dd><cite><a href="http://www.w3.org/TR/PNG/">Portable Network
30316: Graphics (PNG) Specification</a></cite>, D. Duce. W3C.</dd>
30317:
30318: <dt id="refsPOLYGLOT">[POLYGLOT]</dt>
30319: <dd>(Non-normative) <cite><a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html">Polyglot
30320: Markup: HTML-Compatible XHTML Documents</a></cite>, E. Graff.
30321: W3C.</dd>
30322:
30323: <dt id="refsPPUTF8">[PPUTF8]</dt>
30324: <dd>(Non-normative) <cite><span>The
30325: Properties and Promises of
30326: UTF-8</span></cite>, M. Dürst. University of Zürich. In <cite>Proceedings of the 11th International
30327: Unicode Conference</cite>.</dd>
30328:
30329: <dt id="refsPROGRESS">[PROGRESS]</dt>
30330: <dd><cite><a href="http://dev.w3.org/2006/webapi/progress/">Progress
30331: Events</a></cite>, A. van Kesteren. W3C.</dd>
30332:
30333: <dt id="refsPSL">[PSL]</dt>
30334: <dd><cite><a href="http://publicsuffix.org/">Public Suffix List</a></cite>.
30335: Mozilla Foundation.</dd>
30336:
30337: <dt id="refsRFC1034">[RFC1034]</dt>
30338: <dd><cite><a href="http://tools.ietf.org/html/rfc1034">Domain
30339: Names - Concepts and Facilities</a></cite>, P. Mockapetris. IETF,
30340: November 1987.</dd>
30341:
30342: <dt id="refsRFC1345">[RFC1345]</dt>
30343: <dd><cite><a href="http://tools.ietf.org/html/rfc1345">Character Mnemonics
30344: and Character Sets</a></cite>, K. Simonsen. IETF.</dd>
30345:
30346: <dt id="refsRFC1468">[RFC1468]</dt>
30347: <dd><cite><a href="http://tools.ietf.org/html/rfc1468">Japanese Character
30348: Encoding for Internet Messages</a></cite>, J. Murai, M. Crispin, E. van der
30349: Poel. IETF.</dd>
30350:
30351: <dt id="refsRFC1554">[RFC1554]</dt>
30352: <dd><cite><a href="http://tools.ietf.org/html/rfc1554">ISO-2022-JP-2:
30353: Multilingual Extension of ISO-2022-JP</a></cite>, M. Ohta, K. Handa. IETF.</dd>
30354:
30355: <dt id="refsRFC1557">[RFC1557]</dt>
30356: <dd><cite><a href="http://tools.ietf.org/html/rfc1557">Korean Character
30357: Encoding for Internet Messages</a></cite>, U. Choi, K. Chon, H. Park. IETF.</dd>
30358:
30359: <dt id="refsRFC1842">[RFC1842]</dt>
30360:
30361: <dd><cite><a href="http://tools.ietf.org/html/rfc1842">ASCII
30362: Printable Characters-Based Chinese Character Encoding for Internet
30363: Messages</a></cite>, Y. Wei, Y. Zhang, J. Li, J. Ding, Y. Jiang.
30364: IETF.</dd>
30365:
30366: <dt id="refsRFC1922">[RFC1922]</dt>
30367: <dd><cite><a href="http://tools.ietf.org/html/rfc1922">Chinese Character
30368: Encoding for Internet Messages</a></cite>, HF. Zhu, DY. Hu, ZG. Wang, TC. Kao,
30369: WCH. Chang, M. Crispin. IETF.</dd>
30370:
30371: <dt id="refsRFC2046">[RFC2046]</dt>
30372: <dd><cite><a href="http://tools.ietf.org/html/rfc2046">Multipurpose Internet
30373: Mail Extensions (MIME) Part Two: Media Types</a></cite>, N. Freed,
30374: N. Borenstein. IETF.</dd>
30375: <dt id="refsRFC2119">[RFC2119]</dt>
30376: <dd><cite><a href="http://tools.ietf.org/html/rfc2119">Key words for use in
30377: RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF.</dd>
30378:
30379: <dt id="refsRFC2237">[RFC2237]</dt>
30380: <dd><cite><a href="http://tools.ietf.org/html/rfc2237">Japanese Character
30381: Encoding for Internet Messages</a></cite>, K. Tamaru. IETF.</dd>
30382:
30383: <dt id="refsRFC2313">[RFC2313]</dt>
30384: <dd><cite><a href="http://tools.ietf.org/html/rfc2313">PKCS #1:
30385: RSA Encryption</a></cite>, B. Kaliski. IETF.</dd>
30386:
30387: <dt id="refsRFC2318">[RFC2318]</dt>
30388: <dd><cite><a href="http://tools.ietf.org/html/rfc2318">The
30389: text/css Media Type</a></cite>, H. Lie, B. Bos, C. Lilley. IETF.</dd>
30390:
30391: <dt id="refsRFC2388">[RFC2388]</dt>
30392: <dd><cite><a href="http://tools.ietf.org/html/rfc2388">Returning Values from
30393: Forms: multipart/form-data</a></cite>, L. Masinter. IETF.</dd>
30394:
30395: <dt id="refsRFC2397">[RFC2397]</dt>
30396: <dd><cite><a href="http://tools.ietf.org/html/rfc2397">The "data"
30397: URL scheme</a></cite>, L. Masinter. IETF.</dd>
30398:
30399: <dt id="refsRFC2425">[RFC2425]</dt>
30400: <dd><cite><a href="http://tools.ietf.org/html/rfc2425">A MIME
30401: Content-Type for Directory Information</a></cite>, T. Howes,
30402: M. Smith, F. Dawson. IETF.</dd>
30403:
30404: <dt id="refsRFC2426">[RFC2426]</dt>
30405: <dd><cite><a href="http://tools.ietf.org/html/rfc2426">vCard MIME Directory
30406: Profile</a></cite>, F. Dawson, T. Howes. IETF.</dd>
30407:
30408: <dt id="refsRFC2483">[RFC2483]</dt>
30409: <dd><cite><a href="http://tools.ietf.org/html/rfc2483">URI Resolution
30410: Services Necessary for URN Resolution</a></cite>, M. Mealling, R. Daniel.
30411: IETF.</dd>
30412:
30413: <dt id="refsRFC2781">[RFC2781]</dt>
30414: <dd><cite><a href="http://tools.ietf.org/html/rfc2781">UTF-16, an
30415: encoding of ISO 10646</a></cite>, P. Hoffman, F. Yergeau. IETF.</dd>
30416:
30417: <dt id="refsRFC3676">[RFC3676]</dt>
30418: <dd><cite><a href="http://tools.ietf.org/html/rfc3676">The Text/Plain Format
30419: and DelSp Parameters</a></cite>, R. Gellens. IETF.</dd>
30420:
30421: <dt id="refsRFC3023">[RFC3023]</dt>
30422: <dd><cite><a href="http://tools.ietf.org/html/rfc3023">XML Media
30423: Types</a></cite>, M. Murata, S. St. Laurent, D. Kohn. IETF.</dd>
30424:
30425: <dt id="refsRFC3279">[RFC3279]</dt>
30426: <dd><cite><a href="http://tools.ietf.org/html/rfc3279">Algorithms
30427: and Identifiers for the Internet X.509 Public Key Infrastructure
30428: Certificate and Certificate Revocation List (CRL)
30429: Profile</a></cite>, W. Polk, R. Housley, L. Bassham. IETF.</dd>
30430:
30431: <dt id="refsRFC3490">[RFC3490]</dt>
30432: <dd><cite><a href="http://tools.ietf.org/html/rfc3490">Internationalizing
30433: Domain Names in Applications (IDNA)</a></cite>, P. Faltstrom, P. Hoffman, A.
30434: Costello. IETF.</dd>
30435:
30436: <dt id="refsRFC3629">[RFC3629]</dt>
30437: <dd><cite><a href="http://tools.ietf.org/html/rfc3629">UTF-8, a
30438: transformation format of ISO 10646</a></cite>, F. Yergeau. IETF.</dd>
30439:
30440: <dt id="refsRFC3986">[RFC3986]</dt>
30441: <dd><cite><a href="http://tools.ietf.org/html/rfc3986">Uniform Resource
30442: Identifier (URI): Generic Syntax</a></cite>, T. Berners-Lee, R. Fielding, L.
30443: Masinter. IETF.</dd>
30444:
30445: <dt id="refsRFC3987">[RFC3987]</dt>
30446: <dd><cite><a href="http://tools.ietf.org/html/rfc3987">Internationalized
30447: Resource Identifiers (IRIs)</a></cite>, M. Dürst, M. Suignard. IETF.</dd>
30448:
30449: <dt id="refsRFC4281">[RFC4281]</dt>
30450: <dd><cite><a href="http://tools.ietf.org/html/rfc4281">The Codecs Parameter
30451: for "Bucket" Media Types</a></cite>, R. Gellens, D. Singer, P. Frojdh. IETF.</dd>
30452:
30453: <dt id="refsRFC4329">[RFC4329]</dt>
30454: <dd>(Non-normative) <cite><a href="http://tools.ietf.org/html/rfc4329">Scripting Media
30455: Types</a></cite>, B. Höhrmann. IETF.</dd>
30456:
1.572 mike 30457: <dt id="refsRFC4395">[RFC4395]</dt>
30458: <dd><cite><a href="http://tools.ietf.org/html/rfc4395">Guidelines and Registration Procedures for New URI Schemes</a></cite>, T. Hansen, T. Hardie, L. Masinter. IETF.</dd>
30459:
1.562 mike 30460: <dt id="refsRFC4648">[RFC4648]</dt>
30461: <dd><cite><a href="http://tools.ietf.org/html/rfc4648">The Base16,
30462: Base32, and Base64 Data Encodings</a></cite>, S. Josefsson.
30463: IETF.</dd>
30464:
30465: <dt id="refsRFC5280">[RFC5280]</dt>
30466: <dd><cite><a href="http://tools.ietf.org/html/rfc5280">Internet
30467: X.509 Public Key Infrastructure Certificate and Certificate
30468: Revocation List (CRL) Profile</a></cite>, D. Cooper, S. Santesson,
30469: S. Farrell, S. Boeyen, R. Housley, W. Polk. IETF.</dd>
30470:
30471: <dt id="refsRFC5322">[RFC5322]</dt>
30472: <dd><cite><a href="http://tools.ietf.org/html/rfc5322">Internet Message
30473: Format</a></cite>, P. Resnick. IETF.</dd>
30474:
30475: <dt id="refsRFC5724">[RFC5724]</dt>
30476: <dd><cite><a href="http://tools.ietf.org/html/rfc5724">URI Scheme
30477: for Global System for Mobile Communications (GSM) Short Message
30478: Service (SMS)</a></cite>, E. Wilde, A. Vaha-Sipila. IETF.</dd>
30479:
30480: <dt id="refsSCSU">[SCSU]</dt>
30481: <dd>(Non-normative) <cite><a href="http://www.unicode.org/reports/tr6/">UTR #6: A Standard
30482: Compression Scheme For Unicode</a></cite>, M. Wolf, K. Whistler,
30483: C. Wicksteed, M. Davis, A. Freytag, M. Scherer. Unicode Consortium.</dd>
30484:
30485: <dt id="refsSELECTORS">[SELECTORS]</dt>
1.563 mike 30486: <dd><cite><a href="http://dev.w3.org/csswg/selectors4/">Selectors</a></cite>, E. Etemad, T. Çelik, D. Glazman, I. Hickson, P. Linss, J. Williams. W3C.</dd>
1.562 mike 30487:
30488: <dt id="refsSHIFTJIS">[SHIFTJIS]</dt>
30489: <dd><cite>JIS X0208: 7-bit and 8-bit double byte coded KANJI sets
30490: for information interchange</cite>. Japanese Industrial Standards Committee.</dd>
30491:
30492: <dt id="refsSRGB">[SRGB]</dt>
30493: <dd><cite lang="en-GB"><a href="http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408!OpenDocument&Click=">IEC
30494: 61966-2-1: Multimedia systems and equipment — Colour measurement
30495: and management — Part 2-1: Colour management — Default RGB colour
30496: space — sRGB</a></cite>. IEC.</dd>
30497:
30498: <dt id="refsSVG">[SVG]</dt>
30499: <dd><cite><a href="http://www.w3.org/TR/SVGTiny12/">Scalable Vector
30500: Graphics (SVG) Tiny 1.2 Specification</a></cite>, O. Andersson,
30501: R. Berjon, E. Dahlström, A. Emmons, J. Ferraiolo, A. Grasso,
30502: V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack,
30503: A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers,
30504: A. Shellshear. W3C.</dd>
30505:
30506: <dt id="refsTIS620">[TIS620]</dt>
30507: <dd><cite><a href="http://www.nectec.or.th/it-standards/std620/std620.htm">UDC
30508: 681.3.04:003.62</a></cite>. Thai Industrial Standards Institute,
30509: Ministry of Industry, Royal Thai Government. ISBN
30510: 974-606-153-4.</dd>
30511:
1.579 mike 30512: <dt id="refsTYPEDARRAY">[TYPEDARRAY]</dt>
30513: <dd><cite><a href="http://www.khronos.org/registry/typedarray/specs/latest/">Typed Array Specification</a></cite>, D. Herman, K. Russell. Khronos.</dd>
30514:
1.562 mike 30515: <dt id="refsUAAG">[UAAG]</dt>
30516: <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/UAAG20/">Web Content Accessibility
30517: Guidelines (UAAG) 2.0</a></cite>, J. Allan, K. Ford, J. Richards,
30518: J. Spellman. W3C.</dd>
30519:
1.575 mike 30520: <dt id="refsUNDO">[UNDO]</dt>
30521: <dd><cite><a href="http://rniwa.com/editing/undomanager.html">UndoManager and DOM Transaction</a></cite>, R. Niwa.</dd>
30522:
1.562 mike 30523: <dt id="refsUNICODE">[UNICODE]</dt>
30524: <dd><cite><a href="http://www.unicode.org/versions/">The Unicode Standard</a></cite>. Unicode Consortium.</dd>
30525:
30526: <dt id="refsUNIVCHARDET">[UNIVCHARDET]</dt>
30527: <dd>(Non-normative) <cite><a href="http://www.mozilla.org/projects/intl/UniversalCharsetDetection.html">A
30528: composite approach to language/encoding
30529: detection</a></cite>, S. Li, K. Momoi. Netscape. In
30530: <cite>Proceedings of the 19th International Unicode
30531: Conference</cite>.</dd>
30532:
30533: <dt id="refsUTF7">[UTF7]</dt>
30534: <dd><cite><a href="http://tools.ietf.org/html/rfc2152">UTF-7: A
30535: Mail-Safe Transformation Format of Unicode</a></cite>,
30536: D. Goldsmith, M. Davis. IETF.</dd>
30537:
30538: <dt id="refsUTF8DET">[UTF8DET]</dt>
30539: <dd>(Non-normative) <cite><a href="http://www.w3.org/International/questions/qa-forms-utf-8">Multilingual
30540: form encoding</a></cite>, M. Dürst. W3C.</dd>
30541:
30542: <dt id="refsUTR36">[UTR36]</dt>
30543: <dd>(Non-normative) <cite><a href="http://www.unicode.org/reports/tr36/">UTR #36: Unicode
30544: Security Considerations</a></cite>, M. Davis, M. Suignard. Unicode
30545: Consortium.</dd>
30546:
30547: <dt id="refsWCAG">[WCAG]</dt>
30548: <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility
30549: Guidelines (WCAG) 2.0</a></cite>, B. Caldwell, M. Cooper, L. Reid,
30550: G. Vanderheiden. W3C.</dd>
30551:
30552: <dt id="refsWEBIDL">[WEBIDL]</dt>
30553: <dd><cite><a href="http://dev.w3.org/2006/webapi/WebIDL/">Web
30554: IDL</a></cite>, C. McCormack. W3C.</dd>
30555:
30556: <dt id="refsWEBLINK">[WEBLINK]</dt>
30557: <dd><cite><a href="http://tools.ietf.org/html/rfc5988">Web
30558: Linking</a></cite>, M. Nottingham. IETF.</dd>
30559:
30560: <dt id="refsWEBSOCKET">[WEBSOCKET]</dt>
30561: <dd><cite><a href="http://dev.w3.org/html5/websockets/">The WebSocket
30562: API</a></cite>, I. Hickson. W3C.</dd>
30563:
30564: <dt id="refsWEBSTORAGE">[WEBSTORAGE]</dt>
30565: <dd><cite><a href="http://dev.w3.org/html5/webstorage/">Web
30566: Storage</a></cite>, I. Hickson. W3C.</dd>
30567:
30568: <dt id="refsWEBWORKERS">[WEBWORKERS]</dt>
30569: <dd><cite><a href="http://dev.w3.org/html5/workers/">Web
30570: Workers</a></cite>, I. Hickson. W3C.</dd>
30571:
30572: <dt id="refsWHATWGWIKI">[WHATWGWIKI]</dt>
30573: <dd><cite><a href="http://wiki.whatwg.org/">The WHATWG Wiki</a></cite>. WHATWG.</dd>
30574:
30575: <dt id="refsWIN1252">[WIN1252]</dt>
30576: <dd><cite><a href="http://www.microsoft.com/globaldev/reference/sbcs/1252.htm">Windows 1252</a></cite>. Microsoft.</dd>
30577:
30578: <dt id="refsWIN1254">[WIN1254]</dt>
30579: <dd><cite><a href="http://www.microsoft.com/globaldev/reference/sbcs/1254.htm">Windows 1254</a></cite>. Microsoft.</dd>
30580:
30581: <dt id="refsWIN31J">[WIN31J]</dt>
30582: <dd><cite><a href="http://www.microsoft.com/globaldev/reference/dbcs/932.mspx">Windows Codepage 932</a></cite>. Microsoft.</dd>
30583:
30584: <dt id="refsWIN874">[WIN874]</dt>
30585: <dd><cite><a href="http://www.microsoft.com/globaldev/reference/sbcs/874.mspx">Windows 874</a></cite>. Microsoft.</dd>
30586:
30587: <dt id="refsWIN949">[WIN949]</dt>
30588: <dd><cite><a href="http://www.unicode.org/Public/MAPPINGS/VENDORS/MICSFT/WINDOWS/CP949.TXT">Windows Codepage 949</a></cite>. Microsoft.</dd>
30589:
30590: <dt id="refsX690">[X690]</dt>
30591: <dd><cite><a href="http://www.itu.int/ITU-T/studygroups/com17/languages/X.690-0207.pdf">Recommendation
30592: X.690 — Information Technology — ASN.1 Encoding Rules —
30593: Specification of Basic Encoding Rules (BER), Canonical Encoding
30594: Rules (CER), and Distinguished Encoding Rules
30595: (DER)</a></cite>. International Telecommunication Union.</dd>
30596:
30597: <dt id="refsXHR">[XHR]</dt>
30598: <dd><cite><a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/"><code>XMLHttpRequest</code></a></cite>,
30599: A. van Kesteren. W3C.</dd>
30600:
30601: <dt id="refsXML">[XML]</dt>
30602: <dd><cite><a href="http://www.w3.org/TR/xml/">Extensible Markup
30603: Language</a></cite>, T. Bray, J. Paoli, C. Sperberg-McQueen,
30604: E. Maler, F. Yergeau. W3C.</dd>
30605:
30606: <dt id="refsXMLBASE">[XMLBASE]</dt>
30607: <dd><cite><a href="http://www.w3.org/TR/xmlbase/">XML
30608: Base</a></cite>, J. Marsh, R. Tobin. W3C.</dd>
30609:
30610: <dt id="refsXMLNS">[XMLNS]</dt>
30611: <dd><cite><a href="http://www.w3.org/TR/xml-names/">Namespaces in
30612: XML</a></cite>, T. Bray, D. Hollander, A. Layman, R. Tobin. W3C.</dd>
30613:
30614: <dt id="refsXPATH10">[XPATH10]</dt>
30615: <dd><cite><a href="http://www.w3.org/TR/1999/REC-xpath-19991116">XML Path
30616: Language (XPath) Version 1.0</a></cite>, J. Clark, S. DeRose. W3C.</dd>
30617:
30618: <dt id="refsXSLT10">[XSLT10]</dt>
30619: <dd>(Non-normative) <cite><a href="http://www.w3.org/TR/1999/REC-xslt-19991116">XSL
30620: Transformations (XSLT) Version 1.0</a></cite>, J. Clark. W3C.</dd>
30621:
30622:
30623:
30624:
30625: </dl><h2 class="no-num" id="acknowledgements">Acknowledgements</h2><!-- ACKS --><p>Thanks to Tim Berners-Lee for inventing HTML, without which none
30626: of this would exist.</p><p>Thanks to
30627:
30628: Aankhen,
30629: Aaron Boodman,
30630: Aaron Leventhal,
30631: Adam Barth,
30632: Adam de Boor,
30633: Adam Hepton,
30634: Adam Roben,
30635: Addison Phillips,
30636: Adele Peterson,
30637: Adrian Bateman,
30638: Adrian Sutton,
30639: Agustín Fernández,
30640: Ajai Tirumali,
30641: Akatsuki Kitamura,
30642: Alan Plum,
30643: Alastair Campbell,
30644: Alejandro G. Castro,
30645: Alex Bishop,
30646: Alex Nicolaou,
30647: Alex Rousskov,
30648: Alexander J. Vincent,
30649: Alexandre Morgaut,
30650: Alexey Feldgendler,
30651: Алексей Проскуряков (Alexey Proskuryakov),
30652: Alexis Deveria,
30653: Allan Clements,
30654: Amos Jeffries,
30655: Anders Carlsson,
30656: Andreas,
30657: Andreas Kling,
30658: Andrei Popescu,
30659: André E. Veltstra,
30660: Andrew Barfield,
30661: Andrew Clover,
30662: Andrew Gove,
30663: Andrew Grieve,
30664: Andrew Oakley,
30665: Andrew Sidwell,
30666: Andrew Simons,
30667: Andrew Smith,
30668: Andrew W. Hagen,
30669: Andrey V. Lukyanov,
30670: Andy Heydon,
30671: Andy Palay,
30672: Anne van Kesteren,
30673: Anthony Boyd,
30674: Anthony Bryan,
30675: Anthony Hickson,
30676: Anthony Ricaud,
30677: Antti Koivisto,
30678: Arne Thomassen,
30679: Aron Spohr,
30680: Arphen Lin,
1.591 mike 30681: Arun Patole,
1.562 mike 30682: Aryeh Gregor,
30683: Asbjørn Ulsberg,
30684: Ashley Sheridan,
30685: Atsushi Takayama,
30686: Aurelien Levy,
30687: Ave Wrigley,
30688: Ben Boyle,
30689: Ben Godfrey,
30690: Ben Lerner,
30691: Ben Leslie,
30692: Ben Meadowcroft,
30693: Ben Millard,
30694: Benjamin Carl Wiley Sittler,
30695: Benjamin Hawkes-Lewis,
30696: Bert Bos,
30697: Bijan Parsia,
30698: Bil Corry,
30699: Bill Mason,
30700: Bill McCoy,
30701: Billy Wong,
30702: Bjartur Thorlacius,
30703: Björn Höhrmann,
30704: Blake Frantz,
30705: Boris Zbarsky,
30706: Brad Fults,
30707: Brad Neuberg,
30708: Brad Spencer,
30709: Brady Eidson,
30710: Brendan Eich,
30711: Brenton Simpson,
30712: Brett Wilson,
30713: Brett Zamir,
30714: Brian Campbell,
30715: Brian Korver,
30716: Brian Kuhn,
30717: Brian Ryner,
30718: Brian Smith,
30719: Brian Wilson,
30720: Bryan Sullivan,
30721: Bruce D'Arcus,
30722: Bruce Lawson,
30723: Bruce Miller,
30724: C. Williams,
30725: Cameron McCormack,
30726: Cao Yipeng,
30727: Carlos Gabriel Cardona,
30728: Carlos Perelló Marín,
30729: Chao Cai,
30730: 윤석찬 (Channy Yun),
30731: Charl van Niekerk,
30732: Charles Iliya Krempeaux,
30733: Charles McCathieNevile,
30734: Chris Apers,
30735: Chris Cressman,
30736: Chris Evans,
30737: Chris Morris,
30738: Chris Pearce,
30739: Christian Biesinger,
30740: Christian Johansen,
30741: Christian Schmidt,
30742: Christopher Aillon,
30743: Chriswa,
30744: Clark Buehler,
30745: Cole Robison,
30746: Colin Fine,
30747: Collin Jackson,
30748: Corprew Reed,
30749: Craig Cockburn,
30750: Csaba Gabor,
30751: Csaba Marton,
30752: Cynthia Shelly,
30753: Dan Yoder,
30754: Daniel Barclay,
30755: Daniel Bratell,
30756: Daniel Brooks,
30757: Daniel Brumbaugh Keeney,
30758: Daniel Cheng,
30759: Daniel Davis,
30760: Daniel Glazman,
30761: Daniel Peng,
30762: Daniel Schattenkirchner,
30763: Daniel Spång,
30764: Daniel Steinberg,
30765: Danny Sullivan,
30766: Darin Adler,
30767: Darin Fisher,
30768: Darxus,
30769: Dave Camp,
30770: Dave Hodder,
30771: Dave Lampton,
30772: Dave Singer,
30773: Dave Townsend,
30774: David Baron,
30775: David Bloom,
30776: David Bruant,
30777: David Carlisle,
30778: David E. Cleary,
30779: David Egan Evans,
30780: David Flanagan,
30781: David Gerard,
30782: David Håsäther,
30783: David Hyatt,
30784: David I. Lehn,
30785: David John Burrowes,
30786: David Matja,
30787: David Remahl,
30788: David Smith,
30789: David Woolley,
30790: DeWitt Clinton,
30791: Dean Edridge,
30792: Dean Edwards,
30793: Debi Orton,
30794: Derek Featherstone,
30795: Devdatta,
30796: Dimitri Glazkov,
30797: Dimitry Golubovsky,
30798: Dirk Pranke,
30799: Divya Manian,
30800: Dmitry Titov,
30801: dolphinling,
30802: Dominique Hazaël-Massieux,
30803: Don Brutzman,
30804: Doron Rosenberg,
30805: Doug Kramer,
30806: Doug Simpkinson,
30807: Drew Wilson,
30808: Edmund Lai,
30809: Eduard Pascual,
30810: Eduardo Vela,
30811: Edward O'Connor,
30812: Edward Welbourne,
30813: Edward Z. Yang,
1.600 mike 30814: Ehsan Akhgari,
1.562 mike 30815: Eira Monstad,
30816: Eitan Adler,
30817: Eliot Graff,
30818: Elizabeth Castro,
30819: Elliott Sprehn,
30820: Elliotte Harold,
30821: Eric Carlson,
30822: Eric Law,
30823: Eric Rescorla,
30824: Eric Semling,
30825: Erik Arvidsson,
30826: Erik Rose,
30827: Evan Martin,
30828: Evan Prodromou,
30829: Evert,
30830: fantasai,
30831: Felix Sasaki,
30832: Francesco Schwarz,
30833: Francis Brosnan Blazquez,
30834: Franck 'Shift' Quélain,
30835: Frank Barchard,
30836: 鵜飼文敏 (Fumitoshi Ukai),
30837: Futomi Hatano,
30838: Gavin Carothers,
30839: Gareth Rees,
30840: Garrett Smith,
30841: Geoffrey Garen,
30842: Geoffrey Sneddon,
30843: George Lund,
30844: Gianmarco Armellin,
30845: Giovanni Campagna,
30846: Glenn Adams,
30847: Glenn Maynard,
30848: Graham Klyne,
30849: Greg Botten,
30850: Greg Houston,
30851: Greg Wilkins,
30852: Gregg Tavares,
30853: Gregory J. Rosmaita,
30854: Grey,
30855: Guilherme Johansson Tramontina,
30856: Gytis Jakutonis,
30857: Håkon Wium Lie,
30858: Hallvord Reiar Michaelsen Steen,
30859: Hans S. Tømmerhalt,
30860: Hans Stimer,
30861: Harald Alvestrand,
30862: Henri Sivonen,
30863: Henrik Lied,
30864: Henry Mason,
30865: Hugh Winkler,
30866: Ian Bicking,
30867: Ian Clelland,
30868: Ian Davis,
30869: Ian Fette,
30870: Ignacio Javier,
30871: Ivan Enderlin,
30872: Ivo Emanuel Gonçalves,
30873: J. King,
30874: Jacques Distler,
30875: James Craig,
30876: James Graham,
30877: James Justin Harrell,
1.572 mike 30878: James Kozianski,
1.562 mike 30879: James M Snell,
30880: James Perrett,
30881: James Robinson,
30882: Jamie Lokier,
30883: Jan-Klaas Kollhof,
30884: Jason Kersey,
30885: Jason Lustig,
30886: Jason White,
30887: Jasper Bryant-Greene,
30888: Jatinder Mann,
30889: Jed Hartman,
30890: Jeff Balogh,
30891: Jeff Cutsinger,
30892: Jeff Schiller,
30893: Jeff Walden,
30894: Jeffrey Zeldman,
30895: 胡慧鋒 (Jennifer Braithwaite),
30896: Jens Bannmann,
30897: Jens Fendler,
30898: Jens Lindström,
30899: Jens Meiert,
30900: Jeremy Keith,
30901: Jeremy Orlow,
30902: Jeroen van der Meer,
30903: Jian Li,
30904: Jim Jewett,
30905: Jim Ley,
30906: Jim Meehan,
1.569 mike 30907: Jirka Kosek,
1.562 mike 30908: Jjgod Jiang,
30909: João Eiras,
30910: Joe Clark,
30911: Joe Gregorio,
30912: Joel Spolsky,
30913: Johan Herland,
30914: John Boyer,
30915: John Bussjaeger,
30916: John Carpenter,
30917: John Fallows,
30918: John Foliot,
30919: John Harding,
30920: John Keiser,
30921: John Snyders,
30922: John-Mark Bell,
30923: Johnny Stenback,
30924: Jon Ferraiolo,
30925: Jon Gibbins,
30926: Jon Perlow,
30927: Jonas Sicking,
30928: Jonathan Cook,
30929: Jonathan Rees,
30930: Jonathan Worent,
30931: Jonny Axelsson,
30932: Jorgen Horstink,
30933: Jorunn Danielsen Newth,
30934: Joseph Kesselman,
30935: Joseph Pecoraro,
30936: Josh Aas,
30937: Josh Levenberg,
30938: Joshua Bell,
30939: Joshua Randall,
30940: Jukka K. Korpela,
30941: Jules Clément-Ripoche,
30942: Julian Reschke,
30943: Jürgen Jeka,
30944: Justin Lebar,
30945: Justin Schuh,
30946: Justin Sinclair,
30947: Kai Hendry,
30948: Kartikaya Gupta,
30949: Kathy Walton,
30950: Kelly Ford,
30951: Kelly Norton,
30952: Kevin Benson,
30953: Kevin Cole,
30954: Kornél Pál,
30955: Kornel Lesinski,
30956: Kris Northfield,
30957: Kristof Zelechovski,
30958: Krzysztof Maczyński,
30959: 黒澤剛志 (Kurosawa Takeshi),
30960: Kyle Hofmann,
30961: Kyle Huey,
30962: Léonard Bouchet,
30963: Léonie Watson,
30964: Lachlan Hunt,
30965: Larry Masinter,
30966: Larry Page,
30967: Lars Gunther,
30968: Lars Solberg,
30969: Laura Carlson,
30970: Laura Granka,
30971: Laura L. Carlson,
30972: Laura Wisewell,
30973: Laurens Holst,
30974: Lee Kowalkowski,
30975: Leif Halvard Silli,
30976: Lenny Domnitser,
30977: Leonard Rosenthol,
30978: Leons Petrazickis,
30979: Lobotom Dysmon,
30980: Logan,
30981: Loune,
30982: Luke Kenneth Casson Leighton,
30983: Maciej Stachowiak,
30984: Magnus Kristiansen,
30985: Maik Merten,
30986: Malcolm Rowe,
30987: Mark Birbeck,
1.618 mike 30988: Mark Davis,
1.562 mike 30989: Mark Miller,
30990: Mark Nottingham,
30991: Mark Pilgrim,
30992: Mark Rowe,
30993: Mark Schenk,
30994: Mark Wilton-Jones,
30995: Martijn Wargers,
30996: Martin Atkins,
30997: Martin Dürst,
30998: Martin Honnen,
30999: Martin Janecke,
31000: Martin Kutschker,
31001: Martin Nilsson,
31002: Martin Thomson,
31003: Masataka Yakura,
31004: Mathieu Henri,
31005: Matias Larsson,
31006: Matt Schmidt,
31007: Matt Wright,
31008: Matthew Gregan,
31009: Matthew Mastracci,
31010: Matthew Raymond,
31011: Matthew Thomas,
31012: Mattias Waldau,
31013: Max Romantschuk,
31014: Menno van Slooten,
31015: Micah Dubinko,
31016: Michael 'Ratt' Iannarelli,
31017: Michael A. Nachbaur,
31018: Michael A. Puls II,
31019: Michael Carter,
31020: Michael Daskalov,
31021: Michael Enright,
31022: Michael Gratton,
31023: Michael Nordman,
31024: Michael Powers,
31025: Michael Rakowski,
31026: Michael(tm) Smith,
31027: Michal Zalewski,
31028: Michel Fortin,
31029: Michelangelo De Simone,
31030: Michiel van der Blonk,
31031: Mihai Şucan,
31032: Mihai Parparita,
31033: Mike Brown,
31034: Mike Dierken,
31035: Mike Dixon,
31036: Mike Schinkel,
31037: Mike Shaver,
31038: Mikko Rantalainen,
31039: Mohamed Zergaoui,
31040: Mounir Lamouri,
31041: Ms2ger,
31042: NARUSE Yui,
31043: Neil Deakin,
31044: Neil Rashbrook,
31045: Neil Soiffer,
31046: Nicholas Shanks,
31047: Nicholas Stimpson,
31048: Nicholas Zakas,
31049: Nickolay Ponomarev,
31050: Nicolas Gallagher,
31051: Noah Mendelsohn,
31052: Noah Slater,
31053: NoozNooz42,
31054: Ojan Vafai,
31055: Olaf Hoffmann,
31056: Olav Junker Kjær,
31057: Oldřich Vetešník,
31058: Oli Studholme,
31059: Oliver Hunt,
31060: Oliver Rigby,
31061: Olivier Gendrin,
31062: Olli Pettay,
31063: oSand,
31064: Patrick H. Lauke,
31065: Patrik Persson,
31066: Paul Norman,
31067: Per-Erik Brodin,
31068: Perry Smith,
31069: Peter Beverloo,
31070: Peter Karlsson,
31071: Peter Kasting,
31072: Peter Stark,
31073: Peter-Paul Koch,
31074: Phil Pickering,
31075: Philip Jägenstedt,
31076: Philip Taylor,
31077: Philip TAYLOR,
31078: Philippe De Ryck,
31079: Prateek Rungta,
31080: Pravir Gupta,
31081: Rachid Finge,
31082: Rajas Moonka,
31083: Ralf Stoltze,
31084: Ralph Giles,
31085: Raphael Champeimont,
1.580 mike 31086: Remci Mizkur,
1.562 mike 31087: Remco,
31088: Remy Sharp,
31089: Rene Saarsoo,
31090: Rene Stach,
31091: Ric Hardacre,
31092: Rich Doughty,
31093: Richard Ishida,
31094: Rigo Wenning,
31095: Rikkert Koppes,
31096: Rimantas Liubertas,
31097: Riona Macnamara,
31098: Rob Ennals,
31099: Rob Jellinghaus,
31100: Rob S,
31101: Robert Blaut,
31102: Robert Collins,
31103: Robert O'Callahan,
31104: Robert Sayre,
31105: Robin Berjon,
31106: Rodger Combs,
31107: Roland Steiner,
31108: Roman Ivanov,
31109: Roy Fielding,
31110: Ruud Steltenpool,
31111: Ryan King,
31112: Ryosuke Niwa,
31113: S. Mike Dierken,
31114: Salvatore Loreto,
31115: Sam Dutton,
31116: Sam Kuper,
31117: Sam Ruby,
31118: Sam Weinig,
31119: Sander van Lambalgen,
31120: Sarven Capadisli,
31121: Scott González,
31122: Scott Hess,
31123: Sean Fraser,
31124: Sean Hayes,
31125: Sean Hogan,
31126: Sean Knapp,
31127: Sebastian Markbåge,
31128: Sebastian Schnitzenbaumer,
31129: Seth Call,
31130: Shanti Rao,
31131: Shaun Inman,
31132: Shiki Okasaka,
31133: Sierk Bornemann,
31134: Sigbjørn Vik,
31135: Silvia Pfeiffer,
31136: Simon Montagu,
31137: Simon Pieters,
31138: Simon Spiegel,
31139: skeww,
31140: Stanton McCandlish,
31141: Stefan Håkansson,
31142: Stefan Haustein,
31143: Stefan Santesson,
31144: Stefan Weiss,
31145: Steffen Meschkat,
31146: Stephen Ma,
31147: Steve Faulkner,
31148: Steve Runyon,
31149: Steven Bennett,
31150: Steven Garrity,
31151: Steven Tate,
31152: Stewart Brodie,
31153: Stuart Ballard,
31154: Stuart Parmenter,
31155: Subramanian Peruvemba,
31156: Sunava Dutta,
31157: Susan Borgrink,
31158: Susan Lesch,
31159: Sylvain Pasche,
31160: T. J. Crowder,
31161: Tab Atkins,
31162: <span lang="tr" title="">Tantek Çelik</span>,
31163: 田村健人 (TAMURA Kent),
31164: Ted Mielczarek,
31165: Terrence Wood,
31166: Thomas Broyer,
31167: Thomas Koetter,
31168: Thomas O'Connor,
31169: Tim Altman,
31170: Tim Johansson,
31171: Toby Inkster,
31172: Todd Moody,
31173: Tom Baker,
31174: Tom Pike,
31175: Tommy Thorsen,
31176: Travis Leithead,
31177: Tyler Close,
31178: Vladimir Katardjiev,
31179: Vladimir Vukićević,
31180: voracity,
31181: Wakaba,
31182: Wayne Carr,
31183: Wayne Pollock,
31184: Wellington Fernando de Macedo,
31185: Weston Ruter,
1.572 mike 31186: Wilhelm Joys Andersen,
1.562 mike 31187: Will Levine,
31188: William Swanson,
31189: Wladimir Palant,
31190: Wojciech Mach,
31191: Wolfram Kriesing,
31192: Yang Chen,
31193: Ye-Kui Wang,
31194: Yehuda Katz,
31195: Yi-An Huang,
31196: Yngve Nysaeter Pettersen,
31197: Yuzo Fujishima,
31198: Zhenbin Xu,
31199: Zoltan Herczeg,
31200: and
31201: Øistein E. Andersen,
31202:
31203: for their useful comments, both large and small, that have led to
31204: changes to this specification over the years.</p><p>Thanks also to everyone who has ever posted about HTML to their
31205: blogs, public mailing lists, or forums, including all the
31206: contributors to the <a href="http://www.w3.org/html/wg/lists/">various W3C HTML WG
31207: lists</a> and the <a href="http://www.whatwg.org/mailing-list">various WHATWG lists</a>.
31208:
31209: </p><p>Special thanks to Richard Williamson for creating the first
31210: implementation of <code><a href="#the-canvas-element">canvas</a></code> in Safari, from which the
31211: canvas feature was designed.</p><p>Special thanks also to the Microsoft employees who first
31212: implemented the event-based drag-and-drop mechanism, <code title="attr-contenteditable"><a href="#attr-contenteditable">contenteditable</a></code>, and other
31213: features first widely deployed by the Windows Internet Explorer
31214: browser.</p><p>Thanks to the SubRip community, including in particular Zuggy and
31215: ai4spam, for their work on the SubRip software program whose SRT
31216: file format was used as the basis for the WebVTT text track file
31217: format.</p><p>Thanks to the many sources that provided inspiration for the
31218: examples used in the specification.</p><p>Thanks also to the Microsoft blogging community for some ideas,
31219: to the attendees of the W3C Workshop on Web Applications and
31220: Compound Documents for inspiration, to the #mrt crew, the #mrt.no
31221: crew, and the #whatwg crew, and to Pillar and Hedral for their ideas
31222: and support.</p></body></html>
Webmaster
![[BACK]](/http/77726476706e69737468656265737421f4f257d23063265f6c0f/cvsweb/icons/back.gif?vpn-1){kind=icon}
Return to spec.preprocessed.html CVS log ![[TXT]](/http/77726476706e69737468656265737421f4f257d23063265f6c0f/cvsweb/icons/text.gif?vpn-1){kind=icon}
![[DIR]](/http/77726476706e69737468656265737421f4f257d23063265f6c0f/cvsweb/icons/dir.gif?vpn-1){kind=icon}
Up to [Public] / html5 / spec-author-view