Update of /sources/public/html5/spec-author-view In directory hutz:/tmp/cvs-serv27280 Modified Files: Overview.html acknowledgements.html browsers.html comms.html dom.html editing.html embedded-content-0.html forms.html history.html index.html infrastructure.html interactive-elements.html introduction.html microdata.html named-character-references.html obsolete.html offline.html references.html semantics.html spec.html syntax.html tabular-data.html text-level-semantics.html the-canvas-element.html the-xhtml-syntax.html video.html Log Message: Update W3C copy boilerplate. [updated by splitter] Index: infrastructure.html =================================================================== RCS file: /sources/public/html5/spec-author-view/infrastructure.html,v retrieving revision 1.496 retrieving revision 1.497 diff -u -d -r1.496 -r1.497 --- infrastructure.html 7 Nov 2009 07:19:48 -0000 1.496 +++ infrastructure.html 7 Nov 2009 07:26:50 -0000 1.497 @@ -212,4 +212,1012 @@ .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } - </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implement \ No newline at end of file + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="introduction.html" title="1 Introduction" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> [...984 lines suppressed...] + <li value="8"><dfn id="not_found_err"><code>NOT_FOUND_ERR</code></dfn></li> + <li value="9"><dfn id="not_supported_err"><code>NOT_SUPPORTED_ERR</code></dfn></li> + <li value="10"><dfn id="inuse_attribute_err"><code>INUSE_ATTRIBUTE_ERR</code></dfn></li> + <li value="11"><dfn id="invalid_state_err"><code>INVALID_STATE_ERR</code></dfn></li> + <li value="12"><dfn id="syntax_err"><code>SYNTAX_ERR</code></dfn></li> + <li value="13"><dfn id="invalid_modification_err"><code>INVALID_MODIFICATION_ERR</code></dfn></li> + <li value="14"><dfn id="namespace_err"><code>NAMESPACE_ERR</code></dfn></li> + <li value="15"><dfn id="invalid_access_err"><code>INVALID_ACCESS_ERR</code></dfn></li> + <li value="16"><dfn id="validation_err"><code>VALIDATION_ERR</code></dfn></li> + <li value="17"><dfn id="type_mismatch_err"><code>TYPE_MISMATCH_ERR</code></dfn></li> + <li value="18"><dfn id="security_err"><code>SECURITY_ERR</code></dfn></li> <!-- actually in XHR for now --> + <li value="19"><dfn id="network_err"><code>NETWORK_ERR</code></dfn></li> <!-- actually in XHR for now --> + <li value="20"><dfn id="abort_err"><code>ABORT_ERR</code></dfn></li> <!-- actually in XHR for now --> + <li value="21"><dfn id="url_mismatch_err"><code>URL_MISMATCH_ERR</code></dfn></li> <!-- actually in workers for now --> + <li value="22"><dfn id="quota_exceeded_err"><code>QUOTA_EXCEEDED_ERR</code></dfn></li> <!-- actually defined right here for now --> +<!--v2DATAGRID <li value="23"><dfn><code>DATAGRID_MODEL_ERR</code></dfn></li> --> <!-- actually defined right here for now --> + <li value="81"><dfn id="parse_err"><code>PARSE_ERR</code></dfn></li> <!-- actually defined in dom3ls --> + <li value="82"><dfn id="serialize_err"><code>SERIALIZE_ERR</code></dfn></li> <!-- actually defined in dom3ls --> + </ol></body></html> \ No newline at end of file Index: text-level-semantics.html =================================================================== RCS file: /sources/public/html5/spec-author-view/text-level-semantics.html,v retrieving revision 1.494 retrieving revision 1.495 diff -u -d -r1.494 -r1.495 --- text-level-semantics.html 7 Nov 2009 07:19:49 -0000 1.494 +++ text-level-semantics.html 7 Nov 2009 07:26:51 -0000 1.495 @@ -0,0 +1,3611 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>4.6 Text-level semantics — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...3581 lines suppressed...] + <pre><!DOCTYPE HTML> +<html lang="en"> + <head> + <title>Flash test page</title> + </head> + <body> + <p> + <object type="application/x-shockwave-flash"> + <strong><param name=movie value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"></strong> + This page requires the use of a proprietary technology. Since you + have not installed the software product required to view this + page, you should try visiting another site that instead uses open + vendor-neutral technologies. + </object> + </p> + </body> +</html></pre> + + </div></body></html> \ No newline at end of file Index: history.html =================================================================== RCS file: /sources/public/html5/spec-author-view/history.html,v retrieving revision 1.496 retrieving revision 1.497 diff -u -d -r1.496 -r1.497 --- history.html 7 Nov 2009 07:19:48 -0000 1.496 +++ history.html 7 Nov 2009 07:26:50 -0000 1.497 @@ -0,0 +1,1145 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>6.8 Session history and navigation — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1115 lines suppressed...] + period of a month or more without being used or specified, then it + may be removed from the registry.</p> + + <p>If a keyword is added with the "proposed" status and found to + be redundant with existing values, it should be removed and listed + as a synonym for the existing value. If a keyword is added with + the "proposed" status and found to be harmful, then it should be + changed to "discontinued" status.</p> + + <p>Anyone can change the status at any time, but should only do so + in accordance with the definitions above.</p> + + </dd> + + </dl><p>Types defined as extensions in the <a href="http://wiki.whatwg.org/wiki/RelExtensions">WHATWG Wiki + RelExtensions page</a> with the status "proposed" or "ratified" may + be used with the <code title="">rel</code> attribute on + <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-canvas-element.html#the-area-element">area</a></code> elements in + accordance to the "Effect on..." field. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p></body></html> \ No newline at end of file Index: tabular-data.html =================================================================== RCS file: /sources/public/html5/spec-author-view/tabular-data.html,v retrieving revision 1.495 retrieving revision 1.496 diff -u -d -r1.495 -r1.496 --- tabular-data.html 7 Nov 2009 07:19:49 -0000 1.495 +++ tabular-data.html 7 Nov 2009 07:26:51 -0000 1.496 @@ -0,0 +1,1168 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>4.9 Tabular data — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1138 lines suppressed...] + <tr> <th scope=rowgroup> Research and development + <td> $ 1,109 <td> $ 782 <td> $ 712 + <tr> <th scope=row> Percentage of net sales + <td> 3.4% <td> 3.3% <td> 3.7% + <tbody> + <tr> <th scope=rowgroup> Selling, general, and administrative + <td> $ 3,761 <td> $ 2,963 <td> $ 2,433 + <tr> <th scope=row> Percentage of net sales + <td> 11.6% <td> 12.3% <td> 12.6% +</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 + </th></tr></thead><tbody><tr><th scope="rowgroup"> Research and development + </th><td> $ 1,109 </td><td> $ 782 </td><td> $ 712 + </td></tr><tr><th scope="row"> Percentage of net sales + </th><td> 3.4% </td><td> 3.3% </td><td> 3.7% + </td></tr></tbody><tbody><tr><th scope="rowgroup"> Selling, general, and administrative + </th><td> $ 3,761 </td><td> $ 2,963 </td><td> $ 2,433 + </td></tr><tr><th scope="row"> Percentage of net sales + </th><td> 11.6% </td><td> 12.3% </td><td> 12.6% + </td></tr></tbody></table></body></html> \ No newline at end of file Index: microdata.html =================================================================== RCS file: /sources/public/html5/spec-author-view/microdata.html,v retrieving revision 1.495 retrieving revision 1.496 diff -u -d -r1.495 -r1.496 --- microdata.html 7 Nov 2009 07:19:48 -0000 1.495 +++ microdata.html 7 Nov 2009 07:26:50 -0000 1.496 @@ -0,0 +1,964 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>5 Microdata — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="interactive-elements.html" title="4.11 Interactive elements" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="browsers.html" title="6 Web browsers" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> +<p>This is revision 1.3507.</p> + + </div><div> + <a href="interactive-elements.html">← 4.11 Interactive elements</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="browsers.html">6 Web browsers →</a> + </div> + + <h2 id="microdata"><span class="secno">5 </span><dfn>Microdata</dfn></h2><p class="XXX annotation"><b>Status: </b><i>Last call for comments. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/76">ISSUE-76</a> (Microdata/RDFa) blocks progress to Last Call</span></p><!-- v2 + + * <itemref itemprop="foo" src="url#id"> to import the item with + id="id" from url into the current microdata block as the value of + property foo? + + * splitting the 'content' part of a property into multiple sub-bits, + as in: + + <span itemprop="tel" item-content-in-bits> + Telephone: + <span content-bit>+44</span> (0) <span content-bit>1223 123 123</span> + </span> + + maybe vocabs that need this can use a sub vocabulary specifically + for this: + + <span itemprop="tel" itemscope itemtype="http://bits.example/"> + Telephone: + <span itemprop=bit>+44</span> (0) <span itemprop=bit>1223 123 123</span> + </span> + +--><h3 id="introduction-1"><span class="secno">5.1 </span>Introduction</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="overview"><span class="secno">5.1.1 </span>Overview</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>Sometimes, it is desirable to annotate content with specific + machine-readable labels, e.g. to allow generic scripts to provide + services that are customised to the page, or to enable content from + a variety of cooperating authors to be processed by a single script + in a consistent manner.</p><p>For this purpose, authors can use the microdata features + described in this section. Microdata allows nested groups of + name-value pairs to be added to documents, in parallel with the + existing content.</p><h4 id="the-basic-syntax"><span class="secno">5.1.2 </span>The basic syntax</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>At a high level, microdata consists of a group of name-value + pairs. The groups are called <a href="#concept-item" title="concept-item">items</a>, and each name-value pair is a + property. Items and properties are represented by regular + elements.</p><p>To create an item, the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute is used.</p><p>To add a property to an item, the <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute is used on one of + the <a href="#concept-item" title="concept-item">item's</a> descendants.</p><div class="example"> + + <p>Here there are two items, each of which has the property "name":</p> + + <pre><div itemscope> + <p>My name is <span itemprop="name">Elizabeth</span>.</p> +</div> + +<div itemscope> + <p>My name is <span itemprop="name">Daniel</span>.</p> +</div></pre> + + </div><p>Properties generally have values that are strings.</p><div class="example"> + + <p>Here the item has three properties:</p> + + <pre><div itemscope> + <p>My name is <span itemprop="name">Neil</span>.</p> + <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> + <p>I am <span itemprop="nationality">British</span>.</p> +</div></pre> + + </div><p>Properties can also have values that are <a href="infrastructure.html#url" title="URL">URLs</a>. This is achieved using the <code><a href="text-level-semantics.html#the-a-element">a</a></code> + element and its <code title="attr-hyperlink-href"><a href="history.html#attr-hyperlink-href">href</a></code> + attribute, the <code><a href="text-level-semantics.html#the-img-element">img</a></code> element and its <code title="attr-img-src"><a href="text-level-semantics.html#attr-img-src">src</a></code> attribute, or other elements that + link to or embed external resources.</p><div class="example"> + + <p>In this example, the item has one property, "image", whose value + is a URL:</p> + + <pre><div itemscope> + <img itemprop="image" src="google-logo.png" alt="Google"> +</div></pre> + + </div><p>Properties can also have values that are dates, times, or dates + and times. This is achieved using the <code><a href="text-level-semantics.html#the-time-element">time</a></code> element and + its <code title="attr-time-datetime"><a href="text-level-semantics.html#attr-time-datetime">datetime</a></code> attribute.</p><div class="example"> + + <p>In this example, the item has one property, + "birthday", whose value is a date:</p> + + <pre><div itemscope> + I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + + </div><p>Properties can also themselves be groups of name-value pairs, by + putting the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute + on the element that declares the property.</p><p>Items that are not part of others are called <a href="#top-level-microdata-items">top-level + microdata items</a>.</p><div class="example"> + + <p>In this example, the outer item represents a person, and the + inner one represents a band:</p> + + <pre><div itemscope> + <p>Name: <span itemprop="name">Amanda</span></p> + <p>Band: <span itemprop="band" itemscope> <span itemprop="name">Jazz Band</span> (<span itemprop="size">12</span> players)</span></p> +</div></pre> + + <p>The outer item here has two properties, "name" and + "band". The "name" is "Amanda", and the + "band" is an item in its own right, with two + properties, "name" and "size". The + "name" of the band is "Jazz Band", and the + "size" is "12".</p> + + <p>The outer item in this example is a top-level microdata + item.</p> + + </div><p>Properties that are not descendants of the element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute can be associated + with the <a href="#concept-item" title="concept-item">item</a> using the <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute. This attribute takes + a list of IDs of elements to crawl in addition to crawling the + children of the element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute.</p><div class="example"> + + <p>This example is the same as the previous one, but all the + properties are separated from their <a href="#concept-item" title="concept-item">items</a>:</p> + + <pre><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span></p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span></p> + <p>Size: <span itemprop="size">12</span> players</p> +</div></pre> + + <p>This gives the same result as the previous example. The first + item has two properties, "name", set to "Amanda", and "band", set + to another item. That second item has two further properties, + "name", set to "Jazz Band", and "size", set to "12".</p> + + </div><p>An <a href="#concept-item" title="concept-item">item</a> can have multiple + properties with the same name and different values.</p><div class="example"> + + <p>This example describes an ice cream, with two flavors:</p> + + <pre><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + + <p>This thus results in an item with two properties, both + "flavor", having the values "Lemon sorbet" and "Apricot + sorbet".</p> + + </div><p>An element introducing a property can also introduce multiple + properties at once, to avoid duplication when some of the properties + have the same value.</p><div class="example"> + + <p>Here we see an item with two properties, + "favorite-color" and "favorite-fruit", both + set to the value "orange":</p> + + <pre><div itemscope> + <span itemprop="favorite-color favorite-fruit">orange</span> +</div></pre> + + </div><p>It's important to note that there is no relationship between the + microdata and the content of the document where the microdata is + marked up.</p><div class="example"> + + <p>There is no semantic difference, for instance, between the + following two examples:</p> + + <pre><figure> + <dd><img src="castle.jpeg"> + <dt><span itemscope><span itemprop="name">The Castle</span></span> (1986) +</figure></pre> + + <pre><span itemscope><meta itemprop="name" content="The Castle"></span> +<figure> + <dd><img src="castle.jpeg"> + <dt>The Castle (1986) +</figure></pre> + + <p>Both have a figure with a caption, and both, completely + unrelated to the figure, have an item with a name-value pair with + the name "name" and the value "The Castle". The only + difference is that if the user drags the caption out of the + document, in the former case, the item will be included in the + drag-and-drop data. In neither case is the image in any way + associated with the item.</p> + + </div><h4 id="typed-items"><span class="secno">5.1.3 </span>Typed items</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>The examples in the previous section show how information could + be marked up on a page that doesn't expect its microdata to be + re-used. Microdata is most useful, though, when it is used in + contexts where other authors and readers are able to cooperate to + make new uses of the markup.</p><p>For this purpose, it is necessary to give each <a href="#concept-item" title="concept-item">item</a> a type, such as + "http://example.com/person", or "http://example.org/cat", or + "http://band.example.net/". Types are identified as <a href="infrastructure.html#url" title="URL">URLs</a>.</p><p>The type for an <a href="#concept-item" title="concept-item">item</a> is given + as the value of an <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> + attribute on the same element as the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute.</p><div class="example"> + + <p>Here, the item is "http://example.org/animals#cat":</p> + +<pre><section itemscope itemtype="http://example.org/animals#cat"> + <h1 itemprop="name">Hedral</h1> + <p itemprop="desc">Hedral is a male american domestic + shorthair, with a fluffy black fur with white paws and belly.</p> + <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"> +</section></pre> + + <p>In this example the "http://example.org/animals#cat" item has three + properties, a "name" ("Hedral"), a "desc" ("Hedral is..."), and an + "img" ("hedral.jpeg").</p> + + </div><p>An item can only have one type. The type gives the context for + the properties, thus defining a vocabulary: a property named "class" + given for an item with the type "http://census.example/person" might + refer to the economic class of an individual, while a property named + "class" given for an item with the type "http://example.com/school/teacher" + might refer to the classroom a teacher has been assigned.</p><h4 id="global-identifiers-for-items"><span class="secno">5.1.4 </span>Global identifiers for items</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>Sometimes, an <a href="#concept-item" title="concept-item">item</a> gives + information about a topic that has a global identifier. For example, + books can be identified by their ISBN number.</p><p>Vocabularies (as identified by the <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute) can be designed + such that <a href="#concept-item" title="concept-item">items</a> get associated + with their global identifier in an unambiguous way by expressing the + global identifiers as <a href="infrastructure.html#url" title="URL">URLs</a> given in an + <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute.</p><p>The exact meaning of the <a href="infrastructure.html#url" title="URL">URLs</a> given in + <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attributes depends on the + vocabulary used.</p><div class="example"> + + <p>Here, an item is talking about a particular book:</p> + +<pre><dl itemscope + itemtype="http://vocab.example.net/book" + <strong>itemid="urn:isbn:0-330-34032-8"</strong>> + <dt>Title + <dd itemprop="title">The Reality Dysfunction + <dt>Author + <dd itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> +</dl></pre> + + <p>The "<code title="">http://vocab.example.net/book</code>" + vocabulary in this example would define that the <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute takes a <code title="">urn:</code> <a href="infrastructure.html#url">URL</a> pointing to the ISBN of the + book.</p> + + </div><!-- (commented out since itemtype="" defines the meaning of the + identifier for now) + <p>Although it is common practice, authors are encouraged not to use + the same URL to identify multiple topics; in particular, an HTTP URL + usually identifies a specific resource (such as an image or + document), and authors are encouraged to not use them to identify + people, non-Web resources like companies, movies, and products, or + other abstract concepts. Using an HTTP URL as a global identifier + for something other than the resource actually designated by the URL + leads to a situation where it is ambiguous whether the identifier, + and thus the set of properties specified in the microdata, + references the page or something else.</p> + --><h4 id="selecting-names-when-defining-vocabularies"><span class="secno">5.1.5 </span>Selecting names when defining vocabularies</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>Using microdata means using a vocabulary. For some purposes, an + ad-hoc vocabulary is adequate. For others, a vocabulary will need to + be designed. Where possible, authors are encouraged to re-use + existing vocabularies, as this makes content re-use easier.</p><p>When designing new vocabularies, identifiers can be created + either using <a href="infrastructure.html#url" title="URL">URLs</a>, or, for properties, as + plain words (with no dots or colons). For URLs, conflicts with other + vocabularies can be avoided by only using identifiers that + correspond to pages that the author has control over.</p><div class="example"> + + <p>For instance, if Jon and Adam both write content at <code title="">example.com</code>, at <code title="">http://example.com/~jon/...</code> and <code title="">http://example.com/~adam/...</code> respectively, then + they could select identifiers of the form + "http://example.com/~jon/name" and "http://example.com/~adam/name" + respectively.</p> + + </div><p>Properties whose names are just plain words can only be used + within the context of the types for which they are intended; + properties named using URLs can be reused in items of any type. If + an item has no type, and is not part of another item, then if its + properties have names that are just plain words, they are not + intended to be globally unique, and are instead only intended for + limited use. Generally speaking, authors are encouraged to use + either properties with globally unique names (URLs) or ensure that + their items are typed.</p><div class="example"> + + <p>Here, an item is an "http://example.org/animals#cat", and most of the + properties have names that are words defined in the context of that + type. There are also a few additional properties whose names come + from other vocabularies.</p> + +<pre><section itemscope itemtype="http://example.org/animals#cat"> + <h1 itemprop="name http://example.com/fn">Hedral</h1> + <p itemprop="desc">Hedral is a male american domestic + shorthair, with a fluffy <span + itemprop="http://example.com/color">black</span> fur with <span + itemprop="http://example.com/color">white</span> paws and belly.</p> + <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"> +</section></pre> + + <p>This example has one item with the type "http://example.org/animals#cat" + and the following properties:</p> + + <table><thead><tr><td>Property + </td><td>Value + </td></tr></thead><tbody><tr><td>name + </td><td>Hedral + </td></tr><tr><td>http://example.com/fn + </td><td>Hedral + </td></tr><tr><td>desc + </td><td>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly. + </td></tr><tr><td>http://example.com/color + </td><td>black + </td></tr><tr><td>http://example.com/color + </td><td>white + </td></tr><tr><td>img + </td><td>.../hedral.jpeg + </td></tr></tbody></table></div><h4 id="using-the-microdata-dom-api"><span class="secno">5.1.6 </span>Using the microdata DOM API</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>The microdata becomes even more useful when scripts can use it to + expose information to the user, for example offering it in a form + that can be used by other applications.</p><p>The <code title="dom-document-getItems"><a href="#dom-document-getitems">document.getItems(<var title="">typeNames</var>)</a></code> method provides access to the + <a href="#top-level-microdata-items">top-level microdata items</a>. It returns a + <code>NodeList</code> containing the items with the specified types, + or all types if no argument is specified.</p><p>Each <a href="#concept-item" title="concept-item">item</a> is represented in the + DOM by the element on which the relevant <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute is found. These + elements have their <code title="dom-itemScope"><a href="#dom-itemscope">element.itemScope</a></code> IDL attribute set to + true.</p><p>The type of <a href="#concept-item" title="concept-item">items</a> can be + obtained using the <code title="dom-itemType"><a href="#dom-itemtype">element.itemType</a></code> IDL attribute on the + element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> + attribute.</p><div class="example"> + + <p>This sample shows how the <code title="dom-document-getItems"><a href="#dom-document-getitems">getItems()</a></code> method can be used + to obtain a list of all the top-level microdata items of one type + given in the document:</p> + + <pre>var cats = document.getItems("http://example.com/feline");</pre> + + </div><p>Once an element representing an <a href="#concept-item" title="concept-item">item</a> has been obtained, its properties + can be extracted using the <code title="dom-properties"><a href="#dom-properties">properties</a></code> IDL attribute. This + attribute returns an <code><a href="infrastructure.html#htmlpropertiescollection">HTMLPropertiesCollection</a></code>, which can + be enumerated to go through each element that adds one or more + properties to the item. It can also be indexed by name, which will + return an object with a list of the elements that add properties + with that name.</p><p>Each element that adds a property also has a <code title="dom-itemValue"><a href="#dom-itemvalue">itemValue</a></code> IDL attribute that returns + its value.</p><div class="example"> + + <p>This sample gets the first item of type "http://example.net/user" and + then pops up an alert using the "name" property from + that item.</p> + + <pre>var user = document.getItems('http://example.net/user')[0]; +alert('Hello ' + user.properties['name'][0].content + '!');</pre> + + </div><p>The <code><a href="infrastructure.html#htmlpropertiescollection">HTMLPropertiesCollection</a></code> object, when indexed by + name in this way, actually returns a <code><a href="infrastructure.html#propertynodelist">PropertyNodeList</a></code> + object with all the matching properties. The + <code><a href="infrastructure.html#propertynodelist">PropertyNodeList</a></code> object can be used to obtained all the + values at once using <em>its</em> <code title="dom-PropertyNodeList-values"><a href="#dom-propertynodelist-values">values</a></code> attribute, which + returns an array of all the values.</p><div class="example"> + + <p>In an earlier example, a "http://example.org/animals#cat" item had two + "http://example.com/color" values. This script looks up the first such + item and then lists all its values.</p> + + <pre>var cat = document.getItems('http://example.com/animals#cat')[0]; +var colors = cat.properties['http://example.com/color'].values; +var result; +if (colors.length == 0) { + result = 'Color unknown.'; +} else if (colors.length == 1) { + result = 'Color: ' + colors[0]; +} else { + result = 'Colors:'; + for (var i = 0; i < colors.length; i += 1) + result += ' ' + colors[i]; +}</pre> + + </div><p>It's also possible to get a list of all the <a href="#property-names">property + names</a> using the object's <code title="dom-HTMLPropertiesCollection-names"><a href="#dom-htmlpropertiescollection-names">names</a></code> IDL + attribute.</p><div class="example"> + + <p>This example creates a big list with a nested list for each item + on the page, each with of all the property names used in that + item.</p> + + <pre>var outer = document.createElement('ul'); +var items = document.getItems(); +for (var item = 0; item < items.length; item += 1) { + var itemLi = document.createElement('li'); + var inner = document.createElement('ul'); + for (var name = 0; name < items[item].properties.names.length; name += 1) { + var propLi = document.createElement('li'); + propLi.appendChild(document.createTextNode(items[item].properties.names[name])); + inner.appendChild(propLi); + } + itemLi.appendChild(inner); + outer.appendChild(itemLi); +} +document.body.appendChild(outer);</pre> + + <p>If faced with the following from an earlier example:</p> + + <pre><section itemscope itemtype="http://example.org/animals#cat"> + <h1 itemprop="name http://example.com/fn">Hedral</h1> + <p itemprop="desc">Hedral is a male american domestic + shorthair, with a fluffy <span + itemprop="http://example.com/color">black</span> fur with <span + itemprop="http://example.com/color">white</span> paws and belly.</p> + <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"> +</section></pre> + + <p>...it would result in the following output:</p> + + <ul><li> + <ul><li>name</li> + <li>http://example.com/fn</li> + <li>desc</li> + <li>http://example.com/color</li> + <li>img</li> + </ul></li> + </ul><p>(The duplicate occurrence of "http://example.com/color" is not included + in the list.)</p> + + </div><h3 id="encoding-microdata"><span class="secno">5.2 </span>Encoding microdata</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="the-microdata-model"><span class="secno">5.2.1 </span>The microdata model</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The microdata model consists of groups of name-value pairs known + as <a href="#concept-item" title="concept-item">items</a>.</p><p>Each group is known as an <a href="#concept-item" title="concept-item">item</a>. Each <a href="#concept-item" title="concept-item">item</a> can have an <a href="#item-type">item type</a>, + a <a href="#global-identifier">global identifier</a> (if the <a href="#item-type">item type</a> + <a href="#support-global-identifiers-for-items" title="support global identifiers for items">supports global + identifiers for its items</a>), and a list of name-value + pairs. Each name in the name-value pair is known as a <a href="#the-properties-of-an-item" title="the properties of an item">property</a>, and each <a href="#the-properties-of-an-item" title="the properties of an item">property</a> has one or more + <a href="#concept-property-value" title="concept-property-value">values</a>. Each <a href="#concept-property-value" title="concept-property-value">value</a> is either a string or itself a group of + name-value pairs (an <a href="#concept-item" title="concept-item">item</a>).</p><p>An <a href="#concept-item" title="concept-item">item</a> is said to be a + <dfn id="typed-item">typed item</dfn> when either it has an <a href="#item-type">item type</a>, + or it is the <a href="#concept-property-value" title="concept-property-value">value</a> of a <a href="#the-properties-of-an-item" title="the properties of an + item">property</a> of a <a href="#typed-item">typed item</a>. The + <dfn id="relevant-type">relevant type</dfn> for a <a href="#typed-item">typed item</a> is the <a href="#concept-item" title="concept-item">item</a>'s <a href="#item-type">item type</a>, if it has + one, or else is the <a href="#relevant-type">relevant type</a> of the <a href="#concept-item" title="concept-item">item</a> for which it is a <a href="#the-properties-of-an-item" title="the + properties of an item">property</a>'s <a href="#concept-property-value" title="concept-property-value">value</a>.</p><h4 id="items"><span class="secno">5.2.2 </span>Items</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Every <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> may have an + <dfn id="attr-itemscope" title="attr-itemscope"><code>itemscope</code></dfn> attribute + specified. The <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> + attribute is a <a href="infrastructure.html#boolean-attribute">boolean attribute</a>.</p><p>An element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> + attribute specified creates a new <dfn id="concept-item" title="concept-item">item</dfn>, a group of name-value pairs.</p><hr><p>Elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> + attribute may have an <dfn id="attr-itemtype" title="attr-itemtype"><code>itemtype</code></dfn> attribute + specified, to give the <a href="#item-type">item type</a> of the <a href="#concept-item" title="concept-item">item</a>.</p><p>The <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute, if + specified, must have a value that is a <a href="infrastructure.html#valid-url">valid URL</a> that + is an <a href="infrastructure.html#absolute-url">absolute URL</a> for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a + <a href="infrastructure.html#prefix-match">prefix match</a>.</p><!-- we disallow that prefix so that + we have somewhere to put future extensions, e.g. if we ever support + short type names --><p>The <dfn id="item-type">item type</dfn> of an <a href="#concept-item" title="concept-item">item</a> is the value of its element's <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute, if it has one and + its value is not the empty string. If the <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute is missing or its + value is the empty string, the <a href="#concept-item" title="concept-item">item</a> is said to have no <a href="#item-type">item + type</a>.</p><p>The <a href="#item-type">item type</a> must be a type defined in an <a href="#other-applicable-specifications" title="other applicable specifications">applicable + specification</a>.</p><p>The <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute must + not be specified on elements that do not have an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute specified.</p><hr><p>Elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> + attribute and an <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> + attribute that references a vocabulary that is defined to + <dfn id="support-global-identifiers-for-items">support global identifiers for items</dfn> may also have an + <dfn id="attr-itemid" title="attr-itemid"><code>itemid</code></dfn> attribute + specified, to give a global identifier for the <a href="#concept-item" title="concept-item">item</a>, so that it can be related to other + <a href="#concept-item" title="concept-item">items</a> on pages elsewhere on the + Web.</p><p>The <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute, if + specified, must have a value that is a <a href="infrastructure.html#valid-url">valid URL</a>.</p><p>The <dfn id="global-identifier">global identifier</dfn> of an <a href="#concept-item" title="concept-item">item</a> is the value of its element's <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute, if it has one, <a href="#resolve-a-url" title="resolve a url">resolved</a> relative to the element on + which the attribute is specified. If the <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute is missing or if + resolving it fails, it is said to have no <a href="#global-identifier">global + identifier</a>.</p><p>The <code title="attr-itemid"><a href="#attr-itemid">itemid</a></code> attribute must not be + specified on elements that do not have both an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute and an <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute specified, and must + not be specified on elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute whose <code title="attr-itemtype"><a href="#attr-itemtype">itemtype</a></code> attribute specifies a + vocabulary that does not <a href="#support-global-identifiers-for-items">support global identifiers for + items</a>, as defined by that vocabulary's specification.</p><hr><p>Elements with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> + attribute may have an <dfn id="attr-itemref" title="attr-itemref"><code>itemref</code></dfn> attribute specified, + to give a list of additional elements to crawl to find the + name-value pairs of the <a href="#concept-item" title="concept-item">item</a>.</p><p>The <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute, if + specified, must have a value that is an <a href="infrastructure.html#unordered-set-of-unique-space-separated-tokens">unordered set of + unique space-separated tokens</a> consisting of <a href="dom.html#concept-id" title="concept-ID">IDs</a> of elements in the same document; for + each one, the element's nearest ancestor element with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute specified, if any, + must not be the element with the referencing <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute specified.</p><p>The <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute must not + be specified on elements that do not have an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute specified.</p><h4 id="names:-the-itemprop-attribute"><span class="secno">5.2.3 </span>Names: the <dfn title="attr-itemprop"><code>itemprop</code></dfn> attribute</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Every <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> may have an + <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute specified, if + doing so <a href="#the-properties-of-an-item" title="the properties of an item">adds a + property</a> to one or more <a href="#concept-item" title="concept-item">items</a> (as defined below).</p><p>The <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute, if + specified, must have a value that is an <a href="infrastructure.html#unordered-set-of-unique-space-separated-tokens">unordered set of + unique space-separated tokens</a> representing the names of the + name-value pairs that it adds. The attribute's value must have at + least one token.</p><p>Each token must be either:</p><ul><li>A <a href="infrastructure.html#valid-url">valid URL</a> that is an <a href="infrastructure.html#absolute-url">absolute URL</a> + for which the string "<code title="">http://www.w3.org/1999/xhtml/microdata#</code>" is not a + <a href="infrastructure.html#prefix-match">prefix match</a>, or</li> + + <li>If the item is a <a href="#typed-item">typed item</a>: a <dfn id="defined-property-name">defined + property name</dfn> allowed in this situation according to the + specification that defines the <a href="#relevant-type">relevant type</a> for the + item, or</li> + + <li>If the item is not a <a href="#typed-item">typed item</a>: a string that + contains no U+002E FULL STOP characters (.) and no U+003A COLON + characters (:).</li> + + </ul><p>When an element with an <code title="concept-itemprop">itemprop</code> attribute <a href="#the-properties-of-an-item" title="the + properties of an item">adds a property</a> to multiple <a href="#concept-item" title="concept-item">items</a>, the requirement above regarding + the tokens applies for each <a href="#concept-item" title="concept-item">item</a> + individually.</p><!-- + + e.g.: + + <div itemscope itemtype="http://example.com/a"> <ref refid="x"> </div> + <div itemscope itemtype="http://example.com/b"> <ref refid="x"> </div> + <meta id="x" itemprop="z" content=""> + + "z" had better be valid for both http://example.com/a and http://example.com/b + + --><p>The <dfn id="property-names">property names</dfn> of an element are the tokens that + the element's <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute + is found to contain when its value is <a href="#split-a-string-on-spaces" title="split a string on + spaces">split on spaces</a>, with the order preserved but with + duplicates removed (leaving only the first occurrence of each + name).</p><p>Within an <a href="#concept-item" title="concept-item">item</a>, the properties + are unordered with respect to each other, except for properties with + the same name, which are ordered in the order they are given by the + algorithm that defines <a href="#the-properties-of-an-item">the properties of an item</a>.</p><div class="example"> + + <p>In the following example, the "a" property has the values "1" + and "2", <em>in that order</em>, but whether the "a" property comes + before the "b" property or not is not important:</p> + + <pre><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + + <p>Thus, the following is equivalent:</p> + + <pre><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + + <p>As is the following:</p> + + <pre><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + + <p>And the following:</p> + + <pre><div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +<div id="x"> + <p itemprop="a">1</p> +</div> +</pre> + + </div><h4 id="values"><span class="secno">5.2.4 </span>Values</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="concept-property-value" title="concept-property-value">property value</dfn> of a + name-value pair added by an element with an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute depends on the + element, as follows:</p><dl><dt>If the element also has an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute</dt> + + <dd><p>The value is the <a href="#concept-item" title="concept-item">item</a> + created by the element.</p></dd> + + + <dt>If the element is a <code><a href="semantics.html#meta">meta</a></code> element</dt> + + <dd><p>The value is the value of the element's <code title="attr-content">content</code> attribute, if any, or the empty + string if there is no such attribute.</p></dd> + + + <dt>If the element is an <code><a href="video.html#audio">audio</a></code>, <code><a href="text-level-semantics.html#the-embed-element">embed</a></code>, + <code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code>, <code><a href="text-level-semantics.html#the-img-element">img</a></code>, <code><a href="video.html#the-source-element">source</a></code>, or + <code><a href="video.html#video">video</a></code> element</dt> + + <dd><p>The value is the <a href="infrastructure.html#absolute-url">absolute URL</a> that results from + <a href="#resolve-a-url" title="resolve a url">resolving</a> the value of the + element's <code title="">src</code> attribute relative to the + element at the time the attribute is set, or the empty string if + there is no such attribute or if <a href="#resolve-a-url" title="resolve a + url">resolving</a> it results in an error.</p></dd> + + + <dt>If the element is an <code><a href="text-level-semantics.html#the-a-element">a</a></code>, <code><a href="the-canvas-element.html#the-area-element">area</a></code>, or + <code><a href="semantics.html#the-link-element">link</a></code> element</dt> + + <dd><p>The value is the <a href="infrastructure.html#absolute-url">absolute URL</a> that results from + <a href="#resolve-a-url" title="resolve a url">resolving</a> the value of the + element's <code title="">href</code> attribute relative to the + element at the time the attribute is set, or the empty string if + there is no such attribute or if <a href="#resolve-a-url" title="resolve a + url">resolving</a> it results in an error.</p></dd> + + + <dt>If the element is an <code><a href="text-level-semantics.html#the-object-element">object</a></code> element</dt> + + <dd><p>The value is the <a href="infrastructure.html#absolute-url">absolute URL</a> that results from + <a href="#resolve-a-url" title="resolve a url">resolving</a> the value of the + element's <code title="">data</code> attribute relative to the + element at the time the attribute is set, or the empty string if + there is no such attribute or if <a href="#resolve-a-url" title="resolve a + url">resolving</a> it results in an error.</p></dd> + + + <dt>If the element is a <code><a href="text-level-semantics.html#the-time-element">time</a></code> element with a <code title="attr-datetime">datetime</code> attribute</dt> + + <dd><p>The value is the value of the element's <code title="attr-datetime">datetime</code> attribute.</p></dd> + + + <dt>Otherwise</dt> + + <dd><p>The value is the element's + <code>textContent</code>.</p></dd> + + </dl><p>The <dfn id="url-property-elements">URL property elements</dfn> are the <code><a href="text-level-semantics.html#the-a-element">a</a></code>, + <code><a href="the-canvas-element.html#the-area-element">area</a></code>, <code><a href="video.html#audio">audio</a></code>, <code><a href="text-level-semantics.html#the-embed-element">embed</a></code>, + <code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code>, <code><a href="text-level-semantics.html#the-img-element">img</a></code>, <code><a href="semantics.html#the-link-element">link</a></code>, + <code><a href="text-level-semantics.html#the-object-element">object</a></code>, <code><a href="video.html#the-source-element">source</a></code>, and <code><a href="video.html#video">video</a></code> + elements.</p><p>If a property's <a href="#concept-property-value" title="concept-property-value">value</a> + is an <a href="infrastructure.html#absolute-url">absolute URL</a>, the property must be specified + using an <a href="#url-property-elements" title="URL property elements">URL property + element</a>.</p><h4 id="associating-names-with-items"><span class="secno">5.2.5 </span>Associating names with items</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>To find <dfn id="the-properties-of-an-item">the properties of an item</dfn>, the user agent must + run the following steps:</p><ol><li><p>Let <var title="">root</var> be the element with the <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute.</p></li> + + <li><p>Let <var title="">pending</var> be a stack of elements + initially containing the child elements of <var title="">root</var>, if any, in <a href="infrastructure.html#tree-order">tree order</a> (so that + the first child element of <var title="">root</var> will be the + first one to be popped from the stack). This list will be the one + that holds the elements that still need to be crawled.</p></li> + + <li><p>Let <var title="">properties</var> be an empty list of + elements. This list will be the result of the algorithm: a list of + elements with properties that apply to <var title="">root</var>.</p></li> + + <li><p>If <var title="">root</var> has an <code title="attr-itemref"><a href="#attr-itemref">itemref</a></code> attribute, <a href="#split-a-string-on-spaces" title="split a + string on spaces">split the value of that <code title="attr-itemref">itemref</code> attribute on spaces</a>. For + each resulting token, <var title="">ID</var>, if there is an + element in the document with the <a href="dom.html#concept-id" title="concept-ID">ID</a> + <var title="">ID</var>, then push the first such element onto <var title="">pending</var>.</p></li> + + <li> + + <p>For each element <var title="">candidate</var> in <var title="">pending</var>, run the following substeps:</p> + + <ol><li><p>Let <var title="">scope</var> be <var title="">candidate</var>'s nearest ancestor element with an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute + specified.</p></li> + + <li><p>If one of the other elements in <var title="">pending</var> + is also <var title="">candidate</var>, then remove <var title="">candidate</var> from <var title="">pending</var> + (i.e. remove duplicates).</p></li> + + <li><p>Otherwise, if one of the other elements in <var title="">pending</var> is an ancestor element of <var title="">candidate</var>, and that element is <var title="">scope</var>, then remove <var title="">candidate</var> + from <var title="">pending</var>.</p></li> + + <li><p>Otherwise, if one of the other elements in <var title="">pending</var> is an ancestor element of <var title="">candidate</var>, and that element also has <var title="">scope</var> as its nearest ancestor element with an + <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute + specified, then remove <var title="">candidate</var> from <var title="">pending</var>.</p></li> + + </ol></li> + + <li><p>Sort <var title="">pending</var> in <a href="infrastructure.html#tree-order">tree + order</a>.</p></li> + + <li><p><i>Loop</i>: Pop the top element from <var title="">pending</var> and let <var title="">current</var> be that + element.</p></li> + + <li><p>If <var title="">current</var> has an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute, then append <var title="">current</var> to <var title="">properties</var>.</p></li> + + <li><p>If <var title="">current</var> does not have an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute, and <var title="">current</var> is an element with child elements, then: + push all the child elements of <var title="">current</var> onto + <var title="">pending</var>, in <a href="infrastructure.html#tree-order">tree order</a> (so the first + child of <var title="">current</var> will be the next element to be + popped from <var title="">pending</var>).</p></li> + + <li><p><i>End of loop</i>: If <var title="">pending</var> is not + empty, return to the step marked <i>loop</i>.</p></li> + + <li><p>Return <var title="">properties</var>. That is the list of + <a href="#the-properties-of-an-item" title="the properties of an item">properties of the + item</a> <var title="">root</var>. By definition, this list is + in <a href="infrastructure.html#tree-order">tree order</a>.</p></li> + + </ol><p>A document must not contain any elements that have an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute that would not be + found to be a property of any of the <a href="#concept-item" title="concept-item">items</a> in that document were their <a href="#the-properties-of-an-item" title="the properties of an item">properties</a> all to be + determined.</p><p>An <a href="#concept-item" title="concept-item">item</a> is a <dfn id="top-level-microdata-items" title="top-level microdata items">top-level microdata item</dfn> if + its element does not have an <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute.</p><h4 id="examples-1"><span class="secno">5.2.6 </span>Examples</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Here is an example of some HTML using Microdata to express RDF + statements:</p><pre><dl itemscope + itemtype="http://purl.org/vocab/frbr/core#Work" + itemid="http://purl.oreilly.com/works/45U8QJGZSQKDH8N"> + <dt>Title</dt> + <dd><cite itemprop="http://purl.org/dc/terms/title">Just a Geek</cite></dd> + <dt>By</dt> + <dd><span itemprop="http://purl.org/dc/terms/creator">Wil Wheaton</span></dd> + <dt>Format</dt> + <dd itemprop="http://purl.org/vocab/frbr/core#realization" + itemscope + itemtype="http://purl.org/vocab/frbr/core#Expression" + itemid="http://purl.oreilly.com/products/9780596007683.BOOK"> + <link itemprop="http://purl.org/dc/terms/type" href="http://purl.oreilly.com/product-types/BOOK"> + Print + </dd> + <dd itemprop="http://purl.org/vocab/frbr/core#realization" + itemscope + itemtype="http://purl.org/vocab/frbr/core#Expression" + itemid="http://purl.oreilly.com/products/9780596802189.EBOOK"> + <link itemprop="http://purl.org/dc/terms/type" href="http://purl.oreilly.com/product-types/EBOOK"> + Ebook + </dd> +</dl></pre><p>This is equivalent to the following Turtle:</p><pre>@prefix dc: <http://purl.org/dc/terms/> . +@prefix frbr: <http://purl.org/vocab/frbr/core#> . + +<http://purl.oreilly.com/works/45U8QJGZSQKDH8N> a frbr:Work ; + dc:creator "Wil Wheaton"@en ; + dc:title "Just a Geek"@en ; + frbr:realization <http://purl.oreilly.com/products/9780596007683.BOOK>, + <http://purl.oreilly.com/products/9780596802189.EBOOK> . + +<http://purl.oreilly.com/products/9780596007683.BOOK> a frbr:Expression ; + dc:type <http://purl.oreilly.com/product-types/BOOK> . + +<http://purl.oreilly.com/products/9780596802189.EBOOK> a frbr:Expression ; + dc:type <http://purl.oreilly.com/product-types/EBOOK> .</pre><h3 id="microdata-dom-api"><span class="secno">5.3 </span>Microdata DOM API</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-getItems"><a href="#dom-document-getitems">getItems</a></code>( [ <var title="">types</var> ] )</dt> + + <dd> + + <p>Returns a <code>NodeList</code> of the elements in the <code>Document</code> that create <a href="#concept-item" title="concept-item">items</a>, that are not part of other <a href="#concept-item" title="concept-item">items</a>, and that are of one of the types given in the argument, if any are listed.</p> + + <p>The <var title="">types</var> argument is interpreted as a space-separated list of types.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-properties"><a href="#dom-properties">properties</a></code></dt> + + <dd> + + <p>If the element has an <code title="attr-itemscope"><a href="#attr-itemscope">itemscope</a></code> attribute, returns an + <code><a href="infrastructure.html#htmlpropertiescollection">HTMLPropertiesCollection</a></code> object with all the element's + properties. Otherwise, an empty + <code><a href="infrastructure.html#htmlpropertiescollection">HTMLPropertiesCollection</a></code> object.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-itemValue"><a href="#dom-itemvalue">itemValue</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the element's <a href="#concept-property-value" title="concept-property-value">value</a>.</p> + + <p>Can be set, to change the element's <a href="#concept-property-value" title="concept-property-value">value</a>. Setting the <a href="#concept-property-value" title="concept-property-value">value</a> when the element has + no <code title="attr-itemprop"><a href="#names:-the-itemprop-attribute">itemprop</a></code> attribute or when + the element's value is an <a href="#concept-item" title="concept-item">item</a> + throws an <code><a href="infrastructure.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception.</p> + + </dd> + + </dl></body></html> \ No newline at end of file Index: Overview.html =================================================================== RCS file: /sources/public/html5/spec-author-view/Overview.html,v retrieving revision 1.497 retrieving revision 1.498 diff -u -d -r1.497 -r1.498 --- Overview.html 7 Nov 2009 07:19:48 -0000 1.497 +++ Overview.html 7 Nov 2009 07:26:50 -0000 1.498 @@ -0,0 +1,815 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>HTML5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"></head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> + + <h2 class="no-num no-toc" id="editor-s-draft-27-october-2009">Editor's Draft 27 October 2009</h2> + <dl><dt>Latest Published Version:</dt> + <dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd> + <dt>Latest Editor's Draft:</dt> + <dd><a href="http://www.w3.org/html/wg/html5/">http://www.w3.org/html/wg/html5/</a></dd> +<!-- ZZZ: add the new version after it has shipped --> + <dt>Previous Versions:</dt> + <dd><a href="http://www.w3.org/TR/2009/WD-html5-20090825/">http://www.w3.org/TR/2009/WD-html5-20090825/</a></dd> + <dd><a href="http://www.w3.org/TR/2009/WD-html5-20090423/">http://www.w3.org/TR/2009/WD-html5-20090423/</a></dd> + <dd><a href="http://www.w3.org/TR/2009/WD-html5-20090212/">http://www.w3.org/TR/2009/WD-html5-20090212/</a></dd> + <dd><a href="http://www.w3.org/TR/2008/WD-html5-20080610/">http://www.w3.org/TR/2008/WD-html5-20080610/</a></dd> + <dd><a href="http://www.w3.org/TR/2008/WD-html5-20080122/">http://www.w3.org/TR/2008/WD-html5-20080122/</a></dd> +<!-- :ZZZ --> + <dt>Editors:</dt> + <dd><a href="mailto:http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> + © 2009 <a href="http://www.w3.org/"><abbr title="World Wide + Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts + Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><abbr title="European Research + Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C + <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, + <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> + and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document + use</a> rules apply.</p> + <!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --> + <p class="alt copyright">The <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">WHATWG + version</a> of this specification is available under a license that + permits reuse of the specification text.</p> + <!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --> + </div><hr class="top"><h2 class="no-num no-toc" id="abstract">Abstract</h2><p>This specification defines the 5th major revision of the core + language of the World Wide Web: the Hypertext Markup Language + (HTML). In this version, new features are introduced to help Web + application authors, new elements are introduced based on research + into prevailing authoring practices, and special attention has been + given to defining clear conformance criteria for user agents in an + effort to improve interoperability.</p><h2 class="no-num no-toc" id="status-of-this-document">Status of this document</h2><!-- intro boilerplate (required) --><p><em>This section describes the status of this document at the + time of its publication. Other documents may supersede this + document. A list of current W3C publications and the most recently + formally published revision of this technical report can be found in + the <a href="http://www.w3.org/TR/">W3C technical reports index</a> + at http://www.w3.org/TR/.</em></p><!-- where to send feedback (required) --><p>If you wish to make comments regarding this document, please send + them to <a href="mailto:http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>) + + <!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --> + or <a href="mailto:whatwg@whatwg.org">whatwg@whatwg.org</a> (<a href="http://lists.whatwg.org/listinfo.cgi/whatwg-whatwg.org">subscribe</a>, + <a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">archives</a>), + <!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --> + + or submit them using <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG">our + public bug database</a>. + + 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?component=Spec%20bugs&component=Spec%20proposals&product=HTML%20WG&resolution=NEEDSINFO&resolution=LATER&resolution=REMIND&resolution=---&order=bugs.resolution%2Cbugs.priority%2C%20bugs.bug_severity">a + list of all bug reports that the editor has not yet tried to + address</a> and <a href="http://www.w3.org/html/wg/tracker/products/1">a list of issues + for which the chairs have not yet declared a decision</a>. The + editor also maintains <a href="http://www.whatwg.org/issues/">a list + of all e-mails that he has not yet tried to address</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- stability (required) --><p>Implementors should be aware that this specification is not + stable. <strong>Implementors who are not taking part in the + discussions are likely to find the specification changing out from + under them in incompatible ways.</strong> Vendors interested in + implementing this specification before it eventually reaches the + Candidate Recommendation stage should join the aforementioned + mailing lists and take part in the discussions.</p><!-- not everyone agrees with html5 (requested before fpwd) --><p>The publication of this document by the W3C as a W3C Working + Draft does not imply that all of the participants in the W3C HTML + working group endorse the contents of the specification. Indeed, for + any section of the specification, one can usually find many members + of the working group or of the W3C as a whole who object strongly to + the current text, the existence of the section at all, or the idea + that the working group should even spend time discussing the concept + of that section.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- version history or list of changes (required) --><p>The latest stable version of the editor's draft of this + specification is always available on <a href="http://dev.w3.org/html5/spec/Overview.html">the + W3C CVS server</a> and in the <a href="http://svn.whatwg.org/webapps/">WHATWG Subversion + repository</a>. The <a href="http://www.whatwg.org/specs/web-apps/current-work/">latest + editor's working copy</a> (which may contain unfinished text in + the process of being prepared) is also available.</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 + specification:</p><dl><dt>E-mail notifications of changes</dt> + <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> + <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> + <dt>Real-time notifications of changes:</dt> + <dd>Generated diff-marked HTML versions for each change: <a href="http://twitter.com/HTML5">http://twitter.com/HTML5</a></dd> + <dd>All (non-editorial) changes to the spec source: <a href="http://twitter.com/WHATWG">http://twitter.com/WHATWG</a></dd> + <dt>Browsable version-control record of all changes:</dt> + <dd>CVSWeb interface with side-by-side diffs: <a href="http://dev.w3.org/cvsweb/html5/spec/Overview.html">http://dev.w3.org/cvsweb/html5/spec/Overview.html</a></dd> + <dd>Annotated summary with unified diffs: <a href="http://html5.org/tools/web-apps-tracker">http://html5.org/tools/web-apps-tracker</a></dd> + <dd>Raw Subversion interface: <code>svn checkout http://svn.whatwg.org/webapps/</code></dd> + </dl><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- status of document, group responsible (required) --><p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working + Group</a> is the W3C working group responsible for this + specification's progress along the W3C Recommendation + track. + + This specification is the 27 October 2009 Editor's Draft. + </p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- relationship to other work (required) --><p>This specification is also being produced by the <a href="http://www.whatwg.org/">WHATWG</a>. The two specifications are + identical from the table of contents onwards.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) --><p>This specification is intended to replace (be a new version of) + what was previously the HTML4, XHTML1, and DOM2 HTML + specifications.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- required patent boilerplate --><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 + 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 + any patent disclosures</a> made in connection with the deliverables + of the group; that page also includes instructions for disclosing a + patent. An individual who has actual knowledge of a patent which the + individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential + Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section + 6 of the W3C Patent Policy</a>.</p><h2 class="no-num no-toc" id="contents">Table of contents</h2> +<!--begin-toc--> +<ol class="toc"><li><a href="introduction.html#introduction"><span class="secno">1 </span>Introduction</a> + <ol><li><a href="introduction.html#background"><span class="secno">1.1 </span>Background</a></li> + <li><a href="introduction.html#audience"><span class="secno">1.2 </span>Audience</a></li> + <li><a href="introduction.html#scope"><span class="secno">1.3 </span>Scope</a></li> + <li><a href="introduction.html#history-1"><span class="secno">1.4 </span>History</a></li> + <li><a href="introduction.html#design-notes"><span class="secno">1.5 </span>Design notes</a> + <ol><li><a href="introduction.html#serializability-of-script-execution"><span class="secno">1.5.1 </span>Serializability of script execution</a></li> + <li><a href="introduction.html#compliance-with-other-specifications"><span class="secno">1.5.2 </span>Compliance with other specifications</a></li></ol></li> + <li><a href="introduction.html#html-vs-xhtml"><span class="secno">1.6 </span>HTML vs XHTML</a></li> + <li><a href="introduction.html#structure-of-this-specification"><span class="secno">1.7 </span>Structure of this specification</a> + <ol><li><a href="introduction.html#how-to-read-this-specification"><span class="secno">1.7.1 </span>How to read this specification</a></li> + <li><a href="introduction.html#typographic-conventions"><span class="secno">1.7.2 </span>Typographic conventions</a></li></ol></li> + <li><a href="introduction.html#a-quick-introduction-to-html"><span class="secno">1.8 </span>A quick introduction to HTML</a></li> + <li><a href="introduction.html#recommended-reading"><span class="secno">1.9 </span>Recommended reading</a></li></ol></li> + <li><a href="infrastructure.html#infrastructure"><span class="secno">2 </span>Common infrastructure</a> + <ol><li><a href="infrastructure.html#terminology"><span class="secno">2.1 </span>Terminology</a> + <ol><li><a href="infrastructure.html#resources"><span class="secno">2.1.1 </span>Resources</a></li> + <li><a href="infrastructure.html#xml"><span class="secno">2.1.2 </span>XML</a></li> + <li><a href="infrastructure.html#dom-trees"><span class="secno">2.1.3 </span>DOM trees</a></li> + <li><a href="infrastructure.html#scripting-0"><span class="secno">2.1.4 </span>Scripting</a></li> + <li><a href="infrastructure.html#plugins"><span class="secno">2.1.5 </span>Plugins</a></li> + <li><a href="infrastructure.html#character-encodings"><span class="secno">2.1.6 </span>Character encodings</a></li></ol></li> + <li><a href="infrastructure.html#conformance-requirements"><span class="secno">2.2 </span>Conformance requirements</a></li> + <li><a href="infrastructure.html#case-sensitivity-and-string-comparison"><span class="secno">2.3 </span>Case-sensitivity and string comparison</a></li> + <li><a href="infrastructure.html#common-microsyntaxes"><span class="secno">2.4 </span>Common microsyntaxes</a> + <ol><li><a href="infrastructure.html#boolean-attributes"><span class="secno">2.4.1 </span>Boolean attributes</a></li> + <li><a href="infrastructure.html#keywords-and-enumerated-attributes"><span class="secno">2.4.2 </span>Keywords and enumerated attributes</a></li> + <li><a href="infrastructure.html#numbers"><span class="secno">2.4.3 </span>Numbers</a> + <ol><li><a href="infrastructure.html#non-negative-integers"><span class="secno">2.4.3.1 </span>Non-negative integers</a></li> + <li><a href="infrastructure.html#signed-integers"><span class="secno">2.4.3.2 </span>Signed integers</a></li> + <li><a href="infrastructure.html#real-numbers"><span class="secno">2.4.3.3 </span>Real numbers</a></li> + <li><a href="infrastructure.html#ratios"><span class="secno">2.4.3.4 </span>Ratios</a></li> + <li><a href="infrastructure.html#lists-of-integers"><span class="secno">2.4.3.5 </span>Lists of integers</a></li></ol></li> + <li><a href="infrastructure.html#dates-and-times"><span class="secno">2.4.4 </span>Dates and times</a> + <ol><li><a href="infrastructure.html#months"><span class="secno">2.4.4.1 </span>Months</a></li> + <li><a href="infrastructure.html#dates"><span class="secno">2.4.4.2 </span>Dates</a></li> + <li><a href="infrastructure.html#times"><span class="secno">2.4.4.3 </span>Times</a></li> + <li><a href="infrastructure.html#local-dates-and-times"><span class="secno">2.4.4.4 </span>Local dates and times</a></li> + <li><a href="infrastructure.html#global-dates-and-times"><span class="secno">2.4.4.5 </span>Global dates and times</a></li> + <li><a href="infrastructure.html#weeks"><span class="secno">2.4.4.6 </span>Weeks</a></li> + <li><a href="infrastructure.html#vaguer-moments-in-time"><span class="secno">2.4.4.7 </span>Vaguer moments in time</a></li></ol></li> + <li><a href="infrastructure.html#colors"><span class="secno">2.4.5 </span>Colors</a></li> + <li><a href="infrastructure.html#space-separated-tokens"><span class="secno">2.4.6 </span>Space-separated tokens</a></li> + <li><a href="infrastructure.html#comma-separated-tokens"><span class="secno">2.4.7 </span>Comma-separated tokens</a></li> + <li><a href="infrastructure.html#syntax-references"><span class="secno">2.4.8 </span>References</a></li> + <li><a href="infrastructure.html#mq"><span class="secno">2.4.9 </span>Media queries</a></li></ol></li> + <li><a href="infrastructure.html#urls"><span class="secno">2.5 </span>URLs</a> + <ol><li><a href="infrastructure.html#terminology-0"><span class="secno">2.5.1 </span>Terminology</a></li> + <li><a href="infrastructure.html#interfaces-for-url-manipulation"><span class="secno">2.5.2 </span>Interfaces for URL manipulation</a></li></ol></li> + <li><a href="infrastructure.html#common-dom-interfaces"><span class="secno">2.6 </span>Common DOM interfaces</a> + <ol><li><a href="infrastructure.html#reflecting-content-attributes-in-idl-attributes"><span class="secno">2.6.1 </span>Reflecting content attributes in IDL attributes</a></li> + <li><a href="infrastructure.html#collections-0"><span class="secno">2.6.2 </span>Collections</a> + <ol><li><a href="infrastructure.html#htmlcollection-0"><span class="secno">2.6.2.1 </span>HTMLCollection</a></li> + <li><a href="infrastructure.html#htmlallcollection-0"><span class="secno">2.6.2.2 </span>HTMLAllCollection</a></li> + <li><a href="infrastructure.html#htmlformcontrolscollection-0"><span class="secno">2.6.2.3 </span>HTMLFormControlsCollection</a></li> + <li><a href="infrastructure.html#htmloptionscollection-0"><span class="secno">2.6.2.4 </span>HTMLOptionsCollection</a></li> + <li><a href="infrastructure.html#htmlpropertiescollection-0"><span class="secno">2.6.2.5 </span>HTMLPropertiesCollection</a></li></ol></li> + <li><a href="infrastructure.html#domtokenlist-0"><span class="secno">2.6.3 </span>DOMTokenList</a></li> + <li><a href="infrastructure.html#domsettabletokenlist-0"><span class="secno">2.6.4 </span>DOMSettableTokenList</a></li> + <li><a href="infrastructure.html#domstringmap-0"><span class="secno">2.6.5 </span>DOMStringMap</a></li> + <li><a href="infrastructure.html#dom-feature-strings"><span class="secno">2.6.6 </span>DOM feature strings</a></li> + <li><a href="infrastructure.html#exceptions"><span class="secno">2.6.7 </span>Exceptions</a></li></ol></li></ol></li> + <li><a href="dom.html#dom"><span class="secno">3 </span>Semantics, structure, and APIs of HTML documents</a> + <ol><li><a href="dom.html#documents"><span class="secno">3.1 </span>Documents</a> + <ol><li><a href="dom.html#documents-in-the-dom"><span class="secno">3.1.1 </span>Documents in the DOM</a></li> + <li><a href="dom.html#security"><span class="secno">3.1.2 </span>Security</a></li> + <li><a href="dom.html#resource-metadata-management"><span class="secno">3.1.3 </span>Resource metadata management</a></li> + <li><a href="dom.html#dom-tree-accessors"><span class="secno">3.1.4 </span>DOM tree accessors</a></li> + <li><a href="dom.html#creating-documents"><span class="secno">3.1.5 </span>Creating documents</a></li></ol></li> + <li><a href="dom.html#elements"><span class="secno">3.2 </span>Elements</a> + <ol><li><a href="dom.html#semantics-0"><span class="secno">3.2.1 </span>Semantics</a></li> + <li><a href="dom.html#elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</a></li> + <li><a href="dom.html#global-attributes"><span class="secno">3.2.3 </span>Global attributes</a> + <ol><li><a href="dom.html#the-id-attribute"><span class="secno">3.2.3.1 </span>The <code>id</code> attribute</a></li> + <li><a href="dom.html#the-title-attribute"><span class="secno">3.2.3.2 </span>The <code>title</code> attribute</a></li> + <li><a href="dom.html#the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang">lang</code> and <code title="attr-xml-lang">xml:lang</code> attributes</a></li> + <li><a href="dom.html#the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <code>xml:base</code> + attribute (XML only)</a></li> + <li><a href="dom.html#the-dir-attribute"><span class="secno">3.2.3.5 </span>The <code>dir</code> attribute</a></li> + <li><a href="dom.html#classes"><span class="secno">3.2.3.6 </span>The <code>class</code> attribute</a></li> + <li><a href="dom.html#the-style-attribute"><span class="secno">3.2.3.7 </span>The <code>style</code> attribute</a></li> + <li><a href="dom.html#embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span>Embedding custom non-visible data</a></li></ol></li> + <li><a href="dom.html#element-definitions"><span class="secno">3.2.4 </span>Element definitions</a></li> + <li><a href="dom.html#content-models"><span class="secno">3.2.5 </span>Content models</a> + <ol><li><a href="dom.html#kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</a> + <ol><li><a href="dom.html#metadata-content-0"><span class="secno">3.2.5.1.1 </span>Metadata content</a></li> + <li><a href="dom.html#flow-content-0"><span class="secno">3.2.5.1.2 </span>Flow content</a></li> + <li><a href="dom.html#sectioning-content-0"><span class="secno">3.2.5.1.3 </span>Sectioning content</a></li> + <li><a href="dom.html#heading-content-0"><span class="secno">3.2.5.1.4 </span>Heading content</a></li> + <li><a href="dom.html#phrasing-content-0"><span class="secno">3.2.5.1.5 </span>Phrasing content</a></li> + <li><a href="embedded-content-0.html#embedded-content-0"><span class="secno">3.2.5.1.6 </span>Embedded content</a></li> + <li><a href="embedded-content-0.html#interactive-content-0"><span class="secno">3.2.5.1.7 </span>Interactive content</a></li></ol></li> + <li><a href="embedded-content-0.html#transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</a></li> + <li><a href="embedded-content-0.html#paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</a></li></ol></li> + <li><a href="embedded-content-0.html#annotations-for-assistive-technology-products-aria"><span class="secno">3.2.6 </span>Annotations for assistive technology products (ARIA)</a></li></ol></li> + <li><a href="embedded-content-0.html#apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</a></li> + <li><a href="embedded-content-0.html#dynamic-markup-insertion"><span class="secno">3.4 </span>Dynamic markup insertion</a> + <ol><li><a href="embedded-content-0.html#opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</a></li> + <li><a href="embedded-content-0.html#closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</a></li> + <li><a href="embedded-content-0.html#document.write"><span class="secno">3.4.3 </span><code title="dom-document-write">document.write()</code></a></li> + <li><a href="embedded-content-0.html#document.writeln"><span class="secno">3.4.4 </span><code title="dom-document-writeln">document.writeln()</code></a></li> + <li><a href="embedded-content-0.html#innerhtml"><span class="secno">3.4.5 </span><code title="dom-innerHTML">innerHTML</code></a></li> + <li><a href="embedded-content-0.html#outerhtml"><span class="secno">3.4.6 </span><code title="dom-outerHTML">outerHTML</code></a></li> + <li><a href="embedded-content-0.html#insertadjacenthtml"><span class="secno">3.4.7 </span><code title="dom-insertAdjacentHTML">insertAdjacentHTML()</code></a></li></ol></li></ol></li> + <li><a href="semantics.html#semantics"><span class="secno">4 </span>The elements of HTML</a> + <ol><li><a href="semantics.html#the-root-element"><span class="secno">4.1 </span>The root element</a> + <ol><li><a href="semantics.html#the-html-element-0"><span class="secno">4.1.1 </span>The <code>html</code> element</a></li></ol></li> + <li><a href="semantics.html#document-metadata"><span class="secno">4.2 </span>Document metadata</a> + <ol><li><a href="semantics.html#the-head-element-0"><span class="secno">4.2.1 </span>The <code>head</code> element</a></li> + <li><a href="semantics.html#the-title-element-0"><span class="secno">4.2.2 </span>The <code>title</code> element</a></li> + <li><a href="semantics.html#the-base-element"><span class="secno">4.2.3 </span>The <code>base</code> element</a></li> + <li><a href="semantics.html#the-link-element"><span class="secno">4.2.4 </span>The <code>link</code> element</a></li> + <li><a href="semantics.html#meta"><span class="secno">4.2.5 </span>The <code>meta</code> element</a> + <ol><li><a href="semantics.html#standard-metadata-names"><span class="secno">4.2.5.1 </span>Standard metadata names</a></li> + <li><a href="semantics.html#other-metadata-names"><span class="secno">4.2.5.2 </span>Other metadata names</a></li> + <li><a href="semantics.html#pragma-directives"><span class="secno">4.2.5.3 </span>Pragma directives</a></li> + <li><a href="semantics.html#other-pragma-directives"><span class="secno">4.2.5.4 </span>Other pragma directives</a></li> + <li><a href="semantics.html#charset"><span class="secno">4.2.5.5 </span>Specifying the document's character encoding</a></li></ol></li> + <li><a href="semantics.html#the-style-element"><span class="secno">4.2.6 </span>The <code>style</code> element</a></li> + <li><a href="semantics.html#styling"><span class="secno">4.2.7 </span>Styling</a></li></ol></li> + <li><a href="semantics.html#scripting-1"><span class="secno">4.3 </span>Scripting</a> + <ol><li><a href="semantics.html#script"><span class="secno">4.3.1 </span>The <code>script</code> element</a> + <ol><li><a href="semantics.html#scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</a></li> + <li><a href="semantics.html#restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li> + <li><a href="semantics.html#inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span>Inline documentation for external scripts</a></li></ol></li> + <li><a href="semantics.html#the-noscript-element"><span class="secno">4.3.2 </span>The <code>noscript</code> element</a></li></ol></li> + <li><a href="semantics.html#sections"><span class="secno">4.4 </span>Sections</a> + <ol><li><a href="semantics.html#the-body-element-0"><span class="secno">4.4.1 </span>The <code>body</code> element</a></li> + <li><a href="semantics.html#the-section-element"><span class="secno">4.4.2 </span>The <code>section</code> element</a></li> + <li><a href="semantics.html#the-nav-element"><span class="secno">4.4.3 </span>The <code>nav</code> element</a></li> + <li><a href="semantics.html#the-article-element"><span class="secno">4.4.4 </span>The <code>article</code> element</a></li> + <li><a href="semantics.html#the-aside-element"><span class="secno">4.4.5 </span>The <code>aside</code> element</a></li> + <li><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.4.6 </span>The <code>h1</code>, <code>h2</code>, + <code>h3</code>, <code>h4</code>, + <code>h5</code>, and <code>h6</code> + elements</a></li> + <li><a href="semantics.html#the-hgroup-element"><span class="secno">4.4.7 </span>The <code>hgroup</code> element</a></li> + <li><a href="semantics.html#the-header-element"><span class="secno">4.4.8 </span>The <code>header</code> element</a></li> + <li><a href="semantics.html#the-footer-element"><span class="secno">4.4.9 </span>The <code>footer</code> element</a></li> + <li><a href="semantics.html#the-address-element"><span class="secno">4.4.10 </span>The <code>address</code> element</a></li> + <li><a href="semantics.html#headings-and-sections"><span class="secno">4.4.11 </span>Headings and sections</a> + <ol><li><a href="semantics.html#outlines"><span class="secno">4.4.11.1 </span>Creating an outline</a></li></ol></li></ol></li> + <li><a href="semantics.html#grouping-content"><span class="secno">4.5 </span>Grouping content</a> + <ol><li><a href="semantics.html#the-p-element"><span class="secno">4.5.1 </span>The <code>p</code> element</a></li> + <li><a href="semantics.html#the-hr-element"><span class="secno">4.5.2 </span>The <code>hr</code> element</a></li> + <li><a href="semantics.html#the-br-element"><span class="secno">4.5.3 </span>The <code>br</code> element</a></li> + <li><a href="semantics.html#the-pre-element"><span class="secno">4.5.4 </span>The <code>pre</code> element</a></li> + <li><a href="semantics.html#the-blockquote-element"><span class="secno">4.5.5 </span>The <code>blockquote</code> element</a></li> + <li><a href="semantics.html#the-ol-element"><span class="secno">4.5.6 </span>The <code>ol</code> element</a></li> + <li><a href="semantics.html#the-ul-element"><span class="secno">4.5.7 </span>The <code>ul</code> element</a></li> + <li><a href="semantics.html#the-li-element"><span class="secno">4.5.8 </span>The <code>li</code> element</a></li> + <li><a href="semantics.html#the-dl-element"><span class="secno">4.5.9 </span>The <code>dl</code> element</a></li> + <li><a href="semantics.html#the-dt-element"><span class="secno">4.5.10 </span>The <code>dt</code> element</a></li> + <li><a href="semantics.html#the-dd-element"><span class="secno">4.5.11 </span>The <code>dd</code> element</a></li> + <li><a href="semantics.html#the-div-element"><span class="secno">4.5.12 </span>The <code>div</code> element</a></li></ol></li> + <li><a href="text-level-semantics.html#text-level-semantics"><span class="secno">4.6 </span>Text-level semantics</a> + <ol><li><a href="text-level-semantics.html#the-a-element"><span class="secno">4.6.1 </span>The <code>a</code> element</a></li> + <li><a href="text-level-semantics.html#the-em-element"><span class="secno">4.6.2 </span>The <code>em</code> element</a></li> + <li><a href="text-level-semantics.html#the-strong-element"><span class="secno">4.6.3 </span>The <code>strong</code> element</a></li> + <li><a href="text-level-semantics.html#the-small-element"><span class="secno">4.6.4 </span>The <code>small</code> element</a></li> + <li><a href="text-level-semantics.html#the-cite-element"><span class="secno">4.6.5 </span>The <code>cite</code> element</a></li> + <li><a href="text-level-semantics.html#the-q-element"><span class="secno">4.6.6 </span>The <code>q</code> element</a></li> + <li><a href="text-level-semantics.html#the-dfn-element"><span class="secno">4.6.7 </span>The <code>dfn</code> element</a></li> + <li><a href="text-level-semantics.html#the-abbr-element"><span class="secno">4.6.8 </span>The <code>abbr</code> element</a></li> + <li><a href="text-level-semantics.html#the-time-element"><span class="secno">4.6.9 </span>The <code>time</code> element</a></li> + <li><a href="text-level-semantics.html#the-code-element"><span class="secno">4.6.10 </span>The <code>code</code> element</a></li> + <li><a href="text-level-semantics.html#the-var-element"><span class="secno">4.6.11 </span>The <code>var</code> element</a></li> + <li><a href="text-level-semantics.html#the-samp-element"><span class="secno">4.6.12 </span>The <code>samp</code> element</a></li> + <li><a href="text-level-semantics.html#the-kbd-element"><span class="secno">4.6.13 </span>The <code>kbd</code> element</a></li> + <li><a href="text-level-semantics.html#the-sub-and-sup-elements"><span class="secno">4.6.14 </span>The <code>sub</code> and <code>sup</code> elements</a></li> + <li><a href="text-level-semantics.html#the-i-element"><span class="secno">4.6.15 </span>The <code>i</code> element</a></li> + <li><a href="text-level-semantics.html#the-b-element"><span class="secno">4.6.16 </span>The <code>b</code> element</a></li> + <li><a href="text-level-semantics.html#the-mark-element"><span class="secno">4.6.17 </span>The <code>mark</code> element</a></li> + <li><a href="text-level-semantics.html#the-progress-element"><span class="secno">4.6.18 </span>The <code>progress</code> element</a></li> + <li><a href="text-level-semantics.html#the-meter-element"><span class="secno">4.6.19 </span>The <code>meter</code> element</a></li> + <li><a href="text-level-semantics.html#the-ruby-element"><span class="secno">4.6.20 </span>The <code>ruby</code> element</a></li> + <li><a href="text-level-semantics.html#the-rt-element"><span class="secno">4.6.21 </span>The <code>rt</code> element</a></li> + <li><a href="text-level-semantics.html#the-rp-element"><span class="secno">4.6.22 </span>The <code>rp</code> element</a></li> + <li><a href="text-level-semantics.html#the-bdo-element"><span class="secno">4.6.23 </span>The <code>bdo</code> element</a></li> + <li><a href="text-level-semantics.html#the-span-element"><span class="secno">4.6.24 </span>The <code>span</code> element</a></li> + <li><a href="text-level-semantics.html#usage-summary"><span class="secno">4.6.25 </span>Usage summary</a></li></ol></li> + <li><a href="text-level-semantics.html#edits"><span class="secno">4.7 </span>Edits</a> + <ol><li><a href="text-level-semantics.html#the-ins-element"><span class="secno">4.7.1 </span>The <code>ins</code> element</a></li> + <li><a href="text-level-semantics.html#the-del-element"><span class="secno">4.7.2 </span>The <code>del</code> element</a></li> + <li><a href="text-level-semantics.html#attributes-common-to-ins-and-del-elements"><span class="secno">4.7.3 </span>Attributes common to <code>ins</code> and <code>del</code> elements</a></li> + <li><a href="text-level-semantics.html#edits-and-paragraphs"><span class="secno">4.7.4 </span>Edits and paragraphs</a></li> + <li><a href="text-level-semantics.html#edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</a></li></ol></li> + <li><a href="text-level-semantics.html#embedded-content-1"><span class="secno">4.8 </span>Embedded content</a> + <ol><li><a href="text-level-semantics.html#the-figure-element"><span class="secno">4.8.1 </span>The <code>figure</code> element</a></li> + <li><a href="text-level-semantics.html#the-img-element"><span class="secno">4.8.2 </span>The <code>img</code> element</a> + <ol><li><a href="text-level-semantics.html#alt"><span class="secno">4.8.2.1 </span>Requirements for providing text to act as an alternative for images</a> + <ol><li><a href="text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image"><span class="secno">4.8.2.1.1 </span>A link or button containing nothing but the image</a></li> + <li><a href="text-level-semantics.html#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts-diagrams-graphs-maps-illustrations"><span class="secno">4.8.2.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li> + <li><a href="text-level-semantics.html#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons-logos"><span class="secno">4.8.2.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li> + <li><a href="text-level-semantics.html#text-that-has-been-rendered-to-a-graphic-for-typographical-effect"><span class="secno">4.8.2.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li> + <li><a href="text-level-semantics.html#a-graphical-representation-of-some-of-the-surrounding-text"><span class="secno">4.8.2.1.5 </span>A graphical representation of some of the surrounding text</a></li> + <li><a href="text-level-semantics.html#a-purely-decorative-image-that-doesn-t-add-any-information"><span class="secno">4.8.2.1.6 </span>A purely decorative image that doesn't add any information</a></li> + <li><a href="text-level-semantics.html#a-group-of-images-that-form-a-single-larger-picture-with-no-links"><span class="secno">4.8.2.1.7 </span>A group of images that form a single larger picture with no links</a></li> + <li><a href="text-level-semantics.html#a-group-of-images-that-form-a-single-larger-picture-with-links"><span class="secno">4.8.2.1.8 </span>A group of images that form a single larger picture with links</a></li> + <li><a href="text-level-semantics.html#a-key-part-of-the-content"><span class="secno">4.8.2.1.9 </span>A key part of the content</a></li> + <li><a href="text-level-semantics.html#an-image-not-intended-for-the-user"><span class="secno">4.8.2.1.10 </span>An image not intended for the user</a></li> + <li><a href="text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images"><span class="secno">4.8.2.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li> + <li><a href="text-level-semantics.html#general-guidelines"><span class="secno">4.8.2.1.12 </span>General guidelines</a></li></ol></li></ol></li> + <li><a href="text-level-semantics.html#the-iframe-element"><span class="secno">4.8.3 </span>The <code>iframe</code> element</a></li> + <li><a href="text-level-semantics.html#the-embed-element"><span class="secno">4.8.4 </span>The <code>embed</code> element</a></li> + <li><a href="text-level-semantics.html#the-object-element"><span class="secno">4.8.5 </span>The <code>object</code> element</a></li> + <li><a href="text-level-semantics.html#the-param-element"><span class="secno">4.8.6 </span>The <code>param</code> element</a></li> + <li><a href="video.html#video"><span class="secno">4.8.7 </span>The <code>video</code> element</a></li> + <li><a href="video.html#audio"><span class="secno">4.8.8 </span>The <code>audio</code> element</a></li> + <li><a href="video.html#the-source-element"><span class="secno">4.8.9 </span>The <code>source</code> element</a></li> + <li><a href="video.html#media-elements"><span class="secno">4.8.10 </span>Media elements</a> + <ol><li><a href="video.html#error-codes"><span class="secno">4.8.10.1 </span>Error codes</a></li> + <li><a href="video.html#location-of-the-media-resource"><span class="secno">4.8.10.2 </span>Location of the media resource</a></li> + <li><a href="video.html#mime-types"><span class="secno">4.8.10.3 </span>MIME types</a></li> + <li><a href="video.html#network-states"><span class="secno">4.8.10.4 </span>Network states</a></li> + <li><a href="video.html#loading-the-media-resource"><span class="secno">4.8.10.5 </span>Loading the media resource</a></li> + <li><a href="video.html#offsets-into-the-media-resource"><span class="secno">4.8.10.6 </span>Offsets into the media resource</a></li> + <li><a href="video.html#the-ready-states"><span class="secno">4.8.10.7 </span>The ready states</a></li> + <li><a href="video.html#playing-the-media-resource"><span class="secno">4.8.10.8 </span>Playing the media resource</a></li> + <li><a href="video.html#seeking"><span class="secno">4.8.10.9 </span>Seeking</a></li> + <li><a href="video.html#user-interface"><span class="secno">4.8.10.10 </span>User interface</a></li> + <li><a href="video.html#time-ranges"><span class="secno">4.8.10.11 </span>Time ranges</a></li> + <li><a href="video.html#mediaevents"><span class="secno">4.8.10.12 </span>Event summary</a></li></ol></li> + <li><a href="the-canvas-element.html#the-canvas-element"><span class="secno">4.8.11 </span>The <code>canvas</code> element</a> + <ol><li><a href="the-canvas-element.html#the-2d-context"><span class="secno">4.8.11.1 </span>The 2D context</a> + <ol><li><a href="the-canvas-element.html#the-canvas-state"><span class="secno">4.8.11.1.1 </span>The canvas state</a></li> + <li><a href="the-canvas-element.html#transformations"><span class="secno">4.8.11.1.2 </span>Transformations</a></li> + <li><a href="the-canvas-element.html#compositing"><span class="secno">4.8.11.1.3 </span>Compositing</a></li> + <li><a href="the-canvas-element.html#colors-and-styles"><span class="secno">4.8.11.1.4 </span>Colors and styles</a></li> + <li><a href="the-canvas-element.html#line-styles"><span class="secno">4.8.11.1.5 </span>Line styles</a></li> + <li><a href="the-canvas-element.html#shadows"><span class="secno">4.8.11.1.6 </span>Shadows</a></li> + <li><a href="the-canvas-element.html#simple-shapes-rectangles"><span class="secno">4.8.11.1.7 </span>Simple shapes (rectangles)</a></li> + <li><a href="the-canvas-element.html#complex-shapes-paths"><span class="secno">4.8.11.1.8 </span>Complex shapes (paths)</a></li> + <li><a href="the-canvas-element.html#text"><span class="secno">4.8.11.1.9 </span>Text</a></li> + <li><a href="the-canvas-element.html#images"><span class="secno">4.8.11.1.10 </span>Images</a></li> + <li><a href="the-canvas-element.html#pixel-manipulation"><span class="secno">4.8.11.1.11 </span>Pixel manipulation</a></li> + <li><a href="the-canvas-element.html#examples"><span class="secno">4.8.11.1.12 </span>Examples</a></li></ol></li></ol></li> + <li><a href="the-canvas-element.html#the-map-element"><span class="secno">4.8.12 </span>The <code>map</code> element</a></li> + <li><a href="the-canvas-element.html#the-area-element"><span class="secno">4.8.13 </span>The <code>area</code> element</a></li> + <li><a href="the-canvas-element.html#image-maps"><span class="secno">4.8.14 </span>Image maps</a></li> + <li><a href="the-canvas-element.html#mathml"><span class="secno">4.8.15 </span>MathML</a></li> + <li><a href="the-canvas-element.html#svg-0"><span class="secno">4.8.16 </span>SVG</a></li> + <li><a href="the-canvas-element.html#dimension-attributes"><span class="secno">4.8.17 </span>Dimension attributes</a></li></ol></li> + <li><a href="tabular-data.html#tabular-data"><span class="secno">4.9 </span>Tabular data</a> + <ol><li><a href="tabular-data.html#the-table-element"><span class="secno">4.9.1 </span>The <code>table</code> element</a></li> + <li><a href="tabular-data.html#the-caption-element"><span class="secno">4.9.2 </span>The <code>caption</code> element</a></li> + <li><a href="tabular-data.html#the-colgroup-element"><span class="secno">4.9.3 </span>The <code>colgroup</code> element</a></li> + <li><a href="tabular-data.html#the-col-element"><span class="secno">4.9.4 </span>The <code>col</code> element</a></li> + <li><a href="tabular-data.html#the-tbody-element"><span class="secno">4.9.5 </span>The <code>tbody</code> element</a></li> + <li><a href="tabular-data.html#the-thead-element"><span class="secno">4.9.6 </span>The <code>thead</code> element</a></li> + <li><a href="tabular-data.html#the-tfoot-element"><span class="secno">4.9.7 </span>The <code>tfoot</code> element</a></li> + <li><a href="tabular-data.html#the-tr-element"><span class="secno">4.9.8 </span>The <code>tr</code> element</a></li> + <li><a href="tabular-data.html#the-td-element"><span class="secno">4.9.9 </span>The <code>td</code> element</a></li> + <li><a href="tabular-data.html#the-th-element"><span class="secno">4.9.10 </span>The <code>th</code> element</a></li> + <li><a href="tabular-data.html#attributes-common-to-td-and-th-elements"><span class="secno">4.9.11 </span>Attributes common to <code>td</code> and <code>th</code> elements</a></li> + <li><a href="tabular-data.html#examples-0"><span class="secno">4.9.12 </span>Examples</a></li></ol></li> + <li><a href="forms.html#forms"><span class="secno">4.10 </span>Forms</a> + <ol><li><a href="forms.html#the-form-element"><span class="secno">4.10.1 </span>The <code>form</code> element</a></li> + <li><a href="forms.html#the-fieldset-element"><span class="secno">4.10.2 </span>The <code>fieldset</code> element</a></li> + <li><a href="forms.html#the-legend-element"><span class="secno">4.10.3 </span>The <code>legend</code> element</a></li> + <li><a href="forms.html#the-label-element"><span class="secno">4.10.4 </span>The <code>label</code> element</a></li> + <li><a href="forms.html#the-input-element"><span class="secno">4.10.5 </span>The <code>input</code> element</a> + <ol><li><a href="forms.html#states-of-the-type-attribute"><span class="secno">4.10.5.1 </span>States of the <code title="attr-input-type">type</code> attribute</a> + <ol><li><a href="forms.html#hidden-state"><span class="secno">4.10.5.1.1 </span>Hidden state</a></li> + <li><a href="forms.html#text-state-and-search-state"><span class="secno">4.10.5.1.2 </span>Text state and Search state</a></li> + <li><a href="forms.html#telephone-state"><span class="secno">4.10.5.1.3 </span>Telephone state</a></li> + <li><a href="forms.html#url-state"><span class="secno">4.10.5.1.4 </span>URL state</a></li> + <li><a href="forms.html#e-mail-state"><span class="secno">4.10.5.1.5 </span>E-mail state</a></li> + <li><a href="forms.html#password-state"><span class="secno">4.10.5.1.6 </span>Password state</a></li> + <li><a href="forms.html#date-and-time-state"><span class="secno">4.10.5.1.7 </span>Date and Time state</a></li> + <li><a href="forms.html#date-state"><span class="secno">4.10.5.1.8 </span>Date state</a></li> + <li><a href="forms.html#month-state"><span class="secno">4.10.5.1.9 </span>Month state</a></li> + <li><a href="forms.html#week-state"><span class="secno">4.10.5.1.10 </span>Week state</a></li> + <li><a href="forms.html#time-state"><span class="secno">4.10.5.1.11 </span>Time state</a></li> + <li><a href="forms.html#local-date-and-time-state"><span class="secno">4.10.5.1.12 </span>Local Date and Time state</a></li> + <li><a href="forms.html#number-state"><span class="secno">4.10.5.1.13 </span>Number state</a></li> + <li><a href="forms.html#range-state"><span class="secno">4.10.5.1.14 </span>Range state</a></li> + <li><a href="forms.html#color-state"><span class="secno">4.10.5.1.15 </span>Color state</a></li> + <li><a href="forms.html#checkbox-state"><span class="secno">4.10.5.1.16 </span>Checkbox state</a></li> + <li><a href="forms.html#radio-button-state"><span class="secno">4.10.5.1.17 </span>Radio Button state</a></li> + <li><a href="forms.html#file-upload-state"><span class="secno">4.10.5.1.18 </span>File Upload state</a></li> + <li><a href="forms.html#submit-button-state"><span class="secno">4.10.5.1.19 </span>Submit Button state</a></li> + <li><a href="forms.html#image-button-state"><span class="secno">4.10.5.1.20 </span>Image Button state</a></li> + <li><a href="forms.html#reset-button-state"><span class="secno">4.10.5.1.21 </span>Reset Button state</a></li> + <li><a href="forms.html#button-state"><span class="secno">4.10.5.1.22 </span>Button state</a></li></ol></li> + <li><a href="forms.html#common-input-element-attributes"><span class="secno">4.10.5.2 </span>Common <code>input</code> element attributes</a> + <ol><li><a href="forms.html#the-autocomplete-attribute"><span class="secno">4.10.5.2.1 </span>The <code title="attr-input-autocomplete">autocomplete</code> attribute</a></li> + <li><a href="forms.html#the-list-attribute"><span class="secno">4.10.5.2.2 </span>The <code title="attr-input-list">list</code> attribute</a></li> + <li><a href="forms.html#the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly">readonly</code> attribute</a></li> + <li><a href="forms.html#the-size-attribute"><span class="secno">4.10.5.2.4 </span>The <code title="attr-input-size">size</code> attribute</a></li> + <li><a href="forms.html#the-required-attribute"><span class="secno">4.10.5.2.5 </span>The <code title="attr-input-required">required</code> attribute</a></li> + <li><a href="forms.html#the-multiple-attribute"><span class="secno">4.10.5.2.6 </span>The <code title="attr-input-multiple">multiple</code> attribute</a></li> + <li><a href="forms.html#the-maxlength-attribute"><span class="secno">4.10.5.2.7 </span>The <code title="attr-input-maxlength">maxlength</code> attribute</a></li> + <li><a href="forms.html#the-pattern-attribute"><span class="secno">4.10.5.2.8 </span>The <code title="attr-input-pattern">pattern</code> attribute</a></li> + <li><a href="forms.html#the-min-and-max-attributes"><span class="secno">4.10.5.2.9 </span>The <code title="attr-input-min">min</code> and <code title="attr-input-max">max</code> attributes</a></li> + <li><a href="forms.html#the-step-attribute"><span class="secno">4.10.5.2.10 </span>The <code title="attr-input-step">step</code> attribute</a></li> + <li><a href="forms.html#the-placeholder-attribute"><span class="secno">4.10.5.2.11 </span>The <code title="attr-input-placeholder">placeholder</code> attribute</a></li></ol></li> + <li><a href="forms.html#common-input-element-apis"><span class="secno">4.10.5.3 </span>Common <code>input</code> element APIs</a></li></ol></li> + <li><a href="forms.html#the-button-element"><span class="secno">4.10.6 </span>The <code>button</code> element</a></li> + <li><a href="forms.html#the-select-element"><span class="secno">4.10.7 </span>The <code>select</code> element</a></li> + <li><a href="forms.html#the-datalist-element"><span class="secno">4.10.8 </span>The <code>datalist</code> element</a></li> + <li><a href="forms.html#the-optgroup-element"><span class="secno">4.10.9 </span>The <code>optgroup</code> element</a></li> + <li><a href="forms.html#the-option-element"><span class="secno">4.10.10 </span>The <code>option</code> element</a></li> + <li><a href="forms.html#the-textarea-element"><span class="secno">4.10.11 </span>The <code>textarea</code> element</a></li> + <li><a href="forms.html#the-keygen-element"><span class="secno">4.10.12 </span>The <code>keygen</code> element</a></li> + <li><a href="forms.html#the-output-element"><span class="secno">4.10.13 </span>The <code>output</code> element</a></li> + <li><a href="forms.html#association-of-controls-and-forms"><span class="secno">4.10.14 </span>Association of controls and forms</a></li> + <li><a href="forms.html#attributes-common-to-form-controls"><span class="secno">4.10.15 </span>Attributes common to form controls</a> + <ol><li><a href="forms.html#naming-form-controls"><span class="secno">4.10.15.1 </span>Naming form controls</a></li> + <li><a href="forms.html#enabling-and-disabling-form-controls"><span class="secno">4.10.15.2 </span>Enabling and disabling form controls</a></li> + <li><a href="forms.html#autofocusing-a-form-control"><span class="secno">4.10.15.3 </span>Autofocusing a form control</a></li> + <li><a href="forms.html#limiting-user-input-length"><span class="secno">4.10.15.4 </span>Limiting user input length</a></li> + <li><a href="forms.html#form-submission-0"><span class="secno">4.10.15.5 </span>Form submission</a></li></ol></li> + <li><a href="forms.html#constraints"><span class="secno">4.10.16 </span>Constraints</a> + <ol><li><a href="forms.html#definitions"><span class="secno">4.10.16.1 </span>Definitions</a></li> + <li><a href="forms.html#the-constraint-validation-api"><span class="secno">4.10.16.2 </span>The constraint validation API</a></li></ol></li> + <li><a href="forms.html#form-submission"><span class="secno">4.10.17 </span>Form submission</a></li></ol></li> + <li><a href="interactive-elements.html#interactive-elements"><span class="secno">4.11 </span>Interactive elements</a> + <ol><li><a href="interactive-elements.html#the-details-element"><span class="secno">4.11.1 </span>The <code>details</code> element</a></li> + <li><a href="interactive-elements.html#the-command"><span class="secno">4.11.2 </span>The <code>command</code> element</a></li> + <li><a href="interactive-elements.html#menus"><span class="secno">4.11.3 </span>The <code>menu</code> element</a> + <ol><li><a href="interactive-elements.html#menus-intro"><span class="secno">4.11.3.1 </span>Introduction</a></li> + <li><a href="interactive-elements.html#context-menus"><span class="secno">4.11.3.2 </span>Context menus</a></li></ol></li> + <li><a href="interactive-elements.html#commands"><span class="secno">4.11.4 </span>Commands</a></li></ol></li> + <li><a href="interactive-elements.html#common-idioms-without-dedicated-elements"><span class="secno">4.12 </span>Common idioms without dedicated elements</a> + <ol><li><a href="interactive-elements.html#tag-clouds"><span class="secno">4.12.1 </span>Tag clouds</a></li> + <li><a href="interactive-elements.html#conversations"><span class="secno">4.12.2 </span>Conversations</a></li> + <li><a href="interactive-elements.html#footnotes"><span class="secno">4.12.3 </span>Footnotes</a></li></ol></li></ol></li> + <li><a href="microdata.html#microdata"><span class="secno">5 </span>Microdata</a> + <ol><li><a href="microdata.html#introduction-1"><span class="secno">5.1 </span>Introduction</a> + <ol><li><a href="microdata.html#overview"><span class="secno">5.1.1 </span>Overview</a></li> + <li><a href="microdata.html#the-basic-syntax"><span class="secno">5.1.2 </span>The basic syntax</a></li> + <li><a href="microdata.html#typed-items"><span class="secno">5.1.3 </span>Typed items</a></li> + <li><a href="microdata.html#global-identifiers-for-items"><span class="secno">5.1.4 </span>Global identifiers for items</a></li> + <li><a href="microdata.html#selecting-names-when-defining-vocabularies"><span class="secno">5.1.5 </span>Selecting names when defining vocabularies</a></li> + <li><a href="microdata.html#using-the-microdata-dom-api"><span class="secno">5.1.6 </span>Using the microdata DOM API</a></li></ol></li> + <li><a href="microdata.html#encoding-microdata"><span class="secno">5.2 </span>Encoding microdata</a> + <ol><li><a href="microdata.html#the-microdata-model"><span class="secno">5.2.1 </span>The microdata model</a></li> + <li><a href="microdata.html#items"><span class="secno">5.2.2 </span>Items</a></li> + <li><a href="microdata.html#names:-the-itemprop-attribute"><span class="secno">5.2.3 </span>Names: the <code>itemprop</code> attribute</a></li> + <li><a href="microdata.html#values"><span class="secno">5.2.4 </span>Values</a></li> + <li><a href="microdata.html#associating-names-with-items"><span class="secno">5.2.5 </span>Associating names with items</a></li> + <li><a href="microdata.html#examples-1"><span class="secno">5.2.6 </span>Examples</a></li></ol></li> + <li><a href="microdata.html#microdata-dom-api"><span class="secno">5.3 </span>Microdata DOM API</a></li></ol></li> + <li><a href="browsers.html#browsers"><span class="secno">6 </span>Web browsers</a> + <ol><li><a href="browsers.html#windows"><span class="secno">6.1 </span>Browsing contexts</a> + <ol><li><a href="browsers.html#nested-browsing-contexts"><span class="secno">6.1.1 </span>Nested browsing contexts</a> + <ol><li><a href="browsers.html#navigating-nested-browsing-contexts-in-the-dom"><span class="secno">6.1.1.1 </span>Navigating nested browsing contexts in the DOM</a></li></ol></li> + <li><a href="browsers.html#auxiliary-browsing-contexts"><span class="secno">6.1.2 </span>Auxiliary browsing contexts</a> + <ol><li><a href="browsers.html#navigating-auxiliary-browsing-contexts-in-the-dom"><span class="secno">6.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</a></li></ol></li> + <li><a href="browsers.html#secondary-browsing-contexts"><span class="secno">6.1.3 </span>Secondary browsing contexts</a></li> + <li><a href="browsers.html#browsing-context-names"><span class="secno">6.1.4 </span>Browsing context names</a></li></ol></li> + <li><a href="browsers.html#the-window-object"><span class="secno">6.2 </span>The <code>Window</code> object</a> + <ol><li><a href="browsers.html#apis-for-creating-and-navigating-browsing-contexts-by-name"><span class="secno">6.2.1 </span>APIs for creating and navigating browsing contexts by name</a></li> + <li><a href="browsers.html#accessing-other-browsing-contexts"><span class="secno">6.2.2 </span>Accessing other browsing contexts</a></li> + <li><a href="browsers.html#named-access-on-the-window-object"><span class="secno">6.2.3 </span>Named access on the <code>Window</code> object</a></li> + <li><a href="browsers.html#browser-interface-elements"><span class="secno">6.2.4 </span>Browser interface elements</a></li> + <li><a href="browsers.html#relaxing-the-same-origin-restriction"><span class="secno">6.2.5 </span>Relaxing the same-origin restriction</a></li></ol></li> + <li><a href="browsers.html#scripting"><span class="secno">6.3 </span>Scripting</a> + <ol><li><a href="browsers.html#introduction-2"><span class="secno">6.3.1 </span>Introduction</a></li> + <li><a href="browsers.html#events"><span class="secno">6.3.2 </span>Events</a></li></ol></li> + <li><a href="browsers.html#timers"><span class="secno">6.4 </span>Timers</a></li> + <li><a href="browsers.html#user-prompts"><span class="secno">6.5 </span>User prompts</a> + <ol><li><a href="browsers.html#simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</a></li> + <li><a href="browsers.html#printing"><span class="secno">6.5.2 </span>Printing</a></li> + <li><a href="browsers.html#dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</a></li></ol></li> + <li><a href="browsers.html#system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</a> + <ol><li><a href="browsers.html#client-identification"><span class="secno">6.6.1 </span>Client identification</a></li> + <li><a href="browsers.html#custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</a></li> + <li><a href="browsers.html#manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</a></li></ol></li> + <li><a href="offline.html#offline"><span class="secno">6.7 </span>Offline Web applications</a> + <ol><li><a href="offline.html#introduction-3"><span class="secno">6.7.1 </span>Introduction</a> + <ol><li><a href="offline.html#appcacheevents"><span class="secno">6.7.1.1 </span>Event summary</a></li></ol></li> + <li><a href="offline.html#manifests"><span class="secno">6.7.2 </span>The cache manifest syntax</a> + <ol><li><a href="offline.html#a-sample-manifest"><span class="secno">6.7.2.1 </span>A sample manifest</a></li> + <li><a href="offline.html#writing-cache-manifests"><span class="secno">6.7.2.2 </span>Writing cache manifests</a></li></ol></li> + <li><a href="offline.html#expiring-application-caches"><span class="secno">6.7.3 </span>Expiring application caches</a></li> + <li><a href="offline.html#application-cache-api"><span class="secno">6.7.4 </span>Application cache API</a></li> + <li><a href="offline.html#browser-state"><span class="secno">6.7.5 </span>Browser state</a></li></ol></li> + <li><a href="history.html#history"><span class="secno">6.8 </span>Session history and navigation</a> + <ol><li><a href="history.html#the-session-history-of-browsing-contexts"><span class="secno">6.8.1 </span>The session history of browsing contexts</a></li> + <li><a href="history.html#the-history-interface"><span class="secno">6.8.2 </span>The <code>History</code> interface</a></li> + <li><a href="history.html#activating-state-object-entries"><span class="secno">6.8.3 </span>Activating state object entries</a></li> + <li><a href="history.html#the-location-interface"><span class="secno">6.8.4 </span>The <code>Location</code> interface</a></li></ol></li> + <li><a href="history.html#browsing-the-web"><span class="secno">6.9 </span>Browsing the Web</a> + <ol><li><a href="history.html#unloading-documents"><span class="secno">6.9.1 </span>Unloading documents</a></li> + <li><a href="history.html#aborting-a-document-load"><span class="secno">6.9.2 </span>Aborting a document load</a></li></ol></li> + <li><a href="history.html#links"><span class="secno">6.10 </span>Links</a> + <ol><li><a href="history.html#hyperlink-elements"><span class="secno">6.10.1 </span>Hyperlink elements</a></li> + <li><a href="history.html#linkTypes"><span class="secno">6.10.2 </span>Link types</a> + <ol><li><a href="history.html#link-type-alternate"><span class="secno">6.10.2.1 </span>Link type "<code>alternate</code>"</a></li> + <li><a href="history.html#link-type-archives"><span class="secno">6.10.2.2 </span>Link type "<code>archives</code>"</a></li> + <li><a href="history.html#link-type-author"><span class="secno">6.10.2.3 </span>Link type "<code>author</code>"</a></li> + <li><a href="history.html#link-type-bookmark"><span class="secno">6.10.2.4 </span>Link type "<code>bookmark</code>"</a></li> + <li><a href="history.html#link-type-external"><span class="secno">6.10.2.5 </span>Link type "<code>external</code>"</a></li> + <li><a href="history.html#link-type-help"><span class="secno">6.10.2.6 </span>Link type "<code>help</code>"</a></li> + <li><a href="history.html#rel-icon"><span class="secno">6.10.2.7 </span>Link type "<code>icon</code>"</a></li> + <li><a href="history.html#link-type-license"><span class="secno">6.10.2.8 </span>Link type "<code>license</code>"</a></li> + <li><a href="history.html#link-type-nofollow"><span class="secno">6.10.2.9 </span>Link type "<code>nofollow</code>"</a></li> + <li><a href="history.html#link-type-noreferrer"><span class="secno">6.10.2.10 </span>Link type "<code>noreferrer</code>"</a></li> + <li><a href="history.html#link-type-pingback"><span class="secno">6.10.2.11 </span>Link type "<code>pingback</code>"</a></li> + <li><a href="history.html#link-type-prefetch"><span class="secno">6.10.2.12 </span>Link type "<code>prefetch</code>"</a></li> + <li><a href="history.html#link-type-search"><span class="secno">6.10.2.13 </span>Link type "<code>search</code>"</a></li> + <li><a href="history.html#link-type-stylesheet"><span class="secno">6.10.2.14 </span>Link type "<code>stylesheet</code>"</a></li> + <li><a href="history.html#link-type-sidebar"><span class="secno">6.10.2.15 </span>Link type "<code>sidebar</code>"</a></li> + <li><a href="history.html#link-type-tag"><span class="secno">6.10.2.16 </span>Link type "<code>tag</code>"</a></li> + <li><a href="history.html#hierarchical-link-types"><span class="secno">6.10.2.17 </span>Hierarchical link types</a> + <ol><li><a href="history.html#link-type-index"><span class="secno">6.10.2.17.1 </span>Link type "<code>index</code>"</a></li> + <li><a href="history.html#link-type-up"><span class="secno">6.10.2.17.2 </span>Link type "<code>up</code>"</a></li></ol></li> + <li><a href="history.html#sequential-link-types"><span class="secno">6.10.2.18 </span>Sequential link types</a> + <ol><li><a href="history.html#link-type-first"><span class="secno">6.10.2.18.1 </span>Link type "<code>first</code>"</a></li> + <li><a href="history.html#link-type-last"><span class="secno">6.10.2.18.2 </span>Link type "<code>last</code>"</a></li> + <li><a href="history.html#link-type-next"><span class="secno">6.10.2.18.3 </span>Link type "<code>next</code>"</a></li> + <li><a href="history.html#link-type-prev"><span class="secno">6.10.2.18.4 </span>Link type "<code>prev</code>"</a></li></ol></li> + <li><a href="history.html#other-link-types"><span class="secno">6.10.2.19 </span>Other link types</a></li></ol></li></ol></li></ol></li> + <li><a href="editing.html#editing"><span class="secno">7 </span>User Interaction</a> + <ol><li><a href="editing.html#the-hidden-attribute"><span class="secno">7.1 </span>The <code>hidden</code> attribute</a></li> + <li><a href="editing.html#activation"><span class="secno">7.2 </span>Activation</a></li> + <li><a href="editing.html#scrolling-elements-into-view"><span class="secno">7.3 </span>Scrolling elements into view</a></li> + <li><a href="editing.html#focus"><span class="secno">7.4 </span>Focus</a> + <ol><li><a href="editing.html#sequential-focus-navigation"><span class="secno">7.4.1 </span>Sequential focus navigation</a></li> + <li><a href="editing.html#document-level-focus-apis"><span class="secno">7.4.2 </span>Document-level focus APIs</a></li> + <li><a href="editing.html#element-level-focus-apis"><span class="secno">7.4.3 </span>Element-level focus APIs</a></li></ol></li> + <li><a href="editing.html#the-accesskey-attribute"><span class="secno">7.5 </span>The <code>accesskey</code> attribute</a></li> + <li><a href="editing.html#selection"><span class="secno">7.6 </span>The text selection APIs</a> + <ol><li><a href="editing.html#documentSelection"><span class="secno">7.6.1 </span>APIs for the browsing context selection</a></li> + <li><a href="editing.html#textFieldSelection"><span class="secno">7.6.2 </span>APIs for the text field selections</a></li></ol></li> + <li><a href="editing.html#contenteditable"><span class="secno">7.7 </span>The <code title="attr-contenteditable">contenteditable</code> attribute</a> + <ol><li><a href="editing.html#making-entire-documents-editable"><span class="secno">7.7.1 </span>Making entire documents editable</a></li></ol></li> + <li><a href="editing.html#spelling-and-grammar-checking"><span class="secno">7.8 </span>Spelling and grammar checking</a></li> + <li><a href="editing.html#dnd"><span class="secno">7.9 </span>Drag and drop</a> + <ol><li><a href="editing.html#introduction-4"><span class="secno">7.9.1 </span>Introduction</a></li> + <li><a href="editing.html#the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li> + <li><a href="editing.html#dndevents"><span class="secno">7.9.3 </span>Events fired during a drag-and-drop action</a></li> + <li><a href="editing.html#the-draggable-attribute"><span class="secno">7.9.4 </span>The <code>draggable</code> attribute</a></li> + <li><a href="editing.html#copy-and-paste"><span class="secno">7.9.5 </span>Copy and paste</a></li></ol></li> + <li><a href="editing.html#undo"><span class="secno">7.10 </span>Undo history</a> + <ol><li><a href="editing.html#the-undomanager-interface"><span class="secno">7.10.1 </span>The <code>UndoManager</code> interface</a></li> + <li><a href="editing.html#the-undomanagerevent-interface-and-the-undo-and-redo-events"><span class="secno">7.10.2 </span>The <code>UndoManagerEvent</code> interface and the <code title="event-undo">undo</code> and <code title="event-redo">redo</code> events</a></li></ol></li> + <li><a href="editing.html#editing-apis"><span class="secno">7.11 </span>Editing APIs</a></li></ol></li> + <li><a href="comms.html#comms"><span class="secno">8 </span>Communication</a> + <ol><li><a href="comms.html#event-definitions"><span class="secno">8.1 </span>Event definitions</a></li> + <li><a href="comms.html#crossDocumentMessages"><span class="secno">8.2 </span>Cross-document messaging</a> + <ol><li><a href="comms.html#introduction-5"><span class="secno">8.2.1 </span>Introduction</a></li> + <li><a href="comms.html#security-4"><span class="secno">8.2.2 </span>Security</a></li> + <li><a href="comms.html#posting-messages"><span class="secno">8.2.3 </span>Posting messages</a></li></ol></li> + <li><a href="comms.html#channel-messaging"><span class="secno">8.3 </span>Channel messaging</a> + <ol><li><a href="comms.html#message-channels"><span class="secno">8.3.1 </span>Message channels</a></li> + <li><a href="comms.html#message-ports"><span class="secno">8.3.2 </span>Message ports</a> + <ol><li><a href="comms.html#ports-and-garbage-collection"><span class="secno">8.3.2.1 </span>Ports and garbage collection</a></li></ol></li></ol></li></ol></li> + <li><a href="syntax.html#syntax"><span class="secno">9 </span>The HTML syntax</a> + <ol><li><a href="syntax.html#writing"><span class="secno">9.1 </span>Writing HTML documents</a> + <ol><li><a href="syntax.html#the-doctype"><span class="secno">9.1.1 </span>The DOCTYPE</a></li> + <li><a href="syntax.html#elements-0"><span class="secno">9.1.2 </span>Elements</a> + <ol><li><a href="syntax.html#start-tags"><span class="secno">9.1.2.1 </span>Start tags</a></li> + <li><a href="syntax.html#end-tags"><span class="secno">9.1.2.2 </span>End tags</a></li> + <li><a href="syntax.html#attributes"><span class="secno">9.1.2.3 </span>Attributes</a></li> + <li><a href="syntax.html#optional-tags"><span class="secno">9.1.2.4 </span>Optional tags</a></li> + <li><a href="syntax.html#element-restrictions"><span class="secno">9.1.2.5 </span>Restrictions on content models</a></li> + <li><a href="syntax.html#cdata-rcdata-restrictions"><span class="secno">9.1.2.6 </span>Restrictions on the contents of raw text and RCDATA elements</a></li></ol></li> + <li><a href="syntax.html#text-0"><span class="secno">9.1.3 </span>Text</a> + <ol><li><a href="syntax.html#newlines"><span class="secno">9.1.3.1 </span>Newlines</a></li></ol></li> + <li><a href="syntax.html#character-references"><span class="secno">9.1.4 </span>Character references</a></li> + <li><a href="syntax.html#cdata-sections"><span class="secno">9.1.5 </span>CDATA sections</a></li> + <li><a href="syntax.html#comments"><span class="secno">9.1.6 </span>Comments</a></li></ol></li> + <li><a href="named-character-references.html#named-character-references"><span class="secno">9.2 </span>Named character references</a></li></ol></li> + <li><a href="the-xhtml-syntax.html#the-xhtml-syntax"><span class="secno">10 </span>The XHTML syntax</a></li> + <li><a href="obsolete.html#obsolete"><span class="secno">11 </span>Obsolete features</a> + <ol><li><a href="obsolete.html#obsolete-but-conforming-features"><span class="secno">11.1 </span>Obsolete but conforming features</a></li> + <li><a href="obsolete.html#non-conforming-features"><span class="secno">11.2 </span>Non-conforming features</a></li></ol></li> + <li><a href="iana.html#iana"><span class="secno">12 </span>IANA considerations</a> + <ol><li><a href="iana.html#text-html"><span class="secno">12.1 </span><code>text/html</code></a></li> + <li><a href="iana.html#application-xhtml-xml"><span class="secno">12.2 </span><code>application/xhtml+xml</code></a></li> + <li><a href="iana.html#text-cache-manifest"><span class="secno">12.3 </span><code>text/cache-manifest</code></a></li> + <li><a href="iana.html#text-ping"><span class="secno">12.4 </span><code>text/ping</code></a></li> + <li><a href="iana.html#application-microdata-json"><span class="secno">12.5 </span><code>application/microdata+json</code></a></li> + <li><a href="iana.html#ping-from"><span class="secno">12.6 </span><code>Ping-From</code></a></li> + <li><a href="iana.html#ping-to"><span class="secno">12.7 </span><code>Ping-To</code></a></li></ol></li> + <li><a class="no-num" href="index.html#index">Index</a> + <ol><li><a class="no-num" href="index.html#elements-1">Elements</a></li> + <li><a class="no-num" href="index.html#attributes-0">Attributes</a></li> + <li><a class="no-num" href="index.html#interfaces">Interfaces</a></li> + <li><a class="no-num" href="index.html#events-0">Events</a></li></ol></li> + <li><a class="no-num" href="references.html#references">References</a></li> + <li><a class="no-num" href="acknowledgements.html#acknowledgements">Acknowledgements</a></li></ol><!--end-toc--></body></html> \ No newline at end of file Index: embedded-content-0.html =================================================================== RCS file: /sources/public/html5/spec-author-view/embedded-content-0.html,v retrieving revision 1.495 retrieving revision 1.496 diff -u -d -r1.495 -r1.496 --- embedded-content-0.html 7 Nov 2009 07:19:48 -0000 1.495 +++ embedded-content-0.html 7 Nov 2009 07:26:50 -0000 1.496 @@ -0,0 +1,915 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>3.2.5.1.6 Embedded content — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="semantics.html" title="4 The elements of HTML" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> +<p>This is revision 1.3507.</p> + + </div><div> + <a href="dom.html">← 3 Semantics, structure, and APIs of HTML documents</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="semantics.html">4 The elements of HTML →</a> + </div> + + <h6 id="embedded-content-0"><span class="secno">3.2.5.1.6 </span>Embedded content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="embedded-content">Embedded content</dfn> is content that imports another + resource into the document, or content from another vocabulary that + is inserted into the document.</p><ul class="brief category-list"><li><code><a href="video.html#audio">audio</a></code></li> + <li><code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code></li> + <li><code><a href="text-level-semantics.html#the-embed-element">embed</a></code></li> + <li><code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code></li> + <li><code><a href="text-level-semantics.html#the-img-element">img</a></code></li> + <li><code><a href="the-canvas-element.html#math">math</a></code></li> + <li><code><a href="text-level-semantics.html#the-object-element">object</a></code></li> + <li><code><a href="the-canvas-element.html#svg">svg</a></code></li> + <li><code><a href="video.html#video">video</a></code></li> + </ul><p>Elements that are from namespaces other than the <a href="#html-namespace-0">HTML + namespace</a> and that convey content but not metadata, are + <a href="#embedded-content">embedded content</a> for the purposes of the content models + defined in this specification. (For example, MathML, or SVG.)</p><p>Some embedded content elements can have <dfn id="fallback-content">fallback + content</dfn>: content that is to be used when the external resource + cannot be used (e.g. because it is of an unsupported format). The + element definitions state what the fallback is, if any.</p><h6 id="interactive-content-0"><span class="secno">3.2.5.1.7 </span>Interactive content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- +TESTS: +http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cp%20tabindex%3D1%3Etest%20%3Ca%20href%3D%22%22%3E%20%3Cem%3Etest%3C/em%3E%20%3C/a%3E%0A%3Cscript%3E%0A%20function%20test%20%28e%29%20%7B%20w%28e.type%20+%20%27%20on%20%27%20+%20e.target.tagName%20+%20%27%20through%20%27%20+%20e.currentTarget.tagName%29%3B%20%7D%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%3C/script%3E%0A +http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Ca%20href%3Dhttp%3A//google.com/%20target%3Da%3EA%3C/a%3E%3Ca%20href%3Dhttp%3A//yahoo.com/%20target%3Db%3EB%3C/a%3E%3Cbr%3E%0A%3Ciframe%20name%3Da%3E%3C/iframe%3E%3Ciframe%20name%3Db%3E%3C/iframe%3E%0A%3Cscript%3E%0A%20var%20a%20%3D%20document.getElementsByTagName%28%27a%27%29%5B0%5D%3B%0A%20var%20b%20%3D%20document.getElementsByTagName%28%27a%27%29%5B1%5D%3B%0A%20a.appendChild%28b%29%3B%0A%3C/script%3E +http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%20onsubmit%3D%22w%28%27onsubmit%27%29%22%3E%3Cem%3EA%3C/em%3E%3C/form%3E%0A%3Cscript%3E%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.attachEvent%28%27onsubmit%27%2C%20function%20%28%29%20%7B%20w%28%27submit%20fired%27%29%20%7D%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.fireEvent%28%27onsubmit%27%29%3B%0A%3C/script%3E +http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%3EX%3C/form%3E%0A%3Cscript%3E%0Avar%20evt%20%3D%20document.createEvent%28%22Events%22%29%3B%0Aevt.initEvent%28%22submit%22%2C%20true%2C%20true%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.dispatchEvent%28evt%29%3B%0A%3C/script%3E +--><p><dfn id="interactive-content">Interactive content</dfn> is content that is specifically + intended for user interaction.</p><ul class="brief category-list"><li><code><a href="text-level-semantics.html#the-a-element">a</a></code></li> + <li><code><a href="video.html#audio">audio</a></code> (if the <code title="attr-media-controls"><a href="video.html#attr-media-controls">controls</a></code> attribute is present)</li> + <li><code><a href="forms.html#the-button-element">button</a></code></li> +<!-- v2DATAGRID <li><code>datagrid</code></li> --> + <li><code><a href="interactive-elements.html#the-details-element">details</a></code></li> + <li><code><a href="text-level-semantics.html#the-embed-element">embed</a></code></li> + <li><code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code></li> + <li><code><a href="text-level-semantics.html#the-img-element">img</a></code> (if the <code title="attr-hyperlink-usemap"><a href="the-canvas-element.html#attr-hyperlink-usemap">usemap</a></code> attribute is present)</li> + <li><code><a href="forms.html#the-input-element">input</a></code> (if the <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute is <em>not</em> in the <a href="forms.html#hidden-state" title="attr-input-type-hidden">Hidden</a> state)</li> + <li><code><a href="forms.html#the-keygen-element">keygen</a></code></li> + <li><code><a href="forms.html#the-label-element">label</a></code></li> + <li><code><a href="interactive-elements.html#menus">menu</a></code> (if the <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute is in the <a href="interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a> state)</li> + <li><code><a href="text-level-semantics.html#the-object-element">object</a></code> (if the <code title="attr-hyperlink-usemap"><a href="the-canvas-element.html#attr-hyperlink-usemap">usemap</a></code> attribute is present)<!-- see also comment in <object> section --></li> + <li><code><a href="forms.html#the-select-element">select</a></code></li> + <li><code><a href="forms.html#the-textarea-element">textarea</a></code></li> + <li><code><a href="video.html#video">video</a></code> (if the <code title="attr-media-controls"><a href="video.html#attr-media-controls">controls</a></code> attribute is present)</li> + </ul><p>Certain elements in HTML have an <a href="#activation-behavior">activation + behavior</a>, which means that the user can activate them. This + triggers a sequence of events dependent on the activation mechanism, + and normally culminating in a <code title="event-click">click</code> + event followed by a <code title="event-DOMActivate">DOMActivate</code> event.</p><h5 id="transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some elements are described as <dfn id="transparent">transparent</dfn>; they have + "transparent" in the description of their content model.</p><p>When a content model includes a part that is "transparent", those + parts must not contain content that would not be conformant if all + transparent elements in the tree were replaced, in their parent + element, by the children in the "transparent" part of their content + model, retaining order.</p><div class="example"> + + <p>Consider the following markup fragment:</p> + + <pre><p>Hello <a href="world.html"><em>wonderful</em> world</a>!</p></pre> + + <p>Its DOM looks like the following:</p> + + <ul class="domTree"><li class="t1"><code><a href="semantics.html#the-p-element">p</a></code><ul><li class="t3"><code>#text</code>: <span title="">Hello </span></li><li class="t1"><code><a href="text-level-semantics.html#the-a-element">a</a></code> <span class="t2" title=""><code class="attribute name">href</code>="<code class="attribute value">world.html</code>"</span><ul><li class="t1"><code><a href="text-level-semantics.html#the-em-element">em</a></code><ul><li class="t3"><code>#text</code>: <span title="">wonderful</span></li></ul></li><li class="t3"><code>#text</code>: <span title=""> world</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">!</span></li></ul></li></ul><p>The content model of the <code><a href="text-level-semantics.html#the-a-element">a</a></code> element is + <a href="#transparent">transparent</a>. To see if its contents are conforming, + therefore, the element is replaced by its contents:</p> + + <ul class="domTree"><li class="t1"><code><a href="semantics.html#the-p-element">p</a></code><ul><li class="t3"><code>#text</code>: <span title="">Hello </span></li><li class="t1"><code><a href="text-level-semantics.html#the-em-element">em</a></code><ul><li class="t3"><code>#text</code>: <span title="">wonderful</span></li></ul></li><li class="t3"><code>#text</code>: <span title=""> world</span></li><li class="t3"><code>#text</code>: <span title="">!</span></li></ul></li></ul><p>Since that is conforming, the contents of the <code><a href="text-level-semantics.html#the-a-element">a</a></code> are + conforming in the original fragment.</p> + + </div><p>When a transparent element has no parent, then the part of its + content model that is "transparent" must instead be treated as + accepting any <a href="dom.html#flow-content">flow content</a>.</p><h5 id="paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="note">The term <a href="#paragraph">paragraph</a> as defined in this + section is distinct from (though related to) the <code><a href="semantics.html#the-p-element">p</a></code> + element defined later. The <a href="#paragraph">paragraph</a> concept defined + here is used to describe how to interpret documents.</p><p>A <dfn id="paragraph">paragraph</dfn> is typically a run of <a href="dom.html#phrasing-content">phrasing + content</a> that forms a block of text with one or more sentences + that discuss a particular topic, as in typography, but can also be + used for more general thematic grouping. For instance, an address is + also a paragraph, as is a part of a form, a byline, or a stanza in a + poem.</p><div class="example"> + + <p>In the following example, there are two paragraphs in a + section. There is also a heading, which contains phrasing content + that is not a paragraph. Note how the comments and + <a href="dom.html#inter-element-whitespace">inter-element whitespace</a> do not form paragraphs.</p> + + <pre><section> + <h1>Example of paragraphs</h1> + This is the <em>first</em> paragraph in this example. + <p>This is the second.</p> + <!-- This is not a paragraph. --> +</section></pre> + + </div><p>Paragraphs in <a href="dom.html#flow-content">flow content</a> are defined relative to + what the document looks like without the <code><a href="text-level-semantics.html#the-a-element">a</a></code>, + <code><a href="text-level-semantics.html#the-ins-element">ins</a></code>, <code><a href="text-level-semantics.html#the-del-element">del</a></code>, and <code><a href="the-canvas-element.html#the-map-element">map</a></code> elements + complicating matters, since those elements, with their hybrid + content models, can straddle paragraph boundaries, as shown in the + first two examples below.</p><p class="note">Generally, having elements straddle paragraph + boundaries is best avoided. Maintaining such markup can be + difficult.</p><div class="example"> + + <p>The following example takes the markup from the earlier example + and puts <code><a href="text-level-semantics.html#the-ins-element">ins</a></code> and <code><a href="text-level-semantics.html#the-del-element">del</a></code> elements around some + of the markup to show that the text was changed (though in this + case, the changes admittedly don't make much sense). Notice how + this example has exactly the same paragraphs as the previous one, + despite the <code><a href="text-level-semantics.html#the-ins-element">ins</a></code> and <code><a href="text-level-semantics.html#the-del-element">del</a></code> elements — + the <code><a href="text-level-semantics.html#the-ins-element">ins</a></code> element straddles the heading and the first + paragraph, and the <code><a href="text-level-semantics.html#the-del-element">del</a></code> element straddles the boundary + between the two paragraphs.</p> + + <pre><section> + <ins><h1>Example of paragraphs</h1> + This is the <em>first</em> paragraph in</ins> this example<del>. + <p>This is the second.</p></del> + <!-- This is not a paragraph. --> +</section></pre> + + </div><p>A <a href="#paragraph">paragraph</a> is also formed explicitly by + <code><a href="semantics.html#the-p-element">p</a></code> elements.</p><p class="note">The <code><a href="semantics.html#the-p-element">p</a></code> element can be used to wrap + individual paragraphs when there would otherwise not be any content + other than phrasing content to separate the paragraphs from each + other.</p><div class="example"> + + <p>In the following example, the link spans half of the first + paragraph, all of the heading separating the two paragraphs, and + half of the second paragraph. It straddles the paragraphs and the + heading.</p> + + <pre><aside> + Welcome! + <a href="about.html"> + This is home of... + <h1>The Falcons!</h1> + The Lockheed Martin multirole jet fighter aircraft! + </a> + This page discusses the F-16 Fighting Falcon's innermost secrets. +</aside></pre> + + <p>Here is another way of marking this up, this time showing the + paragraphs explicitly, and splitting the one link element into + three:</p> + + <pre><aside> + <p>Welcome! <a href="about.html">This is home of...</a></p> + <h1><a href="about.html">The Falcons!</a></h1> + <p><a href="about.html">The Lockheed Martin multirole jet + fighter aircraft!</a> This page discusses the F-16 Fighting + Falcon's innermost secrets.</p> +</aside></pre> + + </div><div class="example"> + + <!-- I don't know if there's a better way to deal with this, but if + there is, let me know... --> + + <p>It is possible for paragraphs to overlap when using certain + elements that define fallback content. For example, in the + following section:</p> + + <pre><section> + <h1>My Cats</h1> + You can play with my cat simulator. + <object data="cats.sim"> + To see the cat simulator, use one of the following links: + <ul> + <li><a href="cats.sim">Download simulator file</a> + <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a> + </ul> + Alternatively, upgrade to the Mellblom Browser. + </object> + I'm quite proud of it. +</section></pre> + + <p>There are five paragraphs:</p> + + <ol class="brief"><li>The paragraph that says "You can play with my cat + simulator. <i title="">object</i> I'm quite proud of it.", where + <i title="">object</i> is the <code><a href="text-level-semantics.html#the-object-element">object</a></code> element.</li> + + <li>The paragraph that says "To see the cat simulator, use one of + the following links:".</li> + + <li>The paragraph that says "Download simulator file".</li> + + <li>The paragraph that says "Use online simulator".</li> + + <li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</li> + + </ol><p>The first paragraph is overlapped by the other four. A user + agent that supports the "cats.sim" resource will only show the + first one, but a user agent that shows the fallback will + confusingly show the first sentence of the first paragraph as + if it was in the same paragraph as the second one, and will show + the last paragraph as if it was at the start of the second sentence + of the first paragraph.</p> + + <p>To avoid this confusion, explicit <code><a href="semantics.html#the-p-element">p</a></code> elements can be + used.</p> + + </div><h4 id="annotations-for-assistive-technology-products-aria"><span class="secno">3.2.6 </span><dfn>Annotations for assistive technology products</dfn> (ARIA)</h4><p>Authors may use the ARIA <code title="attr-aria-role">role</code> + and <code title="attr-aria-*">aria-*</code> attributes on <a href="infrastructure.html#html-elements">HTML + elements</a>, in accordance with the requirements described in + the ARIA specifications, except where these conflict with the + <span>strong native semantics</span> described below. These + exceptions are intended to prevent authors from making assistive + technology products report nonsensical states that do not represent + the actual state of the document. <a href="references.html#refsARIA">[ARIA]</a></p><p>The following table defines the <span>strong native + semantics</span> that apply to <a href="infrastructure.html#html-elements">HTML + elements</a>. Each language feature (element or attribute) in a + cell in the first column implies the ARIA semantics (role, states, + and/or properties) given in the cell in the second column of the + same row. Authors must not set the ARIA <code title="attr-aria-role">role</code> and <code title="attr-aria-*">aria-*</code> attributes in a manner that + conflicts with the semantics described in the following table. </p><table><thead><tr><th>Language feature + </th><th>Strong native semantics and implied ARIA semantics</th></tr></thead><tbody><tr><td><code><a href="text-level-semantics.html#the-a-element">a</a></code> element that represents a <a href="history.html#hyperlink">hyperlink</a> + </td><td><code title="attr-aria-role-link">link</code> role + + </td></tr><tr><td><code><a href="semantics.html#the-address-element">address</a></code> element + </td><td><code title="attr-aria-role-contentinfo">contentinfo</code> role + + </td></tr><tr><td><code><a href="the-canvas-element.html#the-area-element">area</a></code> element that represents a <a href="history.html#hyperlink">hyperlink</a> + </td><td><code title="attr-aria-role-link">link</code> role + + </td></tr><tr><td><code><a href="forms.html#the-button-element">button</a></code> element + </td><td><code title="attr-aria-role-button">button</code> role + + </td></tr><tr><td><code><a href="forms.html#the-datalist-element">datalist</a></code> element + </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false" + + </td></tr><tr><td><code><a href="semantics.html#the-footer-element">footer</a></code> element + </td><td><code title="attr-aria-role-contentinfo">contentinfo</code> role + + </td></tr><tr><td><code><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element that does not have an <code><a href="semantics.html#the-hgroup-element">hgroup</a></code> ancestor + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element that does not have an <code><a href="semantics.html#the-hgroup-element">hgroup</a></code> ancestor + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code> element that does not have an <code><a href="semantics.html#the-hgroup-element">hgroup</a></code> ancestor + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code> element that does not have an <code><a href="semantics.html#the-hgroup-element">hgroup</a></code> ancestor + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code> element that does not have an <code><a href="semantics.html#the-hgroup-element">hgroup</a></code> ancestor + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element that does not have an <code><a href="semantics.html#the-hgroup-element">hgroup</a></code> ancestor + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-hgroup-element">hgroup</a></code> element + </td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a> + + </td></tr><tr><td><code><a href="semantics.html#the-hr-element">hr</a></code> element + </td><td><code title="attr-aria-role-separator">separator</code> role + + </td></tr><tr><td><code><a href="text-level-semantics.html#the-img-element">img</a></code> element whose <code title="attr-img-alt"><a href="text-level-semantics.html#attr-img-alt">alt</a></code> attribute's value is empty + </td><td><code title="attr-aria-role-presentation">presentation</code> role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#button-state" title="attr-input-type-button">Button</a> state + </td><td><code title="attr-aria-role-button">button</code> role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> state + </td><td><code title="attr-aria-role-checkbox">checkbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "mixed" if the element's <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute is true, or "true" if the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> is true, or "false" otherwise + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#color-state" title="attr-input-type-color">Color</a> state + </td><td>No role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#date-state" title="attr-input-type-date">Date</a> state + </td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state + </td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a> state + </td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#e-mail-state" title="attr-input-type-email">E-mail</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#file-upload-state" title="attr-input-type-file">File Upload</a> state + </td><td><code title="attr-aria-role-button">button</code> role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#hidden-state" title="attr-input-type-hidden">Hidden</a> state + </td><td>No role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#image-button-state" title="attr-input-type-image">Image Button</a> state + </td><td><code title="attr-aria-role-button">button</code> role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#month-state" title="attr-input-type-month">Month</a> state + </td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#number-state" title="attr-input-type-number">Number</a> state + </td><td><code title="attr-aria-role-spinbutton">spinbutton</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="#concept-input-min" title="concept-input-min">minimum</a>, and, if the result of applying the <a href="#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> is a number, with the <code title="attr-aria-valuenow">aria-valuenow</code> property set to that number + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#password-state" title="attr-input-type-password">Password</a> state + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#radio-button-state" title="attr-input-type-radio">Radio Button</a> state + </td><td><code title="attr-aria-role-radio">radio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> is true, or "false" otherwise + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#range-state" title="attr-input-type-range">Range</a> state + </td><td><code title="attr-aria-role-slider">slider</code> role, with the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="#concept-input-min" title="concept-input-min">minimum</a>, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the result of applying the <a href="#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if that that results in a number, or the <a href="forms.html#concept-input-value-default-range" title="concept-input-value-default-range">default value</a> otherwise + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#reset-button-state" title="attr-input-type-reset">Reset Button</a> state + </td><td><code title="attr-aria-role-button">button</code> role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#text-state-and-search-state" title="attr-input-type-search">Search</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#submit-button-state" title="attr-input-type-submit">Submit Button</a> state + </td><td><code title="attr-aria-role-button">button</code> role + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#telephone-state" title="attr-input-type-tel">Telephone</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#text-state-and-search-state" title="attr-input-type-text">Text</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#text-state-and-search-state" title="attr-input-type-text">Text</a>, <a href="forms.html#text-state-and-search-state" title="attr-input-type-search">Search</a>, <a href="forms.html#telephone-state" title="attr-input-type-tel">Telephone</a>, <a href="forms.html#url-state" title="attr-input-type-url">URL</a>, or <a href="forms.html#e-mail-state" title="attr-input-type-email">E-mail</a> states with a <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> + </td><td><code title="attr-aria-role-combobox">combobox</code> role, with the <code title="attr-aria-owns">aria-owns</code> property set to the same value as the <code title="attr-input-list"><a href="forms.html#attr-input-list">list</a></code> attribute, and the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#time-state" title="attr-input-type-time">Time</a> state + </td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#url-state" title="attr-input-type-url">URL</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a> + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="forms.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="forms.html#attr-input-type">type</a></code> attribute in the <a href="forms.html#week-state" title="attr-input-type-week">Week</a> state + </td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="forms.html#attr-input-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="semantics.html#the-link-element">link</a></code> element that represents a <a href="history.html#hyperlink">hyperlink</a> + </td><td><code title="attr-aria-role-link">link</code> role + + </td></tr><tr><td><code><a href="interactive-elements.html#menus">menu</a></code> element with a <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#context-menu-state" title="context menu state">context menu</a> state + </td><td>No role + + </td></tr><tr><td><code><a href="interactive-elements.html#menus">menu</a></code> element with a <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state + </td><td><code title="attr-aria-role-menu">menu</code> role + + </td></tr><tr><td><code><a href="interactive-elements.html#menus">menu</a></code> element with a <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a> state + </td><td><code title="attr-aria-role-toolbar">toolbar</code> role + + </td></tr><tr><td><code><a href="semantics.html#the-nav-element">nav</a></code> element + </td><td><code title="attr-aria-role-navigation">navigation</code> role + + </td></tr><tr><td><code><a href="forms.html#the-option-element">option</a></code> element that is in a <a href="forms.html#concept-select-option-list" title="concept-select-option-list">list of options</a> or that represents a suggestion in a <code><a href="forms.html#the-datalist-element">datalist</a></code> element + </td><td><code title="attr-aria-role-option">option</code> role, with the <code title="attr-aria-selected">aria-selected</code> state set to "true" if the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, or "false" otherwise. + + </td></tr><tr><td><code><a href="text-level-semantics.html#the-progress-element">progress</a></code> element + </td><td><code title="attr-aria-role-progressbar">progressbar</code> role, with, if the progress bar is determinate, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the maximum value of the progress bar, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to zero, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the current value of the progress bar + + </td></tr><tr><td><code><a href="forms.html#the-select-element">select</a></code> element with a <code title="attr-select-multiple"><a href="forms.html#attr-select-multiple">multiple</a></code> attribute + </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "true" + + </td></tr><tr><td><code><a href="forms.html#the-select-element">select</a></code> element with no <code title="attr-select-multiple"><a href="forms.html#attr-select-multiple">multiple</a></code> attribute + </td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false" + + </td></tr><tr><td><code><a href="tabular-data.html#the-td-element">td</a></code> element + </td><td><code title="attr-aria-role-gridcell">gridcell</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any + + </td></tr><tr><td><code><a href="forms.html#the-textarea-element">textarea</a></code> element + </td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="attr-aria-multiline">aria-multiline</code> property set to "true", and the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-textarea-readonly"><a href="forms.html#attr-textarea-readonly">readonly</a></code> attribute + + </td></tr><tr><td><code><a href="tabular-data.html#the-th-element">th</a></code> element that is neither a <a href="#column-header">column header</a> nor a <a href="#row-header">row header</a> + </td><td><code title="attr-aria-role-gridcell">gridcell</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any + + </td></tr><tr><td><code><a href="tabular-data.html#the-th-element">th</a></code> element that is a <a href="#column-header">column header</a> + </td><td><code title="attr-aria-role-columnheader">columnheader</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any + + </td></tr><tr><td><code><a href="tabular-data.html#the-th-element">th</a></code> element that is a <a href="#row-header">row header</a> + </td><td><code title="attr-aria-role-rowheader">rowheader</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any + + </td></tr><tr><td><code><a href="tabular-data.html#the-tr-element">tr</a></code> element + </td><td><code title="attr-aria-role-row">row</code> role + + </td></tr><tr><td>An element that <a href="interactive-elements.html#concept-command" title="concept-command">defines a command</a>, whose <a href="interactive-elements.html#command-facet-type" title="command-facet-type">Type</a> facet is "checkbox", and that is a descendant of a <code><a href="interactive-elements.html#menus">menu</a></code> element whose <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state + </td><td><code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="interactive-elements.html#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise + + </td></tr><tr><td>An element that <a href="interactive-elements.html#concept-command" title="concept-command">defines a command</a>, whose <a href="interactive-elements.html#command-facet-type" title="command-facet-type">Type</a> facet is "command", and that is a descendant of a <code><a href="interactive-elements.html#menus">menu</a></code> element whose <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state + </td><td><code title="attr-aria-role-menuitem">menuitem</code> role + + </td></tr><tr><td>An element that <a href="interactive-elements.html#concept-command" title="concept-command">defines a command</a>, whose <a href="interactive-elements.html#command-facet-type" title="command-facet-type">Type</a> facet is "radio", and that is a descendant of a <code><a href="interactive-elements.html#menus">menu</a></code> element whose <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state + </td><td><code title="attr-aria-role-menuitemradio">menuitemradio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="interactive-elements.html#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise + + </td></tr><tr><td>Elements that are <a href="forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> + </td><td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true" + + </td></tr><tr><td>Elements that are <a href="forms.html#concept-input-required" title="concept-input-required">required</a> + </td><td>The <code title="title-aria-required">aria-required</code> state set to "true" + + </td></tr></tbody></table><p>Some <a href="infrastructure.html#html-elements">HTML elements</a> have native semantics that can be + overridden. The following table lists these elements, + along with the restrictions that apply to those elements. Each + language feature (element or attribute) in a cell in the first + column implies, unless otherwise overriden, the ARIA semantic (role, + state, or property) given in the cell in the second column of the + same row, but this semantic may be overridden under the conditions + listed in the cell in the third column of that row.</p><table><thead><tr><th>Language feature + </th><th>Default implied ARIA semantic + </th><th>Restrictions + + </th></tr></thead><tbody><tr><td><code><a href="semantics.html#the-article-element">article</a></code> element + </td><td><code title="attr-aria-role-article">article</code> role + </td><td>Role must be either <code title="attr-aria-role-article">article</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, or <code title="attr-aria-role-main">main</code> + + </td></tr><tr><td><code><a href="semantics.html#the-aside-element">aside</a></code> element + </td><td><code title="attr-aria-role-note">note</code> role + </td><td>Role must be either <code title="attr-aria-role-note">note</code>, <code title="attr-aria-role-complementary">complementary</code>, or <code title="attr-aria-role-search">search</code> + + </td></tr><tr><td><code><a href="semantics.html#the-header-element">header</a></code> element + </td><td>No role + </td><td>If specified, role must be <code title="attr-aria-role-banner">banner</code> + + </td></tr><tr><td><code><a href="semantics.html#the-li-element">li</a></code> element whose parent is an <code><a href="semantics.html#the-ol-element">ol</a></code> or <code><a href="semantics.html#the-ul-element">ul</a></code> element + </td><td><code title="attr-aria-role-listitem">listitem</code> role + </td><td>Role must be either <code title="attr-aria-role-listitem">listitem</code> or <code title="attr-aria-role-treeitem">treeitem</code> + + </td></tr><tr><td><code><a href="semantics.html#the-ol-element">ol</a></code> element + </td><td><code title="attr-aria-role-list">list</code> role + </td><td>Role must be either <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-tree">tree</code>, or <code title="attr-aria-role-directory">directory</code> + + </td></tr><tr><td><code><a href="forms.html#the-output-element">output</a></code> element + </td><td><code title="attr-aria-role-status">status</code> role + </td><td>No restrictions + + </td></tr><tr><td><code><a href="semantics.html#the-section-element">section</a></code> element + </td><td><code title="attr-aria-role-region">region</code> role + </td><td>Role must be either <code title="attr-aria-role-region">region</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-contentinfo">contentinfo</code>, <code title="attr-aria-role-main">main</code>, <code title="attr-aria-role-search">search</code>, <code title="attr-aria-role-alert">alert</code>, <code title="attr-aria-role-dialog">dialog</code>, <code title="attr-aria-role-alertdialog">alertdialog</code>, <code title="attr-aria-role-status">status</code>, or <code title="attr-aria-role-log">log</code> + + </td></tr><tr><td><code><a href="tabular-data.html#the-table-element">table</a></code> element + </td><td><code title="attr-aria-role-grid">grid</code> role + </td><td>Role must be either <code title="attr-aria-role-grid">grid</code> or <code title="attr-aria-role-treegrid">treegrid</code> + + </td></tr><tr><td><code><a href="semantics.html#the-ul-element">ul</a></code> element + </td><td><code title="attr-aria-role-list">list</code> role + </td><td>Role must be either <code title="attr-aria-role-list">list</code> or <code title="attr-aria-role-tree">tree</code>, or <code title="attr-aria-role-directory">directory</code> + + </td></tr><tr><td><a href="dom.html#the-body-element">The body element</a> + </td><td><code title="attr-aria-role-document">document</code> role + </td><td>Role must be either <code title="attr-aria-role-document">document</code> or <code title="attr-aria-role-application">application</code> + + </td></tr></tbody></table><h3 id="apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>For <a href="dom.html#html-documents">HTML documents</a>, and for <a href="infrastructure.html#html-elements">HTML + elements</a> in <a href="dom.html#html-documents">HTML documents</a>, certain APIs defined + in DOM Core become case-insensitive or case-changing, as sometimes + defined in DOM Core, and as summarized below. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><p>This does not apply to <a href="dom.html#xml-documents">XML documents</a> or to elements + that are not in the <a href="#html-namespace-0">HTML namespace</a> despite being in + <a href="dom.html#html-documents">HTML documents</a>.</p><dl><dt><code title="">Element.tagName</code> and <code title="">Node.nodeName</code></dt> + + <dd> + + <p>These attributes must<a href="#converted-to-ascii-uppercase">converted to ASCII uppercase</a>, regardless of the case + with which they were created.</p> + + </dd> + + + <dt><code title="">Document.createElement()</code></dt> + + <dd> + + <p>The canonical form of HTML markup is all-lowercase; thus, this + method will <a href="#converted-to-ascii-lowercase" title="converted to ASCII lowercase">lowercase</a> + the argument before creating the requisite element. .</p> + + <p class="note">This doesn't apply to <code title="">Document.createElementNS()</code>. Thus, it is possible, + by passing this last method a tag name in the wrong case, to + create an element that claims to have the tag name of an element + defined in this specification, but doesn't support its interfaces, + because it really has another tag name not accessible from the DOM + APIs.</p> + + </dd> + + + <dt><code title="">Element.setAttribute()</code></dt> + <dt><code title="">Element.setAttributeNode()</code></dt> + + <dd> + + <p>Attribute names are <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p> + + + + <p class="note">This doesn't apply to <code title="">Document.setAttributeNS()</code> and <code title="">Document.setAttributeNodeNS()</code>.</p> + + </dd> + + + <dt><code title="">Element.getAttribute()</code></dt> + <dt><code title="">Element.getAttributeNode()</code></dt> + + <dd> + + <p>Attribute names are <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p> + + + + <p class="note">This doesn't apply to <code title="">Document.getAttributeNS()</code> and <code title="">Document.getAttributeNodeNS()</code>.</p> + + </dd> + + + <dt><code title="">Document.getElementsByTagName()</code></dt> + <dt><code title="">Element.getElementsByTagName()</code></dt> + + <dd> + + <p>HTML elements match by lower-casing the argument before + comparison, elements from other namespaces are treated as in XML + (case-sensitively).</p> + + + + <p class="note">Thus, in an <a href="dom.html#html-documents" title="HTML documents">HTML + document</a> with nodes in multiple namespaces, these methods + will effectively be both case-sensitive and case-insensitive at + the same time.</p> + + </dd> + + + </dl><h3 id="dynamic-markup-insertion"><span class="secno">3.4 </span><dfn>Dynamic markup insertion</dfn></h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="note">APIs for dynamically inserting markup into the + document interact with the parser, and thus their behavior varies + depending on whether they are used with <a href="dom.html#html-documents">HTML documents</a> + (and the <a href="#html-parser">HTML parser</a>) or XHTML in <a href="dom.html#xml-documents">XML + documents</a> (and the <a href="#xml-parser">XML parser</a>).</p><h4 id="opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn> + method comes in several variants with different numbers of + arguments.</p><dl class="domintro"><dt><var title="">document</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt> + + <dd> + + <p>Causes the <code>Document</code> to be replaced in-place, as if + it was a new <code>Document</code> object, but reusing the + previous object, which is then returned.</p> + + <p>If the <var title="">type</var> argument is omitted or has the + value "<code><a href="iana.html#text-html">text/html</a></code>", then the resulting + <code>Document</code> has an HTML parser associated with it, which + can be given data to parse using <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code>. Otherwise, all + content passed to <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> will be parsed + as plain text.</p> + + <p>If the <var title="">replace</var> argument is present and has + the value "<code title="">replace</code>", the existing entries in + the session history for the <code>Document</code> object are + removed.</p> + + <p>The method has no effect if the <code>Document</code> is still + being parsed.</p> + + <p>Throws an <code><a href="infrastructure.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the + <code>Document</code> is an <a href="dom.html#xml-documents" title="XML documents">XML + document</a>.</p> + + </dd> + + <dt><var title="">window</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( <var title="">url</var>, <var title="">name</var>, <var title="">features</var> [, <var title="">replace</var> ] )</dt> + + <dd> + + <p>Works like the <code title="dom-open"><a href="#dom-open">window.open()</a></code> + method.</p> + + </dd> + + </dl><h4 id="closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-close"><a href="#dom-document-close">close</a></code>()</dt> + + <dd> + + <p>Closes the input stream that was opened by the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> method.</p> + + <p>Throws an <code><a href="infrastructure.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the + <code>Document</code> is an <a href="dom.html#xml-documents" title="XML documents">XML + document</a>.</p> + + </dd> + + </dl><h4 id="document.write"><span class="secno">3.4.3 </span><code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-write"><a href="#dom-document-write">write</a></code>(<var title="">text</var>...)</dt> + + <dd> + + <p>Adds the given string(s) to the <code>Document</code>'s input + stream. If necessary, calls the <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method implicitly + first.</p> + + <p>This method throws an <code><a href="infrastructure.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception + when invoked on <a href="dom.html#xml-documents">XML documents</a>.</p> + + </dd> + + </dl><h4 id="document.writeln"><span class="secno">3.4.4 </span><code title="dom-document-writeln"><a href="#dom-document-writeln">document.writeln()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-writeln"><a href="#dom-document-writeln">writeln</a></code>(<var title="">text</var>...)</dt> + + <dd> + + <p>Adds the given string(s) to the <code>Document</code>'s input + stream, followed by a newline character. If necessary, calls the + <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method implicitly + first.</p> + + <p>This method throws an <code><a href="infrastructure.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception + when invoked on <a href="dom.html#xml-documents">XML documents</a>.</p> + + </dd> + + </dl><h4 id="innerhtml"><span class="secno">3.4.5 </span><code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-innerhtml" title="dom-innerHTML"><code>innerHTML</code></dfn> IDL + attribute represents the markup of the node's contents.</p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns a fragment of HTML or XML that represents the + <code>Document</code>.</p> + + <p>Can be set, to replace the <code>Document</code>'s contents + with the result of parsing the given string.</p> + + <p>In the case of <a href="dom.html#xml-documents">XML documents</a>, will throw an + <code><a href="infrastructure.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the <code>Document</code> cannot + be serialized to XML, and a <code><a href="infrastructure.html#syntax_err">SYNTAX_ERR</a></code> if the given + string is not well-formed.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns a fragment of HTML or XML that represents the element's + contents.</p> + + <p>Can be set, to replace the contents of the element with nodes + parsed from the given string.</p> + + <p>In the case of <a href="dom.html#xml-documents">XML documents</a>, will throw an + <code><a href="infrastructure.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the element cannot be serialized + to XML, and a <code><a href="infrastructure.html#syntax_err">SYNTAX_ERR</a></code> if the given string is not + well-formed.</p> + + </dd> + + </dl><h4 id="outerhtml"><span class="secno">3.4.6 </span><code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-outerhtml" title="dom-outerHTML"><code>outerHTML</code></dfn> IDL + attribute represents the markup of the element and its contents.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns a fragment of HTML or XML that represents the element + and its contents.</p> + + <p>Can be set, to replace the element with nodes parsed from the + given string.</p> + + <p>In the case of <a href="dom.html#xml-documents">XML documents</a>, will throw an + <code><a href="infrastructure.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the element cannot be serialized + to XML, and a <code><a href="infrastructure.html#syntax_err">SYNTAX_ERR</a></code> if the given string is not + well-formed.</p> + + <p>Throws a <code><a href="infrastructure.html#no_modification_allowed_err">NO_MODIFICATION_ALLOWED_ERR</a></code> exception if + the parent of the element is the <code>Document</code> + node.</p> + + </dd> + + </dl><h4 id="insertadjacenthtml"><span class="secno">3.4.7 </span><code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML()</a></code></h4><dl class="domintro"><dt><var title="">element</var> . <code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML</a></code>(<var title="">position</var>, <var title="">text</var>)</dt> + + <dd> + + <p>Parses the given string <var title="">text</var> as HTML or XML + and inserts the resulting nodes into the tree in the position + given by the <var title="">position</var> argument, as + follows:</p> + + <dl><dt>"beforebegin"</dt> + <dd>Before the element itself.</dd> + <dt>"afterbegin"</dt> + <dd>Just inside the element, before its first child.</dd> + <dt>"beforeend"</dt> + <dd>Just inside the element, after its last child.</dd> + <dt>"afterend"</dt> + <dd>After the element itself.</dd> + </dl><p>Throws a <code><a href="infrastructure.html#syntax_err">SYNTAX_ERR</a></code> exception the arguments have + invalid values (e.g., in the case of <a href="dom.html#xml-documents">XML documents</a>, + if the given string is not well-formed).</p> + + <p>Throws a <code><a href="infrastructure.html#no_modification_allowed_err">NO_MODIFICATION_ALLOWED_ERR</a></code> exception if + the given position isn't possible (e.g. inserting elements after + the root element of a <code>Document</code>).</p> + + </dd> + + </dl></body></html> \ No newline at end of file Index: dom.html =================================================================== RCS file: /sources/public/html5/spec-author-view/dom.html,v retrieving revision 1.498 retrieving revision 1.499 diff -u -d -r1.498 -r1.499 --- dom.html 7 Nov 2009 07:19:48 -0000 1.498 +++ dom.html 7 Nov 2009 07:26:50 -0000 1.499 @@ -0,0 +1,1402 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>3 Semantics, structure, and APIs of HTML documents — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1372 lines suppressed...] + <li><code><a href="text-level-semantics.html#the-time-element">time</a></code></li> + <li><code><a href="text-level-semantics.html#the-var-element">var</a></code></li> + <li><code><a href="video.html#video">video</a></code></li> + <li><a href="#text-content" title="text content">Text</a></li> + </ul><p>As a general rule, elements whose content model allows any + <a href="#phrasing-content">phrasing content</a> should have either at least one + descendant <a href="infrastructure.html#text-node">text node</a> that is not <a href="#inter-element-whitespace">inter-element + whitespace</a>, or at least one descendant element node that is + <a href="embedded-content-0.html#embedded-content">embedded content</a>. For the purposes of this requirement, + nodes that are descendants of <code><a href="text-level-semantics.html#the-del-element">del</a></code> elements must not be + counted as contributing to the ancestors of the <code><a href="text-level-semantics.html#the-del-element">del</a></code> + element.</p><p class="note">Most elements that are categorized as phrasing + content can only contain elements that are themselves categorized as + phrasing content, not any flow content.</p><p><dfn id="text-content" title="text content">Text</dfn>, in the context of content + models, means <a href="infrastructure.html#text-node" title="text node">text nodes</a>. <a href="#text-content" title="text content">Text</a> is sometimes used as a content + model on its own, but is also <a href="#phrasing-content">phrasing content</a>, and can + be <a href="#inter-element-whitespace">inter-element whitespace</a> (if the <a href="infrastructure.html#text-node" title="text + node">text nodes</a> are empty or contain just <a href="#space-character" title="space + character">space characters</a>).</p></body></html> \ No newline at end of file Index: acknowledgements.html =================================================================== RCS file: /sources/public/html5/spec-author-view/acknowledgements.html,v retrieving revision 1.495 retrieving revision 1.496 diff -u -d -r1.495 -r1.496 --- acknowledgements.html 7 Nov 2009 07:19:48 -0000 1.495 +++ acknowledgements.html 7 Nov 2009 07:26:50 -0000 1.496 @@ -0,0 +1,860 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>Acknowledgements — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="references.html" title="References" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> +<p>This is revision 1.3507.</p> + + </div><div> + <a href="references.html">← References</a> – + <a href="Overview.html#contents">Table of contents</a> + </div> + + <h2 class="no-num" id="acknowledgements">Acknowledgements</h2><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- ACKS --><p>Thanks to + + Aankhen, + Aaron Boodman, + Aaron Leventhal, + Adam Barth, + Adam Roben, + Addison Phillips, + Adele Peterson, + Adrian Bateman, + Adrian Sutton, + Agustín Fernández, + Ajai Tirumali, + Alan Plum, + Alastair Campbell, + Alex Bishop, + Alex Nicolaou, + Alex Rousskov, + Alexander J. Vincent, + Alexey Feldgendler, + Алексей Проскуряков (Alexey Proskuryakov), + Alexis Deveria, + Allan Clements, + Amos Jeffries, + Anders Carlsson, + Andreas<!-- mqmq87 -->, + Andrei Popescu, + André E. Veltstra, + Andrew Clover, + Andrew Gove, + Andrew Grieve, + Andrew Oakley, + Andrew Sidwell, + Andrew Smith, + Andrew W. Hagen, + Andy Heydon, + Andy Palay, + Anne van Kesteren, + Anthony Boyd, + Anthony Bryan, + Anthony Hickson, + Anthony Ricaud, + Antti Koivisto, + Aron Spohr, + Arphen Lin, + Aryeh Gregor, + Asbjørn Ulsberg, + Ashley Sheridan, + Aurelien Levy, + Ave Wrigley, + Ben Boyle, + Ben Godfrey, + Ben Leslie, + Ben Meadowcroft, + Ben Millard, + Benjamin Hawkes-Lewis, + Bert Bos, + Bijan Parsia, + Bil Corry, + Bill Mason, + Bill McCoy, + Billy Wong, + Björn Höhrmann, + Blake Frantz, + Boris Zbarsky, + Brad Fults, + Brad Neuberg, + Brady Eidson, + Brendan Eich, + Brenton Simpson, + Brett Wilson, + Brett Zamir, + Brian Campbell, + Brian Korver, + Brian Ryner, + Brian Smith, + Brian Wilson, + Bruce D'Arcus, + Bruce Lawson, + Bruce Miller, + C. Williams, + Cameron McCormack, + Cao Yipeng, + Carlos Perelló Marín, + Chao Cai, + 윤석찬 (Channy Yun), + Charl van Niekerk, + Charles Iliya Krempeaux, + Charles McCathieNevile, + Chris Cressman, + Chris Morris, + Chris Pearce, + Christian Biesinger, + Christian Johansen, + Christian Schmidt, + Christopher Aillon, + Chriswa, + Cole Robison, + Colin Fine, + Collin Jackson, + Corprew Reed, + Craig Cockburn, + Csaba Gabor, + Daniel Barclay, + Daniel Bratell, + Daniel Brooks, + Daniel Brumbaugh Keeney, + Daniel Davis, + Daniel Glazman, + Daniel Peng, + Daniel Schattenkirchner, + Daniel Spång, + Daniel Steinberg, + Danny Sullivan, + Darin Adler, + Darin Fisher, + Darxus, + Dave Camp, + Dave Hodder, + Dave Lampton, + Dave Singer, + Dave Townsend<!-- Mossop on moz irc -->, + David Baron, + David Bloom, + David Carlisle, + David E. Cleary, + David Egan Evans, + David Flanagan, + David Gerard, + David Håsäther, + David Hyatt, + David I. Lehn, + David Matja, + David Remahl, + David Smith, + David Woolley, + DeWitt Clinton, + Dean Edridge, + Dean Edwards, + Debi Orton, + Derek Featherstone, + Dimitri Glazkov, + Dimitry Golubovsky, + Divya Manian, + dolphinling, + Dominique Hazaël-Massieux, + Doron Rosenberg, + Doug Kramer, + Drew Wilson, + Edmund Lai, + Eduard Pascual, + Edward O'Connor, + Edward Welbourne, + Edward Z. Yang, + Eira Monstad, + Eliot Graff, + Elliott Sprehn, + Elliotte Harold, + Eric Carlson, + Eric Law, + Eric Rescorla, + Erik Arvidsson, + Evan Martin, + Evan Prodromou, + Evert, + fantasai, + Felix Sasaki, + Francesco Schwarz, + Franck 'Shift' Quélain, + Frank Barchard, + 鵜飼文敏 (Fumitoshi Ukai), + Futomi Hatano, + Gavin Carothers, + Gareth Rees, + Garrett Smith, + Geoffrey Garen, + Geoffrey Sneddon, + George Lund, + Giovanni Campagna, + Graham Klyne, + Greg Botten, + Greg Houston, + Gregg Tavares, + Grey, + Gytis Jakutonis, + Håkon Wium Lie, + Hallvord Reiar Michaelsen Steen, + Hans S. Tømmerhalt, + Henri Sivonen, + Henrik Lied, + Henry Mason, + Hugh Winkler, + Ian Bicking, + Ian Davis, + Ignacio Javier, + Ivan Enderlin, + Ivo Emanuel Gonçalves, + J. King, + Jacques Distler, + James Craig, + James Graham, + James Justin Harrell, + James M Snell, + James Perrett, + James Robinson, + Jan-Klaas Kollhof, + Jason Kersey, + Jason Lustig, + Jason White, + Jasper Bryant-Greene, + Jed Hartman, + Jeff Balogh, + Jeff Cutsinger, + Jeff Schiller, + Jeff Walden, + Jeffrey Zeldman, + 胡慧鋒 (Jennifer Braithwaite), + Jens Bannmann, + Jens Fendler, + Jens Lindström, + Jens Meiert, + Jeremy Keith, + Jeremy Orlow, + Jeroen van der Meer, + Jian Li, + Jim Jewett, + Jim Ley, + Jim Meehan, + Jjgod Jiang, + João Eiras, + Joe Clark, + Joe Gregorio, + Joel Spolsky, + Johan Herland, + John Boyer, + John Bussjaeger, + John Carpenter, + John Fallows, + John Foliot, + John Harding, + John Keiser, + John Snyders, + John-Mark Bell, + Johnny Stenback, + Jon Ferraiolo, + Jon Gibbins, + Jon Perlow, + Jonas Sicking, + Jonathan Rees, + Jonathan Worent, + Jonny Axelsson, + Jorgen Horstink, + Jorunn Danielsen Newth, + Joseph Kesselman, + Joseph Pecoraro, + Josh Aas, + Josh Levenberg, + Joshua Randall, + Jukka K. Korpela, + Jules Clément-Ripoche, + Julian Reschke, + Justin Sinclair, + Kai Hendry, + Kartikaya Gupta, + Kathy Walton, + Kelly Norton, + Kevin Benson, + Kornél Pál, + Kornel Lesinski, + Kristof Zelechovski, + 黒澤剛志 (KUROSAWA Takeshi), + Kyle Hofmann<!-- Ozob -->, + Léonard Bouchet, + Lachlan Hunt, + Larry Masinter, + Larry Page, + Lars Gunther<!-- Keryx Web -->, + Lars Solberg, + Laura Granka, + Laura L. Carlson, + Laura Wisewell, + Laurens Holst, + Lee Kowalkowski, + Leif Halvard Silli, + Lenny Domnitser, + Leons Petrazickis, + Logan<!-- on moz irc -->, + Loune, + Luke Kenneth Casson Leighton, + Maciej Stachowiak, + Magnus Kristiansen<!-- Dashiva -->, + Maik Merten, + Malcolm Rowe, + Mark Birbeck, + Mark Miller, + Mark Nottingham, + Mark Pilgrim, + Mark Rowe<!--bdash-->, + Mark Schenk, + Mark Wilton-Jones, + Martijn Wargers, + Martin Atkins, + Martin Dürst, + Martin Honnen, + Martin Kutschker, + Masataka Yakura, + Mathieu Henri, + Matt Schmidt, + Matt Wright, + Matthew Gregan, + Matthew Mastracci, + Matthew Raymond, + Matthew Thomas, + Mattias Waldau, + Max Romantschuk, + Menno van Slooten, + Micah Dubinko, + Michael 'Ratt' Iannarelli, + Michael A. Nachbaur, + Michael A. Puls II<!--Shadow2531-->, + Michael Carter, + Michael Daskalov, + Michael Enright, + Michael Gratton, + Michael Nordman, + Michael Powers, + Michael(tm) Smith, + Michel Fortin, + Michelangelo De Simone, + Michiel van der Blonk, + Mihai Şucan<!-- from ROBO Design -->, + Mike Brown, + Mike Dierken<!-- S. Mike Dierken -->, + Mike Dixon, + Mike Schinkel, + Mike Shaver, + Mikko Rantalainen, + Mohamed Zergaoui<!-- Innovimax SARL -->, + Ms2ger, + NARUSE Yui, + Neil Deakin, + Neil Rashbrook, + Neil Soiffer, + Nicholas Shanks, + Nicolas Gallagher, + Noah Mendelsohn, + Noah Slater, + Ojan Vafai, + Olaf Hoffmann, + Olav Junker Kjær, + Oldřich Vetešník, + Oliver Hunt, + Oliver Rigby, + Olivier Gendrin, + Olli Pettay, + Patrick H. Lauke, + Paul Norman, + Per-Erik Brodin, + Peter Karlsson, + Peter Kasting, + Peter Stark, + Peter-Paul Koch, + Philip Jägenstedt, + Philip Taylor, + Philip TAYLOR<!-- a different one -->, + Prateek Rungta, + Rachid Finge, + Rajas Moonka, + Ralf Stoltze, + Ralph Giles, + Raphael Champeimont, + Remco, + Remy Sharp, + Rene Saarsoo, + Rene Stach, + Ric Hardacre, + Rich Doughty, + Richard Ishida, + Rigo Wenning, + Rikkert Koppes, + Rimantas Liubertas, + Robert Blaut, + Robert Collins, + Robert O'Callahan, + Robert Sayre, + Robin Berjon, + Roland Steiner, + Roman Ivanov, + Roy Fielding, + Ryan King, + S. Mike Dierken, + Sam Dutton, + Sam Kuper, + Sam Ruby, + Sam Weinig, + Sander van Lambalgen, + Sarven Capadisli, + Scott González, + Scott Hess, + Sean Fraser, + Sean Hogan, + Sean Knapp, + Sebastian Markbåge, + Sebastian Schnitzenbaumer, + Seth Call, + Shanti Rao, + Shaun Inman, + Shiki Okasaka, + Sierk Bornemann, + Sigbjørn Vik, + Silvia Pfeiffer, + Simon Montagu, + Simon Pieters, + Simon Spiegel, + skeww, <!-- on reddit --> + Stefan Haustein, + Stefan Santesson, + Steffen Meschkat, + Stephen Ma, + Steve Faulkner, + Steve Runyon, + Steven Bennett, + Steven Garrity, + Steven Tate, + Stewart Brodie, + Stuart Ballard, + Stuart Parmenter, + Subramanian Peruvemba, + Sunava Dutta, + Susan Borgrink, + Susan <!--G.--> Lesch, + Sylvain Pasche, + T. J. Crowder, + <span lang="tr" title="">Tantek Çelik</span>, + 田村健人 (TAMURA Kent), + Ted Mielczarek, + Terrence Wood, + Thomas Broyer, + Thomas O'Connor, + Tim Altman, + Tim Johansson, + Toby Inkster, + Todd Moody, + Tom Pike, + Tommy Thorsen, + Travis Leithead, + Tyler Close, + Vladimir Vukićević, + voracity, + Wakaba, + Wayne Pollock, + Wellington Fernando de Macedo, + Will Levine, + William Swanson, + Wladimir Palant, + Wojciech Mach, + Wolfram Kriesing, + Yi-An Huang, + Yngve Nysaeter Pettersen, + Zhenbin Xu, + Zoltan Herczeg, + and + Øistein E. Andersen, + + for their useful comments, both large and small, that have led to + changes to this specification over the years.</p><p>Thanks also to everyone who has ever posted about HTML5 to their + blogs, public mailing lists, or forums, including the <a href="http://lists.w3.org/Archives/Public/public-html/">W3C + public-html list</a> and the <a href="http://www.whatwg.org/mailing-list">various WHATWG lists</a>. + + </p><p>Special thanks to Richard Williamson for creating the first + implementation of <code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code> in Safari, from which the + canvas feature was designed.</p><p>Special thanks also to the Microsoft employees who first + implemented the event-based drag-and-drop mechanism, <code title="attr-contenteditable"><a href="editing.html#attr-contenteditable">contenteditable</a></code>, and other + features first widely deployed by the Windows Internet Explorer + browser.</p><p>Thanks to the participants of the microdata usability study for + allowing us to use their mistakes as a guide for designing the + microdata feature.</p><p>Thanks to the many sources that provided inspiration for the + examples used in the specification.</p><p>Thanks also to the Microsoft blogging community for some ideas, + to the attendees of the W3C Workshop on Web Applications and + Compound Documents for inspiration, to the #mrt crew, the #mrt.no + crew, and the #whatwg crew, and to Pillar and Hedral for their ideas + and support.</p><!-- Hopefully Kam won't notice he's covered by these + acknowledgements three times! --><!-- + v2 * library of resources: + var library = new ZipFile("data.zip"); + library.onload = function() { + var sound1 = library.getAudio("sound1.wav"); // returns an Audio object + var image1 = library.getImage("image1.png"); // returns an HTMLImageElement + var doc1 = library.getXMLDocument("doc1.xml"); // returns a Document + var doc2 = library.getHTMLDocument("doc1.html"); // returns an HTMLDocument + } + or: + var library = new ResourceLoader("data.zip"); + library.add("moredata.zip"); + library.onload = function() { ... } + library.onloading = function() { + reportLoadProgress(library.progress); // 0.0 .. 1.0 + } + or: + var library = new AudioZip("sounds.zip"); + library.onload = function() { + var sound1 = library["sound1.wav"]; + sound.play(); + } + v2 * [onclick] should make element focusable; enter should send onclick ? + v2 * a fairly common situation for web authors is to have two lists, where + the contents of the second depends on the value of the first. Is there + any way we could extend the current model to include this functionality? + (e.g. bugzilla product/component ui) + v2 * quick-searchable select + v2 * include/exclude selectors (two multi-select columns with arrows to + move selected items) and that sort of thing. + http://slashdot.org/comments.pl?sid=110240&cid=9357022 + v2 * Oh, and forms need a standardized Help widget/icon. I know I can + turn my cursor into a question mark, but I'm looking for something + simple and pervasive. Maybe you can wrap fields in a help tag, just + as you do for fieldsets. And in that help tag, attributes are + available that allow for a nice, formatted, clean, full help text + popup/area/thing. + http://slashdot.org/comments.pl?sid=110240&cid=9359006 + v2 * Validating only part of a form. - Anja Lehmann + v2 * Reminder to add a way to expose access keys in buttons, i.e. + Sub&mit where & signifies the m is the access key to use. Possibly + automatic? <input accesskey="m" value="Submit"> browser would be + smart enough to underline the first instance of the access key if + it exists (case insensitive)? - kerz + [or deprecate the lot (->web apps)] + v2 * need an attribute that says "the children of this element are in + their own tabbing universe, tabindex should be relative to each + other, not to the document" + -> web apps? + v2 * make select widgets have multiple columns + or ->web apps with list view + v2 * required as a group (one of the following must be available): + + i propose something like the following: + <input type="text" group="contact" name="voicephone"> Voice phone + <input type="text" group="contact" name="fax"> Fax + <input type="text" group="contact" name="mobile"> Mobile phone + <input type="text" group="contact" name="email"> E-mail + if the user fills out none of the form fields in the "contact" + group, an error message is shown and the form is not submitted. + - Peter-Paul Koch + v2 * formatting of number fields, text fields, etc, so that when the + field is not focused, the value is displayed differently. Seems + like this would also be useful e.g. for <output> or something so + you can display localised dates, etc. + v2 * being able to select date range (from day x to day y) + v2 * ways of visualizing a linefeed in a <textarea> so it looks different + from wrapping text + v2 * all login systems have + 1. enter username and password + 2. create new account + 3. lost password + some way of integrating this into one system, since it's so common + v2 * way of identifying different sorts of mailadresses + a) mailing-list + b) person + c) department in a company ("support", "marketing" and such) + d) general mail (like "info", "mail", "contact" and such) + e) other sorts of groupings + (or ->web apps; this is talking about in mailto: links, I think) + v2 * hotswapping login identities like in windows xp + you are logged in on operamail.com, and you want to check the mail + of another user. somehow, combined with the wand or whatever, + the browser will remember the login page, and it can re-submit it + without having to load the initial page (saving time) + v2 * provide different measuring systems, like having the html indicate + fluid in both fluid ounces and liters, and the browser can display + one or the other based on regional settings in the browser or ui, + display conversions in a tooltip, or let the user decide which + format to display. + v2 * indicate "x days ago" or "y days into the future" rather than date + v2 * input control for anniversaries + v2 * only submit fields that have changed, or a way to include in the + submission a list of which form controls were changed from their + default value + v2 * have a way of marking the first option of a <select> as the default + but have it not satisfy a new required="" attribute on <select> so + that you can have selects that require a valid value. + v2 * type="time" value="now" + v2 * add something to type="number" to support basic currency and unit + formatting of input + v2 * <fieldset enabled-if-checked="myCheckboxOrRadioButton"> + ...to allow sections to only be enabled if a radio button makes it + relevant, for instance. + v2 * Yan Morin proposed a multi-column dropdown <select> or <datalist>: + _________________ + |_New_York______|V|_________________ <- input with a table link and a down arrow + |_City__________|_State_|_Country_|_| <- header of the table + | Montreal | QC | Canada |A| <- top arrow of the scroll + |>New York <| NY | US | | <- selected row + | Washington | DC | US |X| <- cursor scroll + | San Francisco | CA | US | | + |_Toronto_______|__ON___|_Canada__|V| <- bottom arrow of the scroll + + v2 * add for="" attribute to <input type="password"> so that you can + link usernames and passwords. (Jonas Sicking) + v2 * value for unchecked checkbox? + v2 * A way to specify the default button - Michael Gratton + v2 * <fieldset readonly>? + v2 * dolphinling suggests having a way to mark certain parts of a + form as being dependent on another (mutually exclusive parts of + a form) + v2 * expose the form data set, either as an object (on which one can + invoke the JSON serialiser), or in the form of a method on + HTMLFormElement that returns the form data set serialised + according to a particular encoding (defaulting to the form's + enctype="" one, probably). This would allow forms to be used + with XHR-like systems without having to manually construct the + form data set the way that is done today. + +Consistency in editorial style: + v2 * need to become consistent about whether or not to quote keyword + ("<code title="">foo</code>" vs <code>foo</code>) + v2 * make the spec consistent about whether the word "algorithm" is part of + an algorithm's name or not ("</dfn> algorithm", "</span> algorithm") + v2 * make the spec more consistent about its use of "hexadecimal" + and "base-sixteen", the order that 0-9 A-Z a-z is mentioned, + and the detail to which the spec explains how to interpret a + string as a hexadecimal number. + v2 * become more consistent about what markup we use to mark up + productions (nothing? <i>? <code>?) + v2 * use <code>Document</code> consistently instead of 'document'. + v2 * s/raise/throw/g + v2 * be clearer about arrays/lists/collections being zero-based + despite using the term "/index/th". + v2 * use the sample widgets: + <li><img alt="A text field with editable sections for each + value, with a button to pop up a dialog showing a calendar or + clock." src="sample-datetime-ui-2"></li> + <li><img alt="A calendar grid with a clock in the upper right + hand corner." src="sample-datetime-ui-3"></li> +--></body></html> \ No newline at end of file Index: the-canvas-element.html =================================================================== RCS file: /sources/public/html5/spec-author-view/the-canvas-element.html,v retrieving revision 1.497 retrieving revision 1.498 diff -u -d -r1.497 -r1.498 --- the-canvas-element.html 7 Nov 2009 07:19:49 -0000 1.497 +++ the-canvas-element.html 7 Nov 2009 07:26:51 -0000 1.498 @@ -0,0 +1,1588 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>4.8.11 The canvas element — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1558 lines suppressed...] + CSS pixels have a resolution of 96ppi, but in general the CSS pixel + resolution depends on the reading distance.) If both attributes are + specified, then one of the following statements must be true:</p><ul><li><span title=""><var title="">specified width</var> - 0.5 ≤ + <var title="">specified height</var> * <var title="">target ratio</var> ≤ + <var title="">specified width</var> + 0.5</span></li> + + <li><span title=""><var title="">specified height</var> - 0.5 ≤ + <var title="">specified width</var> / <var title="">target ratio</var> ≤ + <var title="">specified height</var> + 0.5</span></li> + + <li><span title=""><var title="">specified height</var> = <var title="">specified width</var> = 0</span></li> + + </ul><p>The <var title="">target ratio</var> is the ratio of the + intrinsic width to the intrinsic height in the resource. The <var title="">specified width</var> and <var title="">specified + height</var> are the values of the <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code> and <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code> attributes respectively.</p><p>The two attributes must be omitted if the resource in question + does not have both an intrinsic width and an intrinsic height.</p><p>If the two attributes are both zero, it indicates that the + element is not intended for the user (e.g. it might be a part of a + service to count page views).</p><p class="note">The dimension attributes are not intended to be used + to stretch the image.</p></body></html> \ No newline at end of file Index: forms.html =================================================================== RCS file: /sources/public/html5/spec-author-view/forms.html,v retrieving revision 1.497 retrieving revision 1.498 diff -u -d -r1.497 -r1.498 --- forms.html 7 Nov 2009 07:19:48 -0000 1.497 +++ forms.html 7 Nov 2009 07:26:50 -0000 1.498 @@ -0,0 +1,4675 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>4.10 Forms — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...4645 lines suppressed...] + <input type=search name=q> + <input type=submit> +</form></pre><p>If the user types in "cats" in the first field and "fur" in the + second, and then hits the submit button, then the user agent will + load <code title="">/find.cgi?t=cats&q=fur</code>.</p><p>On the other hand, consider this form:</p><pre><form action="/find.cgi" method=post enctype="multipart/form-data"> + <input type=text name=t> + <input type=search name=q> + <input type=submit> +</form></pre><p>Given the same user input, the result on submission is quite + different: the user agent instead does an HTTP POST to the given + URL, with as the entity body something like the following text:</p><pre>------kYFrd4jNJEgCervE +Content-Disposition: form-data; name="t" + +cats +------kYFrd4jNJEgCervE +Content-Disposition: form-data; name="q" + +fur +------kYFrd4jNJEgCervE--</pre></body></html> \ No newline at end of file Index: interactive-elements.html =================================================================== RCS file: /sources/public/html5/spec-author-view/interactive-elements.html,v retrieving revision 1.495 retrieving revision 1.496 diff -u -d -r1.495 -r1.496 --- interactive-elements.html 7 Nov 2009 07:19:48 -0000 1.495 +++ interactive-elements.html 7 Nov 2009 07:26:50 -0000 1.496 @@ -0,0 +1,3445 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>4.11 Interactive elements — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...3415 lines suppressed...] + <td> Wherever possible + <td> £0<sup><a href="#fn1">1</a></sup> + <tr> + <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup> + <td> Undisclosed + <td> Undisclosed + <tr> + <td> Dining<sup><a href="#fn3">3</a></sup> + <td> Camelot + <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup> + </table> + <p id="fn1">1. Assumed.</p> + <p id="fn2">2. Footwork impeccable.</p> + <p id="fn3">3. Quality described as "well".</p> + <p id="fn4">4. A lot.</p> + </dd> +</figure></pre> + + </div></body></html> \ No newline at end of file Index: editing.html =================================================================== RCS file: /sources/public/html5/spec-author-view/editing.html,v retrieving revision 1.497 retrieving revision 1.498 diff -u -d -r1.497 -r1.498 --- editing.html 7 Nov 2009 07:19:48 -0000 1.497 +++ editing.html 7 Nov 2009 07:26:50 -0000 1.498 @@ -212,4 +212,1247 @@ .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } - </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation \ No newline at end of file + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="history.html" title="6.8 Session history and navigation" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="comms.html" title="8 Communication" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> [...1219 lines suppressed...] + + + + + + + + + + + + + + + </dl><!-- +v2 (well, really v0): + "forecolor", "hilitecolor", "fontname", "fontsize", "justifyleft", + "justifycenter", "justifyright", "justifyfull", "indent", "outdent" +--></body></html> \ No newline at end of file Index: video.html =================================================================== RCS file: /sources/public/html5/spec-author-view/video.html,v retrieving revision 1.497 retrieving revision 1.498 diff -u -d -r1.497 -r1.498 --- video.html 7 Nov 2009 07:19:49 -0000 1.497 +++ video.html 7 Nov 2009 07:26:51 -0000 1.498 @@ -0,0 +1,1288 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>4.8.7 The video element — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1258 lines suppressed...] + </td><td> + </td></tr><tr><td><dfn id="event-media-ended" title="event-media-ended"><code>ended</code></dfn> + </td><td><code>Event</code> + </td><td>Playback has stopped because the end of the <a href="#media-resource">media resource</a> was reached. + </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. + + </td></tr></tbody><tbody><tr><td><dfn id="event-media-ratechange" title="event-media-ratechange"><code>ratechange</code></dfn> + </td><td><code>Event</code> + </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. + </td><td> + </td></tr><tr><td><dfn id="event-media-durationchange" title="event-media-durationchange"><code>durationchange</code></dfn> + </td><td><code>Event</code> + </td><td>The <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute has just been updated. + </td><td> + </td></tr><tr><td><dfn id="event-media-volumechange" title="event-media-volumechange"><code>volumechange</code></dfn> + </td><td><code>Event</code> + </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. + </td><td> + </td></tr></tbody></table></body></html> \ No newline at end of file Index: browsers.html =================================================================== RCS file: /sources/public/html5/spec-author-view/browsers.html,v retrieving revision 1.498 retrieving revision 1.499 diff -u -d -r1.498 -r1.499 --- browsers.html 7 Nov 2009 07:19:48 -0000 1.498 +++ browsers.html 7 Nov 2009 07:26:50 -0000 1.499 @@ -0,0 +1,896 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>6 Web browsers — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="microdata.html" title="5 Microdata" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="offline.html" title="6.7 Offline Web applications" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> +<p>This is revision 1.3507.</p> + + </div><div> + <a href="microdata.html">← 5 Microdata</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="offline.html">6.7 Offline Web applications →</a> + </div> + + <h2 id="browsers"><span class="secno">6 </span>Web browsers</h2><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h3 id="windows"><span class="secno">6.1 </span>Browsing contexts</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="browsing-context">browsing context</dfn> is an environment in which + <code>Document</code> objects are presented to the user.</p><p class="note">A tab or window in a Web browser typically contains + a <a href="#browsing-context">browsing context</a>, as does an <code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code>.</p><p>Each <a href="#browsing-context">browsing context</a> has a corresponding + <code><a href="#windowproxy">WindowProxy</a></code> object.</p><p>A <a href="#browsing-context">browsing context</a> has a <a href="history.html#session-history">session + history</a>, which lists the <code>Document</code> objects that + that <a href="#browsing-context">browsing context</a> has presented, is presenting, or + will present. At any time, one <code>Document</code> in each + <a href="#browsing-context">browsing context</a> is designated the <dfn id="active-document">active + document</dfn>.</p><p>Each <code>Document</code> has a collection of one or more <a href="#view" title="view">views</a>.</p><p>A <dfn id="view">view</dfn> is a user agent interface tied to a particular + media used for the presentation of a particular + <code>Document</code> object in some media. A view may be + interactive. Each view is represented by an + <code>AbstractView</code> object. <a href="references.html#refsDOMVIEWS">[DOMVIEWS]</a></p><p>The main <a href="#view">view</a> through which a user primarily + interacts with a user agent is the <dfn id="default-view">default view</dfn>. The + <code>AbstractView</code> object that represents this view is referred to as the <code>Document</code>'s + <code><a href="#window">Window</a></code> object. <code><a href="#windowproxy">WindowProxy</a></code> objects forward + everything to the <a href="#active-document">active document</a>'s <a href="#default-view">default + view</a>'s <code><a href="#window">Window</a></code> object.</p><p class="note">The <code title="dom-document">document</code> + attribute of an <code>AbstractView</code> object representing a + <a href="#view">view</a> gives the view's corresponding + <code>Document</code> object. <a href="references.html#refsDOMVIEWS">[DOMVIEWS]</a></p><p class="note">In general, there is a 1-to-1 mapping from the + <code><a href="#window">Window</a></code> object to the <code>Document</code> object. In + one particular case, a set of <a href="#view" title="view">views</a> can be + reused for the presentation of a second <code>Document</code> in the + same <a href="#browsing-context">browsing context</a>, such that the mapping is then + 2:1. This occurs when a <a href="#browsing-context">browsing context</a> is <a href="#navigate" title="navigate">navigated</a> from the initial + <code><a href="#about:blank">about:blank</a></code> <code>Document</code> to another, with + <a href="#replacement-enabled">replacement enabled</a>.</p><p class="note">A typical Web browser has one obvious + <a href="#view">view</a> per <code>Document</code>: the browser's window + (screen media). This is typically the <a href="#default-view">default view</a>. If + a page is printed, however, a second view becomes evident, that of + the print media. The two views always share the same underlying + <code>Document</code> object, but they have a different presentation + of that object. A speech browser might have a different + <a href="#default-view">default view</a>, using the speech media.</p><p class="note">A <code>Document</code> does not necessarily have a + <a href="#browsing-context">browsing context</a> associated with it. In particular, + data mining tools are likely to never instantiate browsing + contexts.</p><hr><p>A <a href="#browsing-context">browsing context</a> can have a <dfn id="creator-browsing-context">creator browsing + context</dfn>, the <a href="#browsing-context">browsing context</a> that was + responsible for its creation. </p><p>If a <a href="#browsing-context">browsing context</a> <var title="">A</var> has a + <a href="#creator-browsing-context">creator browsing context</a>, then the + <code>Document</code> that was the <a href="#active-document">active document</a> of + that <a href="#creator-browsing-context">creator browsing context</a> at the time <var title="">A</var> was created is the <dfn id="creator-document">creator + <code>Document</code></dfn>.</p><h4 id="nested-browsing-contexts"><span class="secno">6.1.1 </span>Nested browsing contexts</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Certain elements (for example, <code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code> elements) can + instantiate further <a href="#browsing-context" title="browsing context">browsing + contexts</a>. These are called <dfn id="nested-browsing-context" title="nested browsing + context">nested browsing contexts</dfn>. If a browsing context <var title="">P</var> has an element <var title="">E</var> in one of its + <code>Document</code>s <var title="">D</var> that nests another + browsing context <var title="">C</var> inside it, then <var title="">P</var> is said to be the <dfn id="parent-browsing-context">parent browsing + context</dfn> of <var title="">C</var>, <var title="">C</var> is + said to be a <dfn id="child-browsing-context">child browsing context</dfn> of <var title="">P</var>, <var title="">C</var> is said to be <dfn id="browsing-context-nested-through" title="browsing context nested through">nested through</dfn> <var title="">D</var>, and <var title="">E</var> is said to be the + <dfn id="browsing-context-container">browsing context container</dfn> of <var title="">C</var>.</p><p>A browsing context <var title="">A</var> is said to be an + ancestor of a browsing context <var title="">B</var> if there exists + a browsing context <var title="">A'</var> that is a <a href="#child-browsing-context">child + browsing context</a> of <var title="">A</var> and that is itself + an ancestor of <var title="">B</var>, or if there is a browsing + context <var title="">P</var> that is a <a href="#child-browsing-context">child browsing + context</a> of <var title="">A</var> and that is the <a href="#parent-browsing-context">parent + browsing context</a> of <var title="">B</var>.</p><p>The browsing context with no <a href="#parent-browsing-context">parent browsing context</a> + is the <dfn id="top-level-browsing-context">top-level browsing context</dfn> of all the browsing + contexts <a href="#nested-browsing-context" title="nested browsing context">nested</a> within + it (either directly or indirectly through other nested browsing + contexts).</p><p>The transitive closure of <a href="#parent-browsing-context" title="parent browsing + context">parent browsing contexts</a> for a <a href="#nested-browsing-context">nested browsing + context</a> gives the list of <dfn id="ancestor-browsing-context" title="ancestor browsing + context">ancestor browsing contexts</dfn>.</p><p>A <code>Document</code> is said to be <dfn id="fully-active">fully active</dfn> + when it is the <a href="#active-document">active document</a> of its <a href="#browsing-context">browsing + context</a>, and either its browsing context is a <a href="#top-level-browsing-context">top-level + browsing context</a>, or the <code>Document</code> <a href="#browsing-context-nested-through" title="browsing context nested through">through which</a> that + browsing context is <a href="#nested-browsing-context" title="nested browsing + context">nested</a> is itself <a href="#fully-active">fully active</a>.</p><p>Because they are nested through an element, <a href="#child-browsing-context" title="child + browsing context">child browsing contexts</a> are always tied to + a specific <code>Document</code> in their <a href="#parent-browsing-context">parent browsing + context</a>. User agents must not allow the user to interact with + <a href="#child-browsing-context" title="child browsing context">child browsing contexts</a> + of elements that are in <code>Document</code>s that are not + 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 + browsing context flag</a> set, if it is embedded through an + <code><a href="text-level-semantics.html#the-iframe-element">iframe</a></code> element with a <code title="attr-iframe-seamless"><a href="text-level-semantics.html#attr-iframe-seamless">seamless</a></code> attribute.</p><h5 id="navigating-nested-browsing-contexts-in-the-dom"><span class="secno">6.1.1.1 </span>Navigating nested browsing contexts in the DOM</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-top"><a href="#dom-top">top</a></code></dt> + + <dd> + + <p>Returns the <code><a href="#windowproxy">WindowProxy</a></code> for the <a href="#top-level-browsing-context">top-level browsing context</a>.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-parent"><a href="#dom-parent">parent</a></code></dt> + + <dd> + + <p>Returns the <code><a href="#windowproxy">WindowProxy</a></code> for the <a href="#parent-browsing-context">parent browsing context</a>.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-frameElement"><a href="#dom-frameelement">frameElement</a></code></dt> + + <dd> + + <p>Returns the <code>Element</code> for the <a href="#browsing-context-container">browsing context container</a>.</p> + + <p>Returns null if there isn't one.</p> + + <p>Throws a <code><a href="infrastructure.html#security_err">SECURITY_ERR</a></code> exception in cross-origin situations.</p> + + </dd> + + </dl><h4 id="auxiliary-browsing-contexts"><span class="secno">6.1.2 </span>Auxiliary browsing contexts</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>It is possible to create new browsing contexts that are related + to a <a href="#top-level-browsing-context">top-level browsing context</a> without being nested + through an element. Such browsing contexts are called <dfn id="auxiliary-browsing-context" title="auxiliary browsing context">auxiliary browsing + contexts</dfn>. Auxiliary browsing contexts are always <a href="#top-level-browsing-context" title="top-level browsing context">top-level browsing + contexts</a>.</p><p>An <a href="#auxiliary-browsing-context">auxiliary browsing context</a> has an <dfn id="opener-browsing-context">opener + browsing context</dfn>, which is the <a href="#browsing-context">browsing context</a> + from which the <a href="#auxiliary-browsing-context">auxiliary browsing context</a> was created, + and it has a <dfn id="furthest-ancestor-browsing-context">furthest ancestor browsing context</dfn>, which is + the <a href="#top-level-browsing-context">top-level browsing context</a> of the <a href="#opener-browsing-context">opener + browsing context</a> when the <a href="#auxiliary-browsing-context">auxiliary browsing + context</a> was created.</p><h5 id="navigating-auxiliary-browsing-contexts-in-the-dom"><span class="secno">6.1.2.1 </span>Navigating auxiliary browsing contexts in the DOM</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-opener" title="dom-opener"><code>opener</code></dfn> IDL + attribute on the <code><a href="#window">Window</a></code> object must return the + <code><a href="#windowproxy">WindowProxy</a></code> object of the <a href="#browsing-context">browsing context</a> + from which the current <a href="#browsing-context">browsing context</a> was created + (its <a href="#opener-browsing-context">opener browsing context</a>), if there is one and it + is still available.</p><h4 id="secondary-browsing-contexts"><span class="secno">6.1.3 </span>Secondary browsing contexts</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>User agents may support <dfn id="secondary-browsing-context" title="secondary browsing + context">secondary browsing contexts</dfn>, which are <a href="#browsing-context" title="browsing context">browsing contexts</a> that form part of + the user agent's interface, apart from the main content area.</p><h4 id="browsing-context-names"><span class="secno">6.1.4 </span>Browsing context names</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Browsing contexts can have a <dfn id="browsing-context-name">browsing context name</dfn>. By + default, a browsing context has no name (its name is not set).</p><p>A <dfn id="valid-browsing-context-name">valid browsing context name</dfn> is any string with at + least one character that does not start with a U+005F LOW LINE + character. (Names starting with an underscore are reserved for + special keywords.)</p><p>A <dfn id="valid-browsing-context-name-or-keyword">valid browsing context name or keyword</dfn> is any string + that is either a <a href="#valid-browsing-context-name">valid browsing context name</a> or that is + an <a href="infrastructure.html#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><h3 id="the-window-object"><span class="secno">6.2 </span>The <code><a href="#window">Window</a></code> object</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">[OverrideBuiltins] +interface <dfn id="window">Window</dfn> { + // the current browsing context + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-window" title="dom-window">window</a>; + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-self" title="dom-self">self</a>; + attribute DOMString <a href="#dom-name" title="dom-name">name</a>; + [PutForwards=href] readonly attribute <a href="history.html#location">Location</a> <a href="#dom-location" title="dom-location">location</a>; + readonly attribute <a href="history.html#history-0">History</a> <a href="#dom-history" title="dom-history">history</a>; + readonly attribute <a href="editing.html#undomanager">UndoManager</a> <a href="#dom-undomanager" title="dom-undoManager">undoManager</a>; + <a href="editing.html#selection-0">Selection</a> <a href="#dom-getselection" title="dom-getSelection">getSelection</a>(); + [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-locationbar" title="dom-window-locationbar">locationbar</a>; + [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-menubar" title="dom-window-menubar">menubar</a>; + [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-personalbar" title="dom-window-personalbar">personalbar</a>; + [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-scrollbars" title="dom-window-scrollbars">scrollbars</a>; + [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-statusbar" title="dom-window-statusbar">statusbar</a>; + [Replaceable] readonly attribute <a href="#barprop">BarProp</a> <a href="#dom-window-toolbar" title="dom-window-toolbar">toolbar</a>;<!-- + [Replaceable] readonly attribute <span>BarProp</span> <span title="dom-window-directories">directories</span>; // legacy (Gecko-only) --> + void <a href="#dom-window-close" title="dom-window-close">close</a>(); + void <a href="#dom-window-focus" title="dom-window-focus">focus</a>(); + void <a href="#dom-window-blur" title="dom-window-blur">blur</a>(); + + // other browsing contexts + [Replaceable] readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-frames" title="dom-frames">frames</a>; + [Replaceable] readonly attribute unsigned long <a href="#dom-length" title="dom-length">length</a>; + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-top" title="dom-top">top</a>; + [Replaceable] readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-opener" title="dom-opener">opener</a>; + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-parent" title="dom-parent">parent</a>; + readonly attribute <span>Element</span> <a href="#dom-frameelement" title="dom-frameElement">frameElement</a>; + <a href="#windowproxy">WindowProxy</a> <a href="#dom-open" title="dom-open">open</a>(in optional DOMString url, in optional DOMString target, in optional DOMString features, in optional DOMString replace); + <a href="#dom-window-item" title="dom-window-item">getter</a> <a href="#windowproxy">WindowProxy</a> (in unsigned long index); + <a href="#dom-window-nameditem" title="dom-window-namedItem">getter</a> <a href="#windowproxy">WindowProxy</a> (in DOMString name); + + // the user agent + readonly attribute <a href="#navigator">Navigator</a> <a href="#dom-navigator" title="dom-navigator">navigator</a>; <!-- IE also has window.clientInformation === window.navigator --> + readonly attribute <a href="offline.html#applicationcache">ApplicationCache</a> <a href="#dom-applicationcache" title="dom-applicationCache">applicationCache</a>; + + // user prompts + void <a href="#dom-alert" title="dom-alert">alert</a>(in DOMString message); + boolean <a href="#dom-confirm" title="dom-confirm">confirm</a>(in DOMString message); + DOMString <a href="#dom-prompt" title="dom-prompt">prompt</a>(in DOMString message, in optional DOMString default); + void <a href="#dom-print" title="dom-print">print</a>(); + any <a href="#dom-showmodaldialog" title="dom-showModalDialog">showModalDialog</a>(in DOMString url, in optional any argument<!--, in optional DOMString features-->); + + // <a href="comms.html#crossDocumentMessages">cross-document messaging</a> + void <a href="#dom-window-postmessage-2" title="dom-window-postMessage-2">postMessage</a>(in any message, in DOMString targetOrigin); + void <a href="#dom-window-postmessage-3" title="dom-window-postMessage-3">postMessage</a>(in any message, in <a href="comms.html#messageportarray">MessagePortArray</a> ports, in DOMString targetOrigin); + + // <a href="#event-handler-idl-attributes">event handler IDL attributes</a> + attribute <a href="#function">Function</a> <a href="#handler-onabort" title="handler-onabort">onabort</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onafterprint" title="handler-window-onafterprint">onafterprint</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onbeforeprint" title="handler-window-onbeforeprint">onbeforeprint</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onbeforeunload" title="handler-window-onbeforeunload">onbeforeunload</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onblur" title="handler-window-onblur">onblur</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncanplay" title="handler-oncanplay">oncanplay</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>; + attribute <a href="#function">Function</a> <a href="#handler-onchange" title="handler-onchange">onchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onclick" title="handler-onclick">onclick</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondblclick" title="handler-ondblclick">ondblclick</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondrag" title="handler-ondrag">ondrag</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragend" title="handler-ondragend">ondragend</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragenter" title="handler-ondragenter">ondragenter</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragleave" title="handler-ondragleave">ondragleave</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragover" title="handler-ondragover">ondragover</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragstart" title="handler-ondragstart">ondragstart</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondrop" title="handler-ondrop">ondrop</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onemptied" title="handler-onemptied">onemptied</a>; + attribute <a href="#function">Function</a> <a href="#handler-onended" title="handler-onended">onended</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onerror" title="handler-window-onerror">onerror</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onfocus" title="handler-window-onfocus">onfocus</a>; + attribute <a href="#function">Function</a> <a href="#handler-onformchange" title="handler-onformchange">onformchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onforminput" title="handler-onforminput">onforminput</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onhashchange" title="handler-window-onhashchange">onhashchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-oninput" title="handler-oninput">oninput</a>; + attribute <a href="#function">Function</a> <a href="#handler-oninvalid" title="handler-oninvalid">oninvalid</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeydown" title="handler-onkeydown">onkeydown</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeypress" title="handler-onkeypress">onkeypress</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeyup" title="handler-onkeyup">onkeyup</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onload" title="handler-window-onload">onload</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadstart" title="handler-onloadstart">onloadstart</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onmessage" title="handler-window-onmessage">onmessage</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousedown" title="handler-onmousedown">onmousedown</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousemove" title="handler-onmousemove">onmousemove</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseout" title="handler-onmouseout">onmouseout</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseover" title="handler-onmouseover">onmouseover</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseup" title="handler-onmouseup">onmouseup</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onoffline" title="handler-window-onoffline">onoffline</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-ononline" title="handler-window-ononline">ononline</a>; + attribute <a href="#function">Function</a> <a href="#handler-onpause" title="handler-onpause">onpause</a>; + attribute <a href="#function">Function</a> <a href="#handler-onplay" title="handler-onplay">onplay</a>; + attribute <a href="#function">Function</a> <a href="#handler-onplaying" title="handler-onplaying">onplaying</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onpagehide" title="handler-window-onpagehide">onpagehide</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onpageshow" title="handler-window-onpageshow">onpageshow</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onpopstate" title="handler-window-onpopstate">onpopstate</a>; + attribute <a href="#function">Function</a> <a href="#handler-onprogress" title="handler-onprogress">onprogress</a>; + attribute <a href="#function">Function</a> <a href="#handler-onratechange" title="handler-onratechange">onratechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onreadystatechange" title="handler-onreadystatechange">onreadystatechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onredo" title="handler-window-onredo">onredo</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onresize" title="handler-window-onresize">onresize</a>; + attribute <a href="#function">Function</a> <a href="#handler-onscroll" title="handler-onscroll">onscroll</a>; + attribute <a href="#function">Function</a> <a href="#handler-onseeked" title="handler-onseeked">onseeked</a>; + attribute <a href="#function">Function</a> <a href="#handler-onseeking" title="handler-onseeking">onseeking</a>; + attribute <a href="#function">Function</a> <a href="#handler-onselect" title="handler-onselect">onselect</a>; + attribute <a href="#function">Function</a> <a href="#handler-onshow" title="handler-onshow">onshow</a>; + attribute <a href="#function">Function</a> <a href="#handler-onstalled" title="handler-onstalled">onstalled</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onstorage" title="handler-window-onstorage">onstorage</a>; + attribute <a href="#function">Function</a> <a href="#handler-onsubmit" title="handler-onsubmit">onsubmit</a>; + attribute <a href="#function">Function</a> <a href="#handler-onsuspend" title="handler-onsuspend">onsuspend</a>; + attribute <a href="#function">Function</a> <a href="#handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onundo" title="handler-window-onundo">onundo</a>; + attribute <a href="#function">Function</a> <a href="#handler-window-onunload" title="handler-window-onunload">onunload</a>; + attribute <a href="#function">Function</a> <a href="#handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onwaiting" title="handler-onwaiting">onwaiting</a>; +}; +<a href="#window">Window</a> implements <span>EventTarget</span>;</pre><!-- for more features to add here, look here: + http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp + http://www.mozilla.org/docs/dom/domref/dom_window_ref.html + http://lxr.mozilla.org/mozilla/source/dom/public/idl/base/nsIDOMWindow.idl - scrollBy, etc + http://lxr.mozilla.org/mozilla/source/dom/public/idl/base/nsIDOMWindowInternal.idl - DOM level 0 +--><dl class="domintro"><dt><var title="">window</var> . <code title="dom-window"><a href="#dom-window">window</a></code></dt> + <dt><var title="">window</var> . <code title="dom-frames"><a href="#dom-frames">frames</a></code></dt> + <dt><var title="">window</var> . <code title="dom-self"><a href="#dom-self">self</a></code></dt> + + <dd> + + <p>These attributes all return <var title="">window</var>.</p> + + </dd> + + </dl><h4 id="apis-for-creating-and-navigating-browsing-contexts-by-name"><span class="secno">6.2.1 </span>APIs for creating and navigating browsing contexts by name</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> = <var title="">window</var> . <code title="dom-open"><a href="#dom-open">open</a></code>( [ <var title="">url</var> [, <var title="">target</var> [, <var title="">features</var> [, <var title="">replace</var> ] ] ] ] )</dt> + + <dd> + + <p>Opens a window to show <var title="">url</var> (defaults to + <code><a href="#about:blank">about:blank</a></code>), and returns it. The <var title="">target</var> argument gives the name of the new + window. If a window exists with that name already, it is + reused. The <var title="">replace</var> attribute, if true, means + that whatever page is currently open in that window will be + removed from the window's session history. The <var title="">features</var> argument is ignored.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-name"><a href="#dom-name">name</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the name of the window.</p> + + <p>Can be set, to change the name.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-close">close</code>()</dt> + + <dd> + + <p>Closes the window.</p> + + </dd> + + </dl><h4 id="accessing-other-browsing-contexts"><span class="secno">6.2.2 </span>Accessing other browsing contexts</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-length"><a href="#dom-length">length</a></code></dt> + + <dd> + + <p>Returns the number of <a href="#child-browsing-context" title="child browsing + context">child browsing contexts</a>.</p> + + </dd> + + <dt><var title="">window</var>[<var title="">index</var>]</dt> + + <dd> + + <p>Returns the indicated <a href="#child-browsing-context">child browsing context</a>.</p> + + </dd> + + </dl><h4 id="named-access-on-the-window-object"><span class="secno">6.2.3 </span>Named access on the <code><a href="#window">Window</a></code> object</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var>[<var title="">name</var>]</dt> + + <dd> + + <p>Returns the indicated <a href="#child-browsing-context">child browsing context</a>.</p> + + </dd> + + </dl><h4 id="browser-interface-elements"><span class="secno">6.2.4 </span>Browser interface elements</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>To allow Web pages to integrate with Web browsers, certain Web + browser interface elements are exposed in a limited way to scripts + in Web pages.</p><p>Each interface element is represented by a <code><a href="#barprop">BarProp</a></code> + object:</p><pre class="idl">interface <dfn id="barprop">BarProp</dfn> { + attribute boolean <a href="#dom-barprop-visible" title="dom-BarProp-visible">visible</a>; +};</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-window-locationbar"><a href="#dom-window-locationbar">locationbar</a></code> . <code title="dom-BarProp-visible"><a href="#dom-barprop-visible">visible</a></code></dt> + <dd> + <p>Returns true if the location bar is visible; otherwise, returns false.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-window-menubar"><a href="#dom-window-menubar">menubar</a></code> . <code title="dom-BarProp-visible"><a href="#dom-barprop-visible">visible</a></code></dt> + <dd> + <p>Returns true if the menu bar is visible; otherwise, returns false.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-window-personalbar"><a href="#dom-window-personalbar">personalbar</a></code> . <code title="dom-BarProp-visible"><a href="#dom-barprop-visible">visible</a></code></dt> + <!--<dt><var title="">window</var> . <code title="dom-window-directories">directories</code> . <code title="dom-BarProp-visible">visible</code></dt>--> + <dd> + <p>Returns true if the personal bar is visible; otherwise, returns false.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-window-scrollbars"><a href="#dom-window-scrollbars">scrollbars</a></code> . <code title="dom-BarProp-visible"><a href="#dom-barprop-visible">visible</a></code></dt> + <dd> + <p>Returns true if the scroll bars are visible; otherwise, returns false.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-window-statusbar"><a href="#dom-window-statusbar">statusbar</a></code> . <code title="dom-BarProp-visible"><a href="#dom-barprop-visible">visible</a></code></dt> + <dd> + <p>Returns true if the status bar is visible; otherwise, returns false.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-window-toolbar"><a href="#dom-window-toolbar">toolbar</a></code> . <code title="dom-BarProp-visible"><a href="#dom-barprop-visible">visible</a></code></dt> + <dd> + <p>Returns true if the toolbar is visible; otherwise, returns false.</p> + </dd> + + </dl><h4 id="relaxing-the-same-origin-restriction"><span class="secno">6.2.5 </span>Relaxing the same-origin restriction</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-domain"><a href="#dom-document-domain">domain</a></code> [ = <var title="">domain</var> ]</dt> + + <dd> + + <p>Returns the current domain used for security checks.</p> + + <p>Can be set to a value that removes subdomains, to allow pages + on other subdomains of the same domain (if they do the same thing) + to access each other.</p> + + </dd> + + </dl><p class="note">The <code title="dom-document-domain"><a href="#dom-document-domain">domain</a></code> + attribute is used to enable pages on different hosts of a domain to + access each others' DOMs.</p><p class="warning">Do not use the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute when + using shared hosting. If an untrusted third party is able to host an + HTTP server at the same IP address but on a different port, then the + same-origin protection that normally protects two different sites on + the same host will fail, as the ports are ignored when comparing + origins after the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute has + been used.</p><h3 id="scripting"><span class="secno">6.3 </span>Scripting</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="introduction-2"><span class="secno">6.3.1 </span>Introduction</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Various mechanisms can cause author-provided executable code to + run in the context of a document. These mechanisms include, but are + probably not limited to:</p><ul><li>Processing of <code><a href="semantics.html#script">script</a></code> elements.</li> + + <li>Processing of inline <code title="javascript + protocol"><a href="#javascript-protocol">javascript:</a></code> URLs (e.g. the <code title="attr-img-src"><a href="text-level-semantics.html#attr-img-src">src</a></code> attribute of <code><a href="text-level-semantics.html#the-img-element">img</a></code> + elements, or an <code title="">@import</code> rule in a CSS + <code><a href="semantics.html#the-style-element">style</a></code> element block).</li> + + <li>Event handlers, whether registered through the DOM using <code title="">addEventListener()</code>, by explicit <a href="#event-handler-content-attributes">event handler + content attributes</a>, by <a href="#event-handler-idl-attributes">event handler IDL + attributes</a>, or otherwise.</li> + + <li>Processing of technologies like XBL or SVG that have their own + scripting features.</li> + + </ul><h4 id="events"><span class="secno">6.3.2 </span>Events</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!--test: <a href="http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A...%3Cscript%3E%0Aw(a%3Ddocument.implementation.createDocument(null%2C%20null%2C%20null))%3B%0Aw(a.appendChild(a.createElementNS('http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%2C%20'html')))%3B%0Aw(b%3Da.firstChild.appendChild(a.createElementNS('http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%2C%20'body')))%3B%0Aw(b.test%20%3D%20w)%3B%0Aw(b.setAttribute('onclick'%2C%20'test(%22fire%3A%20%22%20%2B%20event)'))%3B%0Aw(b.onclick)%3B%0Aw(e%3Da.createEvent('Event'))%3B%0Aw(e.initEvent('click'%2C%20false%2C%20false))%3B%0Aw(b.dispatchEvent(e))%3B%0A%3C%2Fscript%3E">test</a>--><p>Many objects can have <dfn id="event-handlers">event handlers</dfn> specified. These + act as bubbling event listeners for the object on which they are + specified.</p><p>An <a href="#event-handlers" title="event handlers">event handler</a> can either + have the value null or be set to a <code><a href="#function">Function</a></code> + object. </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 + attribute</a>.</p><p>The second way is as an <a href="#event-handler-content-attributes" title="event handler content + attributes">event handler content attribute</a>. Event handlers + on <a href="infrastructure.html#html-elements">HTML elements</a> and some of the event handlers on + <code><a href="#window">Window</a></code> objects are exposed in this way.</p><p><dfn id="event-handler-content-attributes">Event handler content attributes</dfn>, when specified, must + contain valid JavaScript code matching the <code title="">FunctionBody</code> production. <a href="references.html#refsECMA262">[ECMA262]</a></p><p class="note">When an <a href="#event-handler-content-attributes" title="event handler content + attributes">event handler content attribute</a> is set on an + element owned by a <code>Document</code> that is not in a + <a href="#browsing-context">browsing context</a>, the corresponding event handler is + not changed.</p><!-- v2: we should probably support HTML4's Content-Script-Type header here. --><h3 id="timers"><span class="secno">6.4 </span>Timers</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code> + and <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code> + methods allow authors to schedule timer-based callbacks.</p><pre class="idl">[Supplemental, NoInterfaceObject] +interface <dfn id="windowtimers">WindowTimers</dfn> { + long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>(in any handler, in optional any timeout, in any... args); + void <a href="#dom-windowtimers-cleartimeout" title="dom-windowtimers-clearTimeout">clearTimeout</a>(in long handle); + long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>(in any handler, in optional any timeout, in any... args); + void <a href="#dom-windowtimers-clearinterval" title="dom-windowtimers-clearInterval">clearInterval</a>(in long handle); +}; +<a href="#window">Window</a> implements <a href="#windowtimers">WindowTimers</a>;</pre><dl class="domintro"><dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt> + + <dd> + + <p>Schedules a timeout to run <var title="">handler</var> after + <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p> + + </dd> + + <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt> + + <dd> + + <p>Schedules a timeout to compile and run <var title="">code</var> + after <var title="">timeout</var> milliseconds.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-windowtimers-clearTimeout"><a href="#dom-windowtimers-cleartimeout">clearTimeout</a></code>( <var title="">handle</var> )</dt> + + <dd> + + <p>Cancels the timeout set with <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code> identified by <var title="">handle</var>.</p> + + </dd> + + <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt> + + <dd> + + <p>Schedules a timeout to run <var title="">handler</var> every + <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p> + + </dd> + + <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt> + + <dd> + + <p>Schedules a timeout to compile and run <var title="">code</var> + every <var title="">timeout</var> milliseconds.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-windowtimers-clearInterval"><a href="#dom-windowtimers-clearinterval">clearInterval</a></code>( <var title="">handle</var> )</dt> + + <dd> + + <p>Cancels the timeout set with <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code> identified by <var title="">handle</var>.</p> + + </dd> + + </dl><p class="note">This API does not guarantee that timers will fire + exactly on schedule. Delays due to CPU load, other tasks, etc, are + to be expected.</p><h3 id="user-prompts"><span class="secno">6.5 </span>User prompts</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- + v2 ideas: + * in-window modal dialogs + - escape/enter handling + - dragging the window out of the tab + * in-window non-modal palettes + - with a solution for the mobile space + --><h4 id="simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-alert"><a href="#dom-alert">alert</a></code>(<var title="">message</var>)</dt> + <dd> + + <p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-confirm"><a href="#dom-confirm">confirm</a></code>(<var title="">message</var>)</dt> + <dd> + + <p>Displays a modal OK/Cancel prompt with the given message, waits + for the user to dismiss it, and returns true if the user clicks OK + and false if the user clicks Cancel.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-prompt"><a href="#dom-prompt">prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt> + <dd> + + <p>Displays a modal text field prompt with the given message, + waits for the user to dismiss it, and returns the value that the + user entered. If the user cancels the prompt, then returns null + instead. If the second argument is present, then the given value + is used as a default.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + </dl><h4 id="printing"><span class="secno">6.5.2 </span>Printing</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-print"><a href="#dom-print">print</a></code>()</dt> + + <dd> + + <p>Prompts the user to print the page.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + </dl><h4 id="dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">result</var> = <var title="">window</var> . <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt> + + <dd> + + <p>Prompts the user with the given page, waits for that page to + close, and returns the return value.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + </dl><pre class="idl">[Supplemental, NoInterfaceObject] interface <dfn id="windowmodal">WindowModal</dfn> { + readonly attribute any <a href="#dom-windowmodal-dialogarguments" title="dom-WindowModal-dialogArguments">dialogArguments</a>; + attribute DOMString <a href="#dom-windowmodal-returnvalue" title="dom-WindowModal-returnValue">returnValue</a>; +}; +<a href="#window">Window</a> implements <a href="#windowmodal">WindowModal</a>; /* sometimes */</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-WindowModal-dialogArguments"><a href="#dom-windowmodal-dialogarguments">dialogArguments</a></code></dt> + + <dd> + + <p>Returns the <var title="">argument</var> argument that was + passed to the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-WindowModal-returnValue"><a href="#dom-windowmodal-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the current return value for the window.</p> + + <p>Can be set, to change the value that will be returned by the + <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> + method.</p> + + </dd> + + </dl><p class="note">The <code title="dom-window-close"><a href="#dom-window-close">window.close()</a></code> method can be used to + close the browsing context.</p><h3 id="system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="navigator">Navigator</dfn> { + // objects implementing this interface also implement the interfaces given below +}; +<a href="#navigator">Navigator</a> implements <a href="#navigatorid">NavigatorID</a>; +<a href="#navigator">Navigator</a> implements <a href="#navigatoronline">NavigatorOnLine</a>; +<a href="#navigator">Navigator</a> implements <a href="#navigatorabilities">NavigatorAbilities</a>; + +[Supplemental, NoInterfaceObject] +interface <dfn id="navigatorid">NavigatorID</dfn> {<!-- + readonly attribute DOMString <span title="dom-navigator-appCodeName">appCodeName</span>;--> + readonly attribute DOMString <a href="#dom-navigator-appname" title="dom-navigator-appName">appName</a>; + readonly attribute DOMString <a href="#dom-navigator-appversion" title="dom-navigator-appVersion">appVersion</a>; + readonly attribute DOMString <a href="#dom-navigator-platform" title="dom-navigator-platform">platform</a>; + readonly attribute DOMString <a href="#dom-navigator-useragent" title="dom-navigator-userAgent">userAgent</a>; +}; + +[Supplemental, NoInterfaceObject] +interface <dfn id="navigatoronline">NavigatorOnLine</dfn> { + readonly attribute boolean <a href="#dom-navigator-online" title="dom-navigator-onLine">onLine</a>; +}; + +[Supplemental, NoInterfaceObject] +interface <dfn id="navigatorabilities">NavigatorAbilities</dfn> { + // content handler registration + void <a href="#dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler">registerProtocolHandler</a>(in DOMString scheme, in DOMString url, in DOMString title); + void <a href="#dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler">registerContentHandler</a>(in DOMString mimeType, in DOMString url, in DOMString title); + void <a href="#dom-navigator-yieldforstorageupdates" title="dom-navigator-yieldForStorageUpdates">yieldForStorageUpdates</a>(); +<!-- v2: cookieEnabled geolocator javaEnabled mozIsLocallyAvailable preference + readonly attribute <span>MimeTypeArray</span> <span title="dom-navigator-mimeTypes">mimeTypes</span>; + readonly attribute <span>PluginArray</span> <span title="dom-navigator-plugins">plugins</span>; + (the latter is used in a <video> element demo now, so we might need to pull this forward from v2!) +-->};</pre><h4 id="client-identification"><span class="secno">6.6.1 </span>Client identification</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>In certain cases, despite the best efforts of the entire + industry, Web browsers have bugs and limitations that Web authors + are forced to work around.</p><p>This section defines a collection of attributes that can be used + to determine, from script, the kind of user agent in use, in order + to work around these issues.</p><p>Client detection should always be limited to detecting known + current versions; future versions and unknown versions should always + be assumed to be fully compliant.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appName"><a href="#dom-navigator-appname">appName</a></code></dt> + <dd> + <p>Returns the name of the browser.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appVersion"><a href="#dom-navigator-appversion">appVersion</a></code></dt> + <dd> + <p>Returns the version of the browser.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-platform"><a href="#dom-navigator-platform">platform</a></code></dt> + <dd> + <p>Returns the name of the platform.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-userAgent"><a href="#dom-navigator-useragent">userAgent</a></code></dt> + <dd> + <p>Returns the complete User-Agent header.</p> + </dd> + + </dl><h4 id="custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler"><code>registerProtocolHandler()</code></dfn> + method allows Web sites to register themselves as possible handlers + for particular schemes. For example, an online fax service could + register itself as a handler of the <code>fax:</code> scheme (<a href="references.html#refsRFC2806">[RFC2806]</a>), so that if the user clicks on + such a link, he is given the opportunity to use that Web + site. Analogously, the <dfn id="dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler"><code>registerContentHandler()</code></dfn> + method allows Web sites to register themselves as possible handlers + for content in a particular <a href="infrastructure.html#mime-type">MIME type</a>. For example, the same online + fax service could register itself as a handler for + <code>image/g3fax</code> files (<a href="references.html#refsRFC1494">[RFC1494]</a>), so that if the user has no + native application capable of handling G3 Facsimile byte streams, + his Web browser can instead suggest he use that site to view the + image.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerProtocolHandler"><a href="#dom-navigator-registerprotocolhandler">registerProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>, <var title="">title</var>)</dt> + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerContentHandler"><a href="#dom-navigator-registercontenthandler">registerContentHandler</a></code>(<var title="">mimeType</var>, <var title="">url</var>, <var title="">title</var>)</dt> + + <dd> + + <p>Registers a handler for the given scheme or content type, at + the given URL, with the given title.</p> + + <p>The string "<code title="">%s</code>" in the URL is used as a + placeholder for where to put the URL of the content to be + handled.</p> + + <p>Throws a <code><a href="infrastructure.html#security_err">SECURITY_ERR</a></code> exception if the user agent + blocks the registration (this might happen if trying to register + as a handler for "http", for instance).</p> + + <p>Throws a <code><a href="infrastructure.html#syntax_err">SYNTAX_ERR</a></code> if the "<code title="">%s</code>" string is missing in the URL.</p> + + </dd> + + </dl><h4 id="manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">yieldForStorageUpdates</a></code>()</dt> + + <dd> + + <p>If a script uses the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> API, or the + <code title="dom-localStorage">localStorage</code> API, the + browser will block other scripts from accessing cookies or storage + until the first script finishes.</p> + + <p>Calling the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method tells the user agent to unblock any other scripts that may + be blocked, even though the script hasn't returned.</p> + + <p>Values of cookies and items in the <code>Storage</code> objects + of <code title="dom-localStorage">localStorage</code> attributes + can change after calling this method, whence its name.</p> + + </dd> + + </dl></body></html> \ No newline at end of file Index: the-xhtml-syntax.html =================================================================== RCS file: /sources/public/html5/spec-author-view/the-xhtml-syntax.html,v retrieving revision 1.494 retrieving revision 1.495 diff -u -d -r1.494 -r1.495 --- the-xhtml-syntax.html 7 Nov 2009 07:19:49 -0000 1.494 +++ the-xhtml-syntax.html 7 Nov 2009 07:26:51 -0000 1.495 @@ -0,0 +1,254 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>10 The XHTML syntax — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="named-character-references.html" title="9.2 Named character references" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="obsolete.html" title="11 Obsolete features" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> +<p>This is revision 1.3507.</p> + + </div><div> + <a href="named-character-references.html">← 9.2 Named character references</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="obsolete.html">11 Obsolete features →</a> + </div> + + <h2 id="the-xhtml-syntax"><span class="secno">10 </span><dfn id="xhtml">The XHTML syntax</dfn></h2><p class="note">This section only describes the rules for XML + resources. Rules for <code><a href="iana.html#text-html">text/html</a></code> resources are discussed + in the section above entitled "<a href="syntax.html#syntax">The HTML syntax</a>".</p><p>The syntax for using HTML with XML, whether in XHTML documents or + embedded in other XML documents, is defined in the XML and + Namespaces in XML specifications. <a href="references.html#refsXML">[XML]</a> <a href="references.html#refsXMLNS">[XMLNS]</a></p><p>This specification does not define any syntax-level requirements + beyond those defined for XML proper.</p><p>XML documents may contain a <code>DOCTYPE</code> if desired, but + this is not required to conform to this specification. This + specification does not define a public or system identifier, nor + provide a format DTD.</p><p class="note">According to the XML specification, XML processors + are not guaranteed to process the external DTD subset referenced in + the DOCTYPE. This means, for example, that using entity references + for characters in XHTML documents is unsafe if they are defined in + 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><!--v2DATAGRID + <div class="impl"> + + <h4>The <code>datagrid</code> element</h4> + + This section will probably include details on how to render DATAGRID + (including <span id="datagridPseudos">its pseudo-elements</span>), + drag-and-drop, etc, in a visual medium, in concert with + CSS. Implementation experience is desired before this section is + filled in. + + </div> +--></body></html> \ No newline at end of file Index: offline.html =================================================================== RCS file: /sources/public/html5/spec-author-view/offline.html,v retrieving revision 1.495 retrieving revision 1.496 diff -u -d -r1.495 -r1.496 --- offline.html 7 Nov 2009 07:19:48 -0000 1.495 +++ offline.html 7 Nov 2009 07:26:51 -0000 1.496 @@ -0,0 +1,675 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie"><head><title>6.7 Offline Web applications — HTML 5</title><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + p.copyright { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="browsers.html" title="6 Web browsers" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="history.html" title="6.8 Session history and navigation" rel="next"> + </head><body onload="fixBrokenLink(); fixBrokenLink()"><div class="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5</h1> + <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> +<p>This is revision 1.3507.</p> + + </div><div> + <a href="browsers.html">← 6 Web browsers</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="history.html">6.8 Session history and navigation →</a> + </div> + + <h3 id="offline"><span class="secno">6.7 </span>Offline Web applications</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2 ideas for appcache: + + * A way to limit what gets download when the user agent is + updating the application cache and it turns out the server has + changed EVERY page because every page has a dynamic "site last + modified" date on it. + + http://groups.google.com/group/gears-users/browse_thread/thread/efbd808325df607a/c73adb34f9b63cf7?hl=en&q=whatwg#c73adb34f9b63cf7 + + + * Multiuser appcaches. + + If the application code (HTML, JS, CSS) is all the same for two + users, then appcache works for multiple users by just having + the data for the users separate from the logic. + + This is the expected model for most apps. For example, your + typical blog has just one set of CSS for all users. + + For systems where the user affects what HTML, JS, and CSS is + served back, the spec as written pretty much requires that + there be one app per user, and one generic "login" app that + then redirects to one of those other apps - and where each app + has a different base URL, separate manifest, etc. + + An alternative that we could explore in a future version is to + have the manifest include a manifest name, and then have script + that allows you to "activate" a particular manifest name for a + given appcache. + + So each appcache group would be futher subdivided into named + subgroups, and for a given manifest URL with such a group of + subgroups, one subgroup would be the default one at a time. The + inactive ones would just lie dormant, but and the active ones + would act like now, but there'd be a scripted way to change the + default (and maybe query what available variants exist for the + current appcache), so that you could log back in as someone + else by just making the script pick the other user's variant, + and then reloading. + + --><h4 id="introduction-3"><span class="secno">6.7.1 </span>Introduction</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>In order to enable users to continue interacting with Web + applications and documents even when their network connection is + unavailable — for instance, because they are traveling outside + of their ISP's coverage area — authors can provide a manifest + which lists the files that are needed for the Web application to + work offline and which causes the user's browser to keep a copy of + the files for use offline.</p><p>To illustrate this, consider a simple clock applet consisting of + an HTML page "<code title="">clock.html</code>", a CSS style sheet + "<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 + this:</p><pre><!-- clock.html --> +<!DOCTYPE HTML> +<html> + <head> + <title>Clock</title> + <script src="clock.js"></script> + <link rel="stylesheet" href="clock.css"> + </head> + <body> + <p>The time is: <output id="clock"></output></p> + </body> +</html></pre><pre>/* clock.css */ +output { font: 2em sans-serif; }</pre><pre>/* clock.js */ +setTimeout(function () { + document.getElementById('clock').value = new Date(); +}, 1000);</pre><p>If the user tries to open the "<code title="">clock.html</code>" + page while offline, though, the user agent (unless it happens to + 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:</p><pre>CACHE MANIFEST +clock.html +clock.css +clock.js</pre><p>With a small change to the HTML file, the manifest (served as + <code><a href="iana.html#text-cache-manifest">text/cache-manifest</a></code>) is linked to the application:</p><pre><!-- clock.html --> +<!DOCTYPE HTML> +<html manifest="clock.manifest"> + <head> + <title>Clock</title> + <script src="clock.js"></script> + <link rel="stylesheet" href="clock.css"> + </head> + <body> + <p>The time is: <output id="clock"></output></p> + </body> +</html></pre><p>Now, if the user goes to the page, the browser will cache the + files and make them available even when the user is offline.</p><p class="note">Authors are encouraged to include the main page in + the manifest also, but in practice the page that referenced the + manifest is automatically cached even if it isn't ex