- From: poot <cvsmail@w3.org>
- Date: Mon, 17 Aug 2009 11:15:32 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: Fix minor stylistic issues; add a summary for text-level elements. (whatwg r3640) http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2825&r2=1.2826&f=h http://html5.org/tools/web-apps-tracker?from=3639&to=3640 =================================================================== RCS file: /sources/public/html5/spec/Overview.html,v retrieving revision 1.2825 retrieving revision 1.2826 diff -u -d -r1.2825 -r1.2826 --- Overview.html 16 Aug 2009 11:42:10 -0000 1.2825 +++ Overview.html 17 Aug 2009 02:15:01 -0000 1.2826 @@ -136,14 +136,8 @@ border-width: 0.25em; } - .example { - display: block; - color: #222222; - background: #FCFCFC; - border-left: double; - margin-left: 2em; - padding-left: 1em; - } + .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } + td > .example:only-child { margin: 0 0 0 0.1em; } .tall-and-narrow { font-size: 0.6em; @@ -175,7 +169,7 @@ <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2> <!--ZZZ:--> <!--<h2 class="no-num no-toc">W3C Working Draft 23 April 2009</h2>--> - <h2 class="no-num no-toc" id="editor-s-draft-date-1-january-1970">Editor's Draft 16 August 2009</h2> + <h2 class="no-num no-toc" id="editor-s-draft-date-1-january-1970">Editor's Draft 17 August 2009</h2> <!--:ZZZ--> <dl><!-- ZZZ: update the month/day (twice), (un)comment out <dt>This Version:</dt> @@ -273,7 +267,7 @@ track. <!--ZZZ:--> <!--This specification is the 23 April 2009 Working Draft.--> - This specification is the 16 August 2009 Editor's Draft. + This specification is the 17 August 2009 Editor's Draft. <!--:ZZZ--> </p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- relationship to other work (required) --><p>This specification is also being produced by the <a href="http://www.whatwg.org/">WHATWG</a>. The two specifications are identical from the table of contents onwards.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) --><p>This specification is intended to replace (be a new version of) @@ -382,52 +376,51 @@ <li><a href="#garbage-collection"><span class="secno">2.8.9 </span>Garbage collection</a></ol></ol></li> <li><a href="#dom"><span class="secno">3 </span>Semantics, structure, and APIs of HTML documents</a> <ol> - <li><a href="#semantics-intro"><span class="secno">3.1 </span>Introduction</a></li> - <li><a href="#documents"><span class="secno">3.2 </span>Documents</a> + <li><a href="#documents"><span class="secno">3.1 </span>Documents</a> <ol> - <li><a href="#documents-in-the-dom"><span class="secno">3.2.1 </span>Documents in the DOM</a></li> - <li><a href="#security"><span class="secno">3.2.2 </span>Security</a></li> - <li><a href="#resource-metadata-management"><span class="secno">3.2.3 </span>Resource metadata management</a></li> - <li><a href="#dom-tree-accessors"><span class="secno">3.2.4 </span>DOM tree accessors</a></ol></li> - <li><a href="#elements"><span class="secno">3.3 </span>Elements</a> + <li><a href="#documents-in-the-dom"><span class="secno">3.1.1 </span>Documents in the DOM</a></li> + <li><a href="#security"><span class="secno">3.1.2 </span>Security</a></li> + <li><a href="#resource-metadata-management"><span class="secno">3.1.3 </span>Resource metadata management</a></li> + <li><a href="#dom-tree-accessors"><span class="secno">3.1.4 </span>DOM tree accessors</a></ol></li> + <li><a href="#elements"><span class="secno">3.2 </span>Elements</a> <ol> - <li><a href="#semantics-0"><span class="secno">3.3.1 </span>Semantics</a></li> - <li><a href="#elements-in-the-dom"><span class="secno">3.3.2 </span>Elements in the DOM</a></li> - <li><a href="#global-attributes"><span class="secno">3.3.3 </span>Global attributes</a> + <li><a href="#semantics-0"><span class="secno">3.2.1 </span>Semantics</a></li> + <li><a href="#elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</a></li> + <li><a href="#global-attributes"><span class="secno">3.2.3 </span>Global attributes</a> <ol> - <li><a href="#the-id-attribute"><span class="secno">3.3.3.1 </span>The <code>id</code> attribute</a></li> - <li><a href="#the-title-attribute"><span class="secno">3.3.3.2 </span>The <code>title</code> attribute</a></li> - <li><a href="#the-lang-and-xml:lang-attributes"><span class="secno">3.3.3.3 </span>The <code title="attr-lang">lang</code> and <code title="attr-xml-lang">xml:lang</code> attributes</a></li> - <li><a href="#the-xml:base-attribute-xml-only"><span class="secno">3.3.3.4 </span>The <code>xml:base</code> + <li><a href="#the-id-attribute"><span class="secno">3.2.3.1 </span>The <code>id</code> attribute</a></li> + <li><a href="#the-title-attribute"><span class="secno">3.2.3.2 </span>The <code>title</code> attribute</a></li> + <li><a href="#the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang">lang</code> and <code title="attr-xml-lang">xml:lang</code> attributes</a></li> + <li><a href="#the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <code>xml:base</code> attribute (XML only)</a></li> - <li><a href="#the-dir-attribute"><span class="secno">3.3.3.5 </span>The <code>dir</code> attribute</a></li> - <li><a href="#classes"><span class="secno">3.3.3.6 </span>The <code>class</code> attribute</a></li> - <li><a href="#the-style-attribute"><span class="secno">3.3.3.7 </span>The <code>style</code> attribute</a></li> - <li><a href="#embedding-custom-non-visible-data"><span class="secno">3.3.3.8 </span>Embedding custom non-visible data</a></ol></li> - <li><a href="#element-definitions"><span class="secno">3.3.4 </span>Element definitions</a></li> - <li><a href="#content-models"><span class="secno">3.3.5 </span>Content models</a> + <li><a href="#the-dir-attribute"><span class="secno">3.2.3.5 </span>The <code>dir</code> attribute</a></li> + <li><a href="#classes"><span class="secno">3.2.3.6 </span>The <code>class</code> attribute</a></li> + <li><a href="#the-style-attribute"><span class="secno">3.2.3.7 </span>The <code>style</code> attribute</a></li> + <li><a href="#embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span>Embedding custom non-visible data</a></ol></li> + <li><a href="#element-definitions"><span class="secno">3.2.4 </span>Element definitions</a></li> + <li><a href="#content-models"><span class="secno">3.2.5 </span>Content models</a> <ol> - <li><a href="#kinds-of-content"><span class="secno">3.3.5.1 </span>Kinds of content</a> + <li><a href="#kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</a> <ol> - <li><a href="#metadata-content"><span class="secno">3.3.5.1.1 </span>Metadata content</a></li> - <li><a href="#flow-content"><span class="secno">3.3.5.1.2 </span>Flow content</a></li> - <li><a href="#sectioning-content"><span class="secno">3.3.5.1.3 </span>Sectioning content</a></li> - <li><a href="#heading-content"><span class="secno">3.3.5.1.4 </span>Heading content</a></li> - <li><a href="#phrasing-content"><span class="secno">3.3.5.1.5 </span>Phrasing content</a></li> - <li><a href="#embedded-content"><span class="secno">3.3.5.1.6 </span>Embedded content</a></li> - <li><a href="#interactive-content"><span class="secno">3.3.5.1.7 </span>Interactive content</a></ol></li> - <li><a href="#transparent-content-models"><span class="secno">3.3.5.2 </span>Transparent content models</a></li> - <li><a href="#paragraphs"><span class="secno">3.3.5.3 </span>Paragraphs</a></ol></ol></li> - <li><a href="#apis-in-html-documents"><span class="secno">3.4 </span>APIs in HTML documents</a></li> - <li><a href="#interactions-with-xpath-and-xslt"><span class="secno">3.5 </span>Interactions with XPath and XSLT</a></li> - <li><a href="#dynamic-markup-insertion"><span class="secno">3.6 </span>Dynamic markup insertion</a> + <li><a href="#metadata-content"><span class="secno">3.2.5.1.1 </span>Metadata content</a></li> + <li><a href="#flow-content"><span class="secno">3.2.5.1.2 </span>Flow content</a></li> + <li><a href="#sectioning-content"><span class="secno">3.2.5.1.3 </span>Sectioning content</a></li> + <li><a href="#heading-content"><span class="secno">3.2.5.1.4 </span>Heading content</a></li> + <li><a href="#phrasing-content"><span class="secno">3.2.5.1.5 </span>Phrasing content</a></li> + <li><a href="#embedded-content"><span class="secno">3.2.5.1.6 </span>Embedded content</a></li> + <li><a href="#interactive-content"><span class="secno">3.2.5.1.7 </span>Interactive content</a></ol></li> + <li><a href="#transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</a></li> + <li><a href="#paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</a></ol></ol></li> + <li><a href="#apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</a></li> + <li><a href="#interactions-with-xpath-and-xslt"><span class="secno">3.4 </span>Interactions with XPath and XSLT</a></li> + <li><a href="#dynamic-markup-insertion"><span class="secno">3.5 </span>Dynamic markup insertion</a> <ol> - <li><a href="#controlling-the-input-stream"><span class="secno">3.6.1 </span>Controlling the input stream</a></li> - <li><a href="#document.write"><span class="secno">3.6.2 </span><code title="dom-document-write">document.write()</code></a></li> - <li><a href="#document.writeln"><span class="secno">3.6.3 </span><code title="dom-document-writeln">document.writeln()</code></a></li> - <li><a href="#innerhtml"><span class="secno">3.6.4 </span><code title="dom-innerHTML">innerHTML</code></a></li> - <li><a href="#outerhtml"><span class="secno">3.6.5 </span><code title="dom-outerHTML">outerHTML</code></a></li> - <li><a href="#insertadjacenthtml"><span class="secno">3.6.6 </span><code title="dom-insertAdjacentHTML">insertAdjacentHTML()</code></a></ol></ol></li> + <li><a href="#controlling-the-input-stream"><span class="secno">3.5.1 </span>Controlling the input stream</a></li> + <li><a href="#document.write"><span class="secno">3.5.2 </span><code title="dom-document-write">document.write()</code></a></li> + <li><a href="#document.writeln"><span class="secno">3.5.3 </span><code title="dom-document-writeln">document.writeln()</code></a></li> + <li><a href="#innerhtml"><span class="secno">3.5.4 </span><code title="dom-innerHTML">innerHTML</code></a></li> + <li><a href="#outerhtml"><span class="secno">3.5.5 </span><code title="dom-outerHTML">outerHTML</code></a></li> + <li><a href="#insertadjacenthtml"><span class="secno">3.5.6 </span><code title="dom-insertAdjacentHTML">insertAdjacentHTML()</code></a></ol></ol></li> <li><a href="#semantics"><span class="secno">4 </span>The elements of HTML</a> <ol> <li><a href="#the-root-element"><span class="secno">4.1 </span>The root element</a> @@ -5867,7 +5860,7 @@ </div> - </div><h2 id="dom"><span class="secno">3 </span>Semantics, structure, and APIs of HTML documents</h2><h3 id="semantics-intro"><span class="secno">3.1 </span>Introduction</h3><p><i>This section is non-normative.</i><p class="XXX">An introduction to marking up a document.<h3 id="documents"><span class="secno">3.2 </span>Documents</h3><p>Every XML and HTML document in an HTML UA is represented by a + </div><h2 id="dom"><span class="secno">3 </span>Semantics, structure, and APIs of HTML documents</h2><h3 id="documents"><span class="secno">3.1 </span>Documents</h3><p>Every XML and HTML document in an HTML UA is represented by a <code>Document</code> object. <a href="#refsDOMCORE">[DOMCORE]</a><p><dfn id="the-document-s-address">The document's address</dfn> is an <a href="#absolute-url">absolute URL</a> that is set when the <code>Document</code> is created. <dfn id="the-document-s-current-address">The document's current address</dfn> is an <a href="#absolute-url">absolute URL</a> @@ -5886,7 +5879,7 @@ <a href="#html-documents" title="HTML documents">HTML document</a> or an <a href="#xml-documents" title="XML documents">XML document</a> affects the behavior of certain APIs, as well as a few CSS rendering rules. <a href="#refsCSS">[CSS]</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-documents" title="HTML documents">HTML document</a> by calling <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> on it.<h4 id="documents-in-the-dom"><span class="secno">3.2.1 </span>Documents in the DOM</h4><p>All <code>Document</code> objects (in user agents implementing + <a href="#html-documents" title="HTML documents">HTML document</a> by calling <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> on it.<h4 id="documents-in-the-dom"><span class="secno">3.1.1 </span>Documents in the DOM</h4><p>All <code>Document</code> objects (in user agents implementing this specification) <span class="impl">must</span> also implement the <code><a href="#htmldocument">HTMLDocument</a></code> interface, available using binding-specific methods. (This is the case whether or not the @@ -6011,12 +6004,12 @@ <span>Document</span> implements <a href="#htmldocument">HTMLDocument</a>; </pre><p>Since the <code><a href="#htmldocument">HTMLDocument</a></code> interface holds methods and attributes related to a number of disparate features, the members of - this interface are described in various different sections.<h4 id="security"><span class="secno">3.2.2 </span>Security</h4><p>User agents <span class="impl">must</span> raise a + this interface are described in various different sections.<h4 id="security"><span class="secno">3.1.2 </span>Security</h4><p>User agents <span class="impl">must</span> raise a <code><a href="#security_err">SECURITY_ERR</a></code> exception whenever any of the members of an <code><a href="#htmldocument">HTMLDocument</a></code> object are accessed by scripts whose <a href="#effective-script-origin">effective script origin</a> is not the <a href="#same-origin" title="same origin">same</a> as the <code>Document</code>'s <a href="#effective-script-origin">effective - script origin</a>.<h4 id="resource-metadata-management"><span class="secno">3.2.3 </span><dfn>Resource metadata management</dfn></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-URL"><a href="#dom-document-url">URL</a></code></dt> + script origin</a>.<h4 id="resource-metadata-management"><span class="secno">3.1.3 </span><dfn>Resource metadata management</dfn></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-URL"><a href="#dom-document-url">URL</a></code></dt> <dd> <p>Returns <a href="#the-document-s-address">the document's address</a>.</p> </dd> @@ -6263,7 +6256,7 @@ attribute must, on getting, return the <a href="#current-document-readiness">current document readiness</a>.</p> - </div><h4 id="dom-tree-accessors"><span class="secno">3.2.4 </span><dfn>DOM tree accessors</dfn></h4><p><dfn id="the-html-element-0">The <code>html</code> element</dfn> of a document is the + </div><h4 id="dom-tree-accessors"><span class="secno">3.1.4 </span><dfn>DOM tree accessors</dfn></h4><p><dfn id="the-html-element-0">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="#the-html-element">html</a></code> element, or null otherwise.<p><dfn id="the-head-element-0">The <code>head</code> element</dfn> of a document is the first <code><a href="#the-head-element">head</a></code> element that is a child of <a href="#the-html-element-0">the @@ -6611,7 +6604,7 @@ </div><hr><p class="note">The <code title="dom-document-dir"><a href="#dom-document-dir">dir</a></code> attribute on the <code><a href="#htmldocument">HTMLDocument</a></code> interface is defined along with the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> content - attribute.<h3 id="elements"><span class="secno">3.3 </span>Elements</h3><h4 id="semantics-0"><span class="secno">3.3.1 </span>Semantics</h4><p>Elements, attributes, and attribute values in HTML are defined + attribute.<h3 id="elements"><span class="secno">3.2 </span>Elements</h3><h4 id="semantics-0"><span class="secno">3.2.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="#the-ol-element">ol</a></code> element represents an ordered list, and the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute represents the @@ -6698,7 +6691,7 @@ document as this occurs.<p class="example">HTML has a <code><a href="#the-progress-element">progress</a></code> element that describes a progress bar. If its "value" attribute is dynamically updated by a script, the UA would update the rendering to show the - progress changing.<h4 id="elements-in-the-dom"><span class="secno">3.3.2 </span>Elements in the DOM</h4><p>The nodes representing <a href="#html-elements">HTML elements</a> in the DOM + progress changing.<h4 id="elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</h4><p>The nodes representing <a href="#html-elements">HTML elements</a> in the DOM <span class="impl">must</span> implement, and expose to scripts, the interfaces listed for them in the relevant sections of this specification. This includes <a href="#html-elements">HTML elements</a> in <a href="#xml-documents">XML @@ -6827,7 +6820,7 @@ <a href="#html-elements">HTML elements</a> that are not defined by this specification.</p> - </div><h4 id="global-attributes"><span class="secno">3.3.3 </span><dfn>Global attributes</dfn></h4><p>The following attributes are common to and may be specified on + </div><h4 id="global-attributes"><span class="secno">3.2.3 </span><dfn>Global attributes</dfn></h4><p>The following attributes are common to and may be specified on all <a href="#html-elements">HTML elements</a><span class="impl"> (even those not defined in this specification)</span>:<ul class="brief"><li><code title="attr-accesskey"><a href="#the-accesskey-attribute">accesskey</a></code></li> <li><code title="attr-class"><a href="#classes">class</a></code></li> @@ -6919,7 +6912,7 @@ 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 no - namespace specified.<h5 id="the-id-attribute"><span class="secno">3.3.3.1 </span>The <dfn title="attr-id"><code>id</code></dfn> attribute</h5><p>The <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute + namespace specified.<h5 id="the-id-attribute"><span class="secno">3.2.3.1 </span>The <dfn title="attr-id"><code>id</code></dfn> attribute</h5><p>The <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute <a href="#represents">represents</a> its element's unique identifier. The value must be unique in the element's <a href="#home-subtree">home subtree</a> and must contain at least one character. The value must not contain any <a href="#space-character" title="space character">space characters</a>.</p><!-- space characters are disallowed because space-separated lists @@ -6947,7 +6940,7 @@ <a href="#reflect">reflect</a> the <code title="attr-id"><a href="#the-id-attribute">id</a></code> content attribute.</p> - </div><h5 id="the-title-attribute"><span class="secno">3.3.3.2 </span>The <dfn title="attr-title"><code>title</code></dfn> attribute</h5><p>The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute + </div><h5 id="the-title-attribute"><span class="secno">3.2.3.2 </span>The <dfn title="attr-title"><code>title</code></dfn> attribute</h5><p>The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute <a href="#represents">represents</a> advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could @@ -6982,7 +6975,7 @@ must <a href="#reflect">reflect</a> the <code title="attr-title"><a href="#the-title-attribute">title</a></code> content attribute.</p> - </div><h5 id="the-lang-and-xml:lang-attributes"><span class="secno">3.3.3.3 </span>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> and <code title="attr-xml-lang"><a href="#attr-xml-lang">xml:lang</a></code> attributes</h5><p>The <dfn id="attr-lang" title="attr-lang"><code>lang</code></dfn> attribute (in + </div><h5 id="the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> and <code title="attr-xml-lang"><a href="#attr-xml-lang">xml:lang</a></code> attributes</h5><p>The <dfn id="attr-lang" title="attr-lang"><code>lang</code></dfn> attribute (in no namespace) specifies the primary <dfn id="language">language</dfn> for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language code, or @@ -7053,12 +7046,12 @@ must <a href="#reflect">reflect</a> the <code title="attr-lang"><a href="#attr-lang">lang</a></code> content attribute in no namespace.</p> - </div><h5 id="the-xml:base-attribute-xml-only"><span class="secno">3.3.3.4 </span>The <dfn title="attr-xml-base"><code>xml:base</code></dfn> + </div><h5 id="the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <dfn title="attr-xml-base"><code>xml:base</code></dfn> attribute (XML only)</h5><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute is defined in XML Base. <a href="#refsXMLBASE">[XMLBASE]</a><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute may be used on elements of <a href="#xml-documents">XML documents</a>. Authors must not use the <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute in - <a href="#html-documents">HTML documents</a>.<h5 id="the-dir-attribute"><span class="secno">3.3.3.5 </span>The <dfn title="attr-dir"><code>dir</code></dfn> attribute</h5><p>The <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute specifies the + <a href="#html-documents">HTML documents</a>.<h5 id="the-dir-attribute"><span class="secno">3.2.3.5 </span>The <dfn title="attr-dir"><code>dir</code></dfn> attribute</h5><p>The <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute specifies the element's text directionality. The attribute is an <a href="#enumerated-attribute">enumerated attribute</a> with the keyword <code title="">ltr</code> mapping to the state <i>ltr</i>, and the keyword <code title="">rtl</code> @@ -7109,7 +7102,7 @@ </div><p class="note">Authors are strongly encouraged to use the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS (e.g. as interpreted - by search engines).<h5 id="classes"><span class="secno">3.3.3.6 </span>The <dfn title="attr-class"><code>class</code></dfn> attribute</h5><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have a + by search engines).<h5 id="classes"><span class="secno">3.2.3.6 </span>The <dfn title="attr-class"><code>class</code></dfn> attribute</h5><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have a <code title="attr-class"><a href="#classes">class</a></code> attribute specified.<p>The attribute, if specified, must have a value that is an <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a> representing the various classes that the element belongs to.<div class="impl"> @@ -7131,7 +7124,7 @@ <dfn id="dom-classlist" title="dom-classList"><code>classList</code></dfn> DOM attributes must both <a href="#reflect">reflect</a> the <code title="attr-class"><a href="#classes">class</a></code> content attribute.</p> - </div><h5 id="the-style-attribute"><span class="secno">3.3.3.7 </span>The <dfn title="attr-style"><code>style</code></dfn> attribute</h5><p>All <a href="#html-elements">HTML elements</a> may have the <code title="attr-style"><a href="#the-style-attribute">style</a></code> content attribute set. If specified, + </div><h5 id="the-style-attribute"><span class="secno">3.2.3.7 </span>The <dfn title="attr-style"><code>style</code></dfn> attribute</h5><p>All <a href="#html-elements">HTML elements</a> may have the <code title="attr-style"><a href="#the-style-attribute">style</a></code> content attribute set. If specified, the attribute must contain only a list of zero or more semicolon-separated (;) CSS declarations. <a href="#refsCSS">[CSS]</a><div class="impl"> @@ -7175,7 +7168,7 @@ transparent">green</span> and my eyes are <span style="color: blue; background: transparent">blue</span>.</p></pre> - </div><h5 id="embedding-custom-non-visible-data"><span class="secno">3.3.3.8 </span><dfn>Embedding custom non-visible data</dfn></h5><p>A <dfn id="custom-data-attribute">custom data attribute</dfn> is an attribute in no + </div><h5 id="embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span><dfn>Embedding custom non-visible data</dfn></h5><p>A <dfn id="custom-data-attribute">custom data attribute</dfn> is an attribute in no namespace whose name starts with the string "<dfn id="attr-data" title="attr-data-*"><code>data-</code></dfn>", has at least one character after the hyphen, is <a href="#xml-compatible">XML-compatible</a>, and contains no characters in the range U+0041 .. U+005A (LATIN CAPITAL @@ -7292,7 +7285,7 @@ these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values.</p> - </div><h4 id="element-definitions"><span class="secno">3.3.4 </span>Element definitions</h4><p>Each element in this specification has a definition that includes + </div><h4 id="element-definitions"><span class="secno">3.2.4 </span>Element definitions</h4><p>Each element in this specification has a definition that includes the following information:<dl><dt>Categories</dt> <dd>A list of <a href="#content-categories" title="content categories">categories</a> to @@ -7328,7 +7321,7 @@ </dl><p>This is then followed by a description of what the element <a href="#represents">represents</a>, along with any additional normative conformance criteria that may apply to authors<span class="impl" title=""> and implementations</span>. Examples are sometimes - also included.<h4 id="content-models"><span class="secno">3.3.5 </span><dfn>Content models</dfn></h4><p>All the elements in this specification have a defined content + also included.<h4 id="content-models"><span class="secno">3.2.5 </span><dfn>Content models</dfn></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.<p class="note">As noted in the conformance and terminology @@ -7372,7 +7365,7 @@ cell: document.createElement('td'), };</pre> - </div><h5 id="kinds-of-content"><span class="secno">3.3.5.1 </span>Kinds of content</h5><p>Each element in HTML falls into zero or more <dfn id="content-categories" title="content + </div><h5 id="kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</h5><p>Each element in HTML falls into zero or more <dfn id="content-categories" title="content categories">categories</dfn> that group elements with similar characteristics together. The following broad categories are used in this specification:<ul class="brief"><li><a href="#metadata-content-0">Metadata content</a></li> @@ -7387,9 +7380,8 @@ embedded content are all types of flow content. Embedded content is also a type of phrasing content." src="images/content-venn.png"></object><p>In addition, certain elements are categorized as <a href="#form-associated-element" title="form-associated element">form-associated elements</a> and further subcategorized to define their role in various form-related - processing models.</p><!-- XXX list all the elements for each kind of element in the - sections below and in a summary table at the end of the document --><p>Some elements have unique requirements and do not fit into any - particular category.<h6 id="metadata-content"><span class="secno">3.3.5.1.1 </span>Metadata content</h6><p><dfn id="metadata-content-0">Metadata content</dfn> is content that sets up the + processing models.<p>Some elements have unique requirements and do not fit into any + particular category.<h6 id="metadata-content"><span class="secno">3.2.5.1.1 </span>Metadata content</h6><p><dfn id="metadata-content-0">Metadata content</dfn> is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.<ul class="brief category-list"><li><code><a href="#the-base-element">base</a></code></li> @@ -7428,7 +7420,7 @@ <p>This isn't possible in the HTML serialization, however.</p> - </div><h6 id="flow-content"><span class="secno">3.3.5.1.2 </span>Flow content</h6><p>Most elements that are used in the body of documents and + </div><h6 id="flow-content"><span class="secno">3.2.5.1.2 </span>Flow content</h6><p>Most elements that are used in the body of documents and applications are categorized as <dfn id="flow-content-0">flow content</dfn>.<ul class="brief category-list"><li><code><a href="#the-a-element">a</a></code></li> <li><code><a href="#the-abbr-element">abbr</a></code></li> <li><code><a href="#the-address-element">address</a></code></li> @@ -7522,7 +7514,7 @@ many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most - pages be filled in but on some pages is not relevant.<h6 id="sectioning-content"><span class="secno">3.3.5.1.3 </span>Sectioning content</h6><p><dfn id="sectioning-content-0">Sectioning content</dfn> is content that defines the scope + pages be filled in but on some pages is not relevant.<h6 id="sectioning-content"><span class="secno">3.2.5.1.3 </span>Sectioning content</h6><p><dfn id="sectioning-content-0">Sectioning content</dfn> is content that defines the scope of <a href="#heading-content-0" title="heading content">headings</a> and <a href="#the-footer-element" title="footer">footers</a>.<ul class="brief category-list"><li><code><a href="#the-article-element">article</a></code></li> <li><code><a href="#the-aside-element">aside</a></code></li> <li><code><a href="#the-nav-element">nav</a></code></li> @@ -7531,7 +7523,7 @@ heading and an <a href="#outline">outline</a>. See the section on <a href="#headings-and-sections">headings and sections</a> for further details.<p class="note">There are also certain elements that are <a href="#sectioning-root" title="sectioning root">sectioning roots</a>. These are distinct from <a href="#sectioning-content-0">sectioning content</a>, but they can also have an - <a href="#outline">outline</a>.<h6 id="heading-content"><span class="secno">3.3.5.1.4 </span>Heading content</h6><p><dfn id="heading-content-0">Heading content</dfn> defines the header of a section + <a href="#outline">outline</a>.<h6 id="heading-content"><span class="secno">3.2.5.1.4 </span>Heading content</h6><p><dfn id="heading-content-0">Heading content</dfn> defines the header of a section (whether explicitly marked up using <a href="#sectioning-content-0">sectioning content</a> elements, or implied by the heading content itself).<ul class="brief category-list"><li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code></li> <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code></li> @@ -7540,7 +7532,7 @@ <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code></li> <li><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code></li> <li><code><a href="#the-hgroup-element">hgroup</a></code></li> - </ul><h6 id="phrasing-content"><span class="secno">3.3.5.1.5 </span>Phrasing content</h6><p><dfn id="phrasing-content-0">Phrasing content</dfn> is the text of the document, as well + </ul><h6 id="phrasing-content"><span class="secno">3.2.5.1.5 </span>Phrasing content</h6><p><dfn id="phrasing-content-0">Phrasing content</dfn> is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of <a href="#phrasing-content-0">phrasing content</a> form <a href="#paragraph" title="paragraph">paragraphs</a>.<ul class="brief category-list"><li><code><a href="#the-a-element">a</a></code> (if it contains only <a href="#phrasing-content-0">phrasing content</a>)</li> <li><code><a href="#the-abbr-element">abbr</a></code></li> @@ -7607,7 +7599,7 @@ model on its own, but is also <a href="#phrasing-content-0">phrasing content</a>, and can be <a href="#inter-element-whitespace">inter-element whitespace</a> (if the <a href="#text-node" title="text node">text nodes</a> are empty or contain just <a href="#space-character" title="space - character">space characters</a>).<h6 id="embedded-content"><span class="secno">3.3.5.1.6 </span>Embedded content</h6><p><dfn id="embedded-content-2">Embedded content</dfn> is content that imports another + character">space characters</a>).<h6 id="embedded-content"><span class="secno">3.2.5.1.6 </span>Embedded content</h6><p><dfn id="embedded-content-2">Embedded content</dfn> is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.<ul class="brief category-list"><li><code><a href="#audio">audio</a></code></li> <li><code><a href="#the-canvas-element">canvas</a></code></li> @@ -7624,7 +7616,7 @@ defined in this specification. (For example, MathML, or SVG.)<p>Some embedded content elements can have <dfn id="fallback-content">fallback content</dfn>: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The - element definitions state what the fallback is, if any.<h6 id="interactive-content"><span class="secno">3.3.5.1.7 </span>Interactive content</h6><!-- + element definitions state what the fallback is, if any.<h6 id="interactive-content"><span class="secno">3.2.5.1.7 </span>Interactive content</h6><!-- 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 @@ -7734,14 +7726,14 @@ for that element. Activation behaviors can refer to the <code title="event-click">click</code> and <code title="event-DOMActivate">DOMActivate</code> events that were fired by the steps above leading up to this point.</p> - </div><h5 id="transparent-content-models"><span class="secno">3.3.5.2 </span>Transparent content models</h5><p>Some elements are described as <dfn id="transparent">transparent</dfn>; they have + </div><h5 id="transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</h5><p>Some elements are described as <dfn id="transparent">transparent</dfn>; they have "transparent" in the description of their content model.<p>When a content model includes a part that is "transparent", those parts must not contain content that would not be conformant if all transparent elements in the tree were replaced, in their parent element, by the children in the "transparent" part of their content model, retaining order.<p>When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as - accepting any <a href="#flow-content-0">flow content</a>.<h5 id="paragraphs"><span class="secno">3.3.5.3 </span>Paragraphs</h5><p class="note">The term <a href="#paragraph">paragraph</a> as defined in this + accepting any <a href="#flow-content-0">flow content</a>.<h5 id="paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</h5><p class="note">The term <a href="#paragraph">paragraph</a> as defined in this section is distinct from (though related to) the <code><a href="#the-p-element">p</a></code> element defined later. The <a href="#paragraph">paragraph</a> concept defined here is used to describe how to interpret documents.<p>A <dfn id="paragraph">paragraph</dfn> is typically a run of <a href="#phrasing-content-0">phrasing @@ -7894,7 +7886,7 @@ <p>To avoid this confusion, explicit <code><a href="#the-p-element">p</a></code> elements can be used.</p> - </div><h3 id="apis-in-html-documents"><span class="secno">3.4 </span>APIs in HTML documents</h3><p>For <a href="#html-documents">HTML documents</a>, and for <a href="#html-elements">HTML + </div><h3 id="apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</h3><p>For <a href="#html-documents">HTML documents</a>, and for <a href="#html-elements">HTML elements</a> in <a href="#html-documents">HTML documents</a>, certain APIs defined in DOM Core become case-insensitive or case-changing, as sometimes defined in DOM Core, and as summarized <span class="impl">or @@ -8002,7 +7994,7 @@ </dl><div class="impl"> - <h3 id="interactions-with-xpath-and-xslt"><span class="secno">3.5 </span>Interactions with XPath and XSLT</h3> + <h3 id="interactions-with-xpath-and-xslt"><span class="secno">3.4 </span>Interactions with XPath and XSLT</h3> <p id="xpath-1.0-processors">Implementations of XPath 1.0 that operate on HTML documents parsed or created in the manners described @@ -8046,11 +8038,11 @@ unaffected.) <a href="#refsXSLT10">[XSLT10]</a></p> <!-- note: version matters for this ref --> - </div><h3 id="dynamic-markup-insertion"><span class="secno">3.6 </span><dfn>Dynamic markup insertion</dfn></h3><p class="note">APIs for dynamically inserting markup into the + </div><h3 id="dynamic-markup-insertion"><span class="secno">3.5 </span><dfn>Dynamic markup insertion</dfn></h3><p class="note">APIs for dynamically inserting markup into the document interact with the parser, and thus their behavior, varies depending on whether they are used with <a href="#html-documents">HTML documents</a> (and the <a href="#html-parser">HTML parser</a>) or XHTML in <a href="#xml-documents">XML - documents</a> (and the <a href="#xml-parser">XML parser</a>).<h4 id="controlling-the-input-stream"><span class="secno">3.6.1 </span>Controlling the input stream</h4><p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn> + documents</a> (and the <a href="#xml-parser">XML parser</a>).<h4 id="controlling-the-input-stream"><span class="secno">3.5.1 </span>Controlling the input stream</h4><p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn> method comes in several variants with different numbers of arguments.<dl class="domintro"><dt><var title="">document</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt> @@ -8250,7 +8242,7 @@ an <a href="#explicit-eof-character">explicit "EOF" character</a> at the end of the parser's <a href="#the-input-stream">input stream</a>.</p> - </div><h4 id="document.write"><span class="secno">3.6.2 </span><code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-write"><a href="#dom-document-write">write</a></code>(<var title="">text</var>...)</dt> + </div><h4 id="document.write"><span class="secno">3.5.2 </span><code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-write"><a href="#dom-document-write">write</a></code>(<var title="">text</var>...)</dt> <dd> @@ -8331,7 +8323,7 @@ </li> - </ol></div><h4 id="document.writeln"><span class="secno">3.6.3 </span><code title="dom-document-writeln"><a href="#dom-document-writeln">document.writeln()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-writeln"><a href="#dom-document-writeln">writeln</a></code>(<var title="">text</var>...)</dt> + </ol></div><h4 id="document.writeln"><span class="secno">3.5.3 </span><code title="dom-document-writeln"><a href="#dom-document-writeln">document.writeln()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-writeln"><a href="#dom-document-writeln">writeln</a></code>(<var title="">text</var>...)</dt> <dd> @@ -8352,7 +8344,7 @@ invoked with the same argument(s), plus an extra argument consisting of a string containing a single line feed character (U+000A).</p> - </div><h4 id="innerhtml"><span class="secno">3.6.4 </span><code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code></h4><p>The <dfn id="dom-innerhtml" title="dom-innerHTML"><code>innerHTML</code></dfn> DOM + </div><h4 id="innerhtml"><span class="secno">3.5.4 </span><code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code></h4><p>The <dfn id="dom-innerhtml" title="dom-innerHTML"><code>innerHTML</code></dfn> DOM attribute represents the markup of the node's contents.<dl class="domintro"><dt><var title="">document</var> . <code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code> [ = <var title="">value</var> ]</dt> <dd> @@ -8462,7 +8454,7 @@ </li> - </ol></div><h4 id="outerhtml"><span class="secno">3.6.5 </span><code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code></h4><p>The <dfn id="dom-outerhtml" title="dom-outerHTML"><code>outerHTML</code></dfn> DOM + </ol></div><h4 id="outerhtml"><span class="secno">3.5.5 </span><code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code></h4><p>The <dfn id="dom-outerhtml" title="dom-outerHTML"><code>outerHTML</code></dfn> DOM attribute represents the markup of the element and its contents.<dl class="domintro"><dt><var title="">element</var> . <code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code> [ = <var title="">value</var> ]</dt> <dd> @@ -8563,7 +8555,7 @@ </li> - </ol></div><h4 id="insertadjacenthtml"><span class="secno">3.6.6 </span><code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML()</a></code></h4><dl class="domintro"><dt><var title="">element</var> . <code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML</a></code>(<var title="">position</var>, <var title="">text</var>)</dt> + </ol></div><h4 id="insertadjacenthtml"><span class="secno">3.5.6 </span><code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML()</a></code></h4><dl class="domintro"><dt><var title="">element</var> . <code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML</a></code>(<var title="">position</var>, <var title="">text</var>)</dt> <dd> @@ -14397,7 +14389,7 @@ layer. For example, an HTML+CSS user agent should implement these requirements by implementing the CSS 'unicode-bidi' property. <a href="#refsCSS">[CSS]</a></p> - </div><!-- XXX need examples --><h4 id="the-ruby-element"><span class="secno">4.6.22 </span>The <dfn><code>ruby</code></dfn> element</h4><dl class="element"><dt>Categories</dt> + </div><h4 id="the-ruby-element"><span class="secno">4.6.22 </span>The <dfn><code>ruby</code></dfn> element</h4><dl class="element"><dt>Categories</dt> <dd><a href="#flow-content-0">Flow content</a>.</dd> <dd><a href="#phrasing-content-0">Phrasing content</a>.</dd> <dt>Contexts in which this element may be used:</dt> @@ -14422,8 +14414,8 @@ <!-- this is the kanji for the word "kanji" ("chinese character") in japanese --> <!-- in japanese, ruby-like typography is called "furigana" --> - <p>In this example, each ideograph in the Japanese text <span lang="ja">漢字</span> is annotated with its kanji - reading.</p> + <p>In this example, each ideograph in the Japanese text <span lang="ja" title="">漢字</span> is annotated with its + kanji reading.</p> <pre lang="ja">... <ruby> @@ -14441,8 +14433,8 @@ <!-- this is the bopomofo for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan --> <p>In this example, each ideograph in the traditional Chinese text - <span lang="zh-TW">漢字</span> is annotated with its - bopomofo reading.</p> + <span lang="zh-TW" title="">漢字</span> is annotated + with its bopomofo reading.</p> <pre lang="zh-TW"><ruby> 漢 <rt> ㄏㄢˋ </rt> @@ -14458,8 +14450,8 @@ <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china --> <p>In this example, each ideograph in the simplified Chinese text - <span lang="zh-CN">汉字</span> is annotated with its - pinyin reading.</p> + <span lang="zh-CN" title="">汉字</span> is annotated + with its pinyin reading.</p> <pre lang="zh-CN">... <ruby> @@ -14516,9 +14508,9 @@ parent element is not a <code><a href="#the-ruby-element">ruby</a></code> element <a href="#represents">represents</a> its children.</span><div class="example"> - <p>The example above, in which each ideograph in the text <span lang="ja">漢字</span> is annotated with its kanji - reading, could be expanded to use <code><a href="#the-rp-element">rp</a></code> so that in legacy - user agents the readings are in parentheses:</p> + <p>The example above, in which each ideograph in the text <span lang="ja" title="">漢字</span> is annotated with its + kanji reading, could be expanded to use <code><a href="#the-rp-element">rp</a></code> so that in + legacy user agents the readings are in parentheses:</p> <pre lang="ja">... <ruby> @@ -14533,9 +14525,102 @@ <pre lang="ja">... 漢 (かん) 字 (じ) ...</pre> - </div><h4 id="usage-summary"><span class="secno">4.6.25 </span>Usage summary</h4><p class="XXX">We need to summarize the various elements, in - particular to distinguish b/i/em/strong/var/q/mark/cite.</p><!-- XXX when you do this, also reorder the elements in this section - to bring the related ones closer together. --><h4 id="footnotes"><span class="secno">4.6.26 </span>Footnotes</h4><p>HTML does not have a dedicated mechanism for marking up + </div><h4 id="usage-summary"><span class="secno">4.6.25 </span>Usage summary</h4><p><i>This section is non-normative.</i><table><thead><tr><th>Element + <th>Purpose + <th>Example + <tbody><tr><td><code><a href="#the-a-element">a</a></code> + <td>Hyperlinks + <td><pre class="example">Visit my <strong><a href="drinks.html">drinks</a></strong> page.</pre> + + <tr><td><code><a href="#the-em-element">em</a></code> + <td>Stress emphasis + <td><pre class="example">I must say I <strong><em>adore</em></strong> lemonade.</pre> + + <tr><td><code><a href="#the-strong-element">strong</a></code> + <td>Importance + <td><pre class="example">This tea is <strong><strong>very hot</strong></strong>.</pre> + + <tr><td><code><a href="#the-small-element">small</a></code> + <td>Side comments + <td><pre class="example">These grapes are made into wine. <strong><small>Alcohol is addictive.</small></strong></pre> + + <tr><td><code><a href="#the-cite-element">cite</a></code> + <td>Titles of works + <td><pre class="example">The case <strong><cite>Hugo v. Danielle</cite></strong> is relevant here.</pre> + + <tr><td><code><a href="#the-q-element">q</a></code> + <td>Quotations + <td><pre class="example">The judge said <strong><q>You can drink water from the fish tank</q></strong> but advised against it.</pre> + + <tr><td><code><a href="#the-dfn-element">dfn</a></code> + <td>Defining instance + <td><pre class="example">The term <strong><dfn>organic food</dfn></strong> refers to food produced without synthetic chemicals.</pre> + + <tr><td><code><a href="#the-code-element">code</a></code> + <td>Computer code + <td><pre class="example">The <strong><code>fruitdb</code></strong> program can be used for tracking fruit production.</pre> + + <tr><td><code><a href="#the-var-element">var</a></code> + <td>Variables + <td><pre class="example">If there are <strong><var>n</var></strong> fruit in the bowl, at least <strong><var>n</var></strong>÷2 will be ripe.</pre> + + <tr><td><code><a href="#the-samp-element">samp</a></code> + <td>Computer output + <td><pre class="example">The computer said <strong><samp>Unknown error -3</samp></strong>.</pre> + + <tr><td><code><a href="#the-kbd-element">kbd</a></code> + <td>Computer input + <td><pre class="example">Hit <strong><kbd>F1</kbd></strong> to continue.</pre> + + <tr><td><code><a href="#the-abbr-element">abbr</a></code> + <td>Abbreviations + <td><pre class="example">Organic food in Ireland is certified by the <strong><abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr></strong>.</pre> + + <tr><td><code><a href="#the-sub-and-sup-elements">sub</a></code> + <td>Subscripts + <td><pre class="example">Water is H<strong><sub>2</sub></strong>O.</pre> + + <tr><td><code><a href="#the-sub-and-sup-elements">sup</a></code> + <td>Superscripts + <td><pre class="example">The Hydrogen in heavy water is usually <strong><sup>2</sup></strong>H.</pre> + + <tr><td><code><a href="#the-i-element">i</a></code> + <td>Alternative voice + <td><pre class="example">Lemonade consists primarily of <strong><i>Citrus limon</i></strong>.</pre> + + <tr><td><code><a href="#the-b-element">b</a></code> + <td>Keywords + <td><pre class="example">Take a <strong><b>lemon</b></strong> and squeeze it with a <strong><b>juicer</b></strong>.</pre> + + <tr><td><code><a href="#the-mark-element">mark</a></code> + <td>Highlight + <td><pre class="example">Elderflower cordial, with one <strong><mark>part</mark></strong> cordial to ten <strong><mark>part</mark></strong>s water, stands a<strong><mark>part</mark></strong> from the rest.</pre> + + <tr><td><code><a href="#the-progress-element">progress</a></code> + <td>Progress bar + <td><pre class="example">Copying: <strong><progress>75%</progress></strong></pre> + + <tr><td><code><a href="#the-meter-element">meter</a></code> + <td>Gauge + <td><pre class="example">Disk space remaining: <meter>75%<meter></pre> + + <tr><td><code><a href="#the-time-element">time</a></code> + <td>Date and/or time + <td><pre class="example">Published <strong><time>2009-10-21</time></strong>.</pre> + + <tr><td><code><a href="#the-ruby-element">ruby</a></code>, <code><a href="#the-rt-element">rt</a></code>, <code><a href="#the-rp-element">rp</a></code> + <td>Ruby annotations + <td><pre class="example"><strong><ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby></strong></pre> + + <tr><td><code><a href="#the-bdo-element">bdo</a></code> + <td>Text directionality formatting + <td><pre class="example">The proposal is to write English, but in reverse order. "Juice" would become "<strong><bdo dir=rtl>Juice</bdo></strong>"</pre> + + <tr><td><code><a href="#the-span-element">span</a></code> + <td>Other + <td><pre class="example">In French we call it <strong><span lang="fr">sirop de sureau</span></strong>.</pre> + + </table><h4 id="footnotes"><span class="secno">4.6.26 </span>Footnotes</h4><p>HTML does not have a dedicated mechanism for marking up footnotes. Here are the recommended alternatives.<p>For short inline annotations, the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute should be used.<div class="example"> <p>In this example, two parts of a dialog are annotated.</p>
Received on Monday, 17 August 2009 02:16:17 UTC