summaryrefslogtreecommitdiff
path: root/test/data/html/web-apps.html
diff options
context:
space:
mode:
Diffstat (limited to 'test/data/html/web-apps.html')
-rw-r--r--test/data/html/web-apps.html41271
1 files changed, 41271 insertions, 0 deletions
diff --git a/test/data/html/web-apps.html b/test/data/html/web-apps.html
new file mode 100644
index 0000000..d685320
--- /dev/null
+++ b/test/data/html/web-apps.html
@@ -0,0 +1,41271 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+
+<html lang=en-GB-hixie>
+ <head>
+ <title>HTML 5</title>
+ <link href="/style/specification" rel=stylesheet type="text/css">
+ <link href="/images/icon" rel=icon>
+
+ <style type="text/css">
+ h4 + .element { margin-top: -2.5em; padding-top: 2em; }
+ h4 + p + .element { margin-top: -5em; padding-top: 4em; }
+ .element { background: #EEFFEE; color: black; margin: 0 0 1em -1em; padding: 0 1em 0.25em 0.75em; border-left: solid #99FF99 0.25em; -padding: 0; /* that last decl is for IE6. Try removing it, it's hilarious! */ }
+ .proposal { border: blue solid; padding: 1em; }
+ table.matrix, table.matrix td { border: none; text-align: right; }
+ table.matrix { margin-left: 2em; }
+ </style>
+
+ <body class=draft>
+ <div class=head>
+ <p><a class=logo href="http://www.whatwg.org/" rel=home><img alt=WHATWG
+ src="/images/logo"></a></p>
+
+ <h1 id=html-5>HTML 5</h1>
+
+ <h2 class="no-num no-toc" id=working>Working Draft &mdash; 14 June 2007</h2>
+
+ <p>You can take part in this work. <a
+ href="http://www.whatwg.org/mailing-list">Join the working group's
+ discussion list.</a></p>
+
+ <p><strong>Web designers!</strong> We have a <a
+ href="http://blog.whatwg.org/faq/">FAQ</a>, a <a
+ href="http://forums.whatwg.org/">forum</a>, and a <a
+ href="http://www.whatwg.org/mailing-list#help">help mailing list</a> for
+ you!</p>
+
+ <dl>
+ <dt>One-page version:
+
+ <dd><a
+ href="http://www.whatwg.org/specs/web-apps/current-work/">http://www.whatwg.org/specs/web-apps/current-work/</a>
+
+ <dt>Multiple-page version:
+
+ <dd><a
+ href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">http://www.whatwg.org/specs/web-apps/current-work/multipage/</a>
+
+ <dt>Version history:
+
+ <dd>Twitter messages (non-editorial changes only): <a
+ href="http://twitter.com/WHATWG">http://twitter.com/WHATWG</a>
+
+ <dd>Commit-Watchers mailing list: <a
+ href="http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org">http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org</a>
+
+ <dd>Interactive Web interface: <a
+ href="http://html5.org/tools/web-apps-tracker">http://html5.org/tools/web-apps-tracker</a>
+
+ <dd>Subversion interface: <a
+ href="http://svn.whatwg.org/">http://svn.whatwg.org/</a>
+
+ <dt>Editor:
+
+ <dd>Ian Hickson, Google, ian@hixie.ch
+ </dl>
+
+ <p class=copyright>&copy; Copyright 2004-2007 Apple Computer, Inc.,
+ Mozilla Foundation, and Opera Software ASA.</p>
+
+ <p class=copyright>You are granted a license to use, reproduce and create
+ derivative works of this document.</p>
+ </div>
+
+ <hr>
+
+ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
+
+ <p>This specification introduces features to HTML and the DOM that ease the
+ authoring of Web-based applications. Additions include the context menus,
+ a direct-mode graphics canvas, inline popup windows, and server-sent
+ events.
+
+ <h2 class="no-num no-toc" id=status>Status of this document</h2>
+
+ <p><strong>This is a work in progress!</strong> This document is changing
+ on a daily if not hourly basis in response to comments and as a general
+ part of its development process. Comments are very welcome, please send
+ them to <a href="mailto:whatwg@whatwg.org">whatwg@whatwg.org</a>. Thank
+ you.
+
+ <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 call for implementations should join the
+ <a href="/mailing-list">WHATWG mailing list</a> and take part in the
+ discussions.
+
+ <p>This specification is also being produced by the <a
+ href="http://www.w3.org/html/wg">W3C HTML WG</a>. The two specifications
+ are identical from the table of contents onwards.
+
+ <p>This specification is intended to replace (be the new version of) what
+ was previously the HTML4, XHTML 1.x, and DOM2 HTML specifications.
+
+ <h3 class="no-num no-toc" id=stability0>Stability</h3>
+
+ <p>Different parts of this specification are at different levels of
+ maturity.
+
+ <div id=stability></div>
+
+ <p class=big-issue>Known issues are usually marked like this. There are
+ some spec-wide issues that have not yet been addressed: case-sensitivity
+ is a very poorly handled topic right now, and the firing of events needs
+ to be unified (right now some bubble, some don't, they all use different
+ text to fire events, etc).
+
+ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
+ <!--begin-toc-->
+
+ <ul class=toc>
+ <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
+ <ul class=toc>
+ <li><a href="#scope"><span class=secno>1.1. </span>Scope</a>
+ <ul class=toc>
+ <li><a href="#relationship"><span class=secno>1.1.1.
+ </span>Relationship to HTML 4.01, XHTML 1.1, DOM2 HTML</a>
+
+ <li><a href="#relationship0"><span class=secno>1.1.2.
+ </span>Relationship to XHTML2</a>
+
+ <li><a href="#relationship1"><span class=secno>1.1.3.
+ </span>Relationship to XUL, Flash, Silverlight, and other proprietary
+ UI languages</a>
+ </ul>
+
+ <li><a href="#structure"><span class=secno>1.2. </span>Structure of this
+ specification</a>
+ <ul class=toc>
+ <li><a href="#how-to"><span class=secno>1.2.1. </span>How to read this
+ specification</a>
+ </ul>
+
+ <li><a href="#conformance"><span class=secno>1.3. </span>Conformance
+ requirements</a>
+ <ul class=toc>
+ <li><a href="#common"><span class=secno>1.3.1. </span>Common
+ conformance requirements for APIs exposed to JavaScript</a>
+
+ <li><a href="#dependencies"><span class=secno>1.3.2.
+ </span>Dependencies</a>
+
+ <li><a href="#features"><span class=secno>1.3.3. </span>Features
+ defined in other specifications</a>
+ </ul>
+
+ <li><a href="#terminology"><span class=secno>1.4. </span>Terminology</a>
+
+ <ul class=toc>
+ <li><a href="#html-vs"><span class=secno>1.4.1. </span>HTML vs
+ XHTML</a>
+ </ul>
+ </ul>
+
+ <li><a href="#dom"><span class=secno>2. </span>The Document Object
+ Model</a>
+ <ul class=toc>
+ <li><a href="#documents"><span class=secno>2.1. </span>Documents</a>
+ <ul class=toc>
+ <li><a href="#security"><span class=secno>2.1.1. </span>Security</a>
+
+ <li><a href="#resource"><span class=secno>2.1.2. </span>Resource
+ metadata management</a>
+ </ul>
+
+ <li><a href="#elements"><span class=secno>2.2. </span>Elements</a>
+ <ul class=toc>
+ <li><a href="#reflecting"><span class=secno>2.2.1. </span>Reflecting
+ content attributes in DOM attributes</a>
+ </ul>
+
+ <li><a href="#common0"><span class=secno>2.3. </span>Common DOM
+ interfaces</a>
+ <ul class=toc>
+ <li><a href="#collections"><span class=secno>2.3.1.
+ </span>Collections</a>
+ <ul class=toc>
+ <li><a href="#htmlcollection"><span class=secno>2.3.1.1.
+ </span>HTMLCollection</a>
+
+ <li><a href="#htmlformcontrolscollection"><span class=secno>2.3.1.2.
+ </span>HTMLFormControlsCollection</a>
+
+ <li><a href="#htmloptionscollection"><span class=secno>2.3.1.3.
+ </span>HTMLOptionsCollection</a>
+ </ul>
+
+ <li><a href="#domtokenlist"><span class=secno>2.3.2.
+ </span>DOMTokenList</a>
+
+ <li><a href="#dom-feature"><span class=secno>2.3.3. </span>DOM feature
+ strings</a>
+ </ul>
+
+ <li><a href="#dom-tree"><span class=secno>2.4. </span>DOM tree
+ accessors</a>
+
+ <li><a href="#dynamic"><span class=secno>2.5. </span>Dynamic markup
+ insertion</a>
+ <ul class=toc>
+ <li><a href="#controlling"><span class=secno>2.5.1. </span>Controlling
+ the input stream</a>
+
+ <li><a href="#dynamic0"><span class=secno>2.5.2. </span>Dynamic markup
+ insertion in HTML</a>
+
+ <li><a href="#dynamic1"><span class=secno>2.5.3. </span>Dynamic markup
+ insertion in XML</a>
+ </ul>
+
+ <li><a href="#apis-in"><span class=secno>2.6. </span>APIs in HTML
+ documents</a>
+ </ul>
+
+ <li><a href="#semantics"><span class=secno>3. </span>Semantics and
+ structure of HTML elements</a>
+ <ul class=toc>
+ <li><a href="#semantics-intro"><span class=secno>3.1.
+ </span>Introduction</a>
+
+ <li><a href="#common1"><span class=secno>3.2. </span>Common
+ microsyntaxes</a>
+ <ul class=toc>
+ <li><a href="#common2"><span class=secno>3.2.1. </span>Common parser
+ idioms</a>
+
+ <li><a href="#boolean"><span class=secno>3.2.2. </span>Boolean
+ attributes</a>
+
+ <li><a href="#numbers"><span class=secno>3.2.3. </span>Numbers</a>
+ <ul class=toc>
+ <li><a href="#unsigned"><span class=secno>3.2.3.1. </span>Unsigned
+ integers</a>
+
+ <li><a href="#signed"><span class=secno>3.2.3.2. </span>Signed
+ integers</a>
+
+ <li><a href="#real-numbers"><span class=secno>3.2.3.3. </span>Real
+ numbers</a>
+
+ <li><a href="#ratios"><span class=secno>3.2.3.4. </span>Ratios</a>
+
+ <li><a href="#percentages-and-dimensions"><span class=secno>3.2.3.5.
+ </span>Percentages and dimensions</a>
+
+ <li><a href="#lists"><span class=secno>3.2.3.6. </span>Lists of
+ integers</a>
+ </ul>
+
+ <li><a href="#dates"><span class=secno>3.2.4. </span>Dates and
+ times</a>
+ <ul class=toc>
+ <li><a href="#specific"><span class=secno>3.2.4.1. </span>Specific
+ moments in time</a>
+
+ <li><a href="#vaguer"><span class=secno>3.2.4.2. </span>Vaguer
+ moments in time</a>
+ </ul>
+
+ <li><a href="#time-offsets"><span class=secno>3.2.5. </span>Time
+ offsets</a>
+
+ <li><a href="#tokens"><span class=secno>3.2.6. </span>Tokens</a>
+
+ <li><a href="#keywords"><span class=secno>3.2.7. </span>Keywords and
+ enumerated attributes</a>
+
+ <li><a href="#syntax-references"><span class=secno>3.2.8.
+ </span>References</a>
+ </ul>
+
+ <li><a href="#documents0"><span class=secno>3.3. </span>Documents and
+ document fragments</a>
+ <ul class=toc>
+ <li><a href="#semantics0"><span class=secno>3.3.1.
+ </span>Semantics</a>
+
+ <li><a href="#structure0"><span class=secno>3.3.2.
+ </span>Structure</a>
+
+ <li><a href="#kinds"><span class=secno>3.3.3. </span>Kinds of
+ elements</a>
+ <ul class=toc>
+ <li><a href="#block-level"><span class=secno>3.3.3.1.
+ </span>Block-level elements</a>
+
+ <li><a href="#inline-level"><span class=secno>3.3.3.2.
+ </span>Inline-level content</a>
+
+ <li><a href="#transparent"><span class=secno>3.3.3.3.
+ </span>Transparent content models</a>
+
+ <li><a href="#determining"><span class=secno>3.3.3.4.
+ </span>Determining if a particular element contains block-level
+ elements or inline-level content</a>
+
+ <li><a href="#interactive0"><span class=secno>3.3.3.5.
+ </span>Interactive elements</a>
+
+ <li><a href="#paragraphs"><span class=secno>3.3.3.6.
+ </span>Paragraphs</a>
+ </ul>
+ </ul>
+
+ <li><a href="#global"><span class=secno>3.4. </span>Global
+ attributes</a>
+ <ul class=toc>
+ <li><a href="#the-id"><span class=secno>3.4.1. </span>The
+ <code>id</code> attribute</a>
+
+ <li><a href="#the-title"><span class=secno>3.4.2. </span>The
+ <code>title</code> attribute</a>
+
+ <li><a href="#the-lang"><span class=secno>3.4.3. </span>The
+ <code>lang</code> (HTML only) and <code>xml:lang</code> (XML only)
+ attributes</a>
+
+ <li><a href="#the-dir"><span class=secno>3.4.4. </span>The
+ <code>dir</code> attribute</a>
+
+ <li><a href="#classes"><span class=secno>3.4.5. </span>The
+ <code>class</code> attribute</a>
+
+ <li><a href="#the-irrelevant"><span class=secno>3.4.6. </span>The
+ <code>irrelevant</code> attribute</a>
+ </ul>
+
+ <li><a href="#interaction"><span class=secno>3.5. </span>Interaction</a>
+
+ <ul class=toc>
+ <li><a href="#activation"><span class=secno>3.5.1.
+ </span>Activation</a>
+
+ <li><a href="#focus"><span class=secno>3.5.2. </span>Focus</a>
+ <ul class=toc>
+ <li><a href="#focus-management"><span class=secno>3.5.2.1.
+ </span>Focus management</a>
+
+ <li><a href="#sequential"><span class=secno>3.5.2.2.
+ </span>Sequential focus navigation</a>
+ </ul>
+
+ <li><a href="#scrolling"><span class=secno>3.5.3. </span>Scrolling
+ elements into view</a>
+ </ul>
+
+ <li><a href="#the-root"><span class=secno>3.6. </span>The root
+ element</a>
+ <ul class=toc>
+ <li><a href="#the-html"><span class=secno>3.6.1. </span>The
+ <code>html</code> element</a>
+ </ul>
+
+ <li><a href="#document"><span class=secno>3.7. </span>Document
+ metadata</a>
+ <ul class=toc>
+ <li><a href="#the-head"><span class=secno>3.7.1. </span>The
+ <code>head</code> element</a>
+
+ <li><a href="#the-title0"><span class=secno>3.7.2. </span>The
+ <code>title</code> element</a>
+
+ <li><a href="#the-base"><span class=secno>3.7.3. </span>The
+ <code>base</code> element</a>
+
+ <li><a href="#the-link"><span class=secno>3.7.4. </span>The
+ <code>link</code> element</a>
+
+ <li><a href="#meta"><span class=secno>3.7.5. </span>The
+ <code>meta</code> element</a>
+ <ul class=toc>
+ <li><a href="#standard"><span class=secno>3.7.5.1. </span>Standard
+ metadata names</a>
+
+ <li><a href="#other"><span class=secno>3.7.5.2. </span>Other
+ metadata names</a>
+
+ <li><a href="#pragma"><span class=secno>3.7.5.3. </span>Pragma
+ directives</a>
+
+ <li><a href="#charset"><span class=secno>3.7.5.4. </span>Specifying
+ and establishing the document's character encoding</a>
+ </ul>
+
+ <li><a href="#the-style"><span class=secno>3.7.6. </span>The
+ <code>style</code> element</a>
+
+ <li><a href="#styling"><span class=secno>3.7.7. </span>Styling</a>
+ </ul>
+
+ <li><a href="#sections"><span class=secno>3.8. </span>Sections</a>
+ <ul class=toc>
+ <li><a href="#the-body"><span class=secno>3.8.1. </span>The
+ <code>body</code> element</a>
+
+ <li><a href="#the-section"><span class=secno>3.8.2. </span>The
+ <code>section</code> element</a>
+
+ <li><a href="#the-nav"><span class=secno>3.8.3. </span>The
+ <code>nav</code> element</a>
+
+ <li><a href="#the-article"><span class=secno>3.8.4. </span>The
+ <code>article</code> element</a>
+
+ <li><a href="#the-blockquote"><span class=secno>3.8.5. </span>The
+ <code>blockquote</code> element</a>
+
+ <li><a href="#the-aside"><span class=secno>3.8.6. </span>The
+ <code>aside</code> element</a>
+
+ <li><a href="#the-h1"><span class=secno>3.8.7. </span>The
+ <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
+ <code>h5</code>, and <code>h6</code> elements</a>
+
+ <li><a href="#the-header"><span class=secno>3.8.8. </span>The
+ <code>header</code> element</a>
+
+ <li><a href="#the-footer"><span class=secno>3.8.9. </span>The
+ <code>footer</code> element</a>
+
+ <li><a href="#the-address"><span class=secno>3.8.10. </span>The
+ <code>address</code> element</a>
+
+ <li><a href="#headings"><span class=secno>3.8.11. </span>Headings and
+ sections</a>
+ <ul class=toc>
+ <li><a href="#outlines"><span class=secno>3.8.11.1. </span>Creating
+ an outline</a>
+
+ <li><a href="#associatedSection"><span class=secno>3.8.11.2.
+ </span>Determining which heading and section applies to a
+ particular node</a>
+
+ <li><a href="#distinguishing"><span class=secno>3.8.11.3.
+ </span>Distinguishing site-wide headers from page headers</a>
+ </ul>
+ </ul>
+
+ <li><a href="#prose"><span class=secno>3.9. </span>Prose</a>
+ <ul class=toc>
+ <li><a href="#the-p"><span class=secno>3.9.1. </span>The
+ <code>p</code> element</a>
+
+ <li><a href="#the-hr"><span class=secno>3.9.2. </span>The
+ <code>hr</code> element</a>
+
+ <li><a href="#the-br"><span class=secno>3.9.3. </span>The
+ <code>br</code> element</a>
+
+ <li><a href="#the-dialog"><span class=secno>3.9.4. </span>The
+ <code>dialog</code> element</a>
+ </ul>
+
+ <li><a href="#preformatted"><span class=secno>3.10. </span>Preformatted
+ text</a>
+ <ul class=toc>
+ <li><a href="#the-pre"><span class=secno>3.10.1. </span>The
+ <code>pre</code> element</a>
+ </ul>
+
+ <li><a href="#lists0"><span class=secno>3.11. </span>Lists</a>
+ <ul class=toc>
+ <li><a href="#the-ol"><span class=secno>3.11.1. </span>The
+ <code>ol</code> element</a>
+
+ <li><a href="#the-ul"><span class=secno>3.11.2. </span>The
+ <code>ul</code> element</a>
+
+ <li><a href="#the-li"><span class=secno>3.11.3. </span>The
+ <code>li</code> element</a>
+
+ <li><a href="#the-dl"><span class=secno>3.11.4. </span>The
+ <code>dl</code> element</a>
+
+ <li><a href="#the-dt"><span class=secno>3.11.5. </span>The
+ <code>dt</code> element</a>
+
+ <li><a href="#the-dd"><span class=secno>3.11.6. </span>The
+ <code>dd</code> element</a>
+ </ul>
+
+ <li><a href="#phrase"><span class=secno>3.12. </span>Phrase elements</a>
+
+ <ul class=toc>
+ <li><a href="#the-a"><span class=secno>3.12.1. </span>The
+ <code>a</code> element</a>
+
+ <li><a href="#the-q"><span class=secno>3.12.2. </span>The
+ <code>q</code> element</a>
+
+ <li><a href="#the-cite"><span class=secno>3.12.3. </span>The
+ <code>cite</code> element</a>
+
+ <li><a href="#the-em"><span class=secno>3.12.4. </span>The
+ <code>em</code> element</a>
+
+ <li><a href="#the-strong"><span class=secno>3.12.5. </span>The
+ <code>strong</code> element</a>
+
+ <li><a href="#the-small"><span class=secno>3.12.6. </span>The
+ <code>small</code> element</a>
+
+ <li><a href="#the-m"><span class=secno>3.12.7. </span>The
+ <code>m</code> element</a>
+
+ <li><a href="#the-dfn"><span class=secno>3.12.8. </span>The
+ <code>dfn</code> element</a>
+
+ <li><a href="#the-abbr"><span class=secno>3.12.9. </span>The
+ <code>abbr</code> element</a>
+
+ <li><a href="#the-time"><span class=secno>3.12.10. </span>The
+ <code>time</code> element</a>
+
+ <li><a href="#the-meter"><span class=secno>3.12.11. </span>The
+ <code>meter</code> element</a>
+
+ <li><a href="#the-progress"><span class=secno>3.12.12. </span>The
+ <code>progress</code> element</a>
+
+ <li><a href="#the-code"><span class=secno>3.12.13. </span>The
+ <code>code</code> element</a>
+
+ <li><a href="#the-var"><span class=secno>3.12.14. </span>The
+ <code>var</code> element</a>
+
+ <li><a href="#the-samp"><span class=secno>3.12.15. </span>The
+ <code>samp</code> element</a>
+
+ <li><a href="#the-kbd"><span class=secno>3.12.16. </span>The
+ <code>kbd</code> element</a>
+
+ <li><a href="#the-sup"><span class=secno>3.12.17. </span>The
+ <code>sup</code> and <code>sub</code> elements</a>
+
+ <li><a href="#the-span"><span class=secno>3.12.18. </span>The
+ <code>span</code> element</a>
+
+ <li><a href="#the-i"><span class=secno>3.12.19. </span>The
+ <code>i</code> element</a>
+
+ <li><a href="#the-b"><span class=secno>3.12.20. </span>The
+ <code>b</code> element</a>
+
+ <li><a href="#the-bdo"><span class=secno>3.12.21. </span>The
+ <code>bdo</code> element</a>
+ </ul>
+
+ <li><a href="#edits"><span class=secno>3.13. </span>Edits</a>
+ <ul class=toc>
+ <li><a href="#the-ins"><span class=secno>3.13.1. </span>The
+ <code>ins</code> element</a>
+
+ <li><a href="#the-del"><span class=secno>3.13.2. </span>The
+ <code>del</code> element</a>
+
+ <li><a href="#attributes"><span class=secno>3.13.3. </span>Attributes
+ common to <code>ins</code> and <code>del</code> elements</a>
+ </ul>
+
+ <li><a href="#embedded"><span class=secno>3.14. </span>Embedded
+ content</a>
+ <ul class=toc>
+ <li><a href="#the-figure"><span class=secno>3.14.1. </span>The
+ <code>figure</code> element</a>
+
+ <li><a href="#the-img"><span class=secno>3.14.2. </span>The
+ <code>img</code> element</a>
+
+ <li><a href="#the-iframe"><span class=secno>3.14.3. </span>The
+ <code>iframe</code> element</a>
+
+ <li><a href="#the-embed"><span class=secno>3.14.4. </span>The
+ <code>embed</code> element</a>
+
+ <li><a href="#the-object"><span class=secno>3.14.5. </span>The
+ <code>object</code> element</a>
+
+ <li><a href="#the-param"><span class=secno>3.14.6. </span>The
+ <code>param</code> element</a>
+
+ <li><a href="#video"><span class=secno>3.14.7. </span>The
+ <code>video</code> element</a>
+ <ul class=toc>
+ <li><a href="#video0"><span class=secno>3.14.7.1. </span>Video and
+ audio codecs for <code>video</code> elements</a>
+ </ul>
+
+ <li><a href="#audio"><span class=secno>3.14.8. </span>The
+ <code>audio</code> element</a>
+ <ul class=toc>
+ <li><a href="#audio0"><span class=secno>3.14.8.1. </span>Audio
+ codecs for <code>audio</code> elements</a>
+ </ul>
+
+ <li><a href="#media"><span class=secno>3.14.9. </span>Media
+ elements</a>
+ <ul class=toc>
+ <li><a href="#error"><span class=secno>3.14.9.1. </span>Error
+ codes</a>
+
+ <li><a href="#location"><span class=secno>3.14.9.2. </span>Location
+ of the media resource</a>
+
+ <li><a href="#network0"><span class=secno>3.14.9.3. </span>Network
+ states</a>
+
+ <li><a href="#loading"><span class=secno>3.14.9.4. </span>Loading
+ the media resource</a>
+
+ <li><a href="#offsets"><span class=secno>3.14.9.5. </span>Offsets
+ into the media resource</a>
+
+ <li><a href="#the-ready"><span class=secno>3.14.9.6. </span>The
+ ready states</a>
+
+ <li><a href="#playing"><span class=secno>3.14.9.7. </span>Playing
+ the media resource</a>
+
+ <li><a href="#seeking"><span class=secno>3.14.9.8.
+ </span>Seeking</a>
+
+ <li><a href="#cue-points"><span class=secno>3.14.9.9. </span>Cue
+ points</a>
+
+ <li><a href="#user-interface"><span class=secno>3.14.9.10.
+ </span>User interface</a>
+
+ <li><a href="#time-range"><span class=secno>3.14.9.11. </span>Time
+ range</a>
+
+ <li><a href="#mediaevents"><span class=secno>3.14.9.12. </span>Event
+ summary</a>
+
+ <li><a href="#security0"><span class=secno>3.14.9.13.
+ </span>Security and privacy considerations</a>
+ </ul>
+
+ <li><a href="#the-source"><span class=secno>3.14.10. </span>The
+ <code>source</code> element</a>
+
+ <li><a href="#the-canvas"><span class=secno>3.14.11. </span>The
+ <code>canvas</code> element</a>
+ <ul class=toc>
+ <li><a href="#the-2d"><span class=secno>3.14.11.1. </span>The 2D
+ context</a>
+ <ul class=toc>
+ <li><a href="#the-canvas0"><span class=secno>3.14.11.1.1.
+ </span>The canvas state</a>
+
+ <li><a href="#transformations"><span class=secno>3.14.11.1.2.
+ </span>Transformations</a>
+
+ <li><a href="#compositing"><span class=secno>3.14.11.1.3.
+ </span>Compositing</a>
+
+ <li><a href="#colors"><span class=secno>3.14.11.1.4. </span>Colors
+ and styles</a>
+
+ <li><a href="#line-styles"><span class=secno>3.14.11.1.5.
+ </span>Line styles</a>
+
+ <li><a href="#shadows"><span class=secno>3.14.11.1.6.
+ </span>Shadows</a>
+
+ <li><a href="#simple"><span class=secno>3.14.11.1.7. </span>Simple
+ shapes (rectangles)</a>
+
+ <li><a href="#complex"><span class=secno>3.14.11.1.8.
+ </span>Complex shapes (paths)</a>
+
+ <li><a href="#images"><span class=secno>3.14.11.1.9.
+ </span>Images</a>
+
+ <li><a href="#pixel"><span class=secno>3.14.11.1.10. </span>Pixel
+ manipulation</a>
+
+ <li><a href="#drawing"><span class=secno>3.14.11.1.11.
+ </span>Drawing model</a>
+ </ul>
+ </ul>
+
+ <li><a href="#the-map"><span class=secno>3.14.12. </span>The
+ <code>map</code> element</a>
+
+ <li><a href="#the-area"><span class=secno>3.14.13. </span>The
+ <code>area</code> element</a>
+
+ <li><a href="#image-maps"><span class=secno>3.14.14. </span>Image
+ maps</a>
+ </ul>
+
+ <li><a href="#tabular"><span class=secno>3.15. </span>Tabular data</a>
+ <ul class=toc>
+ <li><a href="#the-table"><span class=secno>3.15.1. </span>The
+ <code>table</code> element</a>
+
+ <li><a href="#the-caption"><span class=secno>3.15.2. </span>The
+ <code>caption</code> element</a>
+
+ <li><a href="#the-colgroup"><span class=secno>3.15.3. </span>The
+ <code>colgroup</code> element</a>
+
+ <li><a href="#the-col"><span class=secno>3.15.4. </span>The
+ <code>col</code> element</a>
+
+ <li><a href="#the-tbody"><span class=secno>3.15.5. </span>The
+ <code>tbody</code> element</a>
+
+ <li><a href="#the-thead"><span class=secno>3.15.6. </span>The
+ <code>thead</code> element</a>
+
+ <li><a href="#the-tfoot"><span class=secno>3.15.7. </span>The
+ <code>tfoot</code> element</a>
+
+ <li><a href="#the-tr"><span class=secno>3.15.8. </span>The
+ <code>tr</code> element</a>
+
+ <li><a href="#the-td"><span class=secno>3.15.9. </span>The
+ <code>td</code> element</a>
+
+ <li><a href="#the-th"><span class=secno>3.15.10. </span>The
+ <code>th</code> element</a>
+
+ <li><a href="#processing"><span class=secno>3.15.11. </span>Processing
+ model</a>
+ <ul class=toc>
+ <li><a href="#forming"><span class=secno>3.15.11.1. </span>Forming a
+ table</a>
+
+ <li><a href="#header-and-data-cell-semantics"><span
+ class=secno>3.15.11.2. </span>Forming relationships between data
+ cells and header cells</a>
+ </ul>
+ </ul>
+
+ <li><a href="#forms"><span class=secno>3.16. </span>Forms</a>
+ <ul class=toc>
+ <li><a href="#the-form"><span class=secno>3.16.1. </span>The
+ <code>form</code> element</a>
+
+ <li><a href="#the-fieldset"><span class=secno>3.16.2. </span>The
+ <code>fieldset</code> element</a>
+
+ <li><a href="#the-input"><span class=secno>3.16.3. </span>The
+ <code>input</code> element</a>
+
+ <li><a href="#the-button"><span class=secno>3.16.4. </span>The
+ <code>button</code> element</a>
+
+ <li><a href="#the-label"><span class=secno>3.16.5. </span>The
+ <code>label</code> element</a>
+
+ <li><a href="#the-select"><span class=secno>3.16.6. </span>The
+ <code>select</code> element</a>
+
+ <li><a href="#the-datalist"><span class=secno>3.16.7. </span>The
+ <code>datalist</code> element</a>
+
+ <li><a href="#the-optgroup"><span class=secno>3.16.8. </span>The
+ <code>optgroup</code> element</a>
+
+ <li><a href="#the-option"><span class=secno>3.16.9. </span>The
+ <code>option</code> element</a>
+
+ <li><a href="#the-textarea"><span class=secno>3.16.10. </span>The
+ <code>textarea</code> element</a>
+
+ <li><a href="#the-output"><span class=secno>3.16.11. </span>The
+ <code>output</code> element</a>
+
+ <li><a href="#processing0"><span class=secno>3.16.12.
+ </span>Processing model</a>
+ <ul class=toc>
+ <li><a href="#form-submission"><span class=secno>3.16.12.1.
+ </span>Form submission</a>
+ </ul>
+ </ul>
+
+ <li><a href="#scripting0"><span class=secno>3.17. </span>Scripting</a>
+ <ul class=toc>
+ <li><a href="#script"><span class=secno>3.17.1. </span>The
+ <code>script</code> element</a>
+ <ul class=toc>
+ <li><a href="#scriptingLanguages"><span class=secno>3.17.1.1.
+ </span>Scripting languages</a>
+ </ul>
+
+ <li><a href="#the-noscript"><span class=secno>3.17.2. </span>The
+ <code>noscript</code> element</a>
+
+ <li><a href="#the-event-source"><span class=secno>3.17.3. </span>The
+ <code>event-source</code> element</a>
+ </ul>
+
+ <li><a href="#interactive"><span class=secno>3.18. </span>Interactive
+ elements</a>
+ <ul class=toc>
+ <li><a href="#the-details"><span class=secno>3.18.1. </span>The
+ <code>details</code> element</a>
+
+ <li><a href="#datagrid"><span class=secno>3.18.2. </span>The
+ <code>datagrid</code> element</a>
+ <ul class=toc>
+ <li><a href="#the-datagrid"><span class=secno>3.18.2.1. </span>The
+ <code>datagrid</code> data model</a>
+
+ <li><a href="#how-rows"><span class=secno>3.18.2.2. </span>How rows
+ are identified</a>
+
+ <li><a href="#the-data"><span class=secno>3.18.2.3. </span>The data
+ provider interface</a>
+
+ <li><a href="#the-default"><span class=secno>3.18.2.4. </span>The
+ default data provider</a>
+ <ul class=toc>
+ <li><a href="#commonDefaultDataGridMethodDefinitions"><span
+ class=secno>3.18.2.4.1. </span>Common default data provider
+ method definitions for cells</a>
+ </ul>
+
+ <li><a href="#populating"><span class=secno>3.18.2.5.
+ </span>Populating the <code>datagrid</code> element</a>
+
+ <li><a href="#updating"><span class=secno>3.18.2.6. </span>Updating
+ the <code>datagrid</code></a>
+
+ <li><a href="#requirements"><span class=secno>3.18.2.7.
+ </span>Requirements for interactive user agents</a>
+
+ <li><a href="#the-selection"><span class=secno>3.18.2.8. </span>The
+ selection</a>
+
+ <li><a href="#columns"><span class=secno>3.18.2.9. </span>Columns
+ and captions</a>
+ </ul>
+
+ <li><a href="#the-command"><span class=secno>3.18.3. </span>The
+ <code>command</code> element</a>
+
+ <li><a href="#menus"><span class=secno>3.18.4. </span>The
+ <code>menu</code> element</a>
+ <ul class=toc>
+ <li><a href="#menus-intro"><span class=secno>3.18.4.1.
+ </span>Introduction</a>
+
+ <li><a href="#building"><span class=secno>3.18.4.2. </span>Building
+ menus</a>
+
+ <li><a href="#context"><span class=secno>3.18.4.3. </span>Context
+ menus</a>
+
+ <li><a href="#toolbars"><span class=secno>3.18.4.4.
+ </span>Toolbars</a>
+ </ul>
+
+ <li><a href="#commands"><span class=secno>3.18.5. </span>Commands</a>
+ <ul class=toc>
+ <li><a href="#using"><span class=secno>3.18.5.1. </span>Using the
+ <code>a</code> element to define a command</a>
+
+ <li><a href="#using0"><span class=secno>3.18.5.2. </span>Using the
+ <code>button</code> element to define a command</a>
+
+ <li><a href="#using1"><span class=secno>3.18.5.3. </span>Using the
+ <code>input</code> element to define a command</a>
+
+ <li><a href="#using2"><span class=secno>3.18.5.4. </span>Using the
+ <code>option</code> element to define a command</a>
+
+ <li><a href="#using3"><span class=secno>3.18.5.5. </span>Using the
+ <code>command</code> element to define a command</a>
+ </ul>
+ </ul>
+
+ <li><a href="#miscellaneous"><span class=secno>3.19.
+ </span>Miscellaneous elements</a>
+ <ul class=toc>
+ <li><a href="#the-legend"><span class=secno>3.19.1. </span>The
+ <code>legend</code> element</a>
+
+ <li><a href="#the-div"><span class=secno>3.19.2. </span>The
+ <code>div</code> element</a>
+ </ul>
+ </ul>
+
+ <li><a href="#web-browsers"><span class=secno>4. </span>Web browsers</a>
+ <ul class=toc>
+ <li><a href="#windows"><span class=secno>4.1. </span>Browsing
+ contexts</a>
+ <ul class=toc>
+ <li><a href="#nested"><span class=secno>4.1.1. </span>Nested browsing
+ contexts</a>
+
+ <li><a href="#auxiliary"><span class=secno>4.1.2. </span>Auxiliary
+ browsing contexts</a>
+
+ <li><a href="#secondary"><span class=secno>4.1.3. </span>Secondary
+ browsing contexts</a>
+
+ <li><a href="#threads"><span class=secno>4.1.4. </span>Threads</a>
+
+ <li><a href="#browsing"><span class=secno>4.1.5. </span>Browsing
+ context names</a>
+ </ul>
+
+ <li><a href="#the-default0"><span class=secno>4.2. </span>The default
+ view</a>
+ <ul class=toc>
+ <li><a href="#security1"><span class=secno>4.2.1. </span>Security</a>
+
+ <li><a href="#constructors"><span class=secno>4.2.2.
+ </span>Constructors</a>
+
+ <li><a href="#apis-for"><span class=secno>4.2.3. </span>APIs for
+ creating and navigating browsing contexts by name</a>
+
+ <li><a href="#accessing"><span class=secno>4.2.4. </span>Accessing
+ other browsing contexts</a>
+ </ul>
+
+ <li><a href="#history"><span class=secno>4.3. </span>Session history and
+ navigation</a>
+ <ul class=toc>
+ <li><a href="#the-session"><span class=secno>4.3.1. </span>The session
+ history of browsing contexts</a>
+
+ <li><a href="#the-history"><span class=secno>4.3.2. </span>The
+ <code>History</code> interface</a>
+
+ <li><a href="#activating"><span class=secno>4.3.3. </span>Activating
+ state objects</a>
+
+ <li><a href="#the-location"><span class=secno>4.3.4. </span>The
+ <code>Location</code> interface</a>
+ <ul class=toc>
+ <li><a href="#security2"><span class=secno>4.3.4.1.
+ </span>Security</a>
+ </ul>
+
+ <li><a href="#history-notes"><span class=secno>4.3.5.
+ </span>Implementation notes for session history</a>
+ </ul>
+
+ <li><a href="#links"><span class=secno>4.4. </span>Links</a>
+ <ul class=toc>
+ <li><a href="#hyperlink"><span class=secno>4.4.1. </span>Hyperlink
+ elements</a>
+
+ <li><a href="#following"><span class=secno>4.4.2. </span>Following
+ hyperlinks</a>
+ <ul class=toc>
+ <li><a href="#hyperlink0"><span class=secno>4.4.2.1.
+ </span>Hyperlink auditing</a>
+ </ul>
+
+ <li><a href="#linkTypes"><span class=secno>4.4.3. </span>Link
+ types</a>
+ <ul class=toc>
+ <li><a href="#link-type"><span class=secno>4.4.3.1. </span>Link type
+ "<code>alternate</code>"</a>
+
+ <li><a href="#link-type0"><span class=secno>4.4.3.2. </span>Link
+ type "<code>archives</code>"</a>
+
+ <li><a href="#link-type1"><span class=secno>4.4.3.3. </span>Link
+ type "<code>author</code>"</a>
+
+ <li><a href="#link-type2"><span class=secno>4.4.3.4. </span>Link
+ type "<code>bookmark</code>"</a>
+
+ <li><a href="#link-type3"><span class=secno>4.4.3.5. </span>Link
+ type "<code>contact</code>"</a>
+
+ <li><a href="#link-type4"><span class=secno>4.4.3.6. </span>Link
+ type "<code>external</code>"</a>
+
+ <li><a href="#link-type5"><span class=secno>4.4.3.7. </span>Link
+ type "<code>feed</code>"</a>
+
+ <li><a href="#link-type6"><span class=secno>4.4.3.8. </span>Link
+ type "<code>help</code>"</a>
+
+ <li><a href="#link-type7"><span class=secno>4.4.3.9. </span>Link
+ type "<code>icon</code>"</a>
+
+ <li><a href="#link-type8"><span class=secno>4.4.3.10. </span>Link
+ type "<code>license</code>"</a>
+
+ <li><a href="#link-type9"><span class=secno>4.4.3.11. </span>Link
+ type "<code>nofollow</code>"</a>
+
+ <li><a href="#link-type10"><span class=secno>4.4.3.12. </span>Link
+ type "<code>pingback</code>"</a>
+
+ <li><a href="#link-type11"><span class=secno>4.4.3.13. </span>Link
+ type "<code>prefetch</code>"</a>
+
+ <li><a href="#link-type12"><span class=secno>4.4.3.14. </span>Link
+ type "<code>search</code>"</a>
+
+ <li><a href="#link-type13"><span class=secno>4.4.3.15. </span>Link
+ type "<code>stylesheet</code>"</a>
+
+ <li><a href="#link-type14"><span class=secno>4.4.3.16. </span>Link
+ type "<code>sidebar</code>"</a>
+
+ <li><a href="#link-type15"><span class=secno>4.4.3.17. </span>Link
+ type "<code>tag</code>"</a>
+
+ <li><a href="#hierarchical"><span class=secno>4.4.3.18.
+ </span>Hierarchical link types</a>
+ <ul class=toc>
+ <li><a href="#link-type16"><span class=secno>4.4.3.18.1.
+ </span>Link type "<code>first</code>"</a>
+
+ <li><a href="#link-type17"><span class=secno>4.4.3.18.2.
+ </span>Link type "<code>index</code>"</a>
+
+ <li><a href="#link-type18"><span class=secno>4.4.3.18.3.
+ </span>Link type "<code>last</code>"</a>
+
+ <li><a href="#link-type19"><span class=secno>4.4.3.18.4.
+ </span>Link type "<code>next</code>"</a>
+
+ <li><a href="#link-type20"><span class=secno>4.4.3.18.5.
+ </span>Link type "<code>prev</code>"</a>
+
+ <li><a href="#link-type21"><span class=secno>4.4.3.18.6.
+ </span>Link type "<code>up</code>"</a>
+ </ul>
+
+ <li><a href="#other0"><span class=secno>4.4.3.19. </span>Other link
+ types</a>
+ </ul>
+ </ul>
+
+ <li><a href="#interfaces"><span class=secno>4.5. </span>Interfaces for
+ URI manipulation</a>
+
+ <li><a href="#navigating"><span class=secno>4.6. </span>Navigating
+ across documents</a>
+ <ul class=toc>
+ <li><a href="#read-html"><span class=secno>4.6.1. </span>Page load
+ processing model for HTML files</a>
+
+ <li><a href="#read-xml"><span class=secno>4.6.2. </span>Page load
+ processing model for XML files</a>
+
+ <li><a href="#read-text"><span class=secno>4.6.3. </span>Page load
+ processing model for text files</a>
+
+ <li><a href="#read-image"><span class=secno>4.6.4. </span>Page load
+ processing model for images</a>
+
+ <li><a href="#read-plugin"><span class=secno>4.6.5. </span>Page load
+ processing model for content that uses plugins</a>
+
+ <li><a href="#non-DOM-inline-content"><span class=secno>4.6.6.
+ </span>Page load processing model for inline content that doesn't
+ have a DOM</a>
+
+ <li><a href="#scroll-to-fragid"><span class=secno>4.6.7.
+ </span>Scrolling to a fragment identifier</a>
+ </ul>
+
+ <li><a href="#content-type-sniffing"><span class=secno>4.7.
+ </span>Determining the type of a new resource in a browsing context</a>
+
+ <ul class=toc>
+ <li><a href="#content-type0"><span class=secno>4.7.1.
+ </span>Content-Type sniffing: text or binary</a>
+
+ <li><a href="#content-type1"><span class=secno>4.7.2.
+ </span>Content-Type sniffing: unknown type</a>
+
+ <li><a href="#content-type2"><span class=secno>4.7.3.
+ </span>Content-Type sniffing: image</a>
+
+ <li><a href="#content-type3"><span class=secno>4.7.4.
+ </span>Content-Type sniffing: feed or HTML</a>
+
+ <li><a href="#content-type"><span class=secno>4.7.5.
+ </span>Content-Type metadata</a>
+ </ul>
+
+ <li><a href="#user-prompts"><span class=secno>4.8. </span>User
+ prompts</a>
+
+ <li><a href="#scripting"><span class=secno>4.9. </span>Scripting</a>
+ <ul class=toc>
+ <li><a href="#running"><span class=secno>4.9.1. </span>Running
+ executable code</a>
+
+ <li><a href="#origin"><span class=secno>4.9.2. </span>Origin</a>
+
+ <li><a href="#security3"><span class=secno>4.9.3. </span>Security
+ exceptions</a>
+
+ <li><a href="#javascript-protocol"><span class=secno>4.9.4. </span>The
+ <code title="">javascript:</code> protocol</a>
+
+ <li><a href="#events"><span class=secno>4.9.5. </span>Events</a>
+ <ul class=toc>
+ <li><a href="#event-handler-attributes"><span class=secno>4.9.5.1.
+ </span>Event handler attributes</a>
+
+ <li><a href="#event"><span class=secno>4.9.5.2. </span>Event
+ firing</a>
+
+ <li><a href="#events0"><span class=secno>4.9.5.3. </span>Events and
+ the <code>Window</code> object</a>
+
+ <li><a href="#runtime-script-errors"><span class=secno>4.9.5.4.
+ </span>Runtime script errors</a>
+ </ul>
+ </ul>
+
+ <li><a href="#browser"><span class=secno>4.10. </span>Browser state</a>
+ <ul class=toc>
+ <li><a href="#offline"><span class=secno>4.10.1. </span>Offline Web
+ applications</a>
+
+ <li><a href="#custom-handlers"><span class=secno>4.10.2. </span>Custom
+ protocol and content handlers</a>
+ <ul class=toc>
+ <li><a href="#security4"><span class=secno>4.10.2.1. </span>Security
+ and privacy</a>
+
+ <li><a href="#sample-handler-impl"><span class=secno>4.10.2.2.
+ </span>Sample user interface</a>
+ </ul>
+ </ul>
+
+ <li><a href="#storage"><span class=secno>4.11. </span>Client-side
+ session and persistent storage of name/value pairs</a>
+ <ul class=toc>
+ <li><a href="#introduction0"><span class=secno>4.11.1.
+ </span>Introduction</a>
+
+ <li><a href="#the-storage"><span class=secno>4.11.2. </span>The
+ <code>Storage</code> interface</a>
+
+ <li><a href="#the-storageitem"><span class=secno>4.11.3. </span>The
+ <code>StorageItem</code> interface</a>
+
+ <li><a href="#the-sessionstorage"><span class=secno>4.11.4. </span>The
+ <code title=dom-sessionStorage>sessionStorage</code> attribute</a>
+
+ <li><a href="#the-globalstorage"><span class=secno>4.11.5. </span>The
+ <code title=dom-globalStorage>globalStorage</code> attribute</a>
+
+ <li><a href="#the-storage0"><span class=secno>4.11.6. </span>The <code
+ title=event-storage>storage</code> event</a>
+
+ <li><a href="#miscellaneous0"><span class=secno>4.11.7.
+ </span>Miscellaneous implementation requirements for storage
+ areas</a>
+ <ul class=toc>
+ <li><a href="#disk-space"><span class=secno>4.11.7.1. </span>Disk
+ space</a>
+
+ <li><a href="#threads0"><span class=secno>4.11.7.2.
+ </span>Threads</a>
+ </ul>
+
+ <li><a href="#security5"><span class=secno>4.11.8. </span>Security and
+ privacy</a>
+ <ul class=toc>
+ <li><a href="#user-tracking"><span class=secno>4.11.8.1. </span>User
+ tracking</a>
+
+ <li><a href="#cookie"><span class=secno>4.11.8.2. </span>Cookie
+ resurrection</a>
+
+ <li><a href="#integrity"><span class=secno>4.11.8.3.
+ </span>Integrity of "public" storage areas</a>
+
+ <li><a href="#cross-protocol"><span class=secno>4.11.8.4.
+ </span>Cross-protocol and cross-port attacks</a>
+
+ <li><a href="#dns-spoofing"><span class=secno>4.11.8.5. </span>DNS
+ spoofing attacks</a>
+
+ <li><a href="#cross-directory"><span class=secno>4.11.8.6.
+ </span>Cross-directory attacks</a>
+
+ <li><a href="#public"><span class=secno>4.11.8.7. </span>Public
+ storage areas corresponding to hosts</a>
+
+ <li><a href="#storage0"><span class=secno>4.11.8.8. </span>Storage
+ areas in the face of untrusted higher-level domains that do not
+ correspond to public storage areas</a>
+
+ <li><a href="#storage1"><span class=secno>4.11.8.9. </span>Storage
+ areas in the face of untrusted subdomains</a>
+
+ <li><a href="#implementation"><span class=secno>4.11.8.10.
+ </span>Implementation risks</a>
+ </ul>
+ </ul>
+
+ <li><a href="#sql"><span class=secno>4.12. </span>Client-side database
+ storage</a>
+ <ul class=toc>
+ <li><a href="#introduction1"><span class=secno>4.12.1.
+ </span>Introduction</a>
+
+ <li><a href="#executing"><span class=secno>4.12.2. </span>Executing
+ SQL statements</a>
+
+ <li><a href="#database"><span class=secno>4.12.3. </span>Database
+ query results</a>
+
+ <li><a href="#privacy"><span class=secno>4.12.4. </span>Privacy</a>
+
+ <li><a href="#security6"><span class=secno>4.12.5. </span>Security</a>
+
+ <ul class=toc>
+ <li><a href="#user-agents"><span class=secno>4.12.5.1. </span>User
+ agents</a>
+
+ <li><a href="#sql-injection"><span class=secno>4.12.5.2. </span>SQL
+ injection</a>
+ </ul>
+ </ul>
+ </ul>
+
+ <li><a href="#editing"><span class=secno>5. </span>Editing</a>
+ <ul class=toc>
+ <li><a href="#editing-intro"><span class=secno>5.1.
+ </span>Introduction</a>
+
+ <li><a href="#contenteditable"><span class=secno>5.2. </span>The <code
+ title=attr-contenteditable>contenteditable</code> attribute</a>
+ <ul class=toc>
+ <li><a href="#user-editing"><span class=secno>5.2.1. </span>User
+ editing actions</a>
+
+ <li><a href="#making"><span class=secno>5.2.2. </span>Making entire
+ documents editable</a>
+ </ul>
+
+ <li><a href="#dnd"><span class=secno>5.3. </span>Drag and drop</a>
+ <ul class=toc>
+ <li><a href="#the-dragevent"><span class=secno>5.3.1. </span>The
+ <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a>
+
+ <li><a href="#events1"><span class=secno>5.3.2. </span>Events fired
+ during a drag-and-drop action</a>
+
+ <li><a href="#drag-and-drop"><span class=secno>5.3.3.
+ </span>Drag-and-drop processing model</a>
+ <ul class=toc>
+ <li><a href="#when-the"><span class=secno>5.3.3.1. </span>When the
+ drag-and-drop operation starts or ends in another document</a>
+
+ <li><a href="#when-the0"><span class=secno>5.3.3.2. </span>When the
+ drag-and-drop operation starts or ends in another application</a>
+ </ul>
+
+ <li><a href="#the-draggable"><span class=secno>5.3.4. </span>The
+ <code>draggable</code> attribute</a>
+
+ <li><a href="#copy-and"><span class=secno>5.3.5. </span>Copy and
+ paste</a>
+ <ul class=toc>
+ <li><a href="#copy-to"><span class=secno>5.3.5.1. </span>Copy to
+ clipboard</a>
+
+ <li><a href="#cut-to"><span class=secno>5.3.5.2. </span>Cut to
+ clipboard</a>
+
+ <li><a href="#paste"><span class=secno>5.3.5.3. </span>Paste from
+ clipboard</a>
+
+ <li><a href="#paste0"><span class=secno>5.3.5.4. </span>Paste from
+ selection</a>
+ </ul>
+
+ <li><a href="#security7"><span class=secno>5.3.6. </span>Security
+ risks in the drag-and-drop model</a>
+ </ul>
+
+ <li><a href="#undo"><span class=secno>5.4. </span>Undo history</a>
+ <ul class=toc>
+ <li><a href="#the-undomanager"><span class=secno>5.4.1. </span>The
+ <code>UndoManager</code> interface</a>
+
+ <li><a href="#undo-moving"><span class=secno>5.4.2. </span>Undo:
+ moving back in the undo transaction history</a>
+
+ <li><a href="#redo-moving"><span class=secno>5.4.3. </span>Redo:
+ moving forward in the undo transaction history</a>
+
+ <li><a href="#the-undomanagerevent"><span class=secno>5.4.4.
+ </span>The <code>UndoManagerEvent</code> interface and the <code
+ title=event-undo>undo</code> and <code title=event-redo>redo</code>
+ events</a>
+
+ <li><a href="#implementation0"><span class=secno>5.4.5.
+ </span>Implementation notes</a>
+ </ul>
+
+ <li><a href="#command"><span class=secno>5.5. </span>Command APIs</a>
+
+ <li><a href="#selection"><span class=secno>5.6. </span>The text
+ selection APIs</a>
+ <ul class=toc>
+ <li><a href="#documentSelection"><span class=secno>5.6.1. </span>APIs
+ for the browsing context selection</a>
+
+ <li><a href="#textFieldSelection"><span class=secno>5.6.2. </span>APIs
+ for the text field selections</a>
+ </ul>
+ </ul>
+
+ <li><a href="#comms"><span class=secno>6. </span>Communication</a>
+ <ul class=toc>
+ <li><a href="#event0"><span class=secno>6.1. </span>Event
+ definitions</a>
+
+ <li><a href="#server-sent-events"><span class=secno>6.2.
+ </span>Server-sent DOM events</a>
+ <ul class=toc>
+ <li><a href="#the-remoteeventtarget"><span class=secno>6.2.1.
+ </span>The <code>RemoteEventTarget</code> interface</a>
+
+ <li><a href="#connecting"><span class=secno>6.2.2. </span>Connecting
+ to an event stream</a>
+
+ <li><a href="#parsing0"><span class=secno>6.2.3. </span>Parsing an
+ event stream</a>
+
+ <li><a href="#event-stream-interpretation"><span class=secno>6.2.4.
+ </span>Interpreting an event stream</a>
+
+ <li><a href="#notes"><span class=secno>6.2.5. </span>Notes</a>
+ </ul>
+
+ <li><a href="#network"><span class=secno>6.3. </span>Network
+ connections</a>
+ <ul class=toc>
+ <li><a href="#network-intro"><span class=secno>6.3.1.
+ </span>Introduction</a>
+
+ <li><a href="#the-connection"><span class=secno>6.3.2. </span>The
+ <code>Connection</code> interface</a>
+
+ <li><a href="#connection"><span class=secno>6.3.3. </span>Connection
+ Events</a>
+
+ <li><a href="#tcp-connections"><span class=secno>6.3.4. </span>TCP
+ connections</a>
+
+ <li><a href="#broadcast"><span class=secno>6.3.5. </span>Broadcast
+ connections</a>
+ <ul class=toc>
+ <li><a href="#broadcasting"><span class=secno>6.3.5.1.
+ </span>Broadcasting over TCP/IP</a>
+
+ <li><a href="#bluetooth-broadcast"><span class=secno>6.3.5.2.
+ </span>Broadcasting over Bluetooth</a>
+
+ <li><a href="#irda-broadcast"><span class=secno>6.3.5.3.
+ </span>Broadcasting over IrDA</a>
+ </ul>
+
+ <li><a href="#peer-to-peer"><span class=secno>6.3.6.
+ </span>Peer-to-peer connections</a>
+ <ul class=toc>
+ <li><a href="#peer-to-peer0"><span class=secno>6.3.6.1.
+ </span>Peer-to-peer connections over TCP/IP</a>
+
+ <li><a href="#bluetooth-peer"><span class=secno>6.3.6.2.
+ </span>Peer-to-peer connections over Bluetooth</a>
+
+ <li><a href="#irda-peer"><span class=secno>6.3.6.3.
+ </span>Peer-to-peer connections over IrDA</a>
+ </ul>
+
+ <li><a href="#the-common"><span class=secno>6.3.7. </span>The common
+ protocol for TCP-based connections</a>
+ <ul class=toc>
+ <li><a href="#clients"><span class=secno>6.3.7.1. </span>Clients
+ connecting over TCP</a>
+
+ <li><a href="#servers"><span class=secno>6.3.7.2. </span>Servers
+ accepting connections over TCP</a>
+
+ <li><a href="#sending"><span class=secno>6.3.7.3. </span>Sending and
+ receiving data over TCP</a>
+ </ul>
+
+ <li><a href="#network-security"><span class=secno>6.3.8.
+ </span>Security</a>
+
+ <li><a href="#network-other-specs"><span class=secno>6.3.9.
+ </span>Relationship to other standards</a>
+ </ul>
+
+ <li><a href="#crossDocumentMessages"><span class=secno>6.4.
+ </span>Cross-document messaging</a>
+ <ul class=toc>
+ <li><a href="#processing1"><span class=secno>6.4.1. </span>Processing
+ model</a>
+ </ul>
+ </ul>
+
+ <li><a href="#repetition"><span class=secno>7. </span>Repetition
+ templates</a>
+
+ <li><a href="#syntax"><span class=secno>8. </span>The HTML syntax</a>
+ <ul class=toc>
+ <li><a href="#writing"><span class=secno>8.1. </span>Writing HTML
+ documents</a>
+ <ul class=toc>
+ <li><a href="#the-doctype"><span class=secno>8.1.1. </span>The
+ DOCTYPE</a>
+
+ <li><a href="#elements0"><span class=secno>8.1.2. </span>Elements</a>
+ <ul class=toc>
+ <li><a href="#start"><span class=secno>8.1.2.1. </span>Start
+ tags</a>
+
+ <li><a href="#end-tags"><span class=secno>8.1.2.2. </span>End
+ tags</a>
+
+ <li><a href="#attributes0"><span class=secno>8.1.2.3.
+ </span>Attributes</a>
+
+ <li><a href="#optional"><span class=secno>8.1.2.4. </span>Optional
+ tags</a>
+
+ <li><a href="#restrictions"><span class=secno>8.1.2.5.
+ </span>Restrictions on content models</a>
+ </ul>
+
+ <li><a href="#text"><span class=secno>8.1.3. </span>Text</a>
+ <ul class=toc>
+ <li><a href="#newlines"><span class=secno>8.1.3.1.
+ </span>Newlines</a>
+ </ul>
+
+ <li><a href="#character"><span class=secno>8.1.4. </span>Character
+ entity references</a>
+
+ <li><a href="#comments"><span class=secno>8.1.5. </span>Comments</a>
+ </ul>
+
+ <li><a href="#parsing"><span class=secno>8.2. </span>Parsing HTML
+ documents</a>
+ <ul class=toc>
+ <li><a href="#overview"><span class=secno>8.2.1. </span>Overview of
+ the parsing model</a>
+
+ <li><a href="#the-input0"><span class=secno>8.2.2. </span>The input
+ stream</a>
+
+ <li><a href="#tokenisation"><span class=secno>8.2.3.
+ </span>Tokenisation</a>
+ <ul class=toc>
+ <li><a href="#tokenising"><span class=secno>8.2.3.1.
+ </span>Tokenising entities</a>
+ </ul>
+
+ <li><a href="#tree-construction"><span class=secno>8.2.4. </span>Tree
+ construction</a>
+ <ul class=toc>
+ <li><a href="#the-initial"><span class=secno>8.2.4.1. </span>The
+ initial phase</a>
+
+ <li><a href="#the-root0"><span class=secno>8.2.4.2. </span>The root
+ element phase</a>
+
+ <li><a href="#the-main"><span class=secno>8.2.4.3. </span>The main
+ phase</a>
+ <ul class=toc>
+ <li><a href="#the-stack"><span class=secno>8.2.4.3.1. </span>The
+ stack of open elements</a>
+
+ <li><a href="#the-list"><span class=secno>8.2.4.3.2. </span>The
+ list of active formatting elements</a>
+
+ <li><a href="#creating"><span class=secno>8.2.4.3.3.
+ </span>Creating and inserting HTML elements</a>
+
+ <li><a href="#closing"><span class=secno>8.2.4.3.4. </span>Closing
+ elements that have implied end tags</a>
+
+ <li><a href="#the-element"><span class=secno>8.2.4.3.5. </span>The
+ element pointers</a>
+
+ <li><a href="#the-insertion"><span class=secno>8.2.4.3.6.
+ </span>The insertion mode</a>
+
+ <li><a href="#how-to0"><span class=secno>8.2.4.3.7. </span>How to
+ handle tokens in the main phase</a>
+ </ul>
+
+ <li><a href="#the-trailing"><span class=secno>8.2.4.4. </span>The
+ trailing end phase</a>
+ </ul>
+
+ <li><a href="#the-end"><span class=secno>8.2.5. </span>The End</a>
+ </ul>
+
+ <li><a href="#namespaces"><span class=secno>8.3. </span>Namespaces</a>
+
+ <li><a href="#entities"><span class=secno>8.4. </span>Entities</a>
+ </ul>
+
+ <li><a href="#wysiwyg"><span class=secno>9. </span>WYSIWYG editors</a>
+ <ul class=toc>
+ <li><a href="#presentational"><span class=secno>9.1.
+ </span>Presentational markup</a>
+ <ul class=toc>
+ <li><a href="#wysiwyg0"><span class=secno>9.1.1. </span>WYSIWYG
+ signature</a>
+
+ <li><a href="#the-font"><span class=secno>9.1.2. </span>The
+ <code>font</code> element</a>
+ </ul>
+ </ul>
+
+ <li><a href="#rendering"><span class=secno>10. </span>Rendering</a>
+ <ul class=toc>
+ <li><a href="#rendering0"><span class=secno>10.1. </span>Rendering and
+ the DOM</a>
+ </ul>
+
+ <li><a href="#no"><span class=secno>11. </span>Things that you can't do
+ with this specification because they are better handled using other
+ technologies that are further described herein</a>
+ <ul class=toc>
+ <li><a href="#localisation"><span class=secno>11.1.
+ </span>Localisation</a>
+
+ <li><a href="#declarative"><span class=secno>11.2. </span>Declarative 2D
+ vector graphics and animation</a>
+
+ <li><a href="#declarative0"><span class=secno>11.3. </span>Declarative
+ 3D scenes</a>
+
+ <li><a href="#timers"><span class=secno>11.4. </span>Timers</a>
+
+ <li><a href="#events2"><span class=secno>11.5. </span>Events</a>
+ </ul>
+
+ <li class=no-num><a href="#references">References</a>
+
+ <li class=no-num><a href="#acknowledgements">Acknowledgements</a>
+ </ul>
+ <!--end-toc-->
+
+ <hr>
+
+ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>The World Wide Web's markup language has always been HTML. HTML was
+ primarily designed as a language for semantically describing scientific
+ documents, although its general design and adaptations over the years has
+ enabled it to be used to describe a number of other types of documents.
+
+ <p>The main area that has not been adequately addressed by HTML is a vague
+ subject referred to as Web Applications. This specification attempts to
+ rectify this, while at the same time updating the HTML specifications to
+ address issues raised in the past few years.
+
+ <h3 id=scope><span class=secno>1.1. </span>Scope</h3>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>This specification is limited to providing a semantic-level markup
+ language and associated semantic-level scripting APIs for authoring
+ accessible pages on the Web ranging from static documents to dynamic
+ applications.
+
+ <p>The scope of this specification does not include addressing presentation
+ concerns (although default rendering rules for Web browsers are included
+ at the end of this specification).
+
+ <p>The scope of this specification does not include documenting every HTML
+ or DOM feature supported by Web browsers. Browsers support many features
+ that are considered to be very bad for accessibility or that are otherwise
+ inappropriate. For example, the <code>blink</code> element is clearly
+ presentational and authors wishing to cause text to blink should instead
+ use CSS.
+
+ <p>The scope of this specification is not to describe an entire operating
+ system. In particular, hardware configuration software, image manipulation
+ tools, and applications that users would be expected to use with high-end
+ workstations on a daily basis are out of scope. In terms of applications,
+ this specification is targeted specifically at applications that would be
+ expected to be used by users on an occasional basis, or regularly but from
+ disparate locations, with low CPU requirements. For instance online
+ purchasing systems, searching systems, games (especially multiplayer
+ online games), public telephone books or address books, communications
+ software (e-mail clients, instant messaging clients, discussion software),
+ document editing software, etc.
+
+ <p>For sophisticated cross-platform applications, there already exist
+ several proprietary solutions (such as Mozilla's XUL and Macromedia's
+ Flash). These solutions are evolving faster than any standards process
+ could follow, and the requirements are evolving even faster. These systems
+ are also significantly more complicated to specify, and are orders of
+ magnitude more difficult to achieve interoperability with, than the
+ solutions described in this document. Platform-specific solutions for such
+ sophisticated applications (for example the MacOS X Core APIs) are even
+ further ahead.
+
+ <h4 id=relationship><span class=secno>1.1.1. </span>Relationship to HTML
+ 4.01, XHTML 1.1, DOM2 HTML</h4>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>This specification represents a new version of HTML4 and XHTML1, along
+ with a new version of the associated DOM2 HTML API. Migration from HTML4
+ or XHTML1 to the format and APIs described in this specification should in
+ most cases be straightforward, as care has been taken to ensure that
+ backwards-compatibility is retained.</p>
+ <!-- XXX refs -->
+
+ <p>This specification will eventually supplant Web Forms 2.0 as well. <a
+ href="#refsWF2">[WF2]</a>
+
+ <h4 id=relationship0><span class=secno>1.1.2. </span>Relationship to XHTML2</h4>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>XHTML2 <a href="#refsXHTML2">[XHTML2]</a> defines a new HTML vocabulary
+ with better features for hyperlinks, multimedia content, annotating
+ document edits, rich metadata, declarative interactive forms, and
+ describing the semantics of human literary works such as poems and
+ scientific papers.
+
+ <p>However, it lacks elements to express the semantics of many of the
+ non-document types of content often seen on the Web. For instance, forum
+ sites, auction sites, search engines, online shops, and the like, do not
+ fit the document metaphor well, and are not covered by XHTML2.
+
+ <p><em>This</em> specification aims to extend HTML so that it is also
+ suitable in these contexts.
+
+ <p>XHTML2 and this specification use different namespaces and therefore can
+ both be implemented in the same XML processor.
+
+ <h4 id=relationship1><span class=secno>1.1.3. </span>Relationship to XUL,
+ Flash, Silverlight, and other proprietary UI languages</h4>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>This specification is independent of the various proprietary UI
+ languages that various vendors provide. As an open, vender-neutral
+ language, HTML provides for a solution to the same problems without the
+ risk of vendor lock-in.
+
+ <h3 id=structure><span class=secno>1.2. </span>Structure of this
+ specification</h3>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>This specification is divided into the following important sections:
+
+ <dl>
+ <dt><a href="#dom">The DOM</a>
+
+ <dd>The DOM, or Document Object Model, provides a base for the rest of the
+ specification.
+
+ <dt><a href="#semantics">The Semantics</a>
+
+ <dd>Documents are built from elements. These elements form a tree using
+ the DOM. Each element also has a predefined meaning, which is explained
+ in this section. User agent requirements for how to handle each element
+ are also given, along with rules for authors on how to use the element.
+
+ <dt><a href="#windows">Browsing Contexts</a>
+
+ <dd>HTML documents do not exist in a vacuum &mdash; this section defines
+ many of the features that affect environments that deal with multiple
+ pages, links between pages, and running scripts.
+
+ <dt>APIs
+
+ <dd><a href="#editing">The Editing APIs</a>: HTML documents can provide a
+ number of mechanisms for users to modify content, which are described in
+ this section.
+
+ <dd><a href="#comms">The Communication APIs</a>: Applications written in
+ HTML often require mechanisms to communicate with remote servers, as well
+ as communicating with other applications from different domains running
+ on the same client.
+
+ <dd><a href="#repetition">Repetition Templates</a>: A mechanism to support
+ repeating sections in forms.
+
+ <dt><a href="#syntax">The Language Syntax</a>
+
+ <dd>All of these features would be for naught if they couldn't be
+ represented in a serialised form and sent to other people, and so this
+ section defines the syntax of HTML, along with rules for how to parse
+ HTML.
+ </dl>
+
+ <p>There are also a couple of appendices, defining <a href="#wysiwyg">shims
+ for WYSIWYG editors</a>, <a href="#rendering">rendering rules</a> for Web
+ browsers, and listing <a href="#no">areas that are out of scope</a> for
+ this specification.
+
+ <h4 id=how-to><span class=secno>1.2.1. </span>How to read this
+ specification</h4>
+
+ <p>This specification should be read like all other specifications. First,
+ it should be read cover-to-cover, multiple times. Then, it should be read
+ backwards at least once. Then it should be read by picking random sections
+ from the contents list and following all the cross-references.
+
+ <h3 id=conformance><span class=secno>1.3. </span>Conformance requirements</h3>
+
+ <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>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="#refsRFC2119">[RFC2119]</a></p>
+ <!-- XXX but they should be marked up -->
+
+ <p>This specification describes the conformance criteria for user agents
+ (relevant to implementors) and documents (relevant to authors and
+ authoring tool implementors).
+
+ <p class=note>There is no implied relationship between document conformance
+ requirements and implementation conformance requirements. User agents are
+ not free to handle non-conformant documents as they please; the processing
+ model described in this specification applies to implementations
+ regardless of the conformity of the input documents.</p>
+ <!--XXX quite possible that
+ this is stated twice. check for whether this is a dupe. -->
+
+ <p>User agents fall into several (overlapping) categories with different
+ conformance requirements.
+
+ <dl>
+ <dt id=interactive>Web browsers and other interactive user agents
+
+ <dd>
+ <p>Web browsers that support <a href="#xhtml5">XHTML</a> must process
+ elements and attributes from the <a href="#html-namespace0">HTML
+ namespace</a> found in <a href="#xml-documents">XML documents</a> as
+ described in this specification, so that users can interact with them,
+ unless the semantics of those elements have been overridden by other
+ specifications.</p>
+
+ <p class=example>A conforming XHTML processor would, upon finding an
+ XHTML <code><a href="#script0">script</a></code> element in an XML
+ document, execute the script contained in that element. However, if the
+ element is found within an XSLT transformation sheet (assuming the UA
+ also supports XSLT), then the processor would instead treat the <code><a
+ href="#script0">script</a></code> element as an opaque element that
+ forms part of the transform.</p>
+
+ <p>Web browsers that support <a href="#html5" title=HTML5>HTML</a> must
+ process documents labelled as <code>text/html</code> as described in
+ this specification, so that users can interact with them.</p>
+
+ <dt id=non-interactive>Non-interactive presentation user agents
+
+ <dd>
+ <p>User agents that process HTML and XHTML documents purely to render
+ non-interactive versions of them must comply to the same conformance
+ criteria as Web browsers, except that they are exempt from requirements
+ regarding user interaction.</p>
+
+ <p class=note>Typical examples of non-interactive presentation user
+ agents are printers (static UAs) and overhead displays (dynamic UAs). It
+ is expected that most static non-interactive presentation user agents
+ will also opt to <a href="#non-scripted">lack scripting support</a>.</p>
+
+ <p class=example>A non-interactive but dynamic presentation UA would
+ still execute scripts, allowing forms to be dynamically submitted, and
+ so forth. However, since the concept of "focus" is irrelevant when the
+ user cannot interact with the document, the UA would not need to support
+ any of the focus-related DOM APIs.</p>
+
+ <dt><dfn id=non-scripted>User agents with no scripting support</dfn>
+
+ <dd>
+ <p>Implementations that do not support scripting (or which have their
+ scripting features <a href="#scripting1" title="scripting is
+ disabled">disabled</a>) are exempt from supporting the events and DOM
+ interfaces mentioned in this specification. For the parts of this
+ specification that are defined in terms of an events model or in terms
+ of the DOM, such user agents must still act as if events and the DOM
+ were supported.</p>
+
+ <p class=note>Scripting can form an integral part of an application. Web
+ browsers that do not support scripting, or that have scripting disabled,
+ might be unable to fully convey the author's intent.</p>
+
+ <dt>Conformance checkers
+
+ <dd id=conformance-checkers>
+ <p>Conformance checkers must verify that a document conforms to the
+ applicable conformance criteria described in this specification.
+ Conformance checkers are exempt from detecting errors that require
+ interpretation of the author's intent (for example, while a document is
+ non-conforming if the content of a <code><a
+ href="#blockquote">blockquote</a></code> element is not a quote,
+ conformance checkers do not have to check that <code><a
+ href="#blockquote">blockquote</a></code> elements only contain quoted
+ material).</p>
+
+ <p>Conformance checkers must check that the input document conforms when
+ <a href="#scripting1">scripting is disabled</a>, and should also check
+ that the input document conforms when <a href="#scripting2">scripting is
+ enabled</a>. (This is only a "SHOULD" and not a "MUST" requirement
+ because it has been proven to be impossible. <a
+ href="#refsHALTINGPROBLEM">[HALTINGPROBLEM]</a>)</p>
+ <!-- XXX
+ [Computable] On computable numbers, with an application to the
+ Entscheidungsproblem. Alan M. Turing. In Proceedings of the London
+ Mathematical Society, series 2, volume 42, pages 230-265. London
+ Mathematical Society,
+ 1937. http://www.turingarchive.org/browse.php/B/12 (referenced:
+ 2007-03-03)
+ -->
+
+ <p>The term "HTML5 validator" can be used to refer to a conformance
+ checker that itself conforms to the applicable requirements of this
+ specification.</p>
+
+ <div class=note>
+ <p>XML DTDs cannot express all the conformance requirements of this
+ specification. Therefore, a validating XML processor and a DTD cannot
+ constitute a conformance checker. Also, since neither of the two
+ authoring formats defined in this specification are applications of
+ SGML, a validating SGML system cannot constitute a conformance checker
+ either.</p>
+
+ <p>To put it another way, there are three types of conformance criteria:</p>
+
+ <ol>
+ <li>Criteria that can be expressed in a DTD.
+
+ <li>Criteria that cannot be expressed by a DTD, but can still be
+ checked by a machine.
+
+ <li>Criteria that can only be checked by a human.
+ </ol>
+
+ <p>A conformance checker must check for the first two. A simple
+ DTD-based validator only checks for the first class of errors and is
+ therefore not a conforming conformance checker according to this
+ specification.</p>
+ </div>
+
+ <dt>Data mining tools
+
+ <dd id=data-mining>
+ <p>Applications and tools that process HTML and XHTML documents for
+ reasons other than to either render the documents or check them for
+ conformance should act in accordance to the semantics of the documents
+ that they process.</p>
+
+ <p class=example>A tool that generates <span title="sections and
+ headings">document outlines</span> but increases the nesting level for
+ each paragraph and does not increase the nesting level for each section
+ would not be conforming.</p>
+
+ <dt id=editors>Authoring tools and markup generators
+
+ <dd>
+ <p>Authoring tools and markup generators must generate conforming
+ documents. Conformance criteria that apply to authors also apply to
+ authoring tools, where appropriate.</p>
+
+ <p>Authoring tools are exempt from the strict requirements of using
+ elements only for their specified purpose, but only to the extent that
+ authoring tools are not yet able to determine author intent.</p>
+
+ <p class=example>For example, it is not conforming to use an <code><a
+ href="#address">address</a></code> element for arbitrary contact
+ information; that element can only be used for marking up contact
+ information for the author of the document or section. However, since an
+ authoring tools is likely unable to determine the difference, an
+ authoring tool is exempt from that requirement.</p>
+
+ <p class=note>In terms of conformance checking, an editor is therefore
+ required to output documents that conform to the same extent that a
+ conformance checker will verify.</p>
+
+ <p>When an authoring tool is used to edit a non-conforming document, it
+ may preserve the conformance errors in sections of the document that
+ were not edited during the editing session (i.e. an editing tool is
+ allowed to round-trip errorneous content). However, an authoring tool
+ must not claim that the output is conformant if errors have been so
+ preserved.</p>
+
+ <p>Authoring tools are expected to come in two broad varieties: tools
+ that work from structure or semantic data, and tools that work on a
+ What-You-See-Is-What-You-Get media-specific editing basis (WYSIWYG).</p>
+
+ <p>The former is the preferred mechanism for tools that author HTML,
+ since the structure in the source information can be used to make
+ informed choices regarding which HTML elements and attributes are most
+ appropriate.</p>
+
+ <p>However, WYSIWYG tools are legitimate, and this specification <a
+ href="#wysiwyg1" title="WYSIWYG editors">makes certain concessions to
+ WYSIWYG editors</a>.</p>
+
+ <p>All authoring tools, whether WYSIWYG or not, should make a best effort
+ attempt at enabling users to create well-structured, semantically rich,
+ media-independent content.</p>
+ </dl>
+
+ <p>Some conformance requirements are phrased as requirements on elements,
+ attributes, methods or objects. Such requirements fall into two
+ categories; those describing content model restrictions, and those
+ describing implementation behaviour. The former category of requirements
+ are requirements on documents and authoring tools. The second category are
+ requirements on user agents.
+
+ <p>Conformance requirements phrased as algorithms or specific steps may be
+ implemented in any manner, so long as the end result is equivalent. (In
+ particular, the algorithms defined in this specification are intended to
+ be easy to follow, and not intended to be performant.)
+
+ <p id=hardwareLimitations>User agents may impose implementation-specific
+ limits on otherwise unconstrained inputs, e.g. to prevent denial of
+ service attacks, to guard against running out of memory, or to work around
+ platform-specific limitations.
+
+ <p>For compatibility with existing content and prior specifications, this
+ specification describes two authoring formats: one based on XML (referred
+ to as <dfn id=xhtml5 title=XHTML>XHTML5</dfn>), and one using a <a
+ href="#parsing">custom format</a> inspired by SGML (referred to as <dfn
+ id=html5>HTML5</dfn>). Implementations may support only one of these two
+ formats, although supporting both is encouraged.
+
+ <p id=authors-using-xhtml><a href="#xhtml5">XHTML</a> documents (<a
+ href="#xml-documents">XML documents</a> using elements from the <a
+ href="#html-namespace0">HTML namespace</a>) that use the new features
+ described in this specification and that are served over the wire (e.g. by
+ HTTP) must be sent using an XML MIME type such as
+ <code>application/xml</code> or <code>application/xhtml+xml</code> and
+ must not be served as <code>text/html</code>. <a
+ href="#refsRFC3023">[RFC3023]</a>
+
+ <p>Such XML documents may contain a <code>DOCTYPE</code> if desired, but
+ this is not required to conform to this specification.
+
+ <p class=note>According to the XML specification, XML processors are not
+ guaranteed to process the external DTD subset referenced in the DOCTYPE.
+ This means, for example, that using entities for characters in XHTML
+ documents is unsafe (except for &amp;lt;, &amp;gt;, &amp;amp;, &amp;quot;
+ and &amp;apos;). For interoperability, authors are advised to avoid
+ optional features of XML.
+
+ <p id=authors-using-html><a href="#html5" title=HTML5>HTML documents</a>,
+ if they are served over the wire (e.g. by HTTP) must be labelled with the
+ <code>text/html</code> MIME type.</p>
+ <!--
+ XXX update RFC 2854 -->
+
+ <p id=entity-references>The language in this specification assumes that the
+ user agent expands all entity references, and therefore does not include
+ entity reference nodes in the DOM. If user agents do include entity
+ reference nodes in the DOM, then user agents must handle them as if they
+ were fully expanded when implementing this specification. For example, if
+ a requirement talks about an element's child text nodes, then any text
+ nodes that are children of an entity reference that is a child of that
+ element would be used as well.</p>
+ <!-- XXX unexpandable entities? -->
+
+ <h4 id=common><span class=secno>1.3.1. </span>Common conformance
+ requirements for APIs exposed to JavaScript</h4>
+
+ <p class=big-issue>A lot of arrays/lists/<span>collection</span>s in this
+ spec assume zero-based indexes but use the term "<var
+ title="">index</var>th" liberally. We should define those to be zero-based
+ and be clearer about this.
+
+ <p>Unless other specified, if a DOM attribute that is a floating point
+ number type (<code title="">float</code>) is assigned an Infinity or
+ Not-a-Number value, a <code title=big-issue>NOT_SUPPORTED_ERR</code>
+ exception must be raised.
+
+ <p>Unless other specified, if a DOM attribute that is a signed numberic
+ type is assigned a negative value, a <code
+ title=big-issue>NOT_SUPPORTED_ERR</code> exception must be raised.
+
+ <p>Unless other specified, if a method with an argument that is a floating
+ point number type (<code title="">float</code>) is passed an Infinity or
+ Not-a-Number value, a <code title=big-issue>NOT_SUPPORTED_ERR</code>
+ exception must be raised.
+
+ <p>Unless other specified, if a method is passed fewer arguments than is
+ defined for that method in its IDL definition, a <code
+ title=big-issue>NOT_SUPPORTED_ERR</code> exception must be raised.
+
+ <p>Unless other specified, if a method is passed more arguments than is
+ defined for that method in its IDL definition, the excess arguments must
+ be ignored.
+
+ <p>Unless other specified, if a method is expecting, as one of its
+ arguments, as defined by its IDL definition, an object implementing a
+ particular interface <var title="">X</var>, and the argument passed is an
+ object whose [[Class]] property is neither that interface <var
+ title="">X</var>, nor the name of an interface <var title="">Y</var> where
+ this specification requires that all objects implementing interface <var
+ title="">Y</var> also implement interface <var title="">X</var>, nor the
+ name of an interface that inherits from the expected interface <var
+ title="">X</var>, then a <code title="">TYPE_MISMATCH_ERR</code> exception
+ must be raised.
+
+ <p class=big-issue>Anything else? Passing the wrong type of object, maybe?
+ Implied conversions to int/float?
+
+ <h4 id=dependencies><span class=secno>1.3.2. </span>Dependencies</h4>
+
+ <p>This specification relies on several other underlying specifications.
+
+ <dl>
+ <dt>XML
+
+ <dd>
+ <p>Implementations that support XHTML5 must support some version of XML,
+ as well as its corresponding namespaces specification, because XHTML5
+ uses an XML serialisation with namespaces. <a href="#refsXML">[XML]</a>
+ <a href="#refsXMLNAMES">[XMLNAMES]</a></p>
+
+ <dt>XML Base
+
+ <dd>
+ <p id=xmlBase>User agents must follow the rules given by XML Base to
+ resolve relative URIs in HTML and XHTML fragments. That is the mechanism
+ used in this specification for resolving relative URIs in DOM trees. <a
+ href="#refsXMLBASE">[XMLBASE]</a></p>
+
+ <p class=note>It is possible for <code
+ title=attr-xml-base>xml:base</code> attributes to be present even in
+ HTML fragments, as such attributes can be added dynamically using
+ script.</p>
+
+ <dt>DOM
+
+ <dd>
+ <p>Implementations must support some version of DOM Core and DOM Events,
+ because this specification is defined in terms of the DOM, and some of
+ the features are defined as extensions to the DOM Core interfaces. <a
+ href="#refsDOM3CORE">[DOM3CORE]</a> <a
+ href="#refsDOM3CORE">[DOM3EVENTS]</a></p>
+
+ <dt>ECMAScript
+
+ <dd>
+ <p>Implementations that use ECMAScript to implement the APIs defined in
+ this specification must implement them in a manner consistent with the
+ ECMAScript Bindings for DOM Specifications specification, as this
+ specification uses that specification's terminology. <a
+ href="#refsEBFD">[EBFD]</a></p>
+ </dl>
+
+ <p>This specification does not require support of any particular network
+ transport protocols, image formats, audio formats, video formats, style
+ sheet language, scripting language, or any of the DOM and WebAPI
+ specifications beyond those described above. However, the language
+ described by this specification is biased towards CSS as the styling
+ language, ECMAScript as the scripting language, and HTTP as the network
+ protocol, and several features assume that those languages and protocols
+ are in use.
+
+ <h4 id=features><span class=secno>1.3.3. </span>Features defined in other
+ specifications</h4>
+
+ <p>Some elements are defined in terms of their DOM <dfn
+ id=textcontent><code>textContent</code></dfn> attribute. This is an
+ attribute defined on the <code>Node</code> interface in DOM3 Core. <a
+ href="#refsDOM3CORE">[DOM3CORE]</a>
+
+ <p class=big-issue>Should textContent be defined differently for dir="" and
+ &lt;bdo>? Should we come up with an alternative to textContent that
+ handles those and other things, like alt=""?</p>
+ <!-- This section is currently here exclusively so that we crossref
+ to textContent. XXX also add event-click, event-change,
+ event-DOMActivate, etc, here, and just have the section be a general
+ "defined in other specifications" section -->
+
+ <p>The term <dfn id=activation0>activation behavior</dfn> is used as
+ defined in the DOM3 Events specification. <a
+ href="#refsDOM3EVENTS">[DOM3EVENTS]</a> <span class=big-issue>At the time
+ of writing, DOM3 Events hadn't yet been updated to define that
+ phrase.</span>
+
+ <p id=alternate-style-sheets>The rules for handling alternative style
+ sheets are defined in the CSS object model specification. <a
+ href="#CSSOM">[CSSOM]</a>
+
+ <p class=big-issue>See <a
+ href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.html?rev=1.35&amp;content-type=text/html;%20charset=utf-8">http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.html?rev=1.35&amp;content-type=text/html;%20charset=utf-8</a>
+
+ <p>Certain features are defined in terms of CSS &lt;color&gt; values. When
+ the CSS value <code title="">currentColor</code> is specified in this
+ context, the "computed value of the 'color' property" for the purposes of
+ determining the computed value of the <code title="">currentColor</code>
+ keyword is the computed value of the 'color' property on the element in
+ question. <a href="#refsCSS3COLOR">[CSS3COLOR]</a>
+
+ <p class=example>If a canvas gradient's <code
+ title=dom-canvasgradient-addColorStop><a
+ href="#addcolorstop">addColorStop()</a></code> method is called with the
+ <code title="">currentColor</code> keyword as the color, then the computed
+ value of the 'color' property on the <code><a
+ href="#canvas">canvas</a></code> element is the one that is used.
+
+ <h3 id=terminology><span class=secno>1.4. </span>Terminology</h3>
+
+ <p>This specification refers to both HTML and XML attributes and DOM
+ attributes, often in the same context. When it is not clear which is being
+ referred to, they are referred to as <dfn id=content>content
+ attributes</dfn> for HTML and XML attributes, and <dfn
+ id=dom-attributes>DOM attributes</dfn> for those from the DOM. Similarly,
+ the term "properties" is used for both ECMAScript object properties and
+ CSS properties. When these are ambiguous they are qualified as object
+ properties and CSS properties respectively.
+
+ <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=elements1>elements in the
+ HTML namespace</dfn>", or "<dfn id=html-elements>HTML elements</dfn>" for
+ short, when used in this specification, thus refers to both HTML and XHTML
+ elements.
+
+ <p>Unless 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 (they are in the per-element partition).
+
+ <p>The term <a href="#html-">HTML documents</a> is sometimes used in
+ contrast with <a href="#xml-documents">XML documents</a> to mean
+ specifically documents that were parsed using an <a href="#html-0">HTML
+ parser</a> (as opposed to using an XML parser or created purely through
+ the DOM).
+
+ <p>Generally, when the specification states that a feature applies to HTML
+ or XHTML, 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>This specification uses the term <em>document</em> 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>For readability, the term URI is used to refer to both ASCII URIs and
+ Unicode IRIs, as those terms are defined by <a
+ href="#refsRFC3986">[RFC3986]</a> and <a href="#refsRFC3987">[RFC3987]</a>
+ respectively. On the rare occasions where IRIs are not allowed but ASCII
+ URIs are, this is called out explicitly.
+
+ <p>The term <dfn id=root-element>root element</dfn>, when not qualified to
+ explicitly refer to the document's root element, means the furthest
+ ancestor element node of whatever node is being discussed, or the node
+ itself is there is none. 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>An element is said to have been <dfn id=inserted 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>.
+
+ <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>When it is stated that some element or attribute is <dfn id=ignored
+ 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. A user agent must not mutate the DOM in such
+ situations.
+
+ <p>When an XML name, such as an attribute or element name, is referred to
+ in the form <code><var title="">prefix</var>:<var
+ title="">localName</var></code>, as in <code>xml:id</code> or
+ <code>svg:rect</code>, it refers to a name with the local name <var
+ title="">localName</var> and the namespace given by the prefix, as defined
+ by the following table:
+
+ <dl>
+ <dt><code title="">xml</code>
+
+ <dd><code>http://www.w3.org/XML/1998/namespace</code>
+
+ <dt><code title="">html</code>
+
+ <dd><code>http://www.w3.org/1999/xhtml</code>
+
+ <dt><code title="">svg</code>
+
+ <dd><code>http://www.w3.org/2000/svg</code>
+ </dl>
+
+ <p>For simplicity, terms such as <em>shown</em>, <em>displayed</em>, and
+ <em>visible</em> 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>Various DOM interfaces are defined in this specification using
+ pseudo-IDL. This looks like OMG IDL but isn't. For instance, method
+ overloading is used, and types from the W3C DOM specifications are used
+ without qualification. Language-specific bindings for these abstract
+ interface definitions must be derived in the way consistent with W3C DOM
+ specifications. Some interface-specific binding information for ECMAScript
+ is included in this specification.
+
+ <p class=big-issue>The current situation with IDL blocks is pitiful. IDL is
+ totally inadequate to properly represent what objects have to look like in
+ JS; IDL can't say if a member is enumerable, what the indexing behaviour
+ is, what the stringification behaviour is, what behaviour setting a member
+ whose type is a particular interface should be (e.g. setting of
+ document.location or element.className), what constructor an object
+ implementing an interface should claim to have, how overloads work, etc. I
+ think we should make the IDL blocks non-normative, and/or replace them
+ with something else that is better for JS while still being clear on how
+ it applies to other languages. However, we do need to have something that
+ says what types the methods take as arguments, since we have to raise
+ exceptions if they are wrong.
+
+ <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>A DOM attribute is said to be <em>getting</em> when its value is being
+ retrieved (e.g. by author script), and is said to be <em>setting</em> when
+ a new value is assigned to it.
+
+ <p>If a DOM object is said to be <dfn id=live>live</dfn>, then that means
+ that any attributes returning that object must always return the same
+ object (not a new object each time), and the attributes and methods on
+ that object must operate on the actual underlying data, not a snapshot of
+ the data.</p>
+ <!-- XXX should define "same instance of" to mean JS===. -->
+
+ <p>The terms <em>fire</em> and <em>dispatch</em> are used interchangeably
+ in the context of events, as in the DOM Events specifications. <a
+ href="#refsDOM3EVENTS">[DOM3EVENTS]</a>
+
+ <p>The term <dfn id=text-node>text node</dfn> refers to any
+ <code>Text</code> node, including <code>CDATASection</code> nodes (any
+ <code>Node</code> with node type 3 or 4).
+
+ <p>Some of the algorithms in this specification, for historical reasons,
+ require the user agent to <dfn id=pause>pause</dfn> until some condition
+ has been met. While a user agent is paused, it must ensure that no scripts
+ execute (e.g. no event handlers, no timers, etc). User agents should
+ remain responsive to user input while paused, however.
+
+ <h4 id=html-vs><span class=secno>1.4.1. </span>HTML vs XHTML</h4>
+
+ <p><em>This section is non-normative.</em>
+
+ <p>This specification defines an abstract language for describing documents
+ and applications, and some APIs for interacting with in-memory
+ representations of resources that use this language.
+
+ <p>The in-memory representation is known as "DOM5 HTML", or "the DOM" for
+ short.
+
+ <p>There are various concrete syntaxes that can be used to transmit
+ resources that use this abstract language, two of which are defined in
+ this specification.
+
+ <p>The first such concrete syntax is "HTML5". This is the format
+ recommended for most authors. It is compatible with all legacy Web
+ browsers. If a document is transmitted with the MIME type <code
+ title="">text/html</code>, then it will be processed as an "HTML5"
+ document by Web browsers.
+
+ <p>The second concrete syntax uses XML, and is known as "XHTML5". When a
+ document is transmitted with an XML MIME type, such as <code
+ title="">application/xhtml+xml</code>, then it is processed by an XML
+ processor by Web browsers, and treated as an "XHTML5" document. Generally
+ speaking, authors are discouraged from trying to use XML on the Web,
+ because XML has much stricter syntax rules than the "HTML5" variant
+ described above, and is relatively newer and therefore less mature.
+
+ <p>The "DOM5 HTML", "HTML5", and "XHTML5" representations cannot all
+ represent the same content. For example, namespaces cannot be represented
+ using "HTML5", but they are supported in "DOM5 HTML" and "XHTML5".
+ Similarly, documents that use the <code><a
+ href="#noscript">noscript</a></code> feature can be represented using
+ "HTML5", but cannot be represented with "XHTML5" and "DOM5 HTML". Comments
+ that contain the string "<code title="">--&gt;</code>" can be represented
+ in "DOM5 HTML" but not in "HTML5" and "XHTML5". And so forth.
+
+ <h2 id=dom><span class=secno>2. </span>The Document Object Model</h2>
+
+ <p>The Document Object Model (DOM) is a representation &mdash; a model
+ &mdash; of a document and its content. <a
+ href="#refsDOM3CORE">[DOM3CORE]</a> The DOM is not just an API; the
+ conformance criteria of HTML implementations are defined, in this
+ specification, in terms of operations on the DOM.
+
+ <p>This specification defines the language represented in the DOM by
+ features together called DOM5 HTML. DOM5 HTML consists of DOM Core
+ <code>Document</code> nodes and DOM Core <code>Element</code> nodes, along
+ with text nodes and other content.
+
+ <p>Elements in the DOM represent things; that is, they have intrinsic
+ <em>meaning</em>, also known as semantics.
+
+ <p class=example>For example, a <code><a href="#p">p</a></code> element
+ represents a paragraph.
+
+ <p>In addition, documents and elements in the DOM host APIs that extend the
+ DOM Core APIs, providing new features to application developers using DOM5
+ HTML.
+
+ <h3 id=documents><span class=secno>2.1. </span>Documents</h3>
+
+ <p>Every XML and HTML document in an HTML UA is represented by a
+ <code>Document</code> object. <a href="#refsDOM3CORE">[DOM3CORE]</a>
+
+ <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->HTML documents</dfn> when they are created. Whether a document is
+ an <a href="#html-" title="HTML documents">HTML document</a> or an <a
+ href="#xml-documents" title="XML documents">XML document</a> affects the
+ behaviour of certain APIs, as well as a few CSS rendering rules. <a
+ href="#refsCSS21">[CSS21]</a>
+
+ <p class=note>A <code>Document</code> object created by the <code
+ title="">createDocument()</code> API on the <code>DOMImplementation</code>
+ object is initially an <a href="#xml-documents" title="XML documents">XML
+ document</a>, but can be made into an <a href="#html-" title="HTML
+ documents">HTML document</a> by calling <code title=dom-document-open><a
+ href="#open">document.open()</a></code> on it.
+
+ <p>All <code>Document</code> objects (in user agents implementing this
+ specification) must 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-" title="HTML documents">HTML document</a>
+ or indeed whether it contains any <a href="#html-elements">HTML
+ elements</a> at all.) <code>Document</code> objects must also implement
+ the document-level interface of any other namespaces found in the document
+ that the UA supports. For example, if an HTML implementation also supports
+ SVG, then the <code>Document</code> object must implement <code><a
+ href="#htmldocument">HTMLDocument</a></code> and <code>SVGDocument</code>.
+
+ <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>.
+
+ <pre class=idl>interface <dfn id=htmldocument>HTMLDocument</dfn> {
+ // <a href="#resource0">Resource metadata management</a>
+ readonly attribute <a href="#location2">Location</a> <a href="#location0" title=dom-document-location>location</a>;
+ readonly attribute DOMString <a href="#url" title=dom-document-URL>URL</a>;
+ attribute DOMString <a href="#domain" title=dom-document-domain>domain</a>;
+ readonly attribute DOMString <a href="#referrer" title=dom-document-referrer>referrer</a>;
+ attribute DOMString <a href="#cookie0" title=dom-document-cookie>cookie</a>;
+ readonly attribute DOMString <a href="#lastmodified" title=dom-document-lastModified>lastModified</a>;
+
+ // <a href="#dom-tree0">DOM tree accessors</a>
+ attribute DOMString <a href="#document.title" title=dom-document-title>title</a>;
+ attribute DOMString <a href="#dir1" title=dom-document-dir>dir</a>;
+ attribute <a href="#htmlelement">HTMLElement</a> <a href="#body" title=dom-document-body>body</a>;
+ readonly attribute <a href="#htmlcollection0">HTMLCollection</a> <a href="#images0" title=dom-document-images>images</a>;
+<!-- readonly attribute <span>HTMLCollection</span> <span title="dom-document-applets">applets</span>;
+--> readonly attribute <a href="#htmlcollection0">HTMLCollection</a> <a href="#links0" title=dom-document-links>links</a>;
+ readonly attribute <a href="#htmlcollection0">HTMLCollection</a> <a href="#forms0" title=dom-document-forms>forms</a>;
+ readonly attribute <a href="#htmlcollection0">HTMLCollection</a> <a href="#anchors" title=dom-document-anchors>anchors</a>;
+ NodeList <a href="#getelementsbyname" title=dom-document-getElementsByName>getElementsByName</a>(in DOMString elementName);
+ NodeList <a href="#getelementsbyclassname" title=dom-document-getElementsByClassName>getElementsByClassName</a>(in DOMString[] classNames);
+
+ // <a href="#dynamic2">Dynamic markup insertion</a>
+ attribute DOMString <a href="#innerhtml" title=dom-innerHTML>innerHTML</a>;
+ void <a href="#open" title=dom-document-open>open</a>();
+ void <a href="#open" title=dom-document-open>open</a>(in DOMString type);
+ void <a href="#open" title=dom-document-open>open</a>(in DOMString type, in DOMString replace);
+ void <a href="#open" title=dom-document-open>open</a>(in DOMString url, in DOMString name, in DOMString features);
+ void <a href="#open" title=dom-document-open>open</a>(in DOMString url, in DOMString name, in DOMString features, in bool replace);
+ void <a href="#close" title=dom-document-close>close</a>();
+ void <a href="#document.write" title=dom-document-write>write</a>(in DOMString text);
+ void <a href="#document.writeln" title=dom-document-writeln>writeln</a>(in DOMString text);
+
+ // <a href="#interaction0">Interaction</a>
+ readonly attribute <span>Element</span> <a href="#activeelement" title=dom-document-activeElement>activeElement</a>;
+ readonly attribute boolean <a href="#hasfocus" title=dom-document-hasFocus>hasFocus</a>;
+
+ // <a href="#command1" title=concept-command>Commands</a>
+ readonly attribute <a href="#htmlcollection0">HTMLCollection</a> <a href="#commands0" title=dom-document-commands>commands</a>;
+
+ // <a href="#editing0">Editing</a>
+ attribute boolean <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 doShowUI);
+ boolean <a href="#execCommand" title=dom-document-execCommand>execCommand</a>(in DOMString commandId, in boolean doShowUI, in DOMString value);
+ <a href="#selection1">Selection</a> <a href="#getselection0" title=dom-document-getSelection>getSelection</a>();
+
+ // <a href="#cross-document">Cross-document messaging</a>
+ void <a href="#postmessage" title=dom-document-postMessage>postMessage</a>(in DOMString message);
+<!-- XXX we're not done here.
+ XXX see e.g. http://lxr.mozilla.org/seamonkey/source/dom/public/idl/html/nsIDOMNSHTMLDocument.idl
+ XXX see e.g. http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/dom/Document.cpp
+ XXX see e.g. http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLDocument.cpp
+ -->
+};</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.
+
+ <h4 id=security><span class=secno>2.1.1. </span>Security</h4>
+
+ <p>User agents must raise a <a href="#security8">security exception</a>
+ whenever any of the members of an <code><a
+ href="#htmldocument">HTMLDocument</a></code> object are accessed by
+ scripts whose <a href="#origin0">origin</a> is not the same as the
+ <code>Document</code>'s origin, with the following exceptions:
+
+ <ul>
+ <li>The <code title=dom-document-postMessage><a
+ href="#postmessage">postMessage()</a></code> method must be allowed to be
+ called from any script.
+ </ul>
+
+ <p class=big-issue>We may want to just put postMessage on Window instead of
+ Document, as that reduces the XSS risk.
+
+ <h4 id=resource><span class=secno>2.1.2. </span><dfn id=resource0>Resource
+ metadata management</dfn></h4>
+
+ <p>The <dfn id=url title=dom-document-URL><code>URL</code></dfn> attribute
+ must return <span>the document's address</span><!-- XXX
+ xref -->.
+
+ <p>The <dfn id=domain title=dom-document-domain><code>domain</code></dfn>
+ attribute must be initialised to <span>the document's domain</span>, if it
+ has one, and null otherwise. On getting, the attribute must return its
+ current value. On setting, if the new value is an allowed value (as
+ defined below), the attribute's value must be changed to the new value. If
+ the new value is not an allowed value, then a <a
+ href="#security8">security exception</a> must be raised instead.
+
+ <p>A new value is an allowed value for the <code
+ title=dom-document-domain><a href="#domain">document.domain</a></code>
+ attribute if it is equal to the attribute's current value, or if the new
+ value, prefixed by a U+002E FULL STOP ("."), exactly matches the end of
+ the current value. If the current value is null, new values other than
+ null will never be allowed.
+
+ <p>If the <code>Document</code> object's <span title="the document's
+ address">address</span><!-- XXX xref --> is hierarchical and uses a
+ server-based naming authority, then its <dfn id=domain0 title="document's
+ domain">domain</dfn> is the &lt;hostname&gt; part of that address.
+ Otherwise, it has no domain.
+
+ <p class=note>The <code title=dom-document-domain><a
+ href="#domain">domain</a></code> attribute is used to enable pages on
+ different hosts of a domain to access each others' DOMs<span
+ class=big-issue>, though this is not yet defined by this
+ specification</span>.</p>
+ <!-- XXX xref -->
+ <!--XXX
+ http://lxr.mozilla.org/seamonkey/source/content/html/document/src/nsHTMLDocument.cpp
+ search for ::GetDomain ::SetDomain
+ http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/dom/Document.cpp
+ search for ::domain ::setDomain
+ -->
+
+ <p>The <dfn id=referrer
+ title=dom-document-referrer><code>referrer</code></dfn> attribute must
+ return either the URI of the page which <a href="#navigate"
+ title=navigate>navigated</a> the <a href="#browsing0">browsing context</a>
+ to the current document (if any), or the empty string (if there is no such
+ originating page, or if the UA has been configured not to report
+ referrers).
+
+ <p class=note>In the case of HTTP, the <code title=dom-document-referrer><a
+ href="#referrer">referrer</a></code> DOM attribute will match the
+ <code>Referer</code> (sic) header that was sent when fetching the current
+ page.
+
+ <p>The <dfn id=cookie0 title=dom-document-cookie><code>cookie</code></dfn>
+ attribute must, on getting, return the same string as the value of the
+ <code title="">Cookie</code> HTTP header it would include if fetching the
+ resource indicated by <span>the document's address</span> over HTTP, as
+ per RFC 2109 section 4.3.4. <a href="#refsRFC2109">[RFC2109]</a>
+
+ <p>On setting, the <code title=dom-document-cookie><a
+ href="#cookie0">cookie</a></code> attribute must cause the user agent to
+ act as it would when processing cookies if it had just attempted to fetch
+ <span>the document's address</span> over HTTP, and had received a response
+ with a <code>Set-Cookie</code> header whose value was the specified value,
+ as per RFC 2109 sections 4.3.1, 4.3.2, and 4.3.3. <a
+ href="#refsRFC2109">[RFC2109]</a>
+
+ <p class=note>Since the <code title=dom-document-cookie><a
+ href="#cookie0">cookie</a></code> attribute is accessible across frames,
+ the path restrictions on cookies are only a tool to help manage which
+ cookies are sent to which parts of the site, and are not in any way a
+ security feature.
+
+ <p>The <dfn id=lastmodified
+ title=dom-document-lastModified><code>lastModified</code></dfn> attribute,
+ on getting, must return the date and time of the <code>Document</code>'s
+ source file's last modification, in the user's local timezone, in the
+ following format:
+
+ <ol>
+ <li> The month component of the date.
+
+ <li> A U+002F SOLIDUS character ('/').
+
+ <li> The day component of the date.
+
+ <li> A U+002F SOLIDUS character ('/').
+
+ <li> The last two digits of the year component of the date.
+
+ <li> A U+0020 SPACE character.
+
+ <li> The hours component of the time.
+
+ <li> A U+003A COLON character (':').
+
+ <li> The minutes component of the time.
+
+ <li> A U+003A COLON character (':').
+
+ <li> The seconds component of the time.
+ </ol>
+
+ <p>All the numeric components above must be given as two digits in the
+ range U+0030 DIGIT ZERO to U+0039 DIGIT NINE representing the number in
+ base ten, zero-padded if necessary.
+
+ <p>The <code>Document</code>'s source file's last modification date and
+ time must be derived from relevant features of the networking protocols
+ used, e.g. from the value of the HTTP <code title="">Last-Modified</code>
+ header of the document, or from metadata in the filesystem for local
+ files. If the last modification date and time are not known, the attribute
+ must return the string <code title="">01/01/1970 00:00:00</code>.
+
+ <h3 id=elements><span class=secno>2.2. </span>Elements</h3>
+
+ <p>The nodes representing <a href="#html-elements">HTML elements</a> in the
+ DOM must implement, and expose to scripts, the interfaces listed for them
+ in the relevant sections of this specification. This includes <a
+ href="#xhtml5">XHTML</a> elements in <a href="#xml-documents">XML
+ documents</a>, even when those documents are in another context (e.g.
+ inside an XSLT transform).
+
+ <p>The basic interface, from which all the <a href="#html-elements">HTML
+ elements</a>' interfaces inherit, and which must be used by elements that
+ have no additional requirements, is the <code><a
+ href="#htmlelement">HTMLElement</a></code> interface.
+
+ <pre
+ class=idl>interface <dfn id=htmlelement>HTMLElement</dfn> : <span>Element</span> {
+ // <a href="#dom-tree0">DOM tree accessors</a>
+ NodeList <a href="#getelementsbyclassname0" title=dom-getElementsByClassName>getElementsByClassName</a>(in DOMString[] classNames);
+
+ // <a href="#dynamic2">Dynamic markup insertion</a>
+ attribute DOMString <a href="#innerhtml" title=dom-innerHTML>innerHTML</a>;
+
+ // <span>Metadata attributes</span>
+ attribute DOMString <a href="#id0" title=dom-id>id</a>;
+ attribute DOMString <a href="#title0" title=dom-title>title</a>;
+ attribute DOMString <a href="#lang0" title=dom-lang>lang</a>;
+ attribute DOMString <a href="#dir0" title=dom-dir>dir</a>;
+ attribute <span>DOMString</span> <a href="#classname" title=dom-className>className</a>;
+ readonly attribute <a href="#domtokenlist0">DOMTokenList</a> <a href="#classlist" title=dom-classList>classList</a>;
+
+ // <a href="#interaction0">Interaction</a>
+ attribute boolean <a href="#irrelevant0" title=dom-irrelevant>irrelevant</a>;
+ attribute long <a href="#tabindex0" title=dom-tabindex>tabIndex</a>;
+ void <a href="#click" title=dom-click>click</a>();
+ void <a href="#focus0" title=dom-focus>focus</a>();
+ void <a href="#blur" title=dom-blur>blur</a>();
+ void <a href="#scrollintoview" title=dom-scrollIntoView>scrollIntoView</a>();
+ void <a href="#scrollintoview" title=dom-scrollIntoView>scrollIntoView</a>(in boolean top);
+
+ // <a href="#command1" title=concept-command>Commands</a>
+ attribute <a href="#htmlmenuelement">HTMLMenuElement</a> <a href="#contextmenu0" title=dom-contextMenu>contextMenu</a>;
+
+ // <a href="#editing0">Editing</a>
+ attribute boolean <a href="#draggable0" title=dom-draggable>draggable</a>;
+ attribute DOMString <a href="#contenteditable1" title=dom-contentEditable>contentEditable</a>;
+
+ // <a href="#event3">event handler DOM attributes</a>
+ attribute <span>EventListener</span> <a href="#onabort" title=handler-onabort>onabort</a>;
+ attribute <span>EventListener</span> <a href="#onbeforeunload" title=handler-onbeforeunload>onbeforeunload</a>;
+ attribute <span>EventListener</span> <a href="#onblur" title=handler-onblur>onblur</a>;
+ attribute <span>EventListener</span> <a href="#onchange" title=handler-onchange>onchange</a>;
+ attribute <span>EventListener</span> <a href="#onclick" title=handler-onclick>onclick</a>;
+ attribute <span>EventListener</span> <a href="#oncontextmenu" title=handler-oncontextmenu>oncontextmenu</a>;
+ attribute <span>EventListener</span> <a href="#ondblclick" title=handler-ondblclick>ondblclick</a>;
+ attribute <span>EventListener</span> <a href="#ondrag" title=handler-ondrag>ondrag</a>;
+ attribute <span>EventListener</span> <a href="#ondragend" title=handler-ondragend>ondragend</a>;
+ attribute <span>EventListener</span> <a href="#ondragenter" title=handler-ondragenter>ondragenter</a>;
+ attribute <span>EventListener</span> <a href="#ondragleave" title=handler-ondragleave>ondragleave</a>;
+ attribute <span>EventListener</span> <a href="#ondragover" title=handler-ondragover>ondragover</a>;
+ attribute <span>EventListener</span> <a href="#ondragstart" title=handler-ondragstart>ondragstart</a>;
+ attribute <span>EventListener</span> <a href="#ondrop" title=handler-ondrop>ondrop</a>;
+ attribute <span>EventListener</span> <a href="#onerror" title=handler-onerror>onerror</a>;
+ attribute <span>EventListener</span> <a href="#onfocus" title=handler-onfocus>onfocus</a>;
+ attribute <span>EventListener</span> <a href="#onkeydown" title=handler-onkeydown>onkeydown</a>;
+ attribute <span>EventListener</span> <a href="#onkeypress" title=handler-onkeypress>onkeypress</a>;
+ attribute <span>EventListener</span> <a href="#onkeyup" title=handler-onkeyup>onkeyup</a>;
+ attribute <span>EventListener</span> <a href="#onload" title=handler-onload>onload</a>;
+ attribute <span>EventListener</span> <a href="#onmessage" title=handler-onmessage>onmessage</a>;
+ attribute <span>EventListener</span> <a href="#onmousedown" title=handler-onmousedown>onmousedown</a>;
+ attribute <span>EventListener</span> <a href="#onmousemove" title=handler-onmousemove>onmousemove</a>;
+ attribute <span>EventListener</span> <a href="#onmouseout" title=handler-onmouseout>onmouseout</a>;
+ attribute <span>EventListener</span> <a href="#onmouseover" title=handler-onmouseover>onmouseover</a>;
+ attribute <span>EventListener</span> <a href="#onmouseup" title=handler-onmouseup>onmouseup</a>;
+ attribute <span>EventListener</span> <a href="#onmousewheel" title=handler-onmousewheel>onmousewheel</a>;
+ attribute <span>EventListener</span> <a href="#onresize" title=handler-onresize>onresize</a>;
+ attribute <span>EventListener</span> <a href="#onscroll" title=handler-onscroll>onscroll</a>;
+ attribute <span>EventListener</span> <a href="#onselect" title=handler-onselect>onselect</a>;
+ attribute <span>EventListener</span> <a href="#onsubmit" title=handler-onsubmit>onsubmit</a>;
+ attribute <span>EventListener</span> <a href="#onunload" title=handler-onunload>onunload</a>;
+
+};</pre>
+
+ <p>As with the <code><a href="#htmldocument">HTMLDocument</a></code>
+ interface, 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.
+
+ <h4 id=reflecting><span class=secno>2.2.1. </span>Reflecting content
+ attributes in DOM attributes</h4>
+
+ <p>Some <span title="DOM attribute">DOM attributes</span> are defined to
+ <dfn id=reflect>reflect</dfn> a particular <span>content attribute</span>.
+ This means that on getting, the DOM attribute returns the current value of
+ the content attribute, and on setting, the DOM attribute changes the value
+ of the content attribute to the given value.
+
+ <p>If a reflecting DOM attribute is a <code>DOMString</code> attribute
+ whose content attribute is defined to contain a URI, then on getting, the
+ DOM attribute must return the value of the content attribute, resolved to
+ an absolute URI, and on setting, must set the content attribute to the
+ specified literal value. If the content attribute is absent, the DOM
+ attribute must return the default value, if the content attribute has one,
+ or else the empty string.
+
+ <p>If a reflecting DOM attribute is a <code>DOMString</code> whose content
+ attribute is an <a href="#enumerated">enumerated attribute</a>, and the
+ DOM attribute is <dfn id=limited>limited to only known values</dfn>, then,
+ on getting, the DOM attribute must return the value associated with the
+ state the attribute is in (in its canonical case), or the empty string if
+ the attribute is in a state that has no associated keyword value; and on
+ setting, if the new value case-insensitively matches one of the keywords
+ given for that attribute, then the content attribute must be set to that
+ value, otherwise, if the new value is the empty string, then the content
+ attribute must be removed, otherwise, the setter must raise a
+ <code>SYNTAX_ERR</code> exception.
+
+ <p>If a reflecting DOM attribute is a <code>DOMString</code> but doesn't
+ fall into any of the above categories, then the getting and setting must
+ be done in a transparent, case-preserving manner.
+
+ <p>If a reflecting DOM attribute is a boolean attribute, then the DOM
+ attribute must return true if the attribute is set, and false if it is
+ absent. On setting, the content attribute must be removed if the DOM
+ attribute is set to false, and must be set to have the same value as its
+ name if the DOM attribute is set to true. (This corresponds to the rules
+ for <a href="#boolean0" title="boolean attribute">boolean content
+ attributes</a>.)
+
+ <p>If a reflecting DOM attribute is a signed integer type
+ (<code>long</code>) then the content attribute must be parsed according to
+ <a href="#rules0" title="rules for parsing integers">the rules for parsing
+ signed integers</a> first. If that fails, or if the attribute is absent,
+ the default value must be returned instead, or 0 if there is no default
+ value. On setting, the given value must be converted to a string
+ representing the number as a <a href="#valid0">valid integer</a> in base
+ ten and then that string must be used as the new content attribute value.
+
+ <p>If a reflecting DOM attribute is an <em>unsigned</em> integer type
+ (<code>unsigned long</code>) then the content attribute must be parsed
+ according to <a href="#rules" title="rules for parsing non-negative
+ integers">the rules for parsing unsigned integers</a> first. If that
+ fails, or if the attribute is absent, the default value must be returned
+ instead, or 0 if there is no default value. On setting, the given value
+ must be converted to a string representing the number as a <a
+ href="#valid">valid non-negative integer</a> in base ten and then that
+ string must be used as the new content attribute value.
+
+ <p>If a reflecting DOM attribute is an unsigned integer type
+ (<code>unsigned long</code>) that is <dfn id=limited0>limited to only
+ positive non-zero numbers</dfn>, then the behavior is similar to the
+ previous case, but zero is not allowed. On getting, the content attribute
+ must first be parsed according to <a href="#rules" title="rules for
+ parsing non-negative integers">the rules for parsing unsigned
+ integers</a>, and if that fails, or if the attribute is absent, the
+ default value must be returned instead, or 1 if there is no default value.
+ On setting, if the value is zero, the user agent must fire an
+ <code>INDEX_SIZE_ERR</code> exception. Otherwise, the given value must be
+ converted to a string representing the number as a <a href="#valid">valid
+ non-negative integer</a> in base ten and then that string must be used as
+ the new content attribute value.
+
+ <p>If a reflecting DOM attribute is a floating point number type
+ (<code>float</code>) and the content attribute is defined to contain a
+ time offset, then the content attribute must be parsed according to <a
+ href="#rules4" title="rules for parsing time offsets">the rules for
+ parsing time ofsets</a> first. If that fails, or if the attribute is
+ absent, the default value must be returned instead, or the not-a-number
+ value (NaN) if there is no default value. On setting, the given value must
+ be converted to a string using the <a href="#time-offset">time offset
+ serialisation rules</a>, and that string must be used as the new content
+ attribute value.
+
+ <p>If a reflecting DOM attribute is of the type <code><a
+ href="#domtokenlist0">DOMTokenList</a></code>, then on getting it must
+ return a <code><a href="#domtokenlist0">DOMTokenList</a></code> object
+ whose underlying string is the element's corresponding content attribute.
+ When the <code><a href="#domtokenlist0">DOMTokenList</a></code> object
+ mutates its underlying string, the attribute must itself be immediately
+ mutated. When the attribute is absent, then the string represented by the
+ <code><a href="#domtokenlist0">DOMTokenList</a></code> object is the empty
+ string; when the object mutates this empty string, the user agent must
+ first add the corresponding content attribute, and then mutate that
+ attribute instead. <code><a href="#domtokenlist0">DOMTokenList</a></code>
+ attributes are always read-only. The same <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> object must be returned
+ every time for each attribute.
+
+ <p>If a reflecting DOM attribute has the type <code><a
+ href="#htmlelement">HTMLElement</a></code>, or an interface that descends
+ from <code><a href="#htmlelement">HTMLElement</a></code>, then, on
+ getting, it must run the following algorithm (stopping at the first point
+ where a value is returned):
+
+ <ol>
+ <li>If the corresponding content attribute is absent, then the DOM
+ attribute must return null.
+
+ <li>Let <var title="">candidate</var> be the element that the <code
+ title="">document.getElementById()</code> method would find if it was
+ passed as its argument the current value of the corresponding content
+ attribute.
+
+ <li>If <var title="">candidate</var> is null, or if it is not
+ type-compatible with the DOM attribute, then the DOM attribute must
+ return null.
+
+ <li>Otherwise, it must return <var title="">candidate</var>.
+ </ol>
+
+ <p>On setting, if the given element has an <code title=attr-id><a
+ href="#id">id</a></code> attribute, then the content attribute must be set
+ to the value of that <code title=attr-id><a href="#id">id</a></code>
+ attribute. Otherwise, the DOM attribute must be set to the empty string.</p>
+ <!-- XXX or raise an exception? -->
+
+ <h3 id=common0><span class=secno>2.3. </span>Common DOM interfaces</h3>
+
+ <h4 id=collections><span class=secno>2.3.1. </span>Collections</h4>
+
+ <p>The <code><a href="#htmlcollection0">HTMLCollection</a></code>, <code><a
+ href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a></code>,
+ and <code><a
+ href="#htmloptionscollection0">HTMLOptionsCollection</a></code> interfaces
+ represent various lists of DOM nodes. Collectively, objects implementing
+ these interfaces are called <dfn id=collections0>collections</dfn>.
+
+ <p>When a <a href="#collections0" title=collections>collection</a> is
+ created, a filter and a root are associated with the collection.
+
+ <p class=example>For example, when the <code><a
+ href="#htmlcollection0">HTMLCollection</a></code> object for the <code
+ title=dom-document-images><a href="#images0">document.images</a></code>
+ attribute is created, it is associated with a filter that selects only
+ <code><a href="#img">img</a></code> elements, and rooted at the root of
+ the document.
+
+ <p>The <span>collection</span> then <dfn id=represents title="representated
+ by the collection">represents</dfn> a <a href="#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. In the absence of specific
+ requirements to the contrary, the nodes within the collection must be
+ sorted in <a href="#tree-order">tree order</a>.
+
+ <p class=note>The <code title=dom-table-rows><a
+ href="#rows">rows</a></code> list is not in tree order.
+
+ <p>An attribute that returns a collection must return the same object every
+ time it is retrieved.
+
+ <h5 id=htmlcollection><span class=secno>2.3.1.1. </span>HTMLCollection</h5>
+
+ <p>The <code><a href="#htmlcollection0">HTMLCollection</a></code> interface
+ represents a generic <span>collection</span> of elements.
+
+ <pre class=idl>interface <dfn id=htmlcollection0>HTMLCollection</dfn> {
+ readonly attribute unsigned long <a href="#length" title=dom-HTMLCollection-length>length</a>;
+ Element <a href="#itemindex" title=dom-HTMLCollection-item>item</a>(in unsigned long index);
+ Element <a href="#nameditem" title=dom-HTMLCollection-namedItem>namedItem</a>(in DOMString name);
+};</pre>
+
+ <p>The <dfn id=length
+ title=dom-HTMLCollection-length><code>length</code></dfn> attribute must
+ return the number of nodes <span>represented by the collection</span>.
+
+ <p>The <dfn id=itemindex title=dom-HTMLCollection-item><code>item(<var
+ title="">index</var>)</code></dfn> method must return the <var
+ title="">index</var>th node in the collection. If there is no <var
+ title="">index</var>th node in the collection, then the method must return
+ null.
+
+ <p>The <dfn id=nameditem
+ title=dom-HTMLCollection-namedItem><code>namedItem(<var
+ title="">key</var>)</code></dfn> method must return the first node in the
+ collection that matches the following requirements:
+
+ <ul>
+ <li>It is an <code><a href="#a">a</a></code>, <code>applet</code>,
+ <code><a href="#area">area</a></code>, <code>form</code>, <code><a
+ href="#img">img</a></code>, or <code><a href="#object">object</a></code>
+ element with a <code title=attr-name>name</code> attribute equal to <var
+ title="">key</var>, or,
+
+ <li>It is an HTML element of any kind with an <code title=attr-id><a
+ href="#id">id</a></code> attribute equal to <var title="">key</var>.
+ (Non-HTML elements, even if they have IDs, are not searched for the
+ purposes of <code title=dom-HTMLCollection-namedItem><a
+ href="#nameditem">namedItem()</a></code>.)
+ </ul>
+
+ <p>If no such elements are found, then the method must return null.
+
+ <p>In ECMAScript implementations, objects that implement the <code><a
+ href="#htmlcollection0">HTMLCollection</a></code> interface must also have
+ a [[Get]] method that, when invoked with a property name that is a number,
+ acts like the <code title=dom-HTMLCollection-item><a
+ href="#itemindex">item()</a></code> method would when invoked with that
+ argument, and when invoked with a property name that is a string, acts
+ like the <code title=dom-HTMLCollection-namedItem><a
+ href="#nameditem">namedItem()</a></code> method would when invoked with
+ that argument.
+
+ <h5 id=htmlformcontrolscollection><span class=secno>2.3.1.2.
+ </span>HTMLFormControlsCollection</h5>
+
+ <p>The <code><a
+ href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a></code>
+ interface represents a <span>collection</span> of form controls.
+
+ <pre
+ class=idl>interface <dfn id=htmlformcontrolscollection0>HTMLFormControlsCollection</dfn> {
+ readonly attribute unsigned long <a href="#length0" title=dom-HTMLFormControlsCollection-length>length</a>;
+ <a href="#htmlelement">HTMLElement</a> <a href="#itemindex0" title=dom-HTMLFormControlsCollection-item>item</a>(in unsigned long index);
+ Object <a href="#nameditem0" title=dom-HTMLFormControlsCollection-namedItem>namedItem</a>(in DOMString name);
+};</pre>
+
+ <p>The <dfn id=length0
+ title=dom-HTMLFormControlsCollection-length><code>length</code></dfn>
+ attribute must return the number of nodes <span>represented by the
+ collection</span>.
+
+ <p>The <dfn id=itemindex0
+ title=dom-HTMLFormControlsCollection-item><code>item(<var
+ title="">index</var>)</code></dfn> method must return the <var
+ title="">index</var>th node in the collection. If there is no <var
+ title="">index</var>th node in the collection, then the method must return
+ null.
+
+ <p>The <dfn id=nameditem0
+ title=dom-HTMLFormControlsCollection-namedItem><code>namedItem(<var
+ title="">key</var>)</code></dfn> method must act according to the
+ following algorithm:
+
+ <ol>
+ <li>If, at the time the method is called, there is exactly one node in the
+ collection that has either an <code title=attr-id><a
+ href="#id">id</a></code> attribute or a <code title=attr-name>name</code>
+ attribute equal to <var title="">key</var>, then return that node and
+ stop the algorithm.
+
+ <li>Otherwise, if there are no nodes in the collection that have either an
+ <code title=attr-id><a href="#id">id</a></code> attribute or a <code
+ title=attr-name>name</code> attribute equal to <var title="">key</var>,
+ then return null and stop the algorithm.
+
+ <li>Otherwise, create a <code>NodeList</code> object representing a live
+ view of the <code><a
+ href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a></code>
+ object, further filtered so that the only nodes in the
+ <code>NodeList</code> object are those that have either an <code
+ title=attr-id><a href="#id">id</a></code> attribute or a <code
+ title=attr-name>name</code> attribute equal to <var title="">key</var>.
+ The nodes in the <code>NodeList</code> object must be sorted in <a
+ href="#tree-order">tree order</a>.
+
+ <li>Return that <code>NodeList</code> object.
+ </ol>
+
+ <p>In the ECMAScript DOM binding, objects implementing the <code><a
+ href="#htmlformcontrolscollection0">HTMLFormControlsCollection</a></code>
+ interface must support being dereferenced using the square bracket
+ notation, such that dereferencing with an integer index is equivalent to
+ invoking the <code title=dom-HTMLFormControlsCollection-item><a
+ href="#itemindex0">item()</a></code> method with that index, and such that
+ dereferencing with a string index is equivalent to invoking the <code
+ title=dom-HTMLFormControlsCollection-namedItem><a
+ href="#nameditem0">namedItem()</a></code> method with that index.</p>
+ <!--
+http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E...%0A%3Cform%20name%3D%22a%22%3E%3Cinput%20id%3D%22x%22%20name%3D%22y%22%3E%3Cinput%20name%3D%22x%22%20id%3D%22y%22%3E%3C/form%3E%0A%3Cscript%3E%0A%20%20var%20x%3B%0A%20%20w%28x%20%3D%20document.forms%5B%27a%27%5D%5B%27x%27%5D%29%3B%0A%20%20w%28x.length%29%3B%0A%20%20x%5B0%5D.parentNode.removeChild%28x%5B0%5D%29%3B%0A%20%20w%28x.length%29%3B%0A%20%20w%28x%20%3D%3D%20document.forms%5B%27a%27%5D%5B%27x%27%5D%29%3B%0A%3C/script%3E%0A
+-->
+
+ <h5 id=htmloptionscollection><span class=secno>2.3.1.3.
+ </span>HTMLOptionsCollection</h5>
+
+ <p>The <code><a
+ href="#htmloptionscollection0">HTMLOptionsCollection</a></code> interface
+ represents a list of <code>option</code> elements.
+
+ <pre
+ class=idl>interface <dfn id=htmloptionscollection0>HTMLOptionsCollection</dfn> {
+ attribute unsigned long <a href="#length1" title=dom-HTMLOptionsCollection-length>length</a>;
+ HTMLOptionElement <a href="#itemindex1" title=dom-HTMLOptionsCollection-item>item</a>(in unsigned long index);
+ Object <a href="#nameditem1" title=dom-HTMLOptionsCollection-namedItem>namedItem</a>(in DOMString name);
+};</pre>
+
+ <p>On getting, the <dfn id=length1
+ title=dom-HTMLOptionsCollection-length><code>length</code></dfn> attribute
+ must return the number of nodes <span>represented by the
+ collection</span>.
+
+ <p>On setting, the behaviour depends on whether the new value is equal to,
+ greater than, or less than the number of nodes <span>represented by the
+ collection</span> at that time. If the number is the same, then setting
+ the attribute must do nothing. If the new value is greater, then <var
+ title="">n</var> new <code>option</code> elements with no attributes and
+ no child nodes must be appended to the <code>select</code> element on
+ which the <code><a
+ href="#htmloptionscollection0">HTMLOptionsCollection</a></code> is rooted,
+ where <var title="">n</var> is the difference between the two numbers (new
+ value minus old value). If the new value is lower, then the last <var
+ title="">n</var> nodes in the collection must be removed from their parent
+ nodes, where <var title="">n</var> is the difference between the two
+ numbers (old value minus new value).
+
+ <p class=note>Setting <code title=dom-HTMLOptionsCollection-length><a
+ href="#length1">length</a></code> never removes or adds any
+ <code>optgroup</code> elements, and never adds new children to existing
+ <code>optgroup</code> elements (though it can remove children from them).
+
+ <p>The <dfn id=itemindex1
+ title=dom-HTMLOptionsCollection-item><code>item(<var
+ title="">index</var>)</code></dfn> method must return the <var
+ title="">index</var>th node in the collection. If there is no <var
+ title="">index</var>th node in the collection, then the method must return
+ null.
+
+ <p>The <dfn id=nameditem1
+ title=dom-HTMLOptionsCollection-namedItem><code>namedItem(<var
+ title="">key</var>)</code></dfn> method must act according to the
+ following algorithm:
+
+ <ol>
+ <li>If, at the time the method is called, there is exactly one node in the
+ collection that has either an <code title=attr-id><a
+ href="#id">id</a></code> attribute or a <code title=attr-name>name</code>
+ attribute equal to <var title="">key</var>, then return that node and
+ stop the algorithm.
+
+ <li>Otherwise, if there are no nodes in the collection that have either an
+ <code title=attr-id><a href="#id">id</a></code> attribute or a <code
+ title=attr-name>name</code> attribute equal to <var title="">key</var>,
+ then return null and stop the algorithm.
+
+ <li>Otherwise, create a <code>NodeList</code> object representing a live
+ view of the <code><a
+ href="#htmloptionscollection0">HTMLOptionsCollection</a></code> object,
+ further filtered so that the only nodes in the <code>NodeList</code>
+ object are those that have either an <code title=attr-id><a
+ href="#id">id</a></code> attribute or a <code
+ title=attr-option-name>name</code> attribute equal to <var
+ title="">key</var>. The nodes in the <code>NodeList</code> object must be
+ sorted in <a href="#tree-order">tree order</a>.
+
+ <li>Return that <code>NodeList</code> object.
+ </ol>
+
+ <p>In the ECMAScript DOM binding, objects implementing the <code><a
+ href="#htmloptionscollection0">HTMLOptionsCollection</a></code> interface
+ must support being dereferenced using the square bracket notation, such
+ that dereferencing with an integer index is equivalent to invoking the
+ <code title=dom-HTMLOptionsCollection-item><a
+ href="#itemindex1">item()</a></code> method with that index, and such that
+ dereferencing with a string index is equivalent to invoking the <code
+ title=dom-HTMLOptionsCollection-namedItem><a
+ href="#nameditem1">namedItem()</a></code> method with that index.</p>
+ <!-- see also http://ln.hixie.ch/?start=1161042744&count=1 -->
+
+ <p class=big-issue>We may want to add <code>add()</code> and
+ <code>remove()</code> methods here too because IE implements
+ HTMLSelectElement and HTMLOptionsCollection on the same object, and so
+ people use them almost interchangeably in the wild.
+
+ <h4 id=domtokenlist><span class=secno>2.3.2. </span>DOMTokenList</h4>
+
+ <p>The <code><a href="#domtokenlist0">DOMTokenList</a></code> interface
+ represents an interface to an underlying string that consists of an <a
+ href="#unordered">unordered set of space-separated tokens</a>.
+
+ <p>Which string underlies a particular <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> object is defined when the
+ object is created. It might be a content attribute (e.g. the string that
+ underlies the <code title=dom-classList><a
+ href="#classlist">classList</a></code> object is the <code
+ title=attr-class><a href="#class">class</a></code> attribute), or it might
+ be an anonymous string (e.g. when a <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> object is passed to an
+ author-implemented callback in the <code><a
+ href="#datagrid0">datagrid</a></code> APIs).
+
+ <pre class=idl>interface <dfn id=domtokenlist0>DOMTokenList</dfn> {
+ readonly attribute unsigned long <a href="#length2" title=dom-tokenlist-length>length</a>;
+ DOMString <a href="#itemindex2" title=dom-tokenlist-item>item</a>(in unsigned long index);
+ boolean <a href="#hastoken" title=dom-tokenlist-has>has</a>(in DOMString token);
+ void <a href="#remove" title=dom-tokenlist-add>add</a>(in DOMString token);
+ void <span title=dom-tokenlist-remove>remove</span>(in DOMString token);
+ boolean <a href="#toggle" title=dom-tokenlist-toggle>toggle</a>(in DOMString token);
+};</pre>
+
+ <p>The <dfn id=length2 title=dom-tokenlist-length><code>length</code></dfn>
+ attribute must return the number of <em>unique</em> tokens that result
+ from <a href="#split" title="split a string on spaces">splitting the
+ underlying string on spaces</a>.
+
+ <p>The <dfn id=itemindex2 title=dom-tokenlist-item><code>item(<var
+ title="">index</var>)</code></dfn> method must <a href="#split"
+ title="split a string on spaces">split the underlying string on
+ spaces</a>, sort the resulting list of tokens by Unicode
+ codepoint<!-- XXX that's
+ basically nonsense. What sort order do we want here? It should be
+ the cheapest one possible that is well-defined for all Unicode. -->,
+ remove exact duplicates, and then return the <var title="">index</var>th
+ item in this list. If <var title="">index</var> is equal to or greater
+ than the number of tokens, then the method must return null.
+
+ <p>In ECMAScript implementations, objects that implement the <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> interface must also have a
+ [[Get]] method that, when invoked with a property name that is a number,
+ acts like the <code title=dom-tokenlist-item><a
+ href="#itemindex2">item()</a></code> method would when invoked with that
+ argument.
+
+ <p>The <dfn id=hastoken title=dom-tokenlist-has><code>has(<var
+ title="">token</var>)</code></dfn> method must run the following
+ algorithm:
+
+ <ol>
+ <li>If the <var title="">token</var> argument contains any
+ spaces<!-- XXX elaborate -->, then raise an
+ <code>INVALID_CHARACTER_ERR</code> exception and stop the algorithm.
+
+ <li>Otherwise, <a href="#split" title="split a string on spaces">split the
+ underlying string on spaces</a> to get the list of tokens in the object's
+ underlying string.
+
+ <li>If the token indicated by <var title="">token</var> is one of the
+ tokens in the object's underlying string then return true and stop this
+ algorithm.
+
+ <li>Otherwise, return false.
+ </ol>
+
+ <p>The <dfn id=addtoken title=dom-tokenlist-add><code>add(<var
+ title="">token</var>)</code></dfn> method must run the following
+ algorithm:
+
+ <ol>
+ <li>If the <var title="">token</var> argument contains any
+ spaces<!-- XXX elaborate -->, then raise an
+ <code>INVALID_CHARACTER_ERR</code> exception and stop the algorithm.
+
+ <li>Otherwise, <a href="#split" title="split a string on spaces">split the
+ underlying string on spaces</a> to get the list of tokens in the object's
+ underlying string.
+
+ <li>If the given <var title="">token</var> is already one of the tokens in
+ the <code><a href="#domtokenlist0">DOMTokenList</a></code> object's
+ underlying string then stop the algorithm.
+
+ <li>Otherwise, if the last character of the <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> object's underlying string
+ is not a <a href="#space">space character</a>, then append a U+0020 SPACE
+ character to the end of that string.
+
+ <li>Append the value of <var title="">token</var> to the end of the
+ <code><a href="#domtokenlist0">DOMTokenList</a></code> object's
+ underlying string.
+ </ol>
+
+ <p>The <dfn id=remove title=dom-tokenlist-add><code>remove(<var
+ title="">token</var>)</code></dfn> method must run the following
+ algorithm:
+
+ <ol>
+ <li>If the <var title="">token</var> argument contains any <a
+ href="#space" title="space character">spaces</a>, then raise an
+ <code>INVALID_CHARACTER_ERR</code> exception and stop the algorithm.
+
+ <li>Otherwise, <a href="#remove0" title="remove a token from a
+ string">remove the given <var title="">token</var> from the underlying
+ string</a>.
+ </ol>
+
+ <p>The <dfn id=toggle title=dom-tokenlist-toggle><code>toggle(<var
+ title="">token</var>)</code></dfn> method must run the following
+ algorithm:
+
+ <ol>
+ <li>If the <var title="">token</var> argument contains any
+ spaces<!-- XXX elaborate -->, then raise an
+ <code>INVALID_CHARACTER_ERR</code> exception and stop the algorithm.
+
+ <li>Otherwise, <a href="#split" title="split a string on spaces">split the
+ underlying string on spaces</a> to get the list of tokens in the object's
+ underlying string.
+
+ <li>If the given <var title="">token</var> is already one of the tokens in
+ the <code><a href="#domtokenlist0">DOMTokenList</a></code> object's
+ underlying string then <a href="#remove0" title="remove a token from a
+ string">remove the given <var title="">token</var> from the underlying
+ string</a>, and stop the algorithm, returning false.
+
+ <li>Otherwise, if the last character of the <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> object's underlying string
+ is not a <a href="#space">space character</a>, then append a U+0020 SPACE
+ character to the end of that string.
+
+ <li>Append the value of <var title="">token</var> to the end of the
+ <code><a href="#domtokenlist0">DOMTokenList</a></code> object's
+ underlying string.
+
+ <li>Return true.
+ </ol>
+
+ <p>In the ECMAScript DOM binding, objects implementing the <code><a
+ href="#domtokenlist0">DOMTokenList</a></code> interface must stringify to
+ the object's underlying string representation.
+
+ <h4 id=dom-feature><span class=secno>2.3.3. </span>DOM feature strings</h4>
+
+ <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="#refsDOM3CORE">[DOM3CORE]</a>
+
+ <p>A DOM application can use the <dfn id=hasfeature
+ title=hasFeature><code>hasFeature(<var title="">feature</var>, <var
+ title="">version</var>)</code></dfn> method of the
+ <code>DOMImplementation</code> interface with parameter values "<code
+ title="">HTML</code>" and "<code>5.0</code>" (respectively) to determine
+ whether or not this module is supported by the implementation. In addition
+ to the feature string "<code title="">HTML</code>", the feature string
+ "<code title="">XHTML</code>" (with version string "<code>5.0</code>") can
+ be used to check if the implementation supports XHTML. User agents should
+ respond with a true value when the <code><a
+ href="#hasfeature">hasFeature</a></code> method is queried with these
+ values. Authors are cautioned, however, that UAs returning true might not
+ be perfectly compliant, and that UAs returning false might well have
+ support for features in this specification; in general, therefore, use of
+ this method is discouraged.
+
+ <p>The values "<code title="">HTML</code>" and "<code
+ title="">XHTML</code>" (both with version "<code>5.0</code>") should also
+ be supported in the context of the <code>getFeature()</code> and
+ <code>isSupported()</code> methods, as defined by DOM3 Core.
+
+ <p class=note>The interfaces defined in this specification are not always
+ supersets of the interfaces defined in DOM2 HTML; some features that were
+ formerly deprecated, poorly supported, rarely used or considered
+ unnecessary have been removed. Therefore it is not guarenteed that an
+ implementation that supports "<code title="">HTML</code>"
+ "<code>5.0</code>" also supports "<code title="">HTML</code>"
+ "<code>2.0</code>".
+
+ <h3 id=dom-tree><span class=secno>2.4. </span><dfn id=dom-tree0>DOM tree
+ accessors</dfn></h3>
+
+ <p><dfn id=the-html0>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="#html">html</a></code> element, or null otherwise.
+
+ <p><dfn id=the-head0>The <code>head</code> element</dfn> of a document is
+ the first <code><a href="#head">head</a></code> element that is a child of
+ <a href="#the-html0">the <code>html</code> element</a>, if there is one,
+ or null otherwise.
+
+ <p><dfn id=the-title1>The <code>title</code> element</dfn> of a document is
+ the first <code><a href="#title1">title</a></code> element that is a child
+ of <a href="#the-head0">the <code>head</code> element</a>, if there is
+ one, or null otherwise.
+
+ <p>The <dfn id=document.title
+ title=dom-document-title><code>title</code></dfn> attribute must, on
+ getting, run the following algorithm:
+
+ <ol>
+ <li>
+ <p>If the <a href="#root-element">root element</a> is an <code>svg</code>
+ element in the "<code title="">http://www.w3.org/2000/svg</code>"
+ namespace, and the user agent supports SVG, then the getter must return
+ the value that would have been returned by the DOM attribute of the same
+ name on the <code>SVGDocument</code> interface.
+
+ <li>
+ <p>Otherwise, it must return a concatenation of the data of all the child
+ <a href="#text-node" title="text node">text nodes</a> of <a
+ href="#the-title1">the <code>title</code> element</a>, in tree order, or
+ the empty string if <a href="#the-title1">the <code>title</code>
+ element</a> is null.
+ </ol>
+
+ <p>On setting, the following algorithm must be run:
+
+ <ol>
+ <li>
+ <p>If the <a href="#root-element">root element</a> is an <code>svg</code>
+ element in the "<code title="">http://www.w3.org/2000/svg</code>"
+ namespace, and the user agent supports SVG, then the setter must defer
+ to the setter for the DOM attribute of the same name on the
+ <code>SVGDocument</code> interface. Stop the algorithm here.
+
+ <li>If <a href="#the-head0">the <code>head</code> element</a> is null,
+ then the attribute must do nothing. Stop the algorithm here.
+
+ <li>If <a href="#the-title1">the <code>title</code> element</a> is null,
+ then a new <code><a href="#title1">title</a></code> element must be
+ created and appended to <a href="#the-head0">the <code>head</code>
+ element</a>.
+
+ <li>The children of <a href="#the-title1">the <code>title</code>
+ element</a> (if any) must all be removed.
+
+ <li>A single <code>Text</code> node whose data is the new value being
+ assigned must be appended to <a href="#the-title1">the <code>title</code>
+ element</a>.
+ </ol>
+
+ <p>The <code title=dom-document-title><a
+ href="#document.title">title</a></code> attribute on the <code><a
+ href="#htmldocument">HTMLDocument</a></code> interface should shadow the
+ attribute of the same name on the <code>SVGDocument</code> interface when
+ the user agent supports both HTML and SVG.
+
+ <p><dfn id=the-body0>The body element</dfn> of a document is the first
+ child of <a href="#the-html0">the <code>html</code> element</a> that is
+ either a <code><a href="#body0">body</a></code> element or a
+ <code>frameset</code> element. If there is no such element, it is null. If
+ the body element is null, then when the specification requires that events
+ be fired at "the body element", they must instead be fired at the
+ <code>Document</code> object.
+
+ <p>The <dfn id=body title=dom-document-body><code>body</code></dfn>
+ attribute, on getting, must return <a href="#the-body0">the body
+ element</a> of the document (either a <code><a
+ href="#body0">body</a></code> element, a <code>frameset</code> element, or
+ null). On setting, the following algorithm must be followed:
+
+ <ol>
+ <li>If the new value is not a <code><a href="#body0">body</a></code> or
+ <code>frameset</code> element, then raise a
+ <code>HIERARCHY_REQUEST_ERR</code> exception and abort these steps.
+
+ <li>Otherwise, if the new value is the same as <a href="#the-body0">the
+ body element</a>, do nothing. Abort these steps.
+
+ <li>Otherwise, if <a href="#the-body0">the body element</a> is not null,
+ then replace that element with the new value in the DOM, as if the root
+ element's <code title="">replaceChild()</code> method had been called
+ with the new value and <a href="#the-body0" title="the body element">the
+ incumbent body element</a> as its two arguments respectively, then abort
+ these steps.
+
+ <li>Otherwise, the <a href="#the-body0">the body element</a> is null.
+ Append the new value to the root element.
+ </ol>
+ <!--XXX
+ http://lxr.mozilla.org/seamonkey/source/content/html/document/src/nsHTMLDocument.cpp
+ search for ::GetBody ::SetBody
+ http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLDocument.cpp
+ search for ::setBody
+ http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/dom/Document.cpp
+ search for ::body
+ -->
+
+ <p>The <dfn id=images0 title=dom-document-images><code>images</code></dfn>
+ attribute must return an <code><a
+ href="#htmlcollection0">HTMLCollection</a></code> rooted at the
+ <code>Document</code> node, whose filter matches only <code><a
+ href="#img">img</a></code> elements.
+
+ <p>The <dfn id=links0 title=dom-document-links><code>links</code></dfn>
+ attribute must return an <code><a
+ href="#htmlcollection0">HTMLCollection</a></code> rooted at the
+ <code>Document</code> node, whose filter matches only <code><a
+ href="#a">a</a></code> elements with <code title=attr-hyperlink-href><a
+ href="#href6">href</a></code> attributes and <code><a
+ href="#area">area</a></code> elements with <code
+ title=attr-hyperlink-href><a href="#href6">href</a></code> attributes.
+
+ <p>The <dfn id=forms0 title=dom-document-forms><code>forms</code></dfn>
+ attribute must return an <code><a
+ href="#htmlcollection0">HTMLCollection</a></code> rooted at the
+ <code>Document</code> node, whose filter matches only <code>form</code>
+ elements.
+
+ <p>The <dfn id=anchors
+ title=dom-document-anchors><code>anchors</code></dfn> attribute must
+ return an <code><a href="#htmlcollection0">HTMLCollection</a></code>
+ rooted at the <code>Document</code> node, whose filter matches only
+ <code><a href="#a">a</a></code> elements with <code
+ title=attr-a-name>name</code> attributes.</p>
+ <!-- XXX note that such elements are
+ non-conforming -->
+
+ <p>The <dfn id=getelementsbyname
+ title=dom-document-getElementsByName><code>getElementsByName(<var
+ title="">name</var>)</code></dfn> method a string <var
+ title="">name</var>, and must return a live <code>NodeList</code>
+ containing all the <code><a href="#a">a</a></code>, <code>applet</code>,
+ <code>button</code>, <code>form</code>, <!-- frame? frameset?
+ XXX--><code><a
+ href="#iframe">iframe</a></code>, <code><a href="#img">img</a></code>,
+ <code>input</code>, <code><a href="#map">map</a></code>, <code><a
+ href="#meta0">meta</a></code>, <code><a
+ href="#object">object</a></code>,<!-- param?
+ XXX--> <code>select</code>,
+ and <code>textarea</code> elements in that document that have a <code
+ title="">name</code> attribute whose value is
+ equal<!-- XXX case sensitivity --> to the <var title="">name</var>
+ argument.</p>
+ <!-- XXX what about XHTML? -->
+
+ <p>The <dfn id=getelementsbyclassname
+ title=dom-document-getElementsByClassName><code>getElementsByClassName(<var
+ title="">classNames</var>)</code></dfn> method takes an array of strings
+ representing classes. When called, the method must return a live
+ <code>NodeList</code> object containing all the elements in the document
+ that have all the classes specified in that array. If the array is empty,
+ then the method must return an empty <code>NodeList</code>.
+
+ <p>HTML, XHTML, SVG and MathML elements define which classes they are in by
+ having an attribute in the per-element partition 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 labelled as being in specific classes. UAs must not
+ assume that all attributes of the name <code>class</code> for elements in
+ any namespace work in this way, however, and must not assume that such
+ attributes, when used as global attributes, label other elements as being
+ in specific classes.
+
+ <div class=example>
+ <p>Given the following XHTML fragment:</p>
+
+ <pre>&lt;div id="example"&gt;
+ &lt;p id="p1" class="aaa bbb"/&gt;
+ &lt;p id="p2" class="aaa ccc"/&gt;
+ &lt;p id="p3" class="bbb ccc"/&gt;
+&lt;/div&gt;</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('ccc
+ bbb')</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>
+
+ <p>A call to <code>getElementsByClassName([''])</code> would also return
+ no nodes, since none of the nodes are in the "" class (indeed, in HTML,
+ it is impossible to specify that an element is in the "" class).</p>
+ </div>
+
+ <p>The <dfn id=getelementsbyclassname0
+ title=dom-getElementsByClassName><code>getElementsByClassName()</code></dfn>
+ method on the <code><a href="#htmlelement">HTMLElement</a></code>
+ interface must return the nodes that the <code><a
+ href="#htmldocument">HTMLDocument</a></code> <code
+ title=dom-document-getElementsByClassName><a
+ href="#getelementsbyclassname">getElementsByClassName()</a></code> method
+ would return, excluding any elements that are not descendants of the
+ <code><a href="#htmlelement">HTMLElement</a></code> object on which the
+ method was invoked.</p>
+ <!-- XXX
+> * xGetParentElementByClassName(rootElement, className, tagName) -
+> Navigates upwards until we hit a parent element with the given class name and
+> optional tag name.
+-->
+
+ <p class=note>The <code title=dom-document-dir><a
+ href="#dir1">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="#dir">dir</a></code> content
+ attribute.
+
+ <h3 id=dynamic><span class=secno>2.5. </span><dfn id=dynamic2>Dynamic
+ markup insertion</dfn></h3>
+
+ <p>The <code title=dom-document-write><a
+ href="#document.write">document.write()</a></code> family of methods and
+ the <code title=dom-innerHTML><a href="#innerhtml">innerHTML</a></code>
+ family of DOM attributes enable script authors to dynamically insert
+ markup into the document.
+
+ <p class=issue>bz argues that innerHTML should be called something else on
+ XML documents and XML elements. Is the sanity worth the migration pain?
+
+ <p>Because these APIs interact with the parser, their behaviour varies
+ depending on whether they are used with <a href="#html-">HTML
+ documents</a> (and the <a href="#html-0">HTML parser</a>) or XHTML in <a
+ href="#xml-documents">XML documents</a> (and the <span>XML parser</span>).
+ The following table cross-references the various versions of these APIs.
+
+ <table>
+ <thead>
+ <tr>
+ <td>
+
+ <th><dfn id=document.write
+ title=dom-document-write><code>document.write()</code></dfn>
+
+ <th><dfn id=innerhtml title=dom-innerHTML><code>innerHTML</code></dfn>
+
+ <tbody>
+ <tr>
+ <th>For documents that are <a href="#html-">HTML documents</a>
+
+ <td><a href="#document.write0"
+ title=dom-document-write-HTML><code>document.write()</code> in HTML</a>
+
+ <td><a href="#innerhtml0"
+ title=dom-innerHTML-HTML><code>innerHTML</code> in HTML</a>
+
+ <tr>
+ <th>For documents that are <a href="#xml-documents">XML documents</a>
+
+ <td><a href="#document.write1"
+ title=dom-document-write-XML><code>document.write()</code> in XML</a>
+
+ <td><a href="#innerhtml2" title=dom-innerHTML-XML><code>innerHTML</code>
+ in XML</a>
+ </table>
+
+ <p>Regardless of the parsing mode, the <dfn id=document.writeln
+ title=dom-document-writeln><code>document.writeln(<var
+ title="">s</var>)</code></dfn> method must call the <code
+ title=dom-document-write><a
+ href="#document.write">document.write()</a></code> method with the same
+ argument <var title="">s</var>, and then call the <code
+ title=dom-document-write><a
+ href="#document.write">document.write()</a></code> method with, as its
+ argument, a string consisting of a single line feed character (U+000A).
+
+ <h4 id=controlling><span class=secno>2.5.1. </span>Controlling the input
+ stream</h4>
+
+ <p>The <dfn id=open title=dom-document-open><code>open()</code></dfn>
+ method comes in several variants with different numbers of arguments.
+
+ <p>When called with two or fewer arguments, the method must act as follows:
+
+ <ol>
+ <li>
+ <p>Let <var title="">type</var> be the value of the first argument, if
+ there is one, or "<code>text/html</code>" otherwise.
+
+ <li>
+ <p>Let <var title="">replace</var> be true if there is a second argument
+ and it has the value "replace"<!-- case-insensitive. XXX
+ -->, and
+ false otherwise.
+
+ <li>
+ <p>If the document has an <span>active parser</span><!-- XXX xref
+ -->
+ that isn't a <a href="#script-created">script-created parser</a>, and
+ the <a href="#insertion">insertion point</a> associated with that
+ parser's <a href="#input0">input stream</a> is not undefined (that is,
+ it <em>does</em> point to somewhere in the input stream), then the
+ method does nothing. Abort these steps.</p>
+
+ <p class=note>This basically causes <code title=dom-document-open><a
+ href="#open">document.open()</a></code> to be ignored when it's called
+ in an inline script found during the parsing of data sent over the
+ network, while still letting it have an effect when called
+ asynchronously or on a document that is itself being spoon-fed using
+ these APIs.</p>
+
+ <li>
+ <p class=big-issue>onbeforeunload, onunload
+
+ <li>
+ <p>If the document has an <span>active parser</span><!--XXX
+ xref-->,
+ then stop that parser, and throw away any pending content in the input
+ stream. <span class=big-issue>what about if it doesn't, because it's
+ either like a text/plain, or Atom, or PDF, or XHTML, or image document,
+ or something?</span>
+ </li>
+ <!-- XXX see
+ also innerHTML in HTML -->
+
+ <li>
+ <p>Remove all child nodes of the document.
+
+ <li>
+ <p>Create a new <a href="#html-0">HTML parser</a> and associate it with
+ the document. This is a <dfn id=script-created>script-created
+ parser</dfn> (meaning that it can be closed by the <code
+ title=dom-document-open><a href="#open">document.open()</a></code> and
+ <code title=dom-document-close><a
+ href="#close">document.close()</a></code> methods, and that the
+ tokeniser will wait for an explicit call to <code
+ title=dom-document-close><a href="#close">document.close()</a></code>
+ before emitting an end-of-file token).
+
+ <li>Mark the document as being an <a href="#html-" title="HTML
+ documents">HTML document</a> (it might already be so-marked).</li>
+ <!-- text/plain handling -->
+
+ <li>
+ <p>If <var title="">type</var> does not have the value
+ "<code>text/html</code>"<!-- XXX matched how?
+ -->, then act as if the
+ tokeniser had emitted a <code><a href="#pre">pre</a></code> element
+ start tag, then set the <a href="#html-0">HTML parser</a>'s <a
+ href="#tokenisation0">tokenisation</a> stage's <a
+ href="#content2">content model flag</a> to <em>PLAINTEXT</em>.
+
+ <li>
+ <p>If <var title="">replace</var> is false, then:
+
+ <ol>
+ <li>Remove all the entries in the <a href="#browsing0">browsing
+ context</a>'s <a href="#session">session history</a> after the <a
+ href="#current0">current entry</a> in its <code>Document</code>'s
+ <code><a href="#history1">History</a></code> object
+
+ <li>Remove any earlier entries that share the same <code>Document</code>
+
+ <li>Add a new entry just before the last entry that is associated with
+ the text that was parsed by the previous parser associated with the
+ <code>Document</code> object, as well as the state of the document at
+ the start of these steps. (This allows the user to step backwards in
+ the session history to see the page before it was blown away by the
+ <code title=dom-document-open><a
+ href="#open">document.open()</a></code> call.)
+ </ol>
+
+ <li>
+ <p>Finally, set the <a href="#insertion">insertion point</a> to point at
+ just before the end of the <a href="#input0">input stream</a> (which at
+ this point will be empty).
+ </ol>
+
+ <p class=big-issue>We shouldn't hard-code <code>text/plain</code> there. We
+ should do it some other way, e.g. hand off to the section on
+ content-sniffing and handling of incoming data streams, the part that
+ defines how this all works when stuff comes over the network.</p>
+ <!-- XXX Should we support XML/XHTML as a type to that method? -->
+
+ <p>When called with three or more arguments, the <code
+ title=dom-document-open><a href="#open">open()</a></code> method on the
+ <code><a href="#htmldocument">HTMLDocument</a></code> object must call the
+ <code title=dom-open><a href="#open2">open()</a></code> method on the
+ <code><a href="#window">Window</a></code> interface of the object returned
+ by the <code title=dom-document-defaultView>defaultView</code> attribute
+ of the <code>DocumentView</code> interface of the <code><a
+ href="#htmldocument">HTMLDocument</a></code> object, with the same
+ arguments as the original call to the <code title=dom-document-open><a
+ href="#open">open()</a></code> method. If the <code
+ title=dom-document-defaultView>defaultView</code> attribute of the
+ <code>DocumentView</code> interface of the <code><a
+ href="#htmldocument">HTMLDocument</a></code> object is null, then the
+ method must raise an <code>INVALID_ACCESS_ERR</code> exception.
+
+ <p>The <dfn id=close title=dom-document-close><code>close()</code></dfn>
+ method must do nothing if there is no <a
+ href="#script-created">script-created parser</a> associated with the
+ document. If there is such a parser, then, when the method is called, the
+ user agent must insert an <a href="#explicit">explicit "EOF" character</a>
+ at the <a href="#insertion">insertion point</a> of the parser's <a
+ href="#input0">input stream</a>.
+
+ <h4 id=dynamic0><span class=secno>2.5.2. </span>Dynamic markup insertion in
+ HTML</h4>
+
+ <p>In HTML, the <dfn id=document.write0
+ title=dom-document-write-HTML><code>document.write(<var
+ title="">s</var>)</code></dfn> method must act as follows:
+
+ <ol>
+ <li>
+ <p>If the <a href="#insertion">insertion point</a> is undefined, the
+ <code title=dom-document-open><a href="#open">open()</a></code> method
+ must be called (with no arguments) on the <code
+ title=Document>document</code> object. The <a
+ href="#insertion">insertion point</a> will point at just before the end
+ of the (empty) <a href="#input0">input stream</a>.</p>
+
+ <li>
+ <p>The string <var title="">s</var> must be inserted into the <a
+ href="#input0">input stream</a><!-- XXX xref --> just before the <a
+ href="#insertion">insertion point</a>.</p>
+
+ <li>
+ <p>If there is <a href="#the-script" title="the script that will execute
+ as soon as the parser resumes">a script that will execute as soon as the
+ parser resumes</a>, then the method must now return without further
+ processing of the <a href="#input0">input stream</a>.</p>
+
+ <li>
+ <p>Otherwise, the tokeniser must process the characters that were
+ inserted, one at a time, processing resulting tokens as they are
+ emitted, and stopping when the tokeniser reaches the insertion point or
+ when the processing of the tokeniser is aborted by the tree construction
+ stage (this can happen if a <code><a href="#script0">script</a></code>
+ start tag token is emitted by the tokeniser).
+
+ <p class=note>If the <code title=dom-document-write-HTML><a
+ href="#document.write0">document.write()</a></code> method was called
+ from script executing inline (i.e. executing because the parser parsed a
+ set of <code><a href="#script0">script</a></code> tags), then this is a
+ <a href="#nestedParsing">reentrant invocation of the parser</a>.</p>
+
+ <li>
+ <p>Finally, the method must return.</p>
+ </ol>
+
+ <p>In HTML, the <dfn id=innerhtml0
+ title=dom-innerHTML-HTML><code>innerHTML</code></dfn> DOM attribute of all
+ <code><a href="#htmlelement">HTMLElement</a></code> and <code><a
+ href="#htmldocument">HTMLDocument</a></code> nodes returns a serialisation
+ of the node's children using the <span>HTML syntax</span><!-- XXX xref
+ -->.
+ On setting, it replaces the node's children with new nodes that result
+ from parsing the given value. The formal definitions follow.
+
+ <p>On getting, the <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> DOM attribute must return the
+ result of running the following algorithm:
+
+ <ol>
+ <li>
+ <p>Let <var title="">s</var> be a string, and initialise it to the empty
+ string.
+
+ <li>
+ <p>For each child node <var title="">child</var>, in <a
+ href="#tree-order">tree order</a>, append the appropriate string from
+ the following list to <var title="">s</var>:</p>
+
+ <dl class=switch>
+ <dt>If the child node is an <code title="">Element</code>
+
+ <dd>
+ <p>Append a U+003C LESS-THAN SIGN (<code title="">&lt;</code>)
+ character, followed by the element's tag name. (For nodes created by
+ the <a href="#html-0">HTML parser</a>, <code
+ title="">Document.createElement()</code>, or <code
+ title="">Document.renameNode()</code>, the tag name will be
+ lowercase.)</p>
+
+ <p>For each attribute that the element has, append a U+0020 SPACE
+ character, the attribute's name (which, for attributes set by the <a
+ href="#html-0">HTML parser</a> or by <code
+ title="">Element.setAttributeNode()</code> or <code
+ title="">Element.setAttribute()</code>, will be lowercase), a U+003D
+ EQUALS SIGN (<code title="">=</code>) character, a U+0022 QUOTATION
+ MARK (<code title="">&quot;</code>) character, the attribute's value,
+ <a href="#escapingString" title="escaping a string">escaped as
+ described below</a>, and a second U+0022 QUOTATION MARK (<code
+ title="">&quot;</code>) character.</p>
+
+ <p>While the exact order of attributes is UA-defined, and may depend on
+ factors such as the order that the attributes were given in the
+ original markup, the sort order must be stable, such that consecutive
+ calls to <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> serialise an element's
+ attributes in the same order.</p>
+
+ <p>Append a U+003E GREATER-THAN SIGN (<code title="">&gt;</code>)
+ character.</p>
+
+ <p>If the child node is an <code><a href="#area">area</a></code>,
+ <code><a href="#base">base</a></code>, <code>basefont</code>,
+ <code>bgsound</code>, <code><a href="#br">br</a></code>, <code><a
+ href="#col">col</a></code>, <code><a href="#embed">embed</a></code>,
+ <code>frame</code>, <code><a href="#hr">hr</a></code>, <code><a
+ href="#img">img</a></code>, <code>input</code>, <code><a
+ href="#link">link</a></code>, <code><a href="#meta0">meta</a></code>,
+ <code><a href="#param">param</a></code>, <code>spacer</code>, or
+ <code>wbr</code> element, then continue on to the next child node at
+ this point.</p>
+ <!-- also, i guess:
+ image, isindex, and keygen, but we don't list those because we
+ don't consider those "elements", more "macros", and thus we
+ should never serialise them -->
+ <!-- XXX when we get around to
+ it, add event-source -->
+ <p>Otherwise, append the value of the <var title="">child</var>
+ element's <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> DOM attribute (thus recursing
+ into this algorithm for that element), followed by a U+003C LESS-THAN
+ SIGN (<code title="">&lt;</code>) character, a U+002F SOLIDUS (<code
+ title="">/</code>) character, the element's tag name again, and
+ finally a U+003E GREATER-THAN SIGN (<code title="">&gt;</code>)
+ character.</p>
+
+ <dt>If the child node is a <code title="">Text</code> or <code
+ title="">CDATASection</code> node
+
+ <dd>
+ <p>If one of the ancestors of the child node is a <code><a
+ href="#style">style</a></code>, <code><a
+ href="#script0">script</a></code>, <code>xmp</code>, <code><a
+ href="#iframe">iframe</a></code>, <code>noembed</code>,
+ <code>noframes</code>, or <code><a
+ href="#noscript">noscript</a></code> element, then append the value of
+ the <var title="">child</var> node's <code title="">data</code> DOM
+ attribute literally.</p>
+ <!-- note about noscript: because this is defining an API, it
+ can assume that scripting is enabled, and that thus the
+ <noscript> element in the DOM will have been parsed in the
+ scripting-enabled mode, and that thus the text node is raw
+ markup -->
+
+ <p>Otherwise, append the value of the <var title="">child</var> node's
+ <code title="">data</code> DOM attribute, <a href="#escapingString"
+ title="escaping a string">escaped as described below</a>.</p>
+
+ <dt>If the child node is a <code title="">Comment</code>
+
+ <dd>
+ <p>Append the literal string <code>&lt;!--</code> (U+003C LESS-THAN
+ SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS, U+002D
+ HYPHEN-MINUS), followed by the value of the <var title="">child</var>
+ node's <code title="">data</code> DOM attribute, followed by the
+ literal string <code>--&gt;</code> (U+002D HYPHEN-MINUS, U+002D
+ HYPHEN-MINUS, U+003E GREATER-THAN SIGN).</p>
+
+ <dt>If the child node is a <code title="">DocumentType</code>
+
+ <dd>
+ <p>Append the literal string <code>&lt;!DOCTYPE</code> (U+003C
+ LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+0044 LATIN CAPITAL LETTER
+ D, U+004F LATIN CAPITAL LETTER O, U+0043 LATIN CAPITAL LETTER C,
+ U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL LETTER Y, U+0050
+ LATIN CAPITAL LETTER P, U+0045 LATIN CAPITAL LETTER E), followed by a
+ space (U+0020 SPACE), followed by the value of the <var
+ title="">child</var> node's <code title="">name</code> DOM attribute,
+ followed by the literal string <code>&gt;</code> (U+003E GREATER-THAN
+ SIGN).</p>
+ </dl>
+
+ <p>Other nodes types (e.g. <code title="">Attr</code>) cannot occur as
+ children of elements. If they do, the <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute must raise an
+ <code>INVALID_STATE_ERR</code> exception.</p>
+
+ <li>
+ <p>The result of the algorithm is the string <var title="">s</var>.
+ </ol>
+
+ <p><dfn id=escapingString>Escaping a string</dfn> (for the purposes of the
+ algorithm above) consists of replacing any occurances of the "<code
+ title="">&amp;</code>" character by the string "<code
+ title="">&amp;amp;</code>", any occurances of the "<code
+ title="">&lt;</code>" character by the string "<code
+ title="">&amp;lt;</code>", any occurances of the "<code
+ title="">&gt;</code>" character by the string "<code
+ title="">&amp;gt;</code>", and any occurances of the "<code
+ title="">&quot;</code>" character by the string "<code
+ title="">&amp;quot;</code>".
+
+ <p class=note>Entity reference nodes are <a
+ href="#entity-references">assumed to be expanded</a> by the user agent,
+ and are therefore not covered in the algorithm above.
+
+ <p class=note>If the element's contents are not conformant, it is possible
+ that the roundtripping through <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> will not work. For instance, if
+ the element is a <code>textarea</code> element to which a <code
+ title="">Comment</code> node has been appended, then assigning <code
+ title=dom-innerHTML-HTML><a href="#innerhtml0">innerHTML</a></code> to
+ itself will result in the comment being displayed in the text field.
+ Similarly, if, as a result of DOM manipulation, the element contains a
+ comment that contains the literal string "<code title="">--&gt;</code>",
+ then when the result of serialising the element is parsed, the comment
+ will be truncated at that point and the rest of the comment will be
+ interpreted as markup. Another example would be making a <code><a
+ href="#script0">script</a></code> element contain a text node with the
+ text string "<code>&lt;/script></code>".
+
+ <p>On setting, if the node is a document, the <code
+ title=dom-innerHTML-HTML><a href="#innerhtml0">innerHTML</a></code> DOM
+ attribute must run the following algorithm:
+
+ <ol>
+ <li>
+ <p>Otherwise, if the document has an <span>active
+ parser</span><!--XXX xref-->, then stop that parser, and throw away any
+ pending content in the input stream. <span class=big-issue>what about if
+ it doesn't, because it's either like a text/plain, or Atom, or PDF, or
+ XHTML, or image document, or something?</span></p>
+ <!-- XXX see also document.open() -->
+
+ <li>
+ <p>The user agent must remove the children nodes of the
+ <code>Document</code> whose <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute is being set.</p>
+
+ <li>
+ <p>The user agent must create a new <a href="#html-0">HTML parser</a>, in
+ its initial state, and associate it with the <code>Document</code> node.</p>
+ </li>
+ <!-- redundant, the document is forcably already so labelled if we get here
+ <li>
+
+ <p>The user agent must mark the <code>Document</code> object as
+ being an <span title="HTML documents">HTML document</span>.</p>
+
+ </li>
+-->
+
+ <li>
+ <p>The user agent must place into the <a href="#input0">input stream</a>
+ for the <a href="#html-0">HTML parser</a> just created the string being
+ assigned into the <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute.</p>
+
+ <li>
+ <p>The user agent must start the parser and let it run until it has
+ consumed all the characters just inserted into the input stream. (The
+ <code>Document</code> node will have been populated with elements and a
+ <code title=event-load><a href="#load0">load</a></code> event will have
+ fired on <a href="#the-body0" title="the body element">its body
+ element</a>.)</p>
+ </ol>
+
+ <p>Otherwise, if the node is an element, then setting the <code
+ title=dom-innerHTML-HTML><a href="#innerhtml0">innerHTML</a></code> DOM
+ attribute must cause the following algorithm to run instead:
+
+ <ol>
+ <li>
+ <p>The user agent must create a new <code>Document</code> node, and mark
+ it as being an <a href="#html-" title="HTML documents">HTML
+ document</a>.</p>
+
+ <p>The user agent must create a new <a href="#html-0">HTML parser</a>,
+ and associate it with the just created <code>Document</code> node.</p>
+
+ <p class=note>Parts marked <dfn id=innerhtml1 title="innerHTML
+ case"><code>innerHTML</code> case</dfn> in algorithms in the parser
+ section are parts that only occur if the parser was created for the
+ purposes of handling the setting of an element's <code
+ title=dom-innerHTML-HTML><a href="#innerhtml0">innerHTML</a></code>
+ attribute. The algorithms have been annotated with such markings for
+ informational purposes only; such markings have no normative weight. If
+ it is possible for a condition described as an <a
+ href="#innerhtml1"><code>innerHTML</code> case</a> to occur even when
+ the parser wasn't created for the purposes of handling an element's
+ <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute, then that is an error
+ in the specification.</p>
+
+ <li>
+ <p>The user agent must set the <a href="#html-0">HTML parser</a>'s <a
+ href="#tokenisation0">tokenisation</a> stage's <a
+ href="#content2">content model flag</a> according to the name of the
+ element whose <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute is being set, as
+ follows:</p>
+
+ <dl class=switch>
+ <dt>If it is a <code><a href="#title1">title</a></code> or
+ <code>textarea</code> element
+
+ <dd>Set the <a href="#content2">content model flag</a> to
+ <em>RCDATA</em>.
+
+ <dt>If it is a <code><a href="#style">style</a></code>, <code><a
+ href="#script0">script</a></code>, <code>xmp</code>, <code><a
+ href="#iframe">iframe</a></code>, <code>noembed</code>,
+ <code>noframes</code>, or <code><a href="#noscript">noscript</a></code>
+ element
+
+ <dd>Set the <a href="#content2">content model flag</a> to
+ <em>CDATA</em>.</dd>
+ <!-- note about noscript: we set it to CDATA here because if
+ someone is setting innerHTML, then we know scripting is enabled,
+ so the noscript element will be in CDATA mode -->
+
+ <dt>If it is a <code>plaintext</code> element
+
+ <dd>Set the <a href="#content2">content model flag</a> to
+ <em>PLAINTEXT</em>.
+
+ <dt>Otherwise
+
+ <dd>Set the <a href="#content2">content model flag</a> to
+ <em>PCDATA</em>.
+ </dl>
+
+ <li>
+ <p>The user agent must switch the <a href="#html-0">HTML parser</a>'s <a
+ href="#tree-construction0">tree construction</a> stage to <a
+ href="#the-main0">the main phase</a>.
+
+ <li>
+ <p>Let <var title="">root</var> be a new <code><a
+ href="#html">html</a></code> element with no attributes.</p>
+
+ <li>
+ <p>The user agent must append the element <var title="">root</var> to the
+ <code>Document</code> node created above.</p>
+
+ <li>
+ <p>The user agent must set up the parser's <a href="#stack">stack of open
+ elements</a> so that it contains just the single element <var
+ title="">root</var>.</p>
+
+ <li>
+ <p>The user agent must <a href="#reset" title="reset the insertion mode
+ appropriately">reset the parser's insertion mode appropriately</a>.</p>
+
+ <li>
+ <p>The user agent must set the parser's <a
+ href="#form-element"><code>form</code> element pointer</a> to the
+ nearest node to the element whose <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute is being set that is a
+ <code>form</code> element (going straight up the ancestor chain, and
+ including the element itself, if it is a <code>form</code> element), or,
+ if there is no such <code>form</code> element, to null.</p>
+
+ <li>
+ <p>The user agent must place into the <a href="#input0">input stream</a>
+ for the <a href="#html-0">HTML parser</a> just created the string being
+ assigned into the <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute.</p>
+
+ <li>
+ <p>The user agent must start the parser and let it run until it has
+ consumed all the characters just inserted into the input stream.</p>
+
+ <li>
+ <p>The user agent must remove the children of the element whose <code
+ title=dom-innerHTML-HTML><a href="#innerhtml0">innerHTML</a></code>
+ attribute is being set.</p>
+
+ <li>
+ <p>The user agent must move all the child nodes of the <var
+ title="">root</var> element to the element whose <code
+ title=dom-innerHTML-HTML><a href="#innerhtml0">innerHTML</a></code>
+ attribute is being set, preserving their order.</p>
+ </ol>
+ <!-- XXX must make sure we spec that innerHTML causes mutation
+ events to fire, but document.write() doesn't. (the latter is already
+ req-stated in the parser section, btw) -->
+ <!-- http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp -->
+ <!-- http://lxr.mozilla.org/seamonkey/source/content/html/content/src/nsGenericHTMLElement.cpp#879
+ note script execution disabled
+ http://lxr.mozilla.org/seamonkey/source/content/base/src/nsContentUtils.cpp#3308
+ http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLElement.cpp#L295
+ http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLElement.cpp#L242
+ http://trac.webkit.org/projects/webkit/browser/trunk/WebCore/html/HTMLTokenizer.cpp#L1742
+ -->
+
+ <h4 id=dynamic1><span class=secno>2.5.3. </span>Dynamic markup insertion in
+ XML</h4>
+
+ <p>In an XML context, the <dfn id=document.write1
+ title=dom-document-write-XML><code>document.write(<var
+ title="">s</var>)</code></dfn> method must raise an
+ <code>INVALID_ACCESS_ERR</code> exception.</p>
+ <!--
+ For XHTML: content must be well-formed. Where does
+ it insert? Immediately after the script that called document.write()?</p>
+ how do we handle async scripts vs sync scripts?
+
+Consider:
+data:text/xml,<script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ document.write('<foo>Test</foo>'); ]]></script>
+data:text/xml,<script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ alert('test'); alert(document.write); try { document.write('<foo>Test</foo>'); alert(document.childNodes.length); } catch (e) { alert(e); } ]]></script>
+
+-->
+
+ <p>The <dfn id=innerhtml2
+ title=dom-innerHTML-XML><code>innerHTML</code></dfn> attributes, on the
+ other hand, in an XML context, are usable.
+
+ <p>On getting, the <code title=dom-innerHTML-XML><a
+ href="#innerhtml2">innerHTML</a></code> DOM attribute on <code><a
+ href="#htmlelement">HTMLElement</a></code>s and <code><a
+ href="#htmldocument">HTMLDocument</a></code>s, in an XML context, must
+ return an XML namespace-well-formed internal general parsed entity
+ representation of the element or document. User agents may adjust prefixes
+ and namespace declarations in the serialisation (and indeed might be
+ forced to do so in some cases to obtain namespace-well-formed XML). <a
+ href="#refsXML">[XML]</a> <a href="#refsXMLNS">[XMLNS]</a>
+
+ <p>On setting, in an XML context, the <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> DOM attribute on must run the
+ following algorithm:
+
+ <ol>
+ <li>
+ <p>The user agent must create a new <span>XML parser</span>.</p>
+
+ <li>
+ <p>If the <code title=dom-innerHTML-XML><a
+ href="#innerhtml2">innerHTML</a></code> attribute is being set on an
+ element, the user agent must <span>feed the parser</span> just created
+ the string corresponding to the start tag of that element, declaring all
+ the namespace prefixes that are in scope on that element in the DOM, as
+ well as declaring the default namespace (if any) that is in scope on
+ that element in the DOM.</p>
+
+ <li>
+ <p>The user agent must <span>feed the parser</span> just created the
+ string being assigned into the <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute.</p>
+
+ <li>
+ <p>If the <code title=dom-innerHTML-XML><a
+ href="#innerhtml2">innerHTML</a></code> attribute is being set on an
+ element, the user agent must <span>feed the parser</span> the string
+ corresponding to the end tag of that element.</p>
+
+ <li>
+ <p>If the parser found a well-formedness error, the attribute's setter
+ must raise a <code>SYNTAX_ERR</code> exception and abort these steps.</p>
+
+ <li>
+ <p>The user agent must remove the children nodes of the node whose <code
+ title=dom-innerHTML-XML><a href="#innerhtml2">innerHTML</a></code>
+ attribute is being set.</p>
+
+ <li>
+ <p>If the attribute is being set on a <code>Document</code> node, let
+ <var title="">new children</var> be the children of the document,
+ preserving their order. Otherwise, the attribute is being set on an
+ <code>Element</code> node; let <var title="">new children</var> be the
+ children of the the document's root element, preserving their order.</p>
+
+ <li>
+ <p>If the attribute is being set on a <code>Document</code> node, let
+ <var title="">target document</var> be that <code>Document</code> node.
+ Otherwise, the attribute is being set on an <code>Element</code> node;
+ let <var title="">target document</var> be the <code
+ title="">ownerDocument</code> of that <code>Element</code>.</p>
+
+ <li>
+ <p>Set the <code title="">ownerDocument</code> of all the nodes in <var
+ title="">new children</var> to the <var title="">target document</var>.</p>
+
+ <li>
+ <p>Append all the <var title="">new children</var> nodes to the node
+ whose <code title=dom-innerHTML-HTML><a
+ href="#innerhtml0">innerHTML</a></code> attribute is being set,
+ preserving their order.</p>
+ </ol>
+
+ <h3 id=apis-in><span class=secno>2.6. </span>APIs in HTML documents</h3>
+ <!-- XXX case-sensitivity training required here. -->
+
+ <p>For <a href="#html-">HTML documents</a>, and for <a
+ href="#html-elements">HTML elements</a> in <a href="#html-">HTML
+ documents</a>, certain APIs defined in DOM3 Core become case-insensitive
+ or case-changing, as sometimes defined in DOM3 Core, and as summarised or
+ required below. <a href="#refsDOM3CORE">[DOM3CORE]</a>.
+
+ <p>This does not apply to <a href="#xml-documents">XML documents</a> or to
+ elements that are not in the <a href="#html-namespace0">HTML namespace</a>
+ despite being in <a href="#html-">HTML documents</a>.
+
+ <dl>
+ <dt><code title="">Element.tagName</code>, <code
+ title="">Node.nodeName</code>, and <code title="">Node.localName</code>
+
+ <dd>
+ <p>These attributes return tag names in all uppercase<!-- XXX
+ xref-->
+ and attribute names in all lowercase<!-- XXX xref -->, regardless of the
+ case with which they were created.</p>
+
+ <dt><code title="">Document.createElement()</code>
+
+ <dd>
+ <p>The canonical form of HTML markup is all-lowercase; thus, this method
+ will lowercase<!-- XXX xref --> the argument before creating the
+ requisite element. Also, the element created must be in the <a
+ href="#html-namespace0">HTML namespace</a>.</p>
+
+ <p class=note>This doesn't apply to <code
+ title="">Document.createElementNS()</code>. Thus, it is possible, by
+ passing this last method a tag name in the wrong case, to create an
+ element that claims to have the tag name of an HTML element, but doesn't
+ support its interfaces, because it really has another tag name not
+ accessible from the DOM APIs.</p>
+
+ <dt><code title="">Element.setAttributeNode()</code>
+
+ <dd>
+ <p>When an <code>Attr</code> node is set on an <a href="#html-elements"
+ title="HTML elements">HTML element</a>, it must have its name
+ lowercased<!-- XXX xref --> before the element is affected.</p>
+
+ <p class=note>This doesn't apply to <code
+ title="">Document.setAttributeNodeNS()</code>.</p>
+
+ <dt><code title="">Element.setAttribute()</code>
+
+ <dd>
+ <p>When an attribute is set on an <a href="#html-elements" title="HTML
+ elements">HTML element</a>, the name argument must be
+ lowercased<!-- XXX xref
+ --> before the element is affected.</p>
+
+ <p class=note>This doesn't apply to <code
+ title="">Document.setAttributeNS()</code>.</p>
+
+ <dt><code title="">Document.getElementsByTagName()</code> and <code
+ title="">Element.getElementsByTagName()</code>
+
+ <dd>
+ <p>These methods (but not their namespaced counterparts) must compare the
+ given argument case-insensitively<!-- XXX xref --> when looking at <a
+ href="#html-elements" title="HTML elements">HTML elements</a>, and
+ case-sensitively otherwise.</p>
+
+ <p class=note>Thus, in an <a href="#html-" title="HTML documents">HTML
+ document</a> with nodes in multiple namespaces, these methods will be
+ both case-sensitive and case-insensitive at the same time.</p>
+
+ <dt><code title="">Document.renameNode()</code>
+
+ <dd>
+ <p>If the new namespace is the <a href="#html-namespace0">HTML
+ namespace</a>, then the new qualified name must be lowercased before the
+ rename takes place.<!-- XXX xref --></p>
+ </dl>
+
+ <h2 id=semantics><span class=secno>3. </span>Semantics and structure of
+ HTML elements</h2>
+
+ <h3 id=semantics-intro><span class=secno>3.1. </span>Introduction</h3>
+
+ <p><em>This section is non-normative.</em>
+
+ <p class=big-issue>An introduction to marking up a document.
+
+ <h3 id=common1><span class=secno>3.2. </span>Common microsyntaxes</h3>
+
+ <p>There are various places in HTML that accept particular data types, such
+ as dates or numbers. This section describes what the conformance criteria
+ for content in those formats is, and how to parse them.</p>
+ <!-- XXX need to define how to handle U+000A LINE FEED and U+000D
+ CARRIAGE RETURN in attributes (for HTML) -->
+
+ <p class=big-issue>Need to go through the whole spec and make sure all the
+ attribute values are clearly defined either in terms of microsyntaxes or
+ in terms of other specs, or as "Text" or some such.
+
+ <h4 id=common2><span class=secno>3.2.1. </span>Common parser idioms</h4>
+
+ <p>The <dfn id=space title="space character">space characters</dfn>, for
+ the purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER
+ TABULATION (tab), U+000A LINE FEED (LF), U+000B LINE TABULATION, U+000C
+ FORM FEED (FF), and U+000D CARRIAGE RETURN (CR).
+
+ <p>Some of the micro-parsers described below follow the pattern of having
+ an <var title="">input</var> variable that holds the string being parsed,
+ and having a <var title="">position</var> variable pointing at the next
+ character to parse in <var title="">input</var>.
+
+ <p>For parsers based on this pattern, a step that requires the user agent
+ to <dfn id=collect>collect a sequence of characters</dfn> means that the
+ following algorithm must be run, with <var title="">characters</var> being
+ the set of characters that can be collected:
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> and <var title="">position</var> be the
+ same variables as those of the same name in the algorithm that invoked
+ these steps.
+
+ <li>
+ <p>Let <var title="">result</var> be the empty string.
+
+ <li>
+ <p>While <var title="">position</var> doesn't point past the end of <var
+ title="">input</var> and the character at <var title="">position</var>
+ is one of the <var title="">characters</var>, append that character to
+ the end of <var title="">result</var> and advance <var
+ title="">position</var> to the next character in <var
+ title="">input</var>.
+
+ <li>
+ <p>Return <var title="">result</var>.
+ </ol>
+
+ <p>The step <dfn id=skip-whitespace>skip whitespace</dfn> means that the
+ user agent must <a href="#collect">collect a sequence of characters</a>
+ that are <a href="#space" title="space character">space characters</a>.
+ The step <dfn id=skip->skip Zs characters</dfn> means that the user agent
+ must <a href="#collect">collect a sequence of characters</a> that are in
+ the Unicode character class Zs. In both cases, the collected characters
+ are not used. <a href="#refsUNICODE">[UNICODE]</a>
+
+ <h4 id=boolean><span class=secno>3.2.2. </span>Boolean attributes</h4>
+
+ <p>A number of attributes in HTML5 are <dfn id=boolean0 title="boolean
+ attribute">boolean attributes</dfn>. The presence of a boolean attribute
+ on an element represents the true value, and the absence of the attribute
+ represents the false value.
+
+ <p>If the attribute is present, its value must either be the empty string
+ or the attribute's canonical name, exactly, with no leading or trailing
+ whitespace, and in lowercase.
+
+ <h4 id=numbers><span class=secno>3.2.3. </span>Numbers</h4>
+
+ <h5 id=unsigned><span class=secno>3.2.3.1. </span>Unsigned integers</h5>
+
+ <p>A string is a <dfn id=valid>valid non-negative integer</dfn> if it
+ consists of one of more characters in the range U+0030 DIGIT ZERO (0) to
+ U+0039 DIGIT NINE (9).
+
+ <p>The <dfn id=rules>rules for parsing non-negative integers</dfn> are as
+ given in the following algorithm. When invoked, the steps must be followed
+ in the order given, aborting at the first step that returns a value. This
+ algorithm will either return zero, a positive integer, or an error.
+ Leading spaces are ignored. Trailing spaces and indeed any trailing
+ garbage characters are ignored.
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>Let <var title="">value</var> have the value 0.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace.</a>
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, return an error.
+
+ <li>
+ <p>If the next character is not one of U+0030 DIGIT ZERO (0) .. U+0039
+ DIGIT NINE (9), then return an error.
+ </li>
+ <!-- Ok. At this point we know we have a number. It might have
+ trailing garbage which we'll ignore, but it's a number, and we
+ won't return an error. -->
+
+ <li>
+ <p>If the next character is one of U+0030 DIGIT ZERO (0) .. U+0039 DIGIT
+ NINE (9):</p>
+
+ <ol>
+ <li>Multiply <var title="">value</var> by ten.
+
+ <li>Add the value of the current character (0..9) to <var
+ title="">value</var>.
+
+ <li>Advance <var title="">position</var> to the next character.
+
+ <li>If <var title="">position</var> is not past the end of <var
+ title="">input</var>, return to the top of step 7 in the overall
+ algorithm (that's the step within which these substeps find
+ themselves).
+ </ol>
+
+ <li>
+ <p>Return <var title="">value</var>.
+ </ol>
+
+ <h5 id=signed><span class=secno>3.2.3.2. </span>Signed integers</h5>
+
+ <p>A string is a <dfn id=valid0>valid integer</dfn> if it consists of one
+ of more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE
+ (9), optionally prefixed with a U+002D HYPHEN-MINUS ("-") character.
+
+ <p>The <dfn id=rules0>rules for parsing integers</dfn> are similar to the
+ rules for non-negative integers, and are as given in the following
+ algorithm. When invoked, the steps must be followed in the order given,
+ aborting at the first step that returns a value. This algorithm will
+ either return an integer or an error. Leading spaces are ignored. Trailing
+ spaces and trailing garbage characters are ignored.
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>Let <var title="">value</var> have the value 0.
+
+ <li>
+ <p>Let <var title="">sign</var> have the value "positive".
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace.</a>
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, return an error.
+
+ <li>
+ <p>If the character indicated by <var title="">position</var> (the first
+ character) is a U+002D HYPHEN-MINUS ("-") character:</p>
+
+ <ol>
+ <li>Let <var title="">sign</var> be "negative".
+
+ <li>Advance <var title="">position</var> to the next character.
+
+ <li>If <var title="">position</var> is past the end of <var
+ title="">input</var>, return an error.
+ </ol>
+
+ <li>
+ <p>If the next character is not one of U+0030 DIGIT ZERO (0) .. U+0039
+ DIGIT NINE (9), then return an error.
+ </li>
+ <!-- Ok. At this point we know we have a number. It might have
+ trailing garbage which we'll ignore, but it's a number, and we
+ won't return an error. -->
+
+ <li>
+ <p>If the next character is one of U+0030 DIGIT ZERO (0) .. U+0039 DIGIT
+ NINE (9):</p>
+
+ <ol>
+ <li>Multiply <var title="">value</var> by ten.
+
+ <li>Add the value of the current character (0..9) to <var
+ title="">value</var>.
+
+ <li>Advance <var title="">position</var> to the next character.
+
+ <li>If <var title="">position</var> is not past the end of <var
+ title="">input</var>, return to the top of step 9 in the overall
+ algorithm (that's the step within which these substeps find
+ themselves).
+ </ol>
+
+ <li>
+ <p>If <var title="">sign</var> is "positive", return <var
+ title="">value</var>, otherwise return 0-<var title="">value</var>.
+ </ol>
+
+ <h5 id=real-numbers><span class=secno>3.2.3.3. </span>Real numbers</h5>
+
+ <p>A string is a <dfn id=valid1>valid floating point number</dfn> if it
+ consists of one of more characters in the range U+0030 DIGIT ZERO (0) to
+ U+0039 DIGIT NINE (9), optionally with a single U+002E FULL STOP (".")
+ character somewhere (either before these numbers, in between two numbers,
+ or after the numbers), all optionally prefixed with a U+002D HYPHEN-MINUS
+ ("-") character.
+
+ <p>The <dfn id=rules1>rules for parsing floating point number values</dfn>
+ are as given in the following algorithm. As with the previous algorithms,
+ when this one is invoked, the steps must be followed in the order given,
+ aborting at the first step that returns a value. This algorithm will
+ either return a number or an error. Leading spaces are ignored. Trailing
+ spaces and garbage characters are ignored.
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>Let <var title="">value</var> have the value 0.
+
+ <li>
+ <p>Let <var title="">sign</var> have the value "positive".
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace.</a>
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, return an error.
+
+ <li>
+ <p>If the character indicated by <var title="">position</var> (the first
+ character) is a U+002D HYPHEN-MINUS ("-") character:</p>
+
+ <ol>
+ <li>Let <var title="">sign</var> be "negative".
+
+ <li>Advance <var title="">position</var> to the next character.
+
+ <li>If <var title="">position</var> is past the end of <var
+ title="">input</var>, return an error.
+ </ol>
+
+ <li>
+ <p>If the next character is not one of U+0030 DIGIT ZERO (0) .. U+0039
+ DIGIT NINE (9) or U+002E FULL STOP ("."), then return an error.
+
+ <li>
+ <p>If the next character is U+002E FULL STOP ("."), but either that is
+ the last character or the character after that one is not one of U+0030
+ DIGIT ZERO (0) .. U+0039 DIGIT NINE (9), then return an error.
+ </li>
+ <!-- Ok. At this point we know we have a number. It might have
+ trailing garbage which we'll ignore, but it's a number, and we
+ won't return an error. -->
+
+ <li>
+ <p>If the next character is one of U+0030 DIGIT ZERO (0) .. U+0039 DIGIT
+ NINE (9):</p>
+
+ <ol>
+ <li>Multiply <var title="">value</var> by ten.
+
+ <li>Add the value of the current character (0..9) to <var
+ title="">value</var>.
+
+ <li>Advance <var title="">position</var> to the next character.
+
+ <li>If <var title="">position</var> is past the end of <var
+ title="">input</var>, then if <var title="">sign</var> is "positive",
+ return <var title="">value</var>, otherwise return 0-<var
+ title="">value</var>.
+
+ <li>Otherwise return to the top of step 10 in the overall algorithm
+ (that's the step within which these substeps find themselves).
+ </ol>
+
+ <li>
+ <p>Otherwise, if the next character is not a U+002E FULL STOP ("."), then
+ if <var title="">sign</var> is "positive", return <var
+ title="">value</var>, otherwise return 0-<var title="">value</var>.
+
+ <li>
+ <p>The next character is a U+002E FULL STOP ("."). Advance <var
+ title="">position</var> to the character after that.
+
+ <li>
+ <p>Let <var title="">divisor</var> be 1.
+
+ <li>
+ <p>If the next character is one of U+0030 DIGIT ZERO (0) .. U+0039 DIGIT
+ NINE (9):</p>
+
+ <ol>
+ <li>Multiply <var title="">divisor</var> by ten.
+
+ <li>Add the value of the current character (0..9) divided by <var
+ title="">divisor</var>, to <var title="">value</var>.
+
+ <li>Advance <var title="">position</var> to the next character.
+
+ <li>If <var title="">position</var> is past the end of <var
+ title="">input</var>, then if <var title="">sign</var> is "positive",
+ return <var title="">value</var>, otherwise return 0-<var
+ title="">value</var>.
+
+ <li>Otherwise return to the top of step 14 in the overall algorithm
+ (that's the step within which these substeps find themselves).
+ </ol>
+
+ <li>
+ <p>Otherwise, if <var title="">sign</var> is "positive", return <var
+ title="">value</var>, otherwise return 0-<var title="">value</var>.
+ </ol>
+
+ <h5 id=ratios><span class=secno>3.2.3.4. </span>Ratios</h5>
+
+ <p class=note>The algorithms described in this section are used by the
+ <code><a href="#progress">progress</a></code> and <code><a
+ href="#meter">meter</a></code> elements.
+
+ <p>A <dfn id=valid2>valid denominator punctuation character</dfn> is one of
+ the characters from the table below. There is <dfn id=a-value
+ title="values associated with denominator punctuation characters">a value
+ associated with each denominator punctuation character</dfn>, as shown in
+ the table below.
+
+ <table>
+ <thead>
+ <tr>
+ <th colspan=2>Denominator Punctuation Character
+
+ <th>Value
+
+ <tbody>
+ <tr>
+ <td>U+0025 PERCENT SIGN
+
+ <td>&#x0025;
+
+ <td>100
+
+ <tr>
+ <td>U+066A ARABIC PERCENT SIGN
+
+ <td>&#x066A;
+
+ <td>100
+
+ <tr>
+ <td>U+FE6A SMALL PERCENT SIGN
+
+ <td>&#xFE6A;
+
+ <td>100
+
+ <tr>
+ <td>U+FF05 FULLWIDTH PERCENT SIGN
+
+ <td>&#xFF05;
+
+ <td>100
+
+ <tr>
+ <td>U+2030 PER MILLE SIGN
+
+ <td>&#x2030;
+
+ <td>1000
+
+ <tr>
+ <td>U+2031 PER TEN THOUSAND SIGN
+
+ <td>&#x2031;
+
+ <td>10000
+ </table>
+
+ <p>The <dfn id=steps>steps for finding one or two numbers of a ratio in a
+ string</dfn> are as follows:
+
+ <ol>
+ <li>If the string is empty, then return nothing and abort these steps.
+
+ <li><a href="#find-a">Find a number</a> in the string according to the
+ algorithm below, starting at the start of the string.
+
+ <li>If the sub-algorithm in step 2 returned nothing or returned an error
+ condition, return nothing and abort these steps.
+
+ <li>Set <var title="">number1</var> to the number returned by the
+ sub-algorithm in step 2.
+
+ <li>Starting with the character immediately after the last one examined by
+ the sub-algorithm in step 2, skip any characters in the string that are
+ in the Unicode character class Zs (this might match zero characters). <a
+ href="#refsUNICODE">[UNICODE]</a>
+
+ <li>If there are still further characters in the string, and the next
+ character in the string is a <a href="#valid2">valid denominator
+ punctuation character</a>, set <var title="">denominator</var> to that
+ character.
+
+ <li>If the string contains any other characters in the range U+0030 DIGIT
+ ZERO to U+0039 DIGIT NINE, but <var title="">denominator</var> was given
+ a value in the step 6, return nothing and abort these steps.
+
+ <li>Otherwise, if <var title="">denominator</var> was given a value in
+ step 6, return <var title="">number1</var> and <var
+ title="">denominator</var> and abort these steps.
+
+ <li><a href="#find-a">Find a number</a> in the string again, starting
+ immediately after the last character that was examined by the
+ sub-algorithm in step 2.
+
+ <li>If the sub-algorithm in step 9 returned nothing or an error condition,
+ return nothing and abort these steps.
+
+ <li>Set <var title="">number2</var> to the number returned by the
+ sub-algorithm in step 9.
+
+ <li>If there are still further characters in the string, and the next
+ character in the string is a <a href="#valid2">valid denominator
+ punctuation character</a>, return nothing and abort these steps.
+
+ <li>If the string contains any other characters in the range U+0030 DIGIT
+ ZERO to U+0039 DIGIT NINE, return nothing and abort these steps.
+
+ <li>Otherwise, return <var title="">number1</var> and <var
+ title="">number2</var>.
+ </ol>
+ <!-- XXX again, this should say "positive number" -->
+
+ <p>The algorithm to <dfn id=find-a>find a number</dfn> is as follows. It is
+ given a string and a starting position, and returns either nothing, a
+ number, or an error condition.
+
+ <ol>
+ <li>Starting at the given starting position, ignore all characters in the
+ given string until the first character that is either a U+002E FULL STOP
+ or one of the ten characters in the range U+0030 DIGIT ZERO to U+0039
+ DIGIT NINE.
+
+ <li>If there are no such characters, return nothing and abort these steps.
+
+ <li>Starting with the character matched in step 1, collect all the
+ consecutive characters that are either a U+002E FULL STOP or one of the
+ ten characters in the range U+0030 DIGIT ZERO to U+0039 DIGIT NINE, and
+ assign this string of one or more characters to <var
+ title="">string</var>.
+
+ <li>If <var title="">string</var> contains more than one U+002E FULL STOP
+ character then return an error condition and abort these steps.
+
+ <li>Parse <var title="">string</var> according to the <a
+ href="#rules1">rules for parsing floating point number values</a>, to
+ obtain <var title="">number</var>. This step cannot fail (<var
+ title="">string</var> is guarenteed to be a <a href="#valid1">valid
+ floating point number</a>).
+
+ <li>Return <var title="">number</var>.
+ </ol>
+
+ <h5 id=percentages-and-dimensions><span class=secno>3.2.3.5.
+ </span>Percentages and dimensions</h5>
+
+ <p class=big-issue><dfn id=valid3 title="valid non-negative
+ percentage">valid non-negative percentages</dfn>, <dfn id=rules2>rules for
+ parsing dimension values</dfn> (only used by height/width on img, embed,
+ object &mdash; maybe they should do the same as canvas, then this wouldn't
+ even be needed)
+
+ <h5 id=lists><span class=secno>3.2.3.6. </span>Lists of integers</h5>
+
+ <p>A <dfn id=valid4>valid list of integers</dfn> is a number of <a
+ href="#valid0" title="valid integer">valid integers</a> separated by
+ U+002C COMMA characters, with no other characters (e.g. no <a
+ href="#space" title="space character">space characters</a>). In addition,
+ there might be restrictions on the number of integers that can be given,
+ or on the range of values allowed.
+
+ <p>The <dfn id=rules3>rules for parsing a list of integers</dfn> are as
+ follows:
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>Let <var title="">numbers</var> be an initially empty list of
+ integers. This list will be the result of this algorithm.
+
+ <li>
+ <p>If there is a character in the string <var title="">input</var> at
+ position <var title="">position</var>, and it is either U+002C COMMA
+ character or a U+0020 SPACE character, then advance <var
+ title="">position</var> to the next character in <var
+ title="">input</var>, or to beyond the end of the string if there are no
+ more characters.
+
+ <li>
+ <p>If <var title="">position</var> points to beyond the end of <var
+ title="">input</var>, return <var title="">numbers</var> and abort.
+
+ <li>
+ <p>If the character in the string <var title="">input</var> at position
+ <var title="">position</var> is a U+002C COMMA character or a U+0020
+ SPACE character, return to step 4.
+
+ <li>
+ <p>Let <var title="">negated</var> be false.
+
+ <li>
+ <p>Let <var title="">value</var> be 0.
+
+ <li>
+ <p>Let <var title="">multiple</var> be 1.
+
+ <li>
+ <p>Let <var title="">started</var> be false.
+
+ <li>
+ <p>Let <var title="">finished</var> be false.
+
+ <li>
+ <p>Let <var title="">bogus</var> be false.
+
+ <li>
+ <p><em>Parser:</em> If the character in the string <var
+ title="">input</var> at position <var title="">position</var> is:</p>
+
+ <dl
+ class=switch><!-- XXX this doesn't quite match what IE does: http://www.hixie.ch/tests/adhoc/html/flow/image-maps/004-demo.html
+ I couldn't work out a pattern to IE's results. Let me know if you can see one. -->
+
+ <dt>A U+002D HYPHEN-MINUS character
+
+ <dd>
+ <p>Follow these substeps:</p>
+
+ <ol>
+ <li>If <var title="">finished</var> is true, skip to the next step in
+ the overall set of steps.
+
+ <li>If <var title="">started</var> is true or if <var
+ title="">bogus</var> is true, let <var title="">negated</var> be
+ false.
+
+ <li>Otherwise, if <var title="">started</var> is false and if <var
+ title="">bogus</var> is false, let <var title="">negated</var> be
+ true.
+
+ <li>Let <var title="">started</var> be true.
+ </ol>
+
+ <dt>A character in the range U+0030 DIGIT ZERO .. U+0039 DIGIT NINE
+
+ <dd>
+ <p>Follow these substeps:</p>
+
+ <ol>
+ <li>If <var title="">finished</var> is true, skip to the next step in
+ the overall set of steps.
+
+ <li>Let <var title="">n</var> be the value of the digit, interpreted
+ in base ten, multiplied by <var title="">multiple</var>.
+
+ <li>Add <var title="">n</var> to <var title="">value</var>.
+
+ <li>If <var title="">value</var> is greater than zero, multiply <var
+ title="">multiple</var> by ten.
+
+ <li>Let <var title="">started</var> be true.
+ </ol>
+
+ <dt>A U+002C COMMA character
+
+ <dt>A U+0020 SPACE character
+
+ <dd>
+ <p>Follow these substeps:</p>
+
+ <ol>
+ <li>If <var title="">started</var> is false, return the <var
+ title="">numbers</var> list and abort.
+
+ <li>If <var title="">negated</var> is true, then negate <var
+ title="">value</var>.
+
+ <li>Append <var title="">value</var> to the <var
+ title="">numbers</var> list.
+
+ <li>Jump to step 4 in the overall set of steps.
+ </ol>
+
+ <dt>A U+002E FULL STOP character
+
+ <dd>
+ <p>Follow these substeps:</p>
+
+ <ol>
+ <li>Let <var title="">finished</var> be true.
+ </ol>
+
+ <dt>Any other character
+
+ <dd>
+ <p>Follow these substeps:</p>
+
+ <ol>
+ <li>If <var title="">finished</var> is true, skip to the next step in
+ the overall set of steps.
+
+ <li>Let <var title="">negated</var> be false.
+
+ <li>Let <var title="">bogus</var> be true.
+
+ <li>If <var title="">started</var> is true, then return the <var
+ title="">numbers</var> list, and abort. (The value in <var
+ title="">value</var> is not appended to the list first; it is
+ dropped.)
+ </ol>
+ </dl>
+
+ <li>
+ <p>Advance <var title="">position</var> to the next character in <var
+ title="">input</var>, or to beyond the end of the string if there are no
+ more characters.
+
+ <li>
+ <p>If <var title="">position</var> points to a character (and not to
+ beyond the end of <var title="">input</var>), jump to the big
+ <em>Parser</em> step above.
+
+ <li>
+ <p>If <var title="">negated</var> is true, then negate <var
+ title="">value</var>.
+
+ <li>
+ <p>If <var title="">started</var> is true, then append <var
+ title="">value</var> to the <var title="">numbers</var> list, return
+ that list, and abort.
+
+ <li>
+ <p>Return the <var title="">numbers</var> list and abort.
+ </ol>
+
+ <h4 id=dates><span class=secno>3.2.4. </span>Dates and times</h4>
+
+ <p>In the algorithms below, the <dfn id=number>number of days in month <var
+ title="">month</var> of year <var title="">year</var></dfn> is:
+ <em>31</em> if <var title="">month</var> is 1, 3, 5, 7, 8, 10, or 12;
+ <em>30</em> if <var title="">month</var> is 4, 6, 9, or 11; <em>29</em> if
+ <var title="">month</var> is 2 and <var title="">year</var> is a number
+ divisible by 400, or if <var title="">year</var> is a number divisible by
+ 4 but not by 100; and <em>28</em> otherwise. This takes into account leap
+ years in the Gregorian calendar. <a href="#refsGREGORIAN">[GREGORIAN]</a>
+
+ <h5 id=specific><span class=secno>3.2.4.1. </span>Specific moments in time</h5>
+
+ <p>A string is a <dfn id=valid5>valid datetime</dfn> if it has four digits
+ (representing the year), a literal hyphen, two digits (representing the
+ month), a literal hyphen, two digits (representing the day), optionally
+ some spaces, either a literal T or a space, optionally some more spaces,
+ two digits (for the hour), a colon, two digits (the minutes), optionally
+ the seconds (which, if included, must consist of another colon, two digits
+ (the integer part of the seconds), and optionally a decimal point followed
+ by one or more digits (for the fractional part of the seconds)),
+ optionally some spaces, and finally either a literal Z (indicating the
+ time zone is UTC), or, a plus sign or a minus sign followed by two digits,
+ a colon, and two digits (for the sign, the hours and minutes of the
+ timezone offset respectively); with the month-day combination being a
+ valid date in the given year according to the Gregorian calendar, the hour
+ values (<var title="">h</var>) being in the range 0&nbsp;&le;&nbsp;<var
+ title="">h</var>&nbsp;&le;&nbsp;23, the minute values (<var
+ title="">m</var>) in the range 0&nbsp;&le;&nbsp;<var
+ title="">m</var>&nbsp;&le;&nbsp;59, and the second value (<var
+ title="">s</var>) being in the range 0&nbsp;&le;&nbsp;<var
+ title="">h</var>&nbsp;&lt;&nbsp;60. <a
+ href="#refsGREGORIAN">[GREGORIAN]</a></p>
+ <!--XXX [GREGORIAN] should point to
+ <dd id="refsGREGORIAN">[GREGORIAN]</dd>
+ <dd>(Non-normative) <cite>Inter Gravissimas</cite>, A. Lilius, C. Clavius. Gregory XIII Papal Bulls, February 1582.</dd>
+ -->
+
+ <p>The digits must be characters in the range U+0030 DIGIT ZERO (0) to
+ U+0039 DIGIT NINE (9), the hyphens must be a U+002D HYPHEN-MINUS
+ characters, the T must be a U+0054 LATIN CAPITAL LETTER T, the colons must
+ be U+003A COLON characters, the decimal point must be a U+002E FULL STOP,
+ the Z must be a U+005A LATIN CAPITAL LETTER Z, the plus sign must be a
+ U+002B PLUS SIGN, and the minus U+002D (same as the hyphen).
+
+ <div class=example>
+ <p>The following are some examples of dates written as <a href="#valid5"
+ title="valid datetime">valid datetimes</a>.</p>
+
+ <dl>
+ <dt>"<code>0037-12-13 00:00 Z</code>"
+
+ <dd>Midnight UTC on the birthday of Nero (the Roman Emperor).
+
+ <dt>"<code>1979-10-14T12:00:00.001-04:00</code>"
+
+ <dd>One millisecond after noon on October 14th 1979, in the time zone in
+ use on the east coast of North America during daylight saving time.
+
+ <dt>"<code>8592-01-01 T 02:09 +02:09</code>"
+
+ <dd>Midnight UTC on the 1st of January, 8592. The time zone associated
+ with that time is two hours and nine minutes ahead of UTC.
+ </dl>
+
+ <p>Several things are notable about these dates:</p>
+
+ <ul>
+ <li>Years with fewer than four digits have to be zero-padded. The date
+ "37-12-13" would not be a valid date.
+
+ <li>To unambiguously identify a moment in time prior to the introduction
+ of the Gregorian calendar, the date has to be first converted to the
+ Gregorian calendar from the calendar in use at the time (e.g. from the
+ Julian calendar). The date of Nero's birth is the 15th of December 37,
+ in the Julian Calendar, which is the 13th of December 37 in the
+ Gregorian Calendar.</li>
+ <!--
+ XXX this might not be true. I can't find a reference that gives
+ his birthday with an explicit statement about the calendar being
+ used. However, it seems unlikely that it would be given in the
+ Gregorian calendar, so I assume sites use the Julian one. -->
+
+ <li>The time and timezone components are not optional.
+
+ <li>Dates before the year 0 or after the year 9999 can't be represented
+ as a datetime in this version of HTML.
+
+ <li>Time zones differ based on daylight savings time.
+ </ul>
+ </div>
+
+ <p class=note>Conformance checkers can use the algorithm below to determine
+ if a datetime is a valid datetime or not.
+
+ <p>To <dfn id=datetime-parser>parse a string as a datetime value</dfn>, a
+ user agent must apply the following algorithm to the string. This will
+ either return a time in UTC, with associated timezone information for
+ round tripping or display purposes, or nothing, indicating the value is
+ not a <a href="#valid5">valid datetime</a>. If at any point the algorithm
+ says that it "fails", this means that it returns nothing.
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly four characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that number
+ be the <var title="">year</var>.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var> or if the character at <var title="">position</var>
+ is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move <var
+ title="">position</var> forwards one character.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly two characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that number
+ be the <var title="">month</var>.
+
+ <li>If <var title="">month</var> is not a number in the range
+ 1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;12, then fail.
+
+ <li>
+ <p>Let <var title="">maxday</var> be the <a href="#number">number of days
+ in month <var title="">month</var> of year <var title="">year</var></a>.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var> or if the character at <var title="">position</var>
+ is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move <var
+ title="">position</var> forwards one character.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly two characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that number
+ be the <var title="">day</var>.
+
+ <li>
+ <p>If <var title="">day</var> is not a number in the range
+ 1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;<var
+ title="">maxday</var>, then fail.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> that are
+ either U+0054 LATIN CAPITAL LETTER T characters or <a href="#space"
+ title="space character">space characters</a>. If the collected sequence
+ is zero characters long, or if it contains more than one U+0054 LATIN
+ CAPITAL LETTER T character, then fail.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly two characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that number
+ be the <var title="">hour</var>.
+
+ <li>If <var title="">hour</var> is not a number in the range
+ 0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23, then fail.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var> or if the character at <var title="">position</var>
+ is not a U+003A COLON character, then fail. Otherwise, move <var
+ title="">position</var> forwards one character.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly two characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that number
+ be the <var title="">minute</var>.
+
+ <li>If <var title="">minute</var> is not a number in the range
+ 0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59, then fail.
+
+ <li>
+ <p>Let <var title="">second</var> be a string with the value "0".
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var>, then fail.
+
+ <li>
+ <p>If the character at <var title="">position</var> is a U+003A COLON,
+ then:</p>
+
+ <ol>
+ <li>
+ <p>Advance <var title="">position</var> to the next character in <var
+ title="">input</var>.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var>, or at the last character in <var
+ title="">input</var>, or if the next <em>two</em> characters in <var
+ title="">input</var> starting at <var title="">position</var> are not
+ two characters both in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
+ NINE (9), then fail.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> that are
+ either characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
+ NINE (9) or U+002E FULL STOP characters. If the collected sequence has
+ more than one U+002E FULL STOP characters, or if the last character in
+ the sequence is a U+002E FULL STOP character, then fail. Otherwise,
+ let the collected string be <var title="">second</var> instead of its
+ previous value.
+ </ol>
+
+ <li>
+ <p>Interpret <var title="">second</var> as a base ten number (possibly
+ with a fractional part). Let that number be <var title="">second</var>
+ instead of the string version.
+
+ <li>If <var title="">second</var> is not a number in the range
+ 0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&lt;&nbsp;60, then fail.
+ (The values 60 and 61 are not allowed: leap seconds cannot be represented
+ by datetime values.)
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var>, then fail.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace.</a>
+
+ <li>
+ <p>If the character at <var title="">position</var> is a U+005A LATIN
+ CAPITAL LETTER Z, then:</p>
+
+ <ol>
+ <li>
+ <p>Let <var title="">timezone<sub title="">hours</sub></var> be 0.
+
+ <li>
+ <p>Let <var title="">timezone<sub title="">minutes</sub></var> be 0.
+
+ <li>
+ <p>Advance <var title="">position</var> to the next character in <var
+ title="">input</var>.
+ </ol>
+
+ <li>
+ <p>Otherwise, if the character at <var title="">position</var> is either
+ a U+002B PLUS SIGN ("+") or a U+002D HYPHEN-MINUS ("-"), then:</p>
+
+ <ol>
+ <li>
+ <p>If the character at <var title="">position</var> is a U+002B PLUS
+ SIGN ("+"), let <var title="">sign</var> be "positive". Otherwise,
+ it's a U+002D HYPHEN-MINUS ("-"); let <var title="">sign</var> be
+ "negative".
+
+ <li>
+ <p>Advance <var title="">position</var> to the next character in <var
+ title="">input</var>.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly two characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that
+ number be the <var title="">timezone<sub title="">hours</sub></var>.
+
+ <li>If <var title="">timezone<sub title="">hours</sub></var> is not a
+ number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub
+ title="">hours</sub></var>&nbsp;&le;&nbsp;23, then fail.
+
+ <li>If <var title="">sign</var> is "negative", then negate <var
+ title="">timezone<sub title="">hours</sub></var>.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var> or if the character at <var
+ title="">position</var> is not a U+003A COLON character, then fail.
+ Otherwise, move <var title="">position</var> forwards one character.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is not exactly two characters long, then fail. Otherwise,
+ interpret the resulting sequence as a base ten integer. Let that
+ number be the <var title="">timezone<sub title="">minutes</sub></var>.
+
+ <li>If <var title="">timezone<sub title="">minutes</sub></var> is not a
+ number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub
+ title="">minutes</sub></var>&nbsp;&le;&nbsp;59, then fail.
+ </ol>
+
+ <li>
+ <p>If <var title="">position</var> is <em>not</em> beyond the end of <var
+ title="">input</var>, then fail.
+
+ <li>
+ <p>Let <var title="">time</var> be the moment in time at year <var
+ title="">year</var>, month <var title="">month</var>, day <var
+ title="">day</var>, hours <var title="">hour</var>, minute <var
+ title="">minute</var>, second <var title="">second</var>, adding <var
+ title="">timezone<sub title="">hours</sub></var> hours and <var
+ title="">timezone<sub title="">minutes</sub></var> minutes. That moment
+ in time is a moment in the UTC timezone.
+
+ <li>
+ <p>Let <var title="">timezone</var> be <var title="">timezone<sub
+ title="">hours</sub></var> hours and <var title="">timezone<sub
+ title="">minutes</sub></var> minutes from UTC.
+
+ <li>
+ <p>Return <var title="">time</var> and <var title="">timezone</var>.
+ </ol>
+
+ <h5 id=vaguer><span class=secno>3.2.4.2. </span>Vaguer moments in time</h5>
+
+ <p>This section defines <dfn id=date-or title="date or time string">date or
+ time strings</dfn>. There are two kinds, <dfn id=date-or0 title="date or
+ time string in content">date or time strings in content</dfn>, and <dfn
+ id=date-or1 title="date or time string in attributes">date or time strings
+ in attributes</dfn>. The only difference is in the handling of whitespace
+ characters.
+
+ <p>To parse a <a href="#date-or">date or time string</a>, user agents must
+ use the following algorithm. A <a href="#date-or">date or time string</a>
+ is a <em>valid</em> date or time string if the following algorithm, when
+ run on the string, doesn't say the string is invalid.
+
+ <p>The algorithm may return nothing (in which case the string will be
+ invalid), or it may return a date, a time, a date and a time, or a date
+ and a time and and a timezone. Even if the algorithm returns one or more
+ values, the string can still be invalid.
+
+ <ol><!-- INIT -->
+
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>Let <var title="">results</var> be the collection of results that are
+ to be returned (one or more of a date, a time, and a timezone),
+ initially empty. If the algorithm aborts at any point, then whatever is
+ currently in <var title="">results</var> must be returned as the result
+ of the algorithm.
+ </li>
+ <!-- LEADING WHITESPACE -->
+
+ <li>
+ <p>For the "in content" variant: <a href="#skip-">skip Zs characters</a>;
+ for the "in attributes" variant: <a href="#skip-whitespace">skip
+ whitespace</a>.
+ </li>
+ <!-- XXX skip whitespace in attribute?
+ really? -->
+ <!-- YEAR or HOUR -->
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is empty, then the string is invalid; abort these steps.
+
+ <li>
+ <p>Let the sequence of characters collected in the last step be <var
+ title="">s</var>.
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, the string is invalid; abort these steps.
+
+ <li>
+ <p>If the character at <var title="">position</var> is <em>not</em> a
+ U+003A COLON character, then:</p>
+ <!-- DATE -->
+ <ol>
+ <li>
+ <p>If the character at <var title="">position</var> is not a U+002D
+ HYPHEN-MINUS ("-") character either, then the string is invalid, abort
+ these steps.
+ </li>
+ <!-- YEAR -->
+
+ <li>
+ <p>If the sequence <var title="">s</var> is not exactly four digits
+ long, then the string is invalid. (This does not stop the algorithm,
+ however.)
+
+ <li>
+ <p>Interpret the sequence of characters collected in step 5 as a base
+ ten integer, and let that number be <var title="">year</var>.
+
+ <li>
+ <p>Advance <var title="">position</var> past the U+002D HYPHEN-MINUS
+ ("-") character.
+ </li>
+ <!-- MONTH -->
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is empty, then the string is invalid; abort these steps.
+
+ <li>
+ <p>If the sequence collected in the last step is not exactly two digits
+ long, then the string is invalid.
+
+ <li>
+ <p>Interpret the sequence of characters collected two steps ago as a
+ base ten integer, and let that number be <var title="">month</var>.
+
+ <li>If <var title="">month</var> is not a number in the range
+ 1&nbsp;&le;&nbsp;<var title="">month</var>&nbsp;&le;&nbsp;12, then the
+ string is invalid, abort these steps.
+
+ <li>
+ <p>Let <var title="">maxday</var> be the <a href="#number">number of
+ days in month <var title="">month</var> of year <var
+ title="">year</var></a>.
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, or if the character at <var
+ title="">position</var> is <em>not</em> a U+002D HYPHEN-MINUS ("-")
+ character, then the string is invalid, abort these steps. Otherwise,
+ advance <var title="">position</var> to the next character.
+ </li>
+ <!-- DAY -->
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is empty, then the string is invalid; abort these steps.
+
+ <li>
+ <p>If the sequence collected in the last step is not exactly two digits
+ long, then the string is invalid.
+
+ <li>
+ <p>Interpret the sequence of characters collected two steps ago as a
+ base ten integer, and let that number be <var title="">day</var>.
+
+ <li>
+ <p>If <var title="">day</var> is not a number in the range
+ 1&nbsp;&le;&nbsp;<var title="">day</var>&nbsp;&le;&nbsp;<var
+ title="">maxday</var>, then the string is invalid, abort these steps.
+
+ <li>
+ <p>Add the date represented by <var title="">year</var>, <var
+ title="">month</var>, and <var title="">day</var> to the <var
+ title="">results</var>.
+ </li>
+ <!-- WHITESPACE -->
+
+ <li>
+ <p>For the "in content" variant: <a href="#skip-">skip Zs
+ characters</a>; for the "in attributes" variant: <a
+ href="#skip-whitespace">skip whitespace</a>.
+
+ <li>
+ <p>If the character at <var title="">position</var> is a U+0054 LATIN
+ CAPITAL LETTER T, then move <var title="">position</var> forwards one
+ character.
+
+ <li>
+ <p>For the "in content" variant: <a href="#skip-">skip Zs
+ characters</a>; for the "in attributes" variant: <a
+ href="#skip-whitespace">skip whitespace</a>.
+ </li>
+ <!-- at this point, if <var title="">position</var> points to a
+ number, we know that we passed at least one space or a T, because
+ otherwise the number would have been slurped up in the last
+ "collect" step. -->
+ <!-- HOUR -->
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is empty, then the string is invalid; abort these steps.
+
+ <li>
+ <p>Let <var title="">s</var> be the sequence of characters collected in
+ the last step.
+ </ol>
+ </li>
+ <!-- TIME -->
+
+ <li>
+ <p>If <var title="">s</var> is not exactly two digits long, then the
+ string is invalid.
+
+ <li>
+ <p>Interpret the sequence of characters collected two steps ago as a base
+ ten integer, and let that number be <var title="">hour</var>.
+
+ <li>
+ <p>If <var title="">hour</var> is not a number in the range
+ 0&nbsp;&le;&nbsp;<var title="">hour</var>&nbsp;&le;&nbsp;23, then the
+ string is invalid, abort these steps.
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, or if the character at <var
+ title="">position</var> is <em>not</em> a U+003A COLON character, then
+ the string is invalid, abort these steps. Otherwise, advance <var
+ title="">position</var> to the next character.
+ </li>
+ <!-- MINUTE -->
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the range
+ U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected
+ sequence is empty, then the string is invalid; abort these steps.
+
+ <li>
+ <p>If the sequence collected in the last step is not exactly two digits
+ long, then the string is invalid.
+
+ <li>
+ <p>Interpret the sequence of characters collected two steps ago as a base
+ ten integer, and let that number be <var title="">minute</var>.
+
+ <li>
+ <p>If <var title="">minute</var> is not a number in the range
+ 0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&le;&nbsp;59, then the
+ string is invalid, abort these steps.
+ </li>
+ <!-- SECOND -->
+
+ <li>
+ <p>Let <var title="">second</var> be 0. It may be changed to another
+ value in the next step.
+
+ <li>
+ <p>If <var title="">position</var> is not past the end of <var
+ title="">input</var> and the character at <var title="">position</var>
+ is a U+003A COLON character, then:</p>
+
+ <ol>
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> that are
+ either characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
+ NINE (9) or are U+002E FULL STOP. If the collected sequence is empty,
+ or contains more than one U+002E FULL STOP character, then the string
+ is invalid; abort these steps.
+
+ <li>
+ <p>If the first character in the sequence collected in the last step is
+ not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then
+ the string is invalid.
+
+ <li>
+ <p>Interpret the sequence of characters collected two steps ago as a
+ base ten number (possibly with a fractional part), and let that number
+ be <var title="">second</var>.
+
+ <li>
+ <p>If <var title="">second</var> is not a number in the range
+ 0&nbsp;&le;&nbsp;<var title="">minute</var>&nbsp;&lt;&nbsp;60, then
+ the string is invalid, abort these steps.
+ </ol>
+
+ <li>
+ <p>Add the time represented by <var title="">hour</var>, <var
+ title="">minute</var>, and <var title="">second</var> to the <var
+ title="">results</var>.
+ </li>
+ <!-- TIME ZONE -->
+
+ <li>
+ <p>If <var title="">results</var> has both a date and a time, then:</p>
+
+ <ol>
+ <li>
+ <p>For the "in content" variant: <a href="#skip-">skip Zs
+ characters</a>; for the "in attributes" variant: <a
+ href="#skip-whitespace">skip whitespace</a>.
+
+ <li>
+ <p>If <var title="">position</var> is past the end of <var
+ title="">input</var>, then skip to the next step in the overall set of
+ steps.</p>
+ <!-- UTC -->
+
+ <li>
+ <p>Otherwise, if the character at <var title="">position</var> is a
+ U+005A LATIN CAPITAL LETTER Z, then:</p>
+
+ <ol>
+ <li>
+ <p>Add the timezone corresponding to UTC (zero offset) to the <var
+ title="">results</var>.
+
+ <li>
+ <p>Advance <var title="">position</var> to the next character in <var
+ title="">input</var>.
+
+ <li>
+ <p>Skip to the next step in the overall set of steps.
+ </ol>
+ </li>
+ <!-- EXPLICIT TIMEZONE OFFSET -->
+
+ <li>
+ <p>Otherwise, if the character at <var title="">position</var> is
+ either a U+002B PLUS SIGN ("+") or a U+002D HYPHEN-MINUS ("-"), then:</p>
+
+ <ol><!-- SIGN -->
+
+ <li>
+ <p>If the character at <var title="">position</var> is a U+002B PLUS
+ SIGN ("+"), let <var title="">sign</var> be "positive". Otherwise,
+ it's a U+002D HYPHEN-MINUS ("-"); let <var title="">sign</var> be
+ "negative".
+ </li>
+ <!-- HOURS -->
+
+ <li>
+ <p>Advance <var title="">position</var> to the next character in <var
+ title="">input</var>.
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the
+ range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the
+ collected sequence is not exactly two characters long, then the
+ string is invalid.
+
+ <li>
+ <p>Interpret the sequence collected in the last step as a base ten
+ number, and let that number be <var title="">timezone<sub
+ title="">hours</sub></var>.
+
+ <li>If <var title="">timezone<sub title="">hours</sub></var> is not a
+ number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub
+ title="">hours</sub></var>&nbsp;&le;&nbsp;23, then the string is
+ invalid; abort these steps.
+
+ <li>If <var title="">sign</var> is "negative", then negate <var
+ title="">timezone<sub title="">hours</sub></var>.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var> or if the character at <var
+ title="">position</var> is not a U+003A COLON character, then the
+ string is invalid; abort these steps. Otherwise, move <var
+ title="">position</var> forwards one character.
+ </li>
+ <!-- MINUTES -->
+
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> in the
+ range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the
+ collected sequence is not exactly two characters long, then the
+ string is invalid.
+
+ <li>
+ <p>Interpret the sequence collected in the last step as a base ten
+ number, and let that number be <var title="">timezone<sub
+ title="">minutes</sub></var>.
+
+ <li>If <var title="">timezone<sub title="">minutes</sub></var> is not
+ a number in the range 0&nbsp;&le;&nbsp;<var title="">timezone<sub
+ title="">minutes</sub></var>&nbsp;&le;&nbsp;59, then the string is
+ invalid; abort these steps.
+
+ <li>
+ <p>Add the timezone corresponding to an offset of <var
+ title="">timezone<sub title="">hours</sub></var> hours and <var
+ title="">timezone<sub title="">minutes</sub></var> minutes to the
+ <var title="">results</var>.
+
+ <li>
+ <p>Skip to the next step in the overall set of steps.
+ </ol>
+
+ <li>
+ <p>Otherwise, the string is invalid; abort these steps.
+ </ol>
+
+ <li>
+ <p>For the "in content" variant: <a href="#skip-">skip Zs characters</a>;
+ for the "in attributes" variant: <a href="#skip-whitespace">skip
+ whitespace</a>.
+
+ <li>
+ <p>If <var title="">position</var> is <em>not</em> past the end of <var
+ title="">input</var>, then the string is invalid.</p>
+
+ <li>
+ <p>Abort these steps (the string is parsed).
+ </ol>
+
+ <h4 id=time-offsets><span class=secno>3.2.5. </span>Time offsets</h4>
+
+ <p class=big-issue><dfn id=valid6>valid time offset</dfn>, <dfn
+ id=rules4>rules for parsing time offsets</dfn>, <dfn id=time-offset>time
+ offset serialisation rules</dfn>; in the format "5d4h3m2s1ms" or "3m 9.2s"
+ or "00:00:00.00" or similar.
+
+ <h4 id=tokens><span class=secno>3.2.6. </span>Tokens</h4>
+
+ <p>A <dfn id=set-of>set of space-separated tokens</dfn> is a set of zero or
+ more words separated by one or more <a href="#space" title="space
+ character">space characters</a>, where words consist of any string of one
+ or more characters, none of which are <a href="#space" title="space
+ character">space characters</a>.
+
+ <p>A string containing a <a href="#set-of">set of space-separated
+ tokens</a> may have leading or trailing <a href="#space" title="space
+ character">space characters</a>.
+
+ <p>An <dfn id=unordered>unordered set of space-separated tokens</dfn> is a
+ <a href="#set-of">set of space-separated tokens</a> where none of the
+ words are duplicated.
+
+ <p>An <dfn id=ordered>ordered set of unique space-separated tokens</dfn> is
+ a <a href="#set-of">set of space-separated tokens</a> where none of the
+ words are duplicated but where the order of the tokens is meaningful.
+
+ <p>When a user agent has to <dfn id=split>split a string on spaces</dfn>,
+ it must use the following algorithm:
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being parsed.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>Let <var title="">tokens</var> be a list of tokens, initially empty.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>
+
+ <li>
+ <p>While <var title="">position</var> is not past the end of <var
+ title="">input</var>:</p>
+
+ <ol>
+ <li>
+ <p><a href="#collect">Collect a sequence of characters</a> that are not
+ <a href="#space" title="space character">space characters</a>.
+
+ <li>
+ <p>Add the string collected in the previous step to <var
+ title="">tokens</var>.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>
+ </ol>
+
+ <li>
+ <p>Return <var title="">tokens</var>.
+ </ol>
+
+ <p>When a user agent has to <dfn id=remove0>remove a token from a
+ string</dfn>, it must use the following algorithm:
+
+ <ol>
+ <li>
+ <p>Let <var title="">input</var> be the string being modified.
+
+ <li>
+ <p>Let <var title="">token</var> be the token being removed. It will not
+ contain any <a href="#space" title="space character">space
+ characters</a>.
+
+ <li>
+ <p>Let <var title="">output</var> be the output string, initially empty.
+
+ <li>
+ <p>Let <var title="">position</var> be a pointer into <var
+ title="">input</var>, initially pointing at the start of the string.
+
+ <li>
+ <p>If <var title="">position</var> is beyond the end of <var
+ title="">input</var>, set the string being modified to <var
+ title="">output</var>, and abort these steps.
+
+ <li>
+ <p>If the character at <var title="">position</var> is a <a
+ href="#space">space character</a>:
+
+ <ol>
+ <li>
+ <p>Append the character at <var title="">position</var> to the end of
+ <var title="">output</var>.
+
+ <li>
+ <p>Increment <var title="">position</var> so it points at the next
+ character in <var title="">input</var>.
+
+ <li>
+ <p>Return to step 5 in the overall set of steps.
+ </ol>
+
+ <li>
+ <p>Otherwise, the character at <var title="">position</var> is the first
+ character of a token. <a href="#collect">Collect a sequence of
+ characters</a> that are not <a href="#space" title="space
+ character">space characters</a>, and let that be <var title="">s</var>.
+
+ <li>
+ <p>If <var title="">s</var> is exactly equal to <var
+ title="">token</var>, then:</p>
+
+ <ol>
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a> (in <var
+ title="">input</var>).
+
+ <li>
+ <p>Remove any <a href="#space" title="space character">space
+ characters</a> currently at the end of <var title="">output</var>.
+
+ <li>
+ <p>If <var title="">position</var> is not past the end of <var
+ title="">input</var>, and <var title="">output</var> is not the empty
+ string, append a single U+0020 SPACE character at the end of <var
+ title="">output</var>.
+ </ol>
+
+ <li>
+ <p>Otherwise, append <var title="">s</var> to the end of <var
+ title="">output</var>.
+
+ <li>
+ <p>Return to step 6 in the overall set of steps.
+ </ol>
+
+ <p class=note>This causes any occurrences of the token to be removed from
+ the string, and any spaces that were surrounding the token to be collapsed
+ to a single space, except at the start and end of the string, where such
+ spaces are removed.
+
+ <h4 id=keywords><span class=secno>3.2.7. </span>Keywords and enumerated
+ attributes</h4>
+
+ <p>Some attributes are defined as taking one of a finite set of keywords.
+ Such attributes are called <dfn id=enumerated title="enumerated
+ attribute">enumerated attributes</dfn>. The keywords are each defined to
+ map to a particular <em>state</em> (several keywords might map to the same
+ state, in which case some of the keywords are synonyms of each other;
+ additionally, some of the keywords can be said to be non-conforming, and
+ are only in the specification for historical reasons). In addition, two
+ default states can be given. The first is the <em>invalid value
+ default</em>, the second is the <em>missing value default</em>.
+
+ <p>If an enumerated attribute is specified, the attribute's value must be
+ one of the given keywords that are not said to be non-conforming, with no
+ leading or trailing whitespace. The keyword may use any mix of uppercase
+ and lowercase letters.<!-- XXX should
+ say "uppercase and lowercase ASCII letters" or some such -->
+
+ <p>When the attribute is specified, if its value
+ <span>case-insensitively</span><!-- XXX ascii case folding --> matches one
+ of the given keywords then that keyword's state is the state that the
+ attribute represents. If the attribute value matches none of the given
+ keywords, but the attribute has an <em>invalid value default</em>, then
+ the attribute represents that state. Otherwise, if the attribute value
+ matches none of the keywords but there is a <em>missing value default</em>
+ state defined, then <em>that</em> is the state represented by the
+ attribute. Otherwise, there is no default, and invalid values must simply
+ be ignored.
+
+ <p>When the attribute is <em>not</em> specified, if there is a <em>missing
+ value default</em> state defined, then that is the state represented by
+ the (missing) attribute. Otherwise, the absence of the attribute means
+ that there is no state represented.
+
+ <p class=note>The empty string can be one of the keywords in some cases.
+ For example the <code title=attr-contenteditable><a
+ href="#contenteditable0">contenteditable</a></code> attribute has two
+ states: <em>true</em>, matching the <code title="">true</code> keyword and
+ the empty string, <em>false</em>, matching <code title="">false</code> and
+ all other keywords (it's the <em>invalid value default</em>). It could
+ further be thought of as having a third state <em>inherit</em>, which
+ would be the default when the attribute is not specified at all (the
+ <em>missing value default</em>), but for various reasons that isn't the
+ way this specification actually defines it.
+
+ <h4 id=syntax-references><span class=secno>3.2.8. </span>References</h4>
+
+ <p>A <dfn id=valid7>valid hashed ID reference</dfn> to an element of type
+ <var title="">type</var> is a string consisting of a U+0023 NUMBER SIGN
+ (<code title="">#</code>) character followed by a string which exactly
+ matches the value of the <code title=attr-id><a href="#id">id</a></code>
+ attribute of an element in the document with type <var
+ title="">type</var>.
+
+ <p>The <dfn id=rules5>rules for parsing a hashed ID reference</dfn> to an
+ element of type <var title="">type</var> are as follows:
+
+ <ol>
+ <li>
+ <p>If the string being parsed does not contain a U+0023 NUMBER SIGN
+ character, or if the first such character in the string is the last
+ character in the string, then return null and abort these steps.
+
+ <li>
+ <p>Let <var title="">s</var> be the string from the character immediately
+ after the first U+0023 NUMBER SIGN character in the string being parsed
+ up to the end of that string.
+
+ <li>
+ <p>Return the first element of type <var title="">type</var> that has an
+ <code title=attr-id><a href="#id">id</a></code> or <code
+ title="">name</code> attribute whose value case-insensitively matches
+ <var title="">s</var>.
+ </ol>
+
+ <h3 id=documents0><span class=secno>3.3. </span>Documents and document
+ fragments</h3>
+
+ <h4 id=semantics0><span class=secno>3.3.1. </span>Semantics</h4>
+
+ <p>Elements, attributes, and attribute values in HTML are defined (by this
+ specification) to have certain meanings (semantics). For example, the
+ <code><a href="#ol">ol</a></code> element represents an ordered list, and
+ the <code title=lang>lang</code> attribute represents the language of the
+ content.
+
+ <p>Authors must only use elements, attributes, and attribute values for
+ their appropriate semantic purposes.
+
+ <div class=example>
+ <p>For example, the following document is non-conforming, despite being
+ syntactically correct:</p>
+
+ <pre>&lt;!DOCTYPE html&gt;
+&lt;html lang="en-GB"&gt;
+ &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
+ &lt;body&gt;
+ &lt;table&gt;
+ &lt;tr&gt; &lt;td&gt; My favourite animal is the cat. &lt;/td&gt; &lt;/tr&gt;
+ &lt;tr&gt;
+ &lt;td&gt;
+ &mdash;&lt;a href="http://example.org/~ernest/"&gt;&lt;cite&gt;Ernest&lt;/cite&gt;&lt;/a&gt;,
+ in an essay from 1992
+ &lt;/td&gt;
+ &lt;/tr&gt;
+ &lt;/table&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+ <p>...because the data placed in the cells is clearly not tabular data. A
+ corrected version of this document might be:</p>
+
+ <pre>&lt;!DOCTYPE html&gt;
+&lt;html lang="en-GB"&gt;
+ &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
+ &lt;body&gt;
+ &lt;blockquote&gt;
+ &lt;p&gt; My favourite animal is the cat. &lt;/p&gt;
+ &lt;/blockquote&gt;
+ &lt;p&gt;
+ &mdash;&lt;a href="http://example.org/~ernest/"&gt;&lt;cite&gt;Ernest&lt;/cite&gt;&lt;/a&gt;,
+ in an essay from 1992
+ &lt;/p&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</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>&lt;body&gt;
+ &lt;h1&gt;ABC Company&lt;/h1&gt;
+ &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
+ ...</pre>
+
+ <p>The <code><a href="#header">header</a></code> element should be used in
+ these kinds of situations:</p>
+
+ <pre>&lt;body&gt;
+ &lt;header&gt;
+ &lt;h1&gt;ABC Company&lt;/h1&gt;
+ &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
+ &lt;/header&gt;
+ ...</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 update their presentation of
+ the document as this occurs.
+
+ <p class=example>HTML has a <code><a href="#progress">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.
+
+ <h4 id=structure0><span class=secno>3.3.2. </span>Structure</h4>
+
+ <p>All the elements in this specification have a defined content model,
+ which describes what nodes are allowed inside the elements, and thus what
+ the structure of an HTML document or fragment must look like. Authors must
+ only put elements inside an element if that element allows them to be
+ there according to its content model.
+
+ <p class=note>As noted in the conformance and terminology sections, for the
+ purposes of determining if an element matches its content model or not, <a
+ href="#text-node" title="text node"><code>CDATASection</code> nodes in the
+ DOM are treated as equivalent to <code>Text</code> nodes</a>, and <a
+ href="#entity-references">entity reference nodes are treated as if they
+ were expanded in place</a>.
+
+ <p>The <a href="#space" title="space character">space characters</a> are
+ always allowed between elements. User agents represent these characters
+ between elements in the source markup as text nodes in the
+ DOM.<!-- not a conf criteria since the parser now requires this
+ -->
+ Empty <a href="#text-node" title="text node">text nodes</a> and <a
+ href="#text-node" title="text node">text nodes</a> consisting of just
+ sequences of those characters are considered <dfn
+ id=inter-element>inter-element whitespace</dfn>.
+
+ <p><a href="#inter-element">Inter-element whitespace</a>, comment nodes,
+ and processing instruction nodes must be ignored when establishing whether
+ an element matches its content model or not, and must be ignored when
+ following algorithms that define document and element semantics.
+
+ <p>An element <var title="">A</var> is said to be <dfn
+ id=preceeded>preceeded or followed</dfn> by a second element <var
+ title="">B</var> if <var title="">A</var> and <var title="">B</var> have
+ the same parent node and there are no other element nodes or text nodes
+ (other than <a href="#inter-element">inter-element whitespace</a>) between
+ them.
+
+ <p>Authors must only use <a href="#elements1">elements in the HTML
+ namespace</a> in the contexts where they are allowed, as defined for each
+ element. For XML compound documents, these contexts could be inside
+ elements from other namespaces, if those elements are defined as providing
+ the relevant contexts.
+
+ <div class=example>
+ <p>The SVG specification defines the SVG <code>foreignObject</code>
+ element as allowing foreign namespaces to be included, thus allowing
+ compound documents to be created by inserting subdocument content under
+ that element. <em>This</em> specification defines the XHTML <code><a
+ href="#html">html</a></code> element as being allowed where subdocument
+ fragments are allowed in a compound document. Together, these two
+ definitions mean that placing an XHTML <code><a
+ href="#html">html</a></code> element as a child of an SVG
+ <code>foreignObject</code> element is conforming.</p>
+ </div>
+
+ <h4 id=kinds><span class=secno>3.3.3. </span>Kinds of elements</h4>
+
+ <p>Each element in HTML falls into zero or more categories that group
+ elements with similar characteristics together. This specification uses
+ the following categories:
+
+ <ul class=brief>
+ <li><a href="#metadata">Metadata elements</a>
+
+ <li><a href="#sectioning">Sectioning elements</a>
+
+ <li><a href="#block-level0">Block-level elements</a>
+
+ <li><a href="#strictly">Strictly inline-level content</a>
+
+ <li><a href="#structured">Structured inline-level elements</a>
+
+ <li><a href="#interactive1">Interactive elements</a>
+
+ <li><span>Form control elements</span>
+ </ul>
+ <!-- XXX check that all the above got a section defining them,
+ however briefly -->
+ <!-- XXX check that the element definitions also link to those
+ sections -->
+
+ <p>Some elements have unique requirements and do not fit into any
+ particular category.
+
+ <p>In addition, some elements represent various common concepts; for
+ example, some elements represent <span>paragraphs</span>.
+
+ <h5 id=block-level><span class=secno>3.3.3.1. </span><dfn
+ id=block-level0>Block-level elements</dfn></h5>
+
+ <p>Block-level elements are used for structural grouping of page content.
+
+ <p>There are several kinds of block-level elements:
+
+ <ul>
+ <li>Some can only contain other block-level elements: <code><a
+ href="#blockquote">blockquote</a></code>, <code><a
+ href="#section">section</a></code>, <code><a
+ href="#article">article</a></code>, <code><a
+ href="#header">header</a></code>.
+
+ <li>Some can only contain <a href="#inline-level0">inline-level
+ content</a>: <code><a href="#p">p</a></code>, <code><a
+ href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code>, <code><a
+ href="#address">address</a></code>.
+
+ <li>Some can contain either block-level elements or <a
+ href="#inline-level0">inline-level content</a> (but not both): <code><a
+ href="#nav">nav</a></code>, <code><a href="#aside">aside</a></code>,
+ <code><a href="#footer">footer</a></code>, <code><a
+ href="#div">div</a></code>.
+
+ <li>Finally, some have very specific content models: <code><a
+ href="#ul">ul</a></code>, <code><a href="#ol">ol</a></code>, <code><a
+ href="#dl">dl</a></code>, <code><a href="#table">table</a></code>,
+ <code><a href="#script0">script</a></code>.
+ </ul>
+
+ <p>There are also elements that seem to be block-level but aren't, such as
+ <code><a href="#body0">body</a></code>, <code><a href="#li">li</a></code>,
+ <code><a href="#dt">dt</a></code>, <code><a href="#dd">dd</a></code>, and
+ <code><a href="#td">td</a></code>. These elements are allowed only in
+ specific places, not simply anywhere that block-level elements are
+ allowed.
+
+ <p>Some block-level elements play multiple roles. For instance, the
+ <code><a href="#script0">script</a></code> elements is allowed inside
+ <code><a href="#head">head</a></code> elements and can also be used as <a
+ href="#inline-level0">inline-level content</a>. Similarly, the <code><a
+ href="#ul">ul</a></code>, <code><a href="#ol">ol</a></code>, <code><a
+ href="#dl">dl</a></code>, <code><a href="#table">table</a></code>, and
+ <code><a href="#blockquote">blockquote</a></code> elements play dual roles
+ as both block-level and inline-level elements.
+
+ <h5 id=inline-level><span class=secno>3.3.3.2. </span><dfn
+ id=inline-level0>Inline-level content</dfn></h5>
+
+ <p>Inline-level content consists of text and various elements to annotate
+ the text, as well as some <a href="#embedded0">embedded content</a> (such
+ as images or sound clips).
+
+ <p>Inline-level content comes in various types:
+
+ <dl>
+ <dt><dfn id=strictly>Strictly inline-level content</dfn>
+
+ <dd>Text, <a href="#embedded0">embedded content</a>, and elements that
+ annotate the text without introducing structural grouping. For example:
+ <code><a href="#a">a</a></code>, <code><a href="#meter">meter</a></code>,
+ <code><a href="#img">img</a></code>. Elements used in contexts allowing
+ only strictly inline-level content must not have any descendants that are
+ anything other than strictly inline-level content.
+
+ <dt><dfn id=structured>Structured inline-level elements</dfn>
+
+ <dd>Block-level elements that can also be used as inline-level content.
+ For example: <code><a href="#ol">ol</a></code>, <code><a
+ href="#blockquote">blockquote</a></code>, <code><a
+ href="#table">table</a></code>.
+ </dl>
+
+ <p>Some elements are defined to have as a content model <dfn
+ id=significant>significant inline content</dfn>. This means that at least
+ one descendant of the element must be <a href="#significant0">significant
+ text</a> or <a href="#embedded0">embedded content</a>.
+
+ <p>Unless an element's content model explicitly states that it must contain
+ <a href="#significant">significant inline content</a>, simply having no <a
+ href="#text-node" title="text node">text nodes</a> and no elements
+ satisfies an element whose content model is some kind of inline content.
+
+ <p><dfn id=significant0>Significant text</dfn>, for the purposes of
+ determining the presence of <a href="#significant">significant inline
+ content</a>, consists of any character other than those falling in the <a
+ href="http://unicode.org/Public/UNIDATA/UCD.html#General_Category_Values">Unicode
+ categories</a> Zs, Zl, Zp, Cc, and Cf. <a
+ href="#refsUNICODE">[UNICODE]</a>
+
+ <div class=example>
+ <p>The following three paragraphs are non-conforming because their content
+ model is not satisfied (they all count as empty).</p>
+
+ <pre>
+&lt;p&gt;&lt;/p&gt;
+&lt;p&gt;&lt;em&gt;&amp;#x00A0;&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;
+ &lt;ol&gt;
+ &lt;li&gt;&lt;/li&gt;
+ &lt;/ol&gt;
+&lt;/p&gt;
+</pre>
+ </div>
+
+ <p><dfn id=embedded0>Embedded content</dfn> consists of elements that
+ introduce content from other resources into the document, for example
+ <code><a href="#img">img</a></code>. Embedded content elements can have
+ <dfn id=fallback>fallback content</dfn>: content that is to be used when
+ the external resource cannot be used (e.g. because it is of an unsupported
+ format). The element definitions state what the fallback is, if any.
+
+ <h5 id=transparent><span class=secno>3.3.3.3. </span>Transparent content
+ models</h5>
+
+ <p>Some elements are described as <dfn id=transparent0>transparent</dfn>;
+ they have "transparent" as their content model. Some elements are
+ described as <dfn id=semi-transparent>semi-transparent</dfn>; this means
+ that part of their content model is "transparent" but that is not the only
+ part of the content model that must be satisfied.
+
+ <p>When a content model includes a part that is "transparent", those parts
+ must only contain content that would still be conformant if all
+ transparent and semi-transparent elements in the tree were replaced, in
+ their parent element, by the children in the "transparent" part of their
+ content model, retaining order.
+
+ <p>When a transparent or semi-transparent element has no parent, then the
+ part of its content model that is "transparent" must instead be treated as
+ zero or more <a href="#block-level0">block-level elements</a>, or <a
+ href="#inline-level0">inline-level content</a> (but not both).
+
+ <h5 id=determining><span class=secno>3.3.3.4. </span><dfn
+ id=determining0>Determining if a particular element contains block-level
+ elements or inline-level content</dfn></h5>
+
+ <p>Some elements are defined to have content models that allow either <a
+ href="#block-level0">block-level elements</a> or <a
+ href="#inline-level0">inline-level content</a>, but not both. For example,
+ the <code><a href="#aside">aside</a></code> and <code><a
+ href="#li">li</a></code> elements.
+
+ <p>To establish whether such an element is being used as a block-level
+ container or as an inline-level container, for example in order to
+ determine if a document conforms to these requirements, user agents must
+ look at the element's child nodes. If any of the child nodes are not
+ allowed in block-level contexts, then the element is being used for <a
+ href="#inline-level0">inline-level content</a>. If all the child nodes are
+ allowed in a block-level context, then the element is being used for <a
+ href="#block-level0">block-level elements</a>.
+
+ <p>Whenever this search would examine a <a
+ href="#transparent0">transparent</a> element, the element's own child
+ nodes must be examined instead, potentially recursing further if any of
+ those are themselves transparent.
+
+ <div class=example>
+ <p>For instance, in the following (non-conforming) XML fragment, the
+ <code><a href="#li">li</a></code> element is being used as an
+ inline-level element container, because the <code><a
+ href="#meta0">meta</a></code> element is not allowed in a block-level
+ context. (It doesn't matter, for the purposes of determining whether it
+ is an inline-level or block-level context, that the <code><a
+ href="#meta0">meta</a></code> element is not allowed in inline-level
+ contexts either.)</p>
+
+ <pre>&lt;ol&gt;
+ &lt;li&gt;
+ &lt;p&gt; Hello World &lt;/p&gt;
+ &lt;meta title="this is an invalid example"/&gt;
+ &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+ <p>In the following fragment, the <code><a href="#aside">aside</a></code>
+ element is being used as a block-level container, because even though all
+ the elements it contains could be considered inline-level elements, there
+ are no nodes that can only be considered inline-level.</p>
+
+ <pre>&lt;aside&gt;
+ &lt;ol&gt;
+ &lt;li&gt; ... &lt;/li&gt;
+ &lt;/ol&gt;
+ &lt;ul&gt;
+ &lt;li&gt; ... &lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/aside&gt;</pre>
+
+ <p>On the other hand, in the following similar fragment, the <code><a
+ href="#aside">aside</a></code> element is an inline-level container,
+ because the text ("Foo") can only be considered inline-level.</p>
+
+ <pre>&lt;aside&gt;
+ &lt;ol&gt;
+ &lt;li&gt; ... &lt;/li&gt;
+ &lt;/ol&gt;
+ Foo
+&lt;/aside&gt;</pre>
+ </div>
+
+ <h5 id=interactive0><span class=secno>3.3.3.5. </span><dfn
+ id=interactive1>Interactive elements</dfn></h5>
+ <!-- Don't change the above <dfn> or the text below without checking
+ all cross-references. Some of them refer specifically to the
+ activation behavior stuff. -->
+
+ <p class=big-issue>Parts of this section should eventually be moved to DOM3
+ Events.</p>
+ <!-- but see comment above -->
+ <!--
+TESTS:
+http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cp%20tabindex%3D1%3Etest%20%3Ca%20href%3D%22%22%3E%20%3Cem%3Etest%3C/em%3E%20%3C/a%3E%0A%3Cscript%3E%0A%20function%20test%20%28e%29%20%7B%20w%28e.type%20+%20%27%20on%20%27%20+%20e.target.tagName%20+%20%27%20through%20%27%20+%20e.currentTarget.tagName%29%3B%20%7D%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%3C/script%3E%0A
+http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Ca%20href%3Dhttp%3A//google.com/%20target%3Da%3EA%3C/a%3E%3Ca%20href%3Dhttp%3A//yahoo.com/%20target%3Db%3EB%3C/a%3E%3Cbr%3E%0A%3Ciframe%20name%3Da%3E%3C/iframe%3E%3Ciframe%20name%3Db%3E%3C/iframe%3E%0A%3Cscript%3E%0A%20var%20a%20%3D%20document.getElementsByTagName%28%27a%27%29%5B0%5D%3B%0A%20var%20b%20%3D%20document.getElementsByTagName%28%27a%27%29%5B1%5D%3B%0A%20a.appendChild%28b%29%3B%0A%3C/script%3E
+http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%20onsubmit%3D%22w%28%27onsubmit%27%29%22%3E%3Cem%3EA%3C/em%3E%3C/form%3E%0A%3Cscript%3E%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.attachEvent%28%27onsubmit%27%2C%20function%20%28%29%20%7B%20w%28%27submit%20fired%27%29%20%7D%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.fireEvent%28%27onsubmit%27%29%3B%0A%3C/script%3E
+http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%3EX%3C/form%3E%0A%3Cscript%3E%0Avar%20evt%20%3D%20document.createEvent%28%22Events%22%29%3B%0Aevt.initEvent%28%22submit%22%2C%20true%2C%20true%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.dispatchEvent%28evt%29%3B%0A%3C/script%3E
+-->
+
+ <p>Certain elements in HTML can be activated, for instance <code><a
+ href="#a">a</a></code> elements, <code>button</code> elements, or
+ <code>input</code> elements when their <code>type</code> attribute is set
+ to <code>radio</code>. Activation of those elements can happen in various
+ (UA-defined) ways, for instance via the mouse or keyboard.
+
+ <p>When activation is performed via some method other than clicking the
+ pointing device, the default action of the event that triggers the
+ activation must, instead of being activating the element directly, be to
+ <a href="#firing">fire a <code title="">click</code> event</a> on the same
+ element.
+
+ <p>The default action of this <code title=event-click>click</code> event,
+ or of the real <code title=event-click>click</code> event if the element
+ was activated by clicking a pointing device, must be to <span title="fire
+ a DOMActivate event">fire a further <code
+ title=event-DOMActivate>DOMActivate</code> event</span> at the same
+ element, whose own default action is to go through all the elements the
+ <code title=event-DOMActivate>DOMActivate</code> event bubbled through
+ (starting at the target node and going towards the <code>Document</code>
+ node), looking for an element with an <a href="#activation0">activation
+ behavior</a>; the first element, in reverse tree order, to have one, must
+ have its activation behavior executed.
+
+ <p class=note>The above doesn't happen for arbitrary synthetic events
+ dispatched by author script. However, the <code title=dom-click><a
+ href="#click">click()</a></code> method can be used to make it happen
+ programmatically.
+
+ <p>For certain form controls, this process is complicated further by <a
+ href="http://www.whatwg.org/specs/web-forms/current-work/#the-click">changes
+ that must happen around the click event</a>. <a href="#refsWF2">[WF2]</a></p>
+ <!-- XXX WF2: when this is merged into
+ this spec, update xrefs -->
+
+ <p class=note>Most interactive elements have content models that disallow
+ nesting interactive elements.</p>
+ <!--
+ <li><span>Form control elements</span></li> XXX
+-->
+
+ <h5 id=paragraphs><span class=secno>3.3.3.6. </span>Paragraphs</h5>
+
+ <p>A <dfn id=paragraph>paragraph</dfn> is typically a block of text with
+ one or more sentences that discuss a particular topic, as in typography,
+ but can also be used for more general thematic grouping. For instance, an
+ address is also a paragraph, as is a part of a form, a byline, or a stanza
+ in a poem.
+
+ <p>Paragraphs can be represented by several elements. The <code><a
+ href="#address">address</a></code> element always represents a paragraph
+ of contact information for its section, the <code><a
+ href="#aside">aside</a></code>, <code><a href="#nav">nav</a></code>,
+ <code><a href="#footer">footer</a></code>, <code><a
+ href="#li">li</a></code>, and <code><a href="#dd">dd</a></code> elements
+ represent paragraphs with various specific semantics when they are <a
+ href="#determining0" title="Determining if a particular element contains
+ block-level elements or inline-level content">used as inline-level content
+ containers</a>, the <code><a href="#figure">figure</a></code> element
+ represents a paragraph in the form of <a href="#embedded0">embedded
+ content</a>, and the <code><a href="#p">p</a></code> element represents
+ all the other kinds of paragraphs, for which there are no dedicated
+ elements.
+
+ <h3 id=global><span class=secno>3.4. </span>Global attributes</h3>
+
+ <p>The following attributes are common to and may be specified on all <a
+ href="#html-elements">HTML elements</a> (even those not defined in this
+ specification):
+
+ <dl class=element>
+ <dt>Global attributes:
+
+ <dd><code title=attr-class><a href="#class">class</a></code>
+
+ <dd><code title=attr-contenteditable><a
+ href="#contenteditable0">contenteditable</a></code>
+
+ <dd><code title=attr-contextmenu><a
+ href="#contextmenu">contextmenu</a></code>
+
+ <dd><code title=attr-dir><a href="#dir">dir</a></code>
+
+ <dd><code title=attr-draggable><a href="#draggable">draggable</a></code>
+
+ <dd><code title=attr-id><a href="#id">id</a></code>
+
+ <dd><code title=attr-irrelevant><a
+ href="#irrelevant">irrelevant</a></code>
+
+ <dd><code title=attr-lang><a href="#lang">lang</a></code>
+
+ <dd><code title=attr-tabindex><a href="#tabindex">tabindex</a></code>
+
+ <dd><code title=attr-title><a href="#title">title</a></code>
+ </dl>
+
+ <p>In addition, the following <a href="#event2">event handler content
+ attributes</a> may be specified on any <span>HTML element</span>:
+
+ <ul class=brief>
+ <li><code title=handler-onabort><a href="#onabort">onabort</a></code>
+
+ <li><code title=handler-onbeforeunload><a
+ href="#onbeforeunload">onbeforeunload</a></code>
+
+ <li><code title=handler-onblur><a href="#onblur">onblur</a></code>
+
+ <li><code title=handler-onchange><a href="#onchange">onchange</a></code>
+
+ <li><code title=handler-onclick><a href="#onclick">onclick</a></code>
+
+ <li><code title=handler-oncontextmenu><a
+ href="#oncontextmenu">oncontextmenu</a></code>
+
+ <li><code title=handler-ondblclick><a
+ href="#ondblclick">ondblclick</a></code>
+
+ <li><code title=handler-ondrag><a href="#ondrag">ondrag</a></code>
+
+ <li><code title=handler-ondragend><a
+ href="#ondragend">ondragend</a></code>
+
+ <li><code title=handler-ondragenter><a
+ href="#ondragenter">ondragenter</a></code>
+
+ <li><code title=handler-ondragleave><a
+ href="#ondragleave">ondragleave</a></code>
+
+ <li><code title=handler-ondragover><a
+ href="#ondragover">ondragover</a></code>
+
+ <li><code title=handler-ondragstart><a
+ href="#ondragstart">ondragstart</a></code>
+
+ <li><code title=handler-ondrop><a href="#ondrop">ondrop</a></code>
+
+ <li><code title=handler-onerror><a href="#onerror">onerror</a></code>
+
+ <li><code title=handler-onfocus><a href="#onfocus">onfocus</a></code>
+
+ <li><code title=handler-onkeydown><a
+ href="#onkeydown">onkeydown</a></code>
+
+ <li><code title=handler-onkeypress><a
+ href="#onkeypress">onkeypress</a></code>
+
+ <li><code title=handler-onkeyup><a href="#onkeyup">onkeyup</a></code>
+
+ <li><code title=handler-onload><a href="#onload">onload</a></code>
+
+ <li><code title=handler-onmessage><a
+ href="#onmessage">onmessage</a></code>
+
+ <li><code title=handler-onmousedown><a
+ href="#onmousedown">onmousedown</a></code>
+
+ <li><code title=handler-onmousemove><a
+ href="#onmousemove">onmousemove</a></code>
+
+ <li><code title=handler-onmouseout><a
+ href="#onmouseout">onmouseout</a></code>
+
+ <li><code title=handler-onmouseover><a
+ href="#onmouseover">onmouseover</a></code>
+
+ <li><code title=handler-onmouseup><a
+ href="#onmouseup">onmouseup</a></code>
+
+ <li><code title=handler-onmousewheel><a
+ href="#onmousewheel">onmousewheel</a></code>
+
+ <li><code title=handler-onresize><a href="#onresize">onresize</a></code>
+
+ <li><code title=handler-onscroll><a href="#onscroll">onscroll</a></code>
+
+ <li><code title=handler-onselect><a href="#onselect">onselect</a></code>
+
+ <li><code title=handler-onsubmit><a href="#onsubmit">onsubmit</a></code>
+
+ <li><code title=handler-onunload><a href="#onunload">onunload</a></code>
+ </ul>
+
+ <h4 id=the-id><span class=secno>3.4.1. </span>The <dfn id=id
+ title=attr-id><code>id</code></dfn> attribute</h4>
+
+ <p>The <code title=attr-id><a href="#id">id</a></code> attribute represents
+ its element's unique identifier. The value must be unique in the subtree
+ within which the element finds itself and must contain at least one
+ character. The value must not contain any <a href="#space" 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>If the value is not the empty string, user agents must associate the
+ element with the given value (exactly, including any space characters) for
+ the purposes of ID matching within the subtree the element finds itself
+ (e.g. for selectors in CSS or for the <code>getElementById()</code> method
+ in the DOM).
+
+ <p>Identifiers are opaque strings. Particular meanings should not be
+ derived from the value of the <code title=attr-id><a
+ href="#id">id</a></code> attribute.
+
+ <p>This specification doesn't preclude an element having multiple IDs, if
+ other mechanisms (e.g. DOM Core methods) can set an element's ID in a way
+ that doesn't conflict with the <code title=attr-id><a
+ href="#id">id</a></code> attribute.
+
+ <p>The <dfn id=id0 title=dom-id><code>id</code></dfn> DOM attribute must <a
+ href="#reflect">reflect</a> the <code title=attr-id><a
+ href="#id">id</a></code> content attribute.
+
+ <h4 id=the-title><span class=secno>3.4.2. </span>The <dfn id=title
+ title=attr-title><code>title</code></dfn> attribute</h4>
+
+ <p>The <code title=attr-title><a href="#title">title</a></code> attribute
+ represents 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>If this attribute is omitted from an element, then it implies that the
+ <code title=attr-title><a href="#title">title</a></code> attribute of the
+ nearest ancestor with a <code title=attr-title><a
+ href="#title">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>If the <code title=attr-title><a href="#title">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>Some elements, such as <code><a href="#link">link</a></code> and
+ <code><a href="#dfn">dfn</a></code>, define additional semantics for the
+ <code title=attr-title><a href="#title">title</a></code> attribute beyond
+ the semantics described above.
+
+ <p>The <dfn id=title0 title=dom-title><code>title</code></dfn> DOM
+ attribute must <a href="#reflect">reflect</a> the <code
+ title=attr-title><a href="#title">title</a></code> content attribute.
+
+ <h4 id=the-lang><span class=secno>3.4.3. </span>The <dfn id=lang
+ title=attr-lang><code>lang</code></dfn> (HTML only) and <dfn id=xmllang
+ title=attr-xml-lang><code>xml:lang</code></dfn> (XML only) attributes</h4>
+
+ <p>The <code title=attr-lang><a href="#lang">lang</a></code> attribute
+ 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 RFC 3066 language code, or the empty string. <a
+ href="#refsRFC3066">[RFC3066]</a>
+
+ <p>The <code title=attr-xml-lang><a href="#xmllang">xml:lang</a></code>
+ attribute is defined in XML. <a href="#refsXML">[XML]</a>
+
+ <p>If these attributes are omitted from an element, then it implies that
+ the language of this element is the same as the language of the parent
+ element. Setting the attribute to the empty string indicates that the
+ primary language is unknown.
+
+ <p>The <code title=attr-lang><a href="#lang">lang</a></code> attribute may
+ only be used on elements of <a href="#html-">HTML documents</a>. Authors
+ must not use the <code title=attr-lang><a href="#lang">lang</a></code>
+ attribute in <a href="#xml-documents">XML documents</a>.
+
+ <p>The <code title=attr-xml-lang><a href="#xmllang">xml:lang</a></code>
+ attribute may only be used on elements of <a href="#xml-documents">XML
+ documents</a>. Authors must not use the <code title=attr-xml-lang><a
+ href="#xmllang">xml:lang</a></code> attribute in <a href="#html-">HTML
+ documents</a>.</p>
+ <!-- technically this
+ is redundant with the XML spec -->
+
+ <p>To determine the language of a node, user agents must look at the
+ nearest ancestor element (including the element itself if the node is an
+ element) that has a <code title=attr-lang><a href="#lang">lang</a></code>
+ or <code title=attr-xml-lang><a href="#xmllang">xml:lang</a></code>
+ attribute set. That specifies the language of the node.
+
+ <p>If both the <code title=attr-xml-lang><a
+ href="#xmllang">xml:lang</a></code> attribute and the <code
+ title=attr-lang><a href="#lang">lang</a></code> attribute are set on an
+ element, user agents must use the <code title=attr-xml-lang><a
+ href="#xmllang">xml:lang</a></code> attribute, and the <code
+ title=attr-lang><a href="#lang">lang</a></code> attribute must be <a
+ href="#ignored" title=ignore>ignored</a> for the purposes of determining
+ the element's language.
+
+ <p>If no explicit language is given for the <a href="#root-element">root
+ element</a>, then language information from a higher-level protocol (such
+ as HTTP), if any, must be used as the final fallback language. In the
+ absence of any language information, the default value is unknown (the
+ empty string).
+
+ <p>User agents may use the element's language to determine proper
+ processing or rendering (e.g. in the selection of appropriate fonts or
+ pronounciations, or for dictionary selection). <!--User
+ agents must not use the element's language to determine text
+ directionality. (commented out because text directionality is a
+ rendering-level concern.)-->
+
+ <p>The <dfn id=lang0 title=dom-lang><code>lang</code></dfn> DOM attribute
+ must <a href="#reflect">reflect</a> the <code title=attr-lang><a
+ href="#lang">lang</a></code> content attribute.
+
+ <h4 id=the-dir><span class=secno>3.4.4. </span>The <dfn id=dir
+ title=attr-dir><code>dir</code></dfn> attribute</h4>
+
+ <p>The <code title=attr-dir><a href="#dir">dir</a></code> attribute
+ specifies the element's text directionality. The attribute is an <a
+ href="#enumerated">enumerated attribute</a> with the keyword <code
+ title="">ltr</code> mapping to the state <em>ltr</em>, and the keyword
+ <code title="">rtl</code> mapping to the state <em>rtl</em>. The attribute
+ has no defaults.
+
+ <p>If the attribute has the state <em>ltr</em>, the element's
+ directionality is left-to-right. If the attribute has the state
+ <em>rtl</em>, the element's directionality is right-to-left. Otherwise,
+ the element's directionality is the same as its parent.
+
+ <p>The processing of this attribute depends on the presentation layer. For
+ example, CSS 2.1 defines a mapping from this attribute to the CSS
+ 'direction' and 'unicode-bidi' properties, and defines rendering in terms
+ of those properties.
+
+ <p>The <dfn id=dir0 title=dom-dir><code>dir</code></dfn> DOM attribute on
+ an element must <a href="#reflect">reflect</a> the <code title=attr-dir><a
+ href="#dir">dir</a></code> content attribute of that element, <a
+ href="#limited">limited to only known values</a>.
+
+ <p>The <dfn id=dir1 title=dom-document-dir><code>dir</code></dfn> DOM
+ attribute on <code><a href="#htmldocument">HTMLDocument</a></code> objects
+ must <a href="#reflect">reflect</a> the <code title=attr-dir><a
+ href="#dir">dir</a></code> content attribute of <a href="#the-html0">the
+ <code>html</code> element</a>, if any, <a href="#limited">limited to only
+ known values</a>. If there is no such element, then the attribute must
+ return the empty string and do nothing on setting.
+
+ <h4 id=classes><span class=secno>3.4.5. </span>The <dfn id=class
+ title=attr-class><code>class</code></dfn> attribute</h4>
+
+ <p>Every <span>HTML element</span> may have a <code title=attr-class><a
+ href="#class">class</a></code> attribute specified.
+
+ <p>The attribute, if specified, must have a value that is an <a
+ href="#unordered">unordered set of space-separated tokens</a> representing
+ the various classes that the element belongs to.
+
+ <p>The classes that an HTML element has assigned to it consists of all the
+ classes returned when the value of the <code title=attr-class><a
+ href="#class">class</a></code> attribute is <a href="#split" title="split
+ a string on spaces">split on spaces</a>.
+
+ <p class=note>Assigning classes to an element affects class matching in
+ selectors in CSS, the <code title=dom-document-getElementsByClassName><a
+ href="#getelementsbyclassname">getElementsByClassName()</a></code> method
+ in the DOM, and other such features.
+
+ <p>Authors may use any value in the <code title=attr-class><a
+ href="#class">class</a></code> attribute, but are encouraged to use the
+ values that describe the nature of the content, rather than values that
+ describe the desired presentation of the content.
+
+ <p>The <dfn id=classname title=dom-className><code>className</code></dfn>
+ and <dfn id=classlist title=dom-classList><code>classList</code></dfn> DOM
+ attributes must both <a href="#reflect">reflect</a> the <code
+ title=attr-class><a href="#class">class</a></code> content attribute.
+
+ <h4 id=the-irrelevant><span class=secno>3.4.6. </span>The <dfn
+ id=irrelevant title=attr-irrelevant><code>irrelevant</code></dfn>
+ attribute</h4>
+
+ <p>All elements may have the <code title=attr-irrelevant><a
+ href="#irrelevant">irrelevant</a></code> content attribute set. The <code
+ title=attr-irrelevant><a href="#irrelevant">irrelevant</a></code>
+ attribute is a <a href="#boolean0">boolean attribute</a>. When specified
+ on an element, it indicates that the element is not yet, or is no longer,
+ relevant. User agents should not render elements that have the <code
+ title=attr-irrelevant><a href="#irrelevant">irrelevant</a></code>
+ attribute specified.
+
+ <div class=example>
+ <p>In the following skeletal example, the attribute is used to hide the a
+ Web game until the user logs in:</p>
+
+ <pre> &lt;h1>The Example Game&lt;/h1>
+ &lt;section id="login">
+ &lt;h2>Login&lt;/h2>
+ &lt;form>
+ ...
+ &lt;!-- calls login() once the user's credentials have been checked -->
+ &lt;/form>
+ &lt;script>
+ function login() {
+ // switch screens
+ document.getElementById('login').irrelevant = true;
+ document.getElementById('game').irrelevant = false;
+ }
+ &lt;/script>
+ &lt;/section>
+ &lt;section id="game">
+ ...
+ &lt;/section></pre>
+
+ <p>In the following example, an image acts as a surrogate for an video.
+ When the image is clicked, it tries to load the video (and disables the
+ playback button). If the load succeeds enough that a frame of data has
+ been downloaded, the <code><a href="#video1">video</a></code> element
+ hides the surrogate image and shows the video instead, along with its
+ controls, and turns on autoplay (so that the video will commence playback
+ as soon as enough of it is loaded). If the load fails for any reason, the
+ video and the surrogate frame are both hidden (by hiding the paragraph
+ element containing them both), and the following paragraph is shown
+ instead, with its unhelpful error message and potentially helpful link to
+ download the video directly.</p>
+
+ <p>In legacy user agents, the surrogate image would show (though clicking
+ it would have no effect) and the link to the video would be present
+ (allowing the video to be viewed in another application).</p>
+
+ <pre> &lt;p>
+ &lt;input type="image" src="frame.png" alt="Play Video"
+ onclick=" nextSibling.load();
+ disabled = true;
+ return false;"
+ >&lt;video src="video.ogg" controls="" irrelevant=""
+ onloadedfirstframe="
+ irrelevant = false;
+ previousSibling.irrelevant = true;
+ autoplay = true"
+ onerror=" parentNode.irrelevant = true;
+ parentNode.nextSibling.irrelevant = false">
+ &lt;/video>
+ &lt;/p>&lt;p irrelevant="">
+ Playback unavailable.
+ &lt;a href="video.ogg">Download Video&lt;/a>
+ &lt;/p></pre>
+ </div>
+
+ <p>The <code title=attr-irrelevant><a
+ href="#irrelevant">irrelevant</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-irrelevant><a
+ href="#irrelevant">irrelevant</a></code> to hide panels in a tabbed
+ dialog, because the tabbed interface is merely a kind of overflow
+ presentation &mdash; showing all the form controls in one big page with a
+ scrollbar would be equivalent, and no less correct.
+
+ <p>Elements in a section hidden by the <code title=attr-irrelevant><a
+ href="#irrelevant">irrelevant</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>The <dfn id=irrelevant0
+ title=dom-irrelevant><code>irrelevant</code></dfn> DOM attribute must <a
+ href="#reflect">reflect</a> the content attribute of the same name.
+
+ <h3 id=interaction><span class=secno>3.5. </span><dfn
+ id=interaction0>Interaction</dfn></h3>
+ <!--
+ELEMENT
+ attribute long <span title="dom-tabindex">tabIndex</span>;
+ void <span title="dom-click">click</span>();
+ void <span title="dom-focus">focus</span>();
+ void <span title="dom-blur">blur</span>();
+ void <span title="dom-scrollIntoView">scrollIntoView</span>();
+ void <span title="dom-scrollIntoView">scrollIntoView</span>(in boolean top);
+
+DOCUMENT
+ readonly attribute <span>Element</span> <span title="dom-document-activeElement">activeElement</span>;
+ readonly attribute boolean <span title="dom-document-hasFocus">hasFocus</span>;
+-->
+
+ <h4 id=activation><span class=secno>3.5.1. </span>Activation</h4>
+
+ <p>The <dfn id=click title=dom-click>click()</dfn> method must <a
+ href="#firing">fire a <code>click</code> event</a> at the element, whose
+ default action is the <span title="fire a DOMActivate event">firing of a
+ further <code title=event-DOMActivate>DOMActivate</code> event</span> at
+ the same element, whose own default action is to go through all the
+ elements the <code title=event-DOMActivate>DOMActivate</code> event
+ bubbled through (starting at the target node and going towards the
+ <code>Document</code> node), looking for an element with an <a
+ href="#activation0">activation behavior</a>; the first element, in reverse
+ tree order, to have one, must have its activation behavior executed.
+
+ <h4 id=focus><span class=secno>3.5.2. </span>Focus</h4>
+
+ <p>When an element is <em>focused</em>, key events received by the document
+ must be targeted at that element. There is always an element focused; in
+ the absence of other elements being focused, the document's root element
+ is it.
+
+ <p>Which element within a document currently has focus is independent of
+ whether or not the document itself has the <em>system focus</em>.
+
+ <p>Some focusable elements might take part in <em>sequential focus
+ navigation</em>.
+
+ <h5 id=focus-management><span class=secno>3.5.2.1. </span>Focus management</h5>
+
+ <p>The <dfn id=focus0 title=dom-focus><code>focus()</code></dfn> and <dfn
+ id=blur title=dom-blur><code>blur()</code></dfn> methods must focus and
+ unfocus the element respectively, if the element is focusable.
+
+ <p>Some elements, most notably <code><a href="#area">area</a></code>, can
+ correspond to more than one distinct focusable area. When such an element
+ is focused using the <code title=dom-focus><a
+ href="#focus0">focus()</a></code> method, the first such region in tree
+ order is the one that must be focused.
+
+ <p class=big-issue>Well that clearly needs more.</p>
+ <!-- XXX e.g. should the click, focus, blur methods be recursible? -->
+
+ <p>The <dfn id=activeelement
+ title=dom-document-activeElement><code>activeElement</code></dfn>
+ attribute must return the element in the document that has focus. If no
+ element specifically has focus, this must return <a href="#the-body0">the
+ <code>body</code> element</a>.
+
+ <p>The <dfn id=hasfocus
+ title=dom-document-hasFocus><code>hasFocus</code></dfn> attribute must
+ return true if the document, one of its nested <a href="#browsing0"
+ title="browsing context">browsing contexts</a>, or any element in the
+ document or its browsing contexts currently has the system focus.
+
+ <h5 id=sequential><span class=secno>3.5.2.2. </span>Sequential focus
+ navigation</h5>
+
+ <p class=issue>This section on the <code>tabindex</code> attribute needs to
+ be checked for backwards-compatibility.
+
+ <p>The <dfn id=tabindex title=attr-tabindex><code>tabindex</code></dfn>
+ attribute specifies the relative order of elements 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.
+
+ <p>The <code title=attr-tabindex><a href="#tabindex">tabindex</a></code>
+ attribute, if specified, must have a value that is a <a
+ href="#valid0">valid integer</a>.
+
+ <p>If the attribute is specified, it must be parsed using the <a
+ href="#rules0">rules for parsing integers</a>. If parsing the value
+ returns an error, the attribute is ignored for the purposes of focus
+ management (as if it wasn't specified).
+
+ <p>A positive integer or zero specifies the index of the element in the
+ current scope's tab order. Elements with the same index are sorted in <a
+ href="#tree-order">tree order</a> for the purposes of tabbing.
+
+ <p id=negative-tabindex>A negative integer specifies that the element
+ should be removed from the tab order. If the element does normally take
+ focus, it may still be focused using other means (e.g. it could be focused
+ by a click).
+
+ <p>If the attribute is absent (or invalid), then the user agent must treat
+ the element as if it had the value 0 or the value -1, based on platform
+ conventions.
+
+ <p class=example>For example, a user agent might default
+ <code>textarea</code> elements to 0, and <code>button</code> elements to
+ -1, making text fields part of the tabbing cycle but buttons not.
+
+ <p>When an element that does not normally take focus (i.e. whose default
+ value would be -1) has the <code title=attr-tabindex><a
+ href="#tabindex">tabindex</a></code> attribute specified with a positive
+ value, then it should be added to the tab order and should be made
+ focusable. When focused, the element matches the CSS <code>:focus</code>
+ pseudo-class and key events are dispatched on that element in response to
+ keyboard input.
+
+ <p>The <dfn id=tabindex0 title=dom-tabIndex><code>tabIndex</code></dfn> DOM
+ attribute reflects the value of the <code title=attr-tabIndex><a
+ href="#tabindex">tabIndex</a></code> content attribute. If the attribute
+ is not present (or has an invalid value) then the DOM attribute must
+ return the UA's default value for that element, which will be either 0
+ (for elements in the tab order) or -1 (for elements not in the tab order).</p>
+ <!--XXX
+ <h5>The <dfn><code>DocumentFocus</code></dfn> interface</h5>
+
+ <p>The <code>DocumentFocus</code> interface contains methods for
+ moving focus around the document. It can be obtained from objects
+ that implement the <code>Document</code> interface using
+ binding-specific casting methods.</p>
+
+ <pre class="idl">interface <dfn>DocumentFocus</dfn> {
+ void moveFocusForward();
+ void moveFocusBackward();
+ void moveFocusUp();
+ void moveFocusRight();
+ void moveFocusDown();
+ void moveFocusLeft();
+};</pre>
+
+ <p>The <dfn><code>currentFocus</code></dfn> attribute returns the
+ element to which key events will be sent when the document receives
+ key events.</p>
+
+ <p>The <dfn><code>moveFocusForward</code></dfn> method uses the
+ <code>'nav-index'</code> property and the <code>tabindex</code>
+ attribute to find the next focusable element and focuses it.</p>
+
+ <p>The <dfn><code>moveFocusBackward</code></dfn> method uses the
+ <code>'nav-index'</code> property and the <code>tabindex</code>
+ attribute to find the previous focusable element and focuses
+ it.</p>
+
+ <p>The <dfn><code>moveFocusUp</code></dfn> method uses the
+ <code>'nav-up'</code> property and the <code>tabindex</code>
+ attribute to find an appropriate focusable element and focuses
+ it.</p>
+
+ <p>In a similar manner, the <dfn><code>moveFocusRight</code></dfn>,
+ <dfn><code>moveFocusDown</code></dfn>, and
+ <dfn><code>moveFocusLeft</code></dfn> methods use the
+ <code>'nav-right'</code>, <code>'nav-down'</code>, and
+ <code>'nav-left'</code> properties (respectively), and the
+ <code>tabindex</code> attribute, to find an appropriate focusable
+ element and focus it.</p>
+
+ <p>The <code>'nav-index'</code>, <code>'nav-up'</code>,
+ <code>'nav-right'</code>, <code>'nav-down'</code>, and
+ <code>'nav-left'</code> properties are defined in <a
+ href="#refsCSS3UI">[CSS3UI]</a>.</p>
+
+Other things to look at are IE's focus APIs (document.activeElement,
+document.hasFocus, HTMLElement.setActive(), onBeforeActivate,
+onActivate, onBeforeDeactivate, onDeactivate, document.hasFocus):
+ 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/properties/activeelement.asp
+ http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setactive.asp
+ http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
+ http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/focus.asp
+-->
+
+ <h4 id=scrolling><span class=secno>3.5.3. </span>Scrolling elements into
+ view</h4>
+
+ <p>The <dfn id=scrollintoview
+ title=dom-scrollIntoView><code>scrollIntoView([<var
+ title="">top</var>])</code></dfn> method, when called, must cause the
+ element on which the method was called to have the attention of the user
+ called to it.
+
+ <p class=note>In a speech browser, this could happen by having the current
+ playback position move to the start of the given element.
+
+ <p>In visual user agents, if the argument is present and has the value
+ false, the user agent should scroll the element into view such that both
+ the bottom and the top of the element are in the viewport, with the bottom
+ of the element aligned with the bottom of the viewport. If it isn't
+ possible to show the entire element in that way, or if the argument is
+ omitted or is true, then the user agent must instead simply align the top
+ of the element with the top of the viewport.
+
+ <p>Non-visual user agents may ignore the argument, or may treat it in some
+ media-specific manner most useful to the user.</p>
+ <!-- XXX maybe this should move to CSSOM -->
+
+ <h3 id=the-root><span class=secno>3.6. </span>The root element</h3>
+
+ <h4 id=the-html><span class=secno>3.6.1. </span>The <dfn
+ id=html><code>html</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the root element of a document.
+
+ <dd>Wherever a subdocument fragment is allowed in a compound document.
+
+ <dt>Content model:
+
+ <dd>A <code><a href="#head">head</a></code> element followed by a <code><a
+ href="#body0">body</a></code> element.</dd>
+ <!--XXX
+Steven Pemberton was as always, a remarkable speaker, but his answer
+to my question leaves me a very bad taste. Basically, I asked him why
+XHTML2 preserves the useless head and body element. The answer was in
+substance "because this is a compromise". Ah. So XHTML2 preserves two
+useless elements that add potential dangers to the interpretation and
+styling of documents because it's a compromise. Getting rid of head
+would allow to attach directly the document's metadata to the root
+element of the document, making much more sense than a head element.
+Having a head element also preserves the ridiculous
+engraved-in-the-marble "head contents are not rendered". Body is
+dangerous because it's another box between the document and the
+contents; you all have written a blog template with a <div
+class="main"> or <div class="content">. Why do we also need a body?
+ - http://www.glazman.org/weblog/dotclear/index.php?2005/05/27/1055-adam-2
+-->
+
+ <dt>Element-specific attributes:
+
+ <dd>None (but see prose).
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#html">html</a></code> element represents the root of
+ an HTML document.
+
+ <p>Though it has absolutely no effect and no meaning, the <code><a
+ href="#html">html</a></code> element, in <a href="#html-">HTML
+ documents</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="#xml-documents">XML documents</a>.
+
+ <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-0">HTML parser</a>, the attribute ends up in the null
+ namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>" namespace
+ like namespace declaration attributes in XML do.
+
+ <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 the null namespace specified.
+
+ <h3 id=document><span class=secno>3.7. </span>Document metadata</h3>
+
+ <p>Document metadata is represented by <dfn id=metadata>metadata
+ elements</dfn> in the document's <code><a href="#head">head</a></code>
+ element.
+
+ <h4 id=the-head><span class=secno>3.7.1. </span>The <dfn
+ id=head><code>head</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the first element in an <code><a href="#html">html</a></code>
+ element.
+
+ <dt>Content model:
+
+ <dd>In any order unless otherwise specified: optionally one <code><a
+ href="#meta0">meta</a></code> element with a <code
+ title=attr-meta-charset><a href="#charset0">charset</a></code> attribute,
+ exactly one <code><a href="#title1">title</a></code> element, optionally
+ one <code><a href="#base">base</a></code> element, and zero or more other
+ <a href="#metadata">metadata elements</a> (in particular, <code><a
+ href="#link">link</a></code>, <code><a href="#meta0">meta</a></code>,
+ <code><a href="#style">style</a></code>, and <code><a
+ href="#script0">script</a></code>).
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#head">head</a></code> element collects the
+ document's metadata.
+
+ <h4 id=the-title0><span class=secno>3.7.2. </span>The <dfn
+ id=title1><code>title</code></dfn> element</h4>
+
+ <p><a href="#metadata" title="metadata elements">Metadata element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>In a <code><a href="#head">head</a></code> element containing no other
+ <code><a href="#title1">title</a></code> elements.
+
+ <dt>Content model:
+
+ <dd>Text (for details, see prose).
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#title1">title</a></code> element represents the
+ document's title or name. Authors should use titles that identify their
+ documents even when they are used out of context, for example in a user's
+ history or bookmarks, or in search results. The document's title is often
+ different from its first header, since the first header does not have to
+ stand alone when taken out of context.
+
+ <div class=example>
+ <p>Here are some examples of appropriate titles, contrasted with the
+ top-level headers that might be used on those same pages.</p>
+
+ <pre> &lt;title>Introduction to The Mating Rituals of Bees&lt;/title>
+ ...
+ &lt;h1>Introduction&lt;/h1>
+ &lt;p>This companion guide to the highly successful
+ &lt;cite>Introduction to Medieval Bee-Keeping&lt;/cite> book is...
+</pre>
+
+ <p>The next page might be a part of the same site. Note how the title
+ describes the subject matter unambiguously, while the first header
+ assumes the reader knowns what the context is and therefore won't wonder
+ if the dances are Salsa or Waltz:</p>
+
+ <pre> &lt;title>Dances used during bee mating rituals&lt;/title>
+ ...
+ &lt;h1>The Dances&lt;/h1></pre>
+ </div>
+
+ <p>The <code><a href="#title1">title</a></code> element must not contain
+ any elements.
+
+ <p>The string to use as the document's title is given by the <code
+ title=dom-document-title><a
+ href="#document.title">document.title</a></code> DOM attribute. User
+ agents should use the document's title when referring to the document in
+ their user interface.
+
+ <h4 id=the-base><span class=secno>3.7.3. </span>The <dfn
+ id=base><code>base</code></dfn> element</h4>
+
+ <p><a href="#metadata" title="metadata elements">Metadata element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>In a <code><a href="#head">head</a></code> element, after the <code><a
+ href="#meta0">meta</a></code> element with the <code
+ title=attr-meta-charset><a href="#charset0">charset</a></code> attribute,
+ if any, but before any other elements.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-base-href><a href="#href">href</a></code>
+
+ <dd><code title=attr-base-target><a href="#target">target</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlbaseelement>HTMLBaseElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#href0" title=dom-base-href>href</a>;
+ attribute DOMString <a href="#target0" title=dom-base-target>target</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#base">base</a></code> element allows authors to
+ specify the document's base URI for the purposes of resolving relative
+ URIs, and the name of the default <a href="#browsing0">browsing
+ context</a> for the purposes of <a href="#following0">following
+ hyperlinks</a>.
+
+ <p>There must be no more than one <code><a href="#base">base</a></code>
+ element per document.
+
+ <p>The <dfn id=href title=attr-base-href><code>href</code></dfn> content
+ attribute, if specified, must contain a URI (or IRI).
+
+ <p>User agents must use the value of the <code
+ title=att-base-href>href</code> attribute of the first <code><a
+ href="#base">base</a></code> element that is both a child of <a
+ href="#the-head0">the <code>head</code> element</a> and has an <code
+ title=att-base-href>href</code> attribute, if there is such an element, as
+ the document entity's base URI for the purposes of section 5.1.1 of RFC
+ 2396 ("Establishing a Base URI": "Base URI within Document Content"). This
+ base URI from RFC 2396 is referred to by the algorithm given in XML Base,
+ which <a href="#xmlBase">is a normative part of this specification</a>. <a
+ href="#refsRFC2396">[RFC2396]</a>
+
+ <p>If the base URI given by this attribute is a relative URI, it must be
+ resolved relative to the higher-level base URIs (i.e. the base URI from
+ the encapsulating entity or the URI used to retrieve the entity) to obtain
+ an absolute base URI. All <code title=attr-xml-base>xml:base</code>
+ attributes must be ignored when resolving relative URIs in this <code
+ title=attr-base-href><a href="#href">href</a></code> attribute.
+
+ <p class=note>If there are multiple <code><a href="#base">base</a></code>
+ elements with <code title=att-base-href>href</code> attributes, all but
+ the first are ignored.
+
+ <p>The <dfn id=target title=attr-base-target><code>target</code></dfn>
+ attribute, if specified, must contain a <a href="#valid8">valid browsing
+ context name</a>. User agents use this name when <a
+ href="#following0">following hyperlinks</a>.
+
+ <p>The <dfn id=href0 title=dom-base-href><code>href</code></dfn> and <dfn
+ id=target0 title=dom-base-target><code>target</code></dfn> DOM attributes
+ must <a href="#reflect">reflect</a> the content attributes of the same
+ name.
+
+ <p class=note>Pages with multiple <code><a href="#base">base</a></code>
+ elements have all but their first <code><a href="#base">base</a></code>
+ element with an <code title=attr-base-href><a href="#href">href</a></code>
+ attribute ignored for the purposes of URI resolution, and all but their
+ first <code><a href="#base">base</a></code> element with a <code
+ title=attr-base-target><a href="#target">target</a></code> attribute
+ ignored for the purposes of default browsing context name resolution.</p>
+ <!-- XXX the former is for compat with IE7. The latter is not
+ actually exactly compatible with anything. We'll see if it breaks
+ anything. -->
+
+ <h4 id=the-link><span class=secno>3.7.4. </span>The <dfn
+ id=link><code>link</code></dfn> element</h4>
+
+ <p><a href="#metadata" title="metadata elements">Metadata element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>In a <code><a href="#head">head</a></code> element.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-link-href><a href="#href1">href</a></code> (required)
+
+ <dd><code title=attr-link-rel><a href="#rel">rel</a></code> (required)
+
+ <dd><code title=attr-link-media><a href="#media0">media</a></code>
+
+ <dd><code title=attr-link-hreflang><a href="#hreflang">hreflang</a></code>
+
+ <dd><code title=attr-link-type><a href="#type">type</a></code>
+
+ <dd>Also, the <code title=attr-link-title><a
+ href="#title2">title</a></code> attribute has special semantics on this
+ element.
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmllinkelement>HTMLLinkElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute boolean <a href="#disabled" title=dom-link-disabled>disabled</a>;
+ attribute DOMString <a href="#href2" title=dom-link-href>href</a>;
+ attribute DOMString <a href="#rel0" title=dom-link-rel>rel</a>;
+ readonly attribute DOMTokenList <a href="#rellist" title=dom-link-relList>relList</a>;
+ attribute DOMString <a href="#media1" title=dom-link-media>media</a>;
+ attribute DOMString <a href="#hreflang0" title=dom-link-hreflang>hreflang</a>;
+ attribute DOMString <a href="#type0" title=dom-link-type>type</a>;
+};</pre>
+
+ <p>The <code>LinkStyle</code> interface must also be implemented by this
+ element, the <a href="#styling0">styling processing model</a> defines
+ how. <a href="#refsCSSOM">[CSSOM]</a></p>
+ </dl>
+
+ <p>The <code><a href="#link">link</a></code> element allows authors to
+ indicate explicit relationships between their document and other
+ resources.
+
+ <p>The destination of the link is given by the <dfn id=href1
+ title=attr-link-href><code>href</code></dfn> attribute, which must be
+ present and must contain a URI (or IRI). If the <code
+ title=attr-link-href><a href="#href1">href</a></code> attribute is absent,
+ then the element does not define a link.
+
+ <p>The type of link indicated (the relationship) is given by the value of
+ the <dfn id=rel title=attr-link-rel><code>rel</code></dfn> attribute,
+ which must be present, and must have a value that is an <a
+ href="#unordered">unordered set of space-separated tokens</a>. The <a
+ href="#linkTypes">allowed values and their meanings</a> are defined in a
+ later section. If the <code title=attr-link-rel><a
+ href="#rel">rel</a></code> attribute is absent, or if the value used is
+ not allowed according to the definitions in this specification, then the
+ element does not define a link.
+
+ <p>Two categories of links can be created using the <code><a
+ href="#link">link</a></code> element. <dfn id=links1 title="external
+ resource link">Links to external resources</dfn> are links to resources
+ that are to be used to augment the current document, and <dfn
+ id=hyperlink1 title="hyperlink link">hyperlink links</dfn> are <a
+ href="#hyperlinks" title=hyperlink>links to other documents</a>. The <a
+ href="#linkTypes">link types section</a> defines whether a particular link
+ type is an external resource or a hyperlink. One element can create
+ multiple links (of which some might be external resource links and some
+ might be hyperlinks). User agents should process the links on a per-link
+ basis, not a per-element basis.
+
+ <p>The exact behaviour for links to external resources depends on the exact
+ relationship, as defined for the relevant link type. Some of the
+ attributes control whether or not the external resource is to be applied
+ (as defined below). For external resources that are represented in the DOM
+ (for example, style sheets), the DOM representation must be made available
+ even if the resource is not applied. (However, user agents may opt to only
+ fetch such resources when they are needed, instead of pro-actively
+ downloading all the external resources that are not applied.)
+
+ <p>Interactive user agents should provide users with a means to <a
+ href="#following0" title="following hyperlinks">follow the hyperlinks</a>
+ created using the <code><a href="#link">link</a></code> element, somewhere
+ within their user interface. The exact interface is not defined by this
+ specification, but it should include the following information (obtained
+ from the element's attributes, again as defined below), in some form or
+ another (possibly simplified), for each hyperlink created with each
+ <code><a href="#link">link</a></code> element in the document:
+
+ <ul><!-- the order here is the order that makes most sense for a UI -->
+
+ <li>The relationship between this document and the resource (given by the
+ <code title=attr-link-rel><a href="#rel">rel</a></code> attribute)
+
+ <li>The title of the resource (given by the <code title=attr-link-title><a
+ href="#title2">title</a></code> attribute).
+
+ <li>The URI of the resource (given by the <code title=attr-link-href><a
+ href="#href1">href</a></code> attribute).
+
+ <li>The language of the resource (given by the <code
+ title=attr-link-hreflang><a href="#hreflang">hreflang</a></code>
+ attribute).
+
+ <li>The optimum media for the resource (given by the <code
+ title=attr-link-media><a href="#media0">media</a></code> attribute).
+ </ul>
+
+ <p>User agents may also include other information, such as the type of the
+ resource (as given by the <code title=attr-link-type><a
+ href="#type">type</a></code> attribute).
+
+ <p>The <dfn id=media0 title=attr-link-media><code>media</code></dfn>
+ attribute says which media the resource applies to. The value must be a
+ valid media query. <a href="#refsMQ">[MQ]</a>
+
+ <p>If the link is a <a href="#hyperlink1" title="hyperlink
+ link">hyperlink</a> then the <code title=attr-link-media><a
+ href="#media0">media</a></code> attribute is purely advisory, and
+ describes for which media the document in question was designed.
+
+ <p>However, if the link is an <a href="#links1">external resource link</a>,
+ then the <code title=attr-link-media><a href="#media0">media</a></code>
+ attribute is prescriptive. The user agent must only apply the external
+ resource to <span>views</span><!-- XXX xref --> while their state match
+ the listed media.
+
+ <p id=default-media>The default, if the <code title=attr-link-media><a
+ href="#media0">media</a></code> attribute is omitted, is <code>all</code>,
+ meaning that by default links apply to all media.
+
+ <p>The <dfn id=hreflang
+ title=attr-link-hreflang><code>hreflang</code></dfn> attribute on the
+ <code><a href="#link">link</a></code> element has the same semantics as
+ the <a href="#hreflang3"
+ title=attr-hyperlink-hreflang><code>hreflang</code> attribute on hyperlink
+ elements</a>.
+
+ <p>The <dfn id=type title=attr-link-type><code>type</code></dfn> attribute
+ gives the MIME type of the linked resource. It is purely advisory. The
+ value must be a valid MIME type, optionally with parameters. <a
+ href="#refsRFC2046">[RFC2046]</a>
+
+ <p>For <a href="#links1" title="external resource link">external resource
+ links</a>, user agents may use the type given in this attribute to decide
+ whether or not to consider using the resource at all. If the UA does not
+ support the given MIME type for the given link relationship, then the UA
+ may opt not to download and apply the resource.
+
+ <p>User agents must not consider the <code title=attr-link-type><a
+ href="#type">type</a></code> attribute authoritative &mdash; upon fetching
+ the resource, user agents must not use metadata included in the link to
+ the resource to determine its type.
+
+ <p>If the attribute is omitted, then the UA must fetch the resource to
+ determine its type and thus determine if it supports (and can apply) that
+ external resource.
+
+ <div class=example>
+ <p>If a document contains three style sheet links labelled as follows:</p>
+
+ <pre>&lt;link rel="stylesheet" href="A" type="text/css"&gt;
+&lt;link rel="stylesheet" href="B" type="text/plain"&gt;
+&lt;link rel="stylesheet" href="C"&gt;</pre>
+
+ <p>...then a compliant UA that supported only CSS style sheets would fetch
+ the A and C files, and skip the B file (since <code>text/plain</code> is
+ not the MIME type for CSS style sheets). For these two files, it would
+ then check the actual types returned by the UA. For those that are sent
+ as <code>text/css</code>, it would apply the styles, but for those
+ labelled as <code>text/plain</code>, or any other type, it would not.</p>
+ </div>
+ <!--(to be deleted) (charset dropped)
+ <p>The <dfn title="attr-link-charset"><code>charset</code></dfn>
+ attribute gives the character encoding of the linked resource. It is
+ purely advisory. The value must be a valid character encoding name.
+ <a href="#refsIANACHARSET">[IANACHARSET]</a></p>
+
+ <p>For <span title="external resource link">external resource
+ links</span>, user agents may use the character encoding given in
+ this attribute to decide whether or not to consider using the
+ resource at all. If the UA does not support the given encoding for
+ the given link relationship, then the UA may opt not to download and
+ apply the resource.</p>
+
+ <p>However, once the resource has been fetched, user agents must
+ follow the rules for that resource type when determining the actual
+ character encoding.</p>
+-->
+
+ <p>The <dfn id=title2 title=attr-link-title><code>title</code></dfn>
+ attribute gives the title of the link. With one exception, it is purely
+ advisory. The value is text. The exception is for style sheet links, where
+ the <code title=attr-link-title><a href="#title2">title</a></code>
+ attribute defines <a href="#alternative">alternative style sheet sets</a>.
+
+ <p class=note>The <code title=attr-link-title><a
+ href="#title2">title</a></code> attribute on <code><a
+ href="#link">link</a></code> elements differs from the global <code
+ title=attr-title><a href="#title">title</a></code> attribute of most other
+ elements in that a link without a title does not inherit the title of the
+ parent element: it merely has no title.
+
+ <p>Some versions of HTTP defined a <code title="">Link:</code> header, to
+ be processed like a series of <code><a href="#link">link</a></code>
+ elements. When processing links, those must be taken into consideration as
+ well. For the purposes of ordering, links defined by HTTP headers must be
+ assumed to come before any links in the document, in the order that they
+ were given in the HTTP entity header. Relative URIs in these headers must
+ be resolved according to the rules given in HTTP, not relative to base
+ URIs set by the document (e.g. using a <code><a
+ href="#base">base</a></code> element or <code
+ title=attr-xml-base>xml:base</code> attributes). <a
+ href="#refsRFC2616">[RFC2616]</a> <a href="#refsRFC2068">[RFC2068]</a>
+
+ <p>The DOM attributes <dfn id=href2
+ title=dom-link-href><code>href</code></dfn>, <dfn id=rel0
+ title=dom-link-rel><code>rel</code></dfn>, <dfn id=media1
+ title=dom-link-media><code>media</code></dfn>, <dfn id=hreflang0
+ title=dom-link-hreflang><code>hreflang</code></dfn>, and <dfn id=type0
+ title=dom-link-type><code>type</code></dfn> each must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <p>The DOM attribute <dfn id=rellist
+ title=dom-link-rellist><code>relList</code></dfn> must <a
+ href="#reflect">reflect</a> the <code title=attr-link-rel><a
+ href="#rel">rel</a></code> content attribute.
+
+ <p>The DOM attribute <dfn id=disabled
+ title=dom-link-disabled><code>disabled</code></dfn> only applies to style
+ sheet links. When the <code><a href="#link">link</a></code> element
+ defines a style sheet link, then the <code title=dom-link-disabled><a
+ href="#disabled">disabled</a></code> attribute behaves as defined <a
+ href="#disabled1" title=dom-linkstyle-disabled>for the alternative style
+ sheets DOM</a>. For all other <code><a href="#link">link</a></code>
+ elements it always return false and does nothing on setting.
+
+ <h4 id=meta><span class=secno>3.7.5. </span>The <dfn
+ id=meta0><code>meta</code></dfn> element</h4>
+
+ <p><a href="#metadata" title="metadata elements">Metadata element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>In a <code><a href="#head">head</a></code> element.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-meta-name><a href="#name">name</a></code>
+
+ <dd><code title=attr-meta-http-equiv><a
+ href="#http-equiv0">http-equiv</a></code>
+
+ <dd><code title=attr-meta-content><a href="#content0">content</a></code>
+
+ <dd><code title=attr-meta-charset><a href="#charset0">charset</a></code>
+ (<a href="#html-" title="HTML documents">HTML</a> only)
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlmetaelement>HTMLMetaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#content1" title=dom-meta-content>content</a>;
+ attribute DOMString <a href="#name0" title=dom-meta-name>name</a>;
+ attribute DOMString <a href="#httpequiv" title=dom-meta-httpEquiv>httpEquiv</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#meta0">meta</a></code> element represents various
+ kinds of metadata that cannot be expressed using the <code><a
+ href="#title1">title</a></code>, <code><a href="#base">base</a></code>,
+ <code><a href="#link">link</a></code>, <code><a
+ href="#style">style</a></code>, and <code><a
+ href="#script0">script</a></code> elements.
+
+ <p>The <code><a href="#meta0">meta</a></code> element can represent
+ document-level metadata with the <code title=attr-meta-name><a
+ href="#name">name</a></code> attribute, pragma directives with the <code
+ title=attr-meta-http-equiv><a href="#http-equiv0">http-equiv</a></code>
+ attribute, and the file's character encoding declaration when an HTML
+ document is serialised to string form (e.g. for transmission over the
+ network or for disk storage) with the <code title=attr-meta-charset><a
+ href="#charset0">charset</a></code> attribute.
+
+ <p>Exactly one of the <code title=attr-meta-name><a
+ href="#name">name</a></code>, <code title=attr-meta-http-equiv><a
+ href="#http-equiv0">http-equiv</a></code>, and <code
+ title=attr-meta-charset><a href="#charset0">charset</a></code> attributes
+ must be specified.
+
+ <p>If either <code title=attr-meta-name><a href="#name">name</a></code> or
+ <code title=attr-meta-http-equiv><a
+ href="#http-equiv0">http-equiv</a></code> is specified, then the <code
+ title=attr-meta-content><a href="#content0">content</a></code> attribute
+ must also be specified. Otherwise, it must be omitted.
+
+ <p>The <code title=attr-meta-charset><a href="#charset0">charset</a></code>
+ attribute may only be specified in <a href="#html5" title=HTML5>HTML
+ documents</a>, it must not be used in <a href="#xhtml5" title=XHTML>XML
+ documents</a>. If the <code title=attr-meta-charset><a
+ href="#charset0">charset</a></code> attribute is specified, the element
+ must be the first element in <a href="#the-head0">the <code>head</code>
+ element</a> of the file.
+
+ <p>The <dfn id=content0 title=attr-meta-content><code>content</code></dfn>
+ attribute gives the value of the document metadata or pragma directive
+ when the element is used for those purposes. The allowed values depend on
+ the exact context, as described in subsequent sections of this
+ specification.
+
+ <p>If a <code><a href="#meta0">meta</a></code> element has a <dfn id=name
+ title=attr-meta-name><code>name</code></dfn> attribute, it sets document
+ metadata. Document metadata is expressed in terms of name/value pairs, the
+ <code title=attr-meta-name><a href="#name">name</a></code> attribute on
+ the <code><a href="#meta0">meta</a></code> element giving the name, and
+ the <code title=attr-meta-content><a href="#content0">content</a></code>
+ attribute on the same element giving the value. The name specifies what
+ aspect of metadata is being set; valid names and the meaning of their
+ values are described in the following sections. If a <code><a
+ href="#meta0">meta</a></code> element has no <code
+ title=attr-meta-content><a href="#content0">content</a></code> attribute,
+ then the value part of the metadata name/value pair is the empty string.
+
+ <p>The DOM attributes <dfn id=name0
+ title=dom-meta-name><code>name</code></dfn> and <dfn id=content1
+ title=dom-meta-content><code>content</code></dfn> must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name. The DOM attribute <dfn id=httpequiv
+ title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must reflect the
+ content attribute <code title=attr-meta-http-equiv><a
+ href="#http-equiv0">http-equiv</a></code>.
+
+ <h5 id=standard><span class=secno>3.7.5.1. </span>Standard metadata names</h5>
+
+ <p>This specification defines a few names for the <code
+ title=attr-meta-name><a href="#name">name</a></code> attribute of the
+ <code><a href="#meta0">meta</a></code> element.
+
+ <dl>
+ <dt><dfn id=generator title=meta-generator>generator</dfn>
+
+ <dd>
+ <p>The value must be a free-form string that identifies the software used
+ to generate the document. This value must not be used on hand-authored
+ pages. WYSIWYG editors have <a href="#wysiwyg2" title="WYSIWYG
+ signature">additional constraints</a> on the value used with this
+ metadata name.
+
+ <dt><dfn id=dns title=meta-dns>dns</dfn>
+
+ <dd>
+ <p>The value must be an <a href="#ordered">ordered set of unique
+ space-separated tokens</a>, each word of which is a host name. The list
+ allows authors to provide a list of host names that the user is expected
+ to subsequently need. User agents may, according to user preferences and
+ prevailing network conditions, pre-emptively resolve the given DNS names
+ (extracting the names from the value using the <a href="#split"
+ title="split a string on spaces">rules for splitting a string on
+ spaces</a>), thus precaching the DNS information for those hosts and
+ potentially reducing the time between page loads for subsequent user
+ interactions. Higher priority should be given to host names given
+ earlier in the list.
+ </dl>
+
+ <h5 id=other><span class=secno>3.7.5.2. </span>Other metadata names</h5>
+
+ <p><dfn id=extensions title=concept-meta-extensions>Extensions to the
+ predefined set of metadata names</dfn> may be registered in the <a
+ href="http://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki
+ MetaExtensions page</a>.
+
+ <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time
+ to add a type. These new names must be specified with the following
+ information:
+
+ <dl>
+ <dt>Keyword
+
+ <dd>
+ <p>The actual name being defined. The name should not be confusingly
+ similar to any other defined name (e.g. differing only in case).
+
+ <dt>Brief description
+
+ <dd>
+ <p>A short description of what the metadata name's meaning is, including
+ the format the value is required to be in.
+
+ <dt>Link to more details
+
+ <dd>A link to a more detailed description of the metadata name's semantics
+ and requirements. It could be another page on the Wiki, or a link to an
+ external page.
+
+ <dt>Synonyms
+
+ <dd>
+ <p>A list of other names that have exactly the same processing
+ requirements. Authors should not use the names defined to be synonyms,
+ they are only intended to allow user agents to support legacy content.
+
+ <dt>Status
+
+ <dd>
+ <p>One of the following:</p>
+
+ <dl>
+ <dt>Proposal
+
+ <dd>The name has not received wide peer review and approval. Someone has
+ proposed it and is using it.
+
+ <dt>Accepted
+
+ <dd>The name has received wide peer review and approval. It has a
+ specification that unambiguously defines how to handle pages that use
+ the name, including when they use it in incorrect ways.
+
+ <dt>Unendorsed
+
+ <dd>The metadata name has received wide peer review and it has been
+ found wanting. Existing pages are using this keyword, but new pages
+ should avoid it. The "brief description" and "link to more details"
+ entries will give details of what authors should use instead, if
+ anything.
+ </dl>
+
+ <p>If a metadata name is added with the "proposal" status and found to be
+ redundant with existing values, it should be removed and listed as a
+ synonym for the existing value.</p>
+ </dl>
+
+ <p>Conformance checkers must use the information given on the WHATWG Wiki
+ MetaExtensions page to establish if a value not explicitly defined in this
+ specification is allowed or not. When an author uses a new type not
+ defined by either this specification or the Wiki page, conformance
+ checkers should offer to add the value to the Wiki, with the details
+ described above, with the "proposal" status.
+
+ <p>This specification does not define how new values will get approved. It
+ is expected that the Wiki will have a community that addresses this.
+
+ <p>Metadata names whose values are to be URIs must not be proposed or
+ accepted. Links must be represented using the <code><a
+ href="#link">link</a></code> element, not the <code><a
+ href="#meta0">meta</a></code> element.
+
+ <h5 id=pragma><span class=secno>3.7.5.3. </span>Pragma directives</h5>
+
+ <p>When the <dfn id=http-equiv
+ title=attr-meta-http-equiv><code>http-equiv</code></dfn> attribute is
+ specified on a <code><a href="#meta0">meta</a></code> element, the element
+ is a pragma directive.
+
+ <p>The <dfn id=http-equiv0
+ title=attr-meta-http-equiv><code>http-equiv</code></dfn> attribute is an
+ <a href="#enumerated">enumerated attribute</a>. The following table lists
+ the keywords defined for this attribute. The states given in the first
+ cell of the the rows with keywords give the states to which those keywords
+ map.<!-- Some of the keywords are non-conforming, as
+ noted in the last column.-->
+
+ <table>
+ <thead>
+ <tr>
+ <th>State
+
+ <th>Keywords <!-- <th>Notes-->
+
+ <tbody><!-- things that are neither conforming nor do anything are commented out
+ <tr>
+ <td><span title="attr-meta-http-equiv-content-language">Content-Language</span>
+ <td><code title="">Content-Language</code>
+ <td>Non-conforming
+ <tr>
+ <td><span title="attr-meta-http-equiv-content-type">Content-Type</span>
+ <td><code title="">Content-Type</code>
+ <td>Non-conforming
+ <tr>
+ <td><span title="attr-meta-http-equiv-content-script-type">Content-Script-Type</span>
+ <td><code title="">Content-Script-Type</code>
+ <td>Non-conforming
+ <tr>
+ <td><span title="attr-meta-http-equiv-content-style-type">Content-Style-Type</span>
+ <td><code title="">Content-Style-Type</code>
+ <td>Non-conforming
+-->
+
+ <tr>
+ <td><a href="#refresh" title=attr-meta-http-equiv-refresh>Refresh</a>
+
+ <td><code title="">refresh</code> <!-- <td>-->
+
+ <tr>
+ <td><a href="#default" title=attr-meta-http-equiv-default-style>Default
+ style</a>
+
+ <td><code title="">default-style</code> <!-- <td>-->
+ </table>
+
+ <p>When a <code><a href="#meta0">meta</a></code> element is inserted into
+ the document, if its <code title=attr-meta-http-equiv><a
+ href="#http-equiv0">http-equiv</a></code> attribute is present and
+ represents one of the above states, then the user agent must run the
+ algorithm appropriate for that state, as described in the following list:
+
+ <dl>
+ <dt><dfn id=refresh title=attr-meta-http-equiv-refresh>Refresh state</dfn>
+
+
+ <dd>
+ <ol><!-- TESTS: http://www.hixie.ch/tests/adhoc/html/meta/refresh/ -->
+
+ <li>
+ <p>If another <code><a href="#meta0">meta</a></code> element in the <a
+ href="#refresh" title=attr-meta-http-equiv-refresh>Refresh state</a>
+ has already been successfully processed (i.e. when it was inserted the
+ user agent processed it and reached the last step of this list of
+ steps), then abort these steps.
+
+ <li>
+ <p>If the <code><a href="#meta0">meta</a></code> element has no <code
+ title=attr-meta-content><a href="#content0">content</a></code>
+ attribute, or if that attribute's value is the empty string, then
+ abort these steps.
+
+ <li>
+ <p>Let <var title="">input</var> be the value of the element's <code
+ title=attr-meta-content><a href="#content0">content</a></code>
+ attribute.
+
+ <li>
+ <p>Let <var title="">position</var> point at the first character of
+ <var title="">input</var>.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>.
+
+ <li>
+ <p><a href="#collect" title="collect a sequence of characters">Collect
+ a sequence of characters</a> in the range U+0030 DIGIT ZERO to U+0039
+ DIGIT NINE, and parse the resulting string using the <a
+ href="#rules">rules for parsing non-negative integers</a>. If the
+ sequence of characters collected is the empty string, then no number
+ will have been parsed; abort these steps. Otherwise, let <var
+ title="">time</var> be the parsed number.
+
+ <li>
+ <p><a href="#collect" title="collect a sequence of characters">Collect
+ a sequence of characters</a> in the range U+0030 DIGIT ZERO to U+0039
+ DIGIT NINE and U+002E FULL STOP ("<code title="">.</code>"). Ignore
+ any collected characters.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>.
+
+ <li>
+ <p>Let <var title="">url</var> be the address of the current page.
+
+ <li>
+ <p>If the character in <var title="">input</var> pointed to by <var
+ title="">position</var> is a U+003B SEMICOLON ("<code
+ title="">;</code>"), then advance <var title="">position</var> to the
+ next character. Otherwise, jump to the last step.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>.
+
+ <li>
+ <p>If the character in <var title="">input</var> pointed to by <var
+ title="">position</var> is one of U+0055 LATIN CAPITAL LETTER U or
+ U+0075 LATIN SMALL LETTER U, then advance <var title="">position</var>
+ to the next character. Otherwise, jump to the last step.
+
+ <li>
+ <p>If the character in <var title="">input</var> pointed to by <var
+ title="">position</var> is one of U+0052 LATIN CAPITAL LETTER R or
+ U+0072 LATIN SMALL LETTER R, then advance <var title="">position</var>
+ to the next character. Otherwise, jump to the last step.
+
+ <li>
+ <p>If the character in <var title="">input</var> pointed to by <var
+ title="">position</var> is one of U+004C LATIN CAPITAL LETTER L or
+ U+006C LATIN SMALL LETTER L, then advance <var title="">position</var>
+ to the next character. Otherwise, jump to the last step.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>.
+
+ <li>
+ <p>If the character in <var title="">input</var> pointed to by <var
+ title="">position</var> is a U+003D EQUALS SIGN ("<code
+ title="">=</code>"), then advance <var title="">position</var> to the
+ next character. Otherwise, jump to the last step.
+
+ <li>
+ <p><a href="#skip-whitespace">Skip whitespace</a>.
+
+ <li>
+ <p>Let <var title="">url</var> be equal to the substring of <var
+ title="">input</var> from the character at <var
+ title="">position</var> to the end of the string.
+
+ <li>
+ <p>Strip any trailing <a href="#space" title="space character">space
+ characters</a> from the end of <var title="">url</var>.
+
+ <li>
+ <p>Strip any U+0009 CHARACTER TABULATION, U+000A LINE FEED (LF), and
+ U+000D CARRIAGE RETURN (CR) characters from <var title="">url</var>.
+
+ <li>
+ <p>Resolve the <var title="">url</var> value to an absolute URI using
+ the base URI of the <code><a href="#meta0">meta</a></code> element.
+
+ <li>
+ <p>Set a timer so that in <var title="">time</var> seconds, if the user
+ has not canceled the redirect, the user agent <a href="#navigate"
+ title=navigate>navigates</a> to <var title="">url</var>, with <a
+ href="#replacement">replacement enabled</a>.
+ </ol>
+
+ <p>For <code><a href="#meta0">meta</a></code> elements in the <a
+ href="#refresh" title=attr-meta-http-equiv-refresh>Refresh state</a>,
+ the <code title=attr-meta-content><a href="#content0">content</a></code>
+ attribute must have a value consisting either of:
+
+ <ul>
+ <li> just a <a href="#valid">valid non-negative integer</a>, or
+
+ <li> a <a href="#valid">valid non-negative integer</a>, followed by a
+ U+003B SEMICOLON (<code title="">;</code>), followed by one or more <a
+ href="#space" title="space character">space characters</a>, followed by
+ either a U+0055 LATIN CAPITAL LETTER U or a U+0075 LATIN SMALL LETTER
+ U, a U+0052 LATIN CAPITAL LETTER R or a U+0072 LATIN SMALL LETTER R, a
+ U+004C LATIN CAPITAL LETTER L or a U+006C LATIN SMALL LETTER L, a
+ U+003D EQUALS SIGN (<code title="">=</code>), and then a valid URI (or
+ IRI).
+ </ul>
+
+ <p>In the former case, the integer represents a number of seconds before
+ the page is to be reloaded; in the latter case the integer represents a
+ number of seconds before the page is to be replaced by the page at the
+ given URI.</p>
+
+ <dd>
+
+ <dt><dfn id=default title=attr-meta-http-equiv-default-style>Default style
+ state</dfn>
+
+ <dd>
+ <ol>
+ <li class=big-issue>...
+ </ol>
+
+ <dd>
+ </dl>
+
+ <h5 id=charset><span class=secno>3.7.5.4. </span>Specifying and
+ establishing the document's character encoding</h5>
+
+ <p>The <code><a href="#meta0">meta</a></code> element may also be used to
+ provide UAs with character encoding information for <a href="#html5"
+ title=HTML5>HTML</a> files, by setting the <dfn id=charset0
+ title=attr-meta-charset><code>charset</code></dfn> attribute to the name
+ of a character encoding. This is called a character encoding declaration.
+
+ <p>The following restrictions apply to character encoding declarations:
+
+ <ul>
+ <li>When <a href="#syntax">serialised</a>, the <code
+ title=attr-meta-charset><a href="#charset0">charset</a></code> attribute
+ and its value must be contained completely in the first 512 bytes of the
+ file.
+
+ <li>The attribute value must be serialised without the use of character
+ entity references of any kind.
+
+ <li>The value must be a valid character encoding name. <a
+ href="#refsIANACHARSET">[IANACHARSET]</a> <!-- XXX
+ http://www.iana.org/assignments/character-sets -->
+
+ <li>The character encoding name given must be the name of the character
+ encoding used to serialise the file.
+
+ <li>The character encoding used must be a superset of US-ASCII
+ (specifically, ANSI_X3.4-1968) for bytes in the range 0x09 - 0x0D, 0x20,
+ 0x21, 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A, and 0x61 - 0x7A.</li>
+ <!-- XXX #refs RFC1345 ? -->
+ <!-- is that list ok? do
+ any character sets we want to support do things outside that range?
+ -->
+ </ul>
+
+ <p>If the encoding is one of UTF-8, UTF-16BE, UTF-16LE, UTF-32BE, or
+ UTF-32LE, then authors can use a BOM at the start of the file to indicate
+ the character encoding.</p>
+ <!-- UTF-EBCDIC, too! -->
+
+ <p>In XHTML, the XML declaration should be used for inline character
+ encoding information, if necessary.
+
+ <h4 id=the-style><span class=secno>3.7.6. </span>The <dfn
+ id=style><code>style</code></dfn> element</h4>
+
+ <p><a href="#metadata" title="metadata elements">Metadata element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>In a <code><a href="#head">head</a></code> element.
+
+ <dd>At the start of <code><a href="#article">article</a></code>, <code><a
+ href="#aside">aside</a></code>, <code><a href="#div">div</a></code>, and
+ <code><a href="#section">section</a></code> elements.
+
+ <dt>Content model:
+
+ <dd>Depends on the value of the <code title=attr-style-type><a
+ href="#type1">type</a></code> attribute.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-style-media><a href="#media2">media</a></code>
+
+ <dd><code title=attr-style-type><a href="#type1">type</a></code>
+
+ <dd><code title=attr-style-scoped><a href="#scoped">scoped</a></code>
+
+ <dd>Also, the <code title=attr-style-title><a
+ href="#title3">title</a></code> attribute has special semantics on this
+ element.
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlstyleelement>HTMLStyleElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute boolean <code title=dom-style-disabled><a href="#disabled0">disabled</a></code>;
+ attribute DOMString <code title=dom-style-media><a href="#media3">media</a></code>;
+ attribute DOMString <code title=dom-style-type><a href="#type2">type</a></code>;
+ attribute boolean <code title=dom-style-scoped><a href="#scoped0">scoped</a></code>;
+};</pre>
+
+ <p>The <code>LinkStyle</code> interface must also be implemented by this
+ element, the <a href="#styling0">styling processing model</a> defines
+ how. <a href="#refsCSSOM">[CSSOM]</a></p>
+ </dl>
+
+ <p>The <code><a href="#style">style</a></code> element allows authors to
+ embed style information in their documents. The <code><a
+ href="#style">style</a></code> element is one of several inputs to the <a
+ href="#styling0">styling processing model</a>.
+
+ <p>If the <dfn id=type1 title=attr-style-type><code>type</code></dfn>
+ attribute is given, it must contain a valid MIME type, optionally with
+ parameters, that designates a styling language. <a
+ href="#refsRFC2046">[RFC2046]</a> If the attribute is absent, the type
+ defaults to <code>text/css</code>. <a href="#refsRFC2318">[RFC2138]</a></p>
+ <!-- XXX this is the second time we have this paragraph here... -->
+
+ <p>When examining types to determine if they support the language, user
+ agents must not ignore unknown MIME parameters &mdash; types with unknown
+ parameters must be assumed to be unsupported.
+
+ <p>The <dfn id=media2 title=attr-style-media><code>media</code></dfn>
+ attribute says which media the styles apply to. The value must be a valid
+ media query. <a href="#refsMQ">[MQ]</a> User agents must only apply the
+ styles to <span>views</span> while their state match the listed media. <a
+ href="#refsDOM3VIEWS">[DOM3VIEWS]</a>
+
+ <p id=style-default-media>The default, if the <code
+ title=attr-style-media><a href="#media2">media</a></code> attribute is
+ omitted, is <code>all</code>, meaning that by default styles apply to all
+ media.
+
+ <p>The <dfn id=scoped title=attr-style-scoped><code>scoped</code></dfn>
+ attribute is a <a href="#boolean0">boolean attribute</a>. If the attribute
+ is present, then the user agent must only apply the specified style
+ information to the <code><a href="#style">style</a></code> element's
+ parent element (if any), and that element's child nodes. Otherwise, the
+ specified styles must, if applied, be applied to the entire document.
+
+ <p id=title-on-style>The <dfn id=title3
+ title=attr-style-title><code>title</code></dfn> attribute on <code><a
+ href="#style">style</a></code> elements defines <a
+ href="#alternative">alternative style sheet sets</a>. If the <code><a
+ href="#style">style</a></code> element has no <code
+ title=attr-style-title><a href="#title3">title</a></code> attribute, then
+ it has no title; the <code title=attr-title><a
+ href="#title">title</a></code> attribute of ancestors does not apply to
+ the <code><a href="#style">style</a></code> element.</p>
+ <!--
+ XXX xref -->
+
+ <p class=note>The <code title=attr-style-title><a
+ href="#title3">title</a></code> attribute on <code><a
+ href="#style">style</a></code> elements, like the <code
+ title=attr-link-title><a href="#title2">title</a></code> attribute on
+ <code><a href="#link">link</a></code> elements, differs from the global
+ <code title=attr-title><a href="#title">title</a></code> attribute in that
+ a <code><a href="#style">style</a></code> block without a title does not
+ inherit the title of the parent element: it merely has no title.
+
+ <p>All descendant elements must be processed, according to their semantics,
+ before the <code><a href="#style">style</a></code> element itself is
+ evaluated. For styling languages that consist of pure text, user agents
+ must evaluate <code><a href="#style">style</a></code> elements by passing
+ the concatenation of the contents of all the <a href="#text-node"
+ title="text node">text nodes</a> that are direct children of the <code><a
+ href="#style">style</a></code> element (not any other nodes such as
+ comments or elements), in <a href="#tree-order">tree order</a>, to the
+ style system. For XML-based styling languages, user agents must pass all
+ the children nodes of the <code><a href="#style">style</a></code> element
+ to the style system.
+
+ <p class=note>This specification does not specify a style system, but CSS
+ is expected to be supported by most Web browsers. <a
+ href="#refsCSS21">[CSS21]</a>
+
+ <p>The <dfn id=media3 title=dom-style-media><code>media</code></dfn>, <dfn
+ id=type2 title=dom-style-type><code>type</code></dfn> and <dfn id=scoped0
+ title=dom-style-scoped><code>scoped</code></dfn> DOM attributes must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <p>The DOM <dfn id=disabled0
+ title=dom-style-disabled><code>disabled</code></dfn> attribute behaves as
+ defined <a href="#disabled1" title=dom-linkstyle-disabled>for the
+ alternative style sheets DOM</a>.
+
+ <h4 id=styling><span class=secno>3.7.7. </span><dfn id=styling0
+ title="styling processing model">Styling</dfn></h4>
+
+ <p>The <code><a href="#link">link</a></code> and <code><a
+ href="#style">style</a></code> elements can provide styling information
+ for the user agent to use when rendering the document. The DOM Styling
+ specification specifies what styling information is to be used by the user
+ agent and how it is to be used. <a href="#refsCSSOM">[CSSOM]</a>
+
+ <p>The <code><a href="#style">style</a></code> and <code><a
+ href="#link">link</a></code> elements implement the <code>LinkStyle</code>
+ interface. <a href="#refsCSSOM">[CSSOM]</a>
+
+ <p>For <code><a href="#style">style</a></code> elements, if the user agent
+ does not support the specified styling language, then the <code
+ title=dom-LinkStyle-sheet>sheet</code> attribute of the element's
+ <code>LinkStyle</code> interface must return null. Similarly, <code><a
+ href="#link">link</a></code> elements that do not represent <a
+ href="#stylesheet" title=rel-stylesheet>external resource links that
+ contribute to the styling processing model</a> (i.e. that do not have a
+ <code title=rel-stylesheet><a href="#stylesheet">stylesheet</a></code>
+ keyword in their <code title=attr-link-rel><a href="#rel">rel</a></code>
+ attribute), and <code><a href="#link">link</a></code> elements whose
+ specified resource has not yet been downloaded, or is not in a supported
+ styling language, must have their <code>LinkStyle</code> interface's <code
+ title=dom-LinkStyle-sheet>sheet</code> attribute return null.
+
+ <p>Otherwise, the <code>LinkStyle</code> interface's <code
+ title=dom-LinkStyle-sheet>sheet</code> attribute must return a
+ <code>StyleSheet</code> object with the attributes implemented as follows:
+ <a href="#refsCSSOM">[CSSOM]</a>
+
+ <dl>
+ <dt>The content type (<code title=dom-stylesheet-type>type</code> DOM
+ attribute)
+
+ <dd>
+ <p>The content type must be the same as the style's specified type. For
+ <code><a href="#style">style</a></code> elements, this is the same as
+ the <code title=attr-style-type><a href="#type1">type</a></code> content
+ attribute's value, or <code title="">text/css</code> if that is omitted.
+ For <code><a href="#link">link</a></code> elements, this is the <a
+ href="#content-type8" title=Content-Type>Content-Type metadata of the
+ specified resource</a>.
+
+ <dt>The location (<code title=dom-stylesheet-href>href</code> DOM
+ attribute)
+
+ <dd>
+ <p>For <code><a href="#link">link</a></code> elements, the location must
+ be the URI given by the element's <code title=attr-link-href><a
+ href="#href1">href</a></code> content attribute. For <code><a
+ href="#style">style</a></code> elements, there is no location.
+
+ <dt>The intended destination media for style information (<code
+ title=dom-stylesheet-media>media</code> DOM attribute)
+
+ <dd>
+ <p>The media must be the same as the value of the element's <code
+ title="">media</code> content attribute.
+
+ <dt>The style sheet title (<code title=dom-stylesheet-title>title</code>
+ DOM attribute)
+
+ <dd>
+ <p>The title must be the same as the value of the element's <code
+ title="">title</code> content attribute. If the attribute is absent,
+ then the style sheet does not have a title. The title is used for
+ defining <dfn id=alternative>alternative style sheet sets</dfn>.
+ </dl>
+
+ <p>The <dfn id=disabled1
+ title=dom-LinkStyle-disabled><code>disabled</code></dfn> DOM attribute on
+ <code><a href="#link">link</a></code> and <code><a
+ href="#style">style</a></code> elements must return false and do nothing
+ on setting, if the <code title=dom-linkstyle-sheet>sheet</code> attribute
+ of their <code>LinkStyle</code> interface is null. Otherwise, it must
+ return the value of the <code>StyleSheet</code> interface's <code
+ title=dom-stylesheet-disabled>disabled</code> attribute on getting, and
+ forward the new value to that same attribute on setting.</p>
+ <!-- <p class="big-issue">Need more here - defining preferred
+ stylesheets, alternative stylesheets, persistent stylesheets, ordering
+ of stylesheets, dynamic additions/removals, how it maps to
+ .styleSheets, HTTP Link: headers, and the stuff about the alternative
+ stylesheet API.</p> XXX that will all be covered by Anne's spec -->
+
+ <h3 id=sections><span class=secno>3.8. </span>Sections</h3>
+
+ <p><dfn id=sectioning>Sectioning elements</dfn> are elements that divide
+ the page into, for lack of a better word, sections. This section describes
+ HTML's sectioning elements and elements that support them.
+
+ <p id=applyToSection>Some elements are scoped to their nearest ancestor
+ sectioning element. For example, <code><a
+ href="#address">address</a></code> elements apply just to their section.
+ For such elements <var title="">x</var>, the elements that apply to a
+ sectioning element <var title="">e</var> are all the <var title="">x</var>
+ elements whose nearest sectioning element is <var title="">e</var>.
+
+ <h4 id=the-body><span class=secno>3.8.1. </span>The <dfn
+ id=body0><code>body</code></dfn> element</h4>
+
+ <p><a href="#sectioning" title="sectioning elements">Sectioning
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the second element in an <code><a href="#html">html</a></code>
+ element.
+
+ <dt>Content model:
+
+ <dd>Zero or more <a href="#block-level0">block-level elements</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#body0">body</a></code> element represents the main
+ content of the document.
+
+ <p>The <code><a href="#body0">body</a></code> element potentially has a
+ heading. See the section on <a href="#headings0">headings and sections</a>
+ for further details.
+
+ <p>In conforming documents, there is only one <code><a
+ href="#body0">body</a></code> element. The <code
+ title=dom-document-body><a href="#body">document.body</a></code> DOM
+ attribute provides scripts with easy access to a document's <code><a
+ href="#body0">body</a></code> element.
+
+ <p class=note>Some DOM operations (for example, parts of the <a
+ href="#drag-and">drag and drop</a> model) are defined in terms of "<a
+ href="#the-body0">the body element</a>". This refers to a particular
+ element in the DOM, as per the definition of the term, and not any
+ arbitrary <code><a href="#body0">body</a></code> element.
+
+ <h4 id=the-section><span class=secno>3.8.2. </span>The <dfn
+ id=section><code>section</code></dfn> element</h4>
+
+ <p><a href="#sectioning" title="sectioning elements">Sectioning</a> <a
+ href="#block-level0" title="block-level elements">block-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Zero or more <code><a href="#style">style</a></code> elements,
+ followed by zero or more <a href="#block-level0">block-level
+ elements</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#section">section</a></code> element represents a
+ generic document or application section. A section, in this context, is a
+ thematic grouping of content, typically with a header, possibly with a
+ footer.
+
+ <p class=example>Examples of sections would be chapters, the various tabbed
+ pages in a tabbed dialog box, or the numbered sections of a thesis. A Web
+ site's home page could be split into sections for an introduction, news
+ items, contact information.
+
+ <p>Each <code><a href="#section">section</a></code> element potentially has
+ a heading. See the section on <a href="#headings0">headings and
+ sections</a> for further details.
+
+ <h4 id=the-nav><span class=secno>3.8.3. </span>The <dfn
+ id=nav><code>nav</code></dfn> element</h4>
+
+ <p><a href="#sectioning" title="sectioning elements">Sectioning</a> <a
+ href="#block-level0" title="block-level elements">block-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Zero or more <a href="#block-level0">block-level elements</a>, or <a
+ href="#inline-level0">inline-level content</a> (but not both).
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#nav">nav</a></code> element represents a section of
+ a page that links to other pages or to parts within the page: a section
+ with navigation links.
+
+ <p>When <a href="#determining0" title="Determining if a particular element
+ contains block-level elements or inline-level content">used as an
+ inline-level content</a> container, the element represents a <a
+ href="#paragraph">paragraph</a>.
+
+ <p>Each <code><a href="#nav">nav</a></code> element potentially has a
+ heading. See the section on <a href="#headings0">headings and sections</a>
+ for further details.
+
+ <h4 id=the-article><span class=secno>3.8.4. </span>The <dfn
+ id=article><code>article</code></dfn> element</h4>
+
+ <p><a href="#sectioning" title="sectioning elements">Sectioning</a> <a
+ href="#block-level0" title="block-level elements">block-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Zero or more <code><a href="#style">style</a></code> elements,
+ followed by zero or more <a href="#block-level0">block-level
+ elements</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.</dd>
+ <!--
+XXX attributes to give the date authored, date published
+-->
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#article">article</a></code> element represents a
+ section of a page that consists of a composition that forms an independent
+ part of a document, page, or site. This could be a forum post, a magazine
+ or newspaper article, a Web log entry, a user-submitted comment, or any
+ other independent item of content.
+
+ <p class=note>An <code><a href="#article">article</a></code> element is
+ "independent" in that its contents could stand alone, for example in
+ syndication. However, the element is still associated with its ancestors;
+ for instance, contact information that <a
+ href="#applyToSection">applies</a> to a parent <code><a
+ href="#body0">body</a></code> element still covers the <code><a
+ href="#article">article</a></code> as well.
+
+ <p>When <code><a href="#article">article</a></code> elements are nested,
+ the inner <code><a href="#article">article</a></code> elements represent
+ articles that are in principle related to the contents of the outer
+ article. For instance, a Web log entry on a site that accepts
+ user-submitted comments could represent the comments as <code><a
+ href="#article">article</a></code> elements nested within the <code><a
+ href="#article">article</a></code> element for the Web log entry.
+
+ <p>Author information associated with an <code><a
+ href="#article">article</a></code> element (q.v. the <code><a
+ href="#address">address</a></code> element) does not apply to nested
+ <code><a href="#article">article</a></code> elements.
+
+ <p>Each <code><a href="#article">article</a></code> element potentially has
+ a heading. See the section on <a href="#headings0">headings and
+ sections</a> for further details.
+
+ <h4 id=the-blockquote><span class=secno>3.8.5. </span>The <dfn
+ id=blockquote><code>blockquote</code></dfn> element</h4>
+
+ <p><a href="#sectioning" title="sectioning elements">Sectioning</a> <a
+ href="#block-level0" title="block-level elements">block-level element</a>,
+ and <a href="#structured" title="structured inline-level
+ elements">structured inline-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dd>Where <a href="#structured">structured inline-level elements</a> are
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Zero or more <a href="#block-level0">block-level elements</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-blockquote-cite><a href="#cite">cite</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlquoteelement>HTMLQuoteElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#cite0" title=dom-quote-cite>cite</a>;
+};</pre>
+
+ <p class=note>The <code><a
+ href="#htmlquoteelement">HTMLQuoteElement</a></code> interface is also
+ used by the <code><a href="#q">q</a></code> element.</p>
+ </dl>
+
+ <p>The <code><a href="#blockquote">blockquote</a></code> element represents
+ a section that is quoted from another source.
+
+ <p>Content inside a <code><a href="#blockquote">blockquote</a></code> must
+ be quoted from another source, whose URI, if it has one, should be cited
+ in the <dfn id=cite title=attr-blockquote-cite><code>cite</code></dfn>
+ attribute.
+
+ <p>If the <code title=attr-blockquote-cite><a href="#cite">cite</a></code>
+ attribute is present, it must be a URI (or IRI). User agents should allow
+ users to follow such citation links.
+
+ <p>If a <code><a href="#blockquote">blockquote</a></code> element is <a
+ href="#preceeded">preceeded or followed</a> by a <code><a
+ href="#p">p</a></code> element that contains a single <code><a
+ href="#cite2">cite</a></code> element and is itself not <a
+ href="#preceeded">preceeded or followed</a> by another <code><a
+ href="#blockquote">blockquote</a></code> element and does not itself have
+ a <code><a href="#q">q</a></code> element descendant, then, the citation
+ given by that <code><a href="#cite2">cite</a></code> element gives the
+ source of the quotation contained in the <code><a
+ href="#blockquote">blockquote</a></code> element.
+
+ <p>Each <code><a href="#blockquote">blockquote</a></code> element
+ potentially has a heading. See the section on <a
+ href="#headings0">headings and sections</a> for further details.
+
+ <p>The <dfn id=cite0 title=dom-quote-cite><code>cite</code></dfn> DOM
+ attribute <code>reflects</code> the element's <code title="">cite</code>
+ content attribte.
+
+ <p class=note>The best way to represent a conversation is not with the
+ <code><a href="#cite2">cite</a></code> and <code><a
+ href="#blockquote">blockquote</a></code> elements, but with the <code><a
+ href="#dialog">dialog</a></code> element.
+
+ <h4 id=the-aside><span class=secno>3.8.6. </span>The <dfn
+ id=aside><code>aside</code></dfn> element</h4>
+
+ <p><a href="#sectioning" title="sectioning elements">Sectioning</a> <a
+ href="#block-level0" title="block-level elements">block-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Zero or more <code><a href="#style">style</a></code> elements,
+ followed by either zero or more <a href="#block-level0">block-level
+ elements</a>, or <a href="#inline-level0">inline-level content</a> (but
+ not both).
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#aside">aside</a></code> element represents a section
+ of a page that consists of content that is tangentially related to the
+ content around the <code><a href="#aside">aside</a></code> element, and
+ which could be considered separate from that content. Such sections are
+ often represented as sidebars in printed typography.
+
+ <p>When <a href="#determining0" title="Determining if a particular element
+ contains block-level elements or inline-level content">used as an
+ inline-level content</a> container, the element represents a <a
+ href="#paragraph">paragraph</a>.
+
+ <p>Each <code><a href="#aside">aside</a></code> element potentially has a
+ heading. See the section on <a href="#headings0">headings and sections</a>
+ for further details.
+
+ <h4 id=the-h1><span class=secno>3.8.7. </span>The <dfn
+ id=h1><code>h1</code></dfn>, <dfn id=h2><code>h2</code></dfn>, <dfn
+ id=h3><code>h3</code></dfn>, <dfn id=h4><code>h4</code></dfn>, <dfn
+ id=h5><code>h5</code></dfn>, and <dfn id=h6><code>h6</code></dfn> elements</h4>
+
+ <p><a href="#block-level0">Block-level elements</a>.
+
+ <dl class=element>
+ <dt>Contexts in which these elements may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd><a href="#significant" title="significant inline
+ content">Significant</a> <a href="#strictly">strictly inline-level
+ content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>These elements define headers for their sections.
+
+ <p>The semantics and meaning of these elements are defined in the section
+ on <a href="#headings0">headings and sections</a>.
+
+ <p>These elements have a <dfn id=rank>rank</dfn> given by the number in
+ their name. The <code><a href="#h1">h1</a></code> element is said to have
+ the highest rank, the <code><a href="#h6">h6</a></code> element has the
+ lowest rank, and two elements with the same name have equal rank.
+
+ <p>These elements must not be <a href="#significant" title="significant
+ inline content">empty</a>.
+
+ <h4 id=the-header><span class=secno>3.8.8. </span>The <dfn
+ id=header><code>header</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected
+ and there are no <code><a href="#header">header</a></code> ancestors.
+
+ <dt>Content model:
+
+ <dd>Zero or more <a href="#block-level0">block-level elements</a>,
+ including at least one descendant <code><a href="#h1">h1</a></code>,
+ <code><a href="#h2">h2</a></code>, <code><a href="#h3">h3</a></code>,
+ <code><a href="#h4">h4</a></code>, <code><a href="#h5">h5</a></code>, or
+ <code><a href="#h6">h6</a></code> element, but no <span>sectioning
+ element</span> descendants, no <code><a href="#header">header</a></code>
+ element descendants, and no <code><a href="#footer">footer</a></code>
+ element descendants.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#header">header</a></code> element represents the
+ header of a section. Headers may contain more than just the section's
+ heading &mdash; for example it would be reasonable for the header to
+ include version history information.
+
+ <p><code><a href="#header">header</a></code> elements must not contain any
+ <code><a href="#header">header</a></code> elements, <code><a
+ href="#footer">footer</a></code> elements, or any sectioning elements
+ (such as <code><a href="#section">section</a></code>) as descendants.
+
+ <p><code><a href="#header">header</a></code> elements must have at least
+ one <code><a href="#h1">h1</a></code>, <code><a href="#h2">h2</a></code>,
+ <code><a href="#h3">h3</a></code>, <code><a href="#h4">h4</a></code>,
+ <code><a href="#h5">h5</a></code>, or <code><a href="#h6">h6</a></code>
+ element as a descendant.
+
+ <p>For the purposes of document summaries, outlines, and the like, <code><a
+ href="#header">header</a></code> elements are equivalent to the highest <a
+ href="#rank" title=rank>ranked</a> <code><a
+ href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code> element
+ descendant (the first such element if there are multiple elements with
+ that <a href="#rank">rank</a>).
+
+ <p>Other heading elements indicate subheadings or subtitles.
+
+ <div class=example>
+ <p>Here are some examples of valid headers. In each case, the emphasised
+ text represents the text that would be used as the header in an
+ application extracting header data and ignoring subheadings.</p>
+
+ <pre>&lt;header&gt;
+ &lt;h1&gt;<strong>The reality dysfunction</strong>&lt;/h1&gt;
+ &lt;h2&gt;Space is not the only void&lt;/h2&gt;
+&lt;/header&gt;</pre>
+
+ <pre>&lt;header&gt;
+ &lt;p&gt;Welcome to...&lt;/p&gt;
+ &lt;h1&gt;<strong>Voidwars!</strong>&lt;/h1&gt;
+&lt;/header&gt;</pre>
+
+ <pre>&lt;header&gt;
+ &lt;h1&gt;<strong>Scalable Vector Graphics (SVG) 1.2</strong>&lt;/h1&gt;
+ &lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
+ &lt;dl&gt;
+ &lt;dt&gt;This version:&lt;/dt&gt;
+ &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20041027/&lt;/a&gt;&lt;/dd&gt;
+ &lt;dt&gt;Previous version:&lt;/dt&gt;
+ &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20040510/&lt;/a&gt;&lt;/dd&gt;
+ &lt;dt&gt;Latest version of SVG 1.2:&lt;/dt&gt;
+ &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG12/"&gt;http://www.w3.org/TR/SVG12/&lt;/a&gt;&lt;/dd&gt;
+ &lt;dt&gt;Latest SVG Recommendation:&lt;/dt&gt;
+ &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG/"&gt;http://www.w3.org/TR/SVG/&lt;/a&gt;&lt;/dd&gt;
+ &lt;dt&gt;Editor:&lt;/dt&gt;
+ &lt;dd&gt;Dean Jackson, W3C, &lt;a href="mailto:dean@w3.org"&gt;dean@w3.org&lt;/a&gt;&lt;/dd&gt;
+ &lt;dt&gt;Authors:&lt;/dt&gt;
+ &lt;dd&gt;See &lt;a href="#authors"&gt;Author List&lt;/a&gt;&lt;/dd&gt;
+ &lt;/dl&gt;
+ &lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
+&lt;/header&gt;</pre>
+ </div>
+
+ <p>The section on <a href="#headings0">headings and sections</a> defines
+ how <code><a href="#header">header</a></code> elements are assigned to
+ individual sections.
+
+ <p>The <a href="#rank">rank</a> of a <code><a
+ href="#header">header</a></code> element is the same as for an <code><a
+ href="#h1">h1</a></code> element (the highest rank).
+
+ <h4 id=the-footer><span class=secno>3.8.9. </span>The <dfn
+ id=footer><code>footer</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Either zero or more <a href="#block-level0">block-level elements</a>,
+ but with no <code><a href="#h1">h1</a></code>, <code><a
+ href="#h2">h2</a></code>, <code><a href="#h3">h3</a></code>, <code><a
+ href="#h4">h4</a></code>, <code><a href="#h5">h5</a></code>, <code><a
+ href="#h6">h6</a></code>, <code><a href="#header">header</a></code>, or
+ <code><a href="#footer">footer</a></code> elements as descendants, and
+ with no <a href="#sectioning" title="sectioning elements">sectioning
+ elements</a> as descendants; or, <a href="#inline-level0">inline-level
+ content</a> (but not both).
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#footer">footer</a></code> element represents the
+ footer for the section it <a href="#applyToSection">applies</a> to. A
+ footer typically contains information about its section such as who wrote
+ it, links to related documents, copyright data, and the like.
+
+ <p><code><a href="#footer">footer</a></code> elements must not contain any
+ <code><a href="#footer">footer</a></code>, <code><a
+ href="#header">header</a></code>, <code><a href="#h1">h1</a></code>,
+ <code><a href="#h2">h2</a></code>, <code><a href="#h3">h3</a></code>,
+ <code><a href="#h4">h4</a></code>, <code><a href="#h5">h5</a></code>, or
+ <code><a href="#h6">h6</a></code> elements, or any of the sectioning
+ elements (such as <code><a href="#section">section</a></code>), as
+ descendants.
+
+ <p>When <a href="#determining0" title="Determining if a particular element
+ contains block-level elements or inline-level content">used as an
+ inline-level content</a> container, the element represents a <a
+ href="#paragraph">paragraph</a>.
+
+ <p>Contact information for the section given in a <code><a
+ href="#footer">footer</a></code> should be marked up using the <code><a
+ href="#address">address</a></code> element.</p>
+ <!-- XXX examples needed -->
+
+ <h4 id=the-address><span class=secno>3.8.10. </span>The <dfn
+ id=address><code>address</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd><a href="#inline-level0">Inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#address">address</a></code> element represents a <a
+ href="#paragraph">paragraph</a> of contact information for the section it
+ <a href="#applyToSection">applies</a> to.
+
+ <div class=example>
+ <p>For example, a page at the W3C Web site related to HTML might include
+ the following contact information:</p>
+
+ <pre>&lt;ADDRESS>
+ &lt;A href="../People/Raggett/">Dave Raggett&lt;/A>,
+ &lt;A href="../People/Arnaud/">Arnaud Le Hors&lt;/A>,
+ contact persons for the &lt;A href="Activity">W3C HTML Activity&lt;/A>
+&lt;/ADDRESS></pre>
+ </div>
+
+ <p>The <code><a href="#address">address</a></code> element must not be used
+ to represent arbitrary addresses (e.g. postal addresses), unless those
+ addresses are contact information for the section. (The <code><a
+ href="#p">p</a></code> element is the appropriate element for marking up
+ such addresses.)
+
+ <p>The <code><a href="#address">address</a></code> element must not contain
+ information other than contact information.
+
+ <div class=example>
+ <p>For example, the following is non-conforming use of the <code><a
+ href="#address">address</a></code> element:</p>
+
+ <pre>&lt;ADDRESS>Last Modified: 1999/12/24 23:37:50&lt;/ADDRESS></pre>
+ </div>
+
+ <p>Typically, the <code><a href="#address">address</a></code> element would
+ be included with other information in a <code><a
+ href="#footer">footer</a></code> element.
+
+ <p>To determine the contact information for a sectioning element (such as a
+ document's <code><a href="#body0">body</a></code> element, which would
+ give the contact information for the page), UAs must collect all the
+ <code><a href="#address">address</a></code> elements that <a
+ href="#applyToSection">apply</a> to that sectioning element and its
+ ancestor sectioning elements. The contact information is the collection of
+ all the information given by those elements.
+
+ <p class=note>Contact information for one sectioning element, e.g. a
+ <code><a href="#aside">aside</a></code> element, does not apply to its
+ ancestor elements, e.g. the page's <code><a href="#body0">body</a></code>.
+
+ <h4 id=headings><span class=secno>3.8.11. </span><dfn id=headings0>Headings
+ and sections</dfn></h4>
+
+ <p>The <code><a href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code>
+ elements and the <code><a href="#header">header</a></code> element are
+ headings.
+
+ <p>The first heading in a sectioning element gives the header for that
+ section. Subsequent headers of equal or higher <a href="#rank">rank</a>
+ start new (implied) sections, headers of lower <a href="#rank">rank</a>
+ start subsections that are part of the previous one.
+
+ <p>Sectioning elements other than <code><a
+ href="#blockquote">blockquote</a></code> are always considered subsections
+ of their nearest ancestor sectioning element, regardless of what implied
+ sections other headings may have created. However, <code><a
+ href="#blockquote">blockquote</a></code> elements <em>are</em> associated
+ with implied sections. Effectively, <code><a
+ href="#blockquote">blockquote</a></code> elements act like sections on the
+ inside, and act opaquely on the outside.
+
+ <div class=example>
+ <p>For the following fragment:</p>
+
+ <pre>&lt;body&gt;
+ &lt;h1&gt;Foo&lt;/h1&gt;
+ &lt;h2&gt;Bar&lt;/h2&gt;
+ &lt;blockquote&gt;
+ &lt;h3&gt;Bla&lt;/h3&gt;
+ &lt;/blockquote&gt;
+ &lt;p&gt;Baz&lt;/p&gt;
+ &lt;h2&gt;Quux&lt;/h2&gt;
+ &lt;section&gt;
+ &lt;h3&gt;Thud&lt;/h3&gt;
+ &lt;/section&gt;
+ &lt;p&gt;Grunt&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+ <p>...the structure would be:</p>
+
+ <ol>
+ <li> Foo (heading of explicit <code><a href="#body0">body</a></code>
+ section)
+ <ol>
+ <li> Bar (heading starting implied section)
+ <ol>
+ <li> Bla (heading of explicit <code><a
+ href="#blockquote">blockquote</a></code> section)
+ </ol>
+ Baz (paragraph)
+
+ <li> Quux (heading starting implied section)
+
+ <li> Thud (heading of explicit <code><a
+ href="#section">section</a></code> section)
+ </ol>
+ Grunt (paragraph)
+ </ol>
+
+ <p>Notice how the <code><a href="#blockquote">blockquote</a></code> nests
+ inside an implicit section while the <code><a
+ href="#section">section</a></code> does not (and in fact, ends the
+ earlier implicit section so that a later paragraph is back at the top
+ level).</p>
+ </div>
+
+ <p>Sections may contain headers of any <a href="#rank">rank</a>, but
+ authors are strongly encouraged to either use only <code><a
+ href="#h1">h1</a></code> elements, or to use elements of the appropriate
+ <a href="#rank">rank</a> for the section's nesting level.
+
+ <p>Authors are also encouraged to explictly wrap sections in sectioning
+ elements, instead of relying on the implicit sections generated by having
+ multiple heading in one sectioning element.
+
+ <div class=example>
+ <p>For example, the following is correct:</p>
+
+ <pre>&lt;body&gt;
+ &lt;h4&gt;Apples&lt;/h4&gt;
+ &lt;p&gt;Apples are fruit.&lt;/p&gt;
+ &lt;section&gt;
+ &lt;h2&gt;Taste&lt;/h2&gt;
+ &lt;p&gt;They taste lovely.&lt;/p&gt;
+ &lt;h6&gt;Sweet&lt;/h6&gt;
+ &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
+ &lt;h1&gt;Color&lt;/h1&gt;
+ &lt;p&gt;Apples come in various colors.&lt;/p&gt;
+ &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+ <p>However, the same document would be more clearly expressed as:</p>
+
+ <pre>&lt;body&gt;
+ &lt;h1&gt;Apples&lt;/h1&gt;
+ &lt;p&gt;Apples are fruit.&lt;/p&gt;
+ &lt;section&gt;
+ &lt;h2&gt;Taste&lt;/h2&gt;
+ &lt;p&gt;They taste lovely.&lt;/p&gt;
+ &lt;section&gt;
+ &lt;h3&gt;Sweet&lt;/h3&gt;
+ &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
+ &lt;/section&gt;
+ &lt;/section&gt;
+ &lt;section&gt;
+ &lt;h2&gt;Color&lt;/h2&gt;
+ &lt;p&gt;Apples come in various colors.&lt;/p&gt;
+ &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+ <p>Both of the documents above are semantically identical and would
+ produce the same outline in compliant user agents.</p>
+ </div>
+
+ <h5 id=outlines><span class=secno>3.8.11.1. </span>Creating an outline</h5>
+
+ <p>Documents can be viewed as a tree of sections, which defines how each
+ element in the tree is semantically related to the others, in terms of the
+ overall section structure. This tree is related to the document tree, but
+ there is not a one-to-one relationship between elements in the DOM and the
+ document's sections.
+
+ <p>The tree of sections should be used when generating document outlines,
+ for example when generating tables of contents.
+
+ <p>To derive the tree of sections from the document tree, a hypothetical
+ tree is used, consisting of a view of the document tree containing only
+ the <code><a href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code>
+ and <code><a href="#header">header</a></code> elements, and the sectioning
+ elements other than <code><a href="#blockquote">blockquote</a></code>.
+ Descendants of <code><a href="#h1">h1</a></code>-<code><a
+ href="#h6">h6</a></code>, <code><a href="#header">header</a></code>, and
+ <code><a href="#blockquote">blockquote</a></code> elements must be removed
+ from this view.
+
+ <p>The hypothetical tree must be rooted at the <a href="#root-element">root
+ element</a> or at a sectioning element. In particular, while the sections
+ inside <code><a href="#blockquote">blockquote</a></code>s do not
+ contribute to the document's tree of sections, <code><a
+ href="#blockquote">blockquote</a></code>s can have outlines of their own.
+
+ <p>UAs must take this hypothetical tree (which will become the outline) and
+ mutate it by walking it depth first in <a href="#tree-order">tree
+ order</a> and, for each <code><a href="#h1">h1</a></code>-<code><a
+ href="#h6">h6</a></code> or <code><a href="#header">header</a></code>
+ element that is not the first element of its parent sectioning element,
+ inserting a new sectioning element, as follows:
+
+ <dl class=switch>
+ <dt>If the element is a <code><a href="#header">header</a></code> element,
+ or if it is an <code><a href="#h1">h1</a></code>-<code><a
+ href="#h6">h6</a></code> node of <a href="#rank">rank</a> equal to or
+ higher than the first element in the parent sectioning element (assuming
+ that is also an <code><a href="#h1">h1</a></code>-<code><a
+ href="#h6">h6</a></code> node), or if the first element of the parent
+ sectioning element is a sectioning element:
+
+ <dd>Insert the new sectioning element as the immediately following sibling
+ of the parent sectioning element, and move all the elements from the
+ current heading element up to the end of the parent sectioning element
+ into the new sectioning element.
+
+ <dt>Otherwise:
+
+ <dd>Move the current heading element, and all subsequent siblings up to
+ but excluding the next sectioning element, <code><a
+ href="#header">header</a></code> element, or <code><a
+ href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code> of equal or
+ higher <a href="#rank">rank</a>, whichever comes first, into the new
+ sectioning element, then insert the new sectioning element where the
+ current header was.
+ </dl>
+
+ <p>The outline is then the resulting hypothetical tree. The <a href="#rank"
+ title=rank>ranks</a> of the headers become irrelevant at this point: each
+ sectioning element in the hypothetical tree contains either no or one
+ heading element child. If there is one, then it gives the section's
+ heading, of there isn't, the section has no heading.
+
+ <p>Sections are nested as in the hypothetical tree. If a sectioning element
+ is a child of another, that means it is a subsection of that other
+ section.
+
+ <p>When creating an interactive table of contents, entries should jump the
+ user to the relevant section element, if it was a real element in the
+ original document, or to the heading, if the section element was one of
+ those created during the above process.
+
+ <p class=example>Selecting the first section of the document therefore
+ always takes the user to the top of the document, regardless of where the
+ first header in the <code><a href="#body0">body</a></code> is to be found.</p>
+ <!-- XXX assuming there is a body, anyway -->
+
+ <div class=note>
+ <p>The hypothetical tree (before mutations) could be generated by creating
+ a <code>TreeWalker</code> with the following <a
+ href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter"><code>NodeFilter</code></a>
+ (described here as an anonymous ECMAScript function). <a
+ href="#refsDOMTR">[DOMTR]</a> <a href="#refsECMA262">[ECMA262]</a></p>
+
+ <pre>function (n) {
+ // This implementation only knows about HTML elements.
+ // An implementation that supports other languages might be
+ // different.
+
+ // Reject anything that isn't an element.
+ if (n.nodeType != Node.ELEMENT_NODE)
+ return NodeFilter.FILTER_REJECT;
+
+ // Skip any descendants of headings.
+ if ((n.parentNode &amp;&amp; n.parentNode.namespaceURI == 'http://www.w3.org/1999/xhtml') &amp;&amp;
+ (n.parentNode.localName == 'h1' || n.parentNode.localName == 'h2' ||
+ n.parentNode.localName == 'h3' || n.parentNode.localName == 'h4' ||
+ n.parentNode.localName == 'h5' || n.parentNode.localName == 'h6' ||
+ n.parentNode.localName == 'header'))
+ return NodeFilter.FILTER_REJECT;
+
+ // Skip any blockquotes.
+ if ((n.namespaceURI == 'http://www.w3.org/1999/xhtml') &amp;&amp;
+ (n.localName == 'blockquote'))
+ return NodeFilter.FILTER_REJECT;
+
+ // Accept HTML elements in the list given in the prose above.
+ if ((n.namespaceURI == 'http://www.w3.org/1999/xhtml') &amp;&amp;
+ (n.localName == 'body' || /*n.localName == 'blockquote' ||*/
+ n.localName == 'section' || n.localName == 'nav' ||
+ n.localName == 'article' || n.localName == 'aside' ||
+ n.localName == 'h1' || n.localName == 'h2' ||
+ n.localName == 'h3' || n.localName == 'h4' ||
+ n.localName == 'h5' || n.localName == 'h6' ||
+ n.localName == 'header'))
+ return NodeFilter.FILTER_ACCEPT;
+
+ // Skip the rest.
+ return NodeFilter.FILTER_SKIP;
+}</pre>
+ </div>
+
+ <h5 id=associatedSection><span class=secno>3.8.11.2. </span>Determining
+ which heading and section applies to a particular node</h5>
+
+ <p>Given a particular node, user agents must use the following algorithm,
+ <em>in the given order</em>, to determine which heading and section the
+ node is most closely associated with. The processing of this algorithm
+ must stop as soon as the associated section and heading are established
+ (even if they are established to be nothing).
+
+ <ol>
+ <li>If the node has an ancestor that is a <code><a
+ href="#header">header</a></code> element, then the associated heading is
+ the most distant such ancestor. The associated section is that <code><a
+ href="#header">header</a></code>'s associated section (i.e. repeat this
+ algorithm for that <code><a href="#header">header</a></code>).
+
+ <li>If the node has an ancestor that is an <code><a
+ href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code> element, then
+ the associated heading is the most distant such ancestor. The associated
+ section is that heading's section (i.e. repeat this algorithm for that
+ heading element).
+
+ <li>If the node is an <code><a href="#h1">h1</a></code>-<code><a
+ href="#h6">h6</a></code> element or a <code><a
+ href="#header">header</a></code> element, then the associated heading is
+ the element itself. The UA must then generate the <a
+ href="#outlines">hypothetical section tree</a> described in the previous
+ section, rooted at the nearest section ancestor (or the <a
+ href="#root-element">root element</a> if there is no such ancestor). If
+ the parent of the heading in that hypothetical tree is an element in the
+ real document tree, then that element is the associated section.
+ Otherwise, there is no associated section element.
+
+ <li>If the node is a sectioning element, then the associated section is
+ itself. The UA must then generate the <a href="#outlines">hypothetical
+ section tree</a> described in the previous section, rooted at the section
+ itself. If the section element, in that hypothetical tree, has a child
+ element that is an <code><a href="#h1">h1</a></code>-<code><a
+ href="#h6">h6</a></code> element or a <code><a
+ href="#header">header</a></code> element, then that element is the
+ associated heading. Otherwise, there is no associated heading element.
+
+ <li>If the node is a <code><a href="#footer">footer</a></code> or <code><a
+ href="#address">address</a></code> element, then the associated section
+ is the nearest ancestor sectioning element, if there is one. The node's
+ associated heading is the same as that sectioning element's associated
+ heading (i.e. repeat this algorithm for that sectioning element). If
+ there is no ancestor sectioning element, the element has no associated
+ section nor an associated heading.
+
+ <li>Otherwise, the node is just a normal node, and the document has to be
+ examined more closely to determine its section and heading. Create a view
+ rooted at the nearest ancestor sectioning element (or the <a
+ href="#root-element">root element</a> if there is none) that has just
+ <code><a href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code>
+ elements, <code><a href="#header">header</a></code> elements, the node
+ itself, and sectioning elements other than <code><a
+ href="#blockquote">blockquote</a></code> elements. (Descendants of any of
+ the nodes in this view can be ignored, as can any node later in the tree
+ than the node in question, as the algorithm below merely walks backwards
+ up this view.)
+
+ <li>Let <var title="">n</var> be an iterator for this view, initialised at
+ the node in question.
+
+ <li>Let <var title="">c</var> be the current best candidate heading,
+ initially null, and initially not used. It is used when top-level heading
+ candidates are to be searched for (see below).
+
+ <li>Repeat these steps (which effectively goes backwards through the
+ node's previous siblings) until an answer is found:
+ <ol>
+ <li>If <var title="">n</var> points to a node with no previous sibling,
+ and <var title="">c</var> is null, then return the node's parent node
+ as the answer. If the node has no parent node, return null as the
+ answer.
+
+ <li>Otherwise, if <var title="">n</var> points to a node with no
+ previous sibling, return <var title="">c</var> as the answer.
+
+ <li>Adjust <var title="">n</var> so that it points to the previous
+ sibling of the current position.
+
+ <li>If <var title="">n</var> is pointing at an <code><a
+ href="#h1">h1</a></code> or <code><a href="#header">header</a></code>
+ element, then return that element as the answer.
+
+ <li>If <var title="">n</var> is pointing at an <code><a
+ href="#h2">h2</a></code>-<code><a href="#h6">h6</a></code> element, and
+ heading candidates are not being searched for, then return that element
+ as the answer.
+
+ <li>Otherwise, if <var title="">n</var> is pointing at an <code><a
+ href="#h2">h2</a></code>-<code><a href="#h6">h6</a></code> element, and
+ either <var title="">c</var> is still null, or <var title="">c</var> is
+ a heading of lower <a href="#rank">rank</a> than this one, then set
+ <var title="">c</var> to be this element, and continue going backwards
+ through the previous siblings.
+
+ <li>If <var title="">n</var> is pointing at a sectioning element, then
+ from this point on top-level heading candidates are being searched for.
+ (Specifically, we are looking for the nearest top-level header for the
+ current section.) Continue going backwards through the previous
+ siblings.
+ </ol>
+
+ <li>If the answer from the previous step (the loop) is null, which can
+ only happen if the node has no preceeding headings and is not contained
+ in a sectioning element, then there is no associated heading and no
+ associated section.
+
+ <li>Otherwise, if the answer from the earlier loop step is a sectioning
+ element, then the associated section is that element and the associated
+ heading is that sectioning element's associated heading (i.e. repeat this
+ algorithm for that section).
+
+ <li>Otherwise, if the answer from that same earlier step is an <code><a
+ href="#h1">h1</a></code>-<code><a href="#h6">h6</a></code> element or a
+ <code><a href="#header">header</a></code> element, then the associated
+ heading is that element and the associated section is that heading
+ element's associated section (i.e. repeat this algorithm for that
+ heading).
+ </ol>
+
+ <p class=note>Not all nodes have an associated header or section. For
+ example, if a section is implied, as when multiple headers are found in
+ one sectioning element, then a node in that section has an anonymous
+ associated section (its section is not represented by a real element), and
+ the algorithm above does not associate that node with any particular
+ sectioning element.
+
+ <div class=example>
+ <p>For the following fragment:</p>
+
+ <pre>&lt;body&gt;
+ &lt;h1&gt;X&lt;/h1&gt;
+ &lt;h2&gt;X&lt;/h2&gt;
+ &lt;blockquote&gt;
+ &lt;h3&gt;X&lt;/h3&gt;
+ &lt;/blockquote&gt;
+ &lt;p id="a"&gt;X&lt;/p&gt;
+ &lt;h4&gt;Text Node A&lt;/h4&gt;
+ &lt;section&gt;
+ &lt;h5&gt;X&lt;/h5&gt;
+ &lt;/section&gt;
+ &lt;p&gt;Text Node B&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+ <p>The associations are as follows (not all associations are shown):</p>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Node
+
+ <th>Associated heading
+
+ <th>Associated section
+
+ <tbody>
+ <tr>
+ <td><code>&lt;body&gt;</code>
+
+ <td><code>&lt;h1&gt;</code>
+
+ <td><code>&lt;body&gt;</code>
+
+ <tr>
+ <td><code>&lt;h1&gt;</code>
+
+ <td><code>&lt;h1&gt;</code>
+
+ <td><code>&lt;body&gt;</code>
+
+ <tr>
+ <td><code>&lt;h2&gt;</code>
+
+ <td><code>&lt;h2&gt;</code>
+
+ <td>None.
+
+ <tr>
+ <td><code>&lt;blockquote&gt;</code>
+
+ <td><code>&lt;h2&gt;</code>
+
+ <td>None.
+
+ <tr>
+ <td><code>&lt;h3&gt;</code>
+
+ <td><code>&lt;h3&gt;</code>
+
+ <td><code>&lt;blockquote&gt;</code>
+
+ <tr>
+ <td><code>&lt;p id="a"&gt;</code>
+
+ <td><code>&lt;h2&gt;</code>
+
+ <td>None.
+
+ <tr>
+ <td><code>Text Node A</code>
+
+ <td><code>&lt;h4&gt;</code>
+
+ <td>None.
+
+ <tr>
+ <td><code>Text Node B</code>
+
+ <td><code>&lt;h1&gt;</code>
+
+ <td><code>&lt;body&gt;</code>
+ </table>
+ </div>
+
+ <h5 id=distinguishing><span class=secno>3.8.11.3. </span>Distinguishing
+ site-wide headers from page headers</h5>
+
+ <p>Given the <a href="#outlines">hypothetical section tree</a>, but
+ ignoring any sections created for <code><a href="#nav">nav</a></code> and
+ <code><a href="#aside">aside</a></code> elements, and any of their
+ descendants, if the root of the tree is <a href="#the-body0">the
+ <code>body</code> element</a>'s section, and it has only a single
+ subsection which is created by an <code><a
+ href="#article">article</a></code> element, then the header of <a
+ href="#the-body0">the <code>body</code> element</a> should be assumed to
+ be a site-wide header, and the header of the <code><a
+ href="#article">article</a></code> element should be assumed to be the
+ page's header.
+
+ <p>If a page starts with a heading that is common to the whole site, the
+ document must be authored such that, in the document's <a
+ href="#outlines">hypothetical section tree</a>, ignoring any sections
+ created for <code><a href="#nav">nav</a></code> and <code><a
+ href="#aside">aside</a></code> elements and any of their descendants, the
+ root of the tree is <a href="#the-body0">the <code>body</code>
+ element</a>'s section, its heading is the site-wide heading, <a
+ href="#the-body0">the <code>body</code> element</a> has just one
+ subsection, that subsection is created by an <code><a
+ href="#article">article</a></code> element, and that <code><a
+ href="#article">article</a></code>'s header is the page heading.
+
+ <p>If a page does not contain a site-wide heading, then the page must be
+ authored such that, in the document's <a href="#outlines">hypothetical
+ section tree</a>, ignoring any sections created for <code><a
+ href="#nav">nav</a></code> and <code><a href="#aside">aside</a></code>
+ elements and any of their descendants, either <a href="#the-body0">the
+ <code>body</code> element</a> has no subsections, or it has more than one
+ subsection, or it has a single subsection but that subsection is not
+ created by an <code><a href="#article">article</a></code> element.
+
+ <p class=note>Conceptually, a site is thus a document with many articles
+ &mdash; when those articles are split into many pages, the heading of the
+ original single page becomes the heading of the site, repeated on every
+ page.
+
+ <h3 id=prose><span class=secno>3.9. </span>Prose</h3>
+
+ <h4 id=the-p><span class=secno>3.9.1. </span>The <dfn
+ id=p><code>p</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd><a href="#significant" title="significant inline
+ content">Significant</a> <a href="#inline-level0">inline-level
+ content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#p">p</a></code> element represents a <a
+ href="#paragraph">paragraph</a>.
+
+ <p><code><a href="#p">p</a></code> elements can contain a mixture of <a
+ href="#strictly">strictly inline-level content</a>, such as text, images,
+ hyperlinks, etc, and <a href="#structured">structured inline-level
+ elements</a>, such as lists, tables, and block quotes. <code><a
+ href="#p">p</a></code> elements must not be <a href="#significant"
+ title="significant inline content">empty</a>.
+
+ <div class=example>
+ <p>The following examples are conforming HTML fragments:</p>
+
+ <pre>&lt;p&gt;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.&lt;/p&gt;</pre>
+
+ <pre>&lt;fieldset&gt;
+ &lt;legend&gt;Personal information&lt;/legend&gt;
+ &lt;p&gt;
+ &lt;label&gt;Name: &lt;input name="n"&gt;&lt;/label&gt;
+ &lt;label&gt;&lt;input name="anon" type="checkbox"&gt; Hide from other users&lt;/label&gt;
+ &lt;/p&gt;
+ &lt;p&gt;&lt;label&gt;Address: &lt;textarea name="a"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
+&lt;/fieldset&gt;</pre>
+
+ <pre>&lt;p&gt;There was once an example from Femley,&lt;br&gt;
+Whose markup was of dubious quality.&lt;br&gt;
+The validator complained,&lt;br&gt;
+So the author was pained,&lt;br&gt;
+To move the error from the markup to the rhyming.&lt;/p&gt;</pre>
+ </div>
+
+ <p>The <code><a href="#p">p</a></code> element should not be used when a
+ more specific element is more appropriate.
+
+ <div class=example>
+ <p>The following example is technically correct:</p>
+
+ <pre>&lt;section&gt;
+ &lt;!-- ... --&gt;
+ &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
+ &lt;p&gt;Author: fred@example.com&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+ <p>However, it would be better marked-up as:</p>
+
+ <pre>&lt;section&gt;
+ &lt;!-- ... --&gt;
+ &lt;footer&gt;Last modified: 2001-04-23&lt;/footer&gt;
+ &lt;address&gt;Author: fred@example.com&lt;/address&gt;
+&lt;/section&gt;</pre>
+
+ <p>Or:</p>
+
+ <pre>&lt;section&gt;
+ &lt;!-- ... --&gt;
+ &lt;footer&gt;
+ &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
+ &lt;address&gt;Author: fred@example.com&lt;/address&gt;
+ &lt;/footer&gt;
+&lt;/section&gt;</pre>
+ </div>
+
+ <h4 id=the-hr><span class=secno>3.9.2. </span>The <dfn
+ id=hr><code>hr</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#hr">hr</a></code> element represents a <a
+ href="#paragraph">paragraph</a>-level thematic break, e.g. a scene change
+ in a story, or a transition to another topic within a section of a
+ reference book.
+
+ <h4 id=the-br><span class=secno>3.9.3. </span>The <dfn
+ id=br><code>br</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#br">br</a></code> element represents a line break.
+
+ <p><code><a href="#br">br</a></code> elements must be empty. Any content
+ inside <code><a href="#br">br</a></code> elements must not be considered
+ part of the surrounding text.
+
+ <p><code><a href="#br">br</a></code> elements must only be used for line
+ breaks that are actually part of the content, as in poems or addresses.
+
+ <div class=example>
+ <p>The following example is correct usage of the <code><a
+ href="#br">br</a></code> element:</p>
+
+ <pre>&lt;p&gt;P. Sherman&lt;br&gt;
+42 Wallaby Way&lt;br&gt;
+Sydney&lt;/p&gt;</pre>
+ </div>
+
+ <p><code><a href="#br">br</a></code> elements must not be used for
+ separating thematic groups in a paragraph.
+
+ <div class=example>
+ <p>The following examples are non-conforming, as they abuse the <code><a
+ href="#br">br</a></code> element:</p>
+
+ <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
+&lt;a ...&gt;Add a comment.&lt;a&gt;&lt;/p&gt;</pre>
+
+ <pre>&lt;p&gt;Name: &lt;input name="name"&gt;&lt;br&gt;
+Address: &lt;input name="address"&gt;&lt;/p&gt;</pre>
+
+ <p>Here are alternatives to the above, which are correct:</p>
+
+ <pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;&lt;a ...&gt;Add a comment.&lt;a&gt;&lt;/p&gt;</pre>
+
+ <pre>&lt;p&gt;Name: &lt;input name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Address: &lt;input name="address"&gt;&lt;/p&gt;</pre>
+ <!-- XXX should have labels in the examples above --></div>
+
+ <h4 id=the-dialog><span class=secno>3.9.4. </span>The <dfn
+ id=dialog><code>dialog</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>Zero or more pairs of <code><a href="#dt">dt</a></code> and <code><a
+ href="#dd">dd</a></code> elements.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#dialog">dialog</a></code> element represents a
+ conversation.
+
+ <p>Each part of the conversation must have an explicit talker (or speaker)
+ given by a <code><a href="#dt">dt</a></code> element, and a discourse (or
+ quote) given by a <code><a href="#dd">dd</a></code> element.
+
+ <div class=example>
+ <p>This example demonstrates this using an extract from Abbot and
+ Costello's famous sketch, <cite>Who's on first</cite>:</p>
+
+ <pre>&lt;dialog>
+ &lt;dt>Costello
+ &lt;dd> Look, you gotta first baseman?
+ &lt;dt> Abbott
+ &lt;dd> Certainly.
+ &lt;dt> Costello
+ &lt;dd> Who's playing first?
+ &lt;dt> Abbott
+ &lt;dd> That's right.
+ &lt;dt> Costello
+ &lt;dd> When you pay off the first baseman every month, who gets the money?
+ &lt;dt> Abbott
+ &lt;dd> Every dollar of it.
+&lt;/dialog></pre>
+ </div>
+
+ <p class=note>Text in a <code><a href="#dt">dt</a></code> element in a
+ <code><a href="#dialog">dialog</a></code> element is implicitly the source
+ of the text given in the following <code><a href="#dd">dd</a></code>
+ element, and the contents of the <code><a href="#dd">dd</a></code> element
+ are implicitly a quote from that speaker. There is thus no need to include
+ <code><a href="#cite2">cite</a></code>, <code><a href="#q">q</a></code>,
+ or <code><a href="#blockquote">blockquote</a></code> elements in this
+ markup. Indeed, a <code><a href="#q">q</a></code> element inside a
+ <code><a href="#dd">dd</a></code> element in a conversation would actually
+ imply the person talking were themselves quoting someone else. See the
+ <code><a href="#cite2">cite</a></code>, <code><a href="#q">q</a></code>,
+ and <code><a href="#blockquote">blockquote</a></code> elements for other
+ ways to cite or quote.
+
+ <h3 id=preformatted><span class=secno>3.10. </span>Preformatted text</h3>
+
+ <h4 id=the-pre><span class=secno>3.10.1. </span>The <dfn
+ id=pre><code>pre</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>, and <a href="#structured" title="structured inline-level
+ elements">structured inline-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dd>Where <a href="#structured">structured inline-level elements</a> are
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#pre">pre</a></code> element represents a block of
+ preformatted text, in which structure is represented by typographic
+ conventions rather than by elements.
+
+ <p>Some examples of cases where the <code><a href="#pre">pre</a></code>
+ element could be used:
+
+ <ul>
+ <li>Including an e-mail, with paragraphs indicated by blank lines, lists
+ indicated by lines prefixed with a bullet, and so on.
+
+ <li>Including fragments of computer code, with structure indicated
+ according to the conventions of that language.
+
+ <li>Displaying ASCII art.</li>
+ <!-- XXX need a note about non-visual UAs -->
+ </ul>
+
+ <p>If, ignoring <a href="#text-node" title="text node">text nodes</a>
+ consisting only of <a href="#inter-element" title="inter-element
+ whitespace">whitespace</a>, the only child of a <code><a
+ href="#pre">pre</a></code> is a <code><a href="#code">code</a></code>
+ element, then the <code><a href="#pre">pre</a></code> element represents a
+ block of computer code.
+
+ <p>If, ignoring <a href="#text-node" title="text node">text nodes</a>
+ consisting only of <a href="#inter-element" title="inter-element
+ whitespace">whitespace</a>, the only child of a <code><a
+ href="#pre">pre</a></code> is a <code><a href="#samp">samp</a></code>
+ element, then the <code><a href="#pre">pre</a></code> element represents a
+ block of computer output.</p>
+ <!-- XXX examples -->
+
+ <h3 id=lists0><span class=secno>3.11. </span>Lists</h3>
+
+ <h4 id=the-ol><span class=secno>3.11.1. </span>The <dfn
+ id=ol><code>ol</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>, and <a href="#structured" title="structured inline-level
+ elements">structured inline-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dd>Where <a href="#structured">structured inline-level elements</a> are
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Zero or more <code><a href="#li">li</a></code> elements.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-ol-start><a href="#start0">start</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlolistelement>HTMLOListElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute long <a href="#start1" title=dom-ol-start>start</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#ol">ol</a></code> element represents an ordered list
+ of items (which are represented by <code><a href="#li">li</a></code>
+ elements).
+
+ <p>The <dfn id=start0 title=attr-ol-start><code>start</code></dfn>
+ attribute, if present, must be a <a href="#valid0">valid integer</a>
+ giving the ordinal value of the first list item.
+
+ <p>If the <code title=attr-ol-start><a href="#start0">start</a></code>
+ attribute is present, user agents must <a href="#rules0" title="rules for
+ parsing integers">parse it as an integer</a>, in order to determine the
+ attribute's value. The default value, used if the attribute is missing or
+ if the value cannot be converted to a number according to the referenced
+ algorithm, is 1.
+
+ <p>The items of the list are the <code><a href="#li">li</a></code> element
+ child nodes of the <code><a href="#ol">ol</a></code> element, in <a
+ href="#tree-order">tree order</a>.
+
+ <p>The first item in the list has the ordinal value given by the <code><a
+ href="#ol">ol</a></code> element's <code title=attr-ol-start><a
+ href="#start0">start</a></code> attribute, unless that <code><a
+ href="#li">li</a></code> element has a <code title=attr-li-value><a
+ href="#value">value</a></code> attribute with a value that can be
+ successfully parsed, in which case it has the ordinal value given by that
+ <code title=attr-li-value><a href="#value">value</a></code> attribute.
+
+ <p>Each subsequent item in the list has the ordinal value given by its
+ <code title=attr-li-value><a href="#value">value</a></code> attribute, if
+ it has one, or, if it doesn't, the ordinal value of the previous item,
+ plus one.
+
+ <p>The <dfn id=start1 title=dom-ol-start><code>start</code></dfn> DOM
+ attribute must <a href="#reflect">reflect</a> the value of the <code
+ title=attr-ol-start><a href="#start0">start</a></code> content attribute.</p>
+ <!-- XXX resuming numbering of lists from previous lists? -->
+ <!-- XXX counting up and down? -->
+ <!-- XXX reverse-counted lists? -->
+
+ <h4 id=the-ul><span class=secno>3.11.2. </span>The <dfn
+ id=ul><code>ul</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>, and <a href="#structured" title="structured inline-level
+ elements">structured inline-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dd>Where <a href="#structured">structured inline-level elements</a> are
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Zero or more <code><a href="#li">li</a></code> elements.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#ul">ul</a></code> element represents an unordered
+ list of items (which are represented by <code><a href="#li">li</a></code>
+ elements).
+
+ <p>The items of the list are the <code><a href="#li">li</a></code> element
+ child nodes of the <code><a href="#ul">ul</a></code> element.
+
+ <h4 id=the-li><span class=secno>3.11.3. </span>The <dfn
+ id=li><code>li</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Inside <code><a href="#ol">ol</a></code> elements.
+
+ <dd>Inside <code><a href="#ul">ul</a></code> elements.
+
+ <dd>Inside <code><a href="#menu">menu</a></code> elements.
+
+ <dt>Content model:
+
+ <dd>When the element is a child of an <code><a href="#ol">ol</a></code> or
+ <code><a href="#ul">ul</a></code> element and the grandchild of an
+ element that is <a href="#determining0" title="Determining if a
+ particular element contains block-level elements or inline-level
+ content">being used as an inline-level content container</a>, or, when
+ the element is a child of a <code><a href="#menu">menu</a></code>
+ element: <a href="#inline-level0">inline-level content</a>.
+
+ <dd>Otherwise: zero or more <a href="#block-level0">block-level
+ elements</a>, or <a href="#inline-level0">inline-level content</a> (but
+ not both).
+
+ <dt>Element-specific attributes:
+
+ <dd>If the element is a child of an <code><a href="#ol">ol</a></code>
+ element: <code title=attr-li-value><a href="#value">value</a></code>
+
+ <dd>If the element is not the child of an <code><a
+ href="#ol">ol</a></code> element: None.
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmllielement>HTMLLIElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute long <a href="#value0" title=dom-li-value>value</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#li">li</a></code> element represents a list item. If
+ its parent element is an <code><a href="#ol">ol</a></code>, <code><a
+ href="#ul">ul</a></code>, or <code><a href="#menu">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="#li">li</a></code>
+ element.
+
+ <p>When the list item is the child of an <code><a href="#ol">ol</a></code>
+ or <code><a href="#ul">ul</a></code> element, the content model of the
+ item depends on the way that parent element was used. If it was used as
+ structured inline content (i.e. if <em>that</em> element's parent was <a
+ href="#determining0" title="Determining if a particular element contains
+ block-level elements or inline-level content">used as an inline-level
+ content</a> container), then the <code><a href="#li">li</a></code> element
+ must only contain <a href="#inline-level0">inline-level content</a>.
+ Otherwise, the element may be used either for <a href="#inline-level0"
+ title="inline-level content">inline content</a> or <a
+ href="#block-level0">block-level elements</a>.
+
+ <p>When the list item is the child of a <code><a
+ href="#menu">menu</a></code> element, the <code><a
+ href="#li">li</a></code> element must contain only <a
+ href="#inline-level0">inline-level content</a>.
+
+ <p>When the list item is not the child of an <code><a
+ href="#ol">ol</a></code>, <code><a href="#ul">ul</a></code>, or <code><a
+ href="#menu">menu</a></code> element, e.g. because it is an orphaned node
+ not in the document, it may contain either for <a href="#inline-level0"
+ title="inline-level content">inline content</a> or <a
+ href="#block-level0">block-level elements</a>.
+
+ <p>When <a href="#determining0" title="Determining if a particular element
+ contains block-level elements or inline-level content">used as an
+ inline-level content</a> container, the list item represents a single <a
+ href="#paragraph">paragraph</a>.
+
+ <p>The <dfn id=value title=attr-li-value><code>value</code></dfn>
+ attribute, if present, must be a <a href="#valid0">valid integer</a>
+ giving the ordinal value of the first list item.
+
+ <p>If the <code title=attr-li-value><a href="#value">value</a></code>
+ attribute is present, user agents must <a href="#rules0" title="rules for
+ parsing integers">parse it as an integer</a>, in order to determine the
+ attribute's value. If the attribute's value cannot be converted to a
+ number, it must be treated as if the attribute was absent. The attribute
+ has no default value.
+
+ <p>The <code title=attr-li-value><a href="#value">value</a></code>
+ attribute is processed relative to the element's parent <code><a
+ href="#ol">ol</a></code> element (q.v.), if there is one. If there is not,
+ the attribute has no effect.
+
+ <p>The <dfn id=value0 title=dom-li-value><code>value</code></dfn> DOM
+ attribute must <a href="#reflect">reflect</a> the value of the <code
+ title=dom-li-value><a href="#value0">value</a></code> content attribute.
+
+ <h4 id=the-dl><span class=secno>3.11.4. </span>The <dfn
+ id=dl><code>dl</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>, and <a href="#structured" title="structured inline-level
+ elements">structured inline-level element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dd>Where <a href="#structured">structured inline-level elements</a> are
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Zero or more groups each consisting of one or more <code><a
+ href="#dt">dt</a></code> elements followed by one or mode <code><a
+ href="#dd">dd</a></code> elements.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#dl">dl</a></code> element introduces an unordered
+ 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="#dt">dt</a></code> elements) followed by one or more values
+ (<code><a href="#dd">dd</a></code> elements).
+
+ <p>Name-value groups may be terms and definitions, metadata topics and
+ values, or any other groups of name-value data.
+
+ <div class=example>
+ <p>The following are all conforming HTML fragments.</p>
+
+ <p>In the following example, one entry ("Authors") is linked to two values
+ ("John" and "Luke").</p>
+
+ <pre>&lt;dl&gt;
+ &lt;dt&gt; Authors
+ &lt;dd&gt; John
+ &lt;dd&gt; Luke
+ &lt;dt&gt; Editor
+ &lt;dd&gt; Frank
+&lt;/dl&gt;</pre>
+
+ <p>In the following example, one definition is linked to two terms.</p>
+
+ <pre>&lt;dl&gt;
+ &lt;dt lang="en-US"&gt; &lt;dfn>color&lt;/dfn> &lt;/dt&gt;
+ &lt;dt lang="en-GB"&gt; &lt;dfn>colour&lt;/dfn> &lt;/dt&gt;
+ &lt;dd&gt; 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. &lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+ <p>The following example illustrates the use of the <code><a
+ href="#dl">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>&lt;dl&gt;
+ &lt;dt&gt; Last modified time &lt;/dt&gt;
+ &lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt;
+ &lt;dt&gt; Recommended update interval &lt;/dt&gt;
+ &lt;dd&gt; 60s &lt;/dd&gt;
+ &lt;dt&gt; Authors &lt;/dt&gt;
+ &lt;dt&gt; Editors &lt;/dt&gt;
+ &lt;dd&gt; Robert Rothman &lt;/dd&gt;
+ &lt;dd&gt; Daniel Jackson &lt;/dd&gt;
+&lt;/dl&gt;</pre>
+ </div>
+
+ <p>If a <code><a href="#dl">dl</a></code> element is empty, it contains no
+ groups.
+
+ <p>If a <code><a href="#dl">dl</a></code> element contains non-<a
+ href="#inter-element" title="inter-element whitespace">whitespace</a> <a
+ href="#text-node" title="text node">text nodes</a>, or elements other than
+ <code><a href="#dt">dt</a></code> and <code><a href="#dd">dd</a></code>,
+ then those elements or <a href="#text-node" title="text node">text
+ nodes</a> do not form part of any groups in that <code><a
+ href="#dl">dl</a></code>, and the document is non-conforming.
+
+ <p>If a <code><a href="#dl">dl</a></code> element contains only <code><a
+ href="#dt">dt</a></code> elements, then it consists of one group with
+ names but no values, and the document is non-conforming.
+
+ <p>If a <code><a href="#dl">dl</a></code> element contains only <code><a
+ href="#dd">dd</a></code> elements, then it consists of one group with
+ values but no names, and the document is non-conforming.
+
+ <p class=note>The <code><a href="#dl">dl</a></code> element is
+ inappropriate for marking up dialogue, since dialogue is ordered (each
+ speaker/line pair comes after the next). For an example of how to mark up
+ dialogue, see the <code><a href="#dialog">dialog</a></code> element.
+
+ <h4 id=the-dt><span class=secno>3.11.5. </span>The <dfn
+ id=dt><code>dt</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Before <code><a href="#dd">dd</a></code> or <code><a
+ href="#dt">dt</a></code> elements inside <code><a
+ href="#dl">dl</a></code> elements.
+
+ <dd>Before a <code><a href="#dd">dd</a></code> element inside a <code><a
+ href="#dialog">dialog</a></code> element.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#dt">dt</a></code> element represents the term, or
+ name, part of a term-description group in a description list (<code><a
+ href="#dl">dl</a></code> element), and the talker, or speaker, part of a
+ talker-discourse pair in a conversation (<code><a
+ href="#dialog">dialog</a></code> element).
+
+ <p class=note>The <code><a href="#dt">dt</a></code> element itself, when
+ used in a <code><a href="#dl">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="#dfn">dfn</a></code> element.
+
+ <h4 id=the-dd><span class=secno>3.11.6. </span>The <dfn
+ id=dd><code>dd</code></dfn> element</h4>
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>After <code><a href="#dt">dt</a></code> or <code><a
+ href="#dd">dd</a></code> elements inside <code><a
+ href="#dl">dl</a></code> elements.
+
+ <dd>After a <code><a href="#dt">dt</a></code> element inside a <code><a
+ href="#dialog">dialog</a></code> element.
+
+ <dt>Content model:
+
+ <dd>When the element is a child of a <code><a href="#dl">dl</a></code>
+ element and the grandchild of an element that is <a href="#determining0"
+ title="Determining if a particular element contains block-level elements
+ or inline-level content">being used as an inline-level content
+ container</a>: <a href="#inline-level0">inline-level content</a>.
+
+ <dd>Otherwise: zero or more <a href="#block-level0">block-level
+ elements</a>, or <a href="#inline-level0">inline-level content</a> (but
+ not both).
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#dd">dd</a></code> element represents the
+ description, definition, or value, part of a term-description group in a
+ description list (<code><a href="#dl">dl</a></code> element), and the
+ discourse, or quote, part in a conversation (<code><a
+ href="#dialog">dialog</a></code> element).
+
+ <p>The content model of a <code><a href="#dd">dd</a></code> element depends
+ on the way its parent element is being used. If the parent element is a
+ <code><a href="#dl">dl</a></code> element that is being used as structured
+ inline content (i.e. if the <code><a href="#dl">dl</a></code> element's
+ parent element is being <a href="#determining0" title="Determining if a
+ particular element contains block-level elements or inline-level
+ content">used as an inline-level content</a> container), then the <code><a
+ href="#dd">dd</a></code> element must only contain <a
+ href="#inline-level0">inline-level content</a>.
+
+ <p>Otherwise, the element may be used either for <a href="#inline-level0"
+ title="inline-level content">inline content</a> or <a
+ href="#block-level0">block-level elements</a>.
+
+ <h3 id=phrase><span class=secno>3.12. </span>Phrase elements</h3>
+ <!-- XXX ruby (delayed until someone can define it with error handling rules) -->
+
+ <h4 id=the-a><span class=secno>3.12.1. </span>The <dfn
+ id=a><code>a</code></dfn> element</h4>
+
+ <p><a href="#interactive1" title="interactive elements">Interactive</a>, <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed, if there are no ancestor <a href="#interactive1">interactive
+ elements</a>.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#significant" title="significant inline content">significant</a> <a
+ href="#strictly">strictly inline-level content</a>, but there must be no
+ <a href="#interactive1" title="interactive elements">interactive</a>
+ descendants.
+
+ <dd>Otherwise: any <a href="#significant" title="significant inline
+ content">significant</a> <a href="#inline-level0">inline-level
+ content</a>, but there must be no <a href="#interactive1"
+ title="interactive elements">interactive</a> descendants.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-hyperlink-href><a href="#href6">href</a></code>
+
+ <dd><code title=attr-hyperlink-target><a href="#target3">target</a></code>
+
+ <dd><code title=attr-hyperlink-ping><a href="#ping">ping</a></code>
+
+ <dd><code title=attr-hyperlink-rel><a href="#rel3">rel</a></code>
+
+ <dd><code title=attr-hyperlink-media><a href="#media12">media</a></code>
+
+ <dd><code title=attr-hyperlink-hreflang><a
+ href="#hreflang3">hreflang</a></code>
+
+ <dd><code title=attr-hyperlink-type><a href="#type17">type</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlanchorelement>HTMLAnchorElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#href3" title=dom-a-href>href</a>;
+ attribute DOMString <a href="#target1" title=dom-a-target>target</a>;
+ attribute DOMString <a href="#ping0" title=dom-a-ping>ping</a>;
+ attribute DOMString <a href="#rel1" title=dom-a-rel>rel</a>;
+ readonly attribute DOMTokenList <a href="#rellist0" title=dom-a-relList>relList</a>;
+ attribute DOMString <a href="#media4" title=dom-a-media>media</a>;
+ attribute DOMString <a href="#hreflang1" title=dom-a-hreflang>hreflang</a>;
+ attribute DOMString <a href="#type3" title=dom-a-type>type</a>;
+};</pre>
+
+ <p>The <code title=command-ro><a href="#command2">Command</a></code>
+ interface must also be implemented by this element.</p>
+ </dl>
+
+ <p>If the <code><a href="#a">a</a></code> element has an <code
+ title=attr-hyperlink-href><a href="#href6">href</a></code> attribute, then
+ it represents a <a href="#hyperlinks">hyperlink</a>.
+
+ <p>If the <code><a href="#a">a</a></code> element has no <code
+ title=attr-hyperlink-href><a href="#href6">href</a></code> attribute, then
+ the element is a placeholder for where a link might otherwise have been
+ placed, if it had been relevant.
+
+ <p>The <code title=attr-hyperlink-target><a
+ href="#target3">target</a></code>, <code title=attr-hyperlink-ping><a
+ href="#ping">ping</a></code>, <code title=attr-hyperlink-rel><a
+ href="#rel3">rel</a></code>, <code title=attr-hyperlink-media><a
+ href="#media12">media</a></code>, <code title=attr-hyperlink-hreflang><a
+ href="#hreflang3">hreflang</a></code>, and <code
+ title=attr-hyperlink-type><a href="#type17">type</a></code> attributes
+ must be omitted if the <code title=attr-hyperlink-href><a
+ href="#href6">href</a></code> attribute is not present.</p>
+ <!-- XXX really? that makes it harder to use as a
+ placeholder. -->
+
+ <div class=example>
+ <p>If a site uses a consistent navigation toolbar on every page, then the
+ link that would normally link to the page itself could be marked up using
+ an <code><a href="#a">a</a></code> element:</p>
+
+ <pre>&lt;nav>
+ &lt;ul>
+ &lt;li> &lt;a href="/">Home&lt;/a> &lt;/li>
+ &lt;li> &lt;a href="/news">News&lt;/a> &lt;/li>
+ &lt;li> &lt;a>Examples&lt;/a> &lt;/li>
+ &lt;li> &lt;a href="/legal">Legal&lt;/a> &lt;/li>
+ &lt;/ul>
+&lt;/nav></pre>
+ </div>
+
+ <p>Interactive user agents should allow users to <a href="#following0"
+ title="following hyperlinks">follow hyperlinks</a> created using the
+ <code><a href="#a">a</a></code> element. The <code
+ title=attr-hyperlink-href><a href="#href6">href</a></code>, <code
+ title=attr-hyperlink-target><a href="#target3">target</a></code> and <code
+ title=attr-hyperlink-ping><a href="#ping">ping</a></code> attributes
+ decide how the link is followed. The <code title=attr-hyperlink-rel><a
+ href="#rel3">rel</a></code>, <code title=attr-hyperlink-media><a
+ href="#media12">media</a></code>, <code title=attr-hyperlink-hreflang><a
+ href="#hreflang3">hreflang</a></code>, and <code
+ title=attr-hyperlink-type><a href="#type17">type</a></code> attributes may
+ be used to indicate to the user the likely nature of the target resource
+ before the user follows the link.
+
+ <p>The <a href="#activation0">activation behavior</a> of <code><a
+ href="#a">a</a></code> elements that represent <span>hyperlinks</span> is
+ to run the following steps:
+
+ <ol>
+ <li>
+ <p>If the <code title=event-DOMActivate>DOMActivate</code> event in
+ question is not <span title=concept-events-trusted>trusted</span> (i.e.
+ a <code title=dom-click><a href="#click">click()</a></code> method call
+ was the reason for the event being dispatched), and the <code><a
+ href="#a">a</a></code> element's <code title=attr-hyperlink-target><a
+ href="#target3">target</a></code> attribute is <span
+ class=big-issue>...</span> then raise an <code>INVALID_ACCESS_ERR</code>
+ exception and abort these steps.
+
+ <li>
+ <p>If the target of the <code title=event-DOMActivate>DOMActivate</code>
+ event is an <code><a href="#img">img</a></code> element with an <code
+ title=attr-img-ismap><a href="#ismap">ismap</a></code> attribute
+ specified, then server-side image map processing must be performed, as
+ follows:</p>
+
+ <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A...%3Ca%20href%3D%22%23%22%3E%3Cimg%20ismap%20usemap%3D%22%23a%22%20src%3D/resources/images/smallcats%3E%3C/a%3E%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Drect%20coords%3D0%2C0%2C50%2C50%20href%3Db%3E%3C/map%3E -->
+
+ <li>If the <code title=event-DOMActivate>DOMActivate</code> event was
+ dispatched as the result of a real pointing-device-triggered <code
+ title=event-click>click</code> event on the <code><a
+ href="#img">img</a></code> element, then let <var title="">x</var> be
+ the distance in CSS pixels from the left edge of the image to the
+ location of the click, and let <var title="">y</var> be the distance in
+ CSS pixels from the top edge of the image to the location of the click.
+ Otherwise, let <var title="">x</var> and <var title="">y</var> be zero.
+
+ <li>Let the <dfn id=hyperlink2><var>hyperlink suffix</var></dfn> be a
+ U+003F QUESTION MARK character, the value of <var title="">x</var>
+ expressed as a base-ten integer using ASCII digits (U+0030 DIGIT ZERO
+ to U+0039 DIGIT NINE), a U+002C COMMA character, and the value of <var
+ title="">y</var> expressed as a base-ten integer using ASCII digits.
+ </ol>
+
+ <li>
+ <p>Finally, the user agent must <a href="#following0" title="following
+ hyperlinks">follow the hyperlink</a> defined by the <code><a
+ href="#a">a</a></code> element. If the steps above defined a <var><a
+ href="#hyperlink2">hyperlink suffix</a></var>, then take that into
+ account when following the hyperlink.
+ </ol>
+
+ <p class=note>One way that a user agent can enable users to follow
+ hyperlinks is by allowing <code><a href="#a">a</a></code> elements to be
+ clicked, or focussed and activated by the keyboard. This <a
+ href="#interactive1" title="interactive elements">will cause</a> the
+ aforementioned <a href="#activation0">activation behavior</a> to be
+ invoked.
+
+ <p>The <code><a href="#a">a</a></code> element must not be <a
+ href="#significant" title="significant inline content">empty</a>.
+
+ <p>The DOM attributes <dfn id=href3
+ title=dom-a-href><code>href</code></dfn>, <dfn id=ping0
+ title=dom-a-ping><code>ping</code></dfn>, <dfn id=target1
+ title=dom-a-target><code>target</code></dfn>, <dfn id=rel1
+ title=dom-a-rel><code>rel</code></dfn>, <dfn id=media4
+ title=dom-a-media><code>media</code></dfn>, <dfn id=hreflang1
+ title=dom-a-hreflang><code>hreflang</code></dfn>, and <dfn id=type3
+ title=dom-a-type><code>type</code></dfn>, must each <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <p>The DOM attribute <dfn id=rellist0
+ title=dom-a-rellist><code>relList</code></dfn> must <a
+ href="#reflect">reflect</a> the <code title=attr-hyperlink-rel><a
+ href="#rel3">rel</a></code> content attribute.
+
+ <h4 id=the-q><span class=secno>3.12.2. </span>The <dfn
+ id=q><code>q</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-q-cite><a href="#cite1">cite</a></code>
+
+ <dt>DOM interface:
+
+ <dd> The <code><a href="#q">q</a></code> element uses the <code><a
+ href="#htmlquoteelement">HTMLQuoteElement</a></code> interface.
+ </dl>
+
+ <p>The <code><a href="#q">q</a></code> element represents a part of a
+ paragraph quoted from another source.
+
+ <p>Content inside a <code><a href="#q">q</a></code> element must be quoted
+ from another source, whose URI, if it has one, should be cited in the <dfn
+ id=cite1 title=attr-q-cite><code>cite</code></dfn> attribute.
+
+ <p>If the <code title=attr-q-cite><a href="#cite1">cite</a></code>
+ attribute is present, it must be a URI (or IRI). User agents should allow
+ users to follow such citation links.
+
+ <p>If a <code><a href="#q">q</a></code> element is contained (directly or
+ indirectly) in a <a href="#paragraph">paragraph</a> that contains a single
+ <code><a href="#cite2">cite</a></code> element and has no other <code><a
+ href="#q">q</a></code> element descendants, then, the citation given by
+ that <code><a href="#cite2">cite</a></code> element gives the source of
+ the quotation contained in the <code><a href="#q">q</a></code> element.</p>
+ <!-- XXX need examples -->
+
+ <h4 id=the-cite><span class=secno>3.12.3. </span>The <dfn
+ id=cite2><code>cite</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.</dd>
+ <!-- XXX should the cite element have a cite attribute? -->
+ </dl>
+
+ <p>The <code><a href="#cite2">cite</a></code> element represents a
+ citation: the source, or reference, for a quote or statement made in the
+ document.
+
+ <p class=note>A <em>citation</em> is not a <em>quote</em> (for which the
+ <code><a href="#q">q</a></code> element is appropriate).
+
+ <div class=example>
+ <p>This is incorrect usage:</p>
+
+ <pre>&lt;p>&lt;cite>This is wrong!&lt;/cite>, said Ian.&lt;/p></pre>
+
+ <p>This is the correct way to do it:</p>
+
+ <pre>&lt;p>&lt;q>This is correct!&lt;/q>, said &lt;cite>Ian&lt;/cite>.&lt;/p></pre>
+
+ <p>This is also wrong, because the title and the name are not references
+ or citations:</p>
+
+ <pre>&lt;p>My favourite book is &lt;cite>The Reality Dysfunction&lt;/cite>
+by &lt;cite>Peter F. Hamilton&lt;/cite>.&lt;/p></pre>
+
+ <p>This is correct, because even though the source is not quoted, it is
+ cited:</p>
+
+ <pre>&lt;p>According to &lt;cite>the Wikipedia article on
+HTML&lt;/cite>, HTML is defined in formal specifications that were
+developed and published throughout the 1990s.&lt;/p></pre>
+ </div>
+
+ <p class=note>The <code><a href="#cite2">cite</a></code> element can apply
+ to <code><a href="#blockquote">blockquote</a></code> and <code><a
+ href="#q">q</a></code> elements in certain cases described in the
+ definitions of those elements.
+
+ <h4 id=the-em><span class=secno>3.12.4. </span>The <dfn
+ id=em><code>em</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#em">em</a></code> element represents stress emphasis
+ of its contents.
+
+ <p>The level of emphasis that a particlar piece of content has is given by
+ its number of ancestor <code><a href="#em">em</a></code> elements.
+
+ <p>The placement of emphasis changes the meaning of the sentence. The
+ element thus forms an integral part of the content. The precise way in
+ which emphasis is used in this way depends on the language.
+
+ <div class=example>
+ <p>These examples show how changing the emphasis changes the meaning.
+ First, a general statement of fact, with no emphasis:</p>
+
+ <pre>&lt;p>Cats are cute animals.&lt;/p></pre>
+
+ <p>By emphasising the first word, the statement implies that the kind of
+ animal under discussion is in question (maybe someone is asserting that
+ dogs are cute):</p>
+
+ <pre>&lt;p>&lt;em>Cats&lt;/em> are cute animals.&lt;/p></pre>
+
+ <p>Moving the emphasis to the verb, one highlights that the truth of the
+ entire sentence is in question (maybe someone is saying cats are not
+ cute):</p>
+
+ <pre>&lt;p>Cats &lt;em>are&lt;/em> cute animals.&lt;/p></pre>
+
+ <p>By moving it to the adjective, the exact nature of the cats is
+ reasserted (maybe someone suggested cats were <em>mean</em> animals):</p>
+
+ <pre>&lt;p>Cats are &lt;em>cute&lt;/em> animals.&lt;/p></pre>
+
+ <p>Similarly, if someone asserted that cats were vegetables, someone
+ correcting this might emphasise the last word:</p>
+
+ <pre>&lt;p>Cats are cute &lt;em>animals&lt;/em>.&lt;/p></pre>
+
+ <p>By emphasising the entire sentence, it becomes clear that the speaker
+ is fighting hard to get the point across. This kind of emphasis also
+ typically affects the punctuation, hence the exclamation mark here.</p>
+
+ <pre>&lt;p>&lt;em>Cats are cute animals!&lt;/em>&lt;/p></pre>
+
+ <p>Anger mixed with emphasising the cuteness could lead to markup such as:</p>
+
+ <pre>&lt;p>&lt;em>Cats are &lt;em>cute&lt;/em> animals!&lt;/em>&lt;/p></pre>
+ </div>
+ <!-- XXX should say it is wrong to use as in:
+
+ <p><em>Note</em>: ...</p>
+
+ -->
+
+ <h4 id=the-strong><span class=secno>3.12.5. </span>The <dfn
+ id=strong><code>strong</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#strong">strong</a></code> element represents strong
+ importance for its contents.
+
+ <p>The relative level of importance of a piece of content is given by its
+ number of ancestor <code><a href="#strong">strong</a></code> elements;
+ each <code><a href="#strong">strong</a></code> element increases the
+ importance of its contents.
+
+ <p>Changing the importance of a piece of text with the <code><a
+ href="#strong">strong</a></code> element does not change the meaning of
+ the sentence.
+
+ <div class=example>
+ <p>Here is an example of a warning notice in a game, with the various
+ parts marked up according to how important they are:</p>
+ <!-- DO NOT REFLOW THIS EXAMPLE it has been carefully balanced -->
+ <pre>&lt;p>&lt;strong>Warning.&lt;/strong> This dungeon is dangerous.
+&lt;strong>Avoid the ducks.&lt;/strong> Take any gold you find.
+&lt;strong>&lt;strong>Do not take any of the diamonds&lt;/strong>,
+they are explosive and &lt;strong>will destroy anything within
+ten meters.&lt;/strong>&lt;/strong> You have been warned.&lt;/p></pre>
+ </div>
+
+ <h4 id=the-small><span class=secno>3.12.6. </span>The <dfn
+ id=small><code>small</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#small">small</a></code> element represents small
+ print (part of a document often describing legal restrictions, such as
+ copyrights or other disadvantages), or other side comments.
+
+ <p class=note>The <code><a href="#small">small</a></code> element does not
+ "de-emphasise" or lower the importance of text emphasised by the <code><a
+ href="#em">em</a></code> element or marked as important with the <code><a
+ href="#strong">strong</a></code> element.
+
+ <div class=example>
+ <p>In this example the footer contains contact information and a
+ copyright.</p>
+
+ <pre>&lt;footer>
+ &lt;address>
+ For more details, contact
+ &lt;a href="mailto:js@example.com">John Smith&lt;/a>.
+ &lt;/address>
+ &lt;p>&lt;small>&copy; copyright 2038 Example Corp.&lt;/small>&lt;/p>
+&lt;/footer></pre>
+
+ <p>In this second example, the <code><a href="#small">small</a></code>
+ element is used for a side comment.</p>
+
+ <pre>&lt;p>Example Corp today announced record profits for the
+second quarter &lt;small>(Full Disclosure: Foo News is a subsidiary of
+Example Corp)&lt;/small>, leading to speculation about a third quarter
+merger with Demo Group.&lt;/p></pre>
+
+ <p>In this last example, the <code><a href="#small">small</a></code>
+ element is marked as being <em>important</em> small print.</p>
+
+ <pre>&lt;p>&lt;strong>&lt;small>Continued use of this service will result in a kiss.&lt;/small>&lt;/strong>&lt;/p></pre>
+ </div>
+
+ <h4 id=the-m><span class=secno>3.12.7. </span>The <dfn
+ id=m><code>m</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#m">m</a></code> element represents a run of text
+ marked or highlighted.
+
+ <div class=example>
+ <p>In the following snippet, a paragraph of text refers to a specific part
+ of a code fragment.</p>
+
+ <pre>&lt;p>The highlighted part below is where the error lies:&lt;/p>
+&lt;pre>&lt;code>var i: Integer;
+begin
+ i := &lt;m>1.1&lt;/m>;
+end.&lt;/code>&lt;/pre></pre>
+
+ <p>Another example of the <code><a href="#m">m</a></code> element is
+ highlighting parts of a document that are matching some search string. If
+ someone looked at a document, and the server knew that the user was
+ searching for the word "kitten", then the server might return the
+ document with one paragraph modified as follows:</p>
+
+ <pre>&lt;p>I also have some &lt;m>kitten&lt;/m>s who are visiting me
+these days. They're really cute. I think they like my garden!&lt;/p></pre>
+ </div>
+
+ <h4 id=the-dfn><span class=secno>3.12.8. </span>The <dfn
+ id=dfn><code>dfn</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed, if there are no ancestor <code><a href="#dfn">dfn</a></code>
+ elements.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>, but there must
+ be no descendant <code><a href="#dfn">dfn</a></code> elements.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-dfn-title><a
+ href="#title4">title</a></code> attribute has special semantics on this
+ element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#dfn">dfn</a></code> element represents the defining
+ instance of a term. The <a href="#paragraph">paragraph</a>, <a href="#dl"
+ title=dl>description list group</a>, or <a href="#sectioning"
+ title="sectioning elements">section</a> that contains the <code><a
+ href="#dfn">dfn</a></code> element contains the definition for the term
+ given by the contents of the <code><a href="#dfn">dfn</a></code> element.
+
+ <p><code><a href="#dfn">dfn</a></code> elements must not be nested.
+
+ <p><dfn id=defining>Defining term</dfn>: If the <code><a
+ href="#dfn">dfn</a></code> element has a <dfn id=title4
+ title=attr-dfn-title><code>title</code></dfn> attribute, then the exact
+ value of that attribute is the term being defined. Otherwise, if it
+ contains exactly one element child node and no child <a href="#text-node"
+ title="text node">text nodes</a>, and that child element is an <code><a
+ href="#abbr">abbr</a></code> element with a <code title=attr-abbr-title><a
+ href="#title5">title</a></code> attribute, then the exact value of
+ <em>that</em> attribute is the term being defined. Otherwise, it is the
+ exact <code><a href="#textcontent">textContent</a></code> of the <code><a
+ href="#dfn">dfn</a></code> element that gives the term being defined.</p>
+ <!-- XXX that means <dfn>x \n x</dfn> won't match <span>x x</span> -->
+
+ <p>If the <code title=attr-dfn-title><a href="#title4">title</a></code>
+ attribute of the <code><a href="#dfn">dfn</a></code> element is present,
+ then it must only contain the term being defined.
+
+ <p>There must only be one <code><a href="#dfn">dfn</a></code> element per
+ document for each term defined (i.e. there must not be any duplicate <a
+ href="#defining" title="defining term">terms</a>).
+
+ <p class=note>The <code title=attr-title><a href="#title">title</a></code>
+ attribute of ancestor elements does not affect <code><a
+ href="#dfn">dfn</a></code> elements.
+
+ <p>The <code><a href="#dfn">dfn</a></code> element enables automatic
+ cross-references. Specifically, any <code><a href="#span">span</a></code>,
+ <code><a href="#abbr">abbr</a></code>, <code><a
+ href="#code">code</a></code>, <code><a href="#var">var</a></code>,
+ <code><a href="#samp">samp</a></code>, or <code><a href="#i">i</a></code>
+ element that has a non-empty <code title=attr-title><a
+ href="#title">title</a></code> attribute whose value exactly equals the <a
+ href="#defining" title="defining term">term</a> of a <code><a
+ href="#dfn">dfn</a></code> element in the same document, or which has no
+ <code title=attr-title><a href="#title">title</a></code> attribute but
+ whose <code><a href="#textcontent">textContent</a></code> exactly equals
+ the <a href="#defining" title="defining term">term</a> of a <code><a
+ href="#dfn">dfn</a></code> element in the document, and that has no <a
+ href="#interactive1">interactive elements</a> or <code><a
+ href="#dfn">dfn</a></code> elements either as ancestors or descendants,
+ and has no other elements as ancestors that are themselves matching these
+ conditions, should be presented in such a way that the user can jump from
+ the element to the first <code><a href="#dfn">dfn</a></code> element
+ giving the defining instance of that term.</p>
+ <!-- XXX that means <dfn>x x</dfn> won't match <span>x \n x</span> -->
+ <!-- need to mention that <span> is useful for cross-refs that don't
+ actually use the term itself -->
+
+ <div class=example>
+ <p>In the following fragment, the term "GDO" is first defined in the first
+ paragraph, then used in the second. A compliant UA could provide a link
+ from the <code><a href="#abbr">abbr</a></code> element in the second
+ paragraph to the <code><a href="#dfn">dfn</a></code> element in the
+ first.</p>
+
+ <pre>&lt;p>The &lt;dfn>&lt;abbr title="Garage Door Opener">GDO&lt;/abbr>&lt;/dfn>
+is a device that allows off-world teams to open the iris.&lt;/p>
+&lt;!-- ... later in the document: -->
+&lt;p>Teal'c activated his &lt;abbr title="Garage Door Opener">GDO&lt;/abbr>
+and so Hammond ordered the iris to be opened.&lt;/p></pre>
+ <!-- XXX need some examples of nesting where the top element makes
+ a crossref but the inner ones don't despite also matching the
+ algorithm above -->
+ <!-- XXX need some examples of duplicates being bad, of title
+ attributes being bad, etc -->
+ </div>
+
+ <h4 id=the-abbr><span class=secno>3.12.9. </span>The <dfn
+ id=abbr><code>abbr</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-abbr-title><a
+ href="#title5">title</a></code> attribute has special semantics on this
+ element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#abbr">abbr</a></code> element represents an
+ abbreviation or acronym. The <dfn id=title5
+ title=attr-abbr-title><code>title</code></dfn> attribute should be used to
+ provide an expansion of the abbreviation. If present, the attribute must
+ only contain an expansion of the abbreviation.
+
+ <div class=example>
+ <p>The paragraph below contains an abbreviation marked up with the
+ <code><a href="#abbr">abbr</a></code> element.</p>
+
+ <pre>&lt;p>The &lt;abbr title="Web Hypertext Application Technology
+Working Group">WHATWG&lt;/abbr> is a loose unofficial collaboration of
+Web browser manufacturers and interested parties who wish to develop
+new technologies designed to allow authors to write and deploy
+Applications over the World Wide Web.&lt;/p></pre>
+ </div>
+
+ <p>The <code title=attr-abbr-title><a href="#title5">title</a></code>
+ attribute may be omitted if there is a <code><a href="#dfn">dfn</a></code>
+ element in the document whose <a href="#defining">defining term</a> is the
+ abbreviation (the <code><a href="#textcontent">textContent</a></code> of
+ the <code><a href="#abbr">abbr</a></code> element).
+
+ <div class=example>
+ <p>In the example below, the word "Zat" is used as an abbreviation in the
+ second paragraph. The abbreviation is defined in the first, so the
+ explanatory <code title=attr-abbr-title><a
+ href="#title5">title</a></code> attribute has been omitted. Because of
+ the way <code><a href="#dfn">dfn</a></code> elements are defined, the
+ second <code><a href="#abbr">abbr</a></code> element in this example
+ would be connected (in some UA-specific way) to the first.</p>
+
+ <pre>&lt;p>The &lt;dfn>&lt;abbr>Zat&lt;/abbr>&lt;/dfn>, short for Zat'ni'catel, is a weapon.&lt;/p>
+&lt;p>Jack used a &lt;abbr>Zat&lt;/abbr> to make the boxes of evidence disappear.&lt;/p></pre>
+ </div>
+
+ <h4 id=the-time><span class=secno>3.12.10. </span>The <dfn
+ id=time><code>time</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-time-datetime><a href="#datetime">datetime</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmltimeelement>HTMLTimeElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#datetime0" title=dom-time-datetime>dateTime</a>;
+ readonly attribute DOMTimeStamp <a href="#date0" title=dom-time-date>date</a>;
+ readonly attribute DOMTimeStamp <a href="#time1" title=dom-time-time>time</a>;
+ readonly attribute DOMTimeStamp <a href="#timezone0" title=dom-time-timezone>timezone</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#time">time</a></code> element represents a date
+ and/or a time.
+
+ <p>The <dfn id=datetime
+ title=attr-time-datetime><code>datetime</code></dfn> attribute, if
+ present, must contain a <a href="#date-or">date or time string</a> that
+ identifies the date or time being specified.
+
+ <p>If the <code title=attr-time-datetime><a
+ href="#datetime">datetime</a></code> attribute is not present, then the
+ date or time must be specified in the content of the element, such that
+ parsing the element's <code><a href="#textcontent">textContent</a></code>
+ according to the rules for parsing <a href="#date-or0" title="date or time
+ string in content">date or time strings in content</a> successfully
+ extracts a date or time.
+
+ <p>The <dfn id=datetime0
+ title=dom-time-datetime><code>dateTime</code></dfn> DOM attribute must <a
+ href="#reflect">reflect</a> the <code title=attr-time-datetime><a
+ href="#datetime">datetime</a></code> content attribute.
+
+ <p>User agents, to obtain the <dfn id=date
+ title=concept-time-date>date</dfn>, <dfn id=time0
+ title=concept-time-time>time</dfn>, and <dfn id=timezone
+ title=concept-time-timezone>timezone</dfn> represented by a <code><a
+ href="#time">time</a></code> element, must follow the following steps:
+
+ <ol>
+ <li>If the <code title=attr-time-datetime><a
+ href="#datetime">datetime</a></code> attribute is present, then parse it
+ according to the rules for parsing <a href="#date-or1" title="date or
+ time string in attributes">date or time strings in content</a>, and let
+ the result be <var title="">result</var>.
+
+ <li>Otherwise, parse the element's <code><a
+ href="#textcontent">textContent</a></code> according to the rules for
+ parsing <a href="#date-or1" title="date or time string in
+ attributes">date or time strings in content</a>, and let the result be
+ <var title="">result</var>.
+
+ <li>If <var title="">result</var> is empty (because the parsing failed),
+ then the <a href="#date" title=concept-time-date>date</a> is unknown, the
+ <a href="#time0" title=concept-time-time>time</a> is unknown, and the <a
+ href="#timezone" title=concept-time-timezone>timezone</a> is unknown.
+
+ <li>Otherwise: if <var title="">result</var> contains a date, then that is
+ the <a href="#date" title=concept-time-date>date</a>; if <var
+ title="">result</var> contains a time, then that is the <a href="#time0"
+ title=concept-time-time>time</a>; and if <var title="">result</var>
+ contains a timezone, then the timezone is the element's <a
+ href="#timezone" title=concept-time-timezone>timezone</a>. (A timezone
+ can only be present if both a date and a time are also present.)
+ </ol>
+
+ <p>The <dfn id=date0 title=dom-time-date><code>date</code></dfn> DOM
+ attribute must return null if the <a href="#date"
+ title=concept-time-date>date</a> is unknown, and otherwise must return the
+ time corresponding to midnight UTC (i.e. the first second) of the given <a
+ href="#date" title=concept-time-date>date</a>.
+
+ <p>The <dfn id=time1 title=dom-time-time><code>time</code></dfn> DOM
+ attribute must return null if the <a href="#time0"
+ title=concept-time-time>time</a> is unknown, and otherwise must return the
+ time corresponding to the given <a href="#time0"
+ title=concept-time-time>time</a> of 1970-01-01, with the timezone UTC.
+
+ <p>The <dfn id=timezone0
+ title=dom-time-timezone><code>timezone</code></dfn> DOM attribute must
+ return null if the <a href="#timezone"
+ title=concept-time-timezone>timezone</a> is unknown, and otherwise must
+ return the time corresponding to 1970-01-01 00:00 UTC in the given <a
+ href="#timezone" title=concept-time-timezone>timezone</a>, with the
+ timezone set to UTC (i.e. the time corresponding to 1970-01-01 at 00:00
+ UTC plus the offset corresponding to the timezone).
+
+ <div class=example>
+ <p>In the following snippet:</p>
+
+ <pre>&lt;p>Our first date was &lt;time datetime="2006-09-23">a saturday&lt;/time>.&lt;/p></pre>
+
+ <p>...the <code><a href="#time">time</a></code> element's <code
+ title=dom-time-date><a href="#date0">date</a></code> attribute would have
+ the value 1,158,969,600,000ms, and the <code title=dom-time-time><a
+ href="#time1">time</a></code> and <code title=dom-time-timezone><a
+ href="#timezone0">timezone</a></code> attributes would return null.</p>
+
+ <p>In the following snippet:</p>
+
+ <pre>&lt;p>We stopped talking at &lt;time datetime="2006-09-24 05:00 -7">5am the next morning&lt;/time>.&lt;/p></pre>
+
+ <p>...the <code><a href="#time">time</a></code> element's <code
+ title=dom-time-date><a href="#date0">date</a></code> attribute would have
+ the value 1,159,056,000,000ms, the <code title=dom-time-time><a
+ href="#time1">time</a></code> attribute would have the value
+ 18,000,000ms, and the <code title=dom-time-timezone><a
+ href="#timezone0">timezone</a></code> attribute would return
+ -25,200,000ms. To obtain the actual time, the three attributes can be
+ added together, obtaining 1,159,048,800,000, which is the specified date
+ and time in UTC.</p>
+
+ <p>Finally, in the following snippet:</p>
+
+ <pre>&lt;p>Many people get up at &lt;time>08:00&lt;/time>.&lt;/p></pre>
+
+ <p>...the <code><a href="#time">time</a></code> element's <code
+ title=dom-time-date><a href="#date0">date</a></code> attribute would have
+ the value null, the <code title=dom-time-time><a
+ href="#time1">time</a></code> attribute would have the value
+ 28,800,000ms, and the <code title=dom-time-timezone><a
+ href="#timezone0">timezone</a></code> attribute would return null.</p>
+ </div>
+
+ <p class=big-issue>These APIs may be suboptimal. Comments on making them
+ more useful to JS authors are welcome. The primary use cases for these
+ elements are for marking up publication dates e.g. in blog entries, and
+ for marking event dates in hCalendar markup. Thus the DOM APIs are likely
+ to be used as ways to generate interactive calendar widgets or some such.
+
+ <h4 id=the-meter><span class=secno>3.12.11. </span>The <dfn
+ id=meter><code>meter</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-meter-value><a href="#value1">value</a></code>
+
+ <dd><code title=attr-meter-min><a href="#min">min</a></code>
+
+ <dd><code title=attr-meter-low><a href="#low">low</a></code>
+
+ <dd><code title=attr-meter-high><a href="#high">high</a></code>
+
+ <dd><code title=attr-meter-max><a href="#max">max</a></code>
+
+ <dd><code title=attr-meter-optimum><a href="#optimum">optimum</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlmeterelement>HTMLMeterElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute long <a href="#value2" title=dom-meter-value>value</a>;
+ attribute long <a href="#min0" title=dom-meter-min>min</a>;
+ attribute long <a href="#max0" title=dom-meter-max>max</a>;
+ attribute long <a href="#low0" title=dom-meter-low>low</a>;
+ attribute long <a href="#high0" title=dom-meter-high>high</a>;
+ attribute long <a href="#optimum0" title=dom-meter-optimum>optimum</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#meter">meter</a></code> element represents a scalar
+ measurement within a known range, or a fractional value; for example disk
+ usage, the relevance of a query result, or the fraction of a voting
+ population to have selected a particular candidate.
+
+ <p>This is also known as a gauge.
+
+ <p class=note>The <code><a href="#meter">meter</a></code> element should
+ not be used to indicate progress (as in a progress bar). For that role,
+ HTML provides a separate <code><a href="#progress">progress</a></code>
+ element.
+
+ <p>There are six attributes that determine the semantics of the gauge
+ represented by the element.
+
+ <p>The <dfn id=min title=attr-meter-min><code>min</code></dfn> attribute
+ specifies the lower bound of the range, and the <dfn id=max
+ title=attr-meter-max><code>max</code></dfn> attribute specifies the upper
+ bound. The <dfn id=value1 title=attr-meter-value><code>value</code></dfn>
+ attribute specifies the value to have the gauge indicate as the "measured"
+ value.
+
+ <p>The other three attributes can be used to segment the gauge's range into
+ "low", "medium", and "high" parts, and to indicate which part of the gauge
+ is the "optimum" part. The <dfn id=low
+ title=attr-meter-low><code>low</code></dfn> attribute specifies the range
+ that is considered to be the "low" part, and the <dfn id=high
+ title=attr-meter-high><code>high</code></dfn> attribute specifies the
+ range that is considered to be the "high" part. The <dfn id=optimum
+ title=attr-meter-optimum><code>optimum</code></dfn> attribute gives the
+ position that is "optimum"; if that is higher than the "high" value then
+ this indicates that the higher the value, the better; if it's lower than
+ the "low" mark then it indicates that lower values are better, and
+ naturally if it is in between then it indicates that neither high nor low
+ values are good.
+
+ <p><strong>Authoring requirements</strong>: The recommended way of giving
+ the value is to include it as contents of the element, either as two
+ numbers (the higher number represents the maximum, the other number the
+ current value), or as a percentage or similar (using one of the characters
+ such as "%"), or as a fraction.
+
+ <p>The <code title=attr-meter-value><a href="#value1">value</a></code>,
+ <code title=attr-meter-min><a href="#min">min</a></code>, <code
+ title=attr-meter-low><a href="#low">low</a></code>, <code
+ title=attr-meter-high><a href="#high">high</a></code>, <code
+ title=attr-meter-max><a href="#max">max</a></code>, and <code
+ title=attr-meter-optimum><a href="#optimum">optimum</a></code> attributes
+ are all optional. When present, they must have values that are <a
+ href="#valid1" title="valid floating point number">valid floating point
+ numbers</a>.
+
+ <div class=example>
+ <p>The following examples all represent a measurement of three quarters
+ (of the maximum of whatever is being measured):</p>
+
+ <pre>&lt;meter>75%&lt;/meter>
+&lt;meter>750&#x2030;&lt;/meter>
+&lt;meter>3/4&lt;/meter>
+&lt;meter>6 blocks used (out of 8 total)&lt;/meter>
+&lt;meter>max: 100; current: 75&lt;/meter>
+&lt;meter>&lt;object data="graph75.png">0.75&lt;/object>&lt;/meter>
+&lt;meter min="0" max="100" value="75">&lt;/meter></pre>
+ </div>
+
+ <p><strong>User agent requirements</strong>: User agents must parse the
+ <code title=attr-meter-min><a href="#min">min</a></code>, <code
+ title=attr-meter-max><a href="#max">max</a></code>, <code
+ title=attr-meter-value><a href="#value1">value</a></code>, <code
+ title=attr-meter-low><a href="#low">low</a></code>, <code
+ title=attr-meter-high><a href="#high">high</a></code>, and <code
+ title=attr-meter-optimum><a href="#optimum">optimum</a></code> attributes
+ using the <a href="#rules1">rules for parsing floating point number
+ values</a>.
+
+ <p>If the <code title=attr-meter-value><a href="#value1">value</a></code>
+ attribute has been omitted, the user agent must also process the <code><a
+ href="#textcontent">textContent</a></code> of the element according to the
+ <a href="#steps">steps for finding one or two numbers of a ratio in a
+ string</a>. These steps will return nothing, one number, one number with a
+ denominator punctuation character, or two numbers.
+
+ <p>User agents must then use all these numbers to obtain values for six
+ points on the gauge, as follows. (The order in which these are evaluated
+ is important, as some of the values refer to earlier ones.)
+
+ <dl>
+ <dt>The minimum value
+
+ <dd>
+ <p>If the <code title=attr-meter-min><a href="#min">min</a></code>
+ attribute is specified and a value could be parsed out of it, then the
+ minimum value is that value. Otherwise, the minimum value is zero.</p>
+
+ <dt>The maximum value
+
+ <dd>
+ <p>If the <code title=attr-meter-max><a href="#max">max</a></code>
+ attribute is specified and a value could be parsed out of it, the
+ maximum value is that value.</p>
+
+ <p>Otherwise, if the <code title=attr-meter-max><a
+ href="#max">max</a></code> attribute is specified but no value could be
+ parsed out of it, or if it was not specified, but either or both of the
+ <code title=attr-meter-min><a href="#min">min</a></code> or <code
+ title=attr-meter-value><a href="#value1">value</a></code> attributes
+ <em>were</em> specified, then the maximum value is 1.</p>
+
+ <p>Otherwise, none of the <code title=attr-meter-max><a
+ href="#max">max</a></code>, <code title=attr-meter-min><a
+ href="#min">min</a></code>, and <code title=attr-meter-value><a
+ href="#value1">value</a></code> attributes were specified. If the result
+ of processing the <code><a href="#textcontent">textContent</a></code> of
+ the element was either nothing or just one number with no denominator
+ punctuation character, then the maximum value is 1; if the result was
+ one number but it had an associated denominator punctuation character,
+ then the maximum value is the <a href="#a-value" title="values
+ associated with denominator punctuation characters">value associated
+ with that denominator punctuation character</a>; and finally, if there
+ were two numbers parsed out of the <code><a
+ href="#textcontent">textContent</a></code>, then the maximum is the
+ higher of those two numbers.</p>
+
+ <p>If the above machinations result in a maximum value less than the
+ minimum value, then the maximum value is actually the same as the
+ minimum value.</p>
+
+ <dt>The actual value
+
+ <dd>
+ <p>If the <code title=attr-meter-value><a href="#value1">value</a></code>
+ attribute is specified and a value could be parsed out of it, then that
+ value is the actual value.</p>
+
+ <p>If the <code title=attr-meter-value><a href="#value1">value</a></code>
+ attribute is not specified but the <code title=attr-meter-max><a
+ href="#max">max</a></code> attribute <em>is</em> specified and the
+ result of processing the <code><a
+ href="#textcontent">textContent</a></code> of the element was one number
+ with no associated denominator punctuation character, then that number
+ is the actual value.</p>
+
+ <p>If neither of the <code title=attr-meter-value><a
+ href="#value1">value</a></code> and <code title=attr-meter-max><a
+ href="#max">max</a></code> attributes are specified, then, if the result
+ of processing the <code><a href="#textcontent">textContent</a></code> of
+ the element was one number (with or without an associated denominator
+ punctuation character), then that is the actual value, and if the result
+ of processing the <code><a href="#textcontent">textContent</a></code> of
+ the element was two numbers, then the actual value is the lower of the
+ two numbers found.</p>
+
+ <p>Otherwise, if none of the above apply, the actual value is zero.</p>
+
+ <p>If the above procedure results in an actual value less than the
+ minimum value, then the actual value is actually the same as the minimum
+ value.</p>
+
+ <p>If, on the other hand, the result is an actual value greater than the
+ maximum value, then the actual value is the maximum value.</p>
+
+ <dt>The low boundary
+
+ <dd>
+ <p>If the <code title=attr-meter-low><a href="#low">low</a></code>
+ attribute is specified and a value could be parsed out of it, then the
+ low boundary is that value. Otherwise, the low boundary is the same as
+ the minimum value.</p>
+
+ <p>If the above results in a low boundary that is less than the minimum
+ value, the low boundary is the minimum value.</p>
+
+ <dt>The high boundary
+
+ <dd>
+ <p>If the <code title=attr-meter-high><a href="#high">high</a></code>
+ attribute is specified and a value could be parsed out of it, then the
+ high boundary is that value. Otherwise, the high boundary is the same as
+ the maximum value.</p>
+
+ <p>If the above results in a high boundary that is higher than the
+ maximum value, the high boundary is the maximum value.</p>
+
+ <dt>The optimum point
+
+ <dd>
+ <p>If the <code title=attr-meter-optimum><a
+ href="#optimum">optimum</a></code> attribute is specified and a value
+ could be parsed out of it, then the optimum point is that value.
+ Otherwise, the optimum point is the midpoint between the minimum value
+ and the maximum value.</p>
+
+ <p>If the optimum point is then less than the minimum value, then the
+ optimum point is actually the same as the minimum value. Similarly, if
+ the optimum point is greater than the maximum value, then it is actually
+ the maximum value instead.</p>
+ </dl>
+
+ <p>All of which should result in the following inequalities all being true:
+
+ <ul class=brief>
+ <li>minimum value &le; actual value &le; maximum value
+
+ <li>minimum value &le; low boundary &le; high boundary &le; maximum value
+
+ <li>minimum value &le; optimum point &le; maximum value
+ </ul>
+
+ <p><strong>UA requirements for regions of the gauge</strong>: If the
+ optimum point is equal to the low boundary or the high boundary, or
+ anywhere in between them, then the region between the low and high
+ boundaries of the gauge must be treated as the optimum region, and the low
+ and high parts, if any, must be treated as suboptimal. Otherwise, if the
+ optimum point is less than the low boundary, then the region between the
+ minimum value and the low boundary must be treated as the optimum region,
+ the region between the low boundary and the high boundary must be treated
+ as a suboptimal region, and the region between the high boundary and the
+ maximum value must be treated as an even less good region. Finally, if the
+ optimum point is higher than the high boundary, then the situation is
+ reversed; the region between the high boundary and the maximum value must
+ be treated as the optimum region, the region between the high boundary and
+ the low boundary must be treated as a suboptimal region, and the remaining
+ region between the low boundary and the minimum value must be treated as
+ an even less good region.
+
+ <p><strong>UA requirements for showing the gauge</strong>: When
+ representing a <code><a href="#meter">meter</a></code> element to the
+ user, the UA should indicate the relative position of the actual value to
+ the minimum and maximum values, and the relationship between the actual
+ value and the three regions of the gauge.
+
+ <div class=example>
+ <p>The following markup:</p>
+
+ <pre>
+&lt;h3>Suggested groups&lt;/h3>
+&lt;menu type="toolbar">
+ &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups&lt;/a>
+&lt;/menu>
+&lt;ul>
+ &lt;li>
+ &lt;p>&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets&lt;/a> -
+ &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join&lt;/a>&lt;/p>
+ &lt;p>Group description: &lt;strong>Layout/presentation on the WWW.&lt;/strong>&lt;/p>
+ &lt;p><strong>&lt;meter value="0.5">Moderate activity,&lt;/meter></strong> Usenet, 618 subscribers&lt;/p>
+ &lt;/li>
+ &lt;li>
+ &lt;p>&lt;a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall&lt;/a> -
+ &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe">join&lt;/a>&lt;/p>
+ &lt;p>Group description: &lt;strong>Mozilla XPInstall discussion.&lt;/strong>&lt;/p>
+ &lt;p><strong>&lt;meter value="0.25">Low activity,&lt;/meter></strong> Usenet, 22 subscribers&lt;/p>
+ &lt;/li>
+ &lt;li>
+ &lt;p>&lt;a href="/group/mozilla.dev.general/view">mozilla.dev.general&lt;/a> -
+ &lt;a href="/group/mozilla.dev.general/subscribe">join&lt;/a>&lt;/p>
+ &lt;p><strong>&lt;meter value="0.25">Low activity,&lt;/meter></strong> Usenet, 66 subscribers&lt;/p>
+ &lt;/li>
+&lt;/ul>
+</pre>
+
+ <p>Might be rendered as follows:</p>
+
+ <p><img alt="With the &lt;meter> elements rendered as inline green bars of
+ varying lengths." src="images/sample-meter.png"></p>
+ </div>
+
+ <p>The <dfn id=min0 title=dom-meter-min><code>min</code></dfn>, <dfn
+ id=max0 title=dom-meter-max><code>max</code></dfn>, <dfn id=value2
+ title=dom-meter-value><code>value</code></dfn>, <dfn id=low0
+ title=dom-meter-low><code>low</code></dfn>, <dfn id=high0
+ title=dom-meter-high><code>high</code></dfn>, and <dfn id=optimum0
+ title=dom-meter-optimum><code>optimum</code></dfn> DOM attributes must
+ reflect the elements' content attributes of the same name. When the
+ relevant content attributes are absent, the DOM attributes must return
+ zero. The value parsed from the <code><a
+ href="#textcontent">textContent</a></code> never affects the DOM values.
+
+ <p class=big-issue>Would be cool to have the <code title=dom-meter-value><a
+ href="#value2">value</a></code> DOM attribute update the <code><a
+ href="#textcontent">textContent</a></code> in-line...</p>
+ <!-- XXX
+should we also look inside the title="" attribute?
+ Disk usage: <meter title="985MB of 986MB total" high="980">Full!</meter>
+should we make the contents accessible in some way, e.g. as a tooltip?
+-->
+
+ <h4 id=the-progress><span class=secno>3.12.12. </span>The <dfn
+ id=progress><code>progress</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-progress-value><a href="#value3">value</a></code>
+
+ <dd><code title=attr-progress-max><a href="#max1">max</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlprogresselement>HTMLProgressElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute float <a href="#value4" title=dom-progress-value>value</a>;
+ attribute float <a href="#max2" title=dom-progress-max>max</a>;
+ readonly attribute float <a href="#position" title=dom-progress-position>position</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#progress">progress</a></code> element represents the
+ completion progress of a task. The progress is either indeterminate,
+ indicating that progress is being made but that it is not clear how much
+ more work remains to be done before the task is complete (e.g. because the
+ task is waiting for a remote host to respond), or the progress is a number
+ in the range zero to a maximum, giving the fraction of work that has so
+ far been completed.
+
+ <p>There are two attributes that determine the current task completion
+ represented by the element.
+
+ <p>The <dfn id=value3 title=attr-progress-value><code>value</code></dfn>
+ attribute specifies how much of the task has been completed, and the <dfn
+ id=max1 title=attr-progress-max><code>max</code></dfn> attribute specifies
+ how much work the task requires in total. The units are arbitrary and not
+ specified.
+
+ <p>Instead of using the attributes, authors are recommended to simply
+ include the current value and the maximum value inline as text inside the
+ element.
+
+ <div class=example>
+ <p>Here is a snippet of a Web application that shows the progress of some
+ automated task:</p>
+
+ <pre>&lt;section>
+ &lt;h2>Task Progress&lt;/h2>
+ &lt;p>&lt;label>Progress: &lt;progress>&lt;span id="p">0&lt;/span>%&lt;/progress>&lt;/p>
+ &lt;script>
+ var progressBar = document.getElementById('p');
+ function updateProgress(newValue) {
+ progressBar.textContent = newValue;
+ }
+ &lt;/script>
+&lt;/section></pre>
+
+ <p>(The <code>updateProgress()</code> method in this example would be
+ called by some other code on the page to update the actual progress bar
+ as the task progressed.)</p>
+ </div>
+
+ <p><strong>Author requirements</strong>: The <code
+ title=attr-progress-max><a href="#max1">max</a></code> and <code
+ title=attr-progress-value><a href="#value3">value</a></code> attributes,
+ when present, must have values that are <a href="#valid1" title="valid
+ floating point number">valid floating point numbers</a>. The <code
+ title=attr-progress-max><a href="#max1">max</a></code> attribute, if
+ present, must have a value greater than zero. The <code
+ title=attr-progress-value><a href="#value3">value</a></code> attribute, if
+ present, must have a value equal to or greater than zero, and less than or
+ equal to the value of the <code title=attr-progress-max><a
+ href="#max1">max</a></code> attribute, if present.
+
+ <p><strong>User agent requirements</strong>: User agents must parse the
+ <code title=attr-progress-max><a href="#max1">max</a></code> and <code
+ title=attr-progress-value><a href="#value3">value</a></code> attributes'
+ values according to the <a href="#rules1">rules for parsing floating point
+ number values</a>.
+
+ <p>If the <code title=attr-progress-value><a
+ href="#value3">value</a></code> attribute is omitted, then user agents
+ must also parse the <code><a href="#textcontent">textContent</a></code> of
+ the <code><a href="#progress">progress</a></code> element in question
+ using the <a href="#steps">steps for finding one or two numbers of a ratio
+ in a string</a>. These steps will return nothing, one number, one number
+ with a denominator punctuation character, or two numbers.
+
+ <p>Using the results of this processing, user agents must determine whether
+ the progress bar is an indeterminate progress bar, or whether it is a
+ determinate progress bar, and in the latter case, what its current and
+ maximum values are, all as follows:
+
+ <ol>
+ <li>If the <code title=attr-progress-max><a href="#max1">max</a></code>
+ attribute is omitted, and the <code title=attr-progress-value><a
+ href="#value3">value</a></code> is omitted, and the results of parsing
+ the <code><a href="#textcontent">textContent</a></code> was nothing, then
+ the progress bar is an indeterminate progress bar. Abort these steps.
+
+ <li>Otherwise, it is a determinate progress bar.
+
+ <li>If the <code title=attr-progress-max><a href="#max1">max</a></code>
+ attribute is included, then, if a value could be parsed out of it, then
+ the maximum value is that value.
+
+ <li>Otherwise, if the <code title=attr-progress-max><a
+ href="#max1">max</a></code> attribute is absent but the <code
+ title=attr-progress-value><a href="#value3">value</a></code> attribute is
+ present, or, if the <code title=attr-progress-max><a
+ href="#max1">max</a></code> attribute is present but no value could be
+ parsed from it, then the maximum is 1.
+
+ <li>Otherwise, if neither attribute is included, then, if the <code><a
+ href="#textcontent">textContent</a></code> contained one number with an
+ associated denominator punctuation character, then the maximum value is
+ the <span>value associated with that denominator punctuation
+ character</span>; otherwise, if the <code><a
+ href="#textcontent">textContent</a></code> contained two numbers, the
+ maximum value is the higher of the two values; otherwise, the maximum
+ value is 1.
+
+ <li>If the <code title=attr-progress-value><a
+ href="#value3">value</a></code> attribute is present on the element and a
+ value could be parsed out of it, that value is the current value of the
+ progress bar. Otherwise, if the attribute is present but no value could
+ be parsed from it, the current value is zero.
+
+ <li>Otherwise if the <code title=attr-progress-value><a
+ href="#value3">value</a></code> attribute is absent and the <code
+ title=attr-progress-max><a href="#max1">max</a></code> attribute is
+ present, then, if the <code><a href="#textcontent">textContent</a></code>
+ was parsed and found to contain just one number, with no associated
+ denominator punctuation character, then the current value is that number.
+ Otherwise, if the <code title=attr-progress-value><a
+ href="#value3">value</a></code> attribute is absent and the <code
+ title=attr-progress-max><a href="#max1">max</a></code> attribute is
+ present then the current value is zero.
+
+ <li>Otherwise, if neither attribute is present, then the current value is
+ the lower of the one or two numbers that were found in the <code><a
+ href="#textcontent">textContent</a></code> of the element.
+
+ <li>If the maximum value is less than or equal to zero, then it is reset
+ to 1.
+
+ <li>If the current value is less than zero, then it is reset to zero.
+
+ <li>Finally, if the current value is greater than the maximum value, then
+ the current value is reset to the maximum value.
+ </ol>
+
+ <p><strong>UA requirements for showing the progress bar</strong>: When
+ representing a <code><a href="#progress">progress</a></code> element to
+ the user, the UA should indicate whether it is a determinate or
+ indeterminate progress bar, and in the former case, should indicate the
+ relative position of the current value relative to the maximum value.
+
+ <p>The <dfn id=max2 title=dom-progress-max><code>max</code></dfn> and <dfn
+ id=value4 title=dom-progress-value><code>value</code></dfn> DOM attributes
+ must reflect the elements' content attributes of the same name. When the
+ relevant content attributes are absent, the DOM attributes must return
+ zero. The value parsed from the <code><a
+ href="#textcontent">textContent</a></code> never affects the DOM values.
+
+ <p class=big-issue>Would be cool to have the <code
+ title=dom-progress-value><a href="#value4">value</a></code> DOM attribute
+ update the <code><a href="#textcontent">textContent</a></code> in-line...
+
+ <p>If the progress bar is an indeterminate progress bar, then the <dfn
+ id=position title=dom-progress-position><code>position</code></dfn> DOM
+ attribute must return -1. Otherwise, it must return the result of dividing
+ the current value by the maximum value.
+
+ <h4 id=the-code><span class=secno>3.12.13. </span>The <dfn
+ id=code><code>code</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-title><a href="#title">title</a></code>
+ attribute has special semantics on this element when used with the
+ <code><a href="#dfn">dfn</a></code> element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#code">code</a></code> element represents a fragment
+ of computer code. This could be an XML element name, a filename, a
+ computer program, or any other string that a computer would recognise.
+
+ <p class=note>See the <code><a href="#pre">pre</a></code> element for more
+ detais.
+
+ <div class=example>
+ <p>The following example shows how a block of code could be marked up
+ using the <code><a href="#pre">pre</a></code> and <code><a
+ href="#code">code</a></code> elements.</p>
+
+ <pre>&lt;pre>&lt;code>var i: Integer;
+begin
+ i := 1;
+end.&lt;/code>&lt;/pre></pre>
+ </div>
+
+ <h4 id=the-var><span class=secno>3.12.14. </span>The <dfn
+ id=var><code>var</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-title><a href="#title">title</a></code>
+ attribute has special semantics on this element when used with the
+ <code><a href="#dfn">dfn</a></code> element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#var">var</a></code> element represents a variable.
+ This could be an actual variable in a mathematical expression or
+ programming context, or it could just be a term used as a placeholder in
+ prose.
+
+ <div class=example>
+ <p>In the paragraph below, the letter "n" is being used as a variable in
+ prose:</p>
+
+ <pre>&lt;p>If there are &lt;var>n&lt;/var> pipes leading to the ice
+cream factory then I expect at &lt;em>least&lt;/em> &lt;var>n&lt;/var>
+flavours of ice cream to be available for purchase!&lt;/p></pre>
+ </div>
+
+ <h4 id=the-samp><span class=secno>3.12.15. </span>The <dfn
+ id=samp><code>samp</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-title><a href="#title">title</a></code>
+ attribute has special semantics on this element when used with the
+ <code><a href="#dfn">dfn</a></code> element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#samp">samp</a></code> element represents (sample)
+ output from a program or computing system.
+
+ <p class=note>See the <code><a href="#pre">pre</a></code> and <code><a
+ href="#kbd">kbd</a></code> elements for more detais.
+
+ <div class=example>
+ <p>This example shows the <code><a href="#samp">samp</a></code> element
+ being used inline:</p>
+
+ <pre>&lt;p>The computer said &lt;samp>Too much cheese in tray
+two&lt;/samp> but I didn't know what that meant.&lt;/p></pre>
+
+ <p>This second example shows a block of sample output. Nested <code><a
+ href="#samp">samp</a></code> and <code><a href="#kbd">kbd</a></code>
+ elements allow for the styling of specific elements of the sample output
+ using a style sheet.</p>
+ <!-- XXX should those nested SAMPs be SPANs? -->
+ <pre>&lt;pre>&lt;samp>&lt;samp class="prompt">jdoe@mowmow:~$&lt;/samp> &lt;kbd>ssh demo.example.com&lt;/kbd>
+Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
+Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
+
+&lt;samp class="prompt">jdoe@demo:~$&lt;/samp> &lt;samp class="cursor">_&lt;/samp>&lt;/samp>&lt;/pre></pre>
+ </div>
+
+ <h4 id=the-kbd><span class=secno>3.12.16. </span>The <dfn
+ id=kbd><code>kbd</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#kbd">kbd</a></code> element represents user input
+ (typically keyboard input, although it may also be used to represent other
+ input, such as voice commands).
+
+ <p>When the <code><a href="#kbd">kbd</a></code> element is nested inside a
+ <code><a href="#samp">samp</a></code> element, it represents the input as
+ it was echoed by the system.
+
+ <p>When the <code><a href="#kbd">kbd</a></code> element <em>contains</em> a
+ <code><a href="#samp">samp</a></code> element, it represents input based
+ on system output, for example invoking a menu item.
+
+ <p>When the <code><a href="#kbd">kbd</a></code> element is nested inside
+ another <code><a href="#kbd">kbd</a></code> element, it represents an
+ actual key or other single unit of input as appropriate for the input
+ mechanism.
+
+ <div class=example>
+ <p>Here the <code><a href="#kbd">kbd</a></code> element is used to
+ indicate keys to press:</p>
+
+ <pre>&lt;p>To make George eat an apple, press &lt;kbd>&lt;kbd>Shift&lt;/kbd>+&lt;kbd>F3&lt;/kbd>&lt;/kbd>&lt;/p></pre>
+
+ <p>In this second example, the user is told to pick a particular menu
+ item. The outer <code><a href="#kbd">kbd</a></code> element marks up a
+ block of input, with the inner <code><a href="#kbd">kbd</a></code>
+ elements representing each individual step of the input, and the <code><a
+ href="#samp">samp</a></code> elements inside them indicating that the
+ steps are input based on something being displayed by the system, in this
+ case menu labels:</p>
+
+ <pre>&lt;p>To make George eat an apple, select
+ &lt;kbd>&lt;kbd>&lt;samp>File&lt;/samp>&lt;/kbd>|&lt;kbd>&lt;samp>Eat Apple...&lt;/samp>&lt;/kbd>&lt;/kbd>
+&lt;/p></pre>
+ </div>
+
+ <h4 id=the-sup><span class=secno>3.12.17. </span>The <dfn
+ id=sup><code>sup</code></dfn> and <dfn id=sub><code>sub</code></dfn>
+ elements</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which these elements may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#sup">sup</a></code> element represents a superscript
+ and the <code><a href="#sub">sub</a></code> element represents a
+ subscript.
+
+ <p>These elements must only be used to mark up typographical conventions
+ with specific meanings, not for typographical presentation for
+ presentation's sake. For example, it would be inappropriate for the
+ <code><a href="#sup">sup</a></code> and <code><a
+ href="#sub">sub</a></code> elements to be used in the name of the LaTeX
+ document preparation system. In general, authors should not use these
+ elements if the <em>absence</em> of those elements would not change the
+ meaning of the content.
+
+ <p>When the <code><a href="#sub">sub</a></code> element is used inside a
+ <code><a href="#var">var</a></code> element, it represents the subscript
+ that identifies the variable in a family of variables.
+
+ <div class=example>
+ <pre>&lt;p>The coordinate of the &lt;var>i&lt;/var>th point is
+(&lt;var>x&lt;sub>&lt;var>i&lt;/var>&lt;/sub>&lt;/var>, &lt;var>y&lt;sub>&lt;var>i&lt;/var>&lt;/sub>&lt;/var>).
+For example, the 10th point has coordinate
+(&lt;var>x&lt;sub>10&lt;/sub>&lt;/var>, &lt;var>y&lt;sub>10&lt;/sub>&lt;/var>).&lt;/p></pre>
+ </div>
+
+ <p>In certain languages, superscripts are part of the typographical
+ conventions for some abbreviations.
+
+ <div class=example>
+ <pre>&lt;p>The most beautiful women are
+&lt;span lang="fr">&lt;abbr>M&lt;sup>lle&lt;/sup>&lt;/abbr> Gwendoline&lt;/span> and
+&lt;span lang="fr">&lt;abbr>M&lt;sup>me&lt;/sup>&lt;/abbr> Denise&lt;/span>.&lt;/p></pre>
+ </div>
+
+ <p>Mathematical expressions often use subscripts and superscripts.
+ <!--Authors are encouraged to use MathML for marking up mathematics,
+ but authors may opt to use <code>sub</code> and <code>sup</code> if
+ detailed mathematical markup is not desired. <a
+ href="#refsMathML">[MathML]</a>--></p>
+ <!-- XXX -->
+
+ <div class=example>
+ <pre>&lt;var>E&lt;/var>=&lt;var>m&lt;/var>&lt;var>c&lt;/var>&lt;sup>2&lt;/sup></pre>
+
+ <pre>f(&lt;var>x&lt;/var>, &lt;var>n&lt;/var>) = log&lt;sub>4&lt;/sub>&lt;var>x&lt;/var>&lt;sup>&lt;var>n&lt;/var>&lt;/sup></pre>
+ </div>
+
+ <h4 id=the-span><span class=secno>3.12.18. </span>The <dfn
+ id=span><code>span</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used in an element whose content model is only <a
+ href="#strictly">strictly inline-level content</a>: only <a
+ href="#strictly">strictly inline-level content</a>.
+
+ <dd>Otherwise: any <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-title><a href="#title">title</a></code>
+ attribute has special semantics on this element when used with the
+ <code><a href="#dfn">dfn</a></code> element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#span">span</a></code> element doesn't mean anything
+ on its own, but can be useful when used together with other attributes,
+ e.g. <code title=attr-class><a href="#class">class</a></code>, <code
+ title=attr-lang><a href="#lang">lang</a></code>, or <code
+ title=attr-dir><a href="#dir">dir</a></code>, or when used in conjunction
+ with the <code><a href="#dfn">dfn</a></code> element.</p>
+ <!-- XXX need examples -->
+
+ <h4 id=the-i><span class=secno>3.12.19. </span>The <dfn
+ id=i><code>i</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-title><a href="#title">title</a></code>
+ attribute has special semantics on this element when used with the
+ <code><a href="#dfn">dfn</a></code> element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#i">i</a></code> element represents a span of text in
+ an alternate voice or mood, or otherwise offset from the normal prose,
+ such as a taxonomic designation, a technical term, an idiomatic phrase
+ from another language, a thought, a ship name, or some other prose whose
+ typical typographic presentation is italicized.
+
+ <p>Terms in languages different from the main text should be annotated with
+ <code title=attr-lang><a href="#lang">lang</a></code> attributes (<code
+ title=attr-xml-lang><a href="#xmllang">xml:lang</a></code> in XML).
+
+ <div class=example>
+ <p>The examples below show uses of the <code><a href="#i">i</a></code>
+ element:</p>
+
+ <pre>&lt;p>The &lt;i>felis silvestris catus&lt;/i> is cute.&lt;/p>
+&lt;p>The &lt;i>block-level elements&lt;/i> are defined above.&lt;/p>
+&lt;p>There is a certain &lt;i lang="fr">je ne sais quoi&lt;/i> in the air.&lt;/p></pre>
+
+ <p>In the following example, a dream sequence is marked up using <code><a
+ href="#i">i</a></code> elements.</p>
+
+ <pre>&lt;p>Raymond tried to sleep.&lt;/p>
+&lt;p>&lt;i>The ship sailed away on Thursday&lt;/i>, he
+dreamt. &lt;i>The ship had many people aboard, including a beautiful
+princess called Carey. He watched her, day-in, day-out, hoping she
+would notice him, but she never did.&lt;/i>&lt;/p>
+&lt;p>&lt;i>Finally one night he picked up the courage to speak with
+her&mdash;&lt;/i>&lt;/p>
+&lt;p>Raymond woke with a start as the fire alarm rang out.&lt;/p></pre>
+ </div>
+
+ <p>The <code><a href="#i">i</a></code> element should be used as a last
+ resort when no other element is more appropriate. In particular, citations
+ should use the <code><a href="#cite2">cite</a></code> element, defining
+ instances of terms should use the <code><a href="#dfn">dfn</a></code>
+ element, stress emphasis should use the <code><a href="#em">em</a></code>
+ element, importance should be denoted with the <code><a
+ href="#strong">strong</a></code> element, quotes should be marked up with
+ the <code><a href="#q">q</a></code> element, and small print should use
+ the <code><a href="#small">small</a></code> element.
+
+ <p class=note>Style sheets can be used to format <code><a
+ href="#i">i</a></code> elements, just like any other element can be
+ restyled. Thus, it is not the case that content in <code><a
+ href="#i">i</a></code> elements will necessarily be italicised.
+
+ <h4 id=the-b><span class=secno>3.12.20. </span>The <dfn
+ id=b><code>b</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#b">b</a></code> element represents a span of text to
+ be stylistically offset from the normal prose without conveying any extra
+ importance, such as key words in a document abstract, product names in a
+ review, or other spans of text whose typical typographic presentation is
+ boldened.
+
+ <div class=example>
+ <p>The following example shows a use of the <code><a
+ href="#b">b</a></code> element to highlight key words without marking
+ them up as important:</p>
+
+ <pre>&lt;p>The &lt;b>frobonitor&lt;/b> and &lt;b>barbinator&lt;/b> components are fried.&lt;/p></pre>
+
+ <p>The following would be <em>incorrect</em> usage:</p>
+
+ <pre>&lt;p>&lt;b>WARNING!&lt;/b> Do not frob the barbinator!&lt;/p></pre>
+
+ <p>In the previous example, the correct element to use would have been
+ <code><a href="#strong">strong</a></code>, not <code><a
+ href="#b">b</a></code>.</p>
+
+ <p>In the following example, objects in a text adventure are highlighted
+ as being special by use of the <code><a href="#b">b</a></code> element.</p>
+
+ <pre>&lt;p>You enter a small room. Your &lt;b>sword&lt;/b> glows
+brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
+ </div>
+
+ <p>The <code><a href="#b">b</a></code> element should be used as a last
+ resort when no other element is more appropriate. In particular, headers
+ should use the <code><a href="#h1">h1</a></code> to <code><a
+ href="#h6">h6</a></code> elements, stress emphasis should use the <code><a
+ href="#em">em</a></code> element, importance should be denoted with the
+ <code><a href="#strong">strong</a></code> element, and text marked or
+ highlighted should use the <code><a href="#m">m</a></code> element.
+
+ <p class=note>Style sheets can be used to format <code><a
+ href="#b">b</a></code> elements, just like any other element can be
+ restyled. Thus, it is not the case that content in <code><a
+ href="#b">b</a></code> elements will necessarily be boldened.
+
+ <h4 id=the-bdo><span class=secno>3.12.21. </span>The <dfn
+ id=bdo><code>bdo</code></dfn> element</h4>
+
+ <p><a href="#strictly">Strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#strictly">Strictly inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd>None, but the <code title=attr-dir><a href="#dir">dir</a></code>
+ global attribute is required on this element.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#bdo">bdo</a></code> element allows authors to
+ override the Unicode bidi algorithm by explicitly specifying a direction
+ override. <a href="#refsBIDI">[BIDI]</a>
+
+ <p>Authors must specify the <code title=attr-dir><a
+ href="#dir">dir</a></code> attribute on this element, with the value
+ <code>ltr</code> to specify a left-to-right override and with the value
+ <code>rtl</code> to specify a right-to-left override.
+
+ <p>If the element has the <code title=attr-dir><a
+ href="#dir">dir</a></code> attribute set to the exact value
+ <code>ltr</code>, then for the purposes of the bidi algorithm, the user
+ agent must act as if there was a U+202D LEFT-TO-RIGHT OVERRIDE character
+ at the start of the element, and a U+202C POP DIRECTIONAL FORMATTING at
+ the end of the element.
+
+ <p>If the element has the <code title=attr-dir><a
+ href="#dir">dir</a></code> attribute set to the exact value
+ <code>rtl</code>, then for the purposes of the bidi algorithm, the user
+ agent must act as if there was a U+202E RIGHT-TO-LEFT OVERRIDE character
+ at the start of the element, and a U+202C POP DIRECTIONAL FORMATTING at
+ the end of the element.
+
+ <p>The requirements on handling the <code><a href="#bdo">bdo</a></code>
+ element for the bidi algorithm may be implemented indirectly through the
+ style layer. For example, an HTML+CSS user agent should implement these
+ requirements by implementing the CSS <code>unicode-bidi</code> property.
+ <a href="#refsCSS21">[CSS21]</a></p>
+ <!-- XXX need examples -->
+
+ <h3 id=edits><span class=secno>3.13. </span>Edits</h3>
+
+ <p>The <code><a href="#ins">ins</a></code> and <code><a
+ href="#del">del</a></code> elements represent edits to the document.
+
+ <h4 id=the-ins><span class=secno>3.13.1. </span>The <dfn
+ id=ins><code>ins</code></dfn> element</h4>
+
+ <p><a href="#transparent0">Transparent</a> <a href="#block-level0"
+ title="block-level elements">block-level element</a>, and <a
+ href="#transparent0">transparent</a> <a href="#strictly">strictly
+ inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> is expected.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd><a href="#transparent0">Transparent</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-mod-cite><a href="#cite3">cite</a></code>
+
+ <dd><code title=attr-mod-datetime><a href="#datetime1">datetime</a></code>
+
+ <dt>DOM interface:
+
+ <dd>Uses the <code><a href="#htmlmodelement">HTMLModElement</a></code>
+ interface.
+ </dl>
+
+ <p>The <code><a href="#ins">ins</a></code> element represents an addition
+ to the document.
+
+ <p>The <code><a href="#ins">ins</a></code> element must be used only where
+ <a href="#block-level0">block-level elements</a> or <a
+ href="#strictly">strictly inline-level content</a> can be used.
+
+ <p>An <code><a href="#ins">ins</a></code> element can only contain content
+ that would still be conformant if all elements with <a
+ href="#transparent0">transparent</a> content models were replaced by their
+ contents.
+
+ <div class=example>
+ <p>The following would be syntactically legal:</p>
+
+ <pre>&lt;aside>
+ &lt;ins>
+ &lt;p>...&lt;/p>
+ &lt;/ins>
+&lt;/aside></pre>
+
+ <p>As would this:</p>
+
+ <pre>&lt;aside>
+ &lt;ins>
+ &lt;em>...&lt;/em>
+ &lt;/ins>
+&lt;/aside></pre>
+
+ <p>However, this last example would be illegal, as <code><a
+ href="#em">em</a></code> and <code><a href="#p">p</a></code> cannot both
+ be used inside an <code><a href="#aside">aside</a></code> element at the
+ same time:</p>
+
+ <pre>&lt;aside>
+ &lt;ins>
+ &lt;p>...&lt;/p>
+ &lt;/ins>
+ &lt;ins>
+ &lt;em>...&lt;/em>
+ &lt;/ins>
+&lt;/aside></pre>
+ </div>
+
+ <h4 id=the-del><span class=secno>3.13.2. </span>The <dfn
+ id=del><code>del</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>, and <a href="#strictly">strictly inline-level content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> is expected.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When the element has a parent: same content model as the parent
+ element (without taking into account the other children of the parent
+ element).
+
+ <dd>Otherwise: zero or more <a href="#block-level0">block-level
+ elements</a>, or <a href="#inline-level0">inline-level content</a> (but
+ not both).
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-mod-cite><a href="#cite3">cite</a></code>
+
+ <dd><code title=attr-mod-datetime><a href="#datetime1">datetime</a></code>
+
+ <dt>DOM interface:
+
+ <dd>Uses the <code><a href="#htmlmodelement">HTMLModElement</a></code>
+ interface.
+ </dl>
+
+ <p>The <code><a href="#del">del</a></code> element represents a removal
+ from the document.
+
+ <p>The <code><a href="#del">del</a></code> element must only contain
+ content that would be allowed inside the parent element (regardless of
+ what the parent element actually contains).
+
+ <div class=example>
+ <p>The following would be syntactically legal:</p>
+
+ <pre>&lt;aside>
+ &lt;del>
+ &lt;p>...&lt;/p>
+ &lt;/del>
+ &lt;ins>
+ &lt;em>...&lt;/em>
+ &lt;/ins>
+&lt;/aside></pre>
+
+ <p>...even though the <code><a href="#p">p</a></code> and <code><a
+ href="#em">em</a></code> elements would never be allowed side by side in
+ the <code><a href="#aside">aside</a></code> element. This is allowed
+ because the <code><a href="#del">del</a></code> element represents
+ content that was removed, and it is quite possible that an edit could
+ cause an element to go from being an inline-level container to a
+ block-level container, or vice-versa.</p>
+ </div>
+
+ <h4 id=attributes><span class=secno>3.13.3. </span>Attributes common to
+ <code><a href="#ins">ins</a></code> and <code><a
+ href="#del">del</a></code> elements</h4>
+
+ <p>The <dfn id=cite3 title=attr-mod-cite><code>cite</code></dfn> attribute
+ may be used to specify a URI that explains the change. When that document
+ is long, for instance the minutes of a meeting, authors are encouraged to
+ include a fragment identifier pointing to the specific part of that
+ document that discusses the change.
+
+ <p>If the <code title=attr-mod-cite><a href="#cite3">cite</a></code>
+ attribute is present, it must be a URI (or IRI) that explains the change.
+ User agents should allow users to follow such citation links.
+
+ <p>The <dfn id=datetime1
+ title=attr-mod-datetime><code>datetime</code></dfn> attribute may be used
+ to specify the time and date of the change.
+
+ <p>If present, the <code title=attr-mod-datetime><a
+ href="#datetime1">datetime</a></code> attribute must be a <a
+ href="#valid5">valid datetime</a> value.
+
+ <p>User agents must parse the <code title=attr-mod-datetime><a
+ href="#datetime1">datetime</a></code> attribute according to the <a
+ href="#datetime-parser">parse a string as a datetime value</a> algorithm.
+ If that doesn't return a time, then the modification has no associated
+ timestamp (the value is non-conforming; it is not a <a
+ href="#valid5">valid datetime</a>). Otherwise, the modification is marked
+ as having been made at the given datetime. User agents should use the
+ associated timezone information to determine which timezone to present the
+ given datetime in.
+
+ <p>The <code><a href="#ins">ins</a></code> and <code><a
+ href="#del">del</a></code> elements must implement the <code><a
+ href="#htmlmodelement">HTMLModElement</a></code> interface:
+
+ <pre
+ class=idl>interface <dfn id=htmlmodelement>HTMLModElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#cite4" title=dom-mod-cite>cite</a>;
+ attribute DOMString <a href="#datetime2" title=dom-mod-datetime>dateTime</a>;
+};</pre>
+
+ <p>The <dfn id=cite4 title=dom-mod-cite><code>cite</code></dfn> DOM
+ attribute must reflect the element's ><code title=attr-mod-cite><a
+ href="#cite3">cite</a></code> content attribute. The <dfn id=datetime2
+ title=dom-mod-datetime><code>dateTime</code></dfn> DOM attribute must
+ reflect the element's <code title="">datetime</code> content attribute.
+
+ <h3 id=embedded><span class=secno>3.14. </span>Embedded content</h3>
+
+ <h4 id=the-figure><span class=secno>3.14.1. </span>The <dfn
+ id=figure><code>figure</code></dfn> element</h4>
+
+ <p><a href="#block-level0" title="block-level elements">Block-level
+ element</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>Where <a href="#block-level0">block-level elements</a> are expected.
+
+ <dt>Content model:
+
+ <dd>In any order, exactly one <code><a href="#legend">legend</a></code>
+ element, and exactly one <a href="#embedded0">embedded content</a>
+ element.
+
+ <dt>Element-specific attributes:
+
+ <dd>None.
+
+ <dt>DOM interface:
+
+ <dd>No difference from <code><a
+ href="#htmlelement">HTMLElement</a></code>.
+ </dl>
+
+ <p>The <code><a href="#figure">figure</a></code> element represents a <a
+ href="#paragraph">paragraph</a> consisting of embedded content and a
+ caption.
+
+ <p>The first <a href="#embedded0">embedded content</a> element child of the
+ <code><a href="#figure">figure</a></code> element, if any, is the
+ paragraph's content.
+
+ <p>The first <code><a href="#legend">legend</a></code> element child of the
+ element, if any, represents the caption of the embedded content. If there
+ is no child <code><a href="#legend">legend</a></code> element, then there
+ is no caption.
+
+ <p>If the embedded content cannot be used, then, for the purposes of
+ establishing what the <code><a href="#figure">figure</a></code> element
+ represents:
+
+ <dl class=switch>
+ <dt>If the embedded content's <a href="#fallback">fallback content</a> is
+ a single <a href="#embedded0">embedded content</a> element
+
+ <dd>The <code><a href="#figure">figure</a></code> element must be treated
+ as if that <a href="#embedded0">embedded content</a> element was the
+ <code><a href="#figure">figure</a></code> element's embedded content. (If
+ that embedded content can't be used either, then this processing must be
+ done again, with the new embedded content's <a href="#fallback">fallback
+ content</a>.)
+
+ <dt>If the embedded content's fallback is nothing
+
+ <dd>The entire <code><a href="#figure">figure</a></code> element
+ (including the caption, if any) must be ignored.
+
+ <dt>If the embedded content's fallback is <a
+ href="#inline-level0">inline-level content</a>
+
+ <dd>The entire <code><a href="#figure">figure</a></code> element
+ (including the caption, if any) must be treated as being a single <a
+ href="#paragraph">paragraph</a> with that <a
+ href="#inline-level0">inline-level content</a> as its content.
+
+ <dt>Otherwise
+
+ <dd>The entire <code><a href="#figure">figure</a></code> element
+ (including the caption, if any) must be treated as being replaced by that
+ fallback content.
+ </dl>
+
+ <h4 id=the-img><span class=secno>3.14.2. </span>The <dfn
+ id=img><code>img</code></dfn> element</h4>
+
+ <p><a href="#strictly" title="Strictly inline-level content">Strictly
+ inline-level</a> <a href="#embedded0">embedded content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the only <a href="#embedded0">embedded content</a> child of a
+ <code><a href="#figure">figure</a></code> element.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-img-alt><a href="#alt">alt</a></code> (required)
+
+ <dd><code title=attr-img-src><a href="#src">src</a></code> (required)
+
+ <dd><code title=attr-hyperlink-usemap><a href="#usemap1">usemap</a></code>
+
+ <dd><code title=attr-img-ismap><a href="#ismap">ismap</a></code> (but only
+ if one of the ancestor elements is an <code><a href="#a">a</a></code>
+ element)
+
+ <dd><code title=attr-img-height><a href="#height">height</a></code>
+
+ <dd><code title=attr-img-width><a href="#width">width</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#alt0" title=dom-img-alt>alt</a>;
+ attribute DOMString <a href="#src0" title=dom-img-src>src</a>;
+ attribute DOMString <a href="#usemap" title=dom-img-useMap>useMap</a>;
+ attribute boolean <a href="#ismap0" title=dom-img-isMap>isMap</a>;
+ attribute long <a href="#height0" title=dom-img-height>height</a>;
+ attribute long <a href="#width0" title=dom-img-width>width</a>;
+ readonly attribute boolean <a href="#complete" title=dom-img-complete>complete</a>;
+};</pre>
+
+ <p class=note>An instance of <code><a
+ href="#htmlimageelement">HTMLImageElement</a></code> can be obtained
+ using the <code title=dom-image><a href="#image0">Image</a></code>
+ constructor.</p>
+ </dl>
+
+ <p>The <code><a href="#img">img</a></code> element represents a piece of
+ text with an alternate graphical representation. The text is given by the
+ <dfn id=alt title=attr-img-alt><code>alt</code></dfn> attribute, which
+ must be present, and the URI to the graphical representation of that text
+ is given in the <dfn id=src title=attr-img-src><code>src</code></dfn>
+ attribute, which must also be present.
+
+ <p>The image given by the <code title=attr-img-src><a
+ href="#src">src</a></code> attribute is the embedded content, and the
+ value of the <code title=attr-img-alt><a href="#alt">alt</a></code>
+ attribute is the <code><a href="#img">img</a></code> element's <a
+ href="#fallback">fallback content</a>.
+
+ <p>When the <code title=attr-img-alt><a href="#alt">alt</a></code>
+ attribute's value is the empty string, the image supplements the
+ surrounding content. In such cases, the image could be omitted without
+ affecting the meaning of the document.
+
+ <p>If the <code title=attr-img-alt><a href="#alt">alt</a></code> attribute
+ is omitted, user agents must treat the element as if it had an <code
+ title=attr-img-alt><a href="#alt">alt</a></code> attribute set to the
+ empty string.
+
+ <p>The <code title=attr-img-alt><a href="#alt">alt</a></code> attribute
+ does not represent advisory information. User agents must not present the
+ contents of the <code title=attr-img-alt><a href="#alt">alt</a></code>
+ attribute in the same way as content of the <code title=attr-title><a
+ href="#title">title</a></code> attribute.
+
+ <p class=big-issue>Guidelines on writing "alt" text here.</p>
+ <!-- http://www.cs.tut.fi/~jkorpela/html/alt.html -->
+
+ <p>The <code title=attr-img-src><a href="#src">src</a></code> attribute
+ must contain a URI (or IRI). If the <code title=attr-img-src><a
+ href="#src">src</a></code> attribute is omitted, there is no alternative
+ image representation.
+
+ <p>When the <code title=attr-img-src><a href="#src">src</a></code>
+ attribute is set, the user agent must immediately begin to download the
+ specified
+ resource<!-- XXX xref what fetching means, how to resolve URIs in
+ attributes (including those not in the DOM) -->,
+ unless the user agent cannot support images, or its support for images has
+ been disabled.
+
+ <p>The download of the image must <a href="#delays">delay the <code
+ title=event-load>load</code> event</a>.
+
+ <p>Once the download has completed, if the image is a valid image, the user
+ agent must <a href="#firing4">fire a <code title=event-load>load</code>
+ event</a> on the <code><a href="#img">img</a></code> element. If the
+ download fails or it completes but the image is not a valid or supported
+ image, the user agent must <a href="#firing5">fire an <code
+ title=event-error>error</code> event</a> on the <code><a
+ href="#img">img</a></code> element.
+
+ <p>The remote server's response metadata (e.g. an HTTP 404 status code, or
+ <a href="#content-type8" title=Content-Type>associated Content-Type
+ headers</a>) must be ignored when determining whether the resource
+ obtained is a valid image or not.
+
+ <p class=note>This allows servers to return images with error responses.
+
+ <p>User agents must not support non-image resources with the <code><a
+ href="#img">img</a></code> element.
+
+ <p>The <code title=attr-hyperlink-usemap><a
+ href="#usemap1">usemap</a></code> attribute, if present, can indicate that
+ the image has an associated <a href="#image">image map</a>.
+
+ <p>The <dfn id=ismap title=attr-img-ismap><code>ismap</code></dfn>
+ attribute, when used on an element that is a descendant of an <code><a
+ href="#a">a</a></code> element with an <code title=attr-hyperlink-href><a
+ href="#href6">href</a></code> attribute, indicates by its presence that
+ the element provides access to a server-side image map. This affects how
+ events are handled on the corresponding <code><a href="#a">a</a></code>
+ element.
+
+ <p>The <code title=attr-img-ismap><a href="#ismap">ismap</a></code>
+ attribute is a <a href="#boolean0">boolean attribute</a>. The attribute
+ must not be specified on an element that does not have an ancestor
+ <code><a href="#a">a</a></code> element.
+
+ <p>The <dfn id=height title=attr-img-height><code>height</code></dfn> and
+ <dfn id=width title=attr-img-width><code>width</code></dfn> attributes
+ give the preferred rendered dimensions of the image if the image is to be
+ shown in a visual medium.
+
+ <p class=big-issue>Should we require the dimensions to be correct? Should
+ we disallow percentages?
+
+ <p>The values of the <code title=attr-img-height><a
+ href="#height">height</a></code> and <code title=attr-img-width><a
+ href="#width">width</a></code> attributes must be either <a href="#valid"
+ title="valid non-negative integer">valid non-negative integers</a> or <a
+ href="#valid3" title="valid non-negative percentage">valid non-negative
+ percentages</a>.
+
+ <p>To parse the attributes, user agents must use the <a
+ href="#rules2">rules for parsing dimension values</a>. This will return
+ either an integer length, a percentage value, or nothing. When one of
+ these attributes has no value, it must be
+ <span>ignored</span><!-- XXX xref -->.
+
+ <p>The user agent requirements for processing the values obtained from
+ parsing these attributes are described <a href="#sizing" title="sizing of
+ embedded content">in the rendering section</a><!-- XXX xref
+ -->.
+
+ <p>The <code><a href="#img">img</a></code> element must be empty.</p>
+ <!-- contents
+ should be ignored for rendering but not for semantics,
+ e.g. <script>, <input>, etc. -->
+
+ <p>The DOM attributes <dfn id=alt0
+ title=dom-img-alt><code>alt</code></dfn>, <dfn id=src0
+ title=dom-img-src><code>src</code></dfn>, <dfn id=usemap
+ title=dom-img-useMap><code>useMap</code></dfn>, and <dfn id=ismap0
+ title=dom-img-isMap><code>isMap</code></dfn> each must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <p>The DOM attributes <dfn id=height0
+ title=dom-img-height><code>height</code></dfn> and <dfn id=width0
+ title=dom-img-width><code>width</code></dfn> must return the rendered
+ height and width of the image, in CSS pixels, if the image is being
+ rendered, and is being rendered to a visual medium, or 0 otherwise. <a
+ href="#refsCSS21">[CSS21]</a>
+
+ <p>The DOM attribute <dfn id=complete
+ title=dom-img-complete><code>complete</code></dfn> must return true if the
+ user agent has downloaded the image specified in the <code
+ title=attr-img-src><a href="#src">src</a></code> attribute, and it is a
+ valid image, and false otherwise.
+
+ <h4 id=the-iframe><span class=secno>3.14.3. </span>The <dfn
+ id=iframe><code>iframe</code></dfn> element</h4>
+
+ <p><a href="#strictly" title="Strictly inline-level content">Strictly
+ inline-level</a> <a href="#embedded0">embedded content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the only <a href="#embedded0">embedded content</a> child of a
+ <code><a href="#figure">figure</a></code> element.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Text (for details, see prose).
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-iframe-src><a href="#src1">src</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmliframeelement>HTMLIFrameElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#src2" title=dom-iframe-src>src</a>;<!--
+ readonly attribute Document <span title="dom-iframe-contentDocument">contentDocument</span>;
+ readonly attribute <span>Window</span> <span title="dom-iframe-contentWindow">contentWindow</span>;-->
+};</pre>
+
+ <p>Objects implementing the <code><a
+ href="#htmliframeelement">HTMLIFrameElement</a></code> interface must
+ also implement the <code>EmbeddingElement</code> interface defined in
+ the Window Object specification. <a href="#refsWINDOW">[WINDOW]</a></p>
+ <!-- XXX -->
+ </dl>
+
+ <p>The <code><a href="#iframe">iframe</a></code> element introduces a new
+ nested <a href="#browsing0">browsing context</a>.
+
+ <p>The <dfn id=src1 title=attr-iframe-src><code>src</code></dfn> attribute,
+ if present, must be a URI (or IRI) to a page that the nested <a
+ href="#browsing0">browsing context</a> is to contain. When the browsing
+ context is created, if the attribute is present, the user agent must <a
+ href="#navigate">navigate</a> this browsing context to the given URI, with
+ <a href="#replacement">replacement enabled</a>. If the user <a
+ href="#navigate" title=navigate>navigates</a> away from this page, the
+ <code><a href="#iframe">iframe</a></code>'s corresponding <code><a
+ href="#window">Window</a></code> object will reference new
+ <code>Document</code> objects, but the <code title=attr-iframe-src><a
+ href="#src1">src</a></code> attribute will not change.
+
+ <p>Whenever the <code title=attr-iframe-src><a href="#src1">src</a></code>
+ attribute is set, the nested <a href="#browsing0">browsing context</a>
+ must be <a href="#navigate" title=navigate>navigated</a> to the given URI.
+
+ <p>If the <code title=attr-iframe-src><a href="#src1">src</a></code>
+ attribute is not set when the element is created, the browsing context
+ will remain at the initial <code>about:blank</code> page.
+
+ <p>When content loads in an <code><a href="#iframe">iframe</a></code>,
+ after any <code title=event-load><a href="#load0">load</a></code> events
+ are fired within the content itself, the user agent must <a
+ href="#firing4">fire a <code title=event-load>load</code> event</a> at the
+ <code><a href="#iframe">iframe</a></code> element. When content fails to
+ load (e.g. due to a network error), then the user agent must <a
+ href="#firing5">fire an <code title=event-error>error</code> event</a> at
+ the element instead.
+
+ <p>When there is an active parser in the <code><a
+ href="#iframe">iframe</a></code>, and when anything in the <code><a
+ href="#iframe">iframe</a></code> that is <a href="#delays" title="delay
+ the load event">delaying the <code title=event-load>load</code> event</a>
+ in the <code><a href="#iframe">iframe</a></code>'s <a
+ href="#browsing0">browsing context</a>, the <code><a
+ href="#iframe">iframe</a></code> must <a href="#delays">delay the <code
+ title=event-load>load</code> event</a>.
+
+ <p class=note>If, during the handling of the <code title=event-load><a
+ href="#load0">load</a></code> event, the <a href="#browsing0">browsing
+ context</a> in the <code><a href="#iframe">iframe</a></code> is again <a
+ href="#navigate" title=navigate>navigated</a>, that will further <a
+ href="#delays">delay the <code title=event-load>load</code> event</a>.
+
+ <p>An <code><a href="#iframe">iframe</a></code> element never has <a
+ href="#fallback">fallback content</a>, as it will always create a nested
+ <a href="#browsing0">browsing context</a>, regardless of whether the
+ specified initial contents are successfully used.
+
+ <p><code><a href="#iframe">iframe</a></code> elements may contain any text.
+ <code><a href="#iframe">iframe</a></code> elements must not contain
+ element nodes. Descendants of <code><a href="#iframe">iframe</a></code>
+ elements represent nothing. (In legacy user agents that do not support
+ <code><a href="#iframe">iframe</a></code> elements, the contents would be
+ parsed as markup that could act as fallback content.)
+
+ <p class=big-issue>restrictions for what that text must be?
+
+ <p class=note>The <a href="#html-0">HTML parser</a> treats markup inside
+ <code><a href="#iframe">iframe</a></code> elements as text.
+
+ <p>The DOM attribute <dfn id=src2
+ title=dom-iframe-src><code>src</code></dfn> must <a
+ href="#reflect">reflect</a> the content attribute of the same name.
+
+ <h4 id=the-embed><span class=secno>3.14.4. </span>The <dfn
+ id=embed><code>embed</code></dfn> element</h4>
+
+ <p><a href="#strictly" title="Strictly inline-level content">Strictly
+ inline-level</a> <a href="#embedded0">embedded content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the only <a href="#embedded0">embedded content</a> child of a
+ <code><a href="#figure">figure</a></code> element.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-embed-src><a href="#src3">src</a></code> (required)
+
+ <dd><code title=attr-embed-type><a href="#type4">type</a></code>
+
+ <dd><code title=attr-embed-height>height</code>
+
+ <dd><code title=attr-embed-width>width</code>
+
+ <dd>Any other attribute that has no namespace (see prose).
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlembedelement>HTMLEmbedElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#src4" title=dom-embed-src>src</a>;
+ attribute DOMString <a href="#type5" title=dom-embed-type>type</a>;
+ attribute long <a href="#height1" title=dom-embed-height>height</a>;
+ attribute long <a href="#width1" title=dom-embed-width>width</a>;
+};</pre>
+
+ <p>Depending on the type of content instantiated by the <code><a
+ href="#embed">embed</a></code> element, the node may also support other
+ interfaces.</p>
+ </dl>
+
+ <p>The <code><a href="#embed">embed</a></code> element represents an
+ integration point for an external (typically non-HTML) application or
+ interactive content.
+
+ <p>The <dfn id=src3 title=attr-embed-src><code>src</code></dfn> attribute
+ gives the address of the resource being embedded. The attribute must be
+ present and contain a URI (or IRI).
+
+ <p>If the <code title=attr-embed-src><a href="#src3">src</a></code>
+ attribute is missing, then the <code><a href="#embed">embed</a></code>
+ element must be ignored.
+
+ <p>When the <code title=attr-embed-src><a href="#src3">src</a></code>
+ attribute is set, user agents are expected to find an appropriate handler
+ for the specified resource, based on the <a href="#type-of"
+ title=concept-embed-type>content's type</a>, and hand that handler the
+ content of the resource. If the handler supports a scriptable interface,
+ the <code><a href="#htmlembedelement">HTMLEmbedElement</a></code> object
+ representing the element should expose that interfaces.
+
+ <p>The download of the resource must <a href="#delays">delay the <code
+ title=event-load>load</code> event</a>.
+
+ <p>The user agent should pass the names and values of all the attributes of
+ the <code><a href="#embed">embed</a></code> element that have no namespace
+ to the handler used. Any (namespace-less) attribute may be specified on
+ the <code><a href="#embed">embed</a></code> element.</p>
+ <!-- duplicates what's in <object> section below -->
+
+ <p class=note>This specification does not define a mechanism for
+ interacting with third-party handlers, as it is expected to be
+ user-agent-specific. Some UAs might opt to support a plugin mechanism such
+ as the Netscape Plugin API; others may use remote content convertors or
+ have built-in support for certain types. <a href="#refsNPAPI">[NPAPI]</a>
+
+ <p>The <code><a href="#embed">embed</a></code> element has no <a
+ href="#fallback">fallback content</a>. If the user agent can't display the
+ specified resource, e.g. because the given type is not supported, then the
+ user agent must use a default handler for the content. (This default could
+ be as simple as saying "Unsupported Format", of course.)
+
+ <p>The <dfn id=type4 title=attr-embed-type><code>type</code></dfn>
+ attribute, if present, gives the MIME type of the linked resource. The
+ value must be a valid MIME type, optionally with parameters. <a
+ href="#refsRFC2046">[RFC2046]</a>
+
+ <p>The <dfn id=type-of title=concept-embed-type>type of the content</dfn>
+ being embedded is defined as follows:
+
+ <ol>
+ <li>If the element has a <code title=attr-embed-type><a
+ href="#type4">type</a></code> attribute, then the value of the <code
+ title=attr-embed-type><a href="#type4">type</a></code> attribute is the
+ <span>content's type</span>.
+
+ <li>Otherwise, if the specified resource has <a href="#content-type8"
+ title=Content-Type>explicit Content-Type metadata</a>, then that is the
+ <span>content's type</span>.
+
+ <li>Otherwise, the content has no type and there can be no appropriate
+ handler for it.
+ </ol>
+
+ <p class=big-issue>Should we instead say that the content-sniffing that
+ we're going to define for top-level browsing contexts should apply here?
+
+ <p class=big-issue>Should we require the type attribute to match the server
+ information?
+
+ <p class=big-issue>We should say that 404s, etc, don't affect whether the
+ resource is used or not. Not sure how to say it here though.
+
+ <p>Browsers should take extreme care when interacting with external content
+ intended for third-party renderers. 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 class=big-issue>height/width
+
+ <p>The DOM attributes <dfn id=src4
+ title=dom-embed-src><code>src</code></dfn> and <dfn id=type5
+ title=dom-embed-type><code>type</code></dfn> each must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <p>The DOM attributes <dfn id=height1
+ title=dom-embed-height><code>height</code></dfn> and <dfn id=width1
+ title=dom-embed-width><code>width</code></dfn> must return the rendered
+ height and width of the image, in CSS pixels, if the image is being
+ rendered, and is being rendered to a visual medium, or 0 otherwise. <a
+ href="#refsCSS21">[CSS21]</a>
+
+ <h4 id=the-object><span class=secno>3.14.5. </span>The <dfn
+ id=object><code>object</code></dfn> element</h4>
+
+ <p><a href="#strictly" title="Strictly inline-level content">Strictly
+ inline-level</a> <a href="#embedded0">embedded content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the only <a href="#embedded0">embedded content</a> child of a
+ <code><a href="#figure">figure</a></code> element.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>When used as the child of a <code><a href="#figure">figure</a></code>
+ element, or, when used as a <em><code><a href="#figure">figure</a></code>
+ fallback <code><a href="#object">object</a></code></em>: Zero or more
+ <code><a href="#param">param</a></code> elements, followed by either zero
+ or more <a href="#block-level0">block-level elements</a> or a single
+ <code><a href="#object">object</a></code> element, which is then
+ considered to be a <em><code><a href="#figure">figure</a></code> fallback
+ <code><a href="#object">object</a></code></em>.
+
+ <dd>Otherwise: Zero or more <code><a href="#param">param</a></code>
+ elements, followed by <a href="#inline-level0">inline-level content</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-object-data><a href="#data">data</a></code> (required
+ if <code title=attr-object-type><a href="#type6">type</a></code> is not
+ given)
+
+ <dd><code title=attr-object-type><a href="#type6">type</a></code>
+ (required if <code title=attr-object-data><a href="#data">data</a></code>
+ is not given)
+
+ <dd><code title=attr-hyperlink-usemap><a href="#usemap1">usemap</a></code>
+
+ <dd><code title=attr-object-height>height</code>
+
+ <dd><code title=attr-object-width>width</code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlobjectelement>HTMLObjectElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#data0" title=dom-object-data>data</a>;
+ attribute DOMString <a href="#type7" title=dom-object-type>type</a>;
+ attribute DOMString <a href="#usemap0" title=dom-object-useMap>useMap</a>;
+ attribute long <a href="#height2" title=dom-object-height>height</a>;
+ attribute long <a href="#width2" title=dom-object-width>width</a>;<!--
+ readonly attribute Document <span title="dom-object-contentDocument">contentDocument</span>;
+ readonly attribute <span>Window</span> <span title="dom-object-contentWindow">contentWindow</span>;-->
+};</pre>
+
+ <p>Objects implementing the <code><a
+ href="#htmlobjectelement">HTMLObjectElement</a></code> interface must
+ also implement the <code>EmbeddingElement</code> interface defined in
+ the Window Object specification. <a href="#refsWINDOW">[WINDOW]</a></p>
+
+ <p>Depending on the type of content instantiated by the <code><a
+ href="#object">object</a></code> element, the node may also support
+ other interfaces.</p>
+ </dl>
+
+ <p class=big-issue>Shouldn't allow inline-level content to be the content
+ model when the parent's content model is strictly inline only.
+
+ <p>The <code><a href="#object">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 nested <a href="#browsing0">browsing
+ context</a>, or as an external resource to be processed by a third-party
+ software package.
+
+ <p>The <dfn id=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 URI (or IRI).
+
+ <p>The <dfn id=type6 title=attr-object-type><code>type</code></dfn>
+ attribute, if present, specifies the type of the resource. If present, the
+ attribute must be a valid MIME type, optionally with parameters. <a
+ href="#refsRFC2046">[RFC2046]</a>
+
+ <p>One or both of the <code title=attr-object-data><a
+ href="#data">data</a></code> and <code title=attr-object-type><a
+ href="#type6">type</a></code> attributes must be present.
+
+ <p>Whenever the <code title=attr-object-data><a
+ href="#data">data</a></code> attribute changes, or, if the <code
+ title=attr-object-data><a href="#data">data</a></code> attribute is not
+ present, whenever the <code title=attr-object-type><a
+ href="#type6">type</a></code> attribute changes, the user agent must
+ follow the following steps to determine what the <code><a
+ href="#object">object</a></code> element represents:
+
+ <ol>
+ <li>
+ <p>If the <code title=attr-object-data><a href="#data">data</a></code>
+ attribute is present, then:</p>
+
+ <ol>
+ <li>
+ <p>Begin a load for the resource.</p>
+ <!-- XXX define that
+ --><!-- XXX xref -->
+ <p>The download of the resource must <a href="#delays">delay the <code
+ title=event-load>load</code> event</a>.</p>
+
+ <li>
+ <p>If the resource is not yet available (e.g. because the resource was
+ not available in the cache, so that loading the resource required
+ making a request over the network), then jump to step 3 in the overall
+ set of steps (fallback). When the resource becomes available, or if
+ the load fails, restart this algorithm from this step. Resources can
+ load incrementally; user agents may opt to consider a resource
+ "available" whenever enough data has been obtained to begin processing
+ the resource.
+
+ <li>
+ <p>If the load failed (e.g. DNS error), <a href="#firing5">fire an
+ <code title=event-error>error</code> event</a> at the element, then
+ jump to step 3 in the overall set of steps (fallback).
+
+ <li>
+ <p>Determine the <em>resource type</em>, as follows:</p>
+
+ <p class=big-issue>This says to trust the type. Should we instead use
+ the same mechanism as for browsing contexts?</p>
+
+ <dl class=switch>
+ <dt>If the resource has <a href="#content-type8"
+ title=Content-Type>associated Content-Type metadata</a>
+
+ <dd>The type is the type specified in <a href="#content-type8"
+ title=Content-Type>the resource's Content-Type metadata</a>.
+
+ <dt>Otherwise, if the <code title=attr-object-type><a
+ href="#type6">type</a></code> attribute is present
+
+ <dd>The type is the type specified in the <code
+ title=attr-object-type><a href="#type6">type</a></code> attribute.
+
+ <dt>Otherwise, there is no explicit type information
+
+ <dd>The type is the <span title="sniffed type of a resource">sniffed
+ type of the resource</span>.
+ </dl>
+
+ <li>
+ <p>Handle the content as given by the first of the following cases that
+ matches:</p>
+
+ <dl class=switch>
+ <dt>If the resource requires a special handler (e.g. a plugin)
+
+ <dd>
+ <p>The user agent should find an appropriate handler for the
+ specified resource, based on the <em>resource type</em> found in the
+ previous step, and pass the content of the resource to that handler.
+ If the handler supports a scriptable interface, the <code><a
+ href="#htmlobjectelement">HTMLObjectElement</a></code> object
+ representing the element should expose that interface. The handler
+ is not a nested <a href="#browsing0">browsing context</a>. If no
+ appropriate handler can be found, then jump to step 3 in the overall
+ set of steps (fallback).</p>
+
+ <p>The user agent should pass the names and values of all the <span
+ title=concept-param-parameter>parameters</span> given by <code><a
+ href="#param">param</a></code> elements that are children of the
+ <code><a href="#object">object</a></code> element to the handler
+ used.</p>
+ <!-- duplicates what's in <embed> section above -->
+ <p class=note>This specification does not define a mechanism for
+ interacting with third-party handlers, as it is expected to be
+ user-agent-specific. Some UAs might opt to support a plugin
+ mechanism such as the Netscape Plugin API; others may use remote
+ content convertors or have built-in support for certain types. <a
+ href="#refsNPAPI">[NPAPI]</a></p>
+
+ <p class=big-issue>this doesn't completely duplicate the navigation
+ section, since it handles &lt;param>, etc, but surely some work
+ should be done to work with it</p>
+
+ <dt>If the type of the resource is an <span>XML MIME
+ type</span><!-- XXX xref -->
+
+ <dt>If the type of the resource is HTML
+
+ <dt>If the type of the resource does not start with
+ "<code>image/</code>"
+
+ <dd>
+ <p>The <code><a href="#object">object</a></code> element must be
+ associated with a nested <a href="#browsing0">browsing context</a>,
+ if it does not already have one. The element's nested <a
+ href="#browsing0">browsing context</a> must then be <a
+ href="#navigate" title=navigate>navigated</a> to the given resource,
+ with <a href="#replacement">replacement enabled</a>. (The <code
+ title=attr-object-data><a href="#data">data</a></code> attribute of
+ the <code><a href="#object">object</a></code> element doesn't get
+ updated if the browsing context gets further navigated to other
+ locations.)</p>
+
+ <p class=big-issue>navigation might end up treating it as something
+ else, because it can do sniffing. how should we handle that?</p>
+
+ <dt>If the resource is a supported image format, and support for
+ images has not been disabled
+
+ <dd>
+ <p>The <code><a href="#object">object</a></code> element represents
+ the specified image. The image is not a nested <a
+ href="#browsing0">browsing context</a>.</p>
+
+ <p class=big-issue>shouldn't we use the image-sniffing stuff here?</p>
+
+ <dt>Otherwise
+
+ <dd>
+ <p>The <code><a href="#object">object</a></code> element represents
+ the specified image, but the image cannot be shown. Jump to step 3
+ below in the overall set of steps (fallback).</p>
+ </dl>
+
+ <li>
+ <p>The element's contents are not part of what the <code><a
+ href="#object">object</a></code> element represents.</p>
+
+ <li>
+ <p>Once the resource is completely loaded, <a href="#firing4">fire a
+ <code title=event-load>load</code> event</a> at the element.
+ </li>
+ <!-- XXX ordering of events (like with iframe)
+ -->
+ </ol>
+
+ <li>
+ <p>If the <code title=attr-object-data><a href="#data">data</a></code>
+ attribute is absent but the <code title=attr-object-type><a
+ href="#type6">type</a></code> attribute is present, and if the user
+ agent can find a handler suitable according to the value of the <code
+ title=attr-object-type><a href="#type6">type</a></code> attribute, then
+ that handler should be used. If the handler supports a scriptable
+ interface, the <code><a
+ href="#htmlobjectelement">HTMLObjectElement</a></code> object
+ representing the element should expose that interface. The handler is
+ not a nested <a href="#browsing0">browsing context</a>. If no suitable
+ handler can be found, jump to the next step (fallback).
+
+ <li>
+ <p>(Fallback.) The <code><a href="#object">object</a></code> element
+ doesn't represent anything except what the element's contents represent,
+ ignoring any leading <code><a href="#param">param</a></code> element
+ children. This is the element's <a href="#fallback">fallback
+ content</a>.
+ </ol>
+
+ <p>In the absence of other factors (such as style sheets), user agents must
+ show the user what the <code><a href="#object">object</a></code> element
+ represents. Thus, the contents of <code><a
+ href="#object">object</a></code> elements act as <a
+ href="#fallback">fallback content</a>, to be used only when referenced
+ resources can't be shown (e.g. because it returned a 404 error). This
+ allows multiple <code><a href="#object">object</a></code> elements to be
+ nested inside each other, targeting multiple user agents with different
+ capabilities, with the user agent picking the best one it supports.
+
+ <p>The <code title=attr-hyperlink-usemap><a
+ href="#usemap1">usemap</a></code> attribute, if present while the <code><a
+ href="#object">object</a></code> element represents an image, can indicate
+ that the object has an associated <a href="#image">image map</a>. The
+ attribute must be ignored if the <code><a href="#object">object</a></code>
+ element doesn't represent an image.
+
+ <p class=big-issue>height/width
+
+ <p>The DOM attributes <dfn id=data0
+ title=dom-object-data><code>data</code></dfn>, <dfn id=type7
+ title=dom-object-type><code>type</code></dfn>, <dfn id=usemap0
+ title=dom-object-useMap><code>useMap</code></dfn>, <dfn id=height2
+ title=dom-object-height><code>height</code></dfn>, and <dfn id=width2
+ title=dom-object-width><code>width</code></dfn> each must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <h4 id=the-param><span class=secno>3.14.6. </span>The <dfn
+ id=param><code>param</code></dfn> element</h4>
+ <!-- no type -->
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As a child of an <code><a href="#object">object</a></code> element,
+ before any content other than <code><a href="#param">param</a></code>
+ elements.
+
+ <dt>Content model:
+
+ <dd>Empty.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-param-name><a href="#name1">name</a></code>
+ (required)
+
+ <dd><code title=attr-param-value><a href="#value5">value</a></code>
+ (required)
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlparamelement>HTMLParamElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+ attribute DOMString <a href="#name2" title=dom-param-name>name</a>;
+ attribute DOMString <a href="#value6" title=dom-param-value>value</a>;
+};</pre>
+ </dl>
+
+ <p>The <code><a href="#param">param</a></code> element defines parameters
+ for handlers invoked by <code><a href="#object">object</a></code>
+ elements.
+
+ <p>The <dfn id=name1 title=attr-param-name><code>name</code></dfn>
+ attribute gives the name of the parameter.
+
+ <p>The <dfn id=value5 title=attr-param-value><code>value</code></dfn>
+ attribute gives the value of the parameter.
+
+ <p>Both attributes must be present. They may have any value.
+
+ <p>If both attributes are present, and if the parent element of the
+ <code><a href="#param">param</a></code> is an <code><a
+ href="#object">object</a></code> element, then the element defines a <dfn
+ id=parameter title=concept-param-parameters>parameter</dfn> with the given
+ name/value pair.
+
+ <p>The DOM attributes <dfn id=name2
+ title=dom-param-name><code>name</code></dfn> and <dfn id=value6
+ title=dom-param-value><code>value</code></dfn> must both <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <h4 id=video><span class=secno>3.14.7. </span>The <dfn
+ id=video1><code>video</code></dfn> element</h4>
+
+ <p><a href="#semi-transparent">Semi-transparent</a> <a href="#strictly"
+ title="Strictly inline-level content">strictly inline-level</a> <a
+ href="#embedded0">embedded content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the only <a href="#embedded0">embedded content</a> child of a
+ <code><a href="#figure">figure</a></code> element.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>If the element has a <code title=attr-media-src><a
+ href="#src5">src</a></code> attribute: <a
+ href="#transparent0">transparent</a>.
+
+ <dd>If the element does not have a <code title=attr-media-src><a
+ href="#src5">src</a></code> attribute: one or more <code><a
+ href="#source">source</a></code> elements, then, <a
+ href="#transparent0">transparent</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-media-src><a href="#src5">src</a></code>
+
+ <dd><code title=attr-media-autoplay><a
+ href="#autoplay">autoplay</a></code>
+
+ <dd><code title=attr-media-start><a href="#start2">start</a></code>
+
+ <dd><code title=attr-media-loopstart><a
+ href="#loopstart">loopstart</a></code>
+
+ <dd><code title=attr-media-loopend><a href="#loopend">loopend</a></code>
+
+ <dd><code title=attr-media-end><a href="#end">end</a></code>
+
+ <dd><code title=attr-media-loopcount><a
+ href="#loopcount">loopcount</a></code>
+
+ <dd><code title=attr-media-controls><a
+ href="#controls">controls</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlvideoelement>HTMLVideoElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> {
+ readonly attribute unsigned long <a href="#videowidth" title=dom-video-videoWidth>videoWidth</a>;
+ readonly attribute unsigned long <a href="#videoheight" title=dom-video-videoHeight>videoHeight</a>;
+};</pre>
+ </dl>
+ <!-- XXX request: changing the playback aspect ratio -->
+ <!-- XXX request: applying CSS filters -->
+
+ <p>A <code><a href="#video1">video</a></code> element represents a video or
+ movie.
+
+ <p>Content may be provided inside the <code><a
+ href="#video1">video</a></code> element so that older Web browsers, which
+ do not support <code><a href="#video1">video</a></code>, can display text
+ to the user informing them of how to access the video contents. User
+ agents should not show this fallback content to the user.
+
+ <p>The <code><a href="#video1">video</a></code> element is a <a
+ href="#media5">media element</a> whose <a href="#media7">media data</a> is
+ ostensibly video data, possibly with associated audio data.
+
+ <p>The <code title=attr-media-src><a href="#src5">src</a></code>, <code
+ title=attr-media-autoplay><a href="#autoplay">autoplay</a></code>, <code
+ title=attr-media-start><a href="#start2">start</a></code>, <code
+ title=attr-media-loopstart><a href="#loopstart">loopstart</a></code>,
+ <code title=attr-media-loopend><a href="#loopend">loopend</a></code>,
+ <code title=attr-media-end><a href="#end">end</a></code>, <code
+ title=attr-media-loopcount><a href="#loopcount">loopcount</a></code>, and
+ <code title=attr-media-controls><a href="#controls">controls</a></code>
+ attributes are <a href="#media6" title="media element attributes">the
+ attributes common to all media elements</a>.
+
+ <p>The <dfn id=videowidth
+ title=dom-video-videoWidth><code>videoWidth</code></dfn> DOM attribute
+ must return the native width of the video in CSS pixels. The <dfn
+ id=videoheight title=dom-video-videoHeight><code>videoHeight</code></dfn>
+ DOM attribute must return the native height of the video in CSS pixels. In
+ the absence of resolution information, user agents may assume that one
+ pixel in the video corresponds to one CSS pixel. If no video data is
+ available, then the attributes must return 0.
+
+ <p>When no video data is available (the element's <code
+ title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute is either <code
+ title=dom-media-EMPTY><a href="#empty">EMPTY</a></code>, <code
+ title=dom-media-LOADING><a href="#loading0">LOADING</a></code>, or <code
+ title=dom-media-LOADED_METADATA><a
+ href="#loadedmetadata">LOADED_METADATA</a></code>), <code><a
+ href="#video1">video</a></code> elements represent nothing.
+
+ <p>When a <code><a href="#video1">video</a></code> element is <a
+ href="#actively">actively playing</a>, it represents the frame of video at
+ the continuously increasing <a href="#current" title="current playback
+ position">"current" position</a>. When the <a href="#current">current
+ playback position</a> changes such that the last frame rendered is no
+ longer the frame corresponding to the <a href="#current">current playback
+ position</a> in the video, the new frame must be rendered. Similarly, any
+ audio associated with the video must, if played, be played synchronised
+ with the <a href="#current">current playback position</a>, at the
+ specified <a href="#volume" title=dom-media-volume>volume</a> with the
+ specified <a href="#muted" title=dom-media-muted>mute state</a>.
+
+ <p>When a <code><a href="#video1">video</a></code> element is <a
+ href="#paused" title=dom-media-paused>paused</a>, the element represents
+ the frame of video corresponding to the <a href="#current" title="current
+ playback position">current playback position</a>, or, if that is not
+ available yet (e.g. because the video is seeking or buffering), the last
+ rendered frame of video.
+
+ <p>When a <code><a href="#video1">video</a></code> element is neither <a
+ href="#actively">actively playing</a> nor <a href="#paused"
+ title=dom-media-paused>paused</a>, the element represents the last frame
+ of the video to have been rendered.
+
+ <p class=note>Which frame in a video stream corresponds to a particular
+ playback position is defined by the video stream's format.
+
+ <p>Video content should be rendered inside the element's playback area such
+ that the video content is shown centered in the playback area at the
+ largest possible size that fits completely within it, with the video
+ content's aspect ratio being preserved. Thus, if the aspect ratio of the
+ playback area does not match the aspect ratio of the video, the video will
+ be shown letterboxed. Areas of the element's playback area that do not
+ contain the video represent nothing.</p>
+ <!-- XXX
+ make it an interactive element
+ default activation behaviour is to do the play() if paused, pause()
+ otherwise
+ -->
+
+ <p>User agents should provide controls to enable or disable the display of
+ closed captions associated with the video stream, though such features
+ should, again, not interfere with the page's normal rendering.
+
+ <p>User agents may allow users to view the video content in manners more
+ suitable to the user (e.g. full-screen or in an independent resizable
+ window). As for the other user interface features, controls to enable this
+ should not interfere with the page's normal rendering unless the user
+ agent is <a href="#expose" title="expose a user interface to the
+ user">exposing a user interface</a>. In such an independent context,
+ however, user agents may make full user interfaces visible, with, e.g.,
+ play, pause, seeking, and volume controls, even if the <code
+ title=attr-media-controls><a href="#controls">controls</a></code>
+ attribute is absent.
+
+ <p>User agents may allow video playback to affect system features that
+ could interfere with the user's experience; for example, user agents could
+ disable screensavers while video playback is in progress.</p>
+ <!-- XXX rendering section should mention that resizing a video
+ should in no way interrupt playback -->
+
+ <h5 id=video0><span class=secno>3.14.7.1. </span>Video and audio codecs for
+ <code><a href="#video1">video</a></code> elements</h5>
+
+ <p>User agents may support any video and audio codecs and container
+ formats.
+
+ <p>User agents should support Ogg Theora video and Ogg Vorbis audio, as
+ well as the Ogg container format. <a href="#refsOggTheora">[THEORA]</a> <a
+ href="#refsOggVorbis">[VORBIS]</a> <a href="#refsOgg">[OGG]</a></p>
+ <!-- (it's not a MUST because some vendors may have legal reasons
+ why they can't or won't support it, and there's no point making them
+ non-conforming when they have no choice in the matter) -->
+ <!-- XXX mention that this spec doesn't require native support or
+ plugin support, either is fine -->
+
+ <h4 id=audio><span class=secno>3.14.8. </span>The <dfn
+ id=audio1><code>audio</code></dfn> element</h4>
+
+ <p><a href="#semi-transparent">Semi-transparent</a> <a href="#strictly"
+ title="Strictly inline-level content">strictly inline-level</a> <a
+ href="#embedded0">embedded content</a>.
+
+ <dl class=element>
+ <dt>Contexts in which this element may be used:
+
+ <dd>As the only <a href="#embedded0">embedded content</a> child of a
+ <code><a href="#figure">figure</a></code> element.
+
+ <dd>Where <a href="#strictly">strictly inline-level content</a> is
+ allowed.
+
+ <dt>Content model:
+
+ <dd>If the element has a <code title=attr-media-src><a
+ href="#src5">src</a></code> attribute: <a
+ href="#transparent0">transparent</a>.
+
+ <dd>If the element does not have a <code title=attr-media-src><a
+ href="#src5">src</a></code> attribute: one or more <code><a
+ href="#source">source</a></code> elements, then, <a
+ href="#transparent0">transparent</a>.
+
+ <dt>Element-specific attributes:
+
+ <dd><code title=attr-media-src><a href="#src5">src</a></code>
+
+ <dd><code title=attr-media-autoplay><a
+ href="#autoplay">autoplay</a></code>
+
+ <dd><code title=attr-media-start><a href="#start2">start</a></code>
+
+ <dd><code title=attr-media-loopstart><a
+ href="#loopstart">loopstart</a></code>
+
+ <dd><code title=attr-media-loopend><a href="#loopend">loopend</a></code>
+
+ <dd><code title=attr-media-end><a href="#end">end</a></code>
+
+ <dd><code title=attr-media-loopcount><a
+ href="#loopcount">loopcount</a></code>
+
+ <dd><code title=attr-media-controls><a
+ href="#controls">controls</a></code>
+
+ <dt>DOM interface:
+
+ <dd>
+ <pre
+ class=idl>interface <dfn id=htmlaudioelement>HTMLAudioElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> {
+ // no members
+};</pre>
+ </dl>
+
+ <p>An <code><a href="#audio1">audio</a></code> element represents a sound
+ or audio stream.
+
+ <p>Content may be provided inside the <code><a
+ href="#audio1">audio</a></code> element so that older Web browsers, which
+ do not support <code><a href="#audio1">audio</a></code>, can display text
+ to the user informing them of how to access the audio contents. User
+ agents should not show this fallback content to the user.
+
+ <p>The <code><a href="#audio1">audio</a></code> element is a <a
+ href="#media5">media element</a> whose <a href="#media7">media data</a> is
+ ostensibly audio data.
+
+ <p>The <code title=attr-media-src><a href="#src5">src</a></code>, <code
+ title=attr-media-autoplay><a href="#autoplay">autoplay</a></code>, <code
+ title=attr-media-start><a href="#start2">start</a></code>, <code
+ title=attr-media-loopstart><a href="#loopstart">loopstart</a></code>,
+ <code title=attr-media-loopend><a href="#loopend">loopend</a></code>,
+ <code title=attr-media-end><a href="#end">end</a></code>, <code
+ title=attr-media-loopcount><a href="#loopcount">loopcount</a></code>, and
+ <code title=attr-media-controls><a href="#controls">controls</a></code>
+ attributes are <a href="#media6" title="media element attributes">the
+ attributes common to all media elements</a>.
+
+ <p>When an <code><a href="#audio1">audio</a></code> element is <a
+ href="#actively">actively playing</a>, it must have its audio data played
+ synchronised with the <a href="#current">current playback position</a>, at
+ the specified <a href="#volume" title=dom-media-volume>volume</a> with the
+ specified <a href="#muted" title=dom-media-muted>mute state</a>.
+
+ <p>When an <code><a href="#audio1">audio</a></code> element is not <a
+ href="#actively">actively playing</a>, audio must not play for the
+ element.
+
+ <h5 id=audio0><span class=secno>3.14.8.1. </span>Audio codecs for <code><a
+ href="#audio1">audio</a></code> elements</h5>
+
+ <p>User agents may support any audio codecs and container formats.
+
+ <p>User agents must support the WAVE container format with audio encoded
+ using the PCM format. <!-- XXX references? #refs --></p>
+ <!-- XXX mention that this spec doesn't require native support or
+ plugin support, either is fine -->
+
+ <h4 id=media><span class=secno>3.14.9. </span>Media elements</h4>
+
+ <p><dfn id=media5 title="media element">Media elements</dfn> implement the
+ following interface:
+
+ <pre
+ class=idl>interface <dfn id=htmlmediaelement>HTMLMediaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
+
+ // error state
+ readonly attribute <a href="#mediaerror">MediaError</a> <a href="#error0" title=dom-media-error>error</a>;
+
+ // network state
+ attribute DOMString <a href="#src6" title=dom-media-src>src</a>;
+ readonly attribute DOMString <a href="#currentsrc" title=dom-media-currentSrc>currentSrc</a>;
+ const unsigned short <a href="#empty" title=dom-media-EMPTY>EMPTY</a> = 0;
+ const unsigned short <a href="#loading0" title=dom-media-LOADING>LOADING</a> = 1;
+ const unsigned short <a href="#loadedmetadata" title=dom-media-LOADED_METADATA>LOADED_METADATA</a> = 2;
+ const unsigned short <a href="#loadedfirstframe" title=dom-media-LOADED_FIRST_FRAME>LOADED_FIRST_FRAME</a> = 3;
+ const unsigned short <a href="#loaded" title=dom-media-LOADED>LOADED</a> = 4;
+ readonly attribute unsigned short <a href="#networkstate" title=dom-media-networkState>networkState</a>;
+ readonly attribute float <a href="#bufferingrate" title=dom-media-bufferingRate>bufferingRate</a>;
+ readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#buffered" title=dom-media-buffered>buffered</a>;
+ void <a href="#load" title=dom-media-load>load</a>();
+
+ // ready state
+ const unsigned short <a href="#dataunavailable" title=dom-media-DATA_UNAVAILABLE>DATA_UNAVAILABLE</a> = 0;
+ const unsigned short <a href="#canshowcurrentframe" title=dom-media-CAN_SHOW_CURRENT_FRAME>CAN_SHOW_CURRENT_FRAME</a> = 1;
+ const unsigned short <a href="#canplay" title=dom-media-CAN_PLAY>CAN_PLAY</a> = 2;
+ const unsigned short <a href="#canplaythrough" title=dom-media-CAN_PLAY_THROUGH>CAN_PLAY_THROUGH</a> = 3;
+ readonly attribute unsigned short <a href="#readystate" title=dom-media-readyState>readyState</a>;
+ readonly attribute boolean <a href="#seeking0" title=dom-media-seeking>seeking</a>;
+
+ // playback state
+ attribute float <a href="#currenttime" title=dom-media-currentTime>currentTime</a>;
+ readonly attribute float <a href="#duration" title=dom-media-duration>duration</a>;
+ readonly attribute unsigned short <a href="#paused" title=dom-media-paused>paused</a>;
+ attribute float <a href="#defaultplaybackrate" title=dom-media-defaultPlaybackRate>defaultPlaybackRate</a>;
+ attribute float <a href="#playbackrate" title=dom-media-playbackRate>playbackRate</a>;
+ readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#played" title=dom-media-played>played</a>;
+ readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#seekable" title=dom-media-seekable>seekable</a>;
+ readonly attribute boolean <a href="#ended0" title=dom-media-ended>ended</a>;
+ attribute boolean <a href="#autoplay0" title=dom-media-autoplay>autoplay</a>;
+ void <a href="#play" title=dom-media-play>play</a>();
+ void <a href="#pause0" title=dom-media-pause>pause</a>();
+
+ // looping
+ attribute float <a href="#start3" title=dom-media-start>start</a>;
+ attribute float <a href="#end0" title=dom-media-end>end</a>;
+ attribute float <a href="#loopstart0" title=dom-media-loopStart>loopStart</a>;
+ attribute float <a href="#loopend0" title=dom-media-loopEnd>loopEnd</a>;
+ attribute unsigned long <a href="#loopcount0" title=dom-media-loopCount>loopCount</a>;
+ attribute unsigned long <a href="#currentloop" title=dom-media-currentLoop>currentLoop</a>;
+
+ // cue points
+ void <a href="#addcuepoint" title=dom-media-addCuePoint>addCuePoint</a>(in float time, in <a href="#voidcallback">VoidCallback</a> callback, in bool pause);
+ void <a href="#removecuepoint" title=dom-media-removeCuePoint>removeCuePoint</a>(in float time, in <a href="#voidcallback">VoidCallback</a> callback);
+
+ // controls
+ attribute boolean <a href="#controls0" title=dom-media-controls>controls</a>;
+ attribute float <a href="#volume" title=dom-media-volume>volume</a>;
+ attribute boolean <a href="#muted" title=dom-media-muted>muted</a>;
+};</pre>
+
+ <p>The <dfn id=media6>media element attributes</dfn>, <code
+ title=attr-media-src><a href="#src5">src</a></code>, <code
+ title=attr-media-autoplay><a href="#autoplay">autoplay</a></code>, <code
+ title=attr-media-start><a href="#start2">start</a></code>, <code
+ title=attr-media-loopstart><a href="#loopstart">loopstart</a></code>,
+ <code title=attr-media-loopend><a href="#loopend">loopend</a></code>,
+ <code title=attr-media-end><a href="#end">end</a></code>, <code
+ title=attr-media-loopcount><a href="#loopcount">loopcount</a></code>, and
+ <code title=attr-media-controls><a href="#controls">controls</a></code>,
+ apply to all <a href="#media5" title="media element">media elements</a>.
+ They are defined in this section.</p>
+ <!-- XXX v3 features:
+ * frame forward / backwards / step(n) while paused
+ * hasAudio, hasVideo, hasCaptions, etc
+ * per-frame control: get current frame; set current frame
+ * queue of content
+ - pause current stream and insert content at front of queue to play immediately
+ - pre-download another stream
+ - add stream(s) to play at end of current stream
+ - pause playback upon reaching a certain time
+ - playlists, with the ability to get metadata out of them (e.g. xspf)
+ * control over closed captions: enable, disable, select language
+ * get byte ranges as well as time ranges for buffered data
+ * in-band metadata and cue points to allow:
+ - Chapter markers that synchronize to playback (without having to poll
+ the playhead position)
+ - Annotations on video content (i.e., pop-up video)
+ - General custom metadata store (ratings, etc.)
+ * notification of chapter labels changing on the fly:
+ - onchapterlabelupdate, which has a time and a label
+ * general meta data, implemented as getters (don't expose the whole thing)
+ - getMetadata(key: string, language: string) => HTMLImageElement or string
+ - onmetadatachanged (no context info)
+ -->
+
+ <p><a href="#media5" title="media element">Media elements</a> are used to
+ present audio data, or video and audio data, to the user. This is referred
+ to as <dfn id=media7>media data</dfn> in this section, since this section
+ applies equally to <a href="#media5" title="media element">media
+ elements</a> for audio or for video. The term <dfn id=media8>media
+ resource</dfn> is used to refer to the complete set of media data, e.g.
+ the complete video file, or complete audio file.
+
+ <h5 id=error><span class=secno>3.14.9.1. </span>Error codes</h5>
+
+ <p>All <a href="#media5" title="media element">media elements</a> have an
+ associated error status, which records the last error the element
+ encountered since the <code title=dom-media-load><a
+ href="#load">load()</a></code> method was last invoked. The <dfn id=error0
+ title=dom-media-error><code>error</code></dfn> attribute, on getting, must
+ return the <code><a href="#mediaerror">MediaError</a></code> object
+ created for this last error, or null if there has not been an error.
+
+ <pre class=idl>interface <dfn id=mediaerror>MediaError</dfn> {
+ const unsigned short <a href="#mediaerraborted" title=dom-MediaError-MEDIA_ERR_ABORTED>MEDIA_ERR_ABORTED</a> = 1;
+ const unsigned short <a href="#mediaerrnetwork" title=dom-MediaError-MEDIA_ERR_NETWORK>MEDIA_ERR_NETWORK</a> = 2;
+ const unsigned short <a href="#mediaerrdecode" title=dom-MediaError-MEDIA_ERR_DECODE>MEDIA_ERR_DECODE</a> = 3;
+ readonly attribute unsigned short <a href="#code0" title=dom-MediaError-code>code</a>;
+};</pre>
+
+ <p>The <dfn id=code0 title=dom-MediaError-code><code>code</code></dfn>
+ attribute of a <code><a href="#mediaerror">MediaError</a></code> object
+ must return the code for the error, which must be one of the following:
+
+ <dl>
+ <dt><dfn id=mediaerraborted
+ title=dom-MediaError-MEDIA_ERR_ABORTED><code>MEDIA_ERR_ABORTED</code></dfn>
+ (numeric value 1)
+
+ <dd>The download of the <a href="#media8">media resource</a> was aborted
+ by the user agent at the user's request.
+
+ <dt><dfn id=mediaerrnetwork
+ title=dom-MediaError-MEDIA_ERR_NETWORK><code>MEDIA_ERR_NETWORK</code></dfn>
+ (numeric value 2)
+
+ <dd>A network error of some description caused the user agent to stop
+ downloading the <a href="#media8">media resource</a>.
+
+ <dt><dfn id=mediaerrdecode
+ title=dom-MediaError-MEDIA_ERR_DECODE><code>MEDIA_ERR_DECODE</code></dfn>
+ (numeric value 3)
+
+ <dd>An error of some description occurred while decoding the <a
+ href="#media8">media resource</a>.
+ </dl>
+
+ <h5 id=location><span class=secno>3.14.9.2. </span>Location of the media
+ resource</h5>
+
+ <p>The <dfn id=src5 title=attr-media-src><code>src</code></dfn> content
+ attribute on <a href="#media5" title="media element">media elements</a>
+ gives the address of the video to show. The attribute, if present, must
+ contain a URI (or IRI).
+
+ <p class=note>If a <code title=attr-media-src><a
+ href="#src5">src</a></code> attribute is specified, the resource it
+ specifies is the <a href="#media8">media resource</a> that will be used.
+ Otherwise, the resource specified by the first suitable <code><a
+ href="#source">source</a></code> element child of the <a
+ href="#media5">media element</a> is the one used.
+
+ <p>The <dfn id=src6 title=dom-media-src><code>src</code></dfn> DOM
+ attribute on <a href="#media5" title="media element">media elements</a>
+ must <a href="#reflect">reflect</a> the content attribute of the same
+ name.
+
+ <p>To <dfn id=pick-a>pick a media resource</dfn> for a <a
+ href="#media5">media element</a>, a user agent must follow the following
+ steps:
+
+ <ol>
+ <li>
+ <p>If the <a href="#media5">media element</a> has a <code
+ title=attr-media-src><a href="#src5">src</a></code>, then the address
+ given in that attribute is the address of the <a href="#media8">media
+ resource</a>; jump to the last step.
+
+ <li>
+ <p>Otherwise, let <var title="">candidate</var> be the first <code><a
+ href="#source">source</a></code> element child in the <a
+ href="#media5">media element</a>, or null if there is no such child.
+
+ <li>
+ <p>If either:</p>
+
+ <ul>
+ <li><var title="">candidate</var> is null, or
+
+ <li>the <var title="">candidate</var> element has no <code
+ title=attr-source-src><a href="#src7">src</a></code> attribute, or
+
+ <li>the <var title="">candidate</var> element has a <code
+ title=attr-source-type><a href="#type8">type</a></code> attribute and
+ that attribute's value, when parsed as a MIME type, does not represent
+ a type that the user agent can render (including any codecs described
+ by the <code title="">codec</code> parameter), or <a
+ href="#refsRFC2046">[RFC2046]</a> <a href="#refsRFC4281">[RFC4281]</a>
+
+ <li>the <var title="">candidate</var> element has a <code
+ title=attr-source-media><a href="#media9">media</a></code> attribute
+ and that attribute's value, when processed according to the rules for
+ media queries, does not match the current environment, <a
+ href="#refsMQ">[MQ]</a>
+ </ul>
+
+ <p>...then the <var title="">candidate</var> is not suitable; go to the
+ next step.</p>
+
+ <p>Otherwise, the address given in that <var title="">candidate</var>
+ element's <code title=attr-source-src><a href="#src7">src</a></code>
+ attribute is the address of the <a href="#media8">media resource</a>;
+ jump to the last step.</p>
+
+ <li>
+ <p>Let <var title="">candidate</var> be the next <code><a
+ href="#source">source</a></code> element child in the <a
+ href="#media5">media element</a>, or null if there are no more such
+ children.
+
+ <li>
+ <p>If <var title="">candidate</var> is not null, return to step 3.
+
+ <li>
+ <p>There is no <a href="#media8">media resource</a>. Abort these steps.
+
+ <li>
+ <p>Let the address of the <dfn id=chosen>chosen media resource</dfn> be
+ the one that was found before jumping to this step.
+ </ol>
+
+ <p>The <dfn id=currentsrc
+ title=dom-media-currentSrc><code>currentSrc</code></dfn> DOM attribute
+ must return the empty string if the <a href="#media5">media element</a>'s
+ <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> has the value <a
+ href="#empty" title=dom-media-EMPTY>EMPTY</a>, and the absolute URL of the
+ <a href="#chosen">chosen media resource</a> otherwise.
+
+ <h5 id=network0><span class=secno>3.14.9.3. </span>Network states</h5>
+
+ <p>As <a href="#media5" title="media element">media elements</a> interact
+ with the network, they go through several states. The <dfn id=networkstate
+ title=dom-media-networkState><code>networkState</code></dfn> attribute, on
+ getting, must return the current network state of the element, which must
+ be one of the following values:
+
+ <dl>
+ <dt><dfn id=empty title=dom-media-EMPTY><code>EMPTY</code></dfn> (numeric
+ value 0)
+
+ <dd>The element has not yet been initialised. All attributes are in their
+ initial states.
+
+ <dt><dfn id=loading0 title=dom-media-LOADING><code>LOADING</code></dfn>
+ (numeric value 1)
+
+ <dd>The element has <a href="#pick-a" title="pick a media resource">picked
+ a media resource</a> (the <a href="#chosen">chosen media resource</a> is
+ available from the <code title=dom-media-currentSrc><a
+ href="#currentsrc">currentSrc</a></code> attribute), but none of the
+ metadata has yet been obtained and therefore all the other attributes are
+ still in their initial states.
+
+ <dt><dfn id=loadedmetadata
+ title=dom-media-LOADED_METADATA><code>LOADED_METADATA</code></dfn>
+ (numeric value 2)
+
+ <dd>Enough of the resource has been obtained that the metadata attributes
+ are initialized (e.g. the length is known). The API will no longer raise
+ exceptions when used.
+
+ <dt><dfn id=loadedfirstframe
+ title=dom-media-LOADED_FIRST_FRAME><code>LOADED_FIRST_FRAME</code></dfn>
+ (numeric value 3)
+
+ <dd>Actual <a href="#media7">media data</a> has been obtained. In the case
+ of video, this specifically means that a frame of video is available and
+ can be shown.
+
+ <dt><dfn id=loaded title=dom-media-LOADED><code>LOADED</code></dfn>
+ (numeric value 4)
+
+ <dd>The entire <a href="#media8">media resource</a> has been obtained and
+ is available to the user agent locally. Network connectivity could be
+ lost without affecting the media playback.
+ </dl>
+
+ <p>The algorithm for the <code title=dom-media-load><a
+ href="#load">load()</a></code> method defined below describes exactly when
+ the <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute changes value.
+
+ <h5 id=loading><span class=secno>3.14.9.4. </span>Loading the media
+ resource</h5>
+
+ <p>All <a href="#media5" title="media element">media elements</a> have a
+ <dfn id=begun>begun flag</dfn>, which must begin in the false state, a
+ <dfn id=loaded-first-frame>loaded-first-frame flag</dfn>, which must begin
+ in the false state, and an <dfn id=autoplaying>autoplaying flag</dfn>,
+ which must begin in the true state.
+
+ <p>When the <dfn id=load title=dom-media-load><code>load()</code></dfn>
+ method on a <a href="#media5">media element</a> is invoked, the user agent
+ must run the following steps. Note that this algorithm might get aborted,
+ e.g. if the <code title=dom-media-load><a href="#load">load()</a></code>
+ method itself is invoked again.
+
+ <ol>
+ <li>
+ <p>Any already-running instance of this algorithm for this element must
+ be aborted. If those method calls have not yet returned, they must
+ finish the step they are on, and then immediately return.
+
+ <li>
+ <p>If the element's <a href="#begun">begun flag</a> is true, then the <a
+ href="#begun">begun flag</a> must be set to false, the <code
+ title=dom-media-error><a href="#error0">error</a></code> attribute must
+ be set to a new <code><a href="#mediaerror">MediaError</a></code> object
+ whose <code title=dom-MediaError-code><a href="#code0">code</a></code>
+ attribute is set to <code title=dom-MediaError-MEDIA_ERR_ABORTED><a
+ href="#mediaerraborted">MEDIA_ERR_ABORTED</a></code>, and the user agent
+ must synchronously <a href="#firing6">fire a progress event</a> called
+ <code title=event-abort><a href="#abort">abort</a></code> at the <a
+ href="#media5">media element</a>.
+
+ <li>
+ <p>The <code title=dom-media-error><a href="#error0">error</a></code>
+ attribute must be set to null, and the <a
+ href="#loaded-first-frame">loaded-first-frame flag</a> and
+ <span>loaded-enough-to-play-through flag</span> must be both set to
+ false.
+
+ <li>
+ <p>The <code title=dom-media-playbackRate><a
+ href="#playbackrate">playbackRate</a></code> attribute must be set to
+ the value of the <code title=dom-media-defaultPlaybackRate><a
+ href="#defaultplaybackrate">defaultPlaybackRate</a></code> attribute.
+
+ <li>
+ <p>If the <a href="#media5">media element</a>'s <code
+ title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> is not set to <a
+ href="#empty" title=dom-media-EMPTY>EMPTY</a>, then the following
+ substeps must be followed:
+
+ <ol><!--<li>Let <var title="">events</var> be a list of event names,
+ initially empty.</li>-->
+
+ <li>The <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be set to
+ <a href="#empty"
+ title=dom-media-EMPTY>EMPTY</a><!--, and the user agent must
+ add <code title="event-emptied">emptied</code> to the <var
+ title="">events</var> list-->.
+
+ <li>If <code title=dom-media-readyState><a
+ href="#readystate">readyState</a></code> is not set to <code
+ title=dom-media-DATA_UNAVAILABLE><a
+ href="#dataunavailable">DATA_UNAVAILABLE</a></code>, it must be set to
+ that state<!-- and the user agent must add <code
+ title="event-dataunavailable">dataunavailable</code> to the
+ <var title="">events</var> list-->.
+
+ <li>If the <code title=dom-media-paused><a
+ href="#paused">paused</a></code> attribute is false, it must be set to
+ true<!--, and the user agent must add
+ <code title="event-pause">pause</code> to the <var
+ title="">events</var> list-->.
+
+ <li>If <code title=dom-media-seeking><a
+ href="#seeking0">seeking</a></code> is true, it must be set to false.
+
+ <li>The <a href="#current">current playback position</a> must be set to
+ 0.
+
+ <li>The <code title=dom-media-currentLoop><a
+ href="#currentloop">currentLoop</a></code> DOM attribute must be set to
+ 0.</li>
+ <!--<li>The user agent must synchronously <span>fire a simple
+ event</span> at the <span>media element</span> for each event
+ name in <var title="">events</var>, in the same order that they
+ were added to that list.</li>-->
+
+ <li>The user agent must synchronously <a href="#firing2">fire a simple
+ event</a> called <code title=event-emptied><a
+ href="#emptied">emptied</a></code> at the <a href="#media5">media
+ element</a>.
+ </ol>
+
+ <li>
+ <p>The user agent must <a href="#pick-a">pick a media resource</a> for
+ the <a href="#media5">media element</a>. If that fails, the method must
+ raise an <code>INVALID_STATE_ERR</code> exception, and abort these
+ steps.
+
+ <li>
+ <p>The <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be set to <a
+ href="#loading0" title=dom-media-LOADING>LOADING</a>.
+
+ <li>
+ <p class=note>The <code title=dom-media-currentSrc><a
+ href="#currentsrc">currentSrc</a></code> attribute starts returning the
+ new value.
+
+ <li>
+ <p>The user agent must then set the <a href="#begun">begun flag</a> to
+ true and <a href="#firing6">fire a progress event</a> called
+ <code>begin</code> at the <a href="#media5">media element</a>.
+
+ <li>
+ <p>The method must return, but these steps must continue.
+
+ <li>
+ <p class=note>Playback of any previously playing <a href="#media8">media
+ resource</a> for this element stops.
+
+ <li>
+ <p>If a download is in progress for the <a href="#media5">media
+ element</a>, the user agent should stop the download.
+
+ <li>
+ <p>The user agent must then begin to download the <a
+ href="#chosen">chosen media resource</a>. The rate of the download may
+ be throttled, however, in response to user preferences (including
+ throttling it to zero until the user indicates that the download can
+ start), or to balance the download with other connections sharing the
+ same bandwidth.
+
+ <li>
+ <p>While the download is progressing, the user agent must <a
+ href="#firing6">fire a progress event</a> called <code
+ title=event-progress><a href="#progress0">progress</a></code> at the
+ element every 350ms (&#xB1;200ms) or for every byte received, whichever
+ is <em>least</em> frequent.</p>
+
+ <p>If at any point the user agent has received no data for more than
+ about three seconds, the user agent must <a href="#firing6">fire a
+ progress event</a> called <code title=event-stalled><a
+ href="#stalled">stalled</a></code> at the element.</p>
+
+ <p>User agents may allow users to selectively block or slow <a
+ href="#media7">media data</a> downloads. When a <a href="#media5">media
+ element</a>'s download has been blocked, the user agent must act as if
+ it was stalled (as opposed to acting as if the connection was closed).</p>
+
+ <p>The user agent may use whatever means necessary to download the
+ resource (within the constraints put forward by this and other
+ specifications); for example, reconnecting to the server in the face of
+ network errors, using HTTP partial range requests, or switching to a
+ streaming protocol. The user agent must only consider a resource
+ erroneous if it has given up trying to download it.</p>
+
+ <dl class=switch>
+ <dt>If the <a href="#media7">media data</a> cannot be downloaded at all,
+ due to network errors, causing the user agent to give up trying to
+ download the resource
+
+ <dd>
+ <p>DNS errors and HTTP 4xx and 5xx errors (and equivalents in other
+ protocols) must cause the user agent to follow the following steps.
+ User agents may also follow these steps in response to other network
+ errors of similar severity.</p>
+
+ <ol>
+ <li>The user agent should cancel the download.
+
+ <li>The <code title=dom-media-error><a href="#error0">error</a></code>
+ attribute must be set to a new <code><a
+ href="#mediaerror">MediaError</a></code> object whose <code
+ title=dom-MediaError-code><a href="#code0">code</a></code> attribute
+ is set to <code title=dom-MediaError-MEDIA_ERR_NETWORK><a
+ href="#mediaerrnetwork">MEDIA_ERR_NETWORK</a></code>.
+
+ <li>The <a href="#begun">begun flag</a> must be set to false and the
+ user agent must <a href="#firing6">fire a progress event</a> called
+ <code title=event-error><a href="#error1">error</a></code> at the <a
+ href="#media5">media element</a>.
+
+ <li>The element's <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be
+ switched to the <a href="#empty" title=dom-media-EMPTY>EMPTY</a>
+ value and the user agent must <a href="#firing2">fire a simple
+ event</a> called <code title=event-emptied><a
+ href="#emptied">emptied</a></code> at the element.
+
+ <li>These steps must be aborted.
+ </ol>
+
+ <dt id=fatal-decode-error>If the <a href="#media7">media data</a> can be
+ downloaded but is in an unsupported format, or can otherwise not be
+ properly rendered at all
+
+ <dd>
+ <p>The server returning a file of the wrong kind (e.g. one that that
+ turns out to not be pure audio when the <a href="#media5">media
+ element</a> is a <code><a href="#audio1">audio</a></code> element), or
+ the file using unsupported codecs for all the data, must cause the
+ user agent to follow the following steps. User agents may also follow
+ these steps in response to other codec-related fatal errors, such as
+ the file requiring more resources to process than the user agent can
+ provide in real time.</p>
+
+ <ol>
+ <li>The user agent should cancel the download.
+
+ <li>The <code title=dom-media-error><a href="#error0">error</a></code>
+ attribute must be set to a new <code><a
+ href="#mediaerror">MediaError</a></code> object whose <code
+ title=dom-MediaError-code><a href="#code0">code</a></code> attribute
+ is set to <code title=dom-MediaError-MEDIA_ERR_DECODE><a
+ href="#mediaerrdecode">MEDIA_ERR_DECODE</a></code>.
+
+ <li>The <a href="#begun">begun flag</a> must be set to false and the
+ user agent must <a href="#firing6">fire a progress event</a> called
+ <code title=event-error><a href="#error1">error</a></code> at the <a
+ href="#media5">media element</a>.
+
+ <li>The element's <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be
+ switched to the <a href="#empty" title=dom-media-EMPTY>EMPTY</a>
+ value and the user agent must <a href="#firing2">fire a simple
+ event</a> called <code title=event-emptied><a
+ href="#emptied">emptied</a></code> at the element.
+
+ <li>These steps must be aborted.
+ </ol>
+
+ <dt>If the <a href="#media7">media data</a> download is aborted by the
+ user
+
+ <dd>
+ <p>The download is aborted by the user, e.g. because the user navigated
+ the browsing context to another page, the user agent must follow the
+ following steps. These steps are not followed if the <code
+ title=dom-media-load><a href="#load">load()</a></code> method itself
+ is reinvoked, as the steps above handle that particular kind of abort.</p>
+
+ <ol>
+ <li>The user agent should cancel the download.
+
+ <li>The <code title=dom-media-error><a href="#error0">error</a></code>
+ attribute must be set to a new <code><a
+ href="#mediaerror">MediaError</a></code> object whose <code
+ title=dom-MediaError-code><a href="#code0">code</a></code> attribute
+ is set to <code
+ title=dom-MediaError-MEDIA_ERR_ABORT>MEDIA_ERR_ABORT</code>.
+
+ <li>The <a href="#begun">begun flag</a> must be set to false and the
+ user agent must <a href="#firing6">fire a progress event</a> called
+ <code title=event-abort><a href="#abort">abort</a></code> at the <a
+ href="#media5">media element</a>.
+
+ <li>If the <a href="#media5">media element</a>'s <code
+ title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute has the value
+ <code title=dom-media-LOADING><a href="#loading0">LOADING</a></code>,
+ the element's <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be
+ switched to the <a href="#empty" title=dom-media-EMPTY>EMPTY</a>
+ value and the user agent must <a href="#firing2">fire a simple
+ event</a> called <code title=event-emptied><a
+ href="#emptied">emptied</a></code> at the element.
+
+ <li>These steps must be aborted.
+ </ol>
+
+ <dt id=non-fatal-media-error>If the <a href="#media7">media data</a> can
+ be downloaded but has non-fatal errors or uses, in part, codecs that
+ are unsupported, preventing the user agent from rendering the content
+ completely correctly but not preventing playback altogether
+
+ <dd>
+ <p>The server returning data that is partially usable but cannot be
+ optimally rendered must cause the user agent to follow the following
+ steps.</p>
+
+ <ol>
+ <li class=big-issue>Should we fire a 'warning' event? Set the 'error'
+ flag to 'MEDIA_ERR_SUBOPTIMAL' or something?
+ </ol>
+
+ <dt>Once enough of the <a href="#media7">media data</a> has been
+ downloaded to determine the duration of the <a href="#media8">media
+ resource</a>, its dimensions, and other metadata
+
+ <dd>
+ <p>The user agent must follow these substeps:</p>
+
+ <ol>
+ <li>
+ <p>The <a href="#current">current playback position</a> must be set
+ to the <var><a href="#effective">effective start</a></var>.
+
+ <li>
+ <p>The <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be set
+ to <code title=dom-media-LOADED_METADATA><a
+ href="#loadedmetadata">LOADED_METADATA</a></code>.
+
+ <li>
+ <p class=note>A number of attributes, including <code
+ title=dom-media-duration><a href="#duration">duration</a></code>,
+ <code title=dom-media-buffered><a
+ href="#buffered">buffered</a></code>, and <code
+ title=dom-media-played><a href="#played">played</a></code>, become
+ available.
+
+ <li>
+ <p class=note>The user agent will <a href="#firing2">fire a simple
+ event</a> called <code title=event-durationchange><a
+ href="#durationchange">durationchange</a></code> at the element at
+ this point.
+
+ <li>
+ <p>The user agent must <a href="#firing2">fire a simple event</a>
+ called <code title=event-loadedmetadata><a
+ href="#loadedmetadata0">loadedmetadata</a></code> at the element.
+ </ol>
+
+ <dt id=handling-first-frame-available>Once enough of the <a
+ href="#media7">media data</a> has been downloaded to enable the user
+ agent to display the first frame of the <a href="#media8">media
+ resource</a>
+
+ <dd>
+ <p>The user agent must follow these substeps:</p>
+
+ <ol>
+ <li>
+ <p>The <code title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> attribute must be set
+ to <code title=dom-media-LOADED_FIRST_FRAME><a
+ href="#loadedfirstframe">LOADED_FIRST_FRAME</a></code>.
+
+ <li>
+ <p>The <code title=dom-media-readyState><a
+ href="#readystate">readyState</a></code> attribute must change to
+ <code title=dom-media-CAN_SHOW_CURRENT_FRAME><a
+ href="#canshowcurrentframe">CAN_SHOW_CURRENT_FRAME</a></code>.
+
+ <li>
+ <p>The <a href="#loaded-first-frame">loaded-first-frame flag</a> must
+ be set to true.
+
+ <li>
+ <p>The user agent must <a href="#firing2">fire a simple event</a>
+ called <code title=event-loadedfirstfame>loadedfirstframe</code> at
+ the element.
+
+ <li>
+ <p>The user agent must <a href="#firing2">fire a simple event</a>
+ called <code title=event-canshowcurrentframe><a
+ href="#canshowcurrentframe0">canshowcurrentframe</a></code> at the
+ element.
+ </ol>
+ </dl>
+
+ <p>When the user agent has completed the download of the entire <a
+ href="#media8">media resource</a>, it must move on to the next step.</p>
+
+ <li>
+ <p>If the download completes without errors, the <a href="#begun">begun
+ flag</a> must be set to false and the user agent must <a
+ href="#firing6">fire a progress event</a> called <code
+ title=event-load><a href="#load0">load</a></code> at the element.
+ </ol>
+
+ <p>If a <a href="#media5">media element</a> whose <code
+ title=dom-media-networkState><a
+ href="#networkstate">networkState</a></code> has the value <code
+ title=dom-media-EMPTY><a href="#empty">EMPTY</a></code> is inserted into a
+ document, user agents must implicitly invoke the <code
+ title=dom-media-load><a href="#load">load()</a></code> method on the <a
+ href="#media5">media element</a> as soon as all other scripts have
+ finished executing<!-- XXX phrase that better? -->. Any exceptions raised
+ must be ignored.
+
+ <p>The <dfn id=bufferingrate
+ title=dom-media-bufferingRate><code>bufferingRate</code></dfn> attribute
+ must return the average number of bits received per second for the current
+ download over the past few seconds. If there is no download in progress,
+ the attribute must return 0.
+
+ <p>The <dfn id=buffered
+ title=dom-media-buffered><code>buffered</code></dfn> attribute must return
+ a static <a href="#normalised">normalised <code>TimeRanges</code>
+ object</a> that represents the ranges of the <a href="#media8">media
+ resource</a>, if any, that the user agent has downloaded, at the time the
+ attribute is evaluated.
+
+ <p class=note>Typically this will be a single range anchored at the zero
+ point, but if, e.g. the user agent uses HTTP range requests in response to
+ seeking, then there could be multiple ranges.
+
+ <h5 id=offsets><span class=secno>3.14.9.5. </span>Offsets into the media
+ resource</h5>
+
+ <p>The <dfn id=duration
+ title=dom-media-duration><code>duration</code></dfn> attribute must return
+ the length of the <a href="#media8">media resource</a>, in seconds. If no
+ <a href="#media7">media data</a> is available, then the attributes must
+ return 0. If <a href="#media7">media data</a> is available but the length
+ is not known, the attribute must return the Not-a-Number (NaN) value. If
+ the <a href="#media8">media resource</a> is known to be unbounded (e.g. a
+ streaming radio), then the attribute must return the positive Infinity
+ value.
+
+ <p>When the length of the <a href="#media8">media resource</a> changes
+ (e.g. from being unknown to known, or from indeterminate to known, or from
+ a previously established length to a new length) the user agent must, once
+ any running scripts have finished, <a href="#firing2">fire a simple
+ event</a> called <code title=event-durationchange><a
+ href="#durationchange">durationchange</a></code> at the <a
+ href="#media5">media element</a>.
+
+ <p><a href="#media5" title="media element">Media elements</a> have a <dfn
+ id=current>current playback position</dfn>, which must initially be zero.
+ The current position is a time.
+
+ <p>The <dfn id=currenttime
+ title=dom-media-currentTime><code>currentTime</code></dfn> attribute must,
+ on getting, return the <a href="#current">current playback position</a>,
+ expressed in seconds. On setting, the user agent must <a href="#seek"
+ title=dom-media-seek>seek</a> to the new value.
+
+ <p>The <dfn id=start2 title=attr-media-start><code>start</code></dfn>
+ content attribute gives the offset into the <a href="#media8">media
+ resource</a> at which playback is to begin. The default value is 0.
+
+ <p>The <dfn id=effective><var>effective start</var></dfn> is the smaller of
+ <code title=dom-media-start><a href="#start3">start</a></code> and the end
+ of the <a href="#media8">media resource</a>.
+
+ <p>
+
+ <p>The <dfn id=loopstart
+ title=attr-media-loopstart><code>loopstart</code></dfn> content attribute
+ gives the offset into the <a href="#media8">media resource</a> at which
+ playback is to begin when looping a clip. The default value is 0.
+
+ <p>The <dfn id=effective0><var>effective loop start</var></dfn> is the
+ smaller of <code title=dom-media-loopStart><a
+ href="#loopstart0">loopStart</a></code> and the end of the <a
+ href="#media8">media resource</a>.
+
+ <p>
+
+ <p>The <dfn id=loopend title=attr-media-loopend><code>loopend</code></dfn>
+ content attribute gives an offset into the <a href="#media8">media
+ resource</a> at which playback is to jump back to the <code
+ title=attr-media-loopstart><a href="#loopstart">loopstart</a></code>, when
+ looping the clip. The default value is infinity.
+
+ <p>The <dfn id=effective1><var>effective loop end</var></dfn> is the
+ greater of <code title=dom-media-start><a href="#start3">start</a></code>,
+ <code title=dom-media-loopStart><a
+ href="#loopstart0">loopStart</a></code>, and <code
+ title=dom-media-loopEnd><a href="#loopend0">loopEnd</a></code>, and the
+ end of the <a href="#media8">media resource</a>.
+
+ <p>
+
+ <p>The <dfn id=end title=attr-media-end><code>end</code></dfn> content
+ attribute gives an offset into the <a href="#media8">media resource</a> at
+ which playback is to end. The default value is infinity.
+
+ <p>The <dfn id=effective2><var>effective end</var></dfn> is the greater of
+ <code title=dom-media-start><a href="#start3">start</a></code>, <code
+ title=dom-media-loopStart><a href="#loopstart0">loopStart</a></code>,
+ <code title=dom-media-loopEnd><a href="#loopend0">end</a></code>, and the
+ end of the <a href="#media8">media resource</a>.
+
+ <p>
+
+ <p>The <code title=attr-media-start><a href="#start2">start</a></code>,
+ <code title=attr-media-loopstart><a
+ href="#loopstart">loopstart</a></code>, <code title=attr-media-loopend><a
+ href="#loopend">loopend</a></code>, and <code title=attr-media-end><a
+ href="#end">end<