summaryrefslogtreecommitdiff
path: root/test
diff options
context:
space:
mode:
authorJohn Mark Bell <jmb@netsurf-browser.org>2007-06-23 22:47:43 +0000
committerJohn Mark Bell <jmb@netsurf-browser.org>2007-06-23 22:47:43 +0000
commita13afe4cb78a30b27543636422e482756b6e360e (patch)
tree82e794a5ade7cca4dbfb50a2edd4dfe3d282ef76 /test
parent7b30a5520cfb56e651f0eb4da85a3e07747da7dc (diff)
downloadlibhubbub-a13afe4cb78a30b27543636422e482756b6e360e.tar.gz
libhubbub-a13afe4cb78a30b27543636422e482756b6e360e.tar.bz2
Remove large testdata (and set svn:ignore on it)
svn path=/trunk/hubbub/; revision=3360
Diffstat (limited to 'test')
-rw-r--r--test/data/html/INDEX2
-rw-r--r--test/data/html/web-apps.html41271
2 files changed, 1 insertions, 41272 deletions
diff --git a/test/data/html/INDEX b/test/data/html/INDEX
index 03d6e04..df4a27c 100644
--- a/test/data/html/INDEX
+++ b/test/data/html/INDEX
@@ -3,4 +3,4 @@
# Test Description
section-tree-construction.html HTML5 tree construction algorithm
-web-apps.html HTML5 specification
+#web-apps.html HTML5 specification
diff --git a/test/data/html/web-apps.html b/test/data/html/web-apps.html
deleted file mode 100644
index d685320..0000000
--- a/test/data/html/web-apps.html
+++ /dev/null
@@ -1,41271 +0,0 @@
-<!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