diff options
author | John Mark Bell <jmb@netsurf-browser.org> | 2007-06-23 22:47:43 +0000 |
---|---|---|
committer | John Mark Bell <jmb@netsurf-browser.org> | 2007-06-23 22:47:43 +0000 |
commit | a13afe4cb78a30b27543636422e482756b6e360e (patch) | |
tree | 82e794a5ade7cca4dbfb50a2edd4dfe3d282ef76 /test | |
parent | 7b30a5520cfb56e651f0eb4da85a3e07747da7dc (diff) | |
download | libhubbub-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/INDEX | 2 | ||||
-rw-r--r-- | test/data/html/web-apps.html | 41271 |
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 — 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>© 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 — 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 &lt;, &gt;, &amp;, &quot; - and &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 - <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&content-type=text/html;%20charset=utf-8">http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.html?rev=1.35&content-type=text/html;%20charset=utf-8</a> - - <p>Certain features are defined in terms of CSS <color> 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="">--></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 — a model - — 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 <hostname> 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><div id="example"> - <p id="p1" class="aaa bbb"/> - <p id="p2" class="aaa ccc"/> - <p id="p3" class="bbb ccc"/> -</div></pre> - - <p>A call to - <code>document.getElementById('example').getElementsByClassName('aaa')</code> - would return a <code>NodeList</code> with the two paragraphs - <code>p1</code> and <code>p2</code> in it.</p> - - <p>A call to <code>getElementsByClassName(['ccc', 'bbb'])</code> would - only return one node, however, namely <code>p3</code>. A call to - <code>document.getElementById('example').getElementsByClassName('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=""><</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="">"</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="">"</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="">></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=""><</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="">></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><!--</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>--></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><!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>></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="">&</code>" character by the string "<code - title="">&amp;</code>", any occurances of the "<code - title=""><</code>" character by the string "<code - title="">&lt;</code>", any occurances of the "<code - title="">></code>" character by the string "<code - title="">&gt;</code>", and any occurances of the "<code - title="">"</code>" character by the string "<code - title="">&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="">--></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></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>% - - <td>100 - - <tr> - <td>U+066A ARABIC PERCENT SIGN - - <td>٪ - - <td>100 - - <tr> - <td>U+FE6A SMALL PERCENT SIGN - - <td>﹪ - - <td>100 - - <tr> - <td>U+FF05 FULLWIDTH PERCENT SIGN - - <td>% - - <td>100 - - <tr> - <td>U+2030 PER MILLE SIGN - - <td>‰ - - <td>1000 - - <tr> - <td>U+2031 PER TEN THOUSAND SIGN - - <td>‱ - - <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 — 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 ≤ <var - title="">h</var> ≤ 23, the minute values (<var - title="">m</var>) in the range 0 ≤ <var - title="">m</var> ≤ 59, and the second value (<var - title="">s</var>) being in the range 0 ≤ <var - title="">h</var> < 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 ≤ <var title="">month</var> ≤ 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 ≤ <var title="">month</var> ≤ <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 ≤ <var title="">hour</var> ≤ 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 ≤ <var title="">minute</var> ≤ 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 ≤ <var title="">hour</var> < 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 ≤ <var title="">timezone<sub - title="">hours</sub></var> ≤ 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 ≤ <var title="">timezone<sub - title="">minutes</sub></var> ≤ 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 ≤ <var title="">month</var> ≤ 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 ≤ <var title="">day</var> ≤ <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 ≤ <var title="">hour</var> ≤ 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 ≤ <var title="">minute</var> ≤ 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 ≤ <var title="">minute</var> < 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 ≤ <var title="">timezone<sub - title="">hours</sub></var> ≤ 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 ≤ <var title="">timezone<sub - title="">minutes</sub></var> ≤ 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><!DOCTYPE html> -<html lang="en-GB"> - <head> <title> Demonstration </title> </head> - <body> - <table> - <tr> <td> My favourite animal is the cat. </td> </tr> - <tr> - <td> - —<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>, - in an essay from 1992 - </td> - </tr> - </table> - </body> -</html></pre> - - <p>...because the data placed in the cells is clearly not tabular data. A - corrected version of this document might be:</p> - - <pre><!DOCTYPE html> -<html lang="en-GB"> - <head> <title> Demonstration </title> </head> - <body> - <blockquote> - <p> My favourite animal is the cat. </p> - </blockquote> - <p> - —<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>, - in an essay from 1992 - </p> - </body> -</html></pre> - - <p>This next document fragment, intended to represent the heading of a - corporate site, is similarly non-conforming because the second line is - not intended to be a heading of a subsection, but merely a subheading or - subtitle (a subordinate heading for the same section).</p> - - <pre><body> - <h1>ABC Company</h1> - <h2>Leading the way in widget design since 1432</h2> - ...</pre> - - <p>The <code><a href="#header">header</a></code> element should be used in - these kinds of situations:</p> - - <pre><body> - <header> - <h1>ABC Company</h1> - <h2>Leading the way in widget design since 1432</h2> - </header> - ...</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> -<p></p> -<p><em>&#x00A0;</em></p> -<p> - <ol> - <li></li> - </ol> -</p> -</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><ol> - <li> - <p> Hello World </p> - <meta title="this is an invalid example"/> - </li> -</ol> -</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><aside> - <ol> - <li> ... </li> - </ol> - <ul> - <li> ... </li> - </ul> -</aside></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><aside> - <ol> - <li> ... </li> - </ol> - Foo -</aside></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> <h1>The Example Game</h1> - <section id="login"> - <h2>Login</h2> - <form> - ... - <!-- calls login() once the user's credentials have been checked --> - </form> - <script> - function login() { - // switch screens - document.getElementById('login').irrelevant = true; - document.getElementById('game').irrelevant = false; - } - </script> - </section> - <section id="game"> - ... - </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> <p> - <input type="image" src="frame.png" alt="Play Video" - onclick=" nextSibling.load(); - disabled = true; - return false;" - ><video src="video.ogg" controls="" irrelevant="" - onloadedfirstframe=" - irrelevant = false; - previousSibling.irrelevant = true; - autoplay = true" - onerror=" parentNode.irrelevant = true; - parentNode.nextSibling.irrelevant = false"> - </video> - </p><p irrelevant=""> - Playback unavailable. - <a href="video.ogg">Download Video</a> - </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 — 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> <title>Introduction to The Mating Rituals of Bees</title> - ... - <h1>Introduction</h1> - <p>This companion guide to the highly successful - <cite>Introduction to Medieval Bee-Keeping</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> <title>Dances used during bee mating rituals</title> - ... - <h1>The Dances</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 — 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><link rel="stylesheet" href="A" type="text/css"> -<link rel="stylesheet" href="B" type="text/plain"> -<link rel="stylesheet" href="C"></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 — 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 — 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><header> - <h1><strong>The reality dysfunction</strong></h1> - <h2>Space is not the only void</h2> -</header></pre> - - <pre><header> - <p>Welcome to...</p> - <h1><strong>Voidwars!</strong></h1> -</header></pre> - - <pre><header> - <h1><strong>Scalable Vector Graphics (SVG) 1.2</strong></h1> - <h2>W3C Working Draft 27 October 2004</h2> - <dl> - <dt>This version:</dt> - <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd> - <dt>Previous version:</dt> - <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd> - <dt>Latest version of SVG 1.2:</dt> - <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd> - <dt>Latest SVG Recommendation:</dt> - <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd> - <dt>Editor:</dt> - <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd> - <dt>Authors:</dt> - <dd>See <a href="#authors">Author List</a></dd> - </dl> - <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em> -</header></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><ADDRESS> - <A href="../People/Raggett/">Dave Raggett</A>, - <A href="../People/Arnaud/">Arnaud Le Hors</A>, - contact persons for the <A href="Activity">W3C HTML Activity</A> -</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><ADDRESS>Last Modified: 1999/12/24 23:37:50</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><body> - <h1>Foo</h1> - <h2>Bar</h2> - <blockquote> - <h3>Bla</h3> - </blockquote> - <p>Baz</p> - <h2>Quux</h2> - <section> - <h3>Thud</h3> - </section> - <p>Grunt</p> -</body></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><body> - <h4>Apples</h4> - <p>Apples are fruit.</p> - <section> - <h2>Taste</h2> - <p>They taste lovely.</p> - <h6>Sweet</h6> - <p>Red apples are sweeter than green ones.</p> - <h1>Color</h1> - <p>Apples come in various colors.</p> - </section> -</body></pre> - - <p>However, the same document would be more clearly expressed as:</p> - - <pre><body> - <h1>Apples</h1> - <p>Apples are fruit.</p> - <section> - <h2>Taste</h2> - <p>They taste lovely.</p> - <section> - <h3>Sweet</h3> - <p>Red apples are sweeter than green ones.</p> - </section> - </section> - <section> - <h2>Color</h2> - <p>Apples come in various colors.</p> - </section> -</body></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 && n.parentNode.namespaceURI == 'http://www.w3.org/1999/xhtml') && - (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') && - (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') && - (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><body> - <h1>X</h1> - <h2>X</h2> - <blockquote> - <h3>X</h3> - </blockquote> - <p id="a">X</p> - <h4>Text Node A</h4> - <section> - <h5>X</h5> - </section> - <p>Text Node B</p> -</body></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><body></code> - - <td><code><h1></code> - - <td><code><body></code> - - <tr> - <td><code><h1></code> - - <td><code><h1></code> - - <td><code><body></code> - - <tr> - <td><code><h2></code> - - <td><code><h2></code> - - <td>None. - - <tr> - <td><code><blockquote></code> - - <td><code><h2></code> - - <td>None. - - <tr> - <td><code><h3></code> - - <td><code><h3></code> - - <td><code><blockquote></code> - - <tr> - <td><code><p id="a"></code> - - <td><code><h2></code> - - <td>None. - - <tr> - <td><code>Text Node A</code> - - <td><code><h4></code> - - <td>None. - - <tr> - <td><code>Text Node B</code> - - <td><code><h1></code> - - <td><code><body></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 - — 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><p>The little kitten gently seated himself on a piece of -carpet. Later in his life, this would be referred to as the time the -cat sat on the mat.</p></pre> - - <pre><fieldset> - <legend>Personal information</legend> - <p> - <label>Name: <input name="n"></label> - <label><input name="anon" type="checkbox"> Hide from other users</label> - </p> - <p><label>Address: <textarea name="a"></textarea></label></p> -</fieldset></pre> - - <pre><p>There was once an example from Femley,<br> -Whose markup was of dubious quality.<br> -The validator complained,<br> -So the author was pained,<br> -To move the error from the markup to the rhyming.</p></pre> - </div> - - <p>The <code><a href="#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><section> - <!-- ... --> - <p>Last modified: 2001-04-23</p> - <p>Author: fred@example.com</p> -</section></pre> - - <p>However, it would be better marked-up as:</p> - - <pre><section> - <!-- ... --> - <footer>Last modified: 2001-04-23</footer> - <address>Author: fred@example.com</address> -</section></pre> - - <p>Or:</p> - - <pre><section> - <!-- ... --> - <footer> - <p>Last modified: 2001-04-23</p> - <address>Author: fred@example.com</address> - </footer> -</section></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><p>P. Sherman<br> -42 Wallaby Way<br> -Sydney</p></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><p><a ...>34 comments.</a><br> -<a ...>Add a comment.<a></p></pre> - - <pre><p>Name: <input name="name"><br> -Address: <input name="address"></p></pre> - - <p>Here are alternatives to the above, which are correct:</p> - - <pre><p><a ...>34 comments.</a></p> -<p><a ...>Add a comment.<a></p></pre> - - <pre><p>Name: <input name="name"></p> -<p>Address: <input name="address"></p></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><dialog> - <dt>Costello - <dd> Look, you gotta first baseman? - <dt> Abbott - <dd> Certainly. - <dt> Costello - <dd> Who's playing first? - <dt> Abbott - <dd> That's right. - <dt> Costello - <dd> When you pay off the first baseman every month, who gets the money? - <dt> Abbott - <dd> Every dollar of it. -</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><dl> - <dt> Authors - <dd> John - <dd> Luke - <dt> Editor - <dd> Frank -</dl></pre> - - <p>In the following example, one definition is linked to two terms.</p> - - <pre><dl> - <dt lang="en-US"> <dfn>color</dfn> </dt> - <dt lang="en-GB"> <dfn>colour</dfn> </dt> - <dd> A sensation which (in humans) derives from the ability of - the fine structure of the eye to distinguish three differently - filtered analyses of a view. </dd> -</dl></pre> - - <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><dl> - <dt> Last modified time </dt> - <dd> 2004-12-23T23:33Z </dd> - <dt> Recommended update interval </dt> - <dd> 60s </dd> - <dt> Authors </dt> - <dt> Editors </dt> - <dd> Robert Rothman </dd> - <dd> Daniel Jackson </dd> -</dl></pre> - </div> - - <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><nav> - <ul> - <li> <a href="/">Home</a> </li> - <li> <a href="/news">News</a> </li> - <li> <a>Examples</a> </li> - <li> <a href="/legal">Legal</a> </li> - </ul> -</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><p><cite>This is wrong!</cite>, said Ian.</p></pre> - - <p>This is the correct way to do it:</p> - - <pre><p><q>This is correct!</q>, said <cite>Ian</cite>.</p></pre> - - <p>This is also wrong, because the title and the name are not references - or citations:</p> - - <pre><p>My favourite book is <cite>The Reality Dysfunction</cite> -by <cite>Peter F. Hamilton</cite>.</p></pre> - - <p>This is correct, because even though the source is not quoted, it is - cited:</p> - - <pre><p>According to <cite>the Wikipedia article on -HTML</cite>, HTML is defined in formal specifications that were -developed and published throughout the 1990s.</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><p>Cats are cute animals.</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><p><em>Cats</em> are cute animals.</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><p>Cats <em>are</em> cute animals.</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><p>Cats are <em>cute</em> animals.</p></pre> - - <p>Similarly, if someone asserted that cats were vegetables, someone - correcting this might emphasise the last word:</p> - - <pre><p>Cats are cute <em>animals</em>.</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><p><em>Cats are cute animals!</em></p></pre> - - <p>Anger mixed with emphasising the cuteness could lead to markup such as:</p> - - <pre><p><em>Cats are <em>cute</em> animals!</em></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><p><strong>Warning.</strong> This dungeon is dangerous. -<strong>Avoid the ducks.</strong> Take any gold you find. -<strong><strong>Do not take any of the diamonds</strong>, -they are explosive and <strong>will destroy anything within -ten meters.</strong></strong> You have been warned.</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><footer> - <address> - For more details, contact - <a href="mailto:js@example.com">John Smith</a>. - </address> - <p><small>© copyright 2038 Example Corp.</small></p> -</footer></pre> - - <p>In this second example, the <code><a href="#small">small</a></code> - element is used for a side comment.</p> - - <pre><p>Example Corp today announced record profits for the -second quarter <small>(Full Disclosure: Foo News is a subsidiary of -Example Corp)</small>, leading to speculation about a third quarter -merger with Demo Group.</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><p><strong><small>Continued use of this service will result in a kiss.</small></strong></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><p>The highlighted part below is where the error lies:</p> -<pre><code>var i: Integer; -begin - i := <m>1.1</m>; -end.</code></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><p>I also have some <m>kitten</m>s who are visiting me -these days. They're really cute. I think they like my garden!</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><p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn> -is a device that allows off-world teams to open the iris.</p> -<!-- ... later in the document: --> -<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr> -and so Hammond ordered the iris to be opened.</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><p>The <abbr title="Web Hypertext Application Technology -Working Group">WHATWG</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.</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><p>The <dfn><abbr>Zat</abbr></dfn>, short for Zat'ni'catel, is a weapon.</p> -<p>Jack used a <abbr>Zat</abbr> to make the boxes of evidence disappear.</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><p>Our first date was <time datetime="2006-09-23">a saturday</time>.</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><p>We stopped talking at <time datetime="2006-09-24 05:00 -7">5am the next morning</time>.</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><p>Many people get up at <time>08:00</time>.</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><meter>75%</meter> -<meter>750‰</meter> -<meter>3/4</meter> -<meter>6 blocks used (out of 8 total)</meter> -<meter>max: 100; current: 75</meter> -<meter><object data="graph75.png">0.75</object></meter> -<meter min="0" max="100" value="75"></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 ≤ actual value ≤ maximum value - - <li>minimum value ≤ low boundary ≤ high boundary ≤ maximum value - - <li>minimum value ≤ optimum point ≤ 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> -<h3>Suggested groups</h3> -<menu type="toolbar"> - <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a> -</menu> -<ul> - <li> - <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> - - <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p> - <p>Group description: <strong>Layout/presentation on the WWW.</strong></p> - <p><strong><meter value="0.5">Moderate activity,</meter></strong> Usenet, 618 subscribers</p> - </li> - <li> - <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> - - <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p> - <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p> - <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 22 subscribers</p> - </li> - <li> - <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> - - <a href="/group/mozilla.dev.general/subscribe">join</a></p> - <p><strong><meter value="0.25">Low activity,</meter></strong> Usenet, 66 subscribers</p> - </li> -</ul> -</pre> - - <p>Might be rendered as follows:</p> - - <p><img alt="With the <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><section> - <h2>Task Progress</h2> - <p><label>Progress: <progress><span id="p">0</span>%</progress></p> - <script> - var progressBar = document.getElementById('p'); - function updateProgress(newValue) { - progressBar.textContent = newValue; - } - </script> -</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><pre><code>var i: Integer; -begin - i := 1; -end.</code></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><p>If there are <var>n</var> pipes leading to the ice -cream factory then I expect at <em>least</em> <var>n</var> -flavours of ice cream to be available for purchase!</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><p>The computer said <samp>Too much cheese in tray -two</samp> but I didn't know what that meant.</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><pre><samp><samp class="prompt">jdoe@mowmow:~$</samp> <kbd>ssh demo.example.com</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 - -<samp class="prompt">jdoe@demo:~$</samp> <samp class="cursor">_</samp></samp></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><p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></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><p>To make George eat an apple, select - <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd> -</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><p>The coordinate of the <var>i</var>th point is -(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). -For example, the 10th point has coordinate -(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p></pre> - </div> - - <p>In certain languages, superscripts are part of the typographical - conventions for some abbreviations. - - <div class=example> - <pre><p>The most beautiful women are -<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and -<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</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><var>E</var>=<var>m</var><var>c</var><sup>2</sup></pre> - - <pre>f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></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><p>The <i>felis silvestris catus</i> is cute.</p> -<p>The <i>block-level elements</i> are defined above.</p> -<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p></pre> - - <p>In the following example, a dream sequence is marked up using <code><a - href="#i">i</a></code> elements.</p> - - <pre><p>Raymond tried to sleep.</p> -<p><i>The ship sailed away on Thursday</i>, he -dreamt. <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.</i></p> -<p><i>Finally one night he picked up the courage to speak with -her—</i></p> -<p>Raymond woke with a start as the fire alarm rang out.</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><p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p></pre> - - <p>The following would be <em>incorrect</em> usage:</p> - - <pre><p><b>WARNING!</b> Do not frob the barbinator!</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><p>You enter a small room. Your <b>sword</b> glows -brighter. A <b>rat</b> scurries past the corner wall.</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><aside> - <ins> - <p>...</p> - </ins> -</aside></pre> - - <p>As would this:</p> - - <pre><aside> - <ins> - <em>...</em> - </ins> -</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><aside> - <ins> - <p>...</p> - </ins> - <ins> - <em>...</em> - </ins> -</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><aside> - <del> - <p>...</p> - </del> - <ins> - <em>...</em> - </ins> -</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 <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 (±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 |