Update of /sources/public/html5/spec-author-view In directory hutz:/tmp/cvs-serv32119 Modified Files: Overview.html acknowledgements.html apis-in-html-documents.html association-of-controls-and-forms.html browsers.html commands.html common-input-element-attributes.html common-microsyntaxes.html comms.html content-models.html dnd.html dom.html editing.html edits.html elements.html embedded-content-1.html forms.html grouping-content.html history.html iana.html index.html infrastructure.html interactive-elements.html introduction.html links.html microdata.html named-character-references.html number-state.html obsolete.html offline.html references.html scripting-1.html sections.html semantics.html spec.html states-of-the-type-attribute.html syntax.html tabular-data.html text-level-semantics.html the-button-element.html the-canvas-element.html the-iframe-element.html the-input-element.html the-xhtml-syntax.html timers.html urls.html video.html Log Message: typo (whatwg r4456) [updated by splitter] Index: infrastructure.html =================================================================== RCS file: /sources/public/html5/spec-author-view/infrastructure.html,v retrieving revision 1.556 retrieving revision 1.557 diff -u -d -r1.556 -r1.557 --- infrastructure.html 3 Jan 2010 15:10:30 -0000 1.556 +++ infrastructure.html 3 Jan 2010 15:15:06 -0000 1.557 @@ -0,0 +1,439 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>2 Common infrastructure — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="introduction.html" title="1 Introduction" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="common-microsyntaxes.html" title="2.4 Common microsyntaxes" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="introduction.html">← 1 Introduction</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="common-microsyntaxes.html">2.4 Common microsyntaxes →</a> + <ol class="toc"><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></ol></li></ol></div> + + <h2 id="infrastructure"><span class="secno">2 </span>Common infrastructure</h2><h3 id="terminology"><span class="secno">2.1 </span>Terminology</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>This specification refers to both HTML and XML attributes and IDL + attributes, often in the same context. When it is not clear which is + being referred to, they are referred to as <dfn title="">content + attributes</dfn> for HTML and XML attributes, and <dfn title="">IDL + attributes</dfn> for those defined on IDL interfaces. Similarly, the + term "properties" is used for both JavaScript object properties and + CSS properties. When these are ambiguous they are qualified as <dfn title="">object properties</dfn> and <dfn title="">CSS + properties</dfn> respectively.</p><p>Generally, when the specification states that a feature applies + to <a href="syntax.html#syntax">the HTML syntax</a> or <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML syntax</a>, it + also includes the other. When a feature specifically only applies to + one of the two languages, it is called out by explicitly stating + that it does not apply to the other format, as in "for HTML, + ... (this does not apply to XHTML)".</p><p>This specification uses the term <dfn title="">document</dfn> to + refer to any use of HTML, ranging from short static documents to + long essays or reports with rich multimedia, as well as to + fully-fledged interactive applications.</p><p>For simplicity, terms such as <dfn title="">shown</dfn>, <dfn title="">displayed</dfn>, and <dfn title="">visible</dfn> might + sometimes be used when referring to the way a document is rendered + to the user. These terms are not meant to imply a visual medium; + they must be considered to apply to other media in equivalent + ways.</p><p>When an algorithm B says to return to another algorithm A, it + implies that A called B. Upon returning to A, the implementation + must continue from where it left off in calling B.</p><h4 id="resources"><span class="secno">2.1.1 </span>Resources</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The specification uses the term <dfn title="">supported</dfn> + when referring to whether a user agent has an implementation capable + of decoding the semantics of an external resource. A format or type + is said to be <i>supported</i> if the implementation can process an + external resource of that format or type without critical aspects of + the resource being ignored. Whether a specific resource is + <i>supported</i> can depend on what features of the resource's + format are in use.</p><p class="example">For example, a PNG image would be considered to + be in a supported format if its pixel data could be decoded and + rendered, even if, unbeknownst to the implementation, the image also + contained animation data.</p><p class="example">A MPEG4 video file would not be considered to be + in a supported format if the compression format used was not + supported, even if the implementation could determine the dimensions + of the movie from the file's metadata.</p><p>The term <dfn id="mime-type">MIME type</dfn> is used to refer to what is + sometimes called an <i>Internet media type</i> in protocol + literature. The term <i>media type</i> in this specification is used + to refer to the type of media intended for presentation, as used by + the CSS specifications. <a href="references.html#refsRFC2046">[RFC2046]</a> <a href="references.html#refsMQ">[MQ]</a></p><p>A string is a <dfn id="valid-mime-type">valid MIME type</dfn> if it matches the <code title="">media-type</code> rule defined in section 3.7 "Media + Types" of RFC 2616. <a href="references.html#refsHTTP">[HTTP]</a></p><h4 id="xml"><span class="secno">2.1.2 </span>XML</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p id="html-namespace">To ease migration from HTML to XHTML, UAs + conforming to this specification will place elements in HTML in the + <code>http://www.w3.org/1999/xhtml</code> namespace, at least for + the purposes of the DOM and CSS. The term "<dfn id="html-elements">HTML + elements</dfn>", when used in this specification, refers to any + element in that namespace, and thus refers to both HTML and XHTML + elements.</p><p>Except where otherwise stated, all elements defined or mentioned + in this specification are in the + <code>http://www.w3.org/1999/xhtml</code> namespace, and all + attributes defined or mentioned in this specification have no + namespace.</p><p>Attribute names are said to be <dfn id="xml-compatible">XML-compatible</dfn> if they + match the <a href="http://www.w3.org/TR/REC-xml/#NT-Name"><code title="">Name</code></a> production defined in XML, they contain no + U+003A COLON characters (:), and their first three characters are + not an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string + "<code title="">xml</code>". <a href="references.html#refsXML">[XML]</a></p><p>The term <dfn id="xml-mime-type">XML MIME type</dfn> is used to refer to the <a href="#mime-type" title="MIME type">MIME types</a> <code title="">text/xml</code>, + <code title="">application/xml</code>, and any <a href="#mime-type">MIME + type</a> whose subtype ends with the four characters "<code title="">+xml</code>". <a href="references.html#refsRFC3023">[RFC3023]</a></p><h4 id="dom-trees"><span class="secno">2.1.3 </span>DOM trees</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The term <dfn id="root-element">root element</dfn>, when not explicitly qualified + as referring to the document's root element, means the furthest + ancestor element node of whatever node is being discussed, or the + node itself if it has no ancestors. When the node is a part of the + document, then that is indeed the document's root element; however, + if the node is not currently part of the document tree, the root + element will be an orphaned node.</p><p>A node's <dfn id="home-subtree">home subtree</dfn> is the subtree rooted at that + node's <a href="#root-element">root element</a>.</p><p>The <code>Document</code> of a <code>Node</code> (such as an + element) is the <code>Document</code> that the <code>Node</code>'s + <code title="">ownerDocument</code> IDL attribute returns.</p><p>When an element's <a href="#root-element">root element</a> is the <a href="#root-element">root + element</a> of a <code>Document</code>, it is said to be <dfn id="in-a-document">in + a <code>Document</code></dfn>. An element is said to have been <dfn id="insert-an-element-into-a-document" title="insert an element into a document">inserted into a + document</dfn> when its <a href="#root-element">root element</a> changes and is now + the document's <a href="#root-element">root element</a>. Analogously, an element is + said to have been <dfn id="remove-an-element-from-a-document" title="remove an element from a + document">removed from a document</dfn> when its <a href="#root-element">root + element</a> changes from being the document's <a href="#root-element">root + element</a> to being another element.</p><p>If a <code>Node</code> is <a href="#in-a-document">in a <code>Document</code></a> + then that <code>Document</code> is always the <code>Node</code>'s + <code>Document</code>, and the <code>Node</code>'s <code title="">ownerDocument</code> IDL attribute thus always returns that + <code>Document</code>.</p><p>The term <dfn id="tree-order">tree order</dfn> means a pre-order, depth-first + traversal of DOM nodes involved (through the <code title="">parentNode</code>/<code title="">childNodes</code> + relationship).</p><p>When it is stated that some element or attribute is <dfn id="ignore" title="ignore">ignored</dfn>, or treated as some other value, or + handled as if it was something else, this refers only to the + processing of the node after it is in the DOM. </p><p>The term <dfn id="text-node">text node</dfn> refers to any <code>Text</code> + node, including <code>CDATASection</code> nodes; specifically, any + <code>Node</code> with node type <code title="">TEXT_NODE</code> (3) + or <code title="">CDATA_SECTION_NODE</code> (4). <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><p>A content attribute is said to <dfn title="">change</dfn> value + only if its new value is different than its previous value; setting + an attribute to a value it already has does not change it.</p><h4 id="scripting-0"><span class="secno">2.1.4 </span>Scripting</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The construction "a <code>Foo</code> object", where + <code>Foo</code> is actually an interface, is sometimes used instead + of the more accurate "an object implementing the interface + <code>Foo</code>".</p><p>An IDL attribute is said to be <dfn title="">getting</dfn> when + its value is being retrieved (e.g. by author script), and is said to + be <dfn title="">setting</dfn> when a new value is assigned to + it.</p><p>If a DOM object is said to be <dfn id="live">live</dfn>, then that means + that any attributes returning that object always return the same object (not a new + object each time), and the attributes and methods on that object + operate on the actual underlying + data, not a snapshot of the data.</p><p>The terms <dfn title="">fire</dfn> and <dfn title="">dispatch</dfn> are used interchangeably in the context of + events, as in the DOM Events specifications. The term <dfn id="concept-events-trusted" title="concept-events-trusted">trusted event</dfn> is used as + defined by the DOM Events specification. <!-- + http://krijnhoetmer.nl/irc-logs/webapps/20091218 --> <a href="references.html#refsDOMEVENTS">[DOMEVENTS]</a></p><h4 id="plugins"><span class="secno">2.1.5 </span>Plugins</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The term <dfn id="plugin">plugin</dfn> is used to mean any content handler + for Web content types that are either not supported by the user + agent natively or that do not expose a DOM, which supports rendering + the content as part of the user agent's interface.</p><p>Typically such content handlers are provided by third + parties.</p><p class="example">One example of a plugin would be a PDF viewer + that is instantiated in a <a href="browsers.html#browsing-context">browsing context</a> when the + user navigates to a PDF file. This would count as a plugin + regardless of whether the party that implemented the PDF viewer + component was the same as that which implemented the user agent + itself. However, a PDF viewer application that launches separate + from the user agent (as opposed to using the same interface) is not + a plugin by this definition.</p><p class="note">This specification does not define a mechanism for + interacting with plugins, as it is expected to be user-agent- and + platform-specific. Some UAs might opt to support a plugin mechanism + such as the Netscape Plugin API; others might use remote content + converters or have built-in support for certain types. <a href="references.html#refsNPAPI">[NPAPI]</a></p><p class="warning">Browsers should take extreme care when + interacting with external content intended for <a href="#plugin" title="plugin">plugins</a>. When third-party software is run with + the same privileges as the user agent itself, vulnerabilities in the + third-party software become as dangerous as those in the user + agent.</p><h4 id="character-encodings"><span class="secno">2.1.6 </span>Character encodings</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="preferred-mime-name">preferred MIME name</dfn> of a character encoding is the + name or alias labeled as "preferred MIME name" in the IANA + <cite>Character Sets</cite> registry, if there is one, or the + encoding's name, if none of the aliases are so labeled. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p><p>An <dfn id="ascii-compatible-character-encoding">ASCII-compatible character encoding</dfn> is a + single-byte or variable-length encoding in which the bytes 0x09, + 0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A, + and 0x61 - 0x7A<!-- is that list ok? do any character sets we want + to support do things outside that range? -->, ignoring bytes that + are the second and later bytes of multibyte sequences, all + correspond to single-byte sequences that map to the same Unicode + characters as those bytes in ANSI_X3.4-1968 (US-ASCII). <a href="references.html#refsRFC1345">[RFC1345]</a></p><p class="note">This includes such encodings as Shift_JIS, + HZ-GB-2312, and variants of ISO-2022, even though it is possible in + these encodings for bytes like 0x70 to be part of longer sequences + that are unrelated to their interpretation as ASCII. It excludes + such encodings as UTF-7, UTF-16, GSM03.38, and EBCDIC variants.</p><!-- + We'll have to change that if anyone comes up with a way to have a + document that is valid as two different encodings at once, with + different <meta charset> elements applying in each case. + --><p>The term <dfn title="">Unicode character</dfn> is used to mean a + <i title="">Unicode scalar value</i> (i.e. any Unicode code point + that is not a surrogate code point). <a href="references.html#refsUNICODE">[UNICODE]</a></p><h3 id="conformance-requirements"><span class="secno">2.2 </span>Conformance requirements</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All diagrams, examples, and notes in this specification are + non-normative, as are all sections explicitly marked non-normative. + Everything else in this specification is normative.</p><p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL + NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and + "OPTIONAL" in the normative parts of this document are to be + interpreted as described in RFC2119. For readability, these words do + not appear in all uppercase letters in this specification. <a href="references.html#refsRFC2119">[RFC2119]</a></p><p>This specification describes the conformance criteria for user agents (relevant to implementors) and (relevant to authors and authoring tool + implementors)</p><p>For compatibility with existing content and prior specifications, + this specification describes two authoring formats: one based on XML + (referred to as <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML syntax</a>), and one using a <a href="syntax.html#writing">custom format</a> inspired by SGML (referred to as + <a href="syntax.html#syntax">the HTML syntax</a>). </p><p id="authors-using-xhtml">XML documents that use elements or + attributes from the <a href="#html-namespace-0">HTML namespace</a> and that are served + over the wire (e.g. by HTTP) must be sent using an <a href="#xml-mime-type">XML MIME + type</a> such as <code>application/xml</code> or + <code><a href="iana.html#application-xhtml-xml">application/xhtml+xml</a></code> and must not be served as + <code><a href="iana.html#text-html">text/html</a></code>. <a href="references.html#refsRFC3023">[RFC3023]</a></p><p id="authors-using-html">Documents that use <a href="syntax.html#syntax">the HTML + syntax</a>, if they are served over the wire (e.g. by HTTP) must + be labeled with the <code><a href="iana.html#text-html">text/html</a></code> <a href="#mime-type">MIME + type</a>.</p><h3 id="case-sensitivity-and-string-comparison"><span class="secno">2.3 </span>Case-sensitivity and string comparison</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Comparing two strings in a <dfn id="case-sensitive">case-sensitive</dfn> manner means + comparing them exactly, code point for code point.</p><p>Comparing two strings in an <dfn id="ascii-case-insensitive">ASCII case-insensitive</dfn> + manner means comparing them exactly, code point for code point, except + that the characters in the range U+0041 to U+005A (i.e. LATIN + CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding + characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A + to LATIN SMALL LETTER Z) are considered to also match.</p><p>Comparing two strings in a <dfn id="compatibility-caseless">compatibility caseless</dfn> + manner means using the Unicode <i>compatibility caseless match</i> + operation to compare the two strings. <a href="references.html#refsUNICODE">[UNICODE]</a></p><p>A string <var title="">pattern</var> is a <dfn id="prefix-match">prefix match</dfn> + for a string <var title="">s</var> when <var title="">pattern</var> + is not longer than <var title="">s</var> and truncating <var title="">s</var> to <var title="">pattern</var>'s length leaves the + two strings as matches of each other.</p></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.552 retrieving revision 1.553 diff -u -d -r1.552 -r1.553 --- text-level-semantics.html 3 Jan 2010 15:08:16 -0000 1.552 +++ text-level-semantics.html 3 Jan 2010 15:15:07 -0000 1.553 @@ -213,4 +213,1855 @@ .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-tabl \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { [...1827 lines suppressed...] + </td><td><pre class="example">Copying: <strong><progress>75%</progress></strong></pre> + + </td></tr><tr><td><code><a href="#the-meter-element">meter</a></code> + </td><td>Gauge + </td><td><pre class="example">Disk space remaining: <strong><meter>75%<meter></strong></pre> + + </td></tr><tr><td><code><a href="#the-ruby-element">ruby</a></code>, <code><a href="#the-rt-element">rt</a></code>, <code><a href="#the-rp-element">rp</a></code> + </td><td>Ruby annotations + </td><td><pre class="example"><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre> + + </td></tr><tr><td><code><a href="#the-bdo-element">bdo</a></code> + </td><td>Text directionality formatting + </td><td><pre class="example">The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre> + + </td></tr><tr><td><code><a href="#the-span-element">span</a></code> + </td><td>Other + </td><td><pre class="example">In French we call it <strong><span lang="fr">sirop de sureau</span></strong>.</pre> + + </td></tr></tbody></table></body></html> \ No newline at end of file Index: scripting-1.html =================================================================== RCS file: /sources/public/html5/spec-author-view/scripting-1.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- scripting-1.html 3 Jan 2010 15:08:15 -0000 1.8 +++ scripting-1.html 3 Jan 2010 15:15:06 -0000 1.9 @@ -0,0 +1,715 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.3 Scripting — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="semantics.html" title="4 The elements of HTML" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="sections.html" title="4.4 Sections" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="semantics.html">← 4 The elements of HTML</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="sections.html">4.4 Sections →</a> + <ol class="toc"><li><ol><li><a href="scripting-1.html#scripting-1"><span class="secno">4.3 </span>Scripting</a> + <ol><li><a href="scripting-1.html#script"><span class="secno">4.3.1 </span>The <code>script</code> element</a> + <ol><li><a href="scripting-1.html#scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</a></li><li><a href="scripting-1.html#restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li><li><a href="scripting-1.html#inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span>Inline documentation for external scripts</a></li></ol></li><li><a href="scripting-1.html#the-noscript-element"><span class="secno">4.3.2 </span>The <code>noscript</code> element</a></li></ol></li></ol></li></ol></div> + + <h3 id="scripting-1"><span class="secno">4.3 </span>Scripting</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Scripts allow authors to add interactivity to their documents.</p><p>Authors are encouraged to use declarative alternatives to + scripting where possible, as declarative mechanisms are often more + maintainable, and many users disable scripting.</p><div class="example"> + <p>For example, instead of using script to show or hide a section + to show more details, the <code><a href="interactive-elements.html#the-details-element">details</a></code> element could be + used.</p> + </div><p>Authors are also encouraged to make their applications degrade + gracefully in the absence of scripting support.</p><div class="example"> + <p>For example, if an author provides a link in a table header to + dynamically resort the table, the link could also be made to + function without scripts by requesting the sorted table from the + server.</p> + </div><h4 id="script"><span class="secno">4.3.1 </span>The <dfn><code>script</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd> + <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>If there is no <code title="attr-script-src"><a href="#attr-script-src">src</a></code> + attribute, depends on the value of the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, but must match + <a href="#restrictions-for-contents-of-script-elements">script content restrictions</a>.</dd> + <dd>If there <em>is</em> a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> + attribute, the element must be either empty or contain only + <a href="#inline-documentation-for-external-scripts">script documentation</a> that also matches <a href="#restrictions-for-contents-of-script-elements">script + content restrictions</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-script-src"><a href="#attr-script-src">src</a></code></dd> + <dd><code title="attr-script-async"><a href="#attr-script-async">async</a></code></dd> + <dd><code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code></dd> + <dd><code title="attr-script-type"><a href="#attr-script-type">type</a></code></dd> + <dd><code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmlscriptelement">HTMLScriptElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute DOMString <a href="#dom-script-src" title="dom-script-src">src</a>; + attribute boolean <a href="#dom-script-async" title="dom-script-async">async</a>; + attribute boolean <a href="#dom-script-defer" title="dom-script-defer">defer</a>; + attribute DOMString <a href="#dom-script-type" title="dom-script-type">type</a>; + attribute DOMString <a href="#dom-script-charset" title="dom-script-charset">charset</a>; + attribute DOMString <a href="#dom-script-text" title="dom-script-text">text</a>; +};</pre> + </dd> + </dl><p>The <code><a href="#script">script</a></code> element allows authors to include dynamic + script and data blocks in their documents. The element does not + <a href="#represents" title="represents">represent</a> content for the user.</p><p>When used to include dynamic scripts, the scripts may either be + embedded inline or may be imported from an external file using the + <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute. If the language + is not that described by "<code title="">text/javascript</code>", + then the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute must + be present, as described below.</p><p>When used to include data blocks, the data must be embedded + inline, the format of the data must be given using the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, and the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute must not be + specified.</p><p>The <dfn id="attr-script-type" title="attr-script-type"><code>type</code></dfn> + attribute gives the language of the script or format of the data. If + the attribute is present, its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME + type</a>, optionally with parameters. The <code title="">charset</code> parameter must not be specified. (The + default, which is used if the attribute is absent, is "<code title="">text/javascript</code>".)</p><p>The <dfn id="attr-script-src" title="attr-script-src"><code>src</code></dfn> + attribute, if specified, gives the address of the external script + resource to use. The value of the attribute must be a <a href="urls.html#valid-url">valid + URL</a> identifying a script resource of the type given by the + <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, if the + attribute is present, or of the type "<code title="">text/javascript</code>", if the attribute is absent. A + resource is a script resource of a given type if that type + identifies a scripting language and the resource conforms with the + requirements of that language's specification.</p><p>The <dfn id="attr-script-charset" title="attr-script-charset"><code>charset</code></dfn> + attribute gives the character encoding of the external script + resource. The attribute must not be specified if the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is not present. If the + attribute is set, its value must be a valid character encoding name, + must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the + <a href="infrastructure.html#preferred-mime-name">preferred MIME name</a> for that encoding, and must match + the encoding given in the <code title="">charset</code> parameter of + the <a href="#content-type" title="Content-Type">Content-Type metadata</a> of the + external file, if any. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-script-async" title="attr-script-async"><code>async</code></dfn> and + <dfn id="attr-script-defer" title="attr-script-defer"><code>defer</code></dfn> attributes + are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean attributes</a> that + indicate how the script should be executed.</p><p>There are three possible modes that can be selected using these + attributes. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code> + attribute is present, then the script will be executed + asynchronously, as soon as it is available. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attribute is not present but + the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute is + present, then the script is executed when the page has finished + parsing. If neither attribute is present, then the script is + fetched and executed immediately, before the user agent continues + parsing the page. The exact processing details for these attributes + are described below.</p><p>The <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute may be + specified even if the <code title="attr-script-async"><a href="#attr-script-async">async</a></code> + attribute is specified, to cause legacy Web browsers that only + support <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> (and not <code title="attr-script-async"><a href="#attr-script-async">async</a></code>) to fall back to the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> behavior instead of the + synchronous blocking behavior that is the default.</p><p>If one or both of the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> and <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attributes are specified, the + <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute must also be + specified.</p><p>Changing the <code title="attr-script-src"><a href="#attr-script-src">src</a></code>, <code title="attr-script-type"><a href="#attr-script-type">type</a></code>, <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code>, <code title="attr-script-async"><a href="#attr-script-async">async</a></code>, and <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attributes dynamically has no + direct effect; these attribute are only used when the element is + <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a document">inserted into the + document</a>.</p><!-- by implication, + changes to the base URL also have no effect --><dl class="domintro"><dt><var title="">script</var> . <code title="dom-script-text"><a href="#dom-script-text">text</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the contents of the element, ignoring child nodes that + aren't <a href="infrastructure.html#text-node" title="text node">text nodes</a>.</p> + + <p>Can be set, to replace the element's children with the given + value.</p> + + </dd> + + </dl><p class="note">When inserted using the <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> method, + <code><a href="#script">script</a></code> elements execute (typically synchronously), but + when inserted using <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code> and <code title="dom-outerHTML"><a href="apis-in-html-documents.html#dom-outerhtml">outerHTML</a></code> attributes, they do not + execute at all.</p><div class="example"> + + <p>In this example, two <code><a href="#script">script</a></code> elements are used. One + embeds an external script, and the other includes some data.</p> + + <pre><script src="game-engine.js"></script> +<script type="text/x-game-map"> +........U.........e +o............A....e +.....A.....AAA....e +.A..AAA...AAAAA...e +</script></pre> + + <p>The data in this case might be used by the script to generate + the map of a video game. The data doesn't have to be used that way, + though; maybe the map data is actually embedded in other parts of + the page's markup, and the data block here is just used by the + site's search engine to help users who are looking for particular + features in their game maps.</p> + + </div><div class="example"> + + <p>The following sample shows how a script element can be used to + define a function that is then used by other parts of the + document. It also shows how a <code><a href="#script">script</a></code> element can be + used to invoke script while the document is being parsed, in this + case to initialize the form's output.</p> + + <pre><script> + function calculate(form) { + var price = 52000; + if (form.elements.brakes.checked) + price += 1000; + if (form.elements.radio.checked) + price += 2500; + if (form.elements.turbo.checked) + price += 5000; + if (form.elements.sticker.checked) + price += 250; + form.elements.result.value = price; + } +</script> +<form name="pricecalc" onsubmit="return false"> + <fieldset> + <legend>Work out the price of your car</legend> + <p>Base cost: £52000.</p> + <p>Select additional options:</p> + <ul> + <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li> + <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li> + <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li> + <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li> + </ul> + <p>Total: £<output name=result onformchange="calculate(form)"></output></p> + </fieldset> + <script> + document.forms.pricecalc.dispatchFormChange(); + </script> +</form></pre> + + </div><h5 id="scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following lists some <a href="infrastructure.html#mime-type">MIME type</a> strings and the + languages to which they refer:</p><dl><dt>"<code>application/ecmascript</code>"</dt> + <dt>"<code>application/javascript</code>"</dt> + <dt>"<code>application/x-ecmascript</code>"</dt> + <dt>"<code>application/x-javascript</code>"</dt> + <dt>"<code>text/ecmascript</code>"</dt> + <dt>"<code>text/javascript</code>"</dt> + <dt>"<code>text/javascript1.0</code>"</dt> + <dt>"<code>text/javascript1.1</code>"</dt> + <dt>"<code>text/javascript1.2</code>"</dt> + <dt>"<code>text/javascript1.3</code>"</dt> + <dt>"<code>text/javascript1.4</code>"</dt> + <dt>"<code>text/javascript1.5</code>"</dt> + <dt>"<code>text/jscript</code>"</dt> + <dt>"<code>text/livescript</code>"</dt> + <dt>"<code>text/x-ecmascript</code>"</dt> + <dt>"<code>text/x-javascript</code>"</dt> + <dd>JavaScript. <a href="references.html#refsECMA262">[ECMA262]</a></dd> + + <dt>"<code>text/javascript;e4x=1</code>"</dt> + <dd>JavaScript with ECMAScript for XML. <a href="references.html#refsECMA357">[ECMA357]</a></dd> + + </dl><h5 id="restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span><dfn title="script content restrictions">Restrictions for contents of <code>script</code> elements</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code>textContent</code> of a <code><a href="#script">script</a></code> element must match the + <code title="">script</code> production in the following ABNF, the + character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>script = data1 *( escape [ script-start data3 ] "-->" data1 ) [ escape ] +escape = "<!--" data2 *( script-start data3 script-end data2 ) + +data1 = <any string that doesn't contain a substring that matches not-data1> +not-data1 = <!-- script-end / -->"<!--" <!-- the script-end is redundant here since it would close the element --> + +data2 = <any string that doesn't contain a substring that matches not-data2> +not-data2 = <!-- script-end / -->script-start / "-->" <!-- the script-end is redundant here since it would close the element --> + +data3 = <any string that doesn't contain a substring that matches not-data3> +not-data3 = script-end / "-->" + +script-start = lt s c r i p t tag-end +script-end = lt slash s c r i p t tag-end + +lt = %x003C ; U+003C LESS-THAN SIGN character (<) +slash = %x002F ; U+002F SOLIDUS character (/) + +s = %x0053 ; U+0053 LATIN CAPITAL LETTER S +s =/ %x0073 ; U+0073 LATIN SMALL LETTER S +c = %x0043 ; U+0043 LATIN CAPITAL LETTER C +c =/ %x0063 ; U+0063 LATIN SMALL LETTER C +r = %x0052 ; U+0052 LATIN CAPITAL LETTER R +r =/ %x0072 ; U+0072 LATIN SMALL LETTER R +i = %x0049 ; U+0049 LATIN CAPITAL LETTER I +i =/ %x0069 ; U+0069 LATIN SMALL LETTER I +p = %x0050 ; U+0050 LATIN CAPITAL LETTER P +p =/ %x0070 ; U+0070 LATIN SMALL LETTER P +t = %x0054 ; U+0054 LATIN CAPITAL LETTER T +t =/ %x0074 ; U+0074 LATIN SMALL LETTER T + +tag-end = %x0009 ; U+0009 CHARACTER TABULATION +tag-end =/ %x000A ; U+000A LINE FEED (LF) +tag-end =/ %x000C ; U+000C FORM FEED (FF) +tag-end =/ %x0020 ; U+0020 SPACE +tag-end =/ %x002F ; U+002F SOLIDUS (/) +tag-end =/ %x003E ; U+003E GREATER-THAN SIGN (>)</pre><p>When a <code><a href="#script">script</a></code> element contains <a href="#inline-documentation-for-external-scripts">script + documentation</a>, there are further restrictions on the contents + of the element, as described in the section below.</p><h5 id="inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span><dfn title="script documentation">Inline documentation for external scripts</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>If a <code><a href="#script">script</a></code> element's <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is specified, then the + contents of the <code><a href="#script">script</a></code> element, if any, must be such + that the value of the <code title="dom-script-text"><a href="#dom-script-text">text</a></code> IDL + attribute, which is derived from the element's contents, matches the + <code title="">documentation</code> production in the following + ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline ) +comment = slash star *( not-star / star not-slash ) 1*star slash +line-comment = slash slash *not-newline + +; characters +tab = %x0009 ; U+0009 TAB +newline = %x000A ; U+000A LINE FEED (LF) +space = %x0020 ; U+0020 SPACE +star = %x002A ; U+002A ASTERISK (*) +slash = %x002F ; U+002F SOLIDUS (/) +not-newline = %x0000-0009 / %x000B-10FFFF + ; a Unicode character other than U+000A LINE FEED (LF) +not-star = %x0000-0029 / %x002B-10FFFF + ; a Unicode character other than U+002A ASTERISK (*) +not-slash = %x0000-002E / %x0030-10FFFF + ; a Unicode character other than U+002F SOLIDUS (/)</pre><p class="note">This corresponds to putting the contents of the + element in JavaScript comments.</p><p class="note">This requirement is in addition to the earlier + restrictions on the syntax of contents of <code><a href="#script">script</a></code> + elements.</p><div class="example"> + + <p>This allows authors to include documentation, such as license + information or API information, inside their documents while still + referring to external script files. The syntax is constrained so + that authors don't accidentally include what looks like valid + script while also providing a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute.</p> + + <pre><script src="cool-effects.js"> + // create new instances using: + // var e = new Effect(); + // start the effect using .play, stop using .stop: + // e.play(); + // e.stop(); +</script></pre> + + </div><h4 id="the-noscript-element"><span class="secno">4.3.2 </span>The <dfn><code>noscript</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element of an <a href="dom.html#html-documents" title="HTML documents">HTML document</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd> + <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected in <a href="dom.html#html-documents">HTML documents</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd> + <dt>Content model:</dt> + <dd>When <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, in a <code><a href="semantics.html#the-head-element-0">head</a></code> element: in any order, zero or more <code><a href="semantics.html#the-link-element">link</a></code> elements, zero or more <code><a href="semantics.html#the-style-element">style</a></code> elements, and zero or more <code><a href="semantics.html#meta">meta</a></code> elements.</dd> + <dd>When <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, not in a <code><a href="semantics.html#the-head-element-0">head</a></code> element: <a href="content-models.html#transparent">transparent</a>, but there must be no <code><a href="#the-noscript-element">noscript</a></code> element descendants.</dd> + <dd>Otherwise: text that conforms to the requirements given in the prose.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> + </dl><p>The <code><a href="#the-noscript-element">noscript</a></code> element <a href="#represents">represents</a> nothing + if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a>, and + <a href="#represents">represents</a> its children if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>. It is used + to present different markup to user agents that support scripting + and those that don't support scripting, by affecting how the + document is parsed.</p><p>When used in <a href="dom.html#html-documents">HTML documents</a>, the allowed content + model is as follows:</p><dl><dt>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element, if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the + <code><a href="#the-noscript-element">noscript</a></code> element</dt> + + <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only + <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-style-element">style</a></code>, and <code><a href="semantics.html#meta">meta</a></code> + elements.</p></dd> + + <dt>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the + <code><a href="#the-noscript-element">noscript</a></code> element</dt> + + <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text, + except that invoking the <a href="#html-fragment-parsing-algorithm">HTML fragment parsing + algorithm</a> <!-- (which disables <script> execution) --> with + the <code><a href="#the-noscript-element">noscript</a></code> element as the <var title="">context</var> element and the text contents as the <var title="">input</var> must result in a list of nodes that consists + only of <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-style-element">style</a></code>, and + <code><a href="semantics.html#meta">meta</a></code> elements that would be conforming if they were + children of the <code><a href="#the-noscript-element">noscript</a></code> element, and no <a href="#parse-error" title="parse error">parse errors</a>.</p></dd> + + <dt>Outside of <code><a href="semantics.html#the-head-element-0">head</a></code> elements, if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the + <code><a href="#the-noscript-element">noscript</a></code> element</dt> + + <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element's content model is + <a href="content-models.html#transparent">transparent</a>, with the additional restriction that a + <code><a href="#the-noscript-element">noscript</a></code> element must not have a <code><a href="#the-noscript-element">noscript</a></code> + element as an ancestor (that is, <code><a href="#the-noscript-element">noscript</a></code> can't be + nested).</p></dd> + + <dt>Outside of <code><a href="semantics.html#the-head-element-0">head</a></code> elements, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the + <code><a href="#the-noscript-element">noscript</a></code> element</dt> + + <dd> + + <p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text, + except that the text must be such that running the following + algorithm results in a conforming document with no + <code><a href="#the-noscript-element">noscript</a></code> elements and no <code><a href="#script">script</a></code> + elements, and such that no step in the algorithm causes an + <a href="#html-parser">HTML parser</a> to flag a <a href="#parse-error">parse error</a>:</p> + + <ol><li>Remove every <code><a href="#script">script</a></code> element from the + document.</li> + + <li>Make a list of every <code><a href="#the-noscript-element">noscript</a></code> element in the + document. For every <code><a href="#the-noscript-element">noscript</a></code> element in that list, + perform the following steps: + + <ol><li>Let the <var title="">parent element</var> be the parent + element of the <code><a href="#the-noscript-element">noscript</a></code> element.</li> + + <li>Take all the children of the <var title="">parent element</var> + that come before the <code><a href="#the-noscript-element">noscript</a></code> element, and call these + elements <var title="">the before children</var>.</li> + + <li>Take all the children of the <var title="">parent element</var> + that come <em>after</em> the <code><a href="#the-noscript-element">noscript</a></code> element, and + call these elements <var title="">the after children</var>.</li> + + <li>Let <var title="">s</var> be the concatenation of all the + <a href="infrastructure.html#text-node">text node</a> children of the <code><a href="#the-noscript-element">noscript</a></code> + element.</li> + + <li>Set the <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code> + attribute of the <var title="">parent element</var> to the value + of <var title="">s</var>. (This, as a side-effect, causes the + <code><a href="#the-noscript-element">noscript</a></code> element to be removed from the + document.)</li> + + <li>Insert <var title="">the before children</var> at the start of + the <var title="">parent element</var>, preserving their original + relative order.</li> + + <li>Insert <var title="">the after children</var> at the end of the + <var title="">parent element</var>, preserving their original + relative order.</li> + + </ol></li> + + </ol></dd> + + </dl><p class="note">All these contortions are required because, for + historical reasons, the <code><a href="#the-noscript-element">noscript</a></code> element is handled + differently by the <a href="#html-parser">HTML parser</a> based on whether <a href="#scripting-flag" title="scripting flag">scripting was enabled or not</a> when the + parser was invoked.</p><p>The <code><a href="#the-noscript-element">noscript</a></code> element must not be used in <a href="dom.html#xml-documents">XML + documents</a>.</p><p class="note"><strong>The <code><a href="#the-noscript-element">noscript</a></code> element is only + effective in <a href="syntax.html#syntax">the HTML syntax</a>, it has no effect in + <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML syntax</a>.</strong></p><div class="example"> + + <p>In the following example, a <code><a href="#the-noscript-element">noscript</a></code> element is + used to provide fallback for a script.</p> + + <pre><form action="calcSquare.php"> + <p> + <label for=x>Number</label>: + <input id="x" name="x" type="number"> + </p> + <script> + var x = document.getElementById('x'); + var output = document.createElement('p'); + output.textContent = 'Type a number; it will be squared right then!'; + x.form.appendChild(output); + x.form.onsubmit = function () { return false; } + x.oninput = function () { + var v = x.valueAsNumber; + output.textContent = v + ' squared is ' + v * v; + }; + </script> + <noscript> + <input type=submit value="Calculate Square"> + </noscript> +</form></pre> + + <p>When script is disabled, a button appears to do the calculation + on the server side. When script is enabled, the value is computed + on-the-fly instead.</p> + + <p>The <code><a href="#the-noscript-element">noscript</a></code> element is a blunt + instrument. Sometimes, scripts might be enabled, but for some + reason the page's script might fail. For this reason, it's + generally better to avoid using <code><a href="#the-noscript-element">noscript</a></code>, and to + instead design the script to change the page from being a + scriptless page to a scripted page on the fly, as in the next + example:</p> + + <pre><form action="calcSquare.php"> + <p> + <label for=x>Number</label>: + <input id="x" name="x" type="number"> + </p> + <strong><input id="submit" type=submit value="Calculate Square"></strong> + <script> + var x = document.getElementById('x'); + var output = document.createElement('p'); + output.textContent = 'Type a number; it will be squared right then!'; + x.form.appendChild(output); + x.form.onsubmit = function () { return false; } + x.oninput = function () { + var v = x.valueAsNumber; + output.textContent = v + ' squared is ' + v * v; + }; +<strong> var submit = document.getElementById('submit'); + submit.parentNode.removeChild(submit);</strong> + </script> +</form></pre> + + <p>The above technique is also useful in XHTML, since + <code><a href="#the-noscript-element">noscript</a></code> is not supported in <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML + syntax</a>.</p> + + </div></body></html> \ 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.557 retrieving revision 1.558 diff -u -d -r1.557 -r1.558 --- the-canvas-element.html 3 Jan 2010 15:08:16 -0000 1.557 +++ the-canvas-element.html 3 Jan 2010 15:15:07 -0000 1.558 @@ -213,4 +213,1151 @@ .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-tab \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { [...1123 lines suppressed...] + context.canvas.height * Math.random(), + lastX, lastY); + + hue = hue + 10 * Math.random(); + context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; + context.shadowColor = 'white'; + context.shadowBlur = 10; + context.stroke(); + context.restore(); + } + setInterval(line, 50); + + function blank() { + context.fillStyle = 'rgba(0,0,0,0.1)'; + context.fillRect(0, 0, context.canvas.width, context.canvas.height); + } + setInterval(blank, 40); + +</script></pre></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.553 retrieving revision 1.554 diff -u -d -r1.553 -r1.554 --- tabular-data.html 3 Jan 2010 15:08:16 -0000 1.553 +++ tabular-data.html 3 Jan 2010 15:15:07 -0000 1.554 @@ -213,4 +213,999 @@ .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-exampl \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { [...971 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: the-iframe-element.html =================================================================== RCS file: /sources/public/html5/spec-author-view/the-iframe-element.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- the-iframe-element.html 3 Jan 2010 15:08:16 -0000 1.8 +++ the-iframe-element.html 3 Jan 2010 15:15:07 -0000 1.9 @@ -213,4 +213,436 @@ .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-tabl \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="embedded-content-1.html" title="4.8 Embedded content" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="video.html" title="4.8.7 The video element" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="embedded-content-1.html">← 4.8 Embedded content</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="video.html">4.8.7 The video element →</a> + <ol class="toc"><li><ol><li><ol><li><a href="the-iframe-element.html#the-iframe-element"><span class="secno">4.8.3 </span>The <code>iframe</code> element</a></li><li><a href="the-iframe-element.html#the-embed-element"><span class="secno">4.8.4 </span>The <code>embed</code> element</a></li><li><a href="the-iframe-element.html#the-object-element"><span class="secno">4.8.5 </span>The <code>object</code> element</a></li><li><a href="the-iframe-element.html#the-param-element"><span class="secno">4.8.6 </span>The <code>param</code> element</a></li></ol></li></ol></li></ol></div> + + <h4 id="the-iframe-element"><span class="secno">4.8.3 </span>The <dfn><code>iframe</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd> + <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Text that conforms to the requirements given in the prose.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code></dd> + <dd><code title="attr-iframe-name"><a href="#attr-iframe-name">name</a></code></dd> + <dd><code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code></dd> + <dd><code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">seamless</a></code></dd> + <dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd> + <dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmliframeelement">HTMLIFrameElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute DOMString <a href="#dom-iframe-src" title="dom-iframe-src">src</a>; + attribute DOMString <a href="#dom-iframe-name" title="dom-iframe-name">name</a>; + attribute DOMString <a href="#dom-iframe-sandbox" title="dom-iframe-sandbox">sandbox</a>; + attribute boolean <a href="#dom-iframe-seamless" title="dom-iframe-seamless">seamless</a>; + attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>; + attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>; + readonly attribute Document <a href="#dom-iframe-contentdocument" title="dom-iframe-contentDocument">contentDocument</a>; + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-iframe-contentwindow" title="dom-iframe-contentWindow">contentWindow</a>; +};</pre> + </dd> + </dl><!-- v2 doc="" idea (awaiting implementation experience with seamless="" first): + + http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-May/014874.html + + doc="" would take a string which would then be interpreted as + the source document markup of an HTML document, much like the + above; it would override src="" if it was present, allowing + src="" to be used for legacy UAs: + + <iframe seamless sandbox="allow-scripts allow-forms" doc=" + <!DOCTYPE HTML> + <title></title> + Welcome to my blog! + </sandbox> + <a href='#' onclick='alert(document.cookie)'>Click here</a> + "></iframe> + + (There are things we can do to make this better, e.g. make the + <!DOCTYPE HMTL> and <title></title> bits implicit, maybe + introducing type="" to say whether it's HTML or XML instead of + only supporting HTML, maybe saying that if src="" and doc="" + are both specified they must have identical data, etc.) + + --><p>The <code><a href="#the-iframe-element">iframe</a></code> element <a href="#represents">represents</a> a + <a href="browsers.html#nested-browsing-context">nested browsing context</a>.</p><p>The <dfn id="attr-iframe-src" title="attr-iframe-src"><code>src</code></dfn> attribute + gives the address of a page that the <a href="browsers.html#nested-browsing-context">nested browsing + context</a> is to contain. The attribute, if present, must be a + <a href="urls.html#valid-url">valid URL</a>. </p><p>The <dfn id="attr-iframe-name" title="attr-iframe-name"><code>name</code></dfn> + attribute, if present, must be a <a href="browsers.html#valid-browsing-context-name">valid browsing context + name</a>. The given value is used to name the <a href="browsers.html#nested-browsing-context">nested + browsing context</a>. </p><hr><p>The <dfn id="attr-iframe-sandbox" title="attr-iframe-sandbox"><code>sandbox</code></dfn> + attribute, when specified, enables a set of extra restrictions on + any content hosted by the <code><a href="#the-iframe-element">iframe</a></code>. Its value must be an + <a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a>. The + allowed values are <code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>, + <code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code>, + and <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>. When + the attribute is set, the content is treated as being from a unique + <a href="#origin">origin</a>, forms and scripts are disabled, links are + prevented from targeting other <a href="browsers.html#browsing-context" title="browsing + context">browsing contexts</a>, and plugins are disabled. The + <code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code> + token allows the content to be treated as being from the same origin + instead of forcing it into a unique origin, and the <code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code> and <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code> + tokens re-enable forms and scripts respectively (though scripts are + still prevented from creating popups).</p><div class="example"> + + <p>In this example, some completely-unknown, potentially hostile, + user-provided HTML content is embedded in a page. Because it is + sandboxed, it is treated by the user agent as being from a unique + origin, despite the content being served from the same site. Thus + it is affected by all the normal cross-site restrictions. In + addition, the embedded page has scripting disabled, plugins + disabled, forms disabled, and it cannot navigate any frames or + windows other than itself (or any frames or windows it itself + embeds).</p> + + <pre><p>We're not scared of you! Here is your content, unedited:</p> +<iframe sandbox src="getusercontent.cgi?id=12193"></iframe></pre> + + <p>Note that cookies are still sent to the server in the <code title="">getusercontent.cgi</code> request, though they are not + visible in the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> IDL + attribute.</p> + + </div><div class="example"> + + <p>In this example, a gadget from another site is embedded. The + gadget has scripting and forms enabled, and the origin sandbox + restrictions are lifted, allowing the gadget to communicate with + its originating server. The sandbox is still useful, however, as it + disables plugins and popups, thus reducing the risk of the user + being exposed to malware and other annoyances.</p> + + <pre><iframe sandbox="allow-same-origin allow-forms allow-scripts" + src="http://maps.example.com/embedded.html"></iframe></pre> + + </div><hr><!-- v2: Might be interesting to have a value on seamless that + allowed event propagation of some sort, maybe based on the WICD + work: http://www.w3.org/TR/WICD/ --><p>The <dfn id="attr-iframe-seamless" title="attr-iframe-seamless"><code>seamless</code></dfn> + attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, it + indicates that the <code><a href="#the-iframe-element">iframe</a></code> element's <a href="browsers.html#browsing-context">browsing + context</a> is to be rendered in a manner that makes it appear to + be part of the containing document (seamlessly included in the + parent document). </p><p class="note">The attribute can be set or removed dynamically, + with the rendering updating in tandem.</p><div class="example"> + + <p>In this example, the site's navigation is embedded using a + client-side include using an <code><a href="#the-iframe-element">iframe</a></code>. Any links in the + <code><a href="#the-iframe-element">iframe</a></code> will, in new user agents, be automatically + opened in the <code><a href="#the-iframe-element">iframe</a></code>'s parent browsing context; for + legacy user agents, the site could also include a <code><a href="semantics.html#the-base-element">base</a></code> + element with a <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> + attribute with the value <code title="">_parent</code>. Similarly, + in new user agents the styles of the parent page will be + automatically applied to the contents of the frame, but to support + legacy user agents authors might wish to include the styles + explicitly.</p> + + <pre><nav><iframe seamless src="nav.include.html"></iframe></nav></pre> + + </div><hr><p>The <code><a href="#the-iframe-element">iframe</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension + attributes</a> for cases where the embedded content has specific + dimensions (e.g. ad units have well-defined dimensions).</p><p>An <code><a href="#the-iframe-element">iframe</a></code> element never has <a href="content-models.html#fallback-content">fallback + content</a>, as it will always create a nested <a href="browsers.html#browsing-context">browsing + context</a>, regardless of whether the specified initial contents + are successfully used.</p><p>Descendants of <code><a href="#the-iframe-element">iframe</a></code> elements represent + nothing. (In legacy user agents that do not support + <code><a href="#the-iframe-element">iframe</a></code> elements, the contents would be parsed as markup + that could act as fallback content.)</p><p>When used in <a href="dom.html#html-documents">HTML documents</a>, the allowed content + model of <code><a href="#the-iframe-element">iframe</a></code> elements is text, except that invoking + the <a href="#html-fragment-parsing-algorithm">HTML fragment parsing algorithm</a> with the + <code><a href="#the-iframe-element">iframe</a></code> element as the <var title="">context</var> + element and the text contents as the <var title="">input</var> must + result in a list of nodes that are all <a href="content-models.html#phrasing-content">phrasing + content</a>, with no <a href="#parse-error" title="parse error">parse + errors</a> having occurred, with no <code><a href="scripting-1.html#script">script</a></code> elements + being anywhere in the list or as descendants of elements in the + list, and with all the elements in the list (including their + descendants) being themselves conforming.</p><p>The <code><a href="#the-iframe-element">iframe</a></code> element must be empty in <a href="dom.html#xml-documents">XML + documents</a>.</p><p class="note">The <a href="#html-parser">HTML parser</a> treats markup inside + <code><a href="#the-iframe-element">iframe</a></code> elements as text.</p><div class="example"> + + <p>Here is an example of a page using an <code><a href="#the-iframe-element">iframe</a></code> to + include advertising from an advertising broker:</p> + + <pre><iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner" + width="468" height="60"></iframe></pre> + + </div><h4 id="the-embed-element"><span class="secno">4.8.4 </span>The <dfn><code>embed</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- (v2?) + we have all kinds of quirks we should define if they come up during + testing, as e.g. shown in: + http://mxr.mozilla.org/mozilla-central/source/layout/generic/nsObjectFrame.cpp + http://trac.webkit.org/browser/trunk/WebCore/html/HTMLEmbedElement.cpp + http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderPartObject.cpp (updateWidget) + e.g. - 240x200 default + - the attributes/params are sent in a name/value pair list as follows (for Gecko): + + attributes of the element, in source order + + a synthesised 'src' attribute, if there was no 'src' but + there was a 'data', with the value of the 'data' attribute + + PARAM/null + + the params, in source order + (WebKit does something different still) + - the HIDDEN attribute (might be moot now) +--><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd> + <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Empty.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-embed-src"><a href="#attr-embed-src">src</a></code></dd> + <dd><code title="attr-embed-type"><a href="#attr-embed-type">type</a></code></dd> + <dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd> + <dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd> + <dd>Any other attribute that has no namespace (see prose).</dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmlembedelement">HTMLEmbedElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute DOMString <a href="#dom-embed-src" title="dom-embed-src">src</a>; + attribute DOMString <a href="#dom-embed-type" title="dom-embed-type">type</a>; + attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>; + attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>; +};</pre> + + </dd> + </dl><p>The <code><a href="#the-embed-element">embed</a></code> element <a href="#represents">represents</a> an + integration point for an external (typically non-HTML) application + or interactive content.</p><p>The <dfn id="attr-embed-src" title="attr-embed-src"><code>src</code></dfn> attribute + gives the address of the resource being embedded. The attribute, if + present, must contain a <a href="urls.html#valid-url">valid URL</a>.</p><p>The <dfn id="attr-embed-type" title="attr-embed-type"><code>type</code></dfn> + attribute, if present, gives the <a href="infrastructure.html#mime-type">MIME type</a> of the plugin to + instantiate. The value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>, + optionally with parameters. If both the <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute and the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute are present, then the + <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute must specify the + same type as the <a href="#content-type" title="Content-Type">explicit Content-Type + metadata</a> of the resource given by the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute.</p><p>Any namespace-less attribute other than <code title="attr-embed-name"><a href="obsolete.html#attr-embed-name">name</a></code> and <code title="attr-embed-align"><a href="obsolete.html#attr-embed-align">align</a></code> <!-- when editing, see also + note below --> may be specified on the <code><a href="#the-embed-element">embed</a></code> element, + so long as its name is <a href="infrastructure.html#xml-compatible">XML-compatible</a> and contains no + characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to + LATIN CAPITAL LETTER Z). These attributes are then passed as + parameters to the <a href="infrastructure.html#plugin">plugin</a>.</p><p class="note">All attributes in <a href="dom.html#html-documents">HTML documents</a> get + lowercased automatically, so the restriction on uppercase letters + doesn't affect such documents.</p><p class="note">The two exceptions are to exclude legacy attributes + that have side-effects beyond just sending parameters to the + <a href="infrastructure.html#plugin">plugin</a>.</p><p>The <code><a href="#the-embed-element">embed</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension + attributes</a>.</p><div class="example"> + + <p>Here's a way to embed a resource that requires a proprietary + plug-in, like Flash:</p> + + <pre><embed src="catgame.swf"></pre> + + <p>If the user does not have the plug-in (for example if the + plug-in vendor doesn't support the user's platform), then the user + will be unable to use the resource.</p> + + <p>To pass the plugin a parameter "quality" with the value "high", + an attribute can be specified:</p> + + <pre><embed src="catgame.swf" quality="high"></pre> + + <p>This would be equivalent to the following, when using an + <code><a href="#the-object-element">object</a></code> element instead:</p> + + <pre><object data="catgame.swf"> + <param name="quality" value="high"> +</object></pre> + + </div><h4 id="the-object-element"><span class="secno">4.8.5 </span>The <dfn><code>object</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd> + <dd>If the element has a <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute: <a href="content-models.html#interactive-content">Interactive content</a>.</dd> <!-- also when showing a plugin or a nested browsing context, but checking that statically is hard...) --> + <dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, <a href="forms.html#form-associated-element">form-associated element</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Zero or more <code><a href="#the-param-element">param</a></code> elements, then, <a href="content-models.html#transparent">transparent</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-object-data"><a href="#attr-object-data">data</a></code></dd> + <dd><code title="attr-object-type"><a href="#attr-object-type">type</a></code></dd> + <dd><code title="attr-object-name"><a href="#attr-object-name">name</a></code></dd> + <dd><code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code></dd> + <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd> + <dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd> + <dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmlobjectelement">HTMLObjectElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute DOMString <a href="#dom-object-data" title="dom-object-data">data</a>; + attribute DOMString <a href="#dom-object-type" title="dom-object-type">type</a>; + attribute DOMString <a href="#dom-object-name" title="dom-object-name">name</a>; + attribute DOMString <a href="#dom-object-usemap" title="dom-object-useMap">useMap</a>; + readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="#dom-fae-form" title="dom-fae-form">form</a>; + attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>; + attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>; + readonly attribute Document <a href="#dom-object-contentdocument" title="dom-object-contentDocument">contentDocument</a>; + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-object-contentwindow" title="dom-object-contentWindow">contentWindow</a>; + + readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>; + readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>; + readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>; + boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>(); + void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error); +};</pre> + + </dd> + </dl><p>The <code><a href="#the-object-element">object</a></code> element can represent an external + resource, which, depending on the type of the resource, will either + be treated as an image, as a <a href="browsers.html#nested-browsing-context">nested browsing context</a>, + or as an external resource to be processed by a + <a href="infrastructure.html#plugin">plugin</a>.</p><p>The <dfn id="attr-object-data" title="attr-object-data"><code>data</code></dfn> + attribute, if present, specifies the address of the resource. If + present, the attribute must be a <a href="urls.html#valid-url">valid URL</a>.</p><p>The <dfn id="attr-object-type" title="attr-object-type"><code>type</code></dfn> + attribute, if present, specifies the type of the resource. If + present, the attribute must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>, + optionally with parameters.</p><p>One or both of the <code title="attr-object-data"><a href="#attr-object-data">data</a></code> and + <code title="attr-object-type"><a href="#attr-object-type">type</a></code> attributes must be + present.</p><p>The <dfn id="attr-object-name" title="attr-object-name"><code>name</code></dfn> + attribute, if present, must be a <a href="browsers.html#valid-browsing-context-name">valid browsing context + name</a>. The given value is used to name the <a href="browsers.html#nested-browsing-context">nested + browsing context</a>, if applicable.</p><p>The <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute, + if present while the <code><a href="#the-object-element">object</a></code> element represents an + image, can indicate that the object has an associated <a href="the-map-element.html#image-map">image + map</a>. </p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to + explicitly associate the <code><a href="#the-object-element">object</a></code> element with its + <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p><p>The <code><a href="#the-object-element">object</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension + attributes</a>.</p><div class="example"> + + <p>In the following example, a Java applet is embedded in a page + using the <code><a href="#the-object-element">object</a></code> element. (Generally speaking, it is + better to avoid using applets like these and instead use native + JavaScript and HTML to provide the functionality, since that way + the application will work on all Web browsers without requiring a + third-party plugin. Many devices, especially embedded devices, do + not support third-party technologies like Java.)</p> + + <pre><figure> + <dd> + <object type="application/x-java-applet"> + <param name="code" value="MyJavaClass"> + <p>You do not have Java available, or it is disabled.</p> + </object> + </dd> + <dt>My Java Clock</dt> +</figure></pre> + + </div><div class="example"> + + <p>In this example, an HTML page is embedded in another using the + <code><a href="#the-object-element">object</a></code> element.</p> + + <pre><figure> + <dd><object data="clock.html"></object> + <dt>My HTML Clock +</figure></pre> + + </div><h4 id="the-param-element"><span class="secno">4.8.6 </span>The <dfn><code>param</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd>None.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>As a child of an <code><a href="#the-object-element">object</a></code> element, before any <a href="content-models.html#flow-content">flow content</a>.</dd> + <dt>Content model:</dt> + <dd>Empty.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-param-name"><a href="#attr-param-name">name</a></code></dd> + <dd><code title="attr-param-value"><a href="#attr-param-value">value</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmlparamelement">HTMLParamElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute DOMString <a href="#dom-param-name" title="dom-param-name">name</a>; + attribute DOMString <a href="#dom-param-value" title="dom-param-value">value</a>; +};</pre> + </dd> + </dl><p>The <code><a href="#the-param-element">param</a></code> element defines parameters for plugins + invoked by <code><a href="#the-object-element">object</a></code> elements. It does not <a href="#represents" title="represents">represent</a> anything on its own.</p><p>The <dfn id="attr-param-name" title="attr-param-name"><code>name</code></dfn> + attribute gives the name of the parameter.</p><p>The <dfn id="attr-param-value" title="attr-param-value"><code>value</code></dfn> + attribute gives the value of the parameter.</p><p>Both attributes must be present. They may have any value.</p><div class="example"> + + <p>The following example shows how the <code><a href="#the-param-element">param</a></code> element + can be used to pass a parameter to a plugin, in this case the Flash + plugin.</p> + + <pre><!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: microdata.html =================================================================== RCS file: /sources/public/html5/spec-author-view/microdata.html,v retrieving revision 1.554 retrieving revision 1.555 diff -u -d -r1.554 -r1.555 --- microdata.html 3 Jan 2010 15:10:30 -0000 1.554 +++ microdata.html 3 Jan 2010 15:15:06 -0000 1.555 @@ -0,0 +1,1009 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>5 Microdata — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...979 lines suppressed...] + properties. Otherwise, an empty + <code><a href="urls.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="urls.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.556 retrieving revision 1.557 diff -u -d -r1.556 -r1.557 --- Overview.html 3 Jan 2010 15:10:30 -0000 1.556 +++ Overview.html 3 Jan 2010 15:15:05 -0000 1.557 @@ -0,0 +1,857 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split index"><head><title>HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"></head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</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-21-december-2009">Editor's Draft 21 December 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> + </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 21 December 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><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- temporarily moved to Status of this Document after discussion with plh in October 2009 --><!-- will be moved back to below W3C copyright in April 2010 --><p class="alt">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 --><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="common-microsyntaxes.html#common-microsyntaxes"><span class="secno">2.4 </span>Common microsyntaxes</a> + <ol><li><a href="common-microsyntaxes.html#boolean-attributes"><span class="secno">2.4.1 </span>Boolean attributes</a></li> + <li><a href="common-microsyntaxes.html#keywords-and-enumerated-attributes"><span class="secno">2.4.2 </span>Keywords and enumerated attributes</a></li> + <li><a href="common-microsyntaxes.html#numbers"><span class="secno">2.4.3 </span>Numbers</a> + <ol><li><a href="common-microsyntaxes.html#non-negative-integers"><span class="secno">2.4.3.1 </span>Non-negative integers</a></li> + <li><a href="common-microsyntaxes.html#signed-integers"><span class="secno">2.4.3.2 </span>Signed integers</a></li> + <li><a href="common-microsyntaxes.html#real-numbers"><span class="secno">2.4.3.3 </span>Real numbers</a></li> + <li><a href="common-microsyntaxes.html#ratios"><span class="secno">2.4.3.4 </span>Ratios</a></li> + <li><a href="common-microsyntaxes.html#lists-of-integers"><span class="secno">2.4.3.5 </span>Lists of integers</a></li></ol></li> + <li><a href="common-microsyntaxes.html#dates-and-times"><span class="secno">2.4.4 </span>Dates and times</a> + <ol><li><a href="common-microsyntaxes.html#months"><span class="secno">2.4.4.1 </span>Months</a></li> + <li><a href="common-microsyntaxes.html#dates"><span class="secno">2.4.4.2 </span>Dates</a></li> + <li><a href="common-microsyntaxes.html#times"><span class="secno">2.4.4.3 </span>Times</a></li> + <li><a href="common-microsyntaxes.html#local-dates-and-times"><span class="secno">2.4.4.4 </span>Local dates and times</a></li> + <li><a href="common-microsyntaxes.html#global-dates-and-times"><span class="secno">2.4.4.5 </span>Global dates and times</a></li> + <li><a href="common-microsyntaxes.html#weeks"><span class="secno">2.4.4.6 </span>Weeks</a></li> + <li><a href="common-microsyntaxes.html#vaguer-moments-in-time"><span class="secno">2.4.4.7 </span>Vaguer moments in time</a></li></ol></li> + <li><a href="common-microsyntaxes.html#colors"><span class="secno">2.4.5 </span>Colors</a></li> + <li><a href="common-microsyntaxes.html#space-separated-tokens"><span class="secno">2.4.6 </span>Space-separated tokens</a></li> + <li><a href="common-microsyntaxes.html#comma-separated-tokens"><span class="secno">2.4.7 </span>Comma-separated tokens</a></li> + <li><a href="common-microsyntaxes.html#syntax-references"><span class="secno">2.4.8 </span>References</a></li> + <li><a href="common-microsyntaxes.html#mq"><span class="secno">2.4.9 </span>Media queries</a></li></ol></li> + <li><a href="urls.html#urls"><span class="secno">2.5 </span>URLs</a> + <ol><li><a href="urls.html#terminology-0"><span class="secno">2.5.1 </span>Terminology</a></li> + <li><a href="urls.html#interfaces-for-url-manipulation"><span class="secno">2.5.2 </span>Interfaces for URL manipulation</a></li></ol></li> + <li><a href="urls.html#common-dom-interfaces"><span class="secno">2.6 </span>Common DOM interfaces</a> + <ol><li><a href="urls.html#reflecting-content-attributes-in-idl-attributes"><span class="secno">2.6.1 </span>Reflecting content attributes in IDL attributes</a></li> + <li><a href="urls.html#collections-0"><span class="secno">2.6.2 </span>Collections</a> + <ol><li><a href="urls.html#htmlcollection-0"><span class="secno">2.6.2.1 </span>HTMLCollection</a></li> + <li><a href="urls.html#htmlallcollection-0"><span class="secno">2.6.2.2 </span>HTMLAllCollection</a></li> + <li><a href="urls.html#htmlformcontrolscollection-0"><span class="secno">2.6.2.3 </span>HTMLFormControlsCollection</a></li> + <li><a href="urls.html#htmloptionscollection-0"><span class="secno">2.6.2.4 </span>HTMLOptionsCollection</a></li> + <li><a href="urls.html#htmlpropertiescollection-0"><span class="secno">2.6.2.5 </span>HTMLPropertiesCollection</a></li></ol></li> + <li><a href="urls.html#domtokenlist-0"><span class="secno">2.6.3 </span>DOMTokenList</a></li> + <li><a href="urls.html#domsettabletokenlist-0"><span class="secno">2.6.4 </span>DOMSettableTokenList</a></li> + <li><a href="urls.html#domstringmap-0"><span class="secno">2.6.5 </span>DOMStringMap</a></li> + <li><a href="urls.html#dom-feature-strings"><span class="secno">2.6.6 </span>DOM feature strings</a></li> + <li><a href="urls.html#exceptions"><span class="secno">2.6.7 </span>Exceptions</a></li></ol></li></ol></li> + <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="elements.html#elements"><span class="secno">3.2 </span>Elements</a> + <ol><li><a href="elements.html#semantics-0"><span class="secno">3.2.1 </span>Semantics</a></li> + <li><a href="elements.html#elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</a></li> + <li><a href="elements.html#global-attributes"><span class="secno">3.2.3 </span>Global attributes</a> + <ol><li><a href="elements.html#the-id-attribute"><span class="secno">3.2.3.1 </span>The <code>id</code> attribute</a></li> + <li><a href="elements.html#the-title-attribute"><span class="secno">3.2.3.2 </span>The <code>title</code> attribute</a></li> + <li><a href="elements.html#the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang">lang</code> and <code title="attr-xml-lang">xml:lang</code> attributes</a></li> + <li><a href="elements.html#the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <code>xml:base</code> + attribute (XML only)</a></li> + <li><a href="elements.html#the-dir-attribute"><span class="secno">3.2.3.5 </span>The <code>dir</code> attribute</a></li> + <li><a href="elements.html#classes"><span class="secno">3.2.3.6 </span>The <code>class</code> attribute</a></li> + <li><a href="elements.html#the-style-attribute"><span class="secno">3.2.3.7 </span>The <code>style</code> attribute</a></li> + <li><a href="elements.html#embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span>Embedding custom non-visible data</a></li></ol></li> + <li><a href="elements.html#element-definitions"><span class="secno">3.2.4 </span>Element definitions</a></li> + <li><a href="content-models.html#content-models"><span class="secno">3.2.5 </span>Content models</a> + <ol><li><a href="content-models.html#kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</a> + <ol><li><a href="content-models.html#metadata-content-0"><span class="secno">3.2.5.1.1 </span>Metadata content</a></li> + <li><a href="content-models.html#flow-content-0"><span class="secno">3.2.5.1.2 </span>Flow content</a></li> + <li><a href="content-models.html#sectioning-content-0"><span class="secno">3.2.5.1.3 </span>Sectioning content</a></li> + <li><a href="content-models.html#heading-content-0"><span class="secno">3.2.5.1.4 </span>Heading content</a></li> + <li><a href="content-models.html#phrasing-content-0"><span class="secno">3.2.5.1.5 </span>Phrasing content</a></li> + <li><a href="content-models.html#embedded-content-0"><span class="secno">3.2.5.1.6 </span>Embedded content</a></li> + <li><a href="content-models.html#interactive-content-0"><span class="secno">3.2.5.1.7 </span>Interactive content</a></li></ol></li> + <li><a href="content-models.html#transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</a></li> + <li><a href="content-models.html#paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</a></li></ol></li> + <li><a href="content-models.html#annotations-for-assistive-technology-products-aria"><span class="secno">3.2.6 </span>Annotations for assistive technology products (ARIA)</a></li></ol></li> + <li><a href="apis-in-html-documents.html#apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</a></li> + <li><a href="apis-in-html-documents.html#dynamic-markup-insertion"><span class="secno">3.4 </span>Dynamic markup insertion</a> + <ol><li><a href="apis-in-html-documents.html#opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</a></li> + <li><a href="apis-in-html-documents.html#closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</a></li> + <li><a href="apis-in-html-documents.html#document.write"><span class="secno">3.4.3 </span><code title="dom-document-write">document.write()</code></a></li> + <li><a href="apis-in-html-documents.html#document.writeln"><span class="secno">3.4.4 </span><code title="dom-document-writeln">document.writeln()</code></a></li> + <li><a href="apis-in-html-documents.html#innerhtml"><span class="secno">3.4.5 </span><code title="dom-innerHTML">innerHTML</code></a></li> + <li><a href="apis-in-html-documents.html#outerhtml"><span class="secno">3.4.6 </span><code title="dom-outerHTML">outerHTML</code></a></li> + <li><a href="apis-in-html-documents.html#insertadjacenthtml"><span class="secno">3.4.7 </span><code title="dom-insertAdjacentHTML">insertAdjacentHTML()</code></a></li></ol></li></ol></li> + <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="scripting-1.html#scripting-1"><span class="secno">4.3 </span>Scripting</a> + <ol><li><a href="scripting-1.html#script"><span class="secno">4.3.1 </span>The <code>script</code> element</a> + <ol><li><a href="scripting-1.html#scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</a></li> + <li><a href="scripting-1.html#restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li> + <li><a href="scripting-1.html#inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span>Inline documentation for external scripts</a></li></ol></li> + <li><a href="scripting-1.html#the-noscript-element"><span class="secno">4.3.2 </span>The <code>noscript</code> element</a></li></ol></li> + <li><a href="sections.html#sections"><span class="secno">4.4 </span>Sections</a> + <ol><li><a href="sections.html#the-body-element-0"><span class="secno">4.4.1 </span>The <code>body</code> element</a></li> + <li><a href="sections.html#the-section-element"><span class="secno">4.4.2 </span>The <code>section</code> element</a></li> + <li><a href="sections.html#the-nav-element"><span class="secno">4.4.3 </span>The <code>nav</code> element</a></li> + <li><a href="sections.html#the-article-element"><span class="secno">4.4.4 </span>The <code>article</code> element</a></li> + <li><a href="sections.html#the-aside-element"><span class="secno">4.4.5 </span>The <code>aside</code> element</a></li> + <li><a href="sections.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="sections.html#the-hgroup-element"><span class="secno">4.4.7 </span>The <code>hgroup</code> element</a></li> + <li><a href="sections.html#the-header-element"><span class="secno">4.4.8 </span>The <code>header</code> element</a></li> + <li><a href="sections.html#the-footer-element"><span class="secno">4.4.9 </span>The <code>footer</code> element</a></li> + <li><a href="sections.html#the-address-element"><span class="secno">4.4.10 </span>The <code>address</code> element</a></li> + <li><a href="sections.html#headings-and-sections"><span class="secno">4.4.11 </span>Headings and sections</a> + <ol><li><a href="sections.html#outlines"><span class="secno">4.4.11.1 </span>Creating an outline</a></li></ol></li></ol></li> + <li><a href="grouping-content.html#grouping-content"><span class="secno">4.5 </span>Grouping content</a> + <ol><li><a href="grouping-content.html#the-p-element"><span class="secno">4.5.1 </span>The <code>p</code> element</a></li> + <li><a href="grouping-content.html#the-hr-element"><span class="secno">4.5.2 </span>The <code>hr</code> element</a></li> + <li><a href="grouping-content.html#the-br-element"><span class="secno">4.5.3 </span>The <code>br</code> element</a></li> + <li><a href="grouping-content.html#the-pre-element"><span class="secno">4.5.4 </span>The <code>pre</code> element</a></li> + <li><a href="grouping-content.html#the-blockquote-element"><span class="secno">4.5.5 </span>The <code>blockquote</code> element</a></li> + <li><a href="grouping-content.html#the-ol-element"><span class="secno">4.5.6 </span>The <code>ol</code> element</a></li> + <li><a href="grouping-content.html#the-ul-element"><span class="secno">4.5.7 </span>The <code>ul</code> element</a></li> + <li><a href="grouping-content.html#the-li-element"><span class="secno">4.5.8 </span>The <code>li</code> element</a></li> + <li><a href="grouping-content.html#the-dl-element"><span class="secno">4.5.9 </span>The <code>dl</code> element</a></li> + <li><a href="grouping-content.html#the-dt-element"><span class="secno">4.5.10 </span>The <code>dt</code> element</a></li> + <li><a href="grouping-content.html#the-dd-element"><span class="secno">4.5.11 </span>The <code>dd</code> element</a></li> + <li><a href="grouping-content.html#the-div-element"><span class="secno">4.5.12 </span>The <code>div</code> element</a></li></ol></li> + <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="edits.html#edits"><span class="secno">4.7 </span>Edits</a> + <ol><li><a href="edits.html#the-ins-element"><span class="secno">4.7.1 </span>The <code>ins</code> element</a></li> + <li><a href="edits.html#the-del-element"><span class="secno">4.7.2 </span>The <code>del</code> element</a></li> + <li><a href="edits.html#attributes-common-to-ins-and-del-elements"><span class="secno">4.7.3 </span>Attributes common to <code>ins</code> and <code>del</code> elements</a></li> + <li><a href="edits.html#edits-and-paragraphs"><span class="secno">4.7.4 </span>Edits and paragraphs</a></li> + <li><a href="edits.html#edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</a></li></ol></li> + <li><a href="embedded-content-1.html#embedded-content-1"><span class="secno">4.8 </span>Embedded content</a> + <ol><li><a href="embedded-content-1.html#the-figure-element"><span class="secno">4.8.1 </span>The <code>figure</code> element</a></li> + <li><a href="embedded-content-1.html#the-img-element"><span class="secno">4.8.2 </span>The <code>img</code> element</a> + <ol><li><a href="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.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="embedded-content-1.html#general-guidelines"><span class="secno">4.8.2.1.12 </span>General guidelines</a></li></ol></li></ol></li> + <li><a href="the-iframe-element.html#the-iframe-element"><span class="secno">4.8.3 </span>The <code>iframe</code> element</a></li> + <li><a href="the-iframe-element.html#the-embed-element"><span class="secno">4.8.4 </span>The <code>embed</code> element</a></li> + <li><a href="the-iframe-element.html#the-object-element"><span class="secno">4.8.5 </span>The <code>object</code> element</a></li> + <li><a href="the-iframe-element.html#the-param-element"><span class="secno">4.8.6 </span>The <code>param</code> element</a></li> + <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-map-element.html#the-map-element"><span class="secno">4.8.12 </span>The <code>map</code> element</a></li> + <li><a href="the-map-element.html#the-area-element"><span class="secno">4.8.13 </span>The <code>area</code> element</a></li> + <li><a href="the-map-element.html#image-maps"><span class="secno">4.8.14 </span>Image maps</a></li> + <li><a href="the-map-element.html#mathml"><span class="secno">4.8.15 </span>MathML</a></li> + <li><a href="the-map-element.html#svg-0"><span class="secno">4.8.16 </span>SVG</a></li> + <li><a href="the-map-element.html#dimension-attributes"><span class="secno">4.8.17 </span>Dimension attributes</a></li></ol></li> + <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="the-input-element.html#the-input-element"><span class="secno">4.10.5 </span>The <code>input</code> element</a> + <ol><li><a href="states-of-the-type-attribute.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="states-of-the-type-attribute.html#hidden-state"><span class="secno">4.10.5.1.1 </span>Hidden state</a></li> + <li><a href="states-of-the-type-attribute.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="states-of-the-type-attribute.html#telephone-state"><span class="secno">4.10.5.1.3 </span>Telephone state</a></li> + <li><a href="states-of-the-type-attribute.html#url-state"><span class="secno">4.10.5.1.4 </span>URL state</a></li> + <li><a href="states-of-the-type-attribute.html#e-mail-state"><span class="secno">4.10.5.1.5 </span>E-mail state</a></li> + <li><a href="states-of-the-type-attribute.html#password-state"><span class="secno">4.10.5.1.6 </span>Password state</a></li> + <li><a href="states-of-the-type-attribute.html#date-and-time-state"><span class="secno">4.10.5.1.7 </span>Date and Time state</a></li> + <li><a href="states-of-the-type-attribute.html#date-state"><span class="secno">4.10.5.1.8 </span>Date state</a></li> + <li><a href="states-of-the-type-attribute.html#month-state"><span class="secno">4.10.5.1.9 </span>Month state</a></li> + <li><a href="states-of-the-type-attribute.html#week-state"><span class="secno">4.10.5.1.10 </span>Week state</a></li> + <li><a href="states-of-the-type-attribute.html#time-state"><span class="secno">4.10.5.1.11 </span>Time state</a></li> + <li><a href="states-of-the-type-attribute.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="number-state.html#number-state"><span class="secno">4.10.5.1.13 </span>Number state</a></li> + <li><a href="number-state.html#range-state"><span class="secno">4.10.5.1.14 </span>Range state</a></li> + <li><a href="number-state.html#color-state"><span class="secno">4.10.5.1.15 </span>Color state</a></li> + <li><a href="number-state.html#checkbox-state"><span class="secno">4.10.5.1.16 </span>Checkbox state</a></li> + <li><a href="number-state.html#radio-button-state"><span class="secno">4.10.5.1.17 </span>Radio Button state</a></li> + <li><a href="number-state.html#file-upload-state"><span class="secno">4.10.5.1.18 </span>File Upload state</a></li> + <li><a href="number-state.html#submit-button-state"><span class="secno">4.10.5.1.19 </span>Submit Button state</a></li> + <li><a href="number-state.html#image-button-state"><span class="secno">4.10.5.1.20 </span>Image Button state</a></li> + <li><a href="number-state.html#reset-button-state"><span class="secno">4.10.5.1.21 </span>Reset Button state</a></li> + <li><a href="number-state.html#button-state"><span class="secno">4.10.5.1.22 </span>Button state</a></li></ol></li> + <li><a href="common-input-element-attributes.html#common-input-element-attributes"><span class="secno">4.10.5.2 </span>Common <code>input</code> element attributes</a> + <ol><li><a href="common-input-element-attributes.html#the-autocomplete-attribute"><span class="secno">4.10.5.2.1 </span>The <code title="attr-input-autocomplete">autocomplete</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-list-attribute"><span class="secno">4.10.5.2.2 </span>The <code title="attr-input-list">list</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly">readonly</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-size-attribute"><span class="secno">4.10.5.2.4 </span>The <code title="attr-input-size">size</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-required-attribute"><span class="secno">4.10.5.2.5 </span>The <code title="attr-input-required">required</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-multiple-attribute"><span class="secno">4.10.5.2.6 </span>The <code title="attr-input-multiple">multiple</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-maxlength-attribute"><span class="secno">4.10.5.2.7 </span>The <code title="attr-input-maxlength">maxlength</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-pattern-attribute"><span class="secno">4.10.5.2.8 </span>The <code title="attr-input-pattern">pattern</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-min-and-max-attributes"><span class="secno">4.10.5.2.9 </span>The <code title="attr-input-min">min</code> and <code title="attr-input-max">max</code> attributes</a></li> + <li><a href="common-input-element-attributes.html#the-step-attribute"><span class="secno">4.10.5.2.10 </span>The <code title="attr-input-step">step</code> attribute</a></li> + <li><a href="common-input-element-attributes.html#the-placeholder-attribute"><span class="secno">4.10.5.2.11 </span>The <code title="attr-input-placeholder">placeholder</code> attribute</a></li></ol></li> + <li><a href="common-input-element-attributes.html#common-input-element-apis"><span class="secno">4.10.5.3 </span>Common <code>input</code> element APIs</a></li></ol></li> + <li><a href="the-button-element.html#the-button-element"><span class="secno">4.10.6 </span>The <code>button</code> element</a></li> + <li><a href="the-button-element.html#the-select-element"><span class="secno">4.10.7 </span>The <code>select</code> element</a></li> + <li><a href="the-button-element.html#the-datalist-element"><span class="secno">4.10.8 </span>The <code>datalist</code> element</a></li> + <li><a href="the-button-element.html#the-optgroup-element"><span class="secno">4.10.9 </span>The <code>optgroup</code> element</a></li> + <li><a href="the-button-element.html#the-option-element"><span class="secno">4.10.10 </span>The <code>option</code> element</a></li> + <li><a href="the-button-element.html#the-textarea-element"><span class="secno">4.10.11 </span>The <code>textarea</code> element</a></li> + <li><a href="the-button-element.html#the-keygen-element"><span class="secno">4.10.12 </span>The <code>keygen</code> element</a></li> + <li><a href="the-button-element.html#the-output-element"><span class="secno">4.10.13 </span>The <code>output</code> element</a></li> + <li><a href="association-of-controls-and-forms.html#association-of-controls-and-forms"><span class="secno">4.10.14 </span>Association of controls and forms</a></li> + <li><a href="association-of-controls-and-forms.html#attributes-common-to-form-controls"><span class="secno">4.10.15 </span>Attributes common to form controls</a> + <ol><li><a href="association-of-controls-and-forms.html#naming-form-controls"><span class="secno">4.10.15.1 </span>Naming form controls</a></li> + <li><a href="association-of-controls-and-forms.html#enabling-and-disabling-form-controls"><span class="secno">4.10.15.2 </span>Enabling and disabling form controls</a></li> + <li><a href="association-of-controls-and-forms.html#autofocusing-a-form-control"><span class="secno">4.10.15.3 </span>Autofocusing a form control</a></li> + <li><a href="association-of-controls-and-forms.html#limiting-user-input-length"><span class="secno">4.10.15.4 </span>Limiting user input length</a></li> + <li><a href="association-of-controls-and-forms.html#form-submission-0"><span class="secno">4.10.15.5 </span>Form submission</a></li></ol></li> + <li><a href="association-of-controls-and-forms.html#constraints"><span class="secno">4.10.16 </span>Constraints</a> + <ol><li><a href="association-of-controls-and-forms.html#definitions"><span class="secno">4.10.16.1 </span>Definitions</a></li> + <li><a href="association-of-controls-and-forms.html#the-constraint-validation-api"><span class="secno">4.10.16.2 </span>The constraint validation API</a></li></ol></li> + <li><a href="association-of-controls-and-forms.html#form-submission"><span class="secno">4.10.17 </span>Form submission</a></li></ol></li> + <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="commands.html#commands"><span class="secno">4.11.4 </span>Commands</a></li></ol></li> + <li><a href="commands.html#common-idioms-without-dedicated-elements"><span class="secno">4.12 </span>Common idioms without dedicated elements</a> + <ol><li><a href="commands.html#tag-clouds"><span class="secno">4.12.1 </span>Tag clouds</a></li> + <li><a href="commands.html#conversations"><span class="secno">4.12.2 </span>Conversations</a></li> + <li><a href="commands.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="timers.html#timers"><span class="secno">6.4 </span>Timers</a></li> + <li><a href="timers.html#user-prompts"><span class="secno">6.5 </span>User prompts</a> + <ol><li><a href="timers.html#simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</a></li> + <li><a href="timers.html#printing"><span class="secno">6.5.2 </span>Printing</a></li> + <li><a href="timers.html#dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</a></li></ol></li> + <li><a href="timers.html#system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</a> + <ol><li><a href="timers.html#client-identification"><span class="secno">6.6.1 </span>Client identification</a></li> + <li><a href="timers.html#custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</a></li> + <li><a href="timers.html#manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</a></li></ol></li> + <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="links.html#links"><span class="secno">6.10 </span>Links</a> + <ol><li><a href="links.html#hyperlink-elements"><span class="secno">6.10.1 </span>Hyperlink elements</a></li> + <li><a href="links.html#linkTypes"><span class="secno">6.10.2 </span>Link types</a> + <ol><li><a href="links.html#link-type-alternate"><span class="secno">6.10.2.1 </span>Link type "<code>alternate</code>"</a></li> + <li><a href="links.html#link-type-archives"><span class="secno">6.10.2.2 </span>Link type "<code>archives</code>"</a></li> + <li><a href="links.html#link-type-author"><span class="secno">6.10.2.3 </span>Link type "<code>author</code>"</a></li> + <li><a href="links.html#link-type-bookmark"><span class="secno">6.10.2.4 </span>Link type "<code>bookmark</code>"</a></li> + <li><a href="links.html#link-type-external"><span class="secno">6.10.2.5 </span>Link type "<code>external</code>"</a></li> + <li><a href="links.html#link-type-help"><span class="secno">6.10.2.6 </span>Link type "<code>help</code>"</a></li> + <li><a href="links.html#rel-icon"><span class="secno">6.10.2.7 </span>Link type "<code>icon</code>"</a></li> + <li><a href="links.html#link-type-license"><span class="secno">6.10.2.8 </span>Link type "<code>license</code>"</a></li> + <li><a href="links.html#link-type-nofollow"><span class="secno">6.10.2.9 </span>Link type "<code>nofollow</code>"</a></li> + <li><a href="links.html#link-type-noreferrer"><span class="secno">6.10.2.10 </span>Link type "<code>noreferrer</code>"</a></li> + <li><a href="links.html#link-type-pingback"><span class="secno">6.10.2.11 </span>Link type "<code>pingback</code>"</a></li> + <li><a href="links.html#link-type-prefetch"><span class="secno">6.10.2.12 </span>Link type "<code>prefetch</code>"</a></li> + <li><a href="links.html#link-type-search"><span class="secno">6.10.2.13 </span>Link type "<code>search</code>"</a></li> + <li><a href="links.html#link-type-stylesheet"><span class="secno">6.10.2.14 </span>Link type "<code>stylesheet</code>"</a></li> + <li><a href="links.html#link-type-sidebar"><span class="secno">6.10.2.15 </span>Link type "<code>sidebar</code>"</a></li> + <li><a href="links.html#link-type-tag"><span class="secno">6.10.2.16 </span>Link type "<code>tag</code>"</a></li> + <li><a href="links.html#hierarchical-link-types"><span class="secno">6.10.2.17 </span>Hierarchical link types</a> + <ol><li><a href="links.html#link-type-index"><span class="secno">6.10.2.17.1 </span>Link type "<code>index</code>"</a></li> + <li><a href="links.html#link-type-up"><span class="secno">6.10.2.17.2 </span>Link type "<code>up</code>"</a></li></ol></li> + <li><a href="links.html#sequential-link-types"><span class="secno">6.10.2.18 </span>Sequential link types</a> + <ol><li><a href="links.html#link-type-first"><span class="secno">6.10.2.18.1 </span>Link type "<code>first</code>"</a></li> + <li><a href="links.html#link-type-last"><span class="secno">6.10.2.18.2 </span>Link type "<code>last</code>"</a></li> + <li><a href="links.html#link-type-next"><span class="secno">6.10.2.18.3 </span>Link type "<code>next</code>"</a></li> + <li><a href="links.html#link-type-prev"><span class="secno">6.10.2.18.4 </span>Link type "<code>prev</code>"</a></li></ol></li> + <li><a href="links.html#other-link-types"><span class="secno">6.10.2.19 </span>Other link types</a></li></ol></li></ol></li></ol></li> + <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="dnd.html#dnd"><span class="secno">7.9 </span>Drag and drop</a> + <ol><li><a href="dnd.html#introduction-4"><span class="secno">7.9.1 </span>Introduction</a></li> + <li><a href="dnd.html#the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li> + <li><a href="dnd.html#dndevents"><span class="secno">7.9.3 </span>Events fired during a drag-and-drop action</a></li> + <li><a href="dnd.html#the-draggable-attribute"><span class="secno">7.9.4 </span>The <code>draggable</code> attribute</a></li> + <li><a href="dnd.html#copy-and-paste"><span class="secno">7.9.5 </span>Copy and paste</a></li></ol></li> + <li><a href="dnd.html#undo"><span class="secno">7.10 </span>Undo history</a> + <ol><li><a href="dnd.html#the-undomanager-interface"><span class="secno">7.10.1 </span>The <code>UndoManager</code> interface</a></li> + <li><a href="dnd.html#the-undomanagerevent-interface-and-the-undo-and-redo-events"><span class="secno">7.10.2 </span>The <code>UndoManagerEvent</code> interface and the <code title="event-undo">undo</code> and <code title="event-redo">redo</code> events</a></li></ol></li> + <li><a href="dnd.html#editing-apis"><span class="secno">7.11 </span>Editing APIs</a></li></ol></li> + <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: history.html =================================================================== RCS file: /sources/public/html5/spec-author-view/history.html,v retrieving revision 1.557 retrieving revision 1.558 diff -u -d -r1.557 -r1.558 --- history.html 3 Jan 2010 15:10:30 -0000 1.557 +++ history.html 3 Jan 2010 15:15:06 -0000 1.558 @@ -0,0 +1,591 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>6.8 Session history and navigation — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="offline.html" title="6.7 Offline Web applications" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="links.html" title="6.10 Links" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="offline.html">← 6.7 Offline Web applications</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="links.html">6.10 Links →</a> + <ol class="toc"><li><ol><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></ol></li></ol></div> + + <h3 id="history"><span class="secno">6.8 </span>Session history and navigation</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="the-session-history-of-browsing-contexts"><span class="secno">6.8.1 </span>The session history of browsing contexts</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The sequence of <code>Document</code>s in a <a href="browsers.html#browsing-context">browsing + context</a> is its <dfn id="session-history">session history</dfn>.</p><p><code><a href="#history-0">History</a></code> objects provide a representation of the + pages in the session history of <a href="browsers.html#browsing-context" title="browsing + context">browsing contexts</a>. Each <a href="browsers.html#browsing-context">browsing + context</a>, including <a href="browsers.html#nested-browsing-context">nested browsing context</a>, has + a distinct session history.</p><p>Each <code>Document</code> object in a <a href="browsers.html#browsing-context">browsing + context</a>'s <a href="#session-history">session history</a> is associated with a + unique instance of the <code><a href="#history-0">History</a></code> object, although they + all must model the same underlying <a href="#session-history">session history</a>.</p><p><code><a href="#history-0">History</a></code> objects represent their <a href="browsers.html#browsing-context">browsing + context</a>'s session history as a flat list of <a href="#session-history-entry" title="session history entry">session history entries</a>. Each + <dfn id="session-history-entry">session history entry</dfn> consists of either a + <a href="urls.html#url">URL</a> or a <a href="#state-object">state object</a>, or both.</p><p class="note">Titles associated with <a href="#session-history-entry" title="session history + entry">session history entries</a> need not have any relation + with the current <code><a href="semantics.html#the-title-element-0">title</a></code> of the + <code>Document</code>. The title of a <a href="#session-history-entry">session history + entry</a> is intended to explain the state of the document at + that point, so that the user can navigate the document's + history.</p><p>URLs without associated <a href="#state-object" title="state object">state + objects</a> are added to the session history as the user (or + script) navigates from page to page.</p><p>A <dfn id="state-object">state object</dfn> is an object representing a user + interface state.</p><p>Pages can <a href="#dom-history-pushstate" title="dom-history-pushState">add</a> <a href="#state-object" title="state object">state objects</a> between their entry in the + session history and the next ("forward") entry. These are then <a href="#event-popstate" title="event-popstate">returned to the script</a> when the user + (or script) goes back in the history, thus enabling authors to use + the "navigation" metaphor even in one-page applications.</p><p>At any point, one of the entries in the session history is the + <dfn id="current-entry">current entry</dfn>. This is the entry representing the + <a href="browsers.html#active-document">active document</a> of the <a href="browsers.html#browsing-context">browsing + context</a>. The <a href="#current-entry">current entry</a> is usually an entry + for the <a href="#dom-location-href" title="dom-location-href">location</a> of the + <code>Document</code>. However, it can also be one of the entries + for <a href="#state-object" title="state object">state objects</a> added to the + history by that document.</p><p>Entries that consist of <a href="#state-object" title="state object">state + objects</a> share the same <code>Document</code> as the entry for + the page that was active when they were added.</p><p>Contiguous entries that differ just by fragment identifier also + share the same <code>Document</code>.</p><p class="note">All entries that share the same + <code>Document</code> (and that are therefore merely different + states of one particular document) are contiguous by definition.</p><h4 id="the-history-interface"><span class="secno">6.8.2 </span>The <code><a href="#history-0">History</a></code> interface</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="history-0">History</dfn> { + readonly attribute long <a href="#dom-history-length" title="dom-history-length">length</a>; + void <a href="#dom-history-go" title="dom-history-go">go</a>(in optional long delta); + void <a href="#dom-history-back" title="dom-history-back">back</a>(); + void <a href="#dom-history-forward" title="dom-history-forward">forward</a>(); + void <a href="#dom-history-pushstate" title="dom-history-pushState">pushState</a>(in any data, in DOMString title, in optional DOMString url); + void <a href="#dom-history-replacestate" title="dom-history-replaceState">replaceState</a>(in any data, in DOMString title, in optional DOMString url); +};</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-length"><a href="#dom-history-length">length</a></code></dt> + + <dd> + + <p>Returns the number of entries in the <a href="#joint-session-history">joint session history</a>.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-go"><a href="#dom-history-go">go</a></code>( [ <var title="">delta</var> ] )</dt> + + <dd> + + <p>Goes back or forward the specified number of steps in the <a href="#joint-session-history">joint session history</a>.</p> + + <p>A zero delta will reload the current page.</p> + + <p>If the delta is out of range, does nothing.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-back"><a href="#dom-history-back">back</a></code>()</dt> + + <dd> + + <p>Goes back one step in the <a href="#joint-session-history">joint session history</a>.</p> + + <p>If there is no previous page, does nothing.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-forward"><a href="#dom-history-forward">forward</a></code>()</dt> + + <dd> + + <p>Goes forward one step in the <a href="#joint-session-history">joint session history</a>.</p> + + <p>If there is no next page, does nothing.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-pushState"><a href="#dom-history-pushstate">pushState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt> + + <dd> + + <p>Pushes the given data onto the session history, with the given title, and, if provided, the given URL.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-history"><a href="#dom-history">history</a></code> . <code title="dom-history-replaceState"><a href="#dom-history-replacestate">replaceState</a></code>(<var title="">data</var>, <var title="">title</var> [, <var title="">url</var> ] )</dt> + + <dd> + + <p>Updates the current entry in the session histor to have the given data, title, and, if provided, URL.</p> + + </dd> + + </dl><p>The <dfn id="joint-session-history">joint session history</dfn> of a <code><a href="#history-0">History</a></code> + object is the union of all the <a href="#session-history" title="session history">session + histories</a> of all <a href="browsers.html#browsing-context" title="browsing context">browsing + contexts</a> of all the <a href="browsers.html#fully-active">fully active</a> + <code>Document</code> objects that share the <code><a href="#history-0">History</a></code> + object's <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>, with all the + entries that are <a href="#current-entry" title="current entry">current entries</a> + in their respective <a href="#session-history" title="session history">session + histories</a> removed except for the <a href="#current-entry-of-the-joint-session-history">current entry of the + joint session history</a>.</p><p>The <dfn id="current-entry-of-the-joint-session-history">current entry of the joint session history</dfn> is the + entry that was the most recently became a <a href="#current-entry">current entry</a> + in its <a href="#session-history">session history</a>.</p><p>Entries in the <a href="#joint-session-history">joint session history</a> are ordered + chronologically by the time they were added to their respective + <a href="#session-history" title="session history">session histories</a>. (Since all + these <a href="browsers.html#browsing-context" title="browsing context">browsing contexts</a> by + definition share an <a href="#event-loop">event loop</a>, there is always a + well-defined sequential order in which their <a href="#session-history" title="session + history">session histories</a> had their entries added.) Each + entry has an index; the earliest entry has index 0, and the + subsequent entries are numbered with consecutively increasing + integers (1, 2, 3, etc).</p><div class="example"> + + <p>Consider a game where the user can navigate along a line, such + that the user is always at some coordinate, and such that the user + can bookmark the page corresponding to a particular coordinate, to + return to it later.</p> + + <p>A static page implementing the x=5 position in such a game could + look like the following:</p> + + <pre><!DOCTYPE HTML> +<!-- this is http://example.com/line?x=5 --> +<title>Line Game - 5</title> +<p>You are at coordinate 5 on the line.</p> +<p> + <a href="?x=6">Advance to 6</a> or + <a href="?x=4">retreat to 4</a>? +</p></pre> + + <p>The problem with such a system is that each time the user + clicks, the whole page has to be reloaded. Here instead is another + way of doing it, using script:</p> + + <pre><!DOCTYPE HTML> +<!-- this starts off as http://example.com/line?x=5 --> +<title>Line Game - 5</title> +<p>You are at coordinate <span id="coord">5</span> on the line.</p> +<p> + <a href="?x=6" onclick="go(1)">Advance to 6</a> or + <a href="?x=4" onclick="go(-1)">retreat to 4</a>? +</p> +<script> + var currentPage = 5; // prefilled by server + function go(d) { + history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage); + setupPage(currentPage + d); + } + onpopstate = function(event) { + setupPage(event.state); + } + function setupPage(page) { + currentPage = page; + document.title = 'Line Game - ' + currentPage; + document.getElementById('coord').textContent = currentPage; + document.links[0].href = '?x=' + (currentPage+1); + document.links[0].textContent = 'Advance to ' + (currentPage+1); + document.links[1].href = '?x=' + (currentPage-1); + document.links[1].textContent = 'retreat to ' + (currentPage-1); + } +</script></pre> + + <p>In systems without script, this still works like the previous + example. However, users that <em>do</em> have script support can + now navigate much faster, since there is no network access for the + same experience. Furthermore, contrary to the experience the user + would have with just a naïve script-based approach, + bookmarking and navigating the session history still work.</p> + + <p>In the example above, the <var title="">data</var> argument to + the <code title="dom-history-pushState"><a href="#dom-history-pushstate">pushState()</a></code> method + is the same information as would be sent to the server, but in a + more convenient form, so that the script doesn't have to parse the + URL each time the user navigates.</p> + + </div><div class="example"> + + <p>Applications might not use the same title for a <a href="#session-history-entry">session + history entry</a> as the value of the document's + <code><a href="semantics.html#the-title-element-0">title</a></code> element at that time. For example, here is a + simple page that shows a block in the <code><a href="semantics.html#the-title-element-0">title</a></code> element. + Clearly, when navigating backwards to a previous state the user + does not go back in time, and therefore it would be inappropriate + to put the time in the session history title.</p> + + <pre><!DOCTYPE HTML> +<TITLE>Line</TITLE> +<SCRIPT> + setInterval(function () { document.title = 'Line - ' + new Date(); }, 1000); + var i = 1; + function inc() { + set(i+1); + history.pushState(i, 'Line - ' + i); + } + function set(newI) { + i = newI; + document.forms.F.I.value = newI; + } +</SCRIPT> +<BODY ONPOPSTATE="recover(event.state)"> +<FORM NAME=F> +State: <OUTPUT NAME=I>1</OUTPUT> <INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()"> +</FORM></pre> + + </div><h4 id="activating-state-object-entries"><span class="secno">6.8.3 </span><dfn title="activate the state object">Activating state object entries</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="popstateevent">PopStateEvent</dfn> : Event { + readonly attribute any <a href="#dom-popstateevent-state" title="dom-PopStateEvent-state">state</a>; + void <a href="#dom-popstateevent-initpopstateevent" title="dom-PopStateEvent-initPopStateEvent">initPopStateEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any stateArg); +};</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-PopStateEvent-state"><a href="#dom-popstateevent-state">state</a></code></dt> + + <dd> + + <p>Returns the information that was provided to <code title="dom-history-pushState"><a href="#dom-history-pushstate">pushState()</a></code> or <code title="dom-history-replaceState"><a href="#dom-history-replacestate">replaceState()</a></code>.</p> + + </dd> + + </dl><h4 id="the-location-interface"><span class="secno">6.8.4 </span>The <code><a href="#location">Location</a></code> interface</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Each <code>Document</code> object in a <a href="browsers.html#browsing-context">browsing + context</a>'s session history is associated with a unique + instance of a <code><a href="#location">Location</a></code> object.</p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-location"><a href="#dom-document-location">location</a></code> [ = <var title="">value</var> ]</dt> + <dt><var title="">window</var> . <code title="dom-location"><a href="#dom-location">location</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns a <code><a href="#location">Location</a></code> object with the current page's location.</p> + + <p>Can be set, to navigate to another page.</p> + + </dd> + + </dl><p><code><a href="#location">Location</a></code> objects provide a representation of <a href="dom.html#the-document-s-current-address" title="the document's current address">their document's current + address</a>, and allow the <a href="#current-entry">current entry</a> of the + <a href="browsers.html#browsing-context">browsing context</a>'s session history to be changed, by + adding or replacing entries in the <code title="dom-history"><a href="#dom-history">history</a></code> object.</p><pre class="idl">interface <dfn id="location">Location</dfn> { + stringifier readonly attribute DOMString <a href="#dom-location-href" title="dom-location-href">href</a>; + void <a href="#dom-location-assign" title="dom-location-assign">assign</a>(in DOMString url); + void <a href="#dom-location-replace" title="dom-location-replace">replace</a>(in DOMString url); + void <a href="#dom-location-reload" title="dom-location-reload">reload</a>(); + + // <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a> <!-- blame brendan for these "innovative" names --> + attribute DOMString <a href="#dom-location-protocol" title="dom-location-protocol">protocol</a>; + attribute DOMString <a href="#dom-location-host" title="dom-location-host">host</a>; + attribute DOMString <a href="#dom-location-hostname" title="dom-location-hostname">hostname</a>; + attribute DOMString <a href="#dom-location-port" title="dom-location-port">port</a>; + attribute DOMString <a href="#dom-location-pathname" title="dom-location-pathname">pathname</a>; + attribute DOMString <a href="#dom-location-search" title="dom-location-search">search</a>; + attribute DOMString <a href="#dom-location-hash" title="dom-location-hash">hash</a>; + + // resolving relative URLs + DOMString <a href="#dom-location-resolveurl" title="dom-location-resolveURL">resolveURL</a>(in DOMString url); +};</pre><dl class="domintro"><dt><var title="">location</var> . <code title="dom-location-href"><a href="#dom-location-href">href</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the current page's location.</p> + + <p>Can be set, to navigate to another page.</p> + + </dd> + + <dt><var title="">location</var> . <code title="dom-location-assign"><a href="#dom-location-assign">assign</a></code>(<var title="">url</var>)</dt> + + <dd> + + <p>Navigates to the given page.</p> + + </dd> + + <dt><var title="">location</var> . <code title="dom-location-replace"><a href="#dom-location-replace">replace</a></code>(<var title="">url</var>)</dt> + + <dd> + + <p>Removes the current page from the session history and navigates to the given page.</p> + + </dd> + + <dt><var title="">location</var> . <code title="dom-location-reload"><a href="#dom-location-reload">reload</a></code>()</dt> + + <dd> + + <p>Reloads the current page.</p> + + </dd> + + <dt><var title="">url</var> = <var title="">location</var> . <code title="dom-location-resolveURL"><a href="#dom-location-resolveurl">resolveURL</a></code>(<var title="">url</var>)</dt> + + <dd> + + <p>Resolves the given relative URL to an absolute URL.</p> + + </dd> + + </dl><p>The <code><a href="#location">Location</a></code> interface also has the complement of + <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-location-protocol" title="dom-location-protocol"><code>protocol</code></dfn>, <dfn id="dom-location-host" title="dom-location-host"><code>host</code></dfn>, <dfn id="dom-location-port" title="dom-location-port"><code>port</code></dfn>, <dfn id="dom-location-hostname" title="dom-location-hostname"><code>hostname</code></dfn>, <dfn id="dom-location-pathname" title="dom-location-pathname"><code>pathname</code></dfn>, <dfn id="dom-location-search" title="dom-location-search"><code>search</code></dfn>, and <dfn id="dom-location-hash" title="dom-location-hash"><code>hash</code></dfn>. </p><h3 id="browsing-the-web"><span class="secno">6.9 </span>Browsing the Web</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="unloading-documents"><span class="secno">6.9.1 </span>Unloading documents</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="beforeunloadevent">BeforeUnloadEvent</dfn> : Event { + attribute DOMString <a href="#dom-beforeunloadevent-returnvalue" title="dom-BeforeUnloadEvent-returnValue">returnValue</a>; +};</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-BeforeUnloadEvent-returnValue"><a href="#dom-beforeunloadevent-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the current return value of the event (the message to show the user).</p> + + <p>Can be set, to update the message.</p> + + </dd> + + </dl><p class="note">There are no <code><a href="#beforeunloadevent">BeforeUnloadEvent</a></code>-specific + initialization methods.</p><h4 id="aborting-a-document-load"><span class="secno">6.9.2 </span>Aborting a document load</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>If the user cancels any instance of the <a href="#fetch" title="fetch">fetching algorithm</a> in the context of a + <code>Document</code> in a <a href="browsers.html#browsing-context">browsing context</a>, then, if + that <code>Document</code> is an <a href="browsers.html#active-document">active document</a>, the + user agent must <a href="#queue-a-task">queue a task</a> to <a href="#fire-a-simple-event">fire a simple + event</a> named <code title="event-abort">abort</code> at that + <code>Document</code>'s <code><a href="browsers.html#window">Window</a></code> object.</p><!-- I'd love to make this more precise, anyone have any suggestions + on what it should say? --></body></html> \ No newline at end of file Index: common-input-element-attributes.html =================================================================== RCS file: /sources/public/html5/spec-author-view/common-input-element-attributes.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- common-input-element-attributes.html 3 Jan 2010 15:08:14 -0000 1.8 +++ common-input-element-attributes.html 3 Jan 2010 15:15:05 -0000 1.9 @@ -0,0 +1,606 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.5.2 Common input element attributes — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="number-state.html" title="4.10.5.1.13 Number state" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="the-button-element.html" title="4.10.6 The button element" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="number-state.html">← 4.10.5.1.13 Number state</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="the-button-element.html">4.10.6 The button element →</a> + <ol class="toc"><li><ol><li><ol><li><ol><li><a href="common-input-element-attributes.html#common-input-element-attributes"><span class="secno">4.10.5.2 </span>Common <code>input</code> element attributes</a> + <ol><li><a href="common-input-element-attributes.html#the-autocomplete-attribute"><span class="secno">4.10.5.2.1 </span>The <code title="attr-input-autocomplete">autocomplete</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-list-attribute"><span class="secno">4.10.5.2.2 </span>The <code title="attr-input-list">list</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly">readonly</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-size-attribute"><span class="secno">4.10.5.2.4 </span>The <code title="attr-input-size">size</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-required-attribute"><span class="secno">4.10.5.2.5 </span>The <code title="attr-input-required">required</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-multiple-attribute"><span class="secno">4.10.5.2.6 </span>The <code title="attr-input-multiple">multiple</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-maxlength-attribute"><span class="secno">4.10.5.2.7 </span>The <code title="attr-input-maxlength">maxlength</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-pattern-attribute"><span class="secno">4.10.5.2.8 </span>The <code title="attr-input-pattern">pattern</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-min-and-max-attributes"><span class="secno">4.10.5.2.9 </span>The <code title="attr-input-min">min</code> and <code title="attr-input-max">max</code> attributes</a></li><li><a href="common-input-element-attributes.html#the-step-attribute"><span class="secno">4.10.5.2.10 </span>The <code title="attr-input-step">step</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-placeholder-attribute"><span class="secno">4.10.5.2.11 </span>The <code title="attr-input-placeholder">placeholder</code> attribute</a></li></ol></li><li><a href="common-input-element-attributes.html#common-input-element-apis"><span class="secno">4.10.5.3 </span>Common <code>input</code> element APIs</a></li></ol></li></ol></li></ol></li></ol></div> + + <h5 id="common-input-element-attributes"><span class="secno">4.10.5.2 </span>Common <code><a href="the-input-element.html#the-input-element">input</a></code> element attributes</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h6 id="the-autocomplete-attribute"><span class="secno">4.10.5.2.1 </span>The <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>User agents sometimes have features for helping users fill forms + in, for example prefilling the user's address based on earlier user + input.</p><p>The <dfn id="attr-input-autocomplete" title="attr-input-autocomplete"><code>autocomplete</code></dfn> + attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The attribute has + three states. The <code title="attr-input-autocomplete-on">on</code> + keyword maps to the <dfn id="attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</dfn> state, and the + <code title="attr-input-autocomplete-off">off</code> keyword maps to + the <dfn id="attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</dfn> + state. The attribute may also be omitted. The <i>missing value + default</i> is the <dfn id="attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</dfn> + state.</p><p>The <a href="#attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</a> + state indicates either that the control's input data is particularly + sensitive (for example the activation code for a nuclear weapon); or + that it is a value that will never be reused (for example a + one-time-key for a bank login) and the user will therefore have to + explicitly enter the data each time, instead of being able to rely + on the UA to prefill the value for him; or that the document + provides its own autocomplete mechanism and does not want the user + agent to provide autocompletion values.</p><p>Conversely, the <a href="#attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</a> state indicates + that the value is not particularly sensitive and the user can expect + to be able to rely on his user agent to remember values he has + entered for that control.</p><p>The <a href="#attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</a> state + indicates that the user agent is to use the <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute on the + element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a> instead. (By default, the <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute of + <code><a href="forms.html#the-form-element">form</a></code> elements is in the <a href="forms.html#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state.)</p><div class="example"> + + <p>Banks frequently do not want UAs to prefill login + information:</p> + + <pre><p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p> +<p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p></pre> + + </div><h6 id="the-list-attribute"><span class="secno">4.10.5.2.2 </span>The <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-list" title="attr-input-list"><code>list</code></dfn> + attribute is used to identify an element that lists predefined + options suggested to the user.</p><p>If present, its value must be the ID of a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> + element in the same document.</p><div class="example"> + + <p>This URL field offers some suggestions.</p> + + <pre><label>Homepage: <input name=hp type=url list=hpurls></label> +<datalist id=hpurls> + <option value="http://www.google.com/" label="Google"> + <option value="http://www.reddit.com/" label="Reddit"> +</datalist></pre> + + <p>Other URLs from the user's history might show also; this is up + to the user agent.</p> + + </div><h6 id="the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-readonly" title="attr-input-readonly"><code>readonly</code></dfn> + attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that controls whether + or not the use can edit the form control. </p><div class="example"> + + <p>In the following example, the existing product identifiers + cannot be modified, but they are still displayed as part of the + form, for consistency with the row representing a new product + (where the identifier is not yet filled in).</p> + + <pre><form action="products.cgi" method=post enctype="multipart/formdata"> + <table> + <tr> <th> Product ID <th> Product name <th> Price <th> Action + <tr> + <td> <input readonly name="1.pid" value="H412"> + <td> <input required name="1.pname" value="Floor lamp Ulke"> + <td> $<input required type=number min=0 step=0.01 name="1.pprice" value="49.99"> + <td> <button formnovalidate name="action" value="delete:1">Delete</button> + <tr> + <td> <input readonly name="2.pid" value="FG28"> + <td> <input required name="2.pname" value="Table lamp Ulke"> + <td> $<input required type=number min=0 step=0.01 name="2.pprice" value="24.99"> + <td> <button formnovalidate name="action" value="delete:2">Delete</button> + <tr> + <td> <input required name="3.pid" value="" pattern="[A-Z0-9]+"> + <td> <input required name="3.pname" value=""> + <td> $<input required type=number min=0 step=0.01 name="3.pprice" value=""> + <td> <button formnovalidate name="action" value="delete:3">Delete</button> + </table> + <p> <button formnovalidate name="action" value="add">Add</button> </p> + <p> <button name="action" value="update">Save</button> </p> +</form></pre> + + </div><h6 id="the-size-attribute"><span class="secno">4.10.5.2.4 </span>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-size" title="attr-input-size"><code>size</code></dfn> + attribute gives the number of characters that, in a visual + rendering, the user agent is to allow the user to see while editing + the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><p>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute, if + specified, must have a value that is a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative + integer</a> greater than zero.</p><h6 id="the-required-attribute"><span class="secno">4.10.5.2.5 </span>The <code title="attr-input-required"><a href="#attr-input-required">required</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-required" title="attr-input-required"><code>required</code></dfn> + attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the + element is <dfn id="concept-input-required" title="concept-input-required"><i>required</i></dfn>.</p><div class="example"> + + <p>The following form has two required fields, one for an e-mail + address and one for a password. It also has a third field that is + only considerd valid if the user types the same password in the + password field and this third field.</p> + + <pre><h1>Create new account</h1> +<form action="/newaccount" method=post> + <p> + <label for="username">E-mail address:</label> + <input id="username" type=email required name=un> + <p> + <label for="password1">Password:</label> + <input id="password1" type=password required name=up> + <p> + <label for="password2">Confirm password:</label> + <input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')"> + <p> + <input type=submit value="Create account"> +</form></pre> + + </div><h6 id="the-multiple-attribute"><span class="secno">4.10.5.2.6 </span>The <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-multiple" title="attr-input-multiple"><code>multiple</code></dfn> + attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that indicates whether + the user is to be allowed to specify more than one value.</p><div class="example"> + + <p>The following extract shows how an e-mail client's "Cc" field + could accept multiple e-mail addresses.</p> + + <pre><label>Cc: <input type=email multiple name=cc></label></pre> + + </div><div class="example"> + + <p>The following extract shows how an e-mail client's "Attachments" + field could accept multiple files for upload.</p> + + <pre><label>Attachments: <input type=file multiple name=att></label></pre> + + </div><h6 id="the-maxlength-attribute"><span class="secno">4.10.5.2.7 </span>The <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-maxlength" title="attr-input-maxlength"><code>maxlength</code></dfn> + attribute is a <a href="association-of-controls-and-forms.html#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a>.</p><p>If the <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum allowed + value length</a>, then the <a href="#code-point-length">code-point length</a> of the + value of the element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> + attribute must be equal to or less than the element's <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum + allowed value length</a>.</p><div class="example"> + + <p>The following extract shows how a messaging client's text entry + could be arbitrarily restricted to a fixed number of characters, + thus forcing any conversion through this medium to be terse and + discouraging intelligent discourse.</p> + + <pre>What are you doing? <input name=status maxlength=140></pre> + + </div><h6 id="the-pattern-attribute"><span class="secno">4.10.5.2.8 </span>The <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-pattern" title="attr-input-pattern"><code>pattern</code></dfn> + attribute specifies a regular expression against which the control's + <a href="#concept-fe-value" title="concept-fe-value">value</a> is to be checked.</p><p>If specified, the attribute's value must match the JavaScript <i title="">Pattern</i> production. <a href="references.html#refsECMA262">[ECMA262]</a></p><p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute specified, + authors should include a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> + attribute to give a description of the pattern. User agents may use + the contents of this attribute, if it is present, when informing the + user that the pattern is not matched, or at any other suitable time, + such as in a tooltip or read out by assistive technology when the + control gains focus.</p><div class="example"> + <p>For example, the following snippet:</p> + <pre><label> Part number: + <input pattern="[0-9][A-Z]{3}" name="part" + title="A part number is a digit followed by three uppercase letters."/> +</label></pre> + <p>...could cause the UA to display an alert such as:</p> + <pre><samp>A part number is a digit followed by three uppercase letters. +You cannot complete this form until the field is correct.</samp></pre> + </div><p>When a control has a <code>pattern</code> attribute, the + <code><a href="semantics.html#the-title-element-0">title</a></code> attribute, if used, must describe the pattern. + Additional information could also be included, so long as it assists + the user in filling in the control. Otherwise, assistive technology + would be impaired.</p><p class="example">For instance, if the title attribute contained + the caption of the control, assistive technology could end up saying + something like <samp>The text you have entered does not match the + required pattern. Birthday</samp>, which is not useful.</p><p>UAs may still show the <code><a href="semantics.html#the-title-element-0">title</a></code> in non-error situations + (for example, as a tooltip when hovering over the control), so + authors should be careful not to word <code><a href="semantics.html#the-title-element-0">title</a></code>s as if an + error has necessarily occurred.</p><h6 id="the-min-and-max-attributes"><span class="secno">4.10.5.2.9 </span>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> and <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attributes</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-min" title="attr-input-min"><code>min</code></dfn> and <dfn id="attr-input-max" title="attr-input-max"><code>max</code></dfn> attributes indicate + the allowed range of values for the element.</p><p>The <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attribute's value + (the <a href="#concept-input-max" title="concept-input-max">maximum</a>) must not be + less than the <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute's + value (its <a href="#concept-input-min" title="concept-input-min">minimum</a>).</p><div class="example"> + + <p>The following date control limits input to dates that are before + the 1980s:</p> + + <pre><input name=bday type=date max="1979-12-31"></pre> + + </div><div class="example"> + + <p>The following number control limits input to whole numbers + greater than zero:</p> + + <pre><input name=quantity required type=number min=1 value=1></pre> + + </div><h6 id="the-step-attribute"><span class="secno">4.10.5.2.10 </span>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-step" title="attr-input-step"><code>step</code></dfn> + attribute indicates the granularity that is expected (and required) + of the <a href="#concept-fe-value" title="concept-fe-value">value</a>, by limiting the + allowed values. </p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, if + specified, must either have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating + point number</a> that <a href="#rules-for-parsing-floating-point-number-values" title="rules for parsing floating + point number values">parses</a> to a number that is greater than + zero, or must have a value that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII + case-insensitive</a> match for the string "<code title="">any</code>".</p><div class="example"> + + <p>The following range control only accepts values in the range + 0..1, and allows 256 steps in that range:</p> + + <pre><input name=opacity type=range min=0 max=1 step=0.00392156863></pre> + + </div><div class="example"> + + <p>The following control allows any time in the day to be selected, + with any accuracy (e.g. thousandth-of-a-second accuracy or + more):</p> + + <pre><input name=favtime type=time step=any></pre> + + <p>Normally, time controls are limited to an accuracy of one + minute.</p> + + </div><h6 id="the-placeholder-attribute"><span class="secno">4.10.5.2.11 </span>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- similar text in the <textarea> section --><p>The <dfn id="attr-input-placeholder" title="attr-input-placeholder"><code>placeholder</code></dfn> + attribute represents a <em>short</em> hint (a word or short phrase) + intended to aid the user with data entry. A hint could be a sample + value or a brief description of the expected format. The attribute, + if specified, must have a value that contains no U+000A LINE FEED + (LF) or U+000D CARRIAGE RETURN (CR) characters.</p><p class="note">For a longer hint or other advisory text, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute is more appropriate.</p><p>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code> + attribute should not be used as an alternative to a + <code><a href="forms.html#the-label-element">label</a></code>.</p><div class="example"> + + <p>Here is an example of a mail configuration user interface that + uses the <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code> + attribute:</p> + + <pre><fieldset> + <legend>Mail Account</legend> + <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p> + <p><label>Address: <input type="email" name="address" placeholder="http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="urls.html" title="2.5 URLs" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="elements.html" title="3.2 Elements" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="urls.html">← 2.5 URLs</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="elements.html">3.2 Elements →</a> + <ol class="toc"><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></ol></li></ol></div> + + <h2 id="dom"><span class="secno">3 </span>Semantics, structure, and APIs of HTML documents</h2><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h3 id="documents"><span class="secno">3.1 </span>Documents</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Every XML and HTML document in an HTML UA is represented by a + <code>Document</code> object. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><p><dfn id="the-document-s-address">The document's address</dfn> is an <a href="urls.html#absolute-url">absolute URL</a> + that is set when the <code>Document</code> is created. <dfn id="the-document-s-current-address">The + document's current address</dfn> is an <a href="urls.html#absolute-url">absolute URL</a> + that can change during the lifetime of the <code>Document</code>, + for example when the user <a href="#navigate" title="navigate">navigates</a> to + a <a href="#scroll-to-fragid" title="navigate-fragid">fragment identifier</a> on the + page. </p><p class="note">Interactive user agents typically expose <a href="#the-document-s-current-address">the + document's current address</a> in their user interface.</p><p>When a <code>Document</code> is created by a <a href="#concept-script" title="concept-script">script</a> using the <code title="dom-DOMImplementation-createDocument">createDocument()</code> + or <code title="dom-DOMHTMLImplementation-createHTMLDocument"><a href="#dom-domhtmlimplementation-createhtmldocument">createHTMLDocument()</a></code> + APIs, <a href="#the-document-s-address">the document's address</a> is the same as <a href="#the-document-s-address">the + document's address</a> of the <a href="browsers.html#active-document">active document</a> of the + <a href="#script-s-browsing-context">script's browsing context</a>.</p><p><code>Document</code> objects are assumed to be <dfn id="xml-documents">XML + documents</dfn> unless they are flagged as being <dfn id="html-documents">HTML + documents</dfn> when they are created. Whether a document is an + <a href="#html-documents" title="HTML documents">HTML document</a> or an <a href="#xml-documents" title="XML documents">XML document</a> affects the behavior of + certain APIs and the case-sensitivity of some selectors.</p><h4 id="documents-in-the-dom"><span class="secno">3.1.1 </span>Documents in the DOM</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All <code>Document</code> objects (in user agents implementing + this specification) also implement + the <code><a href="#htmldocument">HTMLDocument</a></code> interface, available using + binding-specific methods. (This is the case whether or not the + document in question is an <a href="#html-documents" title="HTML documents">HTML + document</a> or indeed whether it contains any <a href="infrastructure.html#html-elements">HTML + elements</a> at all.) <code>Document</code> objects also implement the document-level interface + of any other namespaces that the UA supports.</p><p class="example">For example, if an HTML implementation also + supports SVG, then the <code>Document</code> object implements both + <code><a href="#htmldocument">HTMLDocument</a></code> and <code>SVGDocument</code>.</p><p class="note">Because the <code><a href="#htmldocument">HTMLDocument</a></code> interface is + now obtained using binding-specific casting methods instead of + simply being the primary interface of the document object, it is no + longer defined as inheriting from <code>Document</code>.</p><pre class="idl">[OverrideBuiltins] +interface <dfn id="htmldocument">HTMLDocument</dfn> { + // <a href="#resource-metadata-management">resource metadata management</a> + [PutForwards=href] readonly attribute <a href="history.html#location">Location</a> <a href="#dom-document-location" title="dom-document-location">location</a>; + readonly attribute DOMString <a href="#dom-document-url" title="dom-document-URL">URL</a>; + attribute DOMString <a href="#dom-document-domain" title="dom-document-domain">domain</a>; + readonly attribute DOMString <a href="#dom-document-referrer" title="dom-document-referrer">referrer</a>; + attribute DOMString <a href="#dom-document-cookie" title="dom-document-cookie">cookie</a>; + readonly attribute DOMString <a href="#dom-document-lastmodified" title="dom-document-lastModified">lastModified</a>; + readonly attribute DOMString <a href="#dom-document-compatmode" title="dom-document-compatMode">compatMode</a>; + attribute DOMString <a href="#dom-document-charset" title="dom-document-charset">charset</a>; + readonly attribute DOMString <a href="#dom-document-characterset" title="dom-document-characterSet">characterSet</a>; + readonly attribute DOMString <a href="#dom-document-defaultcharset" title="dom-document-defaultCharset">defaultCharset</a>; + readonly attribute DOMString <a href="#dom-document-readystate" title="dom-document-readyState">readyState</a>; + + // <a href="#dom-tree-accessors">DOM tree accessors</a> + attribute DOMString <a href="#document.title" title="dom-document-title">title</a>; + attribute DOMString <a href="#dom-document-dir" title="dom-document-dir">dir</a>; + attribute <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-document-body" title="dom-document-body">body</a>; + readonly attribute <a href="semantics.html#htmlheadelement">HTMLHeadElement</a> <a href="#dom-document-head" title="dom-document-head">head</a>; + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-images" title="dom-document-images">images</a>; + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-embeds" title="dom-document-embeds">embeds</a>; + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-plugins" title="dom-document-plugins">plugins</a>; + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-links" title="dom-document-links">links</a>; + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-forms" title="dom-document-forms">forms</a>; + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-scripts" title="dom-document-scripts">scripts</a>; + NodeList <a href="#dom-document-getelementsbyname" title="dom-document-getElementsByName">getElementsByName</a>(in DOMString elementName); + NodeList <a href="#dom-document-getelementsbyclassname" title="dom-document-getElementsByClassName">getElementsByClassName</a>(in DOMString classNames); + NodeList <a href="#dom-document-getitems" title="dom-document-getItems">getItems</a>(in optional DOMString typeNames); + <a href="#dom-document-nameditem" title="dom-document-namedItem">getter</a> any (in DOMString name); + + // <a href="apis-in-html-documents.html#dynamic-markup-insertion">dynamic markup insertion</a> + attribute DOMString <a href="apis-in-html-documents.html#dom-innerhtml" title="dom-innerHTML">innerHTML</a>; + <a href="#htmldocument">HTMLDocument</a> <a href="apis-in-html-documents.html#dom-document-open" title="dom-document-open">open</a>(in optional DOMString type, in optional DOMString replace); + <a href="#windowproxy">WindowProxy</a> <a href="apis-in-html-documents.html#dom-document-open" title="dom-document-open">open</a>(in DOMString url, in DOMString name, in DOMString features, in optional boolean replace); + void <a href="#dom-document-close" title="dom-document-close">close</a>(); + void <a href="#dom-document-write" title="dom-document-write">write</a>(in DOMString... text); + void <a href="#dom-document-writeln" title="dom-document-writeln">writeln</a>(in DOMString... text); + + // <a href="editing.html#editing">user interaction</a> + <a href="editing.html#selection-0">Selection</a> <a href="#dom-document-getselection" title="dom-document-getSelection">getSelection</a>(); + readonly attribute <span>Element</span> <a href="#dom-document-activeelement" title="dom-document-activeElement">activeElement</a>; + boolean <a href="#dom-document-hasfocus" title="dom-document-hasFocus">hasFocus</a>(); + attribute DOMString <a href="#designMode" title="dom-document-designMode">designMode</a>; + boolean <a href="#execCommand" title="dom-document-execCommand">execCommand</a>(in DOMString commandId); + boolean <a href="#execCommand" title="dom-document-execCommand">execCommand</a>(in DOMString commandId, in boolean showUI); + boolean <a href="#execCommand" title="dom-document-execCommand">execCommand</a>(in DOMString commandId, in boolean showUI, in DOMString value); + boolean <a href="#dom-document-querycommandenabled" title="dom-document-queryCommandEnabled">queryCommandEnabled</a>(in DOMString commandId); + boolean <a href="#dom-document-querycommandindeterm" title="dom-document-queryCommandIndeterm">queryCommandIndeterm</a>(in DOMString commandId); + boolean <a href="#dom-document-querycommandstate" title="dom-document-queryCommandState">queryCommandState</a>(in DOMString commandId); + boolean <a href="#dom-document-querycommandsupported" title="dom-document-queryCommandSupported">queryCommandSupported</a>(in DOMString commandId); + DOMString <a href="#dom-document-querycommandvalue" title="dom-document-queryCommandValue">queryCommandValue</a>(in DOMString commandId); + readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-document-commands" title="dom-document-commands">commands</a>; + + // <a href="#event-handler-idl-attributes">event handler IDL attributes</a> + attribute <a href="#function">Function</a> <a href="#handler-onabort" title="handler-onabort">onabort</a>; + attribute <a href="#function">Function</a> <a href="#handler-onblur" title="handler-onblur">onblur</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncanplay" title="handler-oncanplay">oncanplay</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>; + attribute <a href="#function">Function</a> <a href="#handler-onchange" title="handler-onchange">onchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onclick" title="handler-onclick">onclick</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondblclick" title="handler-ondblclick">ondblclick</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondrag" title="handler-ondrag">ondrag</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragend" title="handler-ondragend">ondragend</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragenter" title="handler-ondragenter">ondragenter</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragleave" title="handler-ondragleave">ondragleave</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragover" title="handler-ondragover">ondragover</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragstart" title="handler-ondragstart">ondragstart</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondrop" title="handler-ondrop">ondrop</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onemptied" title="handler-onemptied">onemptied</a>; + attribute <a href="#function">Function</a> <a href="#handler-onended" title="handler-onended">onended</a>; + attribute <a href="#function">Function</a> <a href="#handler-onerror" title="handler-onerror">onerror</a>; + attribute <a href="#function">Function</a> <a href="#handler-onfocus" title="handler-onfocus">onfocus</a>; + attribute <a href="#function">Function</a> <a href="#handler-onformchange" title="handler-onformchange">onformchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onforminput" title="handler-onforminput">onforminput</a>; + attribute <a href="#function">Function</a> <a href="#handler-oninput" title="handler-oninput">oninput</a>; + attribute <a href="#function">Function</a> <a href="#handler-oninvalid" title="handler-oninvalid">oninvalid</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeydown" title="handler-onkeydown">onkeydown</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeypress" title="handler-onkeypress">onkeypress</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeyup" title="handler-onkeyup">onkeyup</a>; + attribute <a href="#function">Function</a> <a href="#handler-onload" title="handler-onload">onload</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadstart" title="handler-onloadstart">onloadstart</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousedown" title="handler-onmousedown">onmousedown</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousemove" title="handler-onmousemove">onmousemove</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseout" title="handler-onmouseout">onmouseout</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseover" title="handler-onmouseover">onmouseover</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseup" title="handler-onmouseup">onmouseup</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>; + attribute <a href="#function">Function</a> <a href="#handler-onpause" title="handler-onpause">onpause</a>; + attribute <a href="#function">Function</a> <a href="#handler-onplay" title="handler-onplay">onplay</a>; + attribute <a href="#function">Function</a> <a href="#handler-onplaying" title="handler-onplaying">onplaying</a>; + attribute <a href="#function">Function</a> <a href="#handler-onprogress" title="handler-onprogress">onprogress</a>; + attribute <a href="#function">Function</a> <a href="#handler-onratechange" title="handler-onratechange">onratechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onreadystatechange" title="handler-onreadystatechange">onreadystatechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onscroll" title="handler-onscroll">onscroll</a>; + attribute <a href="#function">Function</a> <a href="#handler-onseeked" title="handler-onseeked">onseeked</a>; + attribute <a href="#function">Function</a> <a href="#handler-onseeking" title="handler-onseeking">onseeking</a>; + attribute <a href="#function">Function</a> <a href="#handler-onselect" title="handler-onselect">onselect</a>; + attribute <a href="#function">Function</a> <a href="#handler-onshow" title="handler-onshow">onshow</a>; + attribute <a href="#function">Function</a> <a href="#handler-onstalled" title="handler-onstalled">onstalled</a>; + attribute <a href="#function">Function</a> <a href="#handler-onsubmit" title="handler-onsubmit">onsubmit</a>; + attribute <a href="#function">Function</a> <a href="#handler-onsuspend" title="handler-onsuspend">onsuspend</a>; + attribute <a href="#function">Function</a> <a href="#handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>; + attribute <a href="#function">Function</a> <a href="#handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onwaiting" title="handler-onwaiting">onwaiting</a>; +}; +<span>Document</span> implements <a href="#htmldocument">HTMLDocument</a>;</pre><p>Since the <code><a href="#htmldocument">HTMLDocument</a></code> interface holds methods and + attributes related to a number of disparate features, the members of + this interface are described in various different sections.</p><h4 id="security"><span class="secno">3.1.2 </span>Security</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>User agents must<code><a href="urls.html#security_err">SECURITY_ERR</a></code> exception whenever any of the members of + an <code><a href="#htmldocument">HTMLDocument</a></code> object are accessed by scripts whose + <a href="#effective-script-origin">effective script origin</a> is not the <a href="#same-origin" title="same + origin">same</a> as the <code>Document</code>'s <a href="#effective-script-origin">effective + script origin</a>.</p><h4 id="resource-metadata-management"><span class="secno">3.1.3 </span><dfn>Resource metadata management</dfn></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-URL"><a href="#dom-document-url">URL</a></code></dt> + <dd> + <p>Returns <a href="#the-document-s-address">the document's address</a>.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-referrer"><a href="#dom-document-referrer">referrer</a></code></dt> + <dd> + <p>Returns <a href="#the-document-s-current-address" title="the document's current address">the + address</a> of the <code>Document</code> from which the user + navigated to this one, unless it was blocked or there was no such + document, in which case it returns the empty string.</p> + <p>The <code title="rel-noreferrer"><a href="links.html#link-type-noreferrer">noreferrer</a></code> link + type can be used to block the referrer.</p> + </dd> + + </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-cookie"><a href="#dom-document-cookie">cookie</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the HTTP cookies that apply to the + <code>Document</code>. If there are no cookies or cookies can't be + applied to this resource, the empty string will be returned.</p> + <p>Can be set, to add a new cookie to the element's set of HTTP + cookies.</p> + <p>If the <code>Document</code> has no <a href="browsers.html#browsing-context">browsing + context</a> an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception will be + thrown. If the contents are <a href="#sandboxed-origin-browsing-context-flag" title="sandboxed origin browsing + context flag">sandboxed into a unique origin</a>, a + <code><a href="urls.html#security_err">SECURITY_ERR</a></code> exception will be thrown.</p> + </dd> + + </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-lastmodified"><a href="#dom-document-lastmodified">lastModified</a></code></dt> + <dd> + <p>Returns the date of the last modification to the document, as + reported by the server, in the form "<code title="">MM/DD/YYYY hh:mm:ss</code>".</p> + <p>If the last modification date is not known, the current time is + returned instead.</p> + </dd> + + </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-compatmode"><a href="#dom-document-compatmode">compatMode</a></code></dt> + <dd> + <p>In a conforming document, returns the string "<code title="">CSS1Compat</code>". (In <a href="#quirks-mode">quirks mode</a> + documents, returns the string "<code title="">BackCompat</code>", + but a conforming document can never trigger <a href="#quirks-mode">quirks + mode</a>.)</p> + </dd> + + </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-charset"><a href="#dom-document-charset">charset</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the <a href="#document-s-character-encoding">document's character encoding</a>.</p> + <p>Can be set, to dynamically change the <a href="#document-s-character-encoding">document's + character encoding</a>.</p> + <p>New values that are not IANA-registered aliases supported by the user agent are ignored.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-characterSet"><a href="#dom-document-characterset">characterSet</a></code></dt> + <dd> + <p>Returns the <a href="#document-s-character-encoding">document's character encoding</a>.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-defaultCharset"><a href="#dom-document-defaultcharset">defaultCharset</a></code></dt> + <dd> + <p>Returns what might be the user agent's default character encoding.</p> + </dd> + + </dl><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-readyState"><a href="#dom-document-readystate">readyState</a></code></dt> + <dd> + <p>Returns "loading" while the <code>Document</code> is loading, and "complete" once it has loaded.</p> + <p>The <code title="event-readystatechange">readystatechange</code> event fires on the <code>Document</code> object when this value changes.</p> + </dd> + + </dl><h4 id="dom-tree-accessors"><span class="secno">3.1.4 </span><dfn>DOM tree accessors</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="the-html-element">The <code>html</code> element</dfn> of a document is the + document's root element, if there is one and it's an + <code><a href="semantics.html#the-html-element-0">html</a></code> element, or null otherwise.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-head"><a href="#dom-document-head">head</a></code></dt> + <dd> + <p>Returns <a href="#the-head-element">the <code>head</code> element</a>.</p> + </dd> + + </dl><p><dfn id="the-head-element">The <code>head</code> element</dfn> of a document is the + first <code><a href="semantics.html#the-head-element-0">head</a></code> element that is a child of <a href="#the-html-element">the + <code>html</code> element</a>, if there is one, or null + otherwise.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-title"><a href="#document.title">title</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the document's title, as given by <a href="#the-title-element">the + <code>title</code> element</a>.</p> + <p>Can be set, to update the document's title. If there is no + <a href="#the-head-element" title="the head element"><code>head</code> element</a>, + the new value is ignored.</p> + <p>In SVG documents, the <code>SVGDocument</code> interface's + <code title="dom-svg-title">title</code> attribute takes + precedence.</p> + </dd> + + </dl><p><dfn id="the-title-element">The <code>title</code> element</dfn> of a document is the + first <code><a href="semantics.html#the-title-element-0">title</a></code> element in the document (in tree order), if + there is one, or null otherwise.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-body"><a href="#dom-document-body">body</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns <a href="#the-body-element">the body element</a>.</p> + <p>Can be set, to replace <a href="#the-body-element">the body element</a>.</p> + <p>If the new value is not a <code><a href="sections.html#the-body-element-0">body</a></code> or <code><a href="#frameset">frameset</a></code> element, this will throw a <code><a href="urls.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> exception.</p> + </dd> + + </dl><p><dfn id="the-body-element">The body element</dfn> of a document is the first child of + <a href="#the-html-element">the <code>html</code> element</a> that is either a + <code><a href="sections.html#the-body-element-0">body</a></code> element or a <code><a href="#frameset">frameset</a></code> element. If + there is no such element, it is null. </p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-images"><a href="#dom-document-images">images</a></code></dt> + <dd> + <p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="embedded-content-1.html#the-img-element">img</a></code> elements in the <code>Document</code>.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-embeds"><a href="#dom-document-embeds">embeds</a></code></dt> + <dt><var title="">document</var> . <code title="dom-document-plugins"><a href="#dom-document-plugins">plugins</a></code></dt> + <dd> + <p>Return an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="the-iframe-element.html#the-embed-element">embed</a></code> elements in the <code>Document</code>.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-links"><a href="#dom-document-links">links</a></code></dt> + <dd> + <p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements in the <code>Document</code> that have <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attributes.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-forms"><a href="#dom-document-forms">forms</a></code></dt> + <dd> + <p>Return an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="forms.html#the-form-element">form</a></code> elements in the <code>Document</code>.</p> + </dd> + + <dt><var title="">document</var> . <code title="dom-document-scripts"><a href="#dom-document-scripts">scripts</a></code></dt> + <dd> + <p>Return an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="scripting-1.html#script">script</a></code> elements in the <code>Document</code>.</p> + </dd> + + </dl><dl class="domintro"><dt><var title="">collection</var> = <var title="">document</var> . <code title="dom-document-getElementsByName"><a href="#dom-document-getelementsbyname">getElementsByName</a></code>(<var title="">name</var>)</dt> + <dd> + <p>Returns a <code>NodeList</code> of elements in the + <code>Document</code> that have a <code title="">name</code> + attribute with the value <var title="">name</var>.</p> + </dd> + + <dt><var title="">collection</var> = <var title="">document</var> . <code title="dom-document-getElementsByClassName"><a href="#dom-document-getelementsbyclassname">getElementsByClassName(<var title="">classes</var>)</a></code></dt> + <dt><var title="">collection</var> = <var title="">element</var> . <code title="dom-getElementsByClassName"><a href="#dom-getelementsbyclassname">getElementsByClassName(<var title="">classes</var>)</a></code></dt> + <dd> + <p>Returns a <code>NodeList</code> of the elements in the object + on which the method was invoked (a <code>Document</code> or an + <code>Element</code>) that have all the classes given by <var title="">classes</var>.</p> + <p>The <var title="">classes</var> argument is interpreted as a + space-separated list of classes.</p> + </dd> + + </dl><p>HTML, SVG, and MathML elements define which classes they are in + by having an attribute with no namespace with the name <code title="">class</code> containing a space-separated list of classes + to which the element belongs. Other specifications may also allow + elements in their namespaces to be labeled as being in specific + classes.</p><div class="example"> + + <p>Given the following XHTML fragment:</p> + + <pre><div id="example"> + <p id="p1" class="aaa bbb"/> + <p id="p2" class="aaa ccc"/> + <p id="p3" class="bbb ccc"/> +</div></pre> + + <p>A call to + <code>document.getElementById('example').getElementsByClassName('aaa')</code> + would return a <code>NodeList</code> with the two paragraphs + <code>p1</code> and <code>p2</code> in it.</p> + + <p>A call to <code>getElementsByClassName('ccc bbb')</code> + would only return one node, however, namely <code>p3</code>. A call + to + <code>document.getElementById('example').getElementsByClassName('bbb  ccc ')</code> + would return the same thing.</p> + + <p>A call to <code>getElementsByClassName('aaa,bbb')</code> would + return no nodes; none of the elements above are in the "aaa,bbb" + class.</p> + + </div><!-- v2: +> * xGetParentElementByClassName(rootElement, className, tagName) - +> Navigates upwards until we hit a parent element with the given class name and +> optional tag name. +--><hr><p class="note">The <code title="dom-document-dir"><a href="#dom-document-dir">dir</a></code> + attribute on the <code><a href="#htmldocument">HTMLDocument</a></code> interface is defined + along with the <code title="attr-dir"><a href="elements.html#the-dir-attribute">dir</a></code> content + attribute.</p><h4 id="creating-documents"><span class="secno">3.1.5 </span>Creating documents</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><a href="#xml-documents">XML documents</a> can be created from script using the + <code title="dom-DOMImplementation-createDocument">createDocument()</code> + method on the <code>DOMImplementation</code> interface.</p><p><a href="#html-documents">HTML documents</a> can be created using the <code title="dom-DOMHTMLImplementation-createHTMLDocument"><a href="#dom-domhtmlimplementation-createhtmldocument">createHTMLDocument()</a></code> + method:</p><pre class="idl">[Supplemental, NoInterfaceObject] +interface <dfn id="domhtmlimplementation">DOMHTMLImplementation</dfn> { + <span>Document</span> <a href="#dom-domhtmlimplementation-createhtmldocument" title="dom-DOMHTMLImplementation-createHTMLDocument">createHTMLDocument</a>(in DOMString title); +}; +<span>DOMImplementation</span> implements <a href="#domhtmlimplementation">DOMHTMLImplementation</a>;</pre><p>The <dfn id="dom-domhtmlimplementation-createhtmldocument" title="dom-DOMHTMLImplementation-createHTMLDocument"><code>createHTMLDocument(<var title="">title</var>)</code></dfn> method, when invoked, must run the + following steps:</p><ol><li><p>Let <var title="">doc</var> be a newly created + <code>Document</code> object.</p></li> + + <li><p>Mark <var title="">doc</var> as being an <a href="#html-documents" title="HTML + documents">HTML document</a>.</p></li> + + <li><p>Create a <code>DocumentType</code> node with the <code title="">name</code> attribute set to the string "<code title="">html</code>", and the other attributes specific to + <code>DocumentType</code> objects set to the empty string, null, + and empty lists, as appropriate. Append the newly created node to + <var title="">doc</var>.</p></li> + + <li><p>Create an <code><a href="semantics.html#the-html-element-0">html</a></code> element, and append it to <var title="">doc</var>.</p></li> + + <li><p>Create a <code><a href="semantics.html#the-head-element-0">head</a></code> element, and append it to the + <code><a href="semantics.html#the-html-element-0">html</a></code> element created in the previous step.</p> + + </li><li><p>Create a <code><a href="semantics.html#the-title-element-0">title</a></code> element, and append it to the + <code><a href="semantics.html#the-head-element-0">head</a></code> element created in the previous step.</p> + + </li><li><p>Create a <code>Text</code> node, and set its <code title="">data</code> attribute to the string given by the method's + argument (which could be the empty string). Append it to the + <code><a href="semantics.html#the-title-element-0">title</a></code> element created in the previous step.</p> + + </li><li><p>Create a <code><a href="sections.html#the-body-element-0">body</a></code> element, and append it to the + <code><a href="semantics.html#the-html-element-0">html</a></code> element created in the earlier step.</p> + + </li><li><p>Return <var title="">doc</var>.</p></li> + + </ol></body></html> \ No newline at end of file Index: embedded-content-1.html =================================================================== RCS file: /sources/public/html5/spec-author-view/embedded-content-1.html,v retrieving revision 1.9 retrieving revision 1.10 diff -u -d -r1.9 -r1.10 --- embedded-content-1.html 3 Jan 2010 15:10:30 -0000 1.9 +++ embedded-content-1.html 3 Jan 2010 15:15:05 -0000 1.10 @@ -0,0 +1,1285 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.8 Embedded content — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1255 lines suppressed...] + kind of image involved, as described in the above entries), so that + the e-mail is still usable should the user use a mail client that + does not support images, or should the document be forwarded on to + other users whose abilities might not include easily seeing + images.</p><h6 id="general-guidelines"><span class="secno">4.8.2.1.12 </span>General guidelines</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The most general rule to consider when writing alternative text + is the following: <strong>the intent is that replacing every image + with the text of its <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute + not change the meaning of the page</strong>.</p><p>So, in general, alternative text can be written by considering + what one would have written had one not been able to include the + image.</p><p>A corollary to this is that the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute's value should never + contain text that could be considered the image's <em>caption</em>, + <em>title</em>, or <em>legend</em>. It is supposed to contain + replacement text that could be used by users <em>instead</em> of the + image; it is not meant to supplement the image. The <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute can be used for + supplemental information.</p><p class="note">One way to think of alternative text is to think + about how you would read the page containing the image to someone + over the phone, without mentioning that there is an image + present. Whatever you say instead of the image is typically a good + start for writing the alternative text.</p></body></html> \ No newline at end of file Index: the-input-element.html =================================================================== RCS file: /sources/public/html5/spec-author-view/the-input-element.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- the-input-element.html 3 Jan 2010 15:08:16 -0000 1.8 +++ the-input-element.html 3 Jan 2010 15:15:07 -0000 1.9 @@ -0,0 +1,1411 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.5 The input element — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1381 lines suppressed...] +<!-- <td class="yes"> Yes Radio Button --> + </td><td class="yes"> Yes <!-- File Upload --> + </td><td class="no"> · <!-- Submit Button --> + </td><td class="no"> · <!-- Image Button --> + </td><td class="no"> · <!-- Reset Button --> +<!-- <td class="no"> · Button --> + + </td></tr></tbody></table><p>The <dfn id="attr-input-value" title="attr-input-value"><code>value</code></dfn> + content attribute gives the default <a href="#concept-fe-value" title="concept-fe-value">value</a> of the <code><a href="#the-input-element">input</a></code> + element. </p><p>The <dfn id="attr-input-checked" title="attr-input-checked"><code>checked</code></dfn> + content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that gives the + default <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the + <code><a href="#the-input-element">input</a></code> element. </p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to + explicitly associate the <code><a href="#the-input-element">input</a></code> element with its + <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> + attribute represents the element's name. The <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is used to make + the control non-interactive and to prevent its value from being + submitted. The <code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code> + attribute controls focus.</p></body></html> \ No newline at end of file Index: comms.html =================================================================== RCS file: /sources/public/html5/spec-author-view/comms.html,v retrieving revision 1.555 retrieving revision 1.556 diff -u -d -r1.555 -r1.556 --- comms.html 3 Jan 2010 15:08:14 -0000 1.555 +++ comms.html 3 Jan 2010 15:15:05 -0000 1.556 @@ -213,4 +213,275 @@ .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-example \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="dnd.html" title="7.9 Drag and drop" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="syntax.html" title="9 The HTML syntax" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="dnd.html">← 7.9 Drag and drop</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="syntax.html">9 The HTML syntax →</a> + <ol class="toc"><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></ol></div> + + <h2 id="comms"><span class="secno">8 </span>Communication</h2><h3 id="event-definitions"><span class="secno">8.1 </span>Event definitions</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Messages in <span>server-sent events</span>, <span>Web + sockets</span>, <a href="#crossDocumentMessages">cross-document messaging</a>, and + <a href="#channel-messaging">channel messaging</a> use the <dfn id="event-message" title="event-message"><code>message</code></dfn> event. + + <a href="references.html#refsEVENTSOURCE">[EVENTSOURCE]</a> + <a href="references.html#refsWEBSOCKET">[WEBSOCKET]</a> + + </p><p>The following interface is defined for this event:</p><pre class="idl">interface <dfn id="messageevent">MessageEvent</dfn> : Event { + readonly attribute any <a href="#dom-messageevent-data" title="dom-MessageEvent-data">data</a>; + readonly attribute DOMString <a href="#dom-messageevent-origin" title="dom-MessageEvent-origin">origin</a>; + readonly attribute DOMString <a href="#dom-messageevent-lasteventid" title="dom-MessageEvent-lastEventId">lastEventId</a>; + readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-messageevent-source" title="dom-MessageEvent-source">source</a>; + readonly attribute <a href="#messageportarray">MessagePortArray</a> <a href="#dom-messageevent-ports" title="dom-MessageEvent-ports">ports</a>; + void <a href="#dom-messageevent-initmessageevent" title="dom-MessageEvent-initMessageEvent">initMessageEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dataArg, in DOMString originArg, in DOMString lastEventIdArg, in <a href="#windowproxy">WindowProxy</a> sourceArg, in <a href="#messageportarray">MessagePortArray</a> portsArg); +};</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-MessageEvent-data"><a href="#dom-messageevent-data">data</a></code></dt> + + <dd> + + <p>Returns the data of the message.</p> + + </dd> + + <dt><var title="">event</var> . <code title="dom-MessageEvent-origin"><a href="#dom-messageevent-origin">origin</a></code></dt> + + <dd> + + <p>Returns the origin of the message, for <span>server-sent + events</span> and <a href="#crossDocumentMessages">cross-document messaging</a>.</p> + + </dd> + + <dt><var title="">event</var> . <code title="dom-MessageEvent-lastEventId"><a href="#dom-messageevent-lasteventid">lastEventId</a></code></dt> + + <dd> + + <p>Returns the last event ID, for <span>server-sent + events</span>.</p> + + </dd> + + <dt><var title="">event</var> . <code title="dom-MessageEvent-source"><a href="#dom-messageevent-source">source</a></code></dt> + + <dd> + + <p>Returns the <code><a href="#windowproxy">WindowProxy</a></code> of the source window, for + <a href="#crossDocumentMessages">cross-document messaging</a>.</p> + + </dd> + + <dt><var title="">event</var> . <code title="dom-MessageEvent-ports"><a href="#dom-messageevent-ports">ports</a></code></dt> + + <dd> + + <p>Returns the <code><a href="#messageportarray">MessagePortArray</a></code> sent with the + message, for <a href="#crossDocumentMessages">cross-document messaging</a> and + <a href="#channel-messaging">channel messaging</a>.</p> + + </dd> + + </dl><h3 id="crossDocumentMessages"><span class="secno">8.2 </span><dfn>Cross-document messaging</dfn></h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Web browsers, for security and privacy reasons, prevent documents + in different domains from affecting each other; that is, cross-site + scripting is disallowed.</p><p>While this is an important security feature, it prevents pages + from different domains from communicating even when those pages are + not hostile. This section introduces a messaging system that allows + documents to communicate with each other regardless of their source + domain, in a way designed to not enable cross-site scripting + attacks.</p><h4 id="introduction-5"><span class="secno">8.2.1 </span>Introduction</h4><p class="XXX annotation"><b>Status: </b><i>Working draft</i></p><p><i>This section is non-normative.</i></p><div class="example"> + + <p>For example, if document A contains an <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code> + element that contains document B, and script in document A calls + <code title="dom-window-postMessage-2"><a href="#dom-window-postmessage-2">postMessage()</a></code> on the + <code><a href="browsers.html#window">Window</a></code> object of document B, then a message event will + be fired on that object, marked as originating from the + <code><a href="browsers.html#window">Window</a></code> of document A. The script in document A might + look like:</p> + + <pre>var o = document.getElementsByTagName('iframe')[0]; +o.contentWindow.postMessage('Hello world', 'http://b.example.org/');</pre> + + <p>To register an event handler for incoming events, the script + would use <code title="">addEventListener()</code> (or similar + mechanisms). For example, the script in document B might look + like:</p> + + <pre>window.addEventListener('message', receiver, false); +function receiver(e) { + if (e.origin == 'http://example.com') { + if (e.data == 'Hello world') { + e.source.postMessage('Hello', e.origin); + } else { + alert(e.data); + } + } +}</pre> + + <p>This script first checks the domain is the expected domain, and + then looks at the message, which it either displays to the user, or + responds to by sending a message back to the document which sent + the message in the first place.</p> + + </div><h4 id="security-4"><span class="secno">8.2.2 </span>Security</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="warning">Use of this API requires extra care to protect + users from hostile entities abusing a site for their own + purposes.</p><p>Authors should check the <code title="dom-MessageEvent-origin"><a href="#dom-messageevent-origin">origin</a></code> attribute to ensure + that messages are only accepted from domains that they expect to + receive messages from. Otherwise, bugs in the author's message + handling code could be exploited by hostile sites.</p><p>Furthermore, even after checking the <code title="dom-MessageEvent-origin"><a href="#dom-messageevent-origin">origin</a></code> attribute, authors + should also check that the data in question is of the expected + format. Otherwise, if the source of the event has been attacked + using a cross-site scripting flaw, further unchecked processing of + information sent using the <code title="dom-window-postMessage-2"><a href="#dom-window-postmessage-2">postMessage()</a></code> method could + result in the attack being propagated into the receiver.</p><p>Authors should not use the wildcard keyword (*) in the <var title="">targetOrigin</var> argument in messages that contain any + confidential information, as otherwise there is no way to guarantee + that the message is only delivered to the recipient to which it was + intended.</p><h4 id="posting-messages"><span class="secno">8.2.3 </span>Posting messages</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-window-postMessage-2"><a href="#dom-window-postmessage-2">postMessage</a></code>(<var title="">message</var>, [ <var title="">ports</var>, ] <var title="">targetOrigin</var>)</dt> + + <dd> + + <p>Posts a message, optionally with an array of ports, to the + given window.</p> + + <p>If the origin of the target window doesn't match the given + origin, the message is discarded, to avoid information leakage. To + send the message to the target regardless of origin, set the + target origin to "<code title="">*</code>".</p> + + <p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the <var title="">ports</var> array is not null and it contains either null + entries or duplicate ports.</p> + + </dd> + + </dl><h3 id="channel-messaging"><span class="secno">8.3 </span><dfn>Channel messaging</dfn></h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="message-channels"><span class="secno">8.3.1 </span>Message channels</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">[<a href="#dom-messagechannel" title="dom-MessageChannel">Constructor</a>] +interface <dfn id="messagechannel">MessageChannel</dfn> { + readonly attribute <a href="#messageport">MessagePort</a> <a href="#dom-channel-port1" title="dom-channel-port1">port1</a>; + readonly attribute <a href="#messageport">MessagePort</a> <a href="#dom-channel-port2" title="dom-channel-port2">port2</a>; +};</pre><dl class="domintro"><dt><var title="">channel</var> = new <code title="dom-MessageChannel"><a href="#dom-messagechannel">MessageChannel</a></code>()</dt> + + <dd> + + <p>Returns a new <code><a href="#messagechannel">MessageChannel</a></code> object with two new <code><a href="#messageport">MessagePort</a></code> objects.</p> + + </dd> + + <dt><var title="">channel</var> . <code title="dom-MessageChannel-port1">port1</code></dt> + + <dd> + + <p>Returns the first <code><a href="#messageport">MessagePort</a></code> object.</p> + + </dd> + + <dt><var title="">channel</var> . <code title="dom-MessageChannel-port2">port2</code></dt> + + <dd> + + <p>Returns the second <code><a href="#messageport">MessagePort</a></code> object.</p> + + </dd> + + </dl><h4 id="message-ports"><span class="secno">8.3.2 </span>Message ports</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Each channel has two message ports. Data sent through one port is + received by the other port, and vice versa.</p><pre class="idl">typedef sequence<MessagePort> <dfn id="messageportarray">MessagePortArray</dfn>; + +interface <dfn id="messageport">MessagePort</dfn> { +<!-- v2-onclose readonly attribute boolean <span title="dom-MessagePort-active">active</span>; +--> void <a href="#dom-messageport-postmessage" title="dom-MessagePort-postMessage">postMessage</a>(in any message, in optional <a href="#messageportarray">MessagePortArray</a> ports);<!-- + <span>MessagePort</span> <span title="dom-MessagePort-startConversation">startConversation</span>(in any message);--> + void <a href="#dom-messageport-start" title="dom-MessagePort-start">start</a>(); + void <a href="#dom-messageport-close" title="dom-MessagePort-close">close</a>(); + + // event handlers + attribute <a href="#function">Function</a> <a href="#handler-messageport-onmessage" title="handler-MessagePort-onmessage">onmessage</a>; +}; +<a href="#messageport">MessagePort</a> implements <span>EventTarget</span>;</pre><dl class="domintro"><!-- v2-onclose + <dt><var title="">port</var> . <code title="dom-MessagePort-active">active</code></dt> + + <dd> + + <p>Returns true if the port is still active; otherwise, returns false.</p> + + </dd> +--><dt><var title="">port</var> . <code title="dom-MessagePort-poseMessage">postMessage</code>(<var title="">message</var> [, <var title="">ports</var>] )</dt> + + <dd> + + <p>Posts a message through the channel, optionally with the given + ports.</p> + + <p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the <var title="">ports</var> array is not null and it contains either null + entries, duplicate ports, or the source or target port.</p> + + </dd> + + <dt><var title="">port</var> . <code title="dom-MessagePort-start"><a href="#dom-messageport-start">start</a></code>()</dt> + + <dd> + + <p>Begins dispatching messages received on the port.</p> + + </dd> + + <dt><var title="">port</var> . <code title="dom-MessagePort-close"><a href="#dom-messageport-close">close</a></code>()</dt> + + <dd> + + <p>Disconnects the port, so that it is no longer active.</p> + + </dd> + + </dl><h5 id="ports-and-garbage-collection"><span class="secno">8.3.2.1 </span>Ports and garbage collection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="note">Authors are strongly encouraged to explicitly close + <code><a href="#messageport">MessagePort</a></code> objects to disentangle them, so that their + resources can be recollected. Creating many <code><a href="#messageport">MessagePort</a></code> + objects and discarding them without closing them can lead to high + memory usage.</p></body></html> \ No newline at end of file Index: grouping-content.html =================================================================== RCS file: /sources/public/html5/spec-author-view/grouping-content.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- grouping-content.html 3 Jan 2010 15:08:14 -0000 1.8 +++ grouping-content.html 3 Jan 2010 15:15:06 -0000 1.9 @@ -0,0 +1,920 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.5 Grouping content — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="sections.html" title="4.4 Sections" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="text-level-semantics.html" title="4.6 Text-level semantics" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="sections.html">← 4.4 Sections</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="text-level-semantics.html">4.6 Text-level semantics →</a> + <ol class="toc"><li><ol><li><a href="grouping-content.html#grouping-content"><span class="secno">4.5 </span>Grouping content</a> + <ol><li><a href="grouping-content.html#the-p-element"><span class="secno">4.5.1 </span>The <code>p</code> element</a></li><li><a href="grouping-content.html#the-hr-element"><span class="secno">4.5.2 </span>The <code>hr</code> element</a></li><li><a href="grouping-content.html#the-br-element"><span class="secno">4.5.3 </span>The <code>br</code> element</a></li><li><a href="grouping-content.html#the-pre-element"><span class="secno">4.5.4 </span>The <code>pre</code> element</a></li><li><a href="grouping-content.html#the-blockquote-element"><span class="secno">4.5.5 </span>The <code>blockquote</code> element</a></li><li><a href="grouping-content.html#the-ol-element"><span class="secno">4.5.6 </span>The <code>ol</code> element</a></li><li><a href="grouping-content.html#the-ul-element"><span class="secno">4.5.7 </span>The <code>ul</code> element</a></li><li><a href="grouping-content.html#the-li-element"><span class="secno">4.5.8 </span>The <code>li</code> element</a></li><li><a href="grouping-content.html#the-dl-element"><span class="secno">4.5.9 </span>The <code>dl</code> element</a></li><li><a href="grouping-content.html#the-dt-element"><span class="secno">4.5.10 </span>The <code>dt</code> element</a></li><li><a href="grouping-content.html#the-dd-element"><span class="secno">4.5.11 </span>The <code>dd</code> element</a></li><li><a href="grouping-content.html#the-div-element"><span class="secno">4.5.12 </span>The <code>div</code> element</a></li></ol></li></ol></li></ol></div> + + <h3 id="grouping-content"><span class="secno">4.5 </span>Grouping content</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="the-p-element"><span class="secno">4.5.1 </span>The <dfn><code>p</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd> + <pre class="idl">interface <dfn id="htmlparagraphelement">HTMLParagraphElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> + </dd> + </dl><p>The <code><a href="#the-p-element">p</a></code> element <a href="#represents">represents</a> a + <a href="content-models.html#paragraph">paragraph</a>.</p><div class="example"> + <p>The following examples are conforming HTML fragments:</p> + <pre><p>The little kitten gently seated himself on a piece of +carpet. Later in his life, this would be referred to as the time the +cat sat on the mat.</p></pre> + <pre><fieldset> + <legend>Personal information</legend> + <p> + <label>Name: <input name="n"></label> + <label><input name="anon" type="checkbox"> Hide from other users</label> + </p> + <p><label>Address: <textarea name="a"></textarea></label></p> +</fieldset></pre> + <pre><p>There was once an example from Femley,<br> +Whose markup was of dubious quality.<br> +The validator complained,<br> +So the author was pained,<br> +To move the error from the markup to the rhyming.</p></pre> + </div><p>The <code><a href="#the-p-element">p</a></code> element should not be used when a more + specific element is more appropriate.</p><div class="example"> + + <p>The following example is technically correct:</p> + +<pre><section> + <!-- ... --> + <p>Last modified: 2001-04-23</p> + <p>Author: http://quotes.example.org/s/sonnet130.html"> + <p>My mistress' eyes are nothing like the sun,<br> + Coral is far more red, than her lips red,<br> + ...</pre> + + </div><p class="note"><a href="commands.html#conversations">Examples of how to + represent a conversation</a> are shown below; it is not appropriate + to use the <code><a href="text-level-semantics.html#the-cite-element">cite</a></code> and <code><a href="#the-blockquote-element">blockquote</a></code> elements + for this purpose.</p><h4 id="the-ol-element"><span class="secno">4.5.6 </span>The <dfn><code>ol</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code></dd> + <dd><code title="attr-ol-start"><a href="#attr-ol-start">start</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmlolistelement">HTMLOListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute boolean <a href="#dom-ol-reversed" title="dom-ol-reversed">reversed</a>; + attribute long <a href="#dom-ol-start" title="dom-ol-start">start</a>; +};</pre> + </dd> + </dl><p>The <code><a href="#the-ol-element">ol</a></code> element <a href="#represents">represents</a> a list of + items, where the items have been intentionally ordered, such that + changing the order would change the meaning of the document.</p><p>The items of the list are the <code><a href="#the-li-element">li</a></code> element child nodes + of the <code><a href="#the-ol-element">ol</a></code> element, in <a href="infrastructure.html#tree-order">tree order</a>.</p><p>The <dfn id="attr-ol-reversed" title="attr-ol-reversed"><code>reversed</code></dfn> + attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If present, it + indicates that the list is a descending list (..., 3, 2, 1). If the + attribute is omitted, the list is an ascending list (1, 2, 3, + ...).</p><p>The <dfn id="attr-ol-start" title="attr-ol-start"><code>start</code></dfn> + attribute, if present, must be a <a href="common-microsyntaxes.html#valid-integer">valid integer</a> giving + the ordinal value of the first list item.</p><!-- v2: resuming numbering of lists from previous lists? --><div class="example"> + + <p>The following markup shows a list where the order matters, and + where the <code><a href="#the-ol-element">ol</a></code> element is therefore appropriate. Compare + this list to the equivalent list in the <code><a href="#the-ul-element">ul</a></code> section to + see an example of the same items using the <code><a href="#the-ul-element">ul</a></code> + element.</p> + + <pre><p>I have lived in the following countries (given in the order of when +I first lived there):</p> +<ol> + <li>Switzerland + <li>United Kingdom + <li>United States + <li>Norway +</ol></pre> + + <p>Note how changing the order of the list changes the meaning of + the document. In the following example, changing the relative order + of the first two items has changed the birthplace of the + author:</p> + + <pre><p>I have lived in the following countries (given in the order of when +I first lived there):</p> +<ol> + <li>United Kingdom + <li>Switzerland + <li>United States + <li>Norway +</ol></pre> + + </div><h4 id="the-ul-element"><span class="secno">4.5.7 </span>The <dfn><code>ul</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd> + <pre class="idl">interface <dfn id="htmlulistelement">HTMLUListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> + </dd> + </dl><p>The <code><a href="#the-ul-element">ul</a></code> element <a href="#represents">represents</a> a list of + items, where the order of the items is not important — that + is, where changing the order would not materially change the meaning + of the document.</p><p>The items of the list are the <code><a href="#the-li-element">li</a></code> element child nodes + of the <code><a href="#the-ul-element">ul</a></code> element.</p><div class="example"> + + <p>The following markup shows a list where the order does not + matter, and where the <code><a href="#the-ul-element">ul</a></code> element is therefore + appropriate. Compare this list to the equivalent list in the + <code><a href="#the-ol-element">ol</a></code> section to see an example of the same items using + the <code><a href="#the-ol-element">ol</a></code> element.</p> + + <pre><p>I have lived in the following countries:</p> +<ul> + <li>Norway + <li>Switzerland + <li>United Kingdom + <li>United States +</ul></pre> + + <p>Note that changing the order of the list does not change the + meaning of the document. The items in the snippet above are given + in alphabetical order, but in the snippet below they are given in + order of the size of their current account balance in 2007, without + changing the meaning of the document whatsoever:</p> + + <pre><p>I have lived in the following countries:</p> +<ul> + <li>Switzerland + <li>Norway + <li>United Kingdom + <li>United States +</ul></pre> + + </div><h4 id="the-li-element"><span class="secno">4.5.8 </span>The <dfn><code>li</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd>None.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Inside <code><a href="#the-ol-element">ol</a></code> elements.</dd> + <dd>Inside <code><a href="#the-ul-element">ul</a></code> elements.</dd> + <dd>Inside <code><a href="interactive-elements.html#menus">menu</a></code> elements.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd>If the element is a child of an <code><a href="#the-ol-element">ol</a></code> element: <code title="attr-li-value"><a href="#attr-li-value">value</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmllielement">HTMLLIElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute long <a href="#dom-li-value" title="dom-li-value">value</a>; +};</pre> + </dd> + </dl><p>The <code><a href="#the-li-element">li</a></code> element <a href="#represents">represents</a> a list + item. If its parent element is an <code><a href="#the-ol-element">ol</a></code>, <code><a href="#the-ul-element">ul</a></code>, + or <code><a href="interactive-elements.html#menus">menu</a></code> element, then the element is an item of the + parent element's list, as defined for those elements. Otherwise, the + list item has no defined list-related relationship to any other + <code><a href="#the-li-element">li</a></code> element.</p><p>The <dfn id="attr-li-value" title="attr-li-value"><code>value</code></dfn> + attribute, if present, must be a <a href="common-microsyntaxes.html#valid-integer">valid integer</a> giving + the ordinal value of the list item.</p><div class="example"> + <p>The following example, the top ten movies are listed (in reverse + order). Note the way the list is given a title by using a + <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element and its <code><a href="#the-dt-element">dt</a></code> element.</p> + <pre><figure> + <dt>The top 10 movies of all time</dt> + <dd> + <ol> + <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li> + <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> + <li value="8"><cite>A Bug's Life</cite>, 1998</li> + <li value="7"><cite>Toy Story</cite>, 1995</li> + <li value="6"><cite>Monsters, Inc</cite>, 2001</li> + <li value="5"><cite>Cars</cite>, 2006</li> + <li value="4"><cite>Toy Story 2</cite>, 1999</li> + <li value="3"><cite>Finding Nemo</cite>, 2003</li> + <li value="2"><cite>The Incredibles</cite>, 2004</li> + <li value="1"><cite>Ratatouille</cite>, 2007</li> + </ol> + <dd> +</figure></pre> + + <p>The markup could also be written as follows, using the <code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code> attribute on the + <code><a href="#the-ol-element">ol</a></code> element:</p> + + <pre><figure> + <dt>The top 10 movies of all time</dt> + <dd> + <ol reversed> + <li><cite>Josie and the Pussycats</cite>, 2001</li> + <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> + <li><cite>A Bug's Life</cite>, 1998</li> + <li><cite>Toy Story</cite>, 1995</li> + <li><cite>Monsters, Inc</cite>, 2001</li> + <li><cite>Cars</cite>, 2006</li> + <li><cite>Toy Story 2</cite>, 1999</li> + <li><cite>Finding Nemo</cite>, 2003</li> + <li><cite>The Incredibles</cite>, 2004</li> + <li><cite>Ratatouille</cite>, 2007</li> + </ol> + </dd> +</figure></pre> + </div><p class="note">If the <code><a href="#the-li-element">li</a></code> element is the child of a + <code><a href="interactive-elements.html#menus">menu</a></code> element and itself has a child that defines a + <a href="commands.html#concept-command" title="concept-command">command</a>, then the + <code><a href="#the-li-element">li</a></code> element will match the <code title="selector-enabled"><a href="#selector-enabled">:enabled</a></code> and <code title="selector-disabled"><a href="#selector-disabled">:disabled</a></code> pseudo-classes in the + same way as the first such child element does.</p><h4 id="the-dl-element"><span class="secno">4.5.9 </span>The <dfn><code>dl</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Zero or more groups each consisting of one or more + <code><a href="#the-dt-element">dt</a></code> elements followed by one or more <code><a href="#the-dd-element">dd</a></code> + elements.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd> + <pre class="idl">interface <dfn id="htmldlistelement">HTMLDListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> + </dd> + </dl><p>The <code><a href="#the-dl-element">dl</a></code> element <a href="#represents">represents</a> an + association list consisting of zero or more name-value groups (a + description list). Each group must consist of one or more names + (<code><a href="#the-dt-element">dt</a></code> elements) followed by one or more values + (<code><a href="#the-dd-element">dd</a></code> elements). Within a single <code><a href="#the-dl-element">dl</a></code> element, + there should not be more than one <code><a href="#the-dt-element">dt</a></code> element for each + name.</p><p>Name-value groups may be terms and definitions, metadata topics + and values, or any other groups of name-value data.</p><p>The values within a group are alternatives; multiple paragraphs + forming part of the same value must all be given within the same + <code><a href="#the-dd-element">dd</a></code> element.</p><p>The order of the list of groups, and of the names and values + within each group, may be significant.</p><div class="example"> + <p>In the following example, one entry ("Authors") is linked to two + values ("John" and "Luke").</p> + <pre><dl> + <dt> Authors + <dd> John + <dd> Luke + <dt> Editor + <dd> Frank +</dl></pre> + </div><div class="example"> + <p>In the following example, one definition is linked to two + terms.</p> + <pre><dl> + <dt lang="en-US"> <dfn>color</dfn> </dt> + <dt lang="en-GB"> <dfn>colour</dfn> </dt> + <dd> A sensation which (in humans) derives from the ability of + the fine structure of the eye to distinguish three differently + filtered analyses of a view. </dd> +</dl></pre> + </div><div class="example"> + <p>The following example illustrates the use of the <code><a href="#the-dl-element">dl</a></code> + element to mark up metadata of sorts. At the end of the example, + one group has two metadata labels ("Authors" and "Editors") and two + values ("Robert Rothman" and "Daniel Jackson").</p> + <pre><dl> + <dt> Last modified time </dt> + <dd> 2004-12-23T23:33Z </dd> + <dt> Recommended update interval </dt> + <dd> 60s </dd> + <dt> Authors </dt> + <dt> Editors </dt> + <dd> Robert Rothman </dd> + <dd> Daniel Jackson </dd> +</dl></pre> + </div><div class="example"> + + <p>The following example shows the <code><a href="#the-dl-element">dl</a></code> element used to + give a set of instructions. The order of the instructions here is + important (in the other examples, the order of the blocks was not + important).</p> + + <pre><p>Determine the victory points as follows (use the +first matching case):</p> +<dl> + <dt> If you have exactly five gold coins </dt> + <dd> You get five victory points </dd> + <dt> If you have one or more gold coins, and you have one or more silver coins </dt> + <dd> You get two victory points </dd> + <dt> If you have one or more silver coins </dt> + <dd> You get one victory point </dd> + <dt> Otherwise </dt> + <dd> You get no victory points </dd> +</dl></pre> + </div><div class="example"> + <p>The following snippet shows a <code><a href="#the-dl-element">dl</a></code> element being used + as a glossary. Note the use of <code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code> to indicate the + word being defined.</p> + <pre><dl> + <dt><dfn>Apartment</dfn>, n.</dt> + <dd>An execution context grouping one or more threads with one or + more COM objects.</dd> + <dt><dfn>Flat</dfn>, n.</dt> + <dd>A deflated tire.</dd> + <dt><dfn>Home</dfn>, n.</dt> + <dd>The user's login directory.</dd> +</dl></pre> + </div><p class="note">The <code><a href="#the-dl-element">dl</a></code> element is inappropriate for + marking up dialogue. <a href="commands.html#conversations">Examples of how to + mark up dialogue</a> are shown below.</p><h4 id="the-dt-element"><span class="secno">4.5.10 </span>The <dfn><code>dt</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd>None.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Before <code><a href="#the-dd-element">dd</a></code> or <code><a href="#the-dt-element">dt</a></code> elements inside <code><a href="#the-dl-element">dl</a></code> elements.</dd> + <dd>In a <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element containing no other <code><a href="#the-dt-element">dt</a></code> element children.</dd> + <dd>As the first child of a <code><a href="interactive-elements.html#the-details-element">details</a></code> element.</dd> + <dt>Content model:</dt> + <dd>When the parent node is a <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element: <a href="content-models.html#flow-content">flow content</a>, but with no descendant <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> elements.</dd> + <dd>Otherwise: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> + </dl><p>The <code><a href="#the-dt-element">dt</a></code> element <a href="#represents">represents</a> either: the + term, or name, part of a term-description group in a description + list (<code><a href="#the-dl-element">dl</a></code> element); or, the caption of a + <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element; or, the summary of a + <code><a href="interactive-elements.html#the-details-element">details</a></code> element.</p><p class="note">The <code><a href="#the-dt-element">dt</a></code> element itself, when used in a + <code><a href="#the-dl-element">dl</a></code> element, does not indicate that its contents are a + term being defined, but this can be indicated using the + <code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code> element.</p><h4 id="the-dd-element"><span class="secno">4.5.11 </span>The <dfn><code>dd</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd>None.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>After <code><a href="#the-dt-element">dt</a></code> or <code><a href="#the-dd-element">dd</a></code> elements inside <code><a href="#the-dl-element">dl</a></code> elements.</dd> + <dd>In a <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element containing no other <code><a href="#the-dd-element">dd</a></code> element children.</dd> + <dd>As the last child of a <code><a href="interactive-elements.html#the-details-element">details</a></code> element.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd> + </dl><p>The <code><a href="#the-dd-element">dd</a></code> element <a href="#represents">represents</a> either: the + description, definition, or value, part of a term-description group + in a description list (<code><a href="#the-dl-element">dl</a></code> element); or, the data of a + <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element; or, the details of a + <code><a href="interactive-elements.html#the-details-element">details</a></code> element.</p><div class="example"> + + <p>A <code><a href="#the-dl-element">dl</a></code> can be used to define a vocabulary list, like + in a dictionary. In the following example, each entry, given by a + <code><a href="#the-dt-element">dt</a></code> with a <code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code>, has several + <code><a href="#the-dd-element">dd</a></code>s, showing the various parts of the definition.</p> + + <!-- the actual pronunciations below are nonsense. --> + <pre><dl> + <dt><dfn>happiness</dfn></dt> + <dd class="pronunciation">/'hæ p. nes/</dd> + <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd> + <dd>The state of being happy.</dd> + <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd> + <dt><dfn>rejoice</dfn></dt> + <dd class="pronunciation">/ri jois'/</dd> + <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd> + <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd> +</dl></pre> + </div><h4 id="the-div-element"><span class="secno">4.5.12 </span>The <dfn><code>div</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd> + <pre class="idl">interface <dfn id="htmldivelement">HTMLDivElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre> + </dd> + </dl><p>The <code><a href="#the-div-element">div</a></code> element has no special meaning at all. It + <a href="#represents">represents</a> its children. It can be used with the <code title="attr-class"><a href="elements.html#classes">class</a></code>, <code title="attr-lang"><a href="elements.html#attr-lang">lang</a></code>, and <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attributes to mark up semantics + common to a group of consecutive elements.</p><p class="note">Authors are strongly encouraged to view the + <code><a href="#the-div-element">div</a></code> element as an element of last resort, for when no + other element is suitable. Use of the <code><a href="#the-div-element">div</a></code> element + instead of more appropriate elements leads to poor accessibility for + readers and poor maintainability for authors.</p><div class="example"> + + <p>For example, a blog post would be marked up using + <code><a href="sections.html#the-article-element">article</a></code>, a chapter using <code><a href="sections.html#the-section-element">section</a></code>, a + page's navigation aids using <code><a href="sections.html#the-nav-element">nav</a></code>, and a group of form + controls using <code><a href="forms.html#the-fieldset-element">fieldset</a></code>.</p> + + <p>On the other hand, <code><a href="#the-div-element">div</a></code> elements can be useful for + stylistic purposes or to wrap multiple paragraphs within a section + that are all to be annotated in a similar way. In the following + example, we see <code><a href="#the-div-element">div</a></code> elements used as a way to set the + language of two paragraphs at once, instead of setting the language + on the two paragraph elements separately:</p> + + <pre><article lang="en-US"> + <h1>My use of language and my cats</h1> + <p>My cat's behavior hasn't changed much since her absence, except + that she plays her new physique to the neighbors regularly, in an + attempt to get pets.</p> + <div lang="en-GB"> + <p>My other cat, coloured black and white, is a sweetie. He followed + us to the pool today, walking down the pavement with us. Yesterday + he apparently visited our neighbours. I wonder if he recognises that + their flat is a mirror image of ours.</p> + <p>Hm, I just noticed that in the last paragraph I used British + English. But I'm supposed to write in American English. So I + shouldn't say "pavement" or "flat" or "colour"...</p> + </div> + <p>I should say "sidewalk" and "apartment" and "color"!</p> +</article></pre> + + </div></body></html> \ No newline at end of file Index: timers.html =================================================================== RCS file: /sources/public/html5/spec-author-view/timers.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- timers.html 3 Jan 2010 15:08:16 -0000 1.8 +++ timers.html 3 Jan 2010 15:15:07 -0000 1.9 @@ -213,4 +213,325 @@ .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 \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="browsers.html" title="6 Web browsers" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="offline.html" title="6.7 Offline Web applications" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="browsers.html">← 6 Web browsers</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="offline.html">6.7 Offline Web applications →</a> + <ol class="toc"><li><ol><li><a href="timers.html#timers"><span class="secno">6.4 </span>Timers</a></li><li><a href="timers.html#user-prompts"><span class="secno">6.5 </span>User prompts</a> + <ol><li><a href="timers.html#simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</a></li><li><a href="timers.html#printing"><span class="secno">6.5.2 </span>Printing</a></li><li><a href="timers.html#dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</a></li></ol></li><li><a href="timers.html#system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</a> + <ol><li><a href="timers.html#client-identification"><span class="secno">6.6.1 </span>Client identification</a></li><li><a href="timers.html#custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</a></li><li><a href="timers.html#manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</a></li></ol></li></ol></li></ol></div> + + <h3 id="timers"><span class="secno">6.4 </span>Timers</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code> + and <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code> + methods allow authors to schedule timer-based callbacks.</p><pre class="idl">[Supplemental, NoInterfaceObject] +interface <dfn id="windowtimers">WindowTimers</dfn> { + long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>(in any handler, in optional any timeout, in any... args); + void <a href="#dom-windowtimers-cleartimeout" title="dom-windowtimers-clearTimeout">clearTimeout</a>(in long handle); + long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>(in any handler, in optional any timeout, in any... args); + void <a href="#dom-windowtimers-clearinterval" title="dom-windowtimers-clearInterval">clearInterval</a>(in long handle); +}; +<a href="browsers.html#window">Window</a> implements <a href="#windowtimers">WindowTimers</a>;</pre><dl class="domintro"><dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt> + + <dd> + + <p>Schedules a timeout to run <var title="">handler</var> after + <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p> + + </dd> + + <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt> + + <dd> + + <p>Schedules a timeout to compile and run <var title="">code</var> + after <var title="">timeout</var> milliseconds.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-windowtimers-clearTimeout"><a href="#dom-windowtimers-cleartimeout">clearTimeout</a></code>( <var title="">handle</var> )</dt> + + <dd> + + <p>Cancels the timeout set with <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code> identified by <var title="">handle</var>.</p> + + </dd> + + <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt> + + <dd> + + <p>Schedules a timeout to run <var title="">handler</var> every + <var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p> + + </dd> + + <dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt> + + <dd> + + <p>Schedules a timeout to compile and run <var title="">code</var> + every <var title="">timeout</var> milliseconds.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-windowtimers-clearInterval"><a href="#dom-windowtimers-clearinterval">clearInterval</a></code>( <var title="">handle</var> )</dt> + + <dd> + + <p>Cancels the timeout set with <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code> identified by <var title="">handle</var>.</p> + + </dd> + + </dl><p class="note">This API does not guarantee that timers will fire + exactly on schedule. Delays due to CPU load, other tasks, etc, are + to be expected.</p><h3 id="user-prompts"><span class="secno">6.5 </span>User prompts</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- + v2 ideas: + * in-window modal dialogs + - escape/enter handling + - dragging the window out of the tab + * in-window non-modal palettes + - with a solution for the mobile space + --><h4 id="simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-alert"><a href="#dom-alert">alert</a></code>(<var title="">message</var>)</dt> + <dd> + + <p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-confirm"><a href="#dom-confirm">confirm</a></code>(<var title="">message</var>)</dt> + <dd> + + <p>Displays a modal OK/Cancel prompt with the given message, waits + for the user to dismiss it, and returns true if the user clicks OK + and false if the user clicks Cancel.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + <dt><var title="">result</var> = <var title="">window</var> . <code title="dom-prompt"><a href="#dom-prompt">prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt> + <dd> + + <p>Displays a modal text field prompt with the given message, + waits for the user to dismiss it, and returns the value that the + user entered. If the user cancels the prompt, then returns null + instead. If the second argument is present, then the given value + is used as a default.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + </dl><h4 id="printing"><span class="secno">6.5.2 </span>Printing</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-print"><a href="#dom-print">print</a></code>()</dt> + + <dd> + + <p>Prompts the user to print the page.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + </dl><h4 id="dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">result</var> = <var title="">window</var> . <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt> + + <dd> + + <p>Prompts the user with the given page, waits for that page to + close, and returns the return value.</p> + + <p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method is implied when this method is invoked.</p> + + </dd> + + </dl><pre class="idl">[Supplemental, NoInterfaceObject] interface <dfn id="windowmodal">WindowModal</dfn> { + readonly attribute any <a href="#dom-windowmodal-dialogarguments" title="dom-WindowModal-dialogArguments">dialogArguments</a>; + attribute DOMString <a href="#dom-windowmodal-returnvalue" title="dom-WindowModal-returnValue">returnValue</a>; +}; +<a href="browsers.html#window">Window</a> implements <a href="#windowmodal">WindowModal</a>; /* sometimes */</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-WindowModal-dialogArguments"><a href="#dom-windowmodal-dialogarguments">dialogArguments</a></code></dt> + + <dd> + + <p>Returns the <var title="">argument</var> argument that was + passed to the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-WindowModal-returnValue"><a href="#dom-windowmodal-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the current return value for the window.</p> + + <p>Can be set, to change the value that will be returned by the + <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> + method.</p> + + </dd> + + </dl><p class="note">The <code title="dom-window-close"><a href="#dom-window-close">window.close()</a></code> method can be used to + close the browsing context.</p><h3 id="system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="navigator">Navigator</dfn> { + // objects implementing this interface also implement the interfaces given below +}; +<a href="#navigator">Navigator</a> implements <a href="#navigatorid">NavigatorID</a>; +<a href="#navigator">Navigator</a> implements <a href="#navigatoronline">NavigatorOnLine</a>; +<a href="#navigator">Navigator</a> implements <a href="#navigatorabilities">NavigatorAbilities</a>; + +[Supplemental, NoInterfaceObject] +interface <dfn id="navigatorid">NavigatorID</dfn> {<!-- + readonly attribute DOMString <span title="dom-navigator-appCodeName">appCodeName</span>;--> + readonly attribute DOMString <a href="#dom-navigator-appname" title="dom-navigator-appName">appName</a>; + readonly attribute DOMString <a href="#dom-navigator-appversion" title="dom-navigator-appVersion">appVersion</a>; + readonly attribute DOMString <a href="#dom-navigator-platform" title="dom-navigator-platform">platform</a>; + readonly attribute DOMString <a href="#dom-navigator-useragent" title="dom-navigator-userAgent">userAgent</a>; +}; + +[Supplemental, NoInterfaceObject] +interface <dfn id="navigatoronline">NavigatorOnLine</dfn> { + readonly attribute boolean <a href="#dom-navigator-online" title="dom-navigator-onLine">onLine</a>; +}; + +[Supplemental, NoInterfaceObject] +interface <dfn id="navigatorabilities">NavigatorAbilities</dfn> { + // content handler registration + void <a href="#dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler">registerProtocolHandler</a>(in DOMString scheme, in DOMString url, in DOMString title); + void <a href="#dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler">registerContentHandler</a>(in DOMString mimeType, in DOMString url, in DOMString title); + void <a href="#dom-navigator-yieldforstorageupdates" title="dom-navigator-yieldForStorageUpdates">yieldForStorageUpdates</a>(); +<!-- v2: cookieEnabled geolocator javaEnabled mozIsLocallyAvailable preference + readonly attribute <span>MimeTypeArray</span> <span title="dom-navigator-mimeTypes">mimeTypes</span>; + readonly attribute <span>PluginArray</span> <span title="dom-navigator-plugins">plugins</span>; + (the latter is used in a <video> element demo now, so we might need to pull this forward from v2!) +-->};</pre><h4 id="client-identification"><span class="secno">6.6.1 </span>Client identification</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>In certain cases, despite the best efforts of the entire + industry, Web browsers have bugs and limitations that Web authors + are forced to work around.</p><p>This section defines a collection of attributes that can be used + to determine, from script, the kind of user agent in use, in order + to work around these issues.</p><p>Client detection should always be limited to detecting known + current versions; future versions and unknown versions should always + be assumed to be fully compliant.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appName"><a href="#dom-navigator-appname">appName</a></code></dt> + <dd> + <p>Returns the name of the browser.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appVersion"><a href="#dom-navigator-appversion">appVersion</a></code></dt> + <dd> + <p>Returns the version of the browser.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-platform"><a href="#dom-navigator-platform">platform</a></code></dt> + <dd> + <p>Returns the name of the platform.</p> + </dd> + + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-userAgent"><a href="#dom-navigator-useragent">userAgent</a></code></dt> + <dd> + <p>Returns the complete User-Agent header.</p> + </dd> + + </dl><h4 id="custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler"><code>registerProtocolHandler()</code></dfn> + method allows Web sites to register themselves as possible handlers + for particular schemes. For example, an online fax service could + register itself as a handler of the <code>fax:</code> scheme (<a href="references.html#refsRFC2806">[RFC2806]</a>), so that if the user clicks on + such a link, he is given the opportunity to use that Web + site. Analogously, the <dfn id="dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler"><code>registerContentHandler()</code></dfn> + method allows Web sites to register themselves as possible handlers + for content in a particular <a href="infrastructure.html#mime-type">MIME type</a>. For example, the same online + fax service could register itself as a handler for + <code>image/g3fax</code> files (<a href="references.html#refsRFC1494">[RFC1494]</a>), so that if the user has no + native application capable of handling G3 Facsimile byte streams, + his Web browser can instead suggest he use that site to view the + image.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerProtocolHandler"><a href="#dom-navigator-registerprotocolhandler">registerProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>, <var title="">title</var>)</dt> + <dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerContentHandler"><a href="#dom-navigator-registercontenthandler">registerContentHandler</a></code>(<var title="">mimeType</var>, <var title="">url</var>, <var title="">title</var>)</dt> + + <dd> + + <p>Registers a handler for the given scheme or content type, at + the given URL, with the given title.</p> + + <p>The string "<code title="">%s</code>" in the URL is used as a + placeholder for where to put the URL of the content to be + handled.</p> + + <p>Throws a <code><a href="urls.html#security_err">SECURITY_ERR</a></code> exception if the user agent + blocks the registration (this might happen if trying to register + as a handler for "http", for instance).</p> + + <p>Throws a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> if the "<code title="">%s</code>" string is missing in the URL.</p> + + </dd> + + </dl><h4 id="manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">yieldForStorageUpdates</a></code>()</dt> + + <dd> + + <p>If a script uses the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> API, or the + <code title="dom-localStorage">localStorage</code> API, the + browser will block other scripts from accessing cookies or storage + until the first script finishes.</p> + + <p>Calling the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code> + method tells the user agent to unblock any other scripts that may + be blocked, even though the script hasn't returned.</p> + + <p>Values of cookies and items in the <code>Storage</code> objects + of <code title="dom-localStorage">localStorage</code> attributes + can change after calling this method, whence its name.</p> + + </dd> + + </dl></body></html> \ No newline at end of file Index: elements.html =================================================================== RCS file: /sources/public/html5/spec-author-view/elements.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- elements.html 3 Jan 2010 15:10:30 -0000 1.8 +++ elements.html 3 Jan 2010 15:15:05 -0000 1.9 @@ -0,0 +1,808 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>3.2 Elements — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="content-models.html" title="3.2.5 Content models" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </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="content-models.html">3.2.5 Content models →</a> + <ol class="toc"><li><ol><li><a href="elements.html#elements"><span class="secno">3.2 </span>Elements</a> + <ol><li><a href="elements.html#semantics-0"><span class="secno">3.2.1 </span>Semantics</a></li><li><a href="elements.html#elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</a></li><li><a href="elements.html#global-attributes"><span class="secno">3.2.3 </span>Global attributes</a> + <ol><li><a href="elements.html#the-id-attribute"><span class="secno">3.2.3.1 </span>The <code>id</code> attribute</a></li><li><a href="elements.html#the-title-attribute"><span class="secno">3.2.3.2 </span>The <code>title</code> attribute</a></li><li><a href="elements.html#the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang">lang</code> and <code title="attr-xml-lang">xml:lang</code> attributes</a></li><li><a href="elements.html#the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <code>xml:base</code> + attribute (XML only)</a></li><li><a href="elements.html#the-dir-attribute"><span class="secno">3.2.3.5 </span>The <code>dir</code> attribute</a></li><li><a href="elements.html#classes"><span class="secno">3.2.3.6 </span>The <code>class</code> attribute</a></li><li><a href="elements.html#the-style-attribute"><span class="secno">3.2.3.7 </span>The <code>style</code> attribute</a></li><li><a href="elements.html#embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span>Embedding custom non-visible data</a></li></ol></li><li><a href="elements.html#element-definitions"><span class="secno">3.2.4 </span>Element definitions</a></li></ol></li></ol></li></ol></div> + + <h3 id="elements"><span class="secno">3.2 </span>Elements</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="semantics-0"><span class="secno">3.2.1 </span>Semantics</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/41">ISSUE-41</a> (Decentralized-extensibility) blocks progress to Last Call</span></p><p>Elements, attributes, and attribute values in HTML are defined + (by this specification) to have certain meanings (semantics). For + example, the <code><a href="grouping-content.html#the-ol-element">ol</a></code> element represents an ordered list, and + the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute represents the + language of the content.</p><p>Authors must not use elements, attributes, and attribute values + for purposes other than their appropriate intended semantic + purpose. Authors must not use elements, attributes, and attribute + values that are not permitted by this specification or <a href="#other-applicable-specifications">other + applicable specifications</a>.</p><div class="example"> + <p>For example, the following document is non-conforming, despite + being syntactically correct:</p> + + <pre class="bad"><!DOCTYPE HTML> +<html lang="en-GB"> + <head> <title> Demonstration </title> </head> + <body> + <table> + <tr> <td> My favourite animal is the cat. </td> </tr> + <tr> + <td> + —<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>, + in an essay from 1992 + </td> + </tr> + </table> + </body> +</html></pre> + + <p>...because the data placed in the cells is clearly not tabular + data (and the <code><a href="text-level-semantics.html#the-cite-element">cite</a></code> element mis-used). A corrected + version of this document might be:</p> + + <pre><!DOCTYPE HTML> +<html lang="en-GB"> + <head> <title> Demonstration </title> </head> + <body> + <blockquote> + <p> My favourite animal is the cat. </p> + </blockquote> + <p> + —<a href="http://example.org/~ernest/">Ernest</a>, + in an essay from 1992 + </p> + </body> +</html></pre> + + <p>This next document fragment, intended to represent the heading + of a corporate site, is similarly non-conforming because the second + line is not intended to be a heading of a subsection, but merely a + subheading or subtitle (a subordinate heading for the same + section).</p> + + <pre class="bad"><body> + <h1>ABC Company</h1> + <h2>Leading the way in widget design since 1432</h2> + ...</pre> + + <p>The <code><a href="sections.html#the-hgroup-element">hgroup</a></code> element is intended for these kinds of + situations:</p> + + <pre><body> + <hgroup> + <h1>ABC Company</h1> + <h2>Leading the way in widget design since 1432</h2> + </hgroup> + ...</pre> + + <p>In the next example, there is a non-conforming attribute value + ("carpet") and a non-conforming attribute ("texture"), which + is not permitted by this specification:</p> + + <pre class="bad"><label>Carpet: <input type="carpet" name="c" texture="deep pile"></label></pre> + + <p>Here would be an alternative and correct way to mark this up:</p> + + <pre><label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label></pre> + + </div><p>Through scripting and using other mechanisms, the values of + attributes, text, and indeed the entire structure of the document + may change dynamically while a user agent is processing it. The + semantics of a document at an instant in time are those represented + by the state of the document at that instant in time, and the + semantics of a document can therefore change over time. User agents + must</p><p class="example">HTML has a <code><a href="text-level-semantics.html#the-progress-element">progress</a></code> element that + describes a progress bar. If its "value" attribute is dynamically + updated by a script, the UA would update the rendering to show the + progress changing.</p><h4 id="elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The nodes representing <a href="infrastructure.html#html-elements">HTML elements</a> in the DOM + implement, and expose to scripts, the + interfaces listed for them in the relevant sections of this + specification. This includes <a href="infrastructure.html#html-elements">HTML elements</a> in <a href="dom.html#xml-documents">XML + documents</a>, even when those documents are in another context + (e.g. inside an XSLT transform).</p><p>Elements in the DOM <a href="#represents" title="represents">represent</a> + things; that is, they have intrinsic <em>meaning</em>, also known as + semantics.</p><p class="example">For example, an <code><a href="grouping-content.html#the-ol-element">ol</a></code> element + represents an ordered list.</p><p>The basic interface, from which all the <a href="infrastructure.html#html-elements">HTML + elements</a>' interfaces inherit, is the <code><a href="#htmlelement">HTMLElement</a></code> interface.</p><pre class="idl">interface <dfn id="htmlelement">HTMLElement</dfn> : <span>Element</span> { + // <a href="dom.html#dom-tree-accessors">DOM tree accessors</a> + NodeList <a href="#dom-getelementsbyclassname" title="dom-getElementsByClassName">getElementsByClassName</a>(in DOMString classNames); + + // <a href="apis-in-html-documents.html#dynamic-markup-insertion">dynamic markup insertion</a> + attribute DOMString <a href="apis-in-html-documents.html#dom-innerhtml" title="dom-innerHTML">innerHTML</a>; + attribute DOMString <a href="apis-in-html-documents.html#dom-outerhtml" title="dom-outerHTML">outerHTML</a>; + void <a href="#dom-insertadjacenthtml" title="dom-insertAdjacentHTML">insertAdjacentHTML</a>(in DOMString position, in DOMString text); + + // <span>metadata attributes</span> + attribute DOMString <a href="#dom-id" title="dom-id">id</a>; + attribute DOMString <a href="#dom-title" title="dom-title">title</a>; + attribute DOMString <a href="#dom-lang" title="dom-lang">lang</a>; + attribute DOMString <a href="#dom-dir" title="dom-dir">dir</a>; + attribute <span>DOMString</span> <a href="#dom-classname" title="dom-className">className</a>; + readonly attribute <a href="urls.html#domtokenlist">DOMTokenList</a> <a href="#dom-classlist" title="dom-classList">classList</a>; + readonly attribute <a href="#domstringmap">DOMStringMap</a> <a href="#dom-dataset" title="dom-dataset">dataset</a>; + + // <a href="microdata.html#microdata">microdata</a> + attribute boolean <a href="#dom-itemscope" title="dom-itemScope">itemScope</a>; + attribute DOMString <a href="#dom-itemtype" title="dom-itemType">itemType</a>; + attribute DOMString <a href="#dom-itemid" title="dom-itemId">itemId</a>; + attribute DOMString <a href="#dom-itemref" title="dom-itemRef">itemRef</a>; + [PutForwards=<a href="#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>] readonly attribute <a href="urls.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-itemprop" title="dom-itemProp">itemProp</a>; + readonly attribute <a href="urls.html#htmlpropertiescollection">HTMLPropertiesCollection</a> <a href="#dom-properties" title="dom-properties">properties</a>; + attribute any <a href="#dom-itemvalue" title="dom-itemValue">itemValue</a>; + + // <a href="editing.html#editing">user interaction</a> + attribute boolean <a href="#dom-hidden" title="dom-hidden">hidden</a>; + void <a href="#dom-click" title="dom-click">click</a>(); + void <a href="#dom-scrollintoview" title="dom-scrollIntoView">scrollIntoView</a>(); + void <a href="#dom-scrollintoview" title="dom-scrollIntoView">scrollIntoView</a>(in boolean top); + attribute long <a href="#dom-tabindex" title="dom-tabindex">tabIndex</a>; + void <a href="#dom-focus" title="dom-focus">focus</a>(); + void <a href="#dom-blur" title="dom-blur">blur</a>(); + attribute DOMString <a href="#dom-accesskey" title="dom-accessKey">accessKey</a>; + readonly attribute DOMString <a href="#dom-accesskeylabel" title="dom-accessKeyLabel">accessKeyLabel</a>; + attribute boolean <a href="#dom-draggable" title="dom-draggable">draggable</a>; + attribute DOMString <a href="#dom-contenteditable" title="dom-contentEditable">contentEditable</a>; + readonly attribute boolean <a href="#dom-iscontenteditable" title="dom-isContentEditable">isContentEditable</a>; + attribute <a href="interactive-elements.html#htmlmenuelement">HTMLMenuElement</a> <a href="#dom-contextmenu" title="dom-contextMenu">contextMenu</a>; + attribute DOMString <a href="#dom-spellcheck" title="dom-spellcheck">spellcheck</a>; + + // <a href="commands.html#command-api">command API</a> + readonly attribute DOMString <a href="#dom-command-ro-commandtype" title="dom-command-ro-commandType">commandType</a>; + readonly attribute DOMString <a href="#dom-command-ro-label" title="dom-command-ro-label">label</a>; + readonly attribute DOMString <a href="#dom-command-ro-icon" title="dom-command-ro-icon">icon</a>; + readonly attribute boolean <a href="#dom-command-ro-disabled" title="dom-command-ro-disabled">disabled</a>; + readonly attribute boolean <a href="#dom-command-ro-checked" title="dom-command-ro-checked">checked</a>;<!-- v2COMMAND + readonly attribute <span>HTMLCollection</span> <span title="dom-command-ro-triggers">triggers</span>;--> + + // <span>styling</span> + readonly attribute <span>CSSStyleDeclaration</span> <a href="#dom-style" title="dom-style">style</a>; + + // <a href="#event-handler-idl-attributes">event handler IDL attributes</a> + attribute <a href="#function">Function</a> <a href="#handler-onabort" title="handler-onabort">onabort</a>; + attribute <a href="#function">Function</a> <a href="#handler-onblur" title="handler-onblur">onblur</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncanplay" title="handler-oncanplay">oncanplay</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>; + attribute <a href="#function">Function</a> <a href="#handler-onchange" title="handler-onchange">onchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onclick" title="handler-onclick">onclick</a>; + attribute <a href="#function">Function</a> <a href="#handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondblclick" title="handler-ondblclick">ondblclick</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondrag" title="handler-ondrag">ondrag</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragend" title="handler-ondragend">ondragend</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragenter" title="handler-ondragenter">ondragenter</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragleave" title="handler-ondragleave">ondragleave</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragover" title="handler-ondragover">ondragover</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondragstart" title="handler-ondragstart">ondragstart</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondrop" title="handler-ondrop">ondrop</a>; + attribute <a href="#function">Function</a> <a href="#handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onemptied" title="handler-onemptied">onemptied</a>; + attribute <a href="#function">Function</a> <a href="#handler-onended" title="handler-onended">onended</a>; + attribute <a href="#function">Function</a> <a href="#handler-onerror" title="handler-onerror">onerror</a>; + attribute <a href="#function">Function</a> <a href="#handler-onfocus" title="handler-onfocus">onfocus</a>; + attribute <a href="#function">Function</a> <a href="#handler-onformchange" title="handler-onformchange">onformchange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onforminput" title="handler-onforminput">onforminput</a>; + attribute <a href="#function">Function</a> <a href="#handler-oninput" title="handler-oninput">oninput</a>; + attribute <a href="#function">Function</a> <a href="#handler-oninvalid" title="handler-oninvalid">oninvalid</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeydown" title="handler-onkeydown">onkeydown</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeypress" title="handler-onkeypress">onkeypress</a>; + attribute <a href="#function">Function</a> <a href="#handler-onkeyup" title="handler-onkeyup">onkeyup</a>; + attribute <a href="#function">Function</a> <a href="#handler-onload" title="handler-onload">onload</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>; + attribute <a href="#function">Function</a> <a href="#handler-onloadstart" title="handler-onloadstart">onloadstart</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousedown" title="handler-onmousedown">onmousedown</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousemove" title="handler-onmousemove">onmousemove</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseout" title="handler-onmouseout">onmouseout</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseover" title="handler-onmouseover">onmouseover</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmouseup" title="handler-onmouseup">onmouseup</a>; + attribute <a href="#function">Function</a> <a href="#handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>; + attribute <a href="#function">Function</a> <a href="#handler-onpause" title="handler-onpause">onpause</a>; + attribute <a href="#function">Function</a> <a href="#handler-onplay" title="handler-onplay">onplay</a>; + attribute <a href="#function">Function</a> <a href="#handler-onplaying" title="handler-onplaying">onplaying</a>; + attribute <a href="#function">Function</a> <a href="#handler-onprogress" title="handler-onprogress">onprogress</a>; + attribute <a href="#function">Function</a> <a href="#handler-onratechange" title="handler-onratechange">onratechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onreadystatechange" title="handler-onreadystatechange">onreadystatechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onscroll" title="handler-onscroll">onscroll</a>; + attribute <a href="#function">Function</a> <a href="#handler-onseeked" title="handler-onseeked">onseeked</a>; + attribute <a href="#function">Function</a> <a href="#handler-onseeking" title="handler-onseeking">onseeking</a>; + attribute <a href="#function">Function</a> <a href="#handler-onselect" title="handler-onselect">onselect</a>; + attribute <a href="#function">Function</a> <a href="#handler-onshow" title="handler-onshow">onshow</a>; + attribute <a href="#function">Function</a> <a href="#handler-onstalled" title="handler-onstalled">onstalled</a>; + attribute <a href="#function">Function</a> <a href="#handler-onsubmit" title="handler-onsubmit">onsubmit</a>; + attribute <a href="#function">Function</a> <a href="#handler-onsuspend" title="handler-onsuspend">onsuspend</a>; + attribute <a href="#function">Function</a> <a href="#handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>; + attribute <a href="#function">Function</a> <a href="#handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>; + attribute <a href="#function">Function</a> <a href="#handler-onwaiting" title="handler-onwaiting">onwaiting</a>; +}; + +interface <dfn id="htmlunknownelement">HTMLUnknownElement</dfn> : <a href="#htmlelement">HTMLElement</a> { };</pre><p>The <code><a href="#htmlelement">HTMLElement</a></code> interface holds methods and + attributes related to a number of disparate features, and the + members of this interface are therefore described in various + different sections of this specification.</p><h4 id="global-attributes"><span class="secno">3.2.3 </span><dfn>Global attributes</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following attributes are common to and may be specified on + all <a href="infrastructure.html#html-elements">HTML elements</a>:</p><ul class="brief"><li><code title="attr-accesskey"><a href="editing.html#the-accesskey-attribute">accesskey</a></code></li> + <li><code title="attr-class"><a href="#classes">class</a></code></li> + <li><code title="attr-contenteditable"><a href="editing.html#attr-contenteditable">contenteditable</a></code></li> + <li><code title="attr-contextmenu"><a href="interactive-elements.html#attr-contextmenu">contextmenu</a></code></li> + <li><code title="attr-dir"><a href="#the-dir-attribute">dir</a></code></li> + <li><code title="attr-draggable"><a href="dnd.html#the-draggable-attribute">draggable</a></code></li> + <li><code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code></li> + <li><code title="attr-id"><a href="#the-id-attribute">id</a></code></li> + <li><code title="attr-itemid"><a href="microdata.html#attr-itemid">itemid</a></code></li> + <li><code title="attr-itemprop"><a href="microdata.html#names:-the-itemprop-attribute">itemprop</a></code></li> + <li><code title="attr-itemref"><a href="microdata.html#attr-itemref">itemref</a></code></li> + <li><code title="attr-itemscope"><a href="microdata.html#attr-itemscope">itemscope</a></code></li> + <li><code title="attr-itemtype"><a href="microdata.html#attr-itemtype">itemtype</a></code></li> + <li><code title="attr-lang"><a href="#attr-lang">lang</a></code></li> + <li><code title="attr-spellcheck"><a href="editing.html#attr-spellcheck">spellcheck</a></code></li> + <li><code title="attr-style"><a href="#the-style-attribute">style</a></code></li> + <li><code title="attr-tabindex"><a href="editing.html#attr-tabindex">tabindex</a></code></li> + <li><code title="attr-title"><a href="#the-title-attribute">title</a></code></li> + </ul><hr><p>The following <a href="browsers.html#event-handler-content-attributes">event handler content attributes</a> may + be specified on any <a href="infrastructure.html#html-elements" title="HTML elements">HTML + element</a>:</p><ul class="brief"><li><code title="handler-onabort"><a href="#handler-onabort">onabort</a></code></li> + <li><code title="handler-onblur"><a href="#handler-onblur">onblur</a></code>*</li> + <li><code title="handler-oncanplay"><a href="#handler-oncanplay">oncanplay</a></code></li> + <li><code title="handler-oncanplaythrough"><a href="#handler-oncanplaythrough">oncanplaythrough</a></code></li> + <li><code title="handler-onchange"><a href="#handler-onchange">onchange</a></code></li> + <li><code title="handler-onclick"><a href="#handler-onclick">onclick</a></code></li> + <li><code title="handler-oncontextmenu"><a href="#handler-oncontextmenu">oncontextmenu</a></code></li> + <li><code title="handler-ondblclick"><a href="#handler-ondblclick">ondblclick</a></code></li> + <li><code title="handler-ondrag"><a href="#handler-ondrag">ondrag</a></code></li> + <li><code title="handler-ondragend"><a href="#handler-ondragend">ondragend</a></code></li> + <li><code title="handler-ondragenter"><a href="#handler-ondragenter">ondragenter</a></code></li> + <li><code title="handler-ondragleave"><a href="#handler-ondragleave">ondragleave</a></code></li> + <li><code title="handler-ondragover"><a href="#handler-ondragover">ondragover</a></code></li> + <li><code title="handler-ondragstart"><a href="#handler-ondragstart">ondragstart</a></code></li> + <li><code title="handler-ondrop"><a href="#handler-ondrop">ondrop</a></code></li> + <li><code title="handler-ondurationchange"><a href="#handler-ondurationchange">ondurationchange</a></code></li> + <li><code title="handler-onemptied"><a href="#handler-onemptied">onemptied</a></code></li> + <li><code title="handler-onended"><a href="#handler-onended">onended</a></code></li> + <li><code title="handler-onerror"><a href="#handler-onerror">onerror</a></code>*</li> + <li><code title="handler-onfocus"><a href="#handler-onfocus">onfocus</a></code>*</li> + <li><code title="handler-onformchange"><a href="#handler-onformchange">onformchange</a></code></li> + <li><code title="handler-onforminput"><a href="#handler-onforminput">onforminput</a></code></li> + <li><code title="handler-oninput"><a href="#handler-oninput">oninput</a></code></li> + <li><code title="handler-oninvalid"><a href="#handler-oninvalid">oninvalid</a></code></li> + <li><code title="handler-onkeydown"><a href="#handler-onkeydown">onkeydown</a></code></li> + <li><code title="handler-onkeypress"><a href="#handler-onkeypress">onkeypress</a></code></li> + <li><code title="handler-onkeyup"><a href="#handler-onkeyup">onkeyup</a></code></li> + <li><code title="handler-onload"><a href="#handler-onload">onload</a></code>*</li> + <li><code title="handler-onloadeddata"><a href="#handler-onloadeddata">onloadeddata</a></code></li> + <li><code title="handler-onloadedmetadata"><a href="#handler-onloadedmetadata">onloadedmetadata</a></code></li> + <li><code title="handler-onloadstart"><a href="#handler-onloadstart">onloadstart</a></code></li> + <li><code title="handler-onmousedown"><a href="#handler-onmousedown">onmousedown</a></code></li> + <li><code title="handler-onmousemove"><a href="#handler-onmousemove">onmousemove</a></code></li> + <li><code title="handler-onmouseout"><a href="#handler-onmouseout">onmouseout</a></code></li> + <li><code title="handler-onmouseover"><a href="#handler-onmouseover">onmouseover</a></code></li> + <li><code title="handler-onmouseup"><a href="#handler-onmouseup">onmouseup</a></code></li> + <li><code title="handler-onmousewheel"><a href="#handler-onmousewheel">onmousewheel</a></code></li> + <li><code title="handler-onpause"><a href="#handler-onpause">onpause</a></code></li> + <li><code title="handler-onplay"><a href="#handler-onplay">onplay</a></code></li> + <li><code title="handler-onplaying"><a href="#handler-onplaying">onplaying</a></code></li> + <li><code title="handler-onprogress"><a href="#handler-onprogress">onprogress</a></code></li> + <li><code title="handler-onratechange"><a href="#handler-onratechange">onratechange</a></code></li> + <li><code title="handler-onreadystatechange"><a href="#handler-onreadystatechange">onreadystatechange</a></code></li> + <li><code title="handler-onscroll"><a href="#handler-onscroll">onscroll</a></code></li> + <li><code title="handler-onseeked"><a href="#handler-onseeked">onseeked</a></code></li> + <li><code title="handler-onseeking"><a href="#handler-onseeking">onseeking</a></code></li> + <li><code title="handler-onselect"><a href="#handler-onselect">onselect</a></code></li> + <li><code title="handler-onshow"><a href="#handler-onshow">onshow</a></code></li> + <li><code title="handler-onstalled"><a href="#handler-onstalled">onstalled</a></code></li> + <li><code title="handler-onsubmit"><a href="#handler-onsubmit">onsubmit</a></code></li> + <li><code title="handler-onsuspend"><a href="#handler-onsuspend">onsuspend</a></code></li> + <li><code title="handler-ontimeupdate"><a href="#handler-ontimeupdate">ontimeupdate</a></code></li> + <li><code title="handler-onvolumechange"><a href="#handler-onvolumechange">onvolumechange</a></code></li> + <li><code title="handler-onwaiting"><a href="#handler-onwaiting">onwaiting</a></code></li> + </ul><p class="note">The attributes marked with an asterisk have a + different meaning when specified on <code><a href="sections.html#the-body-element-0">body</a></code> elements as + those elements expose <a href="browsers.html#event-handlers">event handlers</a> of the + <code><a href="browsers.html#window">Window</a></code> object with the same names.</p><p class="note">While these attributes apply to all elements, they + are not useful on all elements. For example, only <a href="video.html#media-element" title="media + element">media elements</a> will ever receive a <code title="event-media-volumechange"><a href="video.html#event-media-volumechange">volumechange</a></code> event fired by + the user agent.</p><hr><p><a href="#custom-data-attribute" title="custom data attribute">Custom data attributes</a> + (e.g. <code title="">data-foldername</code> or <code title="">data-msgid</code>) can be specified on any <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a>, to store custom data + specific to the page.</p><hr><p>In <a href="dom.html#html-documents">HTML documents</a>, elements in the <a href="#html-namespace-0">HTML + namespace</a> may have an <code title="">xmlns</code> attribute + specified, if, and only if, it has the exact value + "<code>http://www.w3.org/1999/xhtml</code>". This does not apply to + <a href="dom.html#xml-documents">XML documents</a>.</p><p class="note">In HTML, the <code title="">xmlns</code> attribute + has absolutely no effect. It is basically a talisman. It is allowed + merely to make migration to and from XHTML mildly easier. When + parsed by an <a href="#html-parser">HTML parser</a>, the attribute ends up in no + namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>" + namespace like namespace declaration attributes in XML do.</p><p class="note">In XML, an <code title="">xmlns</code> attribute is + part of the namespace declaration mechanism, and an element cannot + actually have an <code title="">xmlns</code> attribute in no + namespace specified.</p><hr><p>To enable assistive technology products to expose a more + fine-grained interface than is otherwise possible with HTML elements + and attributes, a set of <a href="content-models.html#annotations-for-assistive-technology-products-aria">annotations for assistive technology + products</a> can be specified.</p><h5 id="the-id-attribute"><span class="secno">3.2.3.1 </span>The <dfn title="attr-id"><code>id</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute specifies its + element's <dfn id="concept-id" title="concept-id">unique identifier (ID)</dfn>. The + value must be unique amongst all the IDs in the element's <a href="infrastructure.html#home-subtree">home + subtree</a> and must contain at least one character. The value + must not contain any <a href="#space-character" title="space character">space + characters</a>.</p><!-- space characters are disallowed because space-separated lists + of IDs otherwise would not be able to reach all valid IDs --><p class="note">An element's <a href="#concept-id" title="concept-id">unique + identifier</a> can be used for a variety of purposes, most + notably as a way to link to specific parts of a document using + fragment identifiers, as a way to target an element when scripting, + and as a way to style a specific element from CSS.</p><h5 id="the-title-attribute"><span class="secno">3.2.3.2 </span>The <dfn title="attr-title"><code>title</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute + <a href="#represents">represents</a> advisory information for the element, such + as would be appropriate for a tooltip. On a link, this could be the + title or a description of the target resource; on an image, it could + be the image credit or a description of the image; on a paragraph, + it could be a footnote or commentary on the text; on a citation, it + could be further information about the source; and so forth. The + value is text.</p><p>If this attribute is omitted from an element, then it implies + that the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute of the + nearest ancestor <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> + with a <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute set is also + relevant to this element. Setting the attribute overrides this, + explicitly stating that the advisory information of any ancestors is + not relevant to this element. Setting the attribute to the empty + string indicates that the element has no advisory information.</p><p>If the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute's value + contains U+000A LINE FEED (LF) characters, the content is split into + multiple lines. Each U+000A LINE FEED (LF) character represents a + line break.</p><div class="example"> + + <p>Caution is advised with respect to the use of newlines in <code title="attr-title"><a href="#the-title-attribute">title</a></code> attributes.</p> + + <p>For instance, the following snippet actually defines an + abbreviation's expansion <em>with a line break in it</em>:</p> + + <pre class="bad"><p>My logs show that there was some interest in <abbr title="Hypertext +Transport Protocol">HTTP</abbr> today.</p></pre> + + </div><p>Some elements, such as <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-abbr-element">abbr</a></code>, and + <code><a href="the-input-element.html#the-input-element">input</a></code>, define additional semantics for the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute beyond the semantics + described above.</p><h5 id="the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> and <code title="attr-xml-lang"><a href="#attr-xml-lang">xml:lang</a></code> attributes</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-lang" title="attr-lang"><code>lang</code></dfn> attribute (in + no namespace) specifies the primary <dfn id="language">language</dfn> for the + element's contents and for any of the element's attributes that + contain text. Its value must be a valid BCP 47 language code, or + the empty string. <a href="references.html#refsBCP47">[BCP47]</a></p><p>The <dfn id="attr-xml-lang" title="attr-xml-lang"><code title="">lang</code></dfn> + attribute in the <a href="#xml-namespace">XML namespace</a> is defined in XML. <a href="references.html#refsXML">[XML]</a></p><p>If these attributes are omitted from an element, then the + language of this element is the same as the language of its parent + element, if any. Setting the attribute to the empty string indicates + that the primary language is unknown.</p><!-- UA conformance + requires for this are below --><p>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute in no namespace + may be used on any <a href="infrastructure.html#html-elements" title="HTML elements">HTML + element</a>.</p><p>The <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> + attribute in the <span>XML namespace</span></a> may be used on + <a href="infrastructure.html#html-elements">HTML elements</a> in <a href="dom.html#xml-documents">XML documents</a>, as well as + elements in other namespaces if the relevant specifications allow it + (in particular, MathML and SVG allow <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attributes in the + <span>XML namespace</span></a> to be specified on their + elements). If both the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute + in no namespace and the <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attribute in the <span>XML + namespace</span></a> are specified on the same element, they must + have exactly the same value when compared in an <a href="infrastructure.html#ascii-case-insensitive">ASCII + case-insensitive</a> manner.</p><p>Authors must not use the <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attribute in the <span>XML + namespace</span></a> on <a href="infrastructure.html#html-elements">HTML elements</a> in <a href="dom.html#html-documents">HTML + documents</a>. To ease migration to and from XHTML, authors may + specify an attribute in no namespace with no prefix and with the + literal localname "<code title="">xml:lang</code>" on <a href="infrastructure.html#html-elements">HTML + elements</a> in <a href="dom.html#html-documents">HTML documents</a>, but such attributes + must only be specified if a <code title="attr-lang"><a href="#attr-lang">lang</a></code> + attribute in no namespace is also specified, and both attributes + must have the same value when compared in an <a href="infrastructure.html#ascii-case-insensitive">ASCII + case-insensitive</a> manner.</p><p class="note">The attribute in no namespace with no prefix and + with the literal localname "<code title="">xml:lang</code>" has no + effect on language processing.</p><h5 id="the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <dfn title="attr-xml-base"><code>xml:base</code></dfn> + attribute (XML only)</h5><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute is + defined in XML Base. <a href="references.html#refsXMLBASE">[XMLBASE]</a></p><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute may be + used on elements of <a href="dom.html#xml-documents">XML documents</a>. Authors must not + use the <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute in + <a href="dom.html#html-documents">HTML documents</a>.</p><h5 id="the-dir-attribute"><span class="secno">3.2.3.5 </span>The <dfn title="attr-dir"><code>dir</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute specifies the + element's text directionality. The attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated + attribute</a> with the keyword <code title="">ltr</code> mapping + to the state <i>ltr</i>, and the keyword <code title="">rtl</code> + mapping to the state <i>rtl</i>. The attribute has no + defaults.</p><p><dfn id="the-directionality">The directionality</dfn> of an element, which is used in + particular by the <code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code> element's text rendering API, + is either 'ltr' or 'rtl'. If the user agent supports CSS and the + 'direction' property on this element has a computed value of either + 'ltr' or 'rtl', then that is <a href="#the-directionality">the directionality</a> of the + element. Otherwise, if the element is <a href="#being-rendered">being rendered</a>, + then <a href="#the-directionality">the directionality</a> of the element is the + directionality used by the presentation layer, potentially + determined from the value of the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> + attribute on the element. Otherwise, if the element's <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute has the state <i>ltr</i>, the + element's directionality is 'ltr' (left-to-right); if the attribute + has the state <i>rtl</i>, the element's directionality is 'rtl' + (right-to-left); and otherwise, the element's directionality is the + same as its parent element, or 'ltr' if there is no parent + element.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-dir"><a href="#dom-dir">dir</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns <a href="dom.html#the-html-element">the <code>html</code> element</a>'s <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute's value, if any.</p> + <p>Can be set, to either "<code title="">ltr</code>" or "<code title="">rtl</code>", to replace <a href="dom.html#the-html-element">the <code>html</code> element</a>'s <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute's value.</p> + <p>If there is no <a href="dom.html#the-html-element" title="the html element"><code>html</code> element</a>, returns the empty string and ignores new values.</p> + </dd> + + </dl><p class="note">Authors are strongly encouraged to use the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute to indicate text direction + rather than using CSS, since that way their documents will continue + to render correctly even in the absence of CSS (e.g. as interpreted + by search engines).</p><h5 id="classes"><span class="secno">3.2.3.6 </span>The <dfn title="attr-class"><code>class</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Every <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> may have a + <code title="attr-class"><a href="#classes">class</a></code> attribute specified.</p><p>The attribute, if specified, must have a value that is a + <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set of space-separated tokens</a> representing the various + classes that the element belongs to.</p><p class="note">Assigning classes to an element affects class + matching in selectors in CSS, the <code title="dom-document-getElementsByClassName"><a href="#dom-document-getelementsbyclassname">getElementsByClassName()</a></code> + method in the DOM, and other such features.</p><p>There are no additional restrictions on the tokens authors can + use in the <code title="attr-class"><a href="#classes">class</a></code> attribute, but + authors are encouraged to use values that describe the nature of the + content, rather than values that describe the desired presentation + of the content.</p><h5 id="the-style-attribute"><span class="secno">3.2.3.7 </span>The <dfn title="attr-style"><code>style</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All <a href="infrastructure.html#html-elements">HTML elements</a> may have the <code title="attr-style"><a href="#the-style-attribute">style</a></code> content attribute set. If specified, + the attribute must contain only a list of zero or more + semicolon-separated (;) CSS declarations. <a href="references.html#refsCSS">[CSS]</a></p><p>Documents that use <code title="attr-style"><a href="#the-style-attribute">style</a></code> + attributes on any of their elements must still be comprehensible and + usable if those attributes were removed.</p><p class="note">In particular, using the <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute to hide and show content, + or to convey meaning that is otherwise not included in the document, + is non-conforming. (To hide and show content, use the <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute.)</p><hr><dl class="domintro"><dt><var title="">element</var> . <code title="dom-style"><a href="#dom-style">style</a></code></dt> + <dd> + <p>Returns a <code>CSSStyleDeclaration</code> object for the element's <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute.</p> + </dd> + + </dl><div class="example"> + + <p>In the following example, the words that refer to colors are + marked up using the <code><a href="text-level-semantics.html#the-span-element">span</a></code> element and the <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute to make those words show + up in the relevant colors in visual media.</p> + + <pre><p>My sweat suit is <span style="color: green; background: +transparent">green</span> and my eyes are <span style="color: blue; +background: transparent">blue</span>.</p></pre> + + </div><h5 id="embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span><dfn>Embedding custom non-visible data</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="custom-data-attribute">custom data attribute</dfn> is an attribute in no + namespace whose name starts with the string "<dfn id="attr-data" title="attr-data-*"><code>data-</code></dfn>", has at least one + character after the hyphen, is <a href="infrastructure.html#xml-compatible">XML-compatible</a>, and + contains no characters in the range U+0041 to U+005A (LATIN CAPITAL + LETTER A to LATIN CAPITAL LETTER Z).</p><p class="note">All attributes on <a href="infrastructure.html#html-elements">HTML elements</a> in + <a href="dom.html#html-documents">HTML documents</a> get ASCII-lowercased automatically, so + the restriction on ASCII uppercase letters doesn't affect such + documents.</p><p><a href="#custom-data-attribute" title="custom data attribute">Custom data attributes</a> + are intended to store custom data private to the page or + application, for which there are no more appropriate attributes or + elements.</p><p>These attributes are not intended for use by software that is + independent of the site that uses the attributes.</p><div class="example"> + + <p>For instance, a site about music could annotate list items + representing tracks in an album with custom data attributes + containing the length of each track. This information could then be + used by the site itself to allow the user to sort the list by track + length, or to filter the list for tracks of certain lengths.</p> + + <pre><ol> + <li data-length="2m11s">Beyond The Sea</li> + ... +</ol></pre> + + <p>It would be inappropriate, however, for the user to use generic + software not associated with that music site to search for tracks + of a certain length by looking at this data.</p> + + <p>This is because these attributes are intended for use by the + site's own scripts, and are not a generic extension mechanism for + publicly-usable metadata.</p> + + </div><p>Every <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> may have + any number of <a href="#custom-data-attribute" title="custom data attribute">custom data + attributes</a> specified, with any value.</p><hr><dl class="domintro"><dt><var title="">element</var> . <code title="dom-dataset"><a href="#dom-dataset">dataset</a></code></dt> + <dd> + <p>Returns a <code><a href="#domstringmap">DOMStringMap</a></code> object for the element's <code title="attr-data-*"><a href="#attr-data">data-*</a></code> attributes.</p> + </dd> + + </dl><div class="example"> + + <p>If a Web page wanted an element to represent a space ship, + e.g. as part of a game, it would have to use the <code class="attr-class">class</code> attribute along with <code title="attr-data-*"><a href="#attr-data">data-*</a></code> attributes:</p> + + <pre><div class="spaceship" data-id="92432" + data-weapons="laser 2" data-shields="50%" + data-x="30" data-y="10" data-z="90"> + <button class="fire" + onclick="spaceships[this.parentNode.dataset.id].fire()"> + Fire + </button> +</div></pre> + + </div><p>Authors should carefully design such extensions so that when the + attributes are ignored and any associated CSS dropped, the page is + still usable.</p><h4 id="element-definitions"><span class="secno">3.2.4 </span>Element definitions</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Each element in this specification has a definition that includes + the following information:</p><dl><dt>Categories</dt> + + <dd>A list of <a href="content-models.html#content-categories" title="content categories">categories</a> to + which the element belongs. These are used when defining the + <a href="content-models.html#content-models">content models</a> for each element.</dd> + + + <dt>Contexts in which this element may be used</dt> + + <dd>A <em>non-normative</em> description of where the element can + be used. This information is redundant with the content models of + elements that allow this one as a child, and is provided only as a + convenience.</dd> + + + <dt>Content model</dt> + + <dd>A normative description of what content must be included as + children and descendants of the element.</dd> + + + <dt>Content attributes</dt> + + <dd>A normative list of attributes that may be specified on the + element.</dd> + + + <dt>DOM interface</dt> + + <dd>A normative definition of a DOM interface that such elements + must implement.</dd> + + </dl><p>This is then followed by a description of what the element + <a href="#represents">represents</a>, along with any additional normative + conformance criteria that may apply to authors. Examples are sometimes + also included.</p></body></html> \ No newline at end of file Index: urls.html =================================================================== RCS file: /sources/public/html5/spec-author-view/urls.html,v retrieving revision 1.8 retrieving revision 1.9 diff -u -d -r1.8 -r1.9 --- urls.html 3 Jan 2010 15:08:16 -0000 1.8 +++ urls.html 3 Jan 2010 15:15:07 -0000 1.9 @@ -0,0 +1,717 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>2.5 URLs — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="common-microsyntaxes.html" title="2.4 Common microsyntaxes" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="common-microsyntaxes.html">← 2.4 Common microsyntaxes</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="dom.html">3 Semantics, structure, and APIs of HTML documents →</a> + <ol class="toc"><li><ol><li><a href="urls.html#urls"><span class="secno">2.5 </span>URLs</a> + <ol><li><a href="urls.html#terminology-0"><span class="secno">2.5.1 </span>Terminology</a></li><li><a href="urls.html#interfaces-for-url-manipulation"><span class="secno">2.5.2 </span>Interfaces for URL manipulation</a></li></ol></li><li><a href="urls.html#common-dom-interfaces"><span class="secno">2.6 </span>Common DOM interfaces</a> + <ol><li><a href="urls.html#reflecting-content-attributes-in-idl-attributes"><span class="secno">2.6.1 </span>Reflecting content attributes in IDL attributes</a></li><li><a href="urls.html#collections-0"><span class="secno">2.6.2 </span>Collections</a> + <ol><li><a href="urls.html#htmlcollection-0"><span class="secno">2.6.2.1 </span>HTMLCollection</a></li><li><a href="urls.html#htmlallcollection-0"><span class="secno">2.6.2.2 </span>HTMLAllCollection</a></li><li><a href="urls.html#htmlformcontrolscollection-0"><span class="secno">2.6.2.3 </span>HTMLFormControlsCollection</a></li><li><a href="urls.html#htmloptionscollection-0"><span class="secno">2.6.2.4 </span>HTMLOptionsCollection</a></li><li><a href="urls.html#htmlpropertiescollection-0"><span class="secno">2.6.2.5 </span>HTMLPropertiesCollection</a></li></ol></li><li><a href="urls.html#domtokenlist-0"><span class="secno">2.6.3 </span>DOMTokenList</a></li><li><a href="urls.html#domsettabletokenlist-0"><span class="secno">2.6.4 </span>DOMSettableTokenList</a></li><li><a href="urls.html#domstringmap-0"><span class="secno">2.6.5 </span>DOMStringMap</a></li><li><a href="urls.html#dom-feature-strings"><span class="secno">2.6.6 </span>DOM feature strings</a></li><li><a href="urls.html#exceptions"><span class="secno">2.6.7 </span>Exceptions</a></li></ol></li></ol></li></ol></div> + + <h3 id="urls"><span class="secno">2.5 </span>URLs</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/56">ISSUE-56</a> (urls-webarch) blocks progress to Last Call</span></p><h4 id="terminology-0"><span class="secno">2.5.1 </span>Terminology</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="url">URL</dfn> is a string used to identify a resource.</p><p>A <a href="#url">URL</a> is a <dfn id="valid-url">valid URL</dfn> if it is a + <span>valid Web address</span> as defined by the Web addresses + specification. <a href="references.html#refsWEBADDRESSES">[WEBADDRESSES]</a></p><p>A <a href="#url">URL</a> is an <dfn id="absolute-url">absolute URL</dfn> if it is an + <span>absolute Web address</span> as defined by the Web addresses + specification. <a href="references.html#refsWEBADDRESSES">[WEBADDRESSES]</a></p><p class="note">The term "URL" in this specification is used in a + manner distinct from the precise technical meaning it is given in + RFC 3986. Readers familiar with that RFC will find it easier to read + <em>this</em> specification if they pretend the term "URL" as used + herein is really called something else altogether. This is a + <a href="introduction.html#willful-violation">willful violation</a> of RFC 3986. <a href="references.html#refsRFC3986">[RFC3986]</a></p><h4 id="interfaces-for-url-manipulation"><span class="secno">2.5.2 </span>Interfaces for URL manipulation</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>An interface that has a complement of <dfn id="url-decomposition-idl-attributes">URL decomposition IDL + attributes</dfn> will have seven attributes with the following + definitions:</p><pre class="idl extract"> attribute DOMString <a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a>; + attribute DOMString <a href="#dom-uda-host" title="dom-uda-host">host</a>; + attribute DOMString <a href="#dom-uda-hostname" title="dom-uda-hostname">hostname</a>; + attribute DOMString <a href="#dom-uda-port" title="dom-uda-port">port</a>; + attribute DOMString <a href="#dom-uda-pathname" title="dom-uda-pathname">pathname</a>; + attribute DOMString <a href="#dom-uda-search" title="dom-uda-search">search</a>; + attribute DOMString <a href="#dom-uda-hash" title="dom-uda-hash">hash</a>;</pre><dl class="domintro"><dt><var title="">o</var> . <code title="dom-uda-protocol"><a href="#dom-uda-protocol">protocol</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current scheme of the underlying URL.</p> + <p>Can be set, to change the underlying URL's scheme.</p> + </dd> + + <dt><var title="">o</var> . <code title="dom-uda-host"><a href="#dom-uda-host">host</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current host and port (if it's not the default port) in the underlying URL.</p> + <p>Can be set, to change the underlying URL's host and port.</p> + <p>The host and the port are separated by a colon. The port part, + if omitted, will be assumed to be the current scheme's default + port.</p> + </dd> + + <dt><var title="">o</var> . <code title="dom-uda-hostname"><a href="#dom-uda-hostname">hostname</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current host in the underlying URL.</p> + <p>Can be set, to change the underlying URL's host.</p> + </dd> + + <dt><var title="">o</var> . <code title="dom-uda-port"><a href="#dom-uda-port">port</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current port in the underlying URL.</p> + <p>Can be set, to change the underlying URL's port.</p> + </dd> + + <dt><var title="">o</var> . <code title="dom-uda-pathname"><a href="#dom-uda-pathname">pathname</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current path in the underlying URL.</p> + <p>Can be set, to change the underlying URL's path.</p> + </dd> + + <dt><var title="">o</var> . <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current query component in the underlying URL.</p> + <p>Can be set, to change the underlying URL's query component.</p> + </dd> + + <dt><var title="">o</var> . <code title="dom-uda-hash"><a href="#dom-uda-hash">hash</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the current fragment identifier in the underlying URL.</p> + <p>Can be set, to change the underlying URL's fragment identifier.</p> + </dd> + + </dl><div class="example"> + + <p>The table below demonstrates how the getter condition<code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> results in different results + depending on the exact original syntax of the URL:</p> + + <table><thead><tr><th> Input URL + </th><th> <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> value + </th><th> Explanation + </th></tr></thead><tbody><tr><td> <code title="">http://example.com/</code> + </td><td> <i>empty string</i> + </td><td> No <a href="#url-query" title="url-query"><query></a> component in input URL. + </td></tr><tr><td> <code title="">http://example.com/?</code> + </td><td> <code title="">?</code> + </td><td> There is a <a href="#url-query" title="url-query"><query></a> component, but it is empty. + + </td></tr><tr><td> <code title="">http://example.com/?test</code> + </td><td> <code title="">?test</code> + </td><td> The <a href="#url-query" title="url-query"><query></a> component has the value "<code title="">test</code>". + </td></tr><tr><td> <code title="">http://example.com/?test#</code> + </td><td> <code title="">?test</code> + </td><td> The (empty) <a href="#url-fragment" title="url-fragment"><fragment></a> component is not part of the <a href="#url-query" title="url-query"><query></a> component. + </td></tr></tbody></table></div><h3 id="common-dom-interfaces"><span class="secno">2.6 </span>Common DOM interfaces</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="reflecting-content-attributes-in-idl-attributes"><span class="secno">2.6.1 </span>Reflecting content attributes in IDL attributes</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some IDL attributes are defined to <dfn id="reflect">reflect</dfn> a + particular content attribute. This means that on getting, the IDL + attribute returns the current value of the content attribute, and on + setting, the IDL attribute changes the value of the content + attribute to the given value.</p><!-- v2 for completeness: (also search for REFLECTIDL) + <p class="note">A list of <span>reflecting IDL attributes</span> and + their corresponding content attributes is given in the index.</p> +--><h4 id="collections-0"><span class="secno">2.6.2 </span>Collections</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlcollection">HTMLCollection</a></code>, <code><a href="#htmlallcollection">HTMLAllCollection</a></code>, + <code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code>, + <code><a href="#htmloptionscollection">HTMLOptionsCollection</a></code>, and + <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> interfaces represent various + lists of DOM nodes. Collectively, objects implementing these + interfaces are called <dfn id="collections">collections</dfn>.</p><p>When a <a href="#collections" title="collections">collection</a> is created, a + filter and a root are associated with the collection.</p><p class="example">For example, when the <code><a href="#htmlcollection">HTMLCollection</a></code> + object for the <code title="dom-document-images"><a href="#dom-document-images">document.images</a></code> attribute is + created, it is associated with a filter that selects only + <code><a href="embedded-content-1.html#the-img-element">img</a></code> elements, and rooted at the root of the + document.</p><p>The <a href="#collections" title="collections">collection</a> then <dfn id="represented-by-the-collection" title="represented by the collection">represents</dfn> a + <a href="infrastructure.html#live">live</a> view of the subtree rooted at the collection's + root, containing only nodes that match the given filter. The view is + linear. </p><h5 id="htmlcollection-0"><span class="secno">2.6.2.1 </span>HTMLCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlcollection">HTMLCollection</a></code> interface represents a generic + <a href="#collections" title="collections">collection</a> of elements.</p><pre class="idl">interface <dfn id="htmlcollection">HTMLCollection</dfn> { + readonly attribute unsigned long <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a>; + caller getter object <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>(in unsigned long index); // only returns Element + caller getter object <a href="#dom-htmlcollection-nameditem" title="dom-HTMLCollection-namedItem">namedItem</a>(in DOMString name); // only returns Element<!-- + (removed on the assuption that browsers will remove support:) + https://bugs.webkit.org/show_bug.cgi?id=30695 + https://bugs.opera.com/browse/CORE-25171 + <span>HTMLAllCollection</span> <span title="dom-HTMLCollection-tags">tags</span>(in DOMString tagName);--> +};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt> + <dd> + <p>Returns the number of elements in the collection.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">collection</var>[<var title="">index</var>]</dt> + <dt><var title="">collection</var>(<var title="">index</var>)</dt> + <dd> + <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p> + <p>Returns null if <var title="">index</var> is out of range.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">collection</var>[<var title="">name</var>]</dt> + <dt><var title="">collection</var>(<var title="">name</var>)</dt> + <dd> + <p>Returns the first item with <a href="elements.html#concept-id" title="concept-id">ID</a> or name <var title="">name</var> + from the collection.</p> + <p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or name could be found.</p> + <p>Only <code><a href="text-level-semantics.html#the-a-element">a</a></code>, <code><a href="#the-applet-element">applet</a></code>, <code><a href="the-map-element.html#the-area-element">area</a></code>, + <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="forms.html#the-form-element">form</a></code>, <code><a href="#frame">frame</a></code>, + <code><a href="#frameset">frameset</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="embedded-content-1.html#the-img-element">img</a></code>, and + <code><a href="the-iframe-element.html#the-object-element">object</a></code> elements can have a name for the purpose of + this method; their name is given by the value of their <code title="">name</code> attribute.</p> + </dd> +<!--(see IDL) + <dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-tags">tags</code>(<var title="">tagName</var>)</dt> + <dd> + <p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p> + </dd> +--> + </dl><h5 id="htmlallcollection-0"><span class="secno">2.6.2.2 </span>HTMLAllCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlallcollection">HTMLAllCollection</a></code> interface represents a generic + <a href="#collections" title="collections">collection</a> of elements just like + <code><a href="#htmlcollection">HTMLCollection</a></code>, with the exception that its <code title="dom-HTMLAllCollection-namedItem"><a href="#dom-htmlallcollection-nameditem">namedItem()</a></code> method + returns an <code><a href="#htmlcollection">HTMLCollection</a></code> object when there are + multiple matching elements.</p><pre class="idl">interface <dfn id="htmlallcollection">HTMLAllCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> { + // inherits <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a> and <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>() + caller getter object <a href="#dom-htmlallcollection-nameditem" title="dom-HTMLAllCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem() + <a href="#htmlallcollection">HTMLAllCollection</a> <a href="#dom-htmlallcollection-tags" title="dom-HTMLAllCollection-tags">tags</a>(in DOMString tagName); +};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt> + <dd> + <p>Returns the number of elements in the collection.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">collection</var>[<var title="">index</var>]</dt> + <dt><var title="">collection</var>(<var title="">index</var>)</dt> + <dd> + <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p> + <p>Returns null if <var title="">index</var> is out of range.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-namedItem"><a href="#dom-htmlallcollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-namedItem"><a href="#dom-htmlallcollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">collection</var>[<var title="">name</var>]</dt> + <dt><var title="">collection</var>(<var title="">name</var>)</dt> + <dd> + <p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or name <var title="">name</var> from the collection.</p> + <p>If there are multiple matching items, then an <code><a href="#htmlallcollection">HTMLAllCollection</a></code> object containing all those elements is returned.</p> + <p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or name could be found.</p> + <p>Only <code><a href="text-level-semantics.html#the-a-element">a</a></code>, <code><a href="#the-applet-element">applet</a></code>, <code><a href="the-map-element.html#the-area-element">area</a></code>, + <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="forms.html#the-form-element">form</a></code>, <code><a href="#frame">frame</a></code>, + <code><a href="#frameset">frameset</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="embedded-content-1.html#the-img-element">img</a></code>, and + <code><a href="the-iframe-element.html#the-object-element">object</a></code> elements can have a name for the purpose of + this method; their name is given by the value of their <code title="">name</code> attribute.</p> + </dd> + + <dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-tags"><a href="#dom-htmlallcollection-tags">tags</a></code>(<var title="">tagName</var>)</dt> + <dd> + <p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p> + </dd> + + </dl><h5 id="htmlformcontrolscollection-0"><span class="secno">2.6.2.3 </span>HTMLFormControlsCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code> interface represents + a <a href="#collections" title="collections">collection</a> of <a href="forms.html#category-listed" title="category-listed">listed</a> elements in <code><a href="forms.html#the-form-element">form</a></code> + and <code><a href="forms.html#the-fieldset-element">fieldset</a></code> elements.</p><pre class="idl">interface <dfn id="htmlformcontrolscollection">HTMLFormControlsCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> { + // inherits <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a> and <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>() + caller getter object <a href="#dom-htmlformcontrolscollection-nameditem" title="dom-HTMLFormControlsCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem() +}; + +interface <dfn id="radionodelist">RadioNodeList</dfn> : <span>NodeList</span> { + attribute DOMString <a href="#dom-radionodelist-value" title="dom-RadioNodeList-value">value</a>; +};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt> + <dd> + <p>Returns the number of elements in the collection.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">collection</var>[<var title="">index</var>]</dt> + <dt><var title="">collection</var>(<var title="">index</var>)</dt> + <dd> + <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p> + <p>Returns null if <var title="">index</var> is out of range.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLFormControlsCollection-namedItem"><a href="#dom-htmlformcontrolscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">radioNodeList</var> = <var title="">collection</var> . <code title="dom-HTMLFormControlsCollection-namedItem"><a href="#dom-htmlformcontrolscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">collection</var>[<var title="">name</var>]</dt> + <dt><var title="">collection</var>(<var title="">name</var>)</dt> + <dd> + <p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> <var title="">name</var> from the collection.</p> + <p>If there are multiple matching items, then a <code><a href="#radionodelist">RadioNodeList</a></code> object containing all those elements is returned.</p> + <p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> could be found.</p> + </dd> + + <dt><var title="">radioNodeList</var> . <var title="">value</var> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the value of the first checked radio button represented by the object.</p> + <p>Can be set, to check the first radio button with the given value represented by the object.</p> + </dd> + + </dl><h5 id="htmloptionscollection-0"><span class="secno">2.6.2.4 </span>HTMLOptionsCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmloptionscollection">HTMLOptionsCollection</a></code> interface represents a + list of <code><a href="the-button-element.html#the-option-element">option</a></code> elements. It is always rooted on a + <code><a href="the-button-element.html#the-select-element">select</a></code> element and has attributes and methods that + manipulate that element's descendants.</p><pre class="idl">interface <dfn id="htmloptionscollection">HTMLOptionsCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> { + // inherits <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>() + attribute unsigned long <a href="#dom-htmloptionscollection-length" title="dom-HTMLOptionsCollection-length">length</a>; // overrides inherited length + caller getter object <a href="#dom-htmloptionscollection-nameditem" title="dom-HTMLOptionsCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem() + void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(in <a href="elements.html#htmlelement">HTMLElement</a> element, in optional <a href="elements.html#htmlelement">HTMLElement</a> before); + void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(in <a href="elements.html#htmlelement">HTMLElement</a> element, in long before); + void <a href="#dom-htmloptionscollection-remove" title="dom-HTMLOptionsCollection-remove">remove</a>(in long index); +};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-length"><a href="#dom-htmloptionscollection-length">length</a></code> [ = <var title="">value</var> ]</dt> + <dd> + <p>Returns the number of elements in the collection.</p> + <p>When set to a smaller number, truncates the number of <code><a href="the-button-element.html#the-option-element">option</a></code> elements in the corresponding container.</p> + <p>When set to a greater number, adds new blank <code><a href="the-button-element.html#the-option-element">option</a></code> elements to that container.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">collection</var>[<var title="">index</var>]</dt> + <dt><var title="">collection</var>(<var title="">index</var>)</dt> + <dd> + <p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p> + <p>Returns null if <var title="">index</var> is out of range.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLOptionsCollection-namedItem"><a href="#dom-htmloptionscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">nodeList</var> = <var title="">collection</var> . <code title="dom-HTMLOptionsCollection-namedItem"><a href="#dom-htmloptionscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">collection</var>[<var title="">name</var>]</dt> + <dt><var title="">collection</var>(<var title="">name</var>)</dt> + <dd> + <p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-option-name">name</code> <var title="">name</var> from the collection.</p> + <p>If there are multiple matching items, then a <code>NodeList</code> object containing all those elements is returned.</p> + <p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> could be found.</p> + </dd> + + <dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-add"><a href="#dom-htmloptionscollection-add">add</a></code>(<var title="">element</var> [, <var title="">before</var> ] )</dt> + <dd> + <p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p> + <p>The <var title="">before</var> argument can be a number, in + which case <var title="">element</var> is inserted before the item + with that number, or an element from the collection, in which case + <var title="">element</var> is inserted before that element.</p> + <p>If <var title="">before</var> is omitted, null, or a number out + of range, then <var title="">element</var> will be added at the + end of the list.</p> + <p>This method will throw a <code><a href="#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> + exception if <var title="">element</var> is an ancestor of the + element into which it is to be inserted. If <var title="">element</var> is not an <code><a href="the-button-element.html#the-option-element">option</a></code> or + <code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element, then the method does nothing.</p> + </dd> + + </dl><h5 id="htmlpropertiescollection-0"><span class="secno">2.6.2.5 </span>HTMLPropertiesCollection</h5><p>The <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> interface represents a + <a href="#collections" title="collections">collection</a> of elements that add + name-value pairs to a particular <a href="microdata.html#concept-item" title="concept-item">item</a> in the <a href="microdata.html#microdata">microdata</a> + model.</p><pre class="idl">interface <dfn id="htmlpropertiescollection">HTMLPropertiesCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> { + // inherits <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a> and <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>() + caller getter <a href="#propertynodelist">PropertyNodeList</a> <a href="#dom-htmlpropertiescollection-nameditem" title="dom-HTMLPropertiesCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem() + readonly attribute <span>DOMStringList</span> <a href="#dom-htmlpropertiescollection-names" title="dom-HTMLPropertiesCollection-names">names</a>; +}; + +typedef sequence<any> <dfn id="propertyvaluearray">PropertyValueArray</dfn>; + +interface <dfn id="propertynodelist">PropertyNodeList</dfn> : <span>NodeList</span> { + readonly attribute <a href="#propertyvaluearray">PropertyValueArray</a> <a href="#dom-propertynodelist-values" title="dom-PropertyNodeList-values">values</a>; +};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt> + <dd> + <p>Returns the number of elements in the collection.</p> + </dd> + + <dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">collection</var>[<var title="">index</var>]</dt> + <dt><var title="">collection</var>(<var title="">index</var>)</dt> + <dd> + <p>Returns the element with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p> + <p>Returns null if <var title="">index</var> is out of range.</p> + </dd> + + <dt><var title="">propertyNodeList</var> = <var title="">collection</var> . <code title="dom-HTMLPropertiesCollection-namedItem"><a href="#dom-htmlpropertiescollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">collection</var>[<var title="">name</var>]</dt> + <dt><var title="">collection</var>(<var title="">name</var>)</dt> + <dd> + <p>Returns a <code><a href="#propertynodelist">PropertyNodeList</a></code> object containing any elements that add a property named <var title="">name</var>.</p> + </dd> + + <dt><var title="">collection</var> . <code title="dom-HTMLPropertiesCollection-names"><a href="#dom-htmlpropertiescollection-names">names</a></code></dt> + <dd> + <p>Returns a <code>DOMStringList</code> with the <a href="microdata.html#property-names">property names</a> of the elements in the collection.</p> + </dd> + + <dt><var title="">propertyNodeList</var> . <code title="dom-PropertyNodeList-values"><a href="#dom-propertynodelist-values">values</a></code></dt> + <dd> + <p>Returns an array of the various values that the relevant elements have.</p> + </dd> + + </dl><h4 id="domtokenlist-0"><span class="secno">2.6.3 </span>DOMTokenList</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#domtokenlist">DOMTokenList</a></code> interface represents an interface + to an underlying string that consists of a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set of + space-separated tokens</a>.</p><p class="note"><code><a href="#domtokenlist">DOMTokenList</a></code> objects are always + <a href="infrastructure.html#case-sensitive">case-sensitive</a>, even when the underlying string might + ordinarily be treated in a case-insensitive manner.</p><pre class="idl">interface <dfn id="domtokenlist">DOMTokenList</dfn> { + readonly attribute unsigned long <a href="#dom-tokenlist-length" title="dom-tokenlist-length">length</a>; + getter DOMString <a href="#dom-tokenlist-item" title="dom-tokenlist-item">item</a>(in unsigned long index); + boolean <a href="#dom-tokenlist-contains" title="dom-tokenlist-contains">contains</a>(in DOMString token); + void <a href="#dom-tokenlist-add" title="dom-tokenlist-add">add</a>(in DOMString token); + void <a href="#dom-tokenlist-remove" title="dom-tokenlist-remove">remove</a>(in DOMString token); + boolean <a href="#dom-tokenlist-toggle" title="dom-tokenlist-toggle">toggle</a>(in DOMString token); + <a href="#dom-tokenlist-tostring" title="dom-tokenlist-toString">stringifier</a> DOMString (); +};</pre><dl class="domintro"><dt><var title="">tokenlist</var> . <code title="dom-tokenlist-length"><a href="#dom-tokenlist-length">length</a></code></dt> + <dd> + <p>Returns the number of tokens in the string.</p> + </dd> + + <dt><var title="">element</var> = <var title="">tokenlist</var> . <code title="dom-tokenlist-item"><a href="#dom-tokenlist-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">tokenlist</var>[<var title="">index</var>]</dt> + <dd> + <p>Returns the token with index <var title="">index</var>. The tokens are returned in the order they are found in the underlying string.</p> + <p>Returns null if <var title="">index</var> is out of range.</p> + </dd> + + <dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title="dom-tokenlist-contains"><a href="#dom-tokenlist-contains">contains</a></code>(<var title="">token</var>)</dt> + <dd> + <p>Returns true if the <var title="">token</var> is present; false otherwise.</p> + <p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p> + <p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p> + </dd> + + <dt><var title="">tokenlist</var> . <code title="dom-tokenlist-add"><a href="#dom-tokenlist-add">add</a></code>(<var title="">token</var>)</dt> + <dd> + <p>Adds <var title="">token</var>, unless it is already present.</p> + <p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p> + <p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p> + </dd> + + <dt><var title="">tokenlist</var> . <code title="dom-tokenlist-remove"><a href="#dom-tokenlist-remove">remove</a></code>(<var title="">token</var>)</dt> + <dd> + <p>Removes <var title="">token</var> if it is present.</p> + <p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p> + <p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p> + </dd> + + <dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title="dom-tokenlist-toggle"><a href="#dom-tokenlist-toggle">toggle</a></code>(<var title="">token</var>)</dt> + <dd> + <p>Adds <var title="">token</var> if it is not present, or removes it if it is.</p> + <p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p> + <p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p> + </dd> + + </dl><h4 id="domsettabletokenlist-0"><span class="secno">2.6.4 </span>DOMSettableTokenList</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#domsettabletokenlist">DOMSettableTokenList</a></code> interface is the same as the + <code><a href="#domtokenlist">DOMTokenList</a></code> interface, except that it allows the + underlying string to be directly changed.</p><pre class="idl">interface <dfn id="domsettabletokenlist">DOMSettableTokenList</dfn> : <a href="#domtokenlist">DOMTokenList</a> { + attribute DOMString <a href="#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>; +};</pre><dl class="domintro"><dt><var title="">tokenlist</var> . <code title="dom-DOMSettableTokenList-value"><a href="#dom-domsettabletokenlist-value">value</a></code></dt> + <dd> + <p>Returns the underlying string.</p> + <p>Can be set, to change the underlying string.</p> + </dd> + + </dl><h4 id="domstringmap-0"><span class="secno">2.6.5 </span>DOMStringMap</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#domstringmap">DOMStringMap</a></code> interface represents a set of + name-value pairs. It exposes these using the scripting language's + native mechanisms for property access.</p><div class="example"> + + <p>The <code title="dom-dataset"><a href="#dom-dataset">dataset</a></code> attribute on + elements exposes the <code title="attr-data-*"><a href="elements.html#attr-data">data-*</a></code> + attributes on the element.</p> + + <p>Given the following fragment and elements with similar + constructions:</p> + + <pre><img class="tower" id="tower5" data-x="12" data-y="5" + data-ai="robotarget" data-hp="46" data-ability="flames" + src="towers/rocket.png alt="Rocket Tower"></pre> + + <p>...one could imagine a function <code title="">splashDamage()</code> that takes some arguments, the first + of which is the element to process:</p> + + <pre>function splashDamage(node, x, y, damage) { + if (node.classList.contains('tower') && // checking the 'class' attribute + node.dataset.x == x && // reading the 'data-x' attribute + node.dataset.y == y) { // reading the 'data-y' attribute + var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute + hp = hp - damage; + if (hp < 0) { + hp = 0; + node.dataset.ai = 'dead'; // setting the 'data-ai' attribute + delete node.dataset.ability; // removing the 'data-ability' attribute + } + node.dataset.hp = hp; // setting the 'data-hp' attribute + } +}</pre> + + </div><h4 id="dom-feature-strings"><span class="secno">2.6.6 </span>DOM feature strings</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>DOM3 Core defines mechanisms for checking for interface support, + and for obtaining implementations of interfaces, using <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures">feature + strings</a>. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><p>Authors are strongly discouraged from using these, as they are + notoriously unreliable and imprecise. Authors are encouraged to rely + on explicit feature testing or the graceful degradation behavior + intrinsic to some of the features in this specification.</p><h4 id="exceptions"><span class="secno">2.6.7 </span>Exceptions</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following are <code>DOMException</code> codes. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><ol class="brief"><li value="1"><dfn id="index_size_err"><code>INDEX_SIZE_ERR</code></dfn></li> + <li value="2"><dfn id="domstring_size_err"><code>DOMSTRING_SIZE_ERR</code></dfn></li> + <li value="3"><dfn id="hierarchy_request_err"><code>HIERARCHY_REQUEST_ERR</code></dfn></li> + <li value="4"><dfn id="wrong_document_err"><code>WRONG_DOCUMENT_ERR</code></dfn></li> + <li value="5"><dfn id="invalid_character_err"><code>INVALID_CHARACTER_ERR</code></dfn></li> + <li value="6"><dfn id="no_data_allowed_err"><code>NO_DATA_ALLOWED_ERR</code></dfn></li> + <li value="7"><dfn id="no_modification_allowed_err"><code>NO_MODIFICATION_ALLOWED_ERR</code></dfn></li> + <li value="8"><dfn id="not_found_err"><code>NOT_FOUND_ERR</code></dfn></li> + <li value="9"><dfn id="not_supported_err"><code>NOT_SUPPORTED_ERR</code></dfn></li> + <li value="10"><dfn id="inuse_attribute_err"><code>INUSE_ATTRIBUTE_ERR</code></dfn></li> + <li value="11"><dfn id="invalid_state_err"><code>INVALID_STATE_ERR</code></dfn></li> + <li value="12"><dfn id="syntax_err"><code>SYNTAX_ERR</code></dfn></li> + <li value="13"><dfn id="invalid_modification_err"><code>INVALID_MODIFICATION_ERR</code></dfn></li> + <li value="14"><dfn id="namespace_err"><code>NAMESPACE_ERR</code></dfn></li> + <li value="15"><dfn id="invalid_access_err"><code>INVALID_ACCESS_ERR</code></dfn></li> + <li value="16"><dfn id="validation_err"><code>VALIDATION_ERR</code></dfn></li> + <li value="17"><dfn id="type_mismatch_err"><code>TYPE_MISMATCH_ERR</code></dfn></li> + <li value="18"><dfn id="security_err"><code>SECURITY_ERR</code></dfn></li> <!-- actually in XHR for now --> + <li value="19"><dfn id="network_err"><code>NETWORK_ERR</code></dfn></li> <!-- actually in XHR for now --> + <li value="20"><dfn id="abort_err"><code>ABORT_ERR</code></dfn></li> <!-- actually in XHR for now --> + <li value="21"><dfn id="url_mismatch_err"><code>URL_MISMATCH_ERR</code></dfn></li> <!-- actually in workers for now --> + <li value="22"><dfn id="quota_exceeded_err"><code>QUOTA_EXCEEDED_ERR</code></dfn></li> <!-- actually defined right here for now --> +<!--v2DATAGRID <li value="23"><dfn><code>DATAGRID_MODEL_ERR</code></dfn></li> --> <!-- actually defined right here for now --> + <li value="81"><dfn id="parse_err"><code>PARSE_ERR</code></dfn></li> <!-- actually defined in dom3ls --> + <li value="82"><dfn id="serialize_err"><code>SERIALIZE_ERR</code></dfn></li> <!-- actually defined in dom3ls --> + </ol></body></html> \ No newline at end of file Index: iana.html =================================================================== RCS file: /sources/public/html5/spec-author-view/iana.html,v retrieving revision 1.11 retrieving revision 1.12 diff -u -d -r1.11 -r1.12 --- iana.html 3 Jan 2010 15:08:14 -0000 1.11 +++ iana.html 3 Jan 2010 15:15:06 -0000 1.12 @@ -0,0 +1,630 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>12 IANA considerations — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="obsolete.html" title="11 Obsolete features" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="index.html" title="Index" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="obsolete.html">← 11 Obsolete features</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="index.html">Index →</a> + <ol class="toc"><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></ol></div> + + <h2 id="iana"><span class="secno">12 </span>IANA considerations</h2><!-- http://www.w3.org/2002/06/registering-mediatype.html --><h3 id="text-html"><span class="secno">12.1 </span><dfn><code>text/html</code></dfn></h3><p>This registration is for community review and will be submitted + to the IESG for review, approval, and registration with IANA.</p><!-- + To: http://www.ietf.org/rfc/rfc2854 + + Include a request to retire RFC 2854 persuant to section 6.4 of RFC 2026. + --><dl><dt>Type name:</dt> + <dd>text</dd> + <dt>Subtype name:</dt> + <dd>html</dd> + <dt>Required parameters:</dt> + <dd>No required parameters</dd> + <dt>Optional parameters:</dt> + <dd> + <dl><dt><code title="">charset</code></dt> + <dd> + <p>The <code title="">charset</code> parameter may be provided + to definitively specify the <a href="#document-s-character-encoding">document's character + encoding</a>, overriding any <a href="semantics.html#character-encoding-declaration" title="character encoding + declaration">character encoding declarations</a> in the + document. The parameter's value must be the name of the + character encoding used to serialize the file, must be a valid + character encoding name, and must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII + case-insensitive</a> match for the <a href="infrastructure.html#preferred-mime-name">preferred MIME + name</a> for that encoding. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p> + </dd> + </dl></dd> + <dt>Encoding considerations:</dt> + <dd>See the section on <a href="semantics.html#character-encoding-declaration" title="character encoding + declaration">character encoding declarations</a>.</dd> + <dt>Security considerations:</dt> + <dd> + + <p>Entire novels have been written about the security + considerations that apply to HTML documents. Many are listed in + this document, to which the reader is referred for more + details. Some general concerns bear mentioning here, however:</p> + + <p>HTML is scripted language, and has a large number of APIs (some + of which are described in this document). Script can expose the + user to potential risks of information leakage, credential + leakage, cross-site scripting attacks, cross-site request + forgeries, and a host of other problems. While the designs in this + specification are intended to be safe if implemented correctly, a + full implementation is a massive undertaking and, as with any + software, user agents are likely to have security bugs.</p> + + <p>Even without scripting, there are specific features in HTML + which, for historical reasons, are required for broad + compatibility with legacy content but that expose the user to + unfortunate security problems. In particular, the <code><a href="embedded-content-1.html#the-img-element">img</a></code> + element can be used in conjunction with some other features as a + way to effect a port scan from the user's location on the + Internet. This can expose local network topologies that the + attacker would otherwise not be able to determine.</p> + + </dd> + <dt>Interoperability considerations:</dt> + <dd> + Rules for processing both conforming and non-conforming content + are defined in this specification. + </dd> + <dt>Published specification:</dt> + <dd> + This document is the relevant specification. Labeling a resource + with the <code><a href="#text-html">text/html</a></code> type asserts that the resource is + an <a href="dom.html#html-documents" title="HTML documents">HTML document</a> using + <a href="syntax.html#syntax">the HTML syntax</a>. + </dd> + <dt>Applications that use this media type:</dt> + <dd> + Web browsers, tools for processing Web content, HTML authoring + tools, search engines, validators. + </dd> + <dt>Additional information:</dt> + <dd> + <dl><dt>Magic number(s):</dt> + <dd>No sequence of bytes can uniquely identify an HTML + document. More information on detecting HTML documents is + available in the Content-Type Processing Model specification. <a href="references.html#refsMIMESNIFF">[MIMESNIFF]</a></dd> + <dt>File extension(s):</dt> + <dd>"<code title="">html</code>" and "<code title="">htm</code>" + are commonly, but certainly not exclusively, used as the + extension for HTML documents.</dd> + <dt>Macintosh file type code(s):</dt> + <dd><code title="">TEXT</code></dd> + </dl></dd> + <dt>Person & email address to contact for further information:</dt> + <dd>Ian Hickson <http://www.ietf.org/rfc/rfc3236.txt + --><dl><dt>Type name:</dt> + <dd>application</dd> + <dt>Subtype name:</dt> + <dd>xhtml+xml</dd> + <dt>Required parameters:</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>Optional parameters:</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>Encoding considerations:</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>Security considerations:</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>Interoperability considerations:</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>Published specification:</dt> + <dd> + Labeling a resource with the <code><a href="#application-xhtml-xml">application/xhtml+xml</a></code> + type asserts that the resource is an XML document that likely has + a root element from the <a href="#html-namespace-0">HTML namespace</a>. As such, the + relevant specifications are the XML specification, the Namespaces + in XML specification, and this specification. <a href="references.html#refsXML">[XML]</a> <a href="references.html#refsXMLNS">[XMLNS]</a> + </dd> + <dt>Applications that use this media type:</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>Additional information:</dt> + <dd> + <dl><dt>Magic number(s):</dt> + <dd>Same as for <code>application/xml</code> <a href="references.html#refsRFC3023">[RFC3023]</a></dd> + <dt>File extension(s):</dt> + <dd>"<code title="">xhtml</code>" and "<code title="">xht</code>" + are sometimes used as extensions for XML resources that have a + root element from the <a href="#html-namespace-0">HTML namespace</a>.</dd> + <dt>Macintosh file type code(s):</dt> + <dd><code title="">TEXT</code></dd> + </dl></dd> + <dt>Person & email address to contact for further information:</dt> + <dd>Ian Hickson <http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="the-button-element.html" title="4.10.6 The button element" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="interactive-elements.html" title="4.11 Interactive elements" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="the-button-element.html">← 4.10.6 The button element</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="interactive-elements.html">4.11 Interactive elements →</a> + <ol class="toc"><li><ol><li><ol><li><a href="association-of-controls-and-forms.html#association-of-controls-and-forms"><span class="secno">4.10.14 </span>Association of controls and forms</a></li><li><a href="association-of-controls-and-forms.html#attributes-common-to-form-controls"><span class="secno">4.10.15 </span>Attributes common to form controls</a> + <ol><li><a href="association-of-controls-and-forms.html#naming-form-controls"><span class="secno">4.10.15.1 </span>Naming form controls</a></li><li><a href="association-of-controls-and-forms.html#enabling-and-disabling-form-controls"><span class="secno">4.10.15.2 </span>Enabling and disabling form controls</a></li><li><a href="association-of-controls-and-forms.html#autofocusing-a-form-control"><span class="secno">4.10.15.3 </span>Autofocusing a form control</a></li><li><a href="association-of-controls-and-forms.html#limiting-user-input-length"><span class="secno">4.10.15.4 </span>Limiting user input length</a></li><li><a href="association-of-controls-and-forms.html#form-submission-0"><span class="secno">4.10.15.5 </span>Form submission</a></li></ol></li><li><a href="association-of-controls-and-forms.html#constraints"><span class="secno">4.10.16 </span>Constraints</a> + <ol><li><a href="association-of-controls-and-forms.html#definitions"><span class="secno">4.10.16.1 </span>Definitions</a></li><li><a href="association-of-controls-and-forms.html#the-constraint-validation-api"><span class="secno">4.10.16.2 </span>The constraint validation API</a></li></ol></li><li><a href="association-of-controls-and-forms.html#form-submission"><span class="secno">4.10.17 </span>Form submission</a></li></ol></li></ol></li></ol></div> + + <h4 id="association-of-controls-and-forms"><span class="secno">4.10.14 </span>Association of controls and forms</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <a href="forms.html#form-associated-element">form-associated element</a> can have a relationship + with a <code><a href="forms.html#the-form-element">form</a></code> element, which is called the element's + <dfn id="form-owner">form owner</dfn>. If a <a href="forms.html#form-associated-element">form-associated element</a> is + not associated with a <code><a href="forms.html#the-form-element">form</a></code> element, its <a href="#form-owner">form + owner</a> is said to be null.</p><p>A <a href="forms.html#form-associated-element">form-associated element</a> is, by default, associated + with its nearest ancestor <code><a href="forms.html#the-form-element">form</a></code> element, but may have a <dfn id="attr-fae-form" title="attr-fae-form"><code>form</code></dfn> attribute specified to + override this.</p><p>If a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute specified, then its + value must be the ID of a <code><a href="forms.html#the-form-element">form</a></code> element in the element's + owner <code>Document</code>.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-fae-form"><a href="#dom-fae-form">form</a></code></dt> + + <dd> + + <p>Returns the element's <a href="#form-owner">form owner</a>.</p> + + <p>Returns null if there isn't one.</p> + + </dd> + + </dl><h4 id="attributes-common-to-form-controls"><span class="secno">4.10.15 </span><dfn>Attributes common to form controls</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="naming-form-controls"><span class="secno">4.10.15.1 </span>Naming form controls</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-fe-name" title="attr-fe-name"><code>name</code></dfn> content + attribute gives the name of the form control, as used in <a href="#form-submission">form + submission</a> and in the <code><a href="forms.html#the-form-element">form</a></code> element's <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> object. If the attribute + is specified, its value must not be the empty string.</p><h5 id="enabling-and-disabling-form-controls"><span class="secno">4.10.15.2 </span>Enabling and disabling form controls</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-fe-disabled" title="attr-fe-disabled"><code>disabled</code></dfn> + content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p><p>A form control is <dfn id="concept-fe-disabled" title="concept-fe-disabled">disabled</dfn> + if its <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute is + set, or if it is a descendant of a <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element + whose <code title="attr-fieldset-disabled"><a href="forms.html#attr-fieldset-disabled">disabled</a></code> attribute + is set and is <em>not</em> a descendant of that + <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element's first <code><a href="forms.html#the-legend-element">legend</a></code> element + child, if any.</p><h5 id="autofocusing-a-form-control"><span class="secno">4.10.15.3 </span>Autofocusing a form control</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2: Apply this to contentEditable elements --><p>The <dfn id="attr-fe-autofocus" title="attr-fe-autofocus"><code>autofocus</code></dfn> + content attribute allows the user to indicate that a control is to + be focused as soon as the page is loaded, allowing the user to just + start typing without having to manually focus the main control.</p><p>The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute is + a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p><p>There must not be more than one element in the document with the + <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute + specified.</p><div class="example"> + <p>In the following snippet, the text control would be focused when + the document was loaded.</p> + <pre><input maxlength="256" name="q" value="" autofocus> +<input type="submit" value="Search"></pre> + </div><h5 id="limiting-user-input-length"><span class="secno">4.10.15.4 </span>Limiting user input length</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var> declares a limit on the number of + characters a user can input.</p><p>If an element has its <a href="#attr-fe-maxlength" title="attr-fe-maxlength">form + control <code title="">maxlength</code> attribute</a> specified, + the attribute's value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative + integer</a>. If the attribute is specified and applying the + <a href="#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to its value + results in a number, then that number is the element's <dfn id="maximum-allowed-value-length">maximum + allowed value length</dfn>. If the attribute is omitted or parsing + its value results in an error, then there is no <a href="#maximum-allowed-value-length">maximum + allowed value length</a>.</p><h5 id="form-submission-0"><span class="secno">4.10.15.5 </span>Form submission</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="attributes-for-form-submission">Attributes for form submission</dfn> can be specified both + on <code><a href="forms.html#the-form-element">form</a></code> elements and on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit buttons</a> (elements that + represent buttons that submit forms, e.g. an <code><a href="the-input-element.html#the-input-element">input</a></code> + element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is + in the <a href="number-state.html#submit-button-state" title="attr-input-type-submit">Submit Button</a> + state). + + </p><p>The <a href="#attributes-for-form-submission">attributes for form submission</a> that may be + specified on <code><a href="forms.html#the-form-element">form</a></code> elements are <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>.</p><p>The corresponding <a href="#attributes-for-form-submission">attributes for form submission</a> + that may be specified on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit + buttons</a> are <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>. When omitted, they + default to the values given on the corresponding attributes on the + <code><a href="forms.html#the-form-element">form</a></code> element.</p><hr><p>The <dfn id="attr-fs-action" title="attr-fs-action"><code>action</code></dfn> and + <dfn id="attr-fs-formaction" title="attr-fs-formaction"><code>formaction</code></dfn> + content attributes, if specified, must have a value that is a + <a href="urls.html#valid-url">valid URL</a>.</p><p>The <dfn id="concept-fs-action" title="concept-fs-action">action</dfn> of an element is + the value of the element's <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> attribute, if the + element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit + button</a> and has such an attribute, or the value of its + <a href="#form-owner">form owner</a>'s <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code> + attribute, if <em>it</em> has one, or else the empty string.</p><hr><p>The <dfn id="attr-fs-method" title="attr-fs-method"><code>method</code></dfn> and + <dfn id="attr-fs-formmethod" title="attr-fs-formmethod"><code>formmethod</code></dfn> + content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated + attributes</a> with the following keywords and states:</p><ul><li>The keyword <dfn id="attr-fs-method-get-keyword" title="attr-fs-method-GET-keyword"><code>GET</code></dfn>, mapping + to the state <dfn id="attr-fs-method-get" title="attr-fs-method-GET">GET</dfn>, indicating + the HTTP GET method.</li> + + <li>The keyword <dfn id="attr-fs-method-post-keyword" title="attr-fs-method-POST-keyword"><code>POST</code></dfn>, mapping + to the state <dfn id="attr-fs-method-post" title="attr-fs-method-POST">POST</dfn>, indicating + the HTTP POST method.</li> + + <li>The keyword <dfn id="attr-fs-method-put-keyword" title="attr-fs-method-PUT-keyword"><code>PUT</code></dfn>, mapping + to the state <dfn id="attr-fs-method-put" title="attr-fs-method-PUT">PUT</dfn>, indicating + the HTTP PUT method.</li> + + <li>The keyword <dfn id="attr-fs-method-delete-keyword" title="attr-fs-method-DELETE-keyword"><code>DELETE</code></dfn>, mapping + to the state <dfn id="attr-fs-method-delete" title="attr-fs-method-DELETE">DELETE</dfn>, indicating + the HTTP DELETE method.</li> + + </ul><p>The <i>missing value default</i> for these attributes is the + <a href="#attr-fs-method-get" title="attr-fs-method-GET">GET</a> state.</p><p>The <dfn id="concept-fs-method" title="concept-fs-method">method</dfn> of an element is + one of those four states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> attribute, then the + element's <a href="#concept-fs-method" title="concept-fs-method">method</a> is that + attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s + <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-enctype" title="attr-fs-enctype"><code>enctype</code></dfn> and + <dfn id="attr-fs-formenctype" title="attr-fs-formenctype"><code>formenctype</code></dfn> + content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated + attributes</a> with the following keywords and states:</p><ul><li>The "<dfn id="attr-fs-enctype-urlencoded" title="attr-fs-enctype-urlencoded"><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li> + <li>The "<dfn id="attr-fs-enctype-formdata" title="attr-fs-enctype-formdata"><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li> + <li>The "<dfn id="attr-fs-enctype-text" title="attr-fs-enctype-text"><code>text/plain</code></dfn>" keyword and corresponding state.</li> + </ul><p>The <i>missing value default</i> for these attributes is the + <code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code> + state.</p><p>The <dfn id="concept-fs-enctype" title="concept-fs-enctype">enctype</dfn> of an element + is one of those three states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> attribute, then the + element's <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a> is that + attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s + <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-target" title="attr-fs-target"><code>target</code></dfn> and + <dfn id="attr-fs-formtarget" title="attr-fs-formtarget"><code>formtarget</code></dfn> + content attributes, if specified, must have values that are <a href="browsers.html#valid-browsing-context-name-or-keyword" title="valid browsing context name or keyword">valid browsing + context names or keywords</a>.</p><p>The <dfn id="concept-fs-target" title="concept-fs-target">target</dfn> of an element is + the value of the element's <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> attribute, if the + element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit + button</a> and has such an attribute; or the value of its + <a href="#form-owner">form owner</a>'s <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code> + attribute, if <em>it</em> has such an attribute; or, if one of the + child nodes of <a href="dom.html#the-head-element">the <code>head</code> element</a> is a + <code><a href="semantics.html#the-base-element">base</a></code> element with a <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> attribute, then the value of + the <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> attribute of the + first such <code><a href="semantics.html#the-base-element">base</a></code> element; or, if there is no such + element, the empty string.</p><!-- c.f. hyperlink following --><hr><p>The <dfn id="attr-fs-novalidate" title="attr-fs-novalidate"><code>novalidate</code></dfn> + and <dfn id="attr-fs-formnovalidate" title="attr-fs-formnovalidate"><code>formnovalidate</code></dfn> + content attributes are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean + attributes</a>. If present, they indicate that the form is not to + be validated during submission.</p><p>The <dfn id="concept-fs-novalidate" title="concept-fs-novalidate">no-validate state</dfn> of + an element is true if the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and the element's + <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute + is present, or if the element's <a href="#form-owner">form owner</a>'s <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> attribute is present, + and false otherwise.</p><div class="example"> + + <p>This attribute is useful to include "save" buttons on forms that + have validation constraints, to allow users to save their progress + even though they haven't fully entered the data in the form. The + following example shows a simple form that has two required + fields. There are three buttons: one to submit the form, which + requires both fields to be filled in; one to save the form so that + the user can come back and fill it in later; and one to cancel the + form altogether.</p> + + <pre><form action="editor.cgi" method="post"> + <p><label>Name: <input required name=fn></label></p> + <p><label>Essay: <textarea name=essay></textarea></label></p> + <p><input type=submit name=submit value="Submit essay"></p> + <p><input type=submit formnovalidate name=save value="Save essay"></p> + <p><input type=submit formnovalidate name=cancel value="Cancel"></p> +</form></pre> + + </div><h4 id="constraints"><span class="secno">4.10.16 </span>Constraints</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="definitions"><span class="secno">4.10.16.1 </span>Definitions</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="the-constraint-validation-api"><span class="secno">4.10.16.2 </span>The <dfn>constraint validation API</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-cva-willValidate"><a href="#dom-cva-willvalidate">willValidate</a></code></dt> + + <dd> + + <p>Returns true if the element will be validated when the form is submitted; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity</a></code>(<var title="">message</var>)</dt> + + <dd> + + <p>Sets a custom error, so that the element would fail to + validate. The given message is the message to be shown to the user + when reporting the problem to the user.</p> + + <p>If the argument is the empty string, clears the custom error.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valueMissing"><a href="#dom-validitystate-valuemissing">valueMissing</a></code></dt> + + <dd> + + <p>Returns true if the element has no value but is a required field; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-typeMismatch"><a href="#dom-validitystate-typemismatch">typeMismatch</a></code></dt> + + <dd> + + <p>Returns true if the element's value is not in the correct syntax; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-patternMismatch"><a href="#dom-validitystate-patternmismatch">patternMismatch</a></code></dt> + + <dd> + + <p>Returns true if the element's value doesn't match the provided pattern; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-tooLong"><a href="#dom-validitystate-toolong">tooLong</a></code></dt> + + <dd> + + <p>Returns true if the element's value is longer than the provided maximum length; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeUnderflow"><a href="#dom-validitystate-rangeunderflow">rangeUnderflow</a></code></dt> + + <dd> + + <p>Returns true if the element's value is lower than the provided minimum; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeOverflow"><a href="#dom-validitystate-rangeoverflow">rangeOverflow</a></code></dt> + + <dd> + + <p>Returns true if the element's value is higher than the provided maximum; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-stepMismatch"><a href="#dom-validitystate-stepmismatch">stepMismatch</a></code></dt> + + <dd> + + <p>Returns true if the element's value doesn't fit the rules given by the <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-customError"><a href="#dom-validitystate-customerror">customError</a></code></dt> + + <dd> + + <p>Returns true if the element has a custom error; false otherwise.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valid"><a href="#dom-validitystate-valid">valid</a></code></dt> + + <dd> + + <p>Returns true if the element's value has no validity problems; false otherwise.</p> + + </dd> + + <dt><var title="">valid</var> = <var title="">element</var> . <code title="dom-cva-checkValidatity"><a href="#dom-cva-checkvalidatity">checkValidity</a></code>()</dt> + + <dd> + + <p>Returns true if the element's value has no validity problems; + false otherwise. Fires an <code title="event-invalid">invalid</code> event at the element in the + latter case.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-cva-validationMessage"><a href="#dom-cva-validationmessage">validationMessage</a></code></dt> + + <dd> + + <p>Returns the error message that would be shown to the user if + the element was to be checked for validity.</p> + + </dd> + + </dl><div class="example"> + + <p>In the following example, a script checks the value of a form + control each time it is edited, and whenever it is not a valid + value, uses the <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity()</a></code> method + to set an appropriate message.</p> + + <pre><label>Feeling: <input name=f type="text" oninput="check(this)"></label> +<script> + function check(input) { + if (input.value == "good" || + input.value == "fine" || + input.value == "tired") { + input.setCustomValidity('"' + input.value + '" is not a feeling.'); +<!-- } else if (input.value == "...") { + input.setCustomValidity('...'); +--> } else { + // input is fine -- reset the error message + input.setCustomValidity(''); + } + } +</script></pre> + + </div><h4 id="form-submission"><span class="secno">4.10.17 </span><dfn>Form submission</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>When forms are submitted, the data in the form is converted into + the form specified by the <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a>, and then sent to the + destination specified by the <a href="#concept-fs-action" title="concept-fs-action">action</a> using the given <a href="#concept-fs-method" title="concept-fs-method">method</a>.</p><p>For example, take the following form:</p><pre><form action="/find.cgi" method=get> + <input type=text name=t> + <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: forms.html =================================================================== RCS file: /sources/public/html5/spec-author-view/forms.html,v retrieving revision 1.555 retrieving revision 1.556 diff -u -d -r1.555 -r1.556 --- forms.html 3 Jan 2010 15:08:14 -0000 1.555 +++ forms.html 3 Jan 2010 15:15:05 -0000 1.556 @@ -0,0 +1,687 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10 Forms — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } + hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } + dl, dd { margin-top: 0; margin-bottom: 0; } + dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } + dt + dt { margin-top: 0; } + dd dt { margin-top: 0.25em; margin-bottom: 0; } + dd p { margin-top: 0; } + dd dl + p { margin-top: 1em; } + dd table + p { margin-top: 1em; } + p + * > li, dd li { margin: 1em 0; } + dt, dfn { font-weight: bold; font-style: normal; } + dt dfn { font-style: italic; } + pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } + pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } + pre em { font-weight: bolder; font-style: normal; } + @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } + var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } + table { border-collapse: collapse; border-style: hidden hidden none hidden; } + table thead { border-bottom: solid; } + table tbody th:first-child { border-left: solid; } + table tbody th { text-align: left; } + table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } + blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } + + .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } + img.extra { float: right; } + pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } + pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } + pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } + pre.css:first-line { color: #AAAA50; } + dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; } + hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } + dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } + dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } + dl.domintro dd p { margin: 0.5em 0; } + dl.switch { padding-left: 2em; } + dl.switch > dt { text-indent: -1.5em; } + dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } + dl.triple { padding: 0 0 0 1em; } + dl.triple dt, dl.triple dd { margin: 0; display: inline } + dl.triple dt:after { content: ':'; } + dl.triple dd:after { content: '\A'; white-space: pre; } + .diff-old { text-decoration: line-through; color: silver; background: transparent; } + .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } + a .diff-new { border-bottom: 1px blue solid; } + + h2 { page-break-before: always; } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } + h1 + h2, hr + h2.no-toc { page-break-before: auto; } + + p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; } + + div.head { margin: 0 0 1em; padding: 1em 0 0 0; } + div.head p { margin: 0; } + div.head h1 { margin: 0; } + div.head .logo { float: right; margin: 0 1em; } + div.head .logo img { border: none } /* remove border from top image */ + div.head dl { margin: 1em 0; } + div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } + + body > .toc > li { margin-top: 1em; margin-bottom: 1em; } + body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } + body > .toc > li > * { margin-bottom: 0.5em; } + body > .toc > li > * > li > * { margin-bottom: 0.25em; } + .toc, .toc li { list-style: none; } + + .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } + .brief li { margin: 0; padding: 0; } + .brief li p { margin: 0; padding: 0; } + + .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } + .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } + .category-list li { display: inline; } + .category-list li:not(:last-child)::after { content: ', '; } + .category-list li > span, .category-list li > a { text-transform: lowercase; } + .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ + + .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } + .XXX > :first-child { margin-top: 0; } + p .XXX { line-height: 3em; } + .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } + .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } + .annotation :link, .annotation :visited { color: inherit; } + .annotation :link:hover, .annotation :visited:hover { background: transparent; } + .annotation span { border: none ! important; } + .note { color: green; background: transparent; font-family: sans-serif; } + .warning { color: red; background: transparent; } + .note, .warning { font-weight: bolder; font-style: italic; } + p.note, div.note { padding: 0.5em 2em; } + span.note { padding: 0 2em; } + .note p:first-child, .warning p:first-child { margin-top: 0; } + .note p:last-child, .warning p:last-child { margin-bottom: 0; } + .warning:before { font-style: normal; } + p.note:before { content: 'Note: '; } + p.warning:before { content: '\26A0 Warning! '; } + + .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } + .bookkeeping { font-size: 0.8em; margin: 2em 0; } + .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } + + h4 { position: relative; z-index: 3; } + h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } + .element { + background: #EEEEFF; + color: black; + margin: 0 0 1em 0.15em; + padding: 0 1em 0.25em 0.75em; + border-left: solid #9999FF 0.25em; + position: relative; + z-index: 1; + } + .element:before { + position: absolute; + z-index: 2; + top: 0; + left: -1.15em; + height: 2em; + width: 0.9em; + background: #EEEEFF; + content: ' '; + border-style: none none solid solid; + border-color: #9999FF; + border-width: 0.25em; + } + + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } + + .tall-and-narrow { + font-size: 0.6em; + column-width: 25em; + column-gap: 1em; + -moz-column-width: 25em; + -moz-column-gap: 1em; + -webkit-column-width: 25em; + -webkit-column-gap: 1em; + } + + ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } + ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } + ul.domTree li li { list-style: none; } + ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } + ul.domTree span { font-style: italic; font-family: serif; } + ul.domTree .t1 code { color: purple; font-weight: bold; } + ul.domTree .t2 { font-style: normal; font-family: monospace; } + ul.domTree .t2 .name { color: black; font-weight: bold; } + ul.domTree .t2 .value { color: blue; font-weight: normal; } + ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } + ul.domTree .t7 code, .domTree .t8 code { color: green; } + ul.domTree .t10 code { color: teal; } + + #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } + #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } + #configUI p label { display: block; } + #configUI #updateUI, #configUI .loginUI { text-align: center; } + #configUI input[type=button] { display: block; margin: auto; } + </style><style type="text/css"> + + .applies thead th > * { display: block; } + .applies thead code { display: block; } + .applies tbody th { whitespace: nowrap; } + .applies td { text-align: center; } + .applies .yes { background: yellow; } + + .matrix, .matrix td { border: none; text-align: right; } + .matrix { margin-left: 2em; } + + .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } + .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } + .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } + + #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } + #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } + #table-example-1 caption { padding-bottom: 0.5em; } + #table-example-1 thead, #table-example-1 tbody { border: none; } + #table-example-1 th, #table-example-1 td { border: solid thin; } + #table-example-1 th { font-weight: normal; } + #table-example-1 td { border-style: none solid; vertical-align: top; } + #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } + #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } + #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } + #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } + #table-example-1 tbody td:first-child::after { content: leader(". "); } + #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } + #table-example-1 tbody td:first-child + td { width: 10em; } + #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } + #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } + + .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } + .apple-table-examples * { font-family: "Times", serif; } + .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } + .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } + .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } + .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } + .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } + .apple-table-examples td { text-align: right; vertical-align: top; } + .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="tabular-data.html" title="4.9 Tabular data" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="the-input-element.html" title="4.10.5 The input element" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="tabular-data.html">← 4.9 Tabular data</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="the-input-element.html">4.10.5 The input element →</a> + <ol class="toc"><li><ol><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></ol></li></ol></li></ol></div> + + <h3 id="forms"><span class="secno">4.10 </span>Forms</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Forms allow unscripted client-server interaction: given a form, a + user can provide data, submit it to the server, and have the server + act on it accordingly (e.g. returning the results of a search or + calculation). The elements used in forms can also be used for user + interaction with no associated submission mechanism, in conjunction + with scripts.</p><p>Mostly for historical reasons, elements in this section fall into + several overlapping (but subtly different) categories in addition to + the usual ones like <a href="content-models.html#flow-content">flow content</a>, <a href="content-models.html#phrasing-content">phrasing + content</a>, and <a href="content-models.html#interactive-content">interactive content</a>.</p><p>A number of the elements are <dfn id="form-associated-element" title="form-associated + element">form-associated elements</dfn>, which means they can have a + <a href="association-of-controls-and-forms.html#form-owner">form owner</a> and, to expose this, have a <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> content attribute with a matching + <code title="dom-fae-form"><a href="#dom-fae-form">form</a></code> IDL attribute.</p><ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li> + <li><code><a href="#the-fieldset-element">fieldset</a></code></li> + <li><code><a href="the-input-element.html#the-input-element">input</a></code></li> + <li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li> + <li><code><a href="#the-label-element">label</a></code></li> + <li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li> + <li><code><a href="the-button-element.html#the-output-element">output</a></code></li> + <li><code><a href="the-button-element.html#the-select-element">select</a></code></li> + <li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li> + </ul><p>The <a href="#form-associated-element" title="form-associated element">form-associated + elements</a> fall into several subcategories:</p><dl><dt><dfn id="category-listed" title="category-listed">Listed</dfn></dt> + + <dd> + + <p>Denotes elements that are listed in the <code title="dom-form-elements"><a href="#dom-form-elements"><var title="">form</var>.elements</a></code> + and <code title="dom-fieldset-elements"><a href="#dom-fieldset-elements"><var title="">fieldset</var>.elements</a></code> APIs.</p> + + <ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li> + <li><code><a href="#the-fieldset-element">fieldset</a></code></li> + <li><code><a href="the-input-element.html#the-input-element">input</a></code></li> + <li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li> + <li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li> + <li><code><a href="the-button-element.html#the-output-element">output</a></code></li> + <li><code><a href="the-button-element.html#the-select-element">select</a></code></li> + <li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li> + </ul></dd> + + <dt><dfn id="category-label" title="category-label">Labelable</dfn></dt> + + <dd> + + <p>Denotes elements that can be associated with <code><a href="#the-label-element">label</a></code> + elements.</p> + + <ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li> + <li><code><a href="the-input-element.html#the-input-element">input</a></code></li> + <li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li> + <li><code><a href="the-button-element.html#the-select-element">select</a></code></li> + <li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li> + </ul></dd> + + <dt><dfn id="category-submit" title="category-submit">Submittable elements</dfn></dt> + + <dd> + + <p>Denotes elements that can be used for <a href="#constructing-form-data-set">constructing the form data + set</a> when a <code><a href="#the-form-element">form</a></code> element is <a href="#concept-form-submit" title="concept-form-submit">submitted</a>.</p> + + <ul class="brief category-list"><li><code><a href="the-button-element.html#the-button-element">button</a></code></li> + <li><code><a href="the-input-element.html#the-input-element">input</a></code></li> + <li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li> + <li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li> + <li><code><a href="the-button-element.html#the-select-element">select</a></code></li> + <li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li> + </ul></dd> + + <dt><dfn id="category-reset" title="category-reset">Resettable elements</dfn></dt> + + <dd> + + <p>Denotes elements that can be affected when a <code><a href="#the-form-element">form</a></code> + element is <a href="#concept-form-reset" title="concept-form-reset">reset</a>.</p> + + <ul class="brief category-list"><li><code><a href="the-input-element.html#the-input-element">input</a></code></li> + <li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li> + <li><code><a href="the-button-element.html#the-output-element">output</a></code></li> + <li><code><a href="the-button-element.html#the-select-element">select</a></code></li> + <li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li> + </ul></dd> + + </dl><p>In addition, some <a href="#category-submit" title="category-submit">submittable + elements</a> can be, depending on their attributes, <dfn id="concept-button" title="concept-button">buttons</dfn>. The prose below defines when + an element is a button. Some buttons are specifically <dfn id="concept-submit-button" title="concept-submit-button">submit buttons</dfn>.</p><p class="note">The <code><a href="the-iframe-element.html#the-object-element">object</a></code> element is also a + <a href="#form-associated-element">form-associated element</a> and can, with the use of a + suitable <a href="infrastructure.html#plugin">plugin</a>, partake in <a href="association-of-controls-and-forms.html#form-submission">form + submission</a>.</p><h4 id="the-form-element"><span class="secno">4.10.1 </span>The <dfn><code>form</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>, but with no <code><a href="#the-form-element">form</a></code> element descendants.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-form-accept-charset"><a href="#attr-form-accept-charset">accept-charset</a></code></dd> + <dd><code title="attr-fs-action"><a href="association-of-controls-and-forms.html#attr-fs-action">action</a></code></dd> + <dd><code title="attr-form-autocomplete"><a href="#attr-form-autocomplete">autocomplete</a></code></dd> + <dd><code title="attr-fs-enctype"><a href="association-of-controls-and-forms.html#attr-fs-enctype">enctype</a></code></dd> + <dd><code title="attr-fs-method"><a href="association-of-controls-and-forms.html#attr-fs-method">method</a></code></dd> + <dd><code title="attr-form-name"><a href="#attr-form-name">name</a></code></dd> + <dd><code title="attr-fs-novalidate"><a href="association-of-controls-and-forms.html#attr-fs-novalidate">novalidate</a></code></dd> + <dd><code title="attr-fs-target"><a href="association-of-controls-and-forms.html#attr-fs-target">target</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">[OverrideBuiltins] +interface <dfn id="htmlformelement">HTMLFormElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute DOMString <a href="#dom-form-acceptcharset" title="dom-form-acceptCharset">acceptCharset</a>; + attribute DOMString <a href="#dom-fs-action" title="dom-fs-action">action</a>; + attribute boolean <a href="#dom-form-autocomplete" title="dom-form-autocomplete">autocomplete</a>; + attribute DOMString <a href="#dom-fs-enctype" title="dom-fs-enctype">enctype</a>; + attribute DOMString <a href="#dom-fs-method" title="dom-fs-method">method</a>; + attribute DOMString <a href="#dom-form-name" title="dom-form-name">name</a>; + attribute boolean <a href="#dom-fs-novalidate" title="dom-fs-noValidate">noValidate</a>; + attribute DOMString <a href="#dom-fs-target" title="dom-fs-target">target</a>; + + readonly attribute <a href="urls.html#htmlformcontrolscollection">HTMLFormControlsCollection</a> <a href="#dom-form-elements" title="dom-form-elements">elements</a>; + readonly attribute long <a href="#dom-form-length" title="dom-form-length">length</a>; + caller getter any <a href="#dom-form-item" title="dom-form-item">item</a>(in unsigned long index); + caller getter any <a href="#dom-form-nameditem" title="dom-form-namedItem">namedItem</a>(in DOMString name); + + void <a href="#dom-form-submit" title="dom-form-submit">submit</a>(); + void <a href="#dom-form-reset" title="dom-form-reset">reset</a>(); + boolean <a href="#dom-form-checkvalidity" title="dom-form-checkValidity">checkValidity</a>(); + + void <a href="#dom-form-dispatchforminput" title="dom-form-dispatchFormInput">dispatchFormInput</a>(); + void <a href="#dom-form-dispatchformchange" title="dom-form-dispatchFormChange">dispatchFormChange</a>(); +};</pre> + </dd> + </dl><p>The <code><a href="#the-form-element">form</a></code> element <a href="#represents">represents</a> a + collection of <a href="#form-associated-element" title="form-associated element">form-associated + elements</a>, some of which can represent editable values that + can be submitted to a server for processing.</p><p>The <dfn id="attr-form-accept-charset" title="attr-form-accept-charset"><code>accept-charset</code></dfn> + attribute gives the character encodings that are to be used for the + submission. If specified, the value must be an <a href="common-microsyntaxes.html#ordered-set-of-unique-space-separated-tokens">ordered set of + unique space-separated tokens</a>, and each token must be an + <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the <a href="infrastructure.html#preferred-mime-name">preferred + MIME name</a> of an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character + encoding</a>. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-form-name" title="attr-form-name"><code>name</code></dfn> attribute + represents the <code><a href="#the-form-element">form</a></code>'s name within the <code title="dom-document-forms"><a href="#dom-document-forms">forms</a></code> collection. The value must + not be the empty string, and the value must be unique amongst the + <code><a href="#the-form-element">form</a></code> elements in the <code title="dom-document-forms"><a href="#dom-document-forms">forms</a></code> collection that it is in, if + any.</p><p>The <dfn id="attr-form-autocomplete" title="attr-form-autocomplete"><code>autocomplete</code></dfn> + attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The attribute has + two states. The <code title="attr-form-autocomplete-on">on</code> + keyword maps to the <dfn id="attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</dfn> state, and the + <code title="attr-form-autocomplete-off">off</code> keyword maps to + the <dfn id="attr-form-autocomplete-off-state" title="attr-form-autocomplete-off-state">off</dfn> + state. The attribute may also be omitted. The <i>missing value + default</i> is the <a href="#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state. The <a href="#attr-form-autocomplete-off-state" title="attr-form-autocomplete-off-state">off</a> state indicates + that by default, <code><a href="the-input-element.html#the-input-element">input</a></code> elements in the form will have + their <a href="#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">off</i>; the <a href="#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state indicates + that by default, <code><a href="the-input-element.html#the-input-element">input</a></code> elements in the form will have + their <a href="#resulting-autocompletion-state">resulting autocompletion state</a> set to <i title="">on</i>.</p><p>The <code title="attr-fs-action"><a href="association-of-controls-and-forms.html#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="association-of-controls-and-forms.html#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="association-of-controls-and-forms.html#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="association-of-controls-and-forms.html#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="association-of-controls-and-forms.html#attr-fs-target">target</a></code> attributes are <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes + for form submission</a>.</p><dl class="domintro"><dt><var title="">form</var> . <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt> + + <dd> + + <p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the form controls in + the form (excluding image buttons for historical reasons).</p> + + </dd> + + <dt><var title="">form</var> . <code title="dom-form-length"><a href="#dom-form-length">length</a></code></dt> + + <dd> + + <p>Returns the number of form controls in the form (excluding + image buttons for historical reasons).</p> + + </dd> + + <dt><var title="">element</var> = <var title="">form</var> . <code title="dom-form-item"><a href="#dom-form-item">item</a></code>(<var title="">index</var>)</dt> + <dt><var title="">form</var>[<var title="">index</var>]</dt> + <dt><var title="">form</var>(<var title="">index</var>)</dt> + + <dd> + + <p>Returns the <var title="">index</var>th element in the form + (excluding image buttons for historical reasons).</p> + + </dd> + + <dt><var title="">element</var> = <var title="">form</var> . <code title="dom-form-namedItem"><a href="#dom-form-nameditem">namedItem</a></code>(<var title="">name</var>)</dt> + <dt><var title="">form</var>[<var title="">name</var>]</dt> + <dt><var title="">form</var>(<var title="">name</var>)</dt> + + <dd> + + <p>Returns the form control in the form with the given ID or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> (excluding image buttons for + historical reasons).</p> + + <p>Once an element has been referenced using a particular name, + that name will continue being available as a way to reference that + element in this method, even if the element's actual ID or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> changes, for as long as the + element remains in the <code>Document</code>.</p> + + <p>If there are multiple matching items, then a + <code>NodeList</code> object containing all those elements is + returned.</p> + + <p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> could be found.</p> + + </dd> + + <dt><var title="">form</var> . <code title="dom-form-submit"><a href="#dom-form-submit">submit</a></code>()</dt> + + <dd> + + <p>Submits the form.</p> + + </dd> + + <dt><var title="">form</var> . <code title="dom-form-reset"><a href="#dom-form-reset">reset</a></code>()</dt> + + <dd> + + <p>Resets the form.</p> + + </dd> + + <dt><var title="">form</var> . <code title="dom-form-checkValidity"><a href="#dom-form-checkvalidity">checkValidity</a></code>()</dt> + + <dd> + + <p>Returns true if the form's controls are all valid; otherwise, + returns false.</p> + + </dd> + + <dt><var title="">form</var> . <code title="dom-form-dispatchFormInput"><a href="#dom-form-dispatchforminput">dispatchFormInput</a></code>()</dt> + + <dd> + + <p>Dispatches a <code title="event-forminput">forminput</code> event at all the form controls.</p> + + </dd> + + <dt><var title="">form</var> . <code title="dom-form-dispatchFormChange"><a href="#dom-form-dispatchformchange">dispatchFormChange</a></code>()</dt> + + <dd> + + <p>Dispatches a <code title="event-formchange">formchange</code> event at all the form controls.</p> + + </dd> + + </dl><div class="example"> + + <p>This example shows two search forms:</p> + + <pre><form action="http://www.google.com/search" method="get"> + <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search..."> +</form> +<form action="http://www.bing.com/search" method="get"> + <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search..."> +</form></pre> + + </div><h4 id="the-fieldset-element"><span class="secno">4.10.2 </span>The <dfn><code>fieldset</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="sections.html#sectioning-root">Sectioning root</a>.</dd> + <dd><a href="#category-listed" title="category-listed">Listed</a> <a href="#form-associated-element">form-associated element</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd> + <dt>Content model:</dt> + <dd>Optionally a <code><a href="#the-legend-element">legend</a></code> element, followed by <a href="content-models.html#flow-content">flow content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-fieldset-disabled"><a href="#attr-fieldset-disabled">disabled</a></code></dd> + <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd> + <dd><code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmlfieldsetelement">HTMLFieldSetElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + attribute boolean <a href="#dom-fieldset-disabled" title="dom-fieldset-disabled">disabled</a>; + readonly attribute <a href="#htmlformelement">HTMLFormElement</a> <a href="#dom-fae-form" title="dom-fae-form">form</a>; + attribute DOMString <a href="#dom-fe-name" title="dom-fe-name">name</a>; + + readonly attribute DOMString <a href="#dom-fieldset-type" title="dom-fieldset-type">type</a>; + + readonly attribute <a href="urls.html#htmlformcontrolscollection">HTMLFormControlsCollection</a> <a href="#dom-fieldset-elements" title="dom-fieldset-elements">elements</a>; + + readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>; + readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>; + readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>; + boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>(); + void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error); +};</pre> + </dd> + </dl><p>The <code><a href="#the-fieldset-element">fieldset</a></code> element <a href="#represents">represents</a> a set + of form controls optionally grouped under a common name.</p><p>The name of the group is given by the first <code><a href="#the-legend-element">legend</a></code> + element that is a child of the <code><a href="#the-fieldset-element">fieldset</a></code> element, if + any. The remainder of the descendants form the group.</p><p>The <dfn id="attr-fieldset-disabled" title="attr-fieldset-disabled"><code>disabled</code></dfn> + attribute, when specified, causes all the form control descendants + of the <code><a href="#the-fieldset-element">fieldset</a></code> element, excluding those that are + descendants of the <code><a href="#the-fieldset-element">fieldset</a></code> element's first + <code><a href="#the-legend-element">legend</a></code> element child, if any, to be <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>.</p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to + explicitly associate the <code><a href="#the-fieldset-element">fieldset</a></code> element with its + <a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> + attribute represents the element's name.</p><dl class="domintro"><dt><var title="">fieldset</var> . <code title="dom-fieldset-type"><a href="#dom-fieldset-type">type</a></code></dt> + + <dd> + + <p>Returns the string "fieldset".</p> + + </dd> + + <dt><var title="">fieldset</var> . <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code></dt> + + <dd> + + <p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the form controls in + the element.</p> + + </dd> + + </dl><div class="example"> + + <p>The following snippet shows a fieldset with a checkbox in the + legend that controls whether or not the fieldset is enabled. The + contents of the fieldset consist of two required text fields and an + optional year/month control.</p> + + <pre><fieldset name="clubfields" disabled> + <legend> <label> + <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> + Use Club Card + </label> </legend> + <p><label>Name on card: <input name=clubname required></label></p> + <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> + <p><label>Expiry date: <input name=clubexp type=month></label></p> +</fieldset></pre> + + </div><h4 id="the-legend-element"><span class="secno">4.10.3 </span>The <dfn><code>legend</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd>None.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>As the first child of a <code><a href="#the-fieldset-element">fieldset</a></code> element.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dt>DOM interface:</dt> + <dd> + <pre class="idl">interface <dfn id="htmllegendelement">HTMLLegendElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + readonly attribute <a href="#htmlformelement">HTMLFormElement</a> <a href="#dom-legend-form" title="dom-legend-form">form</a>; +};</pre> + </dd> + </dl><p>The <code><a href="#the-legend-element">legend</a></code> element <a href="#represents">represents</a> a caption + for the rest of the contents of the <code><a href="#the-legend-element">legend</a></code> element's + parent <code><a href="#the-fieldset-element">fieldset</a></code> element.</p><dl class="domintro"><dt><var title="">legend</var> . <code title="dom-legend-form"><a href="#dom-legend-form">form</a></code></dt> + + <dd> + + <p>Returns the element's <code><a href="#the-form-element">form</a></code> element, if any, or + null otherwise.</p> + + </dd> + + </dl><h4 id="the-label-element"><span class="secno">4.10.4 </span>The <dfn><code>label</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt> + <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> + <dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd> + <dd><a href="#form-associated-element">Form-associated element</a>.</dd> + <dt>Contexts in which this element may be used:</dt> + <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd> + <dt>Content model:</dt> + <dd><a href="content-models.html#phrasing-content">Phrasing content</a>, but with no descendant <a href="#category-label" title="category-label">labelable form-associated elements</a> unless it is the element's <a href="#labeled-control">labeled control</a>, and no descendant <code><a href="#the-label-element">label</a></code> elements.</dd> + <dt>Content attributes:</dt> + <dd><a href="elements.html#global-attributes">Global attributes</a></dd> + <dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd> + <dd><code title="attr-label-for"><a href="#attr-label-for">for</a></code></dd> + <dt>DOM interface:</dt> + <dd> +<pre class="idl">interface <dfn id="htmllabelelement">HTMLLabelElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { + readonly attribute <a href="#htmlformelement">HTMLFormElement</a> <a href="#dom-fae-form" title="dom-fae-form">form</a>; + attribute DOMString <a href="#dom-label-htmlfor" title="dom-label-htmlFor">htmlFor</a>; + readonly attribute <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-label-control" title="dom-label-control">control</a>; +};</pre> + </dd> + </dl><p>The <code><a href="#the-label-element">label</a></code> <a href="#represents">represents</a> a caption in a + user interface. The caption can be associated with a specific form + control, either using <code title="attr-label-for"><a href="#attr-label-for">for</a></code> attribute, or by putting the form + control inside the <code><a href="#the-label-element">label</a></code> element itself.</p><p>The <dfn id="attr-label-for" title="attr-label-for"><code>for</code></dfn> attribute + may be specified to indicate a form control with which the caption + is to be associated. If the attribute is specified, the attribute's + value must be the ID of a <a href="#category-label" title="category-label">labelable + form-associated element</a> in the same <code>Document</code> as + the <code><a href="#the-label-element">label</a></code> element. </p><dl class="domintro"><dt><var title="">label</var> . <code title="dom-label-control"><a href="#dom-label-control">control</a></code></dt> + + <dd> + + <p>Returns the form control that is associated with this element.</p> + + </dd> + + </dl><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to + explicitly associate the <code><a href="#the-label-element">label</a></code> element with its + <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p><hr><dl class="domintro"><dt><var title="">control</var> . <code title="dom-lfe-labels"><a href="#dom-lfe-labels">labels</a></code></dt> + + <dd> + + <p>Returns a <code>NodeList</code> of all the <code><a href="#the-label-element">label</a></code> + elements that the form control is associated with.</p> + + </dd> + + </dl><div class="example"> + + <p>The following example shows three form controls each with a + label, two of which have small text showing the right format for + users to use.</p> + + <pre><p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p> +<p><label>Age: <input name=age type=number min=0></label></p> +<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p></pre> + + </div></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.555 retrieving revision 1.556 diff -u -d -r1.555 -r1.556 --- interactive-elements.html 3 Jan 2010 15:08:14 -0000 1.555 +++ interactive-elements.html 3 Jan 2010 15:15:06 -0000 1.556 @@ -213,4 +213,2939 @@ .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-tab \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { [...2911 lines suppressed...] + menu</a>. The value must be the ID of a <code><a href="#menus">menu</a></code> element + in the DOM. </p><div class="example"> + + <p>Here is an example of a context menu for an input control:</p> + + <pre><form name="npc"> + <label>Character name: <input name=char type=text contextmenu=namemenu required></label> + <menu type=context id=namemenu> + <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"> + <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"> + </menu> +</form></pre> + + <p>This adds to items to the control's context menu, one called + "Pick random name", and one called "Prefill other fields based on + name". They invoke scripts that are not shown in the example + above.</p> + + </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.557 retrieving revision 1.558 diff -u -d -r1.557 -r1.558 --- editing.html 3 Jan 2010 15:08:14 -0000 1.557 +++ editing.html 3 Jan 2010 15:15:05 -0000 1.558 @@ -213,4 +213,598 @@ .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-exam \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="links.html" title="6.10 Links" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="dnd.html" title="7.9 Drag and drop" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="links.html">← 6.10 Links</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="dnd.html">7.9 Drag and drop →</a> + <ol class="toc"><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></ol></li></ol></div> + + <h2 id="editing"><span class="secno">7 </span><dfn>User Interaction</dfn></h2><p>This section describes various features that allow authors to + enable users to edit documents and parts of documents + interactively.</p><h3 id="the-hidden-attribute"><span class="secno">7.1 </span>The <dfn title="attr-hidden"><code>hidden</code></dfn> attribute</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All <a href="infrastructure.html#html-elements">HTML elements</a> may have the <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> content attribute set. The <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean + attribute</a>. When specified on an element, it indicates that + the element is not yet, or is no longer, relevant. </p><div class="example"> + + <p>In the following skeletal example, the attribute is used to hide + the Web game's main screen until the user logs in:</p> + + <pre> <h1>The Example Game</h1> + <section id="login"> + <h2>Login</h2> + <form> + ... + <!-- calls login() once the user's credentials have been checked --> + </form> + <script> + function login() { + // switch screens + document.getElementById('login').hidden = true; + document.getElementById('game').hidden = false; + } + </script> + </section> + <section id="game" hidden> + ... + </section></pre> + + </div><p>The <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute must not be + used to hide content that could legitimately be shown in another + presentation. For example, it is incorrect to use <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> to hide panels in a tabbed dialog, + because the tabbed interface is merely a kind of overflow + presentation — showing all the form controls in one big page + with a scrollbar would be equivalent, and no less correct.</p><p>Elements in a section hidden by the <code title="attr-hidden"><a href="#the-hidden-attribute">hidden</a></code> attribute are still active, + e.g. scripts and form controls in such sections still render execute + and submit respectively. Only their presentation to the user + changes.</p><h3 id="activation"><span class="secno">7.2 </span>Activation</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if + click() can't be done in IE; can this be emulated in IE by + posting a synthetic mouse click event with those X and Y + coords? (ack Csaba Gabor) + --><dl class="domintro"><dt><var title="">element</var> . <code title="dom-click"><a href="#dom-click">click</a></code>()</dt> + + <dd> + + <p>Acts as if the element was clicked.</p> + + </dd> + + </dl><h3 id="scrolling-elements-into-view"><span class="secno">7.3 </span>Scrolling elements into view</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- maybe this should move to [CSSOM] --><dl class="domintro"><dt><var title="">element</var> . <code title="dom-scrollIntoView"><a href="#dom-scrollintoview">scrollIntoView</a></code>( [ <var title="">top</var> ] )</dt> + + <dd> + + <p>Scrolls the element into view. If the <var title="">top</var> + argument is true, then the element will be scrolled to the top of + the viewport, otherwise it'll be scrolled to the bottom. The + default is the top.</p> + + </dd> + + </dl><h3 id="focus"><span class="secno">7.4 </span>Focus</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%20%0A...%3Cform%3E%3Cinput%20name%3Da%20onfocus%3D%22value%2B%3D1%3Bd.name%3D%27a%27%3Bname%3D%27d%27%3Bb.focus()%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22value%2B%3D1%3Bc.focus()%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22value%2B%3D1%3Bd.focus()%22%3E%0A%3Cinput%20name%3Dd%20onfocus%3D%22value%2B%3D1%3Ba.focus()%22%3E --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onfocus%3D%22t.value%2B%3D%27af1%20%27%3Bb.focus()%3Balert(document.activeElement.name)%3Bt.value%2B%3D%27af2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27ab%20%27%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D%27bf1%20%27%3Bc.focus()%3Bt.value%2B%3D%27bf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27bb%20%27%3B%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22t.value%2B%3D%27cf1%20%27%3Bc.focus()%3Bt.value%2B%3D%27cf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27cb%20%27%3B%22%3E%0A --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cbody%20onload%3D%22document.forms%5B0%5D.a.focus()%22%3E%0A...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onblur%3D%22t.value%2B%3D'ab%20'%3B%20b.focus()%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D'bf1%20'%3Ba.focus()%3Bt.value%2B%3D'bf2%20'%3B%22%20onblur%3D%22t.value%2B%3D'bb%20'%3B%22%3E --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cbody%3E...%3Cform%3E%0A%3Ctextarea%20name%3Dt%20cols%3D100%20rows%3D3%3E%3C%2Ftextarea%3E%3Cp%3E%0A%3Cinput%20name%3Da%20onfocus%3D%22t.value%2B%3D%27af%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27ab1%20%27%3Bb.focus()%3Bt.value%2B%3D%27ab2%20%27%3B%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22t.value%2B%3D%27bf1%20%27%3Ba.focus()%3Bt.value%2B%3D%27bf2%20%27%3B%22%20onblur%3D%22t.value%2B%3D%27bb%20%27%3B%22%3E --><!-- v2: more things to define, if no other specs define them: + - define onfocus/onblur behaviour for Window + - Other things to look at are IE's focus APIs (HTMLElement.setActive(), + onBeforeActivate, onActivate, onBeforeDeactivate, onDeactivate): + https://bugzilla.mozilla.org/show_bug.cgi?id=296471 + https://bugzilla.mozilla.org/show_bug.cgi?id=296469 + http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setactive.asp + http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp + --><h4 id="sequential-focus-navigation"><span class="secno">7.4.1 </span>Sequential focus navigation</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-tabindex" title="attr-tabindex"><code>tabindex</code></dfn> + content attribute specifies whether the element is focusable, + whether it can be reached using sequential focus navigation, and the + relative order of the element for the purposes of sequential focus + navigation. The name "tab index" comes from the common use of the + "tab" key to navigate through the focusable elements. The term + "tabbing" refers to moving forward through the focusable elements + that can be reached using sequential focus navigation.</p><p>The <code title="attr-tabindex"><a href="#attr-tabindex">tabindex</a></code> attribute, if + specified, must have a value that is a <a href="common-microsyntaxes.html#valid-integer">valid + integer</a>.</p><h4 id="document-level-focus-apis"><span class="secno">7.4.2 </span>Document-level focus APIs</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-activeElement"><a href="#dom-document-activeelement">activeElement</a></code></dt> + + <dd> + + <p>Returns the currently focused element.</p> + + </dd> + + <dt><var title="">document</var> . <code title="dom-document-hasFocus"><a href="#dom-document-hasfocus">hasFocus</a></code>()</dt> + + <dd> + + <p>Returns true if the document has focus; otherwise, returns false.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-window-focus"><a href="#dom-window-focus">focus</a></code>()</dt> + + <dd> + + <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p> + + </dd> + + <dt><var title="">window</var> . <code title="dom-window-blur"><a href="#dom-window-blur">blur</a></code>()</dt> + + <dd> + + <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead.</p> + + </dd> + + </dl><h4 id="element-level-focus-apis"><span class="secno">7.4.3 </span>Element-level focus APIs</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-focus"><a href="#dom-focus">focus</a></code>()</dt> + + <dd> + + <p>Focuses the element.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-blur"><a href="#dom-blur">blur</a></code>()</dt> + + <dd> + + <p>Unfocuses the element. Use of this method is discouraged. Focus another element instead.</p> + + </dd> + + </dl><h3 id="the-accesskey-attribute"><span class="secno">7.5 </span>The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All <a href="infrastructure.html#html-elements">HTML elements</a> may have the <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code> content attribute set. The + <code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code> attribute's value is + used by the user agent as a guide for creating a keyboard shortcut + that activates or focuses the element.</p><p>If specified, the value must be an <a href="common-microsyntaxes.html#ordered-set-of-unique-space-separated-tokens">ordered set of unique + space-separated tokens</a>, each of which must be exactly one + Unicode code point in length.</p><div class="example"> + + <p>In the following example, a variety of links are given with + access keys so that keyboard users familiar with the site can + more quickly navigate to the relevant pages:</p> + + <pre><nav> + <p> + <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> | + <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> | + <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> | + <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> | + <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a> + </p> +</nav></pre> + + </div><div class="example"> + + <p>In the following example, the search field is given two possible + access keys, "s" and "0" (in that order). A user agent on a device + with a full keyboard might pick + <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the + shortcut key, while a user agent on a small device with just a + numeric keypad might pick just the plain unadorned key + <kbd><kbd>0</kbd></kbd>:</p> + + <pre><form action="/search"> + <label>Search: <input type="search" name="q" accesskey="s 0"></label> + <input type="submit"> +</form></pre> + + </div><div class="example"> + + <p>In the following example, a button has possible access keys + described. A script then tries to update the button's label to + advertise the key combination the user agent selected.</p> + + <pre><input type=submit accesskey="N @ 1" value="Compose"> +... +<script> + function labelButton(button) { + if (button.accessKeyLabel) + button.value += ' (' + button.accessKeyLabel + ')'; + } + var inputs = document.getElementsByTagName('input'); + for (var i = 0; i < inputs.length; i += 1) { + if (inputs[i].type == "submit") + labelButton(inputs[i]); + } +</script></pre> + + <p>On one user agent, the button's label might become + "<samp>Compose (⌘N)</samp>". On another, it might become + "<samp>Compose (Alt+⇧+1)</samp>". If the user agent doesn't + assign a key, it will be just "<samp>Compose</samp>". The exact + string depends on what the <a href="#assigned-access-key">assigned access key</a> is, and + on how the user agent represents that key combination.</p> + + </div><h3 id="selection"><span class="secno">7.6 </span>The text selection APIs</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Every <a href="browsers.html#browsing-context">browsing context</a> has <dfn id="the-selection" title="the + selection">a selection</dfn>. The selection can be empty, and the + selection can have more than one range (a disjointed selection). The + user agent should allow the user to change the selection. User + agents are not required to let the user select more than one range, + and may collapse multiple ranges in the selection to a single range + when the user interacts with the selection. (But, of course, the + user agent may let the user create selections with multiple + ranges.)</p><p>This one selection must be shared by all the content of the + browsing context (though not by nested <a href="browsers.html#browsing-context" title="browsing + context">browsing contexts</a>), including any editing hosts in + the document. (Editing hosts that are not inside a document cannot + have a selection.)</p><p>Mostly for historical reasons, in addition to the <a href="browsers.html#browsing-context">browsing + context</a>'s <a href="#the-selection" title="the selection">selection</a>, each + <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> and <code><a href="the-input-element.html#the-input-element">input</a></code> element has an + independent selection. These are the <dfn id="text-field-selection" title="text field + selection">text field selections</dfn>.</p><!-- v2DATAGRID v2DGS: + <p>The <code>datagrid</code> and <code>select</code> elements also + have selections, indicating which items have been picked by the + user. These are not discussed in this section.</p> + --><p>The <code><a href="the-button-element.html#the-select-element">select</a></code> element also has a selection, indicating + which items have been picked by the user. This is not discussed in + this section.</p><p class="note">This specification does not specify how selections + are presented to the user. The Selectors specification, in + conjunction with CSS, can be used to style text selections using the + <code title="selector-selection">::selection</code> + pseudo-element. <a href="references.html#refsSELECTORS">[SELECTORS]</a> <a href="references.html#refsCSS">[CSS]</a></p><h4 id="documentSelection"><span class="secno">7.6.1 </span>APIs for the browsing context selection</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-getSelection"><a href="#dom-getselection">getSelection</a></code>()</dt> + <dt><var title="">document</var> . <code title="dom-document-getSelection"><a href="#dom-document-getselection">getSelection</a></code>()</dt> + + <dd> + + <p>Returns the <code><a href="#selection-0">Selection</a></code> object for the window, which + stringifies to the text of the current selection.</p> + + </dd> + + </dl><pre class="idl">interface <dfn id="selection-0">Selection</dfn> { + readonly attribute Node <a href="#dom-selection-anchornode" title="dom-selection-anchorNode">anchorNode</a>; + readonly attribute long <a href="#dom-selection-anchoroffset" title="dom-selection-anchorOffset">anchorOffset</a>; + readonly attribute Node <a href="#dom-selection-focusnode" title="dom-selection-focusNode">focusNode</a>; + readonly attribute long <a href="#dom-selection-focusoffset" title="dom-selection-focusOffset">focusOffset</a>; + readonly attribute boolean <a href="#dom-selection-iscollapsed" title="dom-selection-isCollapsed">isCollapsed</a>; + void <a href="#dom-selection-collapse" title="dom-selection-collapse">collapse</a>(in Node parentNode, in long offset); + void <a href="#dom-selection-collapsetostart" title="dom-selection-collapseToStart">collapseToStart</a>(); + void <a href="#dom-selection-collapsetoend" title="dom-selection-collapseToEnd">collapseToEnd</a>(); + void <a href="#dom-selection-selectallchildren" title="dom-selection-selectAllChildren">selectAllChildren</a>(in Node parentNode); + void <a href="#dom-selection-deletefromdocument" title="dom-selection-deleteFromDocument">deleteFromDocument</a>(); + readonly attribute long <a href="#dom-selection-rangecount" title="dom-selection-rangeCount">rangeCount</a>; + Range <a href="#dom-selection-getrangeat" title="dom-selection-getRangeAt">getRangeAt</a>(in long index); + void <a href="#dom-selection-addrange" title="dom-selection-addRange">addRange</a>(in Range range); + void <a href="#dom-selection-removerange" title="dom-selection-removeRange">removeRange</a>(in Range range); + void <a href="#dom-selection-removeallranges" title="dom-selection-removeAllRanges">removeAllRanges</a>(); + <a href="#dom-selection-tostring" title="dom-selection-toString">stringifier</a> DOMString (); +};</pre><!-- + See also: + http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl + This spec doesn't have everything from there yet, in particular + selectionLanguageChange() and containsNode() are missing. They are missing + because I couldn't work out how to define them in terms of Ranges. + + I also haven't included extend(): + + void <span title="dom-selection-extend">extend</span>(in Node parentNode, in long offset); + // raise if no range + // raise WRONG_DOCUMENT_ERR if parentNode not in document + // do something + + ...mostly because I can't work out how to describe what it does quickly. +--><p>The <code><a href="#selection-0">Selection</a></code> interface is represents a list of + <code>Range</code> objects. The first item in the list has index 0, + and the last item has index <var title="">count</var>-1, where + <var title="">count</var> is the number of ranges in the list. <a href="references.html#refsDOMRANGE">[DOMRANGE]</a></p><p>All of the members of the <code><a href="#selection-0">Selection</a></code> interface are + defined in terms of operations on the <code>Range</code> objects + represented by this object. These operations can raise exceptions, + as defined for the <code>Range</code> interface; this can therefore + result in the members of the <code><a href="#selection-0">Selection</a></code> interface + raising exceptions as well, in addition to any explicitly called out + below.</p><dl class="domintro"><dt><var title="">selection</var> . <code title="dom-selection-anchorNode"><a href="#dom-selection-anchornode">anchorNode</a></code></dt> + + <dd> + + <p>Returns the element that contains the start of the selection.</p> + + <p>Returns null if there's no selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-anchorOffset"><a href="#dom-selection-anchoroffset">anchorOffset</a></code></dt> + + <dd> + + <p>Returns the offset of the start of the selection relative to the element that contains the start of the selection.</p> + + <p>Returns 0 if there's no selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-focusNode"><a href="#dom-selection-focusnode">focusNode</a></code></dt> + + <dd> + + <p>Returns the element that contains the end of the selection.</p> + + <p>Returns null if there's no selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-focusOffset"><a href="#dom-selection-focusoffset">focusOffset</a></code></dt> + + <dd> + + <p>Returns the offset of the end of the selection relative to the element that contains the end of the selection.</p> + + <p>Returns 0 if there's no selection.</p> + + </dd> + + <dt><var title="">collapsed</var> = <var title="">selection</var> . <code title="dom-selection-isCollapsed"><a href="#dom-selection-iscollapsed">isCollapsed</a></code>()</dt> + + <dd> + + <p>Returns true if there's no selection or if the selection is empty. Otherwise, returns false.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-collapsed">collapsed</code>(<var title="">parentNode</var>, <var title="">offset</var>)</dt> + + <dd> + + <p>Replaces the selection with an empty one at the given position.</p> + + <p>Throws a <code><a href="urls.html#wrong_document_err">WRONG_DOCUMENT_ERR</a></code> exception if the given node is in a different document.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-collapseToStart"><a href="#dom-selection-collapsetostart">collapseToStart</a></code>()</dt> + + <dd> + + <p>Replaces the selection with an empty one at the position of the start of the current selection.</p> + + <p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if there is no selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-collapseToEnd"><a href="#dom-selection-collapsetoend">collapseToEnd</a></code>()</dt> + + <dd> + + <p>Replaces the selection with an empty one at the position of the end of the current selection.</p> + + <p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if there is no selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-selectAllChildren"><a href="#dom-selection-selectallchildren">selectAllChildren</a></code>(<var title="">parentNode</var>)</dt> + + <dd> + + <p>Replaces the selection with one that contains all the contents of the given element.</p> + + <p>Throws a <code><a href="urls.html#wrong_document_err">WRONG_DOCUMENT_ERR</a></code> exception if the given node is in a different document.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-deleteFromDocument"><a href="#dom-selection-deletefromdocument">deleteFromDocument</a></code>()</dt> + + <dd> + + <p>Deletes the selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-rangeCount"><a href="#dom-selection-rangecount">rangeCount</a></code></dt> + + <dd> + + <p>Returns the number of ranges in the selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-getRangeAt"><a href="#dom-selection-getrangeat">getRangeAt</a></code>(<var title="">index</var>)</dt> + + <dd> + + <p>Returns the given range.</p> + + <p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the value is out of range.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-addRange"><a href="#dom-selection-addrange">addRange</a></code>(<var title="">range</var>)</dt> + + <dd> + + <p>Adds the given range to the selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-removeRange"><a href="#dom-selection-removerange">removeRange</a></code>(<var title="">range</var>)</dt> + + <dd> + + <p>Removes the given range from the selection, if the range was one of the ones in the selection.</p> + + </dd> + + <dt><var title="">selection</var> . <code title="dom-selection-removeAllRanges"><a href="#dom-selection-removeallranges">removeAllRanges</a></code>()</dt> + + <dd> + + <p>Removes all the ranges in the selection.</p> + + </dd> + + </dl><div class="example"> + <p>In the following document fragment, the emphasized parts + indicate the selection.</p> + <pre><p>The cute girl likes <em>the </em><cite><em>Oxford English</em> Dictionary</cite>.</p></pre> + <p>If a script invoked <code title="">window.getSelection().toString()</code>, the return value + would be "<code>the Oxford English</code>".</p> + </div><!-- v2DATAGRID v2DGS: + <p class="note">The <code>Selection</code> interface has no relation + to the <code>DataGridSelection</code> interface.</p> + --><h4 id="textFieldSelection"><span class="secno">7.6.2 </span>APIs for the text field selections</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2 idea: DOM Range APIs to expose the textarea/input edited + value (ack martijnw) --><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> elements define + the following members in their DOM interfaces for handling their + text selection:</p><pre class="idl extract"> void <a href="#dom-textarea-input-select" title="dom-textarea/input-select">select</a>(); + attribute unsigned long <a href="#dom-textarea-input-selectionstart" title="dom-textarea/input-selectionStart">selectionStart</a>; + attribute unsigned long <a href="#dom-textarea-input-selectionend" title="dom-textarea/input-selectionEnd">selectionEnd</a>; + void <a href="#dom-textarea-input-setselectionrange" title="dom-textarea/input-setSelectionRange">setSelectionRange</a>(in unsigned long start, in unsigned long end);</pre><!-- v2: also add textLength? it seems to be widely used --><p>These methods and attributes expose and control the selection of + <code><a href="the-input-element.html#the-input-element">input</a></code> and <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> text fields.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select</a></code>()</dt> + + <dd> + + <p>Selects everything in the text field.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-textarea/input-selecionStart">selectionStart</code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the offset to the start of the selection.</p> + + <p>Can be set, to change the start of the selection.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-textarea/input-selecionEnd">selectionEnd</code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns the offset to the end of the selection.</p> + + <p>Can be set, to change the end of the selection.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange</a></code>(<var title="">start</var>, <var title="">end</var>)</dt> + + <dd> + + <p>Changes the selection to cover the given substring.</p> + + </dd> + + </dl><div class="example"> + + <p>To obtain the currently selected text, the following JavaScript + suffices:</p> + + <pre>var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);</pre> + + <p>...where <var title="">control</var> is the <code><a href="the-input-element.html#the-input-element">input</a></code> + or <code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element.</p> + + </div><p>Characters with no visible rendering, such as U+200D ZERO WIDTH + JOINER, still count as characters. Thus, for instance, the selection + can include just an invisible character, and the text insertion + cursor can be placed to one side or another of such a character.</p><h3 id="contenteditable"><span class="secno">7.7 </span>The <code title="attr-contenteditable"><a href="#attr-contenteditable">contenteditable</a></code> attribute</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-contenteditable" title="attr-contenteditable"><code>contenteditable</code></dfn> + attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> whose keywords are + the empty string, <code title="">true</code>, and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In + addition, there is a third state, the <i>inherit</i> state, which is + the <i>missing value default</i> (and the <i>invalid value + default</i>).</p><p>The <i>true</i> state indicates that the element is editable. The + <i>inherit</i> state indicates that the element is editable if its + parent is. The <i>false</i> state indicates that the element is not + editable.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-contentEditable"><a href="#dom-contenteditable">contentEditable</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">inherit</code>", based + on the state of the <code title="attr-contenteditable"><a href="#attr-contenteditable">contenteditable</a></code> attribute.</p> + + <p>Can be set, to change that state.</p> + + <p>Throws a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> exception if the new value + isn't one of those strings.</p> + + </dd> + + <dt><var title="">element</var> . <code title="dom-isContentEditable"><a href="#dom-iscontenteditable">isContentEditable</a></code></dt> + + <dd> + + <p>Returns true if the element is editable; otherwise, returns false.</p> + + </dd> + + </dl><h4 id="making-entire-documents-editable"><span class="secno">7.7.1 </span>Making entire documents editable</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-designMode"><a href="#designMode">designMode</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns "<code title="">on</code>" if the document is editable, + and "<code title="">off</code>" if it isn't.</p> + + <p>Can be set, to change the document's current state.</p> + + </dd> + + </dl><h3 id="spelling-and-grammar-checking"><span class="secno">7.8 </span>Spelling and grammar checking</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-spellcheck" title="attr-spellcheck"><code>spellcheck</code></dfn> + attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> whose keywords are + the empty string, <code title="">true</code> and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In + addition, there is a third state, the <i>default</i> state, which is + the <i>missing value default</i> (and the <i>invalid value + default</i>).</p><p>The <i>true</i> state indicates that the element is to have its + spelling and grammar checked. The <i>default</i> state indicates + that the element is to act according to a default behavior, possibly + based on the parent element's own <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> state. The <i>false</i> + state indicates that the element is not to be checked.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code> [ = <var title="">value</var> ]</dt> + + <dd> + + <p>Returns "<code title="">true</code>", "<code title="">false</code>", or "<code title="">default</code>", based + on the state of the <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> attribute.</p> + + <p>Can be set, to change that state.</p> + + <p>Throws a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> exception if the new value + isn't one of those strings.</p> + + </dd> + + </dl><p class="note">This specification does not define the user + interface for spelling and grammar checkers. A user agent could + offer on-demand checking, could perform continuous checking while + the checking is enabled, or could use other interfaces.</p></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.557 retrieving revision 1.558 diff -u -d -r1.557 -r1.558 --- video.html 3 Jan 2010 15:08:16 -0000 1.557 +++ video.html 3 Jan 2010 15:15:07 -0000 1.558 @@ -0,0 +1,1331 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<!DOCTYPE html> +<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.8.7 The video element — HTML5 (Author Edition)</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"><style type="text/css"> + pre { margin-left: 2em; white-space: pre-wrap; } + h2 { margin: 3em 0 1em 0; } + h3 { margin: 2.5em 0 1em 0; } + h4 { margin: 2.5em 0 0.75em 0; } + h5, h6 { margin: 2.5em 0 1em; } + h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } + h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } + p { margin: 1em 0; } [...1301 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.558 retrieving revision 1.559 diff -u -d -r1.558 -r1.559 --- browsers.html 3 Jan 2010 15:08:14 -0000 1.558 +++ browsers.html 3 Jan 2010 15:15:05 -0000 1.559 @@ -213,4 +213,469 @@ .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 \ No newline at end of file + .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } + .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } + .apple-table-examples sup { line-height: 0; } + + </style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script> + function getCookie(name) { + var params = location.search.substr(1).split("&"); + for (var index = 0; index < params.length; index++) { + if (params[index] == name) + return "1"; + var data = params[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + var cookies = document.cookie.split("; "); + for (var index = 0; index < cookies.length; index++) { + var data = cookies[index].split("="); + if (data[0] == name) + return unescape(data[1]); + } + return null; + } + function load(script) { + var e = document.createElement('script'); + e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer)); + document.body.appendChild(e); + } + function init() { + if (location.search == '?slow-browser') + return; + var configUI = document.createElement('div'); + configUI.id = 'configUI'; + document.body.appendChild(configUI); + // load('reviewer.js'); // would need cross-site XHR + if (document.getElementById('head')) + load('toc.js'); + + // load('updater.js'); // would need cross-site XHR + load('dfn.js'); + // load('status.js'); // would need cross-site XHR + if (getCookie('profile') == '1') + document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; + fixBrokenLink(); + } + </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="microdata.html" title="5 Microdata" rel="prev"> + <link href="Overview.html#contents" title="Table of contents" rel="index"> + <link href="timers.html" title="6.4 Timers" rel="next"> + </head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> + <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> + <h1>HTML5 (Author Edition)</h1> + </div><div> + <a href="microdata.html">← 5 Microdata</a> – + <a href="Overview.html#contents">Table of contents</a> – + <a href="timers.html">6.4 Timers →</a> + <ol class="toc"><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></ol></li></ol></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="the-iframe-element.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="the-iframe-element.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="the-iframe-element.html#the-iframe-element">iframe</a></code> element with a <code title="attr-iframe-seamless"><a href="the-iframe-element.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="urls.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="dnd.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="timers.html#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