[html5] r3641 - [e] (0) Rearrange the text-level semantics section to be in a more useful order.
whatwg at whatwg.org
whatwg at whatwg.org
Sun Aug 16 19:23:50 PDT 2009
Author: ianh
Date: 2009-08-16 19:23:49 -0700 (Sun, 16 Aug 2009)
New Revision: 3641
Modified:
index
source
Log:
[e] (0) Rearrange the text-level semantics section to be in a more useful order.
Modified: index
===================================================================
--- index 2009-08-17 02:14:55 UTC (rev 3640)
+++ index 2009-08-17 02:23:49 UTC (rev 3641)
@@ -353,29 +353,29 @@
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
- <li><a href=#the-q-element><span class=secno>4.6.2 </span>The <code>q</code> element</a></li>
- <li><a href=#the-cite-element><span class=secno>4.6.3 </span>The <code>cite</code> element</a></li>
- <li><a href=#the-em-element><span class=secno>4.6.4 </span>The <code>em</code> element</a></li>
- <li><a href=#the-strong-element><span class=secno>4.6.5 </span>The <code>strong</code> element</a></li>
- <li><a href=#the-small-element><span class=secno>4.6.6 </span>The <code>small</code> element</a></li>
- <li><a href=#the-mark-element><span class=secno>4.6.7 </span>The <code>mark</code> element</a></li>
- <li><a href=#the-dfn-element><span class=secno>4.6.8 </span>The <code>dfn</code> element</a></li>
- <li><a href=#the-abbr-element><span class=secno>4.6.9 </span>The <code>abbr</code> element</a></li>
- <li><a href=#the-time-element><span class=secno>4.6.10 </span>The <code>time</code> element</a></li>
- <li><a href=#the-progress-element><span class=secno>4.6.11 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-meter-element><span class=secno>4.6.12 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-code-element><span class=secno>4.6.13 </span>The <code>code</code> element</a></li>
- <li><a href=#the-var-element><span class=secno>4.6.14 </span>The <code>var</code> element</a></li>
- <li><a href=#the-samp-element><span class=secno>4.6.15 </span>The <code>samp</code> element</a></li>
- <li><a href=#the-kbd-element><span class=secno>4.6.16 </span>The <code>kbd</code> element</a></li>
- <li><a href=#the-sub-and-sup-elements><span class=secno>4.6.17 </span>The <code>sub</code> and <code>sup</code> elements</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.18 </span>The <code>span</code> element</a></li>
- <li><a href=#the-i-element><span class=secno>4.6.19 </span>The <code>i</code> element</a></li>
- <li><a href=#the-b-element><span class=secno>4.6.20 </span>The <code>b</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.21 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-ruby-element><span class=secno>4.6.22 </span>The <code>ruby</code> element</a></li>
- <li><a href=#the-rt-element><span class=secno>4.6.23 </span>The <code>rt</code> element</a></li>
- <li><a href=#the-rp-element><span class=secno>4.6.24 </span>The <code>rp</code> element</a></li>
+ <li><a href=#the-em-element><span class=secno>4.6.2 </span>The <code>em</code> element</a></li>
+ <li><a href=#the-strong-element><span class=secno>4.6.3 </span>The <code>strong</code> element</a></li>
+ <li><a href=#the-small-element><span class=secno>4.6.4 </span>The <code>small</code> element</a></li>
+ <li><a href=#the-cite-element><span class=secno>4.6.5 </span>The <code>cite</code> element</a></li>
+ <li><a href=#the-q-element><span class=secno>4.6.6 </span>The <code>q</code> element</a></li>
+ <li><a href=#the-dfn-element><span class=secno>4.6.7 </span>The <code>dfn</code> element</a></li>
+ <li><a href=#the-abbr-element><span class=secno>4.6.8 </span>The <code>abbr</code> element</a></li>
+ <li><a href=#the-code-element><span class=secno>4.6.9 </span>The <code>code</code> element</a></li>
+ <li><a href=#the-var-element><span class=secno>4.6.10 </span>The <code>var</code> element</a></li>
+ <li><a href=#the-samp-element><span class=secno>4.6.11 </span>The <code>samp</code> element</a></li>
+ <li><a href=#the-kbd-element><span class=secno>4.6.12 </span>The <code>kbd</code> element</a></li>
+ <li><a href=#the-sub-and-sup-elements><span class=secno>4.6.13 </span>The <code>sub</code> and <code>sup</code> elements</a></li>
+ <li><a href=#the-i-element><span class=secno>4.6.14 </span>The <code>i</code> element</a></li>
+ <li><a href=#the-b-element><span class=secno>4.6.15 </span>The <code>b</code> element</a></li>
+ <li><a href=#the-mark-element><span class=secno>4.6.16 </span>The <code>mark</code> element</a></li>
+ <li><a href=#the-progress-element><span class=secno>4.6.17 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-meter-element><span class=secno>4.6.18 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-time-element><span class=secno>4.6.19 </span>The <code>time</code> element</a></li>
+ <li><a href=#the-ruby-element><span class=secno>4.6.20 </span>The <code>ruby</code> element</a></li>
+ <li><a href=#the-rt-element><span class=secno>4.6.21 </span>The <code>rt</code> element</a></li>
+ <li><a href=#the-rp-element><span class=secno>4.6.22 </span>The <code>rp</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
<li><a href=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></li>
<li><a href=#footnotes><span class=secno>4.6.26 </span>Footnotes</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
@@ -14433,9 +14433,8 @@
</div>
+ <h4 id=the-em-element><span class=secno>4.6.2 </span>The <dfn><code>em</code></dfn> element</h4>
- <h4 id=the-q-element><span class=secno>4.6.2 </span>The <dfn><code>q</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>
@@ -14445,234 +14444,8 @@
<dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
- <dd><code title=attr-q-cite><a href=#attr-q-cite>cite</a></code></dd>
<dt>DOM interface:</dt>
- <dd>
- The <code><a href=#the-q-element>q</a></code> element uses the <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code> interface.
- </dd>
- </dl><p>The <code><a href=#the-q-element>q</a></code> element <a href=#represents>represents</a> some <a href=#phrasing-content-0 title="phrasing content">phrasing content</a> quoted from another
- source.</p>
-
- <p>Quotation punctuation (such as quotation marks) must not appear
- immediately before, after, or inside <code><a href=#the-q-element>q</a></code> elements; they
- will be inserted into the rendering by the user agent.</p>
-
- <p>Content inside a <code><a href=#the-q-element>q</a></code> element must be quoted from
- another source, whose address, if it has one, should be cited in the
- <dfn id=attr-q-cite title=attr-q-cite><code>cite</code></dfn> attribute. The
- source may be fictional, as when quoting characters in a novel or
- screenplay.</p>
-
- <div class=impl>
-
- <p>If the <code title=attr-q-cite><a href=#attr-q-cite>cite</a></code> attribute is
- present, it must be a <a href=#valid-url>valid URL</a>. To obtain the
- corresponding citation link, the value of the attribute must be
- <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the
- element. User agents should allow users to follow such citation
- links.</p>
-
- </div>
-
- <p>The <code><a href=#the-q-element>q</a></code> element must not be used in place of quotation
- marks that do not represent quotes; for example, it is inappropriate
- to use the <code><a href=#the-q-element>q</a></code> element for marking up sarcastic
- statements.</p>
-
- <p>The use of <code><a href=#the-q-element>q</a></code> elements to mark up quotations is
- entirely optional; using explicit quotation punctuation without
- <code><a href=#the-q-element>q</a></code> elements is just as correct.</p>
-
- <div class=example>
-
- <p>Here is a simple example of the use of the <code><a href=#the-q-element>q</a></code>
- element:</p>
-
- <pre><p>The man said <q>Things that are impossible just take
-longer</q>. I disagreed with him.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>Here is an example with both an explicit citation link in the
- <code><a href=#the-q-element>q</a></code> element, and an explicit citation outside:</p>
-
- <pre><p>The W3C page <cite>About W3C</cite> says the W3C's
-mission is <q cite="http://www.w3.org/Consortium/">To lead the
-World Wide Web to its full potential by developing protocols and
-guidelines that ensure long-term growth for the Web</q>. I
-disagree with this mission.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>In the following example, the quotation itself contains a
- quotation:</p>
-
- <pre><p>In <cite>Example One</cite>, he writes <q>The man
-said <q>Things that are impossible just take longer</q>. I
-disagreed with him</q>. Well, I disagree even more!</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>In the following example, quotation marks are used instead of
- the <code><a href=#the-q-element>q</a></code> element:</p>
-
- <pre><p>His best argument was ❝I disagree❞, which
-I thought was laughable.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>In the following example, there is no quote — the
- quotation marks are used to name a word. Use of the <code><a href=#the-q-element>q</a></code>
- element in this case would be inappropriate.</p>
-
- <pre><p>The word "ineffable" could have been used to describe the disaster
-resulting from the campaign's mismanagement.</p></pre>
-
- </div>
-
-
- <h4 id=the-cite-element><span class=secno>4.6.3 </span>The <dfn><code>cite</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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-cite-element>cite</a></code> element <a href=#represents>represents</a> the title
- of a work (e.g.
- a book,
- a paper,
- an essay,
- a poem,
- a score,
- a song,
- a script,
- a film,
- a TV show,
- a game,
- a sculpture,
- a painting,
- a theatre production,
- a play,
- an opera,
- a musical,
- an exhibition,
- a legal case report,
- etc). This can be a work that is being quoted or
- referenced in detail (i.e. a citation), or it can just be a work
- that is mentioned in passing.</p>
-
- <p>A person's name is not the title of a work — even if people
- call that person a piece of work — and the element must
- therefore not be used to mark up people's names. (In some cases, the
- <code><a href=#the-b-element>b</a></code> element might be appropriate for names; e.g. in a
- gossip article where the names of famous people are keywords
- rendered with a different style to draw attention to them. In other
- cases, if an element is <em>really</em> needed, the
- <code><a href=#the-span-element>span</a></code> element can be used.)</p>
-
- <p>A ship is similarly not a work, and the element must not be used
- to mark up ship names (the <code><a href=#the-i-element>i</a></code> element can be used for
- that purpose).</p>
-
- <div class=example>
-
- <p>This next example shows a typical use of the <code><a href=#the-cite-element>cite</a></code>
- element:</p>
-
- <pre><p>My favorite book is <cite>The Reality Dysfunction</cite> by
-Peter F. Hamilton. My favorite comic is <cite>Pearls Before
-Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
-Samba</cite> by the Cannonball Adderley Sextet.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>This is correct usage:</p>
-
- <pre><p>According to the Wikipedia article <cite>HTML</cite>, as it
-stood in mid-February 2008, leaving attribute values unquoted is
-unsafe. This is obviously an over-simplification.</p></pre>
-
- <p>The following, however, is incorrect usage, as the
- <code><a href=#the-cite-element>cite</a></code> element here is containing far more than the
- title of the work:</p>
-
- <pre class=bad><!-- do not copy this example, it is an example of bad usage! -->
-<p>According to <cite>the Wikipedia article on HTML</cite>, as it
-stood in mid-February 2008, leaving attribute values unquoted is
-unsafe. This is obviously an over-simplification.</p></pre>
-
- </div>
-
- <div class=example>
-
- <p>The <code><a href=#the-cite-element>cite</a></code> element is obviously a key part of any
- citation in a bibliography, but it is only used to mark the
- title:</p>
-
- <pre><p><cite>Universal Declaration of Human Rights</cite>, United Nations,
-December 1948. Adopted by General Assembly resolution 217 A (III).</p></pre>
-
- </div>
-
- <p class=note>A <em>citation</em> is not a <em>quote</em> (for
- which the <code><a href=#the-q-element>q</a></code> element is appropriate).</p>
-
- <div class=example>
-
- <p>This is incorrect usage, because <code><a href=#the-cite-element>cite</a></code> is not for
- quotes:</p>
-
- <pre><p><cite>This is wrong!</cite>, said Ian.</p></pre>
-
- <p>This is also incorrect usage, because a person is not a
- work:</p>
-
- <pre><p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p></pre>
-
- <p>The correct usage does not use a <code><a href=#the-cite-element>cite</a></code> element:</p>
-
- <pre><p><q>This is correct</q>, said Ian.</p></pre>
-
- <p>As mentioned above, the <code><a href=#the-b-element>b</a></code> element might be relevant
- for marking names as being keywords in certain kinds of
- documents:</p>
-
- <pre><p>And then <b>Ian</b> said <q>this might be right, in a
-gossip column, maybe!</q>.</p></pre>
-
- </div>
-
-
- <h4 id=the-em-element><span class=secno>4.6.4 </span>The <dfn><code>em</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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-em-element>em</a></code> element <a href=#represents>represents</a> stress
emphasis of its contents.</p>
@@ -14754,7 +14527,7 @@
- <h4 id=the-strong-element><span class=secno>4.6.5 </span>The <dfn><code>strong</code></dfn> element</h4>
+ <h4 id=the-strong-element><span class=secno>4.6.3 </span>The <dfn><code>strong</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -14791,7 +14564,7 @@
</div>
- <h4 id=the-small-element><span class=secno>4.6.6 </span>The <dfn><code>small</code></dfn> element</h4>
+ <h4 id=the-small-element><span class=secno>4.6.4 </span>The <dfn><code>small</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -14870,7 +14643,7 @@
</div>
- <h4 id=the-mark-element><span class=secno>4.6.7 </span>The <dfn><code>mark</code></dfn> element</h4>
+ <h4 id=the-cite-element><span class=secno>4.6.5 </span>The <dfn><code>cite</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -14883,131 +14656,222 @@
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-mark-element>mark</a></code> element <a href=#represents>represents</a> a run of
- text in one document marked or highlighted for reference purposes,
- due to its relevance in another context. When used in a quotation or
- other block of text referred to from the prose, it indicates a
- highlight that was not originally present but which has been added
- to bring the reader's attention to a part of the text that might not
- have been considered important by the original author when the block
- was originally written, but which is now under previously unexpected
- scrutiny. When used in the main prose of a document, it indicates a
- part of the document that has been highlighted due to its likely
- relevance to the user's current activity.</p>
+ </dl><p>The <code><a href=#the-cite-element>cite</a></code> element <a href=#represents>represents</a> the title
+ of a work (e.g.
+ a book,
+ a paper,
+ an essay,
+ a poem,
+ a score,
+ a song,
+ a script,
+ a film,
+ a TV show,
+ a game,
+ a sculpture,
+ a painting,
+ a theatre production,
+ a play,
+ an opera,
+ a musical,
+ an exhibition,
+ a legal case report,
+ etc). This can be a work that is being quoted or
+ referenced in detail (i.e. a citation), or it can just be a work
+ that is mentioned in passing.</p>
+ <p>A person's name is not the title of a work — even if people
+ call that person a piece of work — and the element must
+ therefore not be used to mark up people's names. (In some cases, the
+ <code><a href=#the-b-element>b</a></code> element might be appropriate for names; e.g. in a
+ gossip article where the names of famous people are keywords
+ rendered with a different style to draw attention to them. In other
+ cases, if an element is <em>really</em> needed, the
+ <code><a href=#the-span-element>span</a></code> element can be used.)</p>
+
+ <p>A ship is similarly not a work, and the element must not be used
+ to mark up ship names (the <code><a href=#the-i-element>i</a></code> element can be used for
+ that purpose).</p>
+
<div class=example>
- <p>This example shows how the <code><a href=#the-mark-element>mark</a></code> element can be used
- to bring attention to a particular part of a quotation:</p>
- <pre><p lang="en-US">Consider the following quote:</p>
-<blockquote lang="en-GB">
- <p>Look around and you will find, no-one's really
- <mark>colour</mark> blind.</p>
-</blockquote>
-<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
-the person writing this quote is clearly not American.</p></pre>
+
+ <p>This next example shows a typical use of the <code><a href=#the-cite-element>cite</a></code>
+ element:</p>
+
+ <pre><p>My favorite book is <cite>The Reality Dysfunction</cite> by
+Peter F. Hamilton. My favorite comic is <cite>Pearls Before
+Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
+Samba</cite> by the Cannonball Adderley Sextet.</p></pre>
+
</div>
<div class=example>
- <p>Another example of the <code><a href=#the-mark-element>mark</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>
+ <p>This is correct usage:</p>
- <pre><p>I also have some <mark>kitten</mark>s who are visiting me
-these days. They're really cute. I think they like my garden! Maybe I
-should adopt a <mark>kitten</mark>.</p></pre>
+ <pre><p>According to the Wikipedia article <cite>HTML</cite>, as it
+stood in mid-February 2008, leaving attribute values unquoted is
+unsafe. This is obviously an over-simplification.</p></pre>
+ <p>The following, however, is incorrect usage, as the
+ <code><a href=#the-cite-element>cite</a></code> element here is containing far more than the
+ title of the work:</p>
+
+ <pre class=bad><!-- do not copy this example, it is an example of bad usage! -->
+<p>According to <cite>the Wikipedia article on HTML</cite>, as it
+stood in mid-February 2008, leaving attribute values unquoted is
+unsafe. This is obviously an over-simplification.</p></pre>
+
</div>
<div class=example>
- <p>In the following snippet, a paragraph of text refers to a
- specific part of a code fragment.</p>
+ <p>The <code><a href=#the-cite-element>cite</a></code> element is obviously a key part of any
+ citation in a bibliography, but it is only used to mark the
+ title:</p>
- <pre><p>The highlighted part below is where the error lies:</p>
-<pre><code>var i: Integer;
-begin
- i := <mark>1.1</mark>;
-end.</code></pre></pre>
+ <pre><p><cite>Universal Declaration of Human Rights</cite>, United Nations,
+December 1948. Adopted by General Assembly resolution 217 A (III).</p></pre>
</div>
+ <p class=note>A <em>citation</em> is not a <em>quote</em> (for
+ which the <code><a href=#the-q-element>q</a></code> element is appropriate).</p>
+
<div class=example>
- <p>This is another example showing the use of <code><a href=#the-mark-element>mark</a></code> to
- highlight a part of quoted text that was originally not
- emphasized. In this example, common typographic conventions have
- led the author to explicitly style <code><a href=#the-mark-element>mark</a></code> elements in
- quotes to render in italics.</p>
+ <p>This is incorrect usage, because <code><a href=#the-cite-element>cite</a></code> is not for
+ quotes:</p>
- <pre><article>
- <style>
- blockquote mark, q mark {
- font: inherit; font-style: italic;
- text-decoration: none;
- background: transparent; color: inherit;
- }
- .bubble em {
- font: inherit; font-size: larger;
- text-decoration: underline;
- }
- </style>
- <h1>She knew</h1>
- <p>Did you notice the subtle joke in the joke on panel 4?</p>
- <blockquote>
- <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
- on some level I realized it was a known-plaintext attack.</mark> But I
- couldn't admit it until I saw for myself.</p>
- </blockquote>
- <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
- explains everything neatly.</p>
-</article></pre>
+ <pre><p><cite>This is wrong!</cite>, said Ian.</p></pre>
- <p>Note, incidentally, the distinction between the <code><a href=#the-em-element>em</a></code>
- element in this example, which is part of the original text being
- quoted, and the <code><a href=#the-mark-element>mark</a></code> element, which is highlighting a
- part for comment.</p>
+ <p>This is also incorrect usage, because a person is not a
+ work:</p>
+ <pre><p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p></pre>
+
+ <p>The correct usage does not use a <code><a href=#the-cite-element>cite</a></code> element:</p>
+
+ <pre><p><q>This is correct</q>, said Ian.</p></pre>
+
+ <p>As mentioned above, the <code><a href=#the-b-element>b</a></code> element might be relevant
+ for marking names as being keywords in certain kinds of
+ documents:</p>
+
+ <pre><p>And then <b>Ian</b> said <q>this might be right, in a
+gossip column, maybe!</q>.</p></pre>
+
</div>
+
+
+ <h4 id=the-q-element><span class=secno>4.6.6 </span>The <dfn><code>q</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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-q-cite><a href=#attr-q-cite>cite</a></code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+ The <code><a href=#the-q-element>q</a></code> element uses the <code><a href=#htmlquoteelement>HTMLQuoteElement</a></code> interface.
+ </dd>
+ </dl><p>The <code><a href=#the-q-element>q</a></code> element <a href=#represents>represents</a> some <a href=#phrasing-content-0 title="phrasing content">phrasing content</a> quoted from another
+ source.</p>
+
+ <p>Quotation punctuation (such as quotation marks) must not appear
+ immediately before, after, or inside <code><a href=#the-q-element>q</a></code> elements; they
+ will be inserted into the rendering by the user agent.</p>
+
+ <p>Content inside a <code><a href=#the-q-element>q</a></code> element must be quoted from
+ another source, whose address, if it has one, should be cited in the
+ <dfn id=attr-q-cite title=attr-q-cite><code>cite</code></dfn> attribute. The
+ source may be fictional, as when quoting characters in a novel or
+ screenplay.</p>
+
+ <div class=impl>
+
+ <p>If the <code title=attr-q-cite><a href=#attr-q-cite>cite</a></code> attribute is
+ present, it must be a <a href=#valid-url>valid URL</a>. To obtain the
+ corresponding citation link, the value of the attribute must be
+ <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the
+ element. User agents should allow users to follow such citation
+ links.</p>
+
+ </div>
+
+ <p>The <code><a href=#the-q-element>q</a></code> element must not be used in place of quotation
+ marks that do not represent quotes; for example, it is inappropriate
+ to use the <code><a href=#the-q-element>q</a></code> element for marking up sarcastic
+ statements.</p>
+
+ <p>The use of <code><a href=#the-q-element>q</a></code> elements to mark up quotations is
+ entirely optional; using explicit quotation punctuation without
+ <code><a href=#the-q-element>q</a></code> elements is just as correct.</p>
+
<div class=example>
- <p>The following example shows the difference between denoting the
- <em>importance</em> of a span of text (<code><a href=#the-strong-element>strong</a></code>) as
- opposed to denoting the <em>relevance</em> of a span of text
- (<code><a href=#the-mark-element>mark</a></code>). It is an extract from a textbook, where the
- extract has had the parts relevant to the exam highlighted. The
- safety warnings, important though they may be, are apparently not
- relevant to the exam.</p>
+ <p>Here is a simple example of the use of the <code><a href=#the-q-element>q</a></code>
+ element:</p>
- <pre><h3>Wormhole Physics Introduction</h3>
+ <pre><p>The man said <q>Things that are impossible just take
+longer</q>. I disagreed with him.</p></pre>
-<p><mark>A wormhole in normal conditions can be held open for a
-maximum of just under 39 minutes.</mark> Conditions that can increase
-the time include a powerful energy source coupled to one or both of
-the gates connecting the wormhole, and a large gravity well (such as a
-black hole).</p>
+ </div>
-<p><mark>Momentum is preserved across the wormhole. Electromagnetic
-radiation can travel in both directions through a wormhole,
-but matter cannot.</mark></p>
+ <div class=example>
-<p>When a wormhole is created, a vortex normally forms.
-<strong>Warning: The vortex caused by the wormhole opening will
-annihilate anything in its path.</strong> Vortexes can be avoided when
-using sufficiently advanced dialing technology.</p>
+ <p>Here is an example with both an explicit citation link in the
+ <code><a href=#the-q-element>q</a></code> element, and an explicit citation outside:</p>
-<p><mark>An obstruction in a gate will prevent it from accepting a
-wormhole connection.</mark></p></pre>
+ <pre><p>The W3C page <cite>About W3C</cite> says the W3C's
+mission is <q cite="http://www.w3.org/Consortium/">To lead the
+World Wide Web to its full potential by developing protocols and
+guidelines that ensure long-term growth for the Web</q>. I
+disagree with this mission.</p></pre>
</div>
+ <div class=example>
+ <p>In the following example, the quotation itself contains a
+ quotation:</p>
- <h4 id=the-dfn-element><span class=secno>4.6.8 </span>The <dfn><code>dfn</code></dfn> element</h4>
+ <pre><p>In <cite>Example One</cite>, he writes <q>The man
+said <q>Things that are impossible just take longer</q>. I
+disagreed with him</q>. Well, I disagree even more!</p></pre>
+ </div>
+
+ <div class=example>
+
+ <p>In the following example, quotation marks are used instead of
+ the <code><a href=#the-q-element>q</a></code> element:</p>
+
+ <pre><p>His best argument was ❝I disagree❞, which
+I thought was laughable.</p></pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>In the following example, there is no quote — the
+ quotation marks are used to name a word. Use of the <code><a href=#the-q-element>q</a></code>
+ element in this case would be inappropriate.</p>
+
+ <pre><p>The word "ineffable" could have been used to describe the disaster
+resulting from the campaign's mismanagement.</p></pre>
+
+ </div>
+
+
+ <h4 id=the-dfn-element><span class=secno>4.6.7 </span>The <dfn><code>dfn</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>
@@ -15074,7 +14938,7 @@
- <h4 id=the-abbr-element><span class=secno>4.6.9 </span>The <dfn><code>abbr</code></dfn> element</h4>
+ <h4 id=the-abbr-element><span class=secno>4.6.8 </span>The <dfn><code>abbr</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -15188,7 +15052,7 @@
- <h4 id=the-time-element><span class=secno>4.6.10 </span>The <dfn><code>time</code></dfn> element</h4>
+ <h4 id=the-code-element><span class=secno>4.6.9 </span>The <dfn><code>code</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -15199,230 +15063,533 @@
<dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
- <dd><code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code></dd>
<dt>DOM interface:</dt>
- <dd>
-<pre class=idl>interface <dfn id=htmltimeelement>HTMLTimeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute DOMString <a href=#dom-time-datetime title=dom-time-datetime>dateTime</a>;
- readonly attribute <span>Date</span> <a href=#dom-time-date title=dom-time-date>date</a>;
- readonly attribute <span>Date</span> <a href=#dom-time-time title=dom-time-time>time</a>;
- readonly attribute <span>Date</span> <a href=#dom-time-timezone title=dom-time-timezone>timezone</a>;
-};</pre>
- </dd>
- </dl><p>The <code><a href=#the-time-element>time</a></code> element <a href=#represents>represents</a> either a
- time on a 24 hour clock, or a precise date in the proleptic
- Gregorian calendar, optionally with a time and a time zone. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-code-element>code</a></code> element <a href=#represents>represents</a> 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
+ recognize.</p>
- <p>This element is intended as a way to encode modern dates and
- times in a machine-readable way so that user agents can offer to add
- them to the user's calendar. For example, adding birthday reminders
- or scheduling events.</p>
+ <p>Although there is no formal way to indicate the language of
+ computer code being marked up, authors who wish to mark
+ <code><a href=#the-code-element>code</a></code> elements with the language used, e.g. so that
+ syntax highlighting scripts can use the right rules, may do so by
+ adding a class prefixed with "<code title="">language-</code>" to
+ the element.</p>
- <!-- it's also intended for restyling to local conventions
- (2000-12-31 vs 31-12-2000 vs 12-31-2000), but CSS doesn't support
- that yet. -->
+ <div class=example>
- <div class=note>
+ <p>The following example shows how the element can be used in a
+ paragraph to mark up element names and computer code, including
+ punctuation.</p>
- <p>The <code><a href=#the-time-element>time</a></code> element is not intended for encoding times
- for which a precise date or time cannot be established. For
- example, it would be inappropriate for encoding times like "one
- millisecond after the big bang", "the early part of the Jurassic
- period", or "a winter around 250 BCE".</p>
+ <pre><p>The <code>code</code> element represents a fragment of computer
+code.</p>
- <p>For dates before the introduction of the Gregorian calendar,
- authors are encouraged to not use the <code><a href=#the-time-element>time</a></code> element, or
- else to be very careful about converting dates and times from the
- period to the Gregorian calendar. This is complicated by the manner
- in which the Gregorian calendar was phased in, which occurred at
- different times in different countries, ranging from partway
- through the 16th century all the way to early in the 20th.</p>
+<p>When you call the <code>activate()</code> method on the
+<code>robotSnowman</code> object, the eyes glow.</p>
+<p>The example below uses the <code>begin</code> keyword to indicate
+the start of a statement block. It is paired with an <code>end</code>
+keyword, which is followed by the <code>.</code> punctuation character
+(full stop) to indicate the end of the program.</p></pre>
+
</div>
- <p>The <dfn id=attr-time-datetime title=attr-time-datetime><code>datetime</code></dfn>
- attribute, if present, must contain a <a href=#valid-date-or-time-string>valid date or time
- string</a> that identifies the date or time being specified.</p>
+ <div class=example>
- <p>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute
- is not present, then the date or time must be specified in the
- content of the element, such that the element's
- <code>textContent</code> is a <a href=#valid-date-or-time-string-in-content>valid date or time string in
- content</a>, and the date, if any, must be expressed using the
- Gregorian calendar.</p>
+ <p>The following example shows how a block of code could be marked
+ up using the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> elements.</p>
- <p>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute
- is present, then the element may be empty, in which case the user
- agent should convey the attribute's value to the user when rendering
- the element.</p>
+ <pre><pre><code class="language-pascal">var i: Integer;
+begin
+ i := 1;
+end.</code></pre></pre>
+ <p>A class is used in that example to indicate the language
+ used.</p>
+
+ </div>
+
+ <p class=note>See the <code><a href=#the-pre-element>pre</a></code> element for more details.</p>
+
+
+ <h4 id=the-var-element><span class=secno>4.6.10 </span>The <dfn><code>var</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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-var-element>var</a></code> element <a href=#represents>represents</a> 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.</p>
+
<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>
+flavors of ice cream to be available for purchase!</p></pre>
+ </div>
- <p>The <code><a href=#the-time-element>time</a></code> element can be used to encode dates, for
- example in Microformats. The following shows a hypothetical way of
- encoding an event using a variant on hCalendar that uses the
- <code><a href=#the-time-element>time</a></code> element:</p>
+ <p>For mathematics, in particular for anything beyond the simplest
+ of expressions, MathML is more appropriate. However, the
+ <code><a href=#the-var-element>var</a></code> element can still be used to refer to specific
+ variables that are then mentioned in MathML expressions.</p>
- <pre><div class="vevent">
- <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
- <span class="summary">Web 2.0 Conference</span>:
- <time class="dtstart" datetime="2007-10-05">October 5</time> -
- <time class="dtend" datetime="2007-10-20">19</time>,
- at the <span class="location">Argent Hotel, San Francisco, CA</span>
- </div></pre>
+ <div class=example>
+ <p>In this example, an equation is shown, with a legend that
+ references the variables in the equation. The expression itself is
+ marked up with MathML, but the variables are mentioned in the
+ figure's legend using <code><a href=#the-var-element>var</a></code>.</p>
+
+ <pre><figure>
+ <math>
+ <mi>a</mi>
+ <mo>=</mo>
+ <msqrt>
+ <msup><mi>b</mi><mn>2</mn></msup>
+ <mi>+</mi>
+ <msup><mi>c</mi><mn>2</mn></msup>
+ </msqrt>
+ </math>
+ <legend>
+ Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
+ a triangle with sides <var>b</var> and <var>c</var>
+ </legend>
+</figure></pre>
+
+
</div>
+
+ <h4 id=the-samp-element><span class=secno>4.6.11 </span>The <dfn><code>samp</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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-samp-element>samp</a></code> element <a href=#represents>represents</a> (sample)
+ output from a program or computing system.</p>
+
+ <p class=note>See the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-kbd-element>kbd</a></code>
+ elements for more details.</p>
+
<div class=example>
+ <p>This example shows the <code><a href=#the-samp-element>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>The <code><a href=#the-time-element>time</a></code> element is not necessary for encoding
- dates or times. In the following snippet, the time is encoded using
- <code><a href=#the-time-element>time</a></code>, so that it can be restyled (e.g. using XBL2) to
- match local conventions, while the year is not marked up at all,
- since marking it up would not be particularly useful.</p>
+ <p>This second example shows a block of sample output. Nested
+ <code><a href=#the-samp-element>samp</a></code> and <code><a href=#the-kbd-element>kbd</a></code> elements allow for the
+ styling of specific elements of the sample output using a
+ style sheet.</p>
- <pre><p>I usually have a snack at <time>16:00</time>.</p>
-<p>I've liked model trains since at least 1983.</p></pre>
+ <pre><pre><samp><span class="prompt">jdoe at mowmow:~$</span> <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
- <p>Using a styling technology that supports restyling times, the
- first paragraph from the above snippet could be rendered as follows:</p>
+<span class="prompt">jdoe at demo:~$</span> <span class="cursor">_</span></samp></pre></pre>
+ </div>
- <blockquote><p>I usually have a snack at 4pm.</blockquote>
- <p>Or it could be rendered as follows:</p>
+ <h4 id=the-kbd-element><span class=secno>4.6.12 </span>The <dfn><code>kbd</code></dfn> element</h4>
- <blockquote><p>I usually have a snack at 16h00.</blockquote>
+ <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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-kbd-element>kbd</a></code> element <a href=#represents>represents</a> user input
+ (typically keyboard input, although it may also be used to represent
+ other input, such as voice commands).</p>
+ <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside a
+ <code><a href=#the-samp-element>samp</a></code> element, it represents the input as it was echoed
+ by the system.</p>
+
+ <p>When the <code><a href=#the-kbd-element>kbd</a></code> element <em>contains</em> a
+ <code><a href=#the-samp-element>samp</a></code> element, it represents input based on system
+ output, for example invoking a menu item.</p>
+
+ <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside another
+ <code><a href=#the-kbd-element>kbd</a></code> element, it represents an actual key or other
+ single unit of input as appropriate for the input mechanism.</p>
+
+ <div class=example>
+ <p>Here the <code><a href=#the-kbd-element>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=#the-kbd-element>kbd</a></code> element marks up a block of
+ input, with the inner <code><a href=#the-kbd-element>kbd</a></code> elements representing each
+ individual step of the input, and the <code><a href=#the-samp-element>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>
+
+ <p>Such precision isn't necessary; the following is equally fine:</p>
+
+ <pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre>
+
</div>
- <div class=impl>
- <p>The <dfn id=dom-time-datetime title=dom-time-datetime><code>dateTime</code></dfn> DOM
- attribute must <a href=#reflect>reflect</a> the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> content attribute.</p>
+ <h4 id=the-sub-and-sup-elements><span class=secno>4.6.13 </span>The <dfn><code>sub</code></dfn> and <dfn><code>sup</code></dfn> elements</h4>
- <p>User agents, to obtain the <dfn id=concept-time-date title=concept-time-date>date</dfn>, <dfn id=concept-time-time title=concept-time-time>time</dfn>, and <dfn id=concept-time-timezone title=concept-time-timezone>time zone</dfn> represented by a
- <code><a href=#the-time-element>time</a></code> element, must follow these steps:</p>
+ <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 these elements may be used:</dt>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-sub-and-sup-elements>sup</a></code> element <a href=#represents>represents</a> a
+ superscript and the <code><a href=#the-sub-and-sup-elements>sub</a></code> element <a href=#represents>represents</a>
+ a subscript.</p>
- <ol><li>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code>
- attribute is present, then use the rules to <a href=#parse-a-date-or-time-string>parse a date or
- time string</a> with the flag <i>in attribute</i> from the value
- of that attribute, and let the result be <var title="">result</var>.</li>
+ <p>These elements must be used only 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=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> elements
+ to be used in the name of the LaTeX document preparation system. In
+ general, authors should use these elements only if the
+ <em>absence</em> of those elements would change the meaning of the
+ content.</p>
- <li>Otherwise, use the rules to <a href=#parse-a-date-or-time-string>parse a date or time
- string</a> with the flag <i>in content</i> from the element's
- <code>textContent</code>, and let the result be <var title="">result</var>.</li>
+ <p>In certain languages, superscripts are part of the typographical
+ conventions for some abbreviations.</p>
- <li>If <var title="">result</var> is empty (because the parsing
- failed), then the <a href=#concept-time-date title=concept-time-date>date</a> is
- unknown, the <a href=#concept-time-time title=concept-time-time>time</a> is unknown,
- and the <a href=#concept-time-timezone title=concept-time-timezone>time zone</a> is
- unknown.</li>
+ <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>
- <li>Otherwise: if <var title="">result</var> contains a date, then
- that is the <a href=#concept-time-date title=concept-time-date>date</a>; if <var title="">result</var> contains a time, then that is the <a href=#concept-time-time title=concept-time-time>time</a>; and if <var title="">result</var> contains a time zone, then the time zone is the
- element's <a href=#concept-time-timezone title=concept-time-timezone>time zone</a>. (A
- time zone can only be present if both a date and a time are also
- present.)</li>
+ <p>The <code><a href=#the-sub-and-sup-elements>sub</a></code> element can be used inside a
+ <code><a href=#the-var-element>var</a></code> element, for variables that have subscripts.</p>
- </ol></div>
+ <div class=example>
- <dl class=domintro><dt><var title="">time</var> . <code title=dom-time-date><a href=#dom-time-date>date</a></code></dt>
+ <p>Here, the <code><a href=#the-sub-and-sup-elements>sub</a></code> element is used to represents the
+ subscript that identifies the variable in a family of
+ variables:</p>
- <dd>
+ <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>Returns a <code>Date</code> object representing the date
- component of the element's value, at midnight in the UTC
- time zone.</p>
+ <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><a href=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> if
+ detailed mathematical markup is not desired. <a href=#refsMATHML>[MATHML]</a></p>
- <p>Returns null if there is no date.</p>
+ <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>
- </dd>
- <dt><var title="">time</var> . <code title=dom-time-time><a href=#dom-time-time>time</a></code></dt>
- <dd>
- <p>Returns a <code>Date</code> object representing the time
- component of the element's value, on 1970-01-01 in the UTC
- time zone.</p>
- <p>Returns null if there is no time.</p>
+ <h4 id=the-i-element><span class=secno>4.6.14 </span>The <dfn><code>i</code></dfn> element</h4>
- </dd>
+ <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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-i-element>i</a></code> element <a href=#represents>represents</a> 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>
- <dt><var title="">time</var> . <code title=dom-time-timezone><a href=#dom-time-timezone>timezone</a></code></dt>
+ <p>Terms in languages different from the main text should be
+ annotated with <code title=attr-lang><a href=#attr-lang>lang</a></code> attributes (or,
+ in XML, <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code>
+ attributes in the <span>XML namespace</span></a>).</p>
- <dd>
+ <div class=example>
+ <p>The examples below show uses of the <code><a href=#the-i-element>i</a></code> element:</p>
+ <pre><p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
+<p>The term <i>prose content</i> is 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=#the-i-element>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>Returns a <code>Date</code> object representing the time
- corresponding to 1970-01-01 00:00 UTC in the time zone given by the
- element's value.</p>
+ <p>Authors are encouraged to use the <code title=attr-class><a href=#classes>class</a></code> attribute on the <code><a href=#the-i-element>i</a></code>
+ element to identify why the element is being used, so that if the
+ style of a particular use (e.g. dream sequences as opposed to
+ taxonomic terms) is to be changed at a later date, the author
+ doesn't have to go through the entire document (or series of related
+ documents) annotating each use. Similarly, authors are encouraged to
+ consider whether other elements might be more applicable than the
+ <code><a href=#the-i-element>i</a></code> element, for instance the <code><a href=#the-em-element>em</a></code> element for
+ marking up stress emphasis, or the <code><a href=#the-dfn-element>dfn</a></code> element to mark
+ up the defining instance of a term.</p>
- <p>Returns null if there is no time zone.</p>
+ <p class=note>Style sheets can be used to format <code><a href=#the-i-element>i</a></code>
+ elements, just like any other element can be restyled. Thus, it is
+ not the case that content in <code><a href=#the-i-element>i</a></code> elements will
+ necessarily be italicized.</p>
- </dd>
- </dl><div>
+ <h4 id=the-b-element><span class=secno>4.6.15 </span>The <dfn><code>b</code></dfn> element</h4>
- <p>The <dfn id=dom-time-date title=dom-time-date><code>date</code></dfn> DOM
- attribute must return null if the <a href=#concept-time-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=#concept-time-date title=concept-time-date>date</a>.</p>
+ <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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-b-element>b</a></code> element <a href=#represents>represents</a> 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.</p>
- <p>The <dfn id=dom-time-time title=dom-time-time><code>time</code></dfn> DOM attribute
- must return null if the <a href=#concept-time-time title=concept-time-time>time</a> is
- unknown, and otherwise must return the time corresponding to the
- given <a href=#concept-time-time title=concept-time-time>time</a> of 1970-01-01, with
- the time zone UTC.</p>
+ <div class=example>
+ <p>The following example shows a use of the <code><a href=#the-b-element>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>
+ </div>
- <p>The <dfn id=dom-time-timezone title=dom-time-timezone><code>timezone</code></dfn> DOM
- attribute must return null if the <a href=#concept-time-timezone title=concept-time-timezone>time zone</a> is unknown, and otherwise
- must return the time corresponding to 1970-01-01 00:00 UTC in the
- given <a href=#concept-time-timezone title=concept-time-timezone>time zone</a>, with the
- time zone set to UTC (i.e. the time corresponding to 1970-01-01 at
- 00:00 UTC plus the offset corresponding to the time zone).</p>
+ <div class=example>
+ <p>In the following example, objects in a text adventure are
+ highlighted as being special by use of the <code><a href=#the-b-element>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>
+ <div class=example>
+ <p>Another case where the <code><a href=#the-b-element>b</a></code> element is appropriate is
+ in marking up the lede (or lead) sentence or paragraph. The
+ following example shows how a <a href=http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm>BBC
+ article about kittens adopting a rabbit as their own</a> could be
+ marked up:</p>
+ <pre><article>
+ <h2>Kittens 'adopted' by pet rabbit</h2>
+ <p><b>Six abandoned kittens have found an unexpected new
+ mother figure — a pet rabbit.</b></p>
+ <p>Veterinary nurse Melanie Humble took the three-week-old
+ kittens to her Aberdeen home.</p>
+<i>[...]</i></pre>
</div>
+ <p>The <code><a href=#the-b-element>b</a></code> element should be used as a last resort when
+ no other element is more appropriate. In particular, headings should
+ use the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, stress emphasis
+ should use the <code><a href=#the-em-element>em</a></code> element, importance should be denoted
+ with the <code><a href=#the-strong-element>strong</a></code> element, and text marked or highlighted
+ should use the <code><a href=#the-mark-element>mark</a></code> element.</p>
+
<div class=example>
+ <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=#the-strong-element>strong</a></code>, not <code><a href=#the-b-element>b</a></code>.</p>
+ </div>
- <p>In the following snippet:</p>
+ <p class=note>Style sheets can be used to format <code><a href=#the-b-element>b</a></code>
+ elements, just like any other element can be restyled. Thus, it is
+ not the case that content in <code><a href=#the-b-element>b</a></code> elements will
+ necessarily be boldened.</p>
- <pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
- <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-date><a href=#dom-time-date>date</a></code> attribute would have the value
- 1,158,969,600,000ms, and the <code title=dom-time-time><a href=#dom-time-time>time</a></code>
- and <code title=dom-time-timezone><a href=#dom-time-timezone>timezone</a></code> attributes would
- return null.</p>
+ <h4 id=the-mark-element><span class=secno>4.6.16 </span>The <dfn><code>mark</code></dfn> element</h4>
- <p>In the following snippet:</p>
+ <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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-mark-element>mark</a></code> element <a href=#represents>represents</a> a run of
+ text in one document marked or highlighted for reference purposes,
+ due to its relevance in another context. When used in a quotation or
+ other block of text referred to from the prose, it indicates a
+ highlight that was not originally present but which has been added
+ to bring the reader's attention to a part of the text that might not
+ have been considered important by the original author when the block
+ was originally written, but which is now under previously unexpected
+ scrutiny. When used in the main prose of a document, it indicates a
+ part of the document that has been highlighted due to its likely
+ relevance to the user's current activity.</p>
- <pre><p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p></pre>
+ <div class=example>
+ <p>This example shows how the <code><a href=#the-mark-element>mark</a></code> element can be used
+ to bring attention to a particular part of a quotation:</p>
+ <pre><p lang="en-US">Consider the following quote:</p>
+<blockquote lang="en-GB">
+ <p>Look around and you will find, no-one's really
+ <mark>colour</mark> blind.</p>
+</blockquote>
+<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
+the person writing this quote is clearly not American.</p></pre>
+ </div>
- <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-date><a href=#dom-time-date>date</a></code> attribute would have the value
- 1,159,056,000,000ms, the <code title=dom-time-time><a href=#dom-time-time>time</a></code>
- attribute would have the value 18,000,000ms, and the <code title=dom-time-timezone><a href=#dom-time-timezone>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>
+ <div class=example>
+ <p>Another example of the <code><a href=#the-mark-element>mark</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>
- <p>Finally, in the following snippet:</p>
+ <pre><p>I also have some <mark>kitten</mark>s who are visiting me
+these days. They're really cute. I think they like my garden! Maybe I
+should adopt a <mark>kitten</mark>.</p></pre>
- <pre><p>Many people get up at <time>08:00</time>.</p></pre>
+ </div>
- <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-date><a href=#dom-time-date>date</a></code> attribute would have the value null,
- the <code title=dom-time-time><a href=#dom-time-time>time</a></code> attribute would have the
- value 28,800,000ms, and the <code title=dom-time-timezone><a href=#dom-time-timezone>timezone</a></code> attribute would return
- null.</p>
+ <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 := <mark>1.1</mark>;
+end.</code></pre></pre>
+
</div>
+ <div class=example>
+ <p>This is another example showing the use of <code><a href=#the-mark-element>mark</a></code> to
+ highlight a part of quoted text that was originally not
+ emphasized. In this example, common typographic conventions have
+ led the author to explicitly style <code><a href=#the-mark-element>mark</a></code> elements in
+ quotes to render in italics.</p>
- <h4 id=the-progress-element><span class=secno>4.6.11 </span>The <dfn><code>progress</code></dfn> element</h4>
+ <pre><article>
+ <style>
+ blockquote mark, q mark {
+ font: inherit; font-style: italic;
+ text-decoration: none;
+ background: transparent; color: inherit;
+ }
+ .bubble em {
+ font: inherit; font-size: larger;
+ text-decoration: underline;
+ }
+ </style>
+ <h1>She knew</h1>
+ <p>Did you notice the subtle joke in the joke on panel 4?</p>
+ <blockquote>
+ <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
+ on some level I realized it was a known-plaintext attack.</mark> But I
+ couldn't admit it until I saw for myself.</p>
+ </blockquote>
+ <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
+ explains everything neatly.</p>
+</article></pre>
+ <p>Note, incidentally, the distinction between the <code><a href=#the-em-element>em</a></code>
+ element in this example, which is part of the original text being
+ quoted, and the <code><a href=#the-mark-element>mark</a></code> element, which is highlighting a
+ part for comment.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>The following example shows the difference between denoting the
+ <em>importance</em> of a span of text (<code><a href=#the-strong-element>strong</a></code>) as
+ opposed to denoting the <em>relevance</em> of a span of text
+ (<code><a href=#the-mark-element>mark</a></code>). It is an extract from a textbook, where the
+ extract has had the parts relevant to the exam highlighted. The
+ safety warnings, important though they may be, are apparently not
+ relevant to the exam.</p>
+
+ <pre><h3>Wormhole Physics Introduction</h3>
+
+<p><mark>A wormhole in normal conditions can be held open for a
+maximum of just under 39 minutes.</mark> Conditions that can increase
+the time include a powerful energy source coupled to one or both of
+the gates connecting the wormhole, and a large gravity well (such as a
+black hole).</p>
+
+<p><mark>Momentum is preserved across the wormhole. Electromagnetic
+radiation can travel in both directions through a wormhole,
+but matter cannot.</mark></p>
+
+<p>When a wormhole is created, a vortex normally forms.
+<strong>Warning: The vortex caused by the wormhole opening will
+annihilate anything in its path.</strong> Vortexes can be avoided when
+using sufficiently advanced dialing technology.</p>
+
+<p><mark>An obstruction in a gate will prevent it from accepting a
+wormhole connection.</mark></p></pre>
+
+ </div>
+
+
+ <h4 id=the-progress-element><span class=secno>4.6.17 </span>The <dfn><code>progress</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>
@@ -15602,7 +15769,7 @@
</div>
- <h4 id=the-meter-element><span class=secno>4.6.12 </span>The <dfn><code>meter</code></dfn> element</h4>
+ <h4 id=the-meter-element><span class=secno>4.6.18 </span>The <dfn><code>meter</code></dfn> element</h4>
<!-- Keep this after <progress> and NOT close to <time> -->
<dl class=element><dt>Categories</dt>
@@ -16035,10 +16202,8 @@
</div>
+ <h4 id=the-time-element><span class=secno>4.6.19 </span>The <dfn><code>time</code></dfn> element</h4>
-
- <h4 id=the-code-element><span class=secno>4.6.13 </span>The <dfn><code>code</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>
@@ -16048,463 +16213,229 @@
<dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code></dd>
<dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-code-element>code</a></code> element <a href=#represents>represents</a> 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
- recognize.</p>
+ <dd>
+<pre class=idl>interface <dfn id=htmltimeelement>HTMLTimeElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-time-datetime title=dom-time-datetime>dateTime</a>;
+ readonly attribute <span>Date</span> <a href=#dom-time-date title=dom-time-date>date</a>;
+ readonly attribute <span>Date</span> <a href=#dom-time-time title=dom-time-time>time</a>;
+ readonly attribute <span>Date</span> <a href=#dom-time-timezone title=dom-time-timezone>timezone</a>;
+};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-time-element>time</a></code> element <a href=#represents>represents</a> either a
+ time on a 24 hour clock, or a precise date in the proleptic
+ Gregorian calendar, optionally with a time and a time zone. <a href=#refsGREGORIAN>[GREGORIAN]</a></p>
- <p>Although there is no formal way to indicate the language of
- computer code being marked up, authors who wish to mark
- <code><a href=#the-code-element>code</a></code> elements with the language used, e.g. so that
- syntax highlighting scripts can use the right rules, may do so by
- adding a class prefixed with "<code title="">language-</code>" to
- the element.</p>
+ <p>This element is intended as a way to encode modern dates and
+ times in a machine-readable way so that user agents can offer to add
+ them to the user's calendar. For example, adding birthday reminders
+ or scheduling events.</p>
- <div class=example>
+ <!-- it's also intended for restyling to local conventions
+ (2000-12-31 vs 31-12-2000 vs 12-31-2000), but CSS doesn't support
+ that yet. -->
- <p>The following example shows how the element can be used in a
- paragraph to mark up element names and computer code, including
- punctuation.</p>
+ <div class=note>
- <pre><p>The <code>code</code> element represents a fragment of computer
-code.</p>
+ <p>The <code><a href=#the-time-element>time</a></code> element is not intended for encoding times
+ for which a precise date or time cannot be established. For
+ example, it would be inappropriate for encoding times like "one
+ millisecond after the big bang", "the early part of the Jurassic
+ period", or "a winter around 250 BCE".</p>
-<p>When you call the <code>activate()</code> method on the
-<code>robotSnowman</code> object, the eyes glow.</p>
+ <p>For dates before the introduction of the Gregorian calendar,
+ authors are encouraged to not use the <code><a href=#the-time-element>time</a></code> element, or
+ else to be very careful about converting dates and times from the
+ period to the Gregorian calendar. This is complicated by the manner
+ in which the Gregorian calendar was phased in, which occurred at
+ different times in different countries, ranging from partway
+ through the 16th century all the way to early in the 20th.</p>
-<p>The example below uses the <code>begin</code> keyword to indicate
-the start of a statement block. It is paired with an <code>end</code>
-keyword, which is followed by the <code>.</code> punctuation character
-(full stop) to indicate the end of the program.</p></pre>
-
</div>
- <div class=example>
+ <p>The <dfn id=attr-time-datetime title=attr-time-datetime><code>datetime</code></dfn>
+ attribute, if present, must contain a <a href=#valid-date-or-time-string>valid date or time
+ string</a> that identifies the date or time being specified.</p>
- <p>The following example shows how a block of code could be marked
- up using the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-code-element>code</a></code> elements.</p>
+ <p>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute
+ is not present, then the date or time must be specified in the
+ content of the element, such that the element's
+ <code>textContent</code> is a <a href=#valid-date-or-time-string-in-content>valid date or time string in
+ content</a>, and the date, if any, must be expressed using the
+ Gregorian calendar.</p>
- <pre><pre><code class="language-pascal">var i: Integer;
-begin
- i := 1;
-end.</code></pre></pre>
+ <p>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> attribute
+ is present, then the element may be empty, in which case the user
+ agent should convey the attribute's value to the user when rendering
+ the element.</p>
- <p>A class is used in that example to indicate the language
- used.</p>
+ <div class=example>
- </div>
+ <p>The <code><a href=#the-time-element>time</a></code> element can be used to encode dates, for
+ example in Microformats. The following shows a hypothetical way of
+ encoding an event using a variant on hCalendar that uses the
+ <code><a href=#the-time-element>time</a></code> element:</p>
- <p class=note>See the <code><a href=#the-pre-element>pre</a></code> element for more details.</p>
+ <pre><div class="vevent">
+ <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
+ <span class="summary">Web 2.0 Conference</span>:
+ <time class="dtstart" datetime="2007-10-05">October 5</time> -
+ <time class="dtend" datetime="2007-10-20">19</time>,
+ at the <span class="location">Argent Hotel, San Francisco, CA</span>
+ </div></pre>
-
- <h4 id=the-var-element><span class=secno>4.6.14 </span>The <dfn><code>var</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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-var-element>var</a></code> element <a href=#represents>represents</a> 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.</p>
-
- <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>
-flavors of ice cream to be available for purchase!</p></pre>
</div>
- <p>For mathematics, in particular for anything beyond the simplest
- of expressions, MathML is more appropriate. However, the
- <code><a href=#the-var-element>var</a></code> element can still be used to refer to specific
- variables that are then mentioned in MathML expressions.</p>
-
<div class=example>
- <p>In this example, an equation is shown, with a legend that
- references the variables in the equation. The expression itself is
- marked up with MathML, but the variables are mentioned in the
- figure's legend using <code><a href=#the-var-element>var</a></code>.</p>
+ <p>The <code><a href=#the-time-element>time</a></code> element is not necessary for encoding
+ dates or times. In the following snippet, the time is encoded using
+ <code><a href=#the-time-element>time</a></code>, so that it can be restyled (e.g. using XBL2) to
+ match local conventions, while the year is not marked up at all,
+ since marking it up would not be particularly useful.</p>
- <pre><figure>
- <math>
- <mi>a</mi>
- <mo>=</mo>
- <msqrt>
- <msup><mi>b</mi><mn>2</mn></msup>
- <mi>+</mi>
- <msup><mi>c</mi><mn>2</mn></msup>
- </msqrt>
- </math>
- <legend>
- Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
- a triangle with sides <var>b</var> and <var>c</var>
- </legend>
-</figure></pre>
+ <pre><p>I usually have a snack at <time>16:00</time>.</p>
+<p>I've liked model trains since at least 1983.</p></pre>
+ <p>Using a styling technology that supports restyling times, the
+ first paragraph from the above snippet could be rendered as follows:</p>
- </div>
+ <blockquote><p>I usually have a snack at 4pm.</blockquote>
+ <p>Or it could be rendered as follows:</p>
- <h4 id=the-samp-element><span class=secno>4.6.15 </span>The <dfn><code>samp</code></dfn> element</h4>
+ <blockquote><p>I usually have a snack at 16h00.</blockquote>
- <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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-samp-element>samp</a></code> element <a href=#represents>represents</a> (sample)
- output from a program or computing system.</p>
-
- <p class=note>See the <code><a href=#the-pre-element>pre</a></code> and <code><a href=#the-kbd-element>kbd</a></code>
- elements for more details.</p>
-
- <div class=example>
- <p>This example shows the <code><a href=#the-samp-element>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=#the-samp-element>samp</a></code> and <code><a href=#the-kbd-element>kbd</a></code> elements allow for the
- styling of specific elements of the sample output using a
- style sheet.</p>
-
- <pre><pre><samp><span class="prompt">jdoe at mowmow:~$</span> <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
-
-<span class="prompt">jdoe at demo:~$</span> <span class="cursor">_</span></samp></pre></pre>
</div>
+ <div class=impl>
- <h4 id=the-kbd-element><span class=secno>4.6.16 </span>The <dfn><code>kbd</code></dfn> element</h4>
+ <p>The <dfn id=dom-time-datetime title=dom-time-datetime><code>dateTime</code></dfn> DOM
+ attribute must <a href=#reflect>reflect</a> the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code> content attribute.</p>
- <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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-kbd-element>kbd</a></code> element <a href=#represents>represents</a> user input
- (typically keyboard input, although it may also be used to represent
- other input, such as voice commands).</p>
+ <p>User agents, to obtain the <dfn id=concept-time-date title=concept-time-date>date</dfn>, <dfn id=concept-time-time title=concept-time-time>time</dfn>, and <dfn id=concept-time-timezone title=concept-time-timezone>time zone</dfn> represented by a
+ <code><a href=#the-time-element>time</a></code> element, must follow these steps:</p>
- <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside a
- <code><a href=#the-samp-element>samp</a></code> element, it represents the input as it was echoed
- by the system.</p>
+ <ol><li>If the <code title=attr-time-datetime><a href=#attr-time-datetime>datetime</a></code>
+ attribute is present, then use the rules to <a href=#parse-a-date-or-time-string>parse a date or
+ time string</a> with the flag <i>in attribute</i> from the value
+ of that attribute, and let the result be <var title="">result</var>.</li>
- <p>When the <code><a href=#the-kbd-element>kbd</a></code> element <em>contains</em> a
- <code><a href=#the-samp-element>samp</a></code> element, it represents input based on system
- output, for example invoking a menu item.</p>
+ <li>Otherwise, use the rules to <a href=#parse-a-date-or-time-string>parse a date or time
+ string</a> with the flag <i>in content</i> from the element's
+ <code>textContent</code>, and let the result be <var title="">result</var>.</li>
- <p>When the <code><a href=#the-kbd-element>kbd</a></code> element is nested inside another
- <code><a href=#the-kbd-element>kbd</a></code> element, it represents an actual key or other
- single unit of input as appropriate for the input mechanism.</p>
+ <li>If <var title="">result</var> is empty (because the parsing
+ failed), then the <a href=#concept-time-date title=concept-time-date>date</a> is
+ unknown, the <a href=#concept-time-time title=concept-time-time>time</a> is unknown,
+ and the <a href=#concept-time-timezone title=concept-time-timezone>time zone</a> is
+ unknown.</li>
- <div class=example>
- <p>Here the <code><a href=#the-kbd-element>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>
+ <li>Otherwise: if <var title="">result</var> contains a date, then
+ that is the <a href=#concept-time-date title=concept-time-date>date</a>; if <var title="">result</var> contains a time, then that is the <a href=#concept-time-time title=concept-time-time>time</a>; and if <var title="">result</var> contains a time zone, then the time zone is the
+ element's <a href=#concept-time-timezone title=concept-time-timezone>time zone</a>. (A
+ time zone can only be present if both a date and a time are also
+ present.)</li>
- <p>In this second example, the user is told to pick a particular
- menu item. The outer <code><a href=#the-kbd-element>kbd</a></code> element marks up a block of
- input, with the inner <code><a href=#the-kbd-element>kbd</a></code> elements representing each
- individual step of the input, and the <code><a href=#the-samp-element>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>
+ </ol></div>
- <pre><p>To make George eat an apple, select
- <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
-</p></pre>
+ <dl class=domintro><dt><var title="">time</var> . <code title=dom-time-date><a href=#dom-time-date>date</a></code></dt>
- <p>Such precision isn't necessary; the following is equally fine:</p>
+ <dd>
- <pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre>
+ <p>Returns a <code>Date</code> object representing the date
+ component of the element's value, at midnight in the UTC
+ time zone.</p>
- </div>
+ <p>Returns null if there is no date.</p>
+ </dd>
- <h4 id=the-sub-and-sup-elements><span class=secno>4.6.17 </span>The <dfn><code>sub</code></dfn> and <dfn><code>sup</code></dfn> elements</h4>
+ <dt><var title="">time</var> . <code title=dom-time-time><a href=#dom-time-time>time</a></code></dt>
- <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 these elements may be used:</dt>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-sub-and-sup-elements>sup</a></code> element <a href=#represents>represents</a> a
- superscript and the <code><a href=#the-sub-and-sup-elements>sub</a></code> element <a href=#represents>represents</a>
- a subscript.</p>
+ <dd>
- <p>These elements must be used only 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=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> elements
- to be used in the name of the LaTeX document preparation system. In
- general, authors should use these elements only if the
- <em>absence</em> of those elements would change the meaning of the
- content.</p>
+ <p>Returns a <code>Date</code> object representing the time
+ component of the element's value, on 1970-01-01 in the UTC
+ time zone.</p>
- <p>In certain languages, superscripts are part of the typographical
- conventions for some abbreviations.</p>
+ <p>Returns null if there is no time.</p>
- <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>
+ </dd>
- <p>The <code><a href=#the-sub-and-sup-elements>sub</a></code> element can be used inside a
- <code><a href=#the-var-element>var</a></code> element, for variables that have subscripts.</p>
+ <dt><var title="">time</var> . <code title=dom-time-timezone><a href=#dom-time-timezone>timezone</a></code></dt>
- <div class=example>
+ <dd>
- <p>Here, the <code><a href=#the-sub-and-sup-elements>sub</a></code> element is used to represents the
- subscript that identifies the variable in a family of
- variables:</p>
+ <p>Returns a <code>Date</code> object representing the time
+ corresponding to 1970-01-01 00:00 UTC in the time zone given by the
+ element's value.</p>
- <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>Returns null if there is no time zone.</p>
- <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><a href=#the-sub-and-sup-elements>sub</a></code> and <code><a href=#the-sub-and-sup-elements>sup</a></code> if
- detailed mathematical markup is not desired. <a href=#refsMATHML>[MATHML]</a></p>
-
- <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-element><span class=secno>4.6.18 </span>The <dfn><code>span</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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>
- <pre class=idl>interface <dfn id=htmlspanelement>HTMLSpanElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
</dd>
- </dl><p>The <code><a href=#the-span-element>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=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, or <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>. It <a href=#represents>represents</a> its
- children.</p>
+ </dl><div>
- <h4 id=the-i-element><span class=secno>4.6.19 </span>The <dfn><code>i</code></dfn> element</h4>
+ <p>The <dfn id=dom-time-date title=dom-time-date><code>date</code></dfn> DOM
+ attribute must return null if the <a href=#concept-time-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=#concept-time-date title=concept-time-date>date</a>.</p>
- <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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-i-element>i</a></code> element <a href=#represents>represents</a> 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>
+ <p>The <dfn id=dom-time-time title=dom-time-time><code>time</code></dfn> DOM attribute
+ must return null if the <a href=#concept-time-time title=concept-time-time>time</a> is
+ unknown, and otherwise must return the time corresponding to the
+ given <a href=#concept-time-time title=concept-time-time>time</a> of 1970-01-01, with
+ the time zone UTC.</p>
- <p>Terms in languages different from the main text should be
- annotated with <code title=attr-lang><a href=#attr-lang>lang</a></code> attributes (or,
- in XML, <a href=#attr-xml-lang title=attr-xml-lang><code title="">lang</code>
- attributes in the <span>XML namespace</span></a>).</p>
+ <p>The <dfn id=dom-time-timezone title=dom-time-timezone><code>timezone</code></dfn> DOM
+ attribute must return null if the <a href=#concept-time-timezone title=concept-time-timezone>time zone</a> is unknown, and otherwise
+ must return the time corresponding to 1970-01-01 00:00 UTC in the
+ given <a href=#concept-time-timezone title=concept-time-timezone>time zone</a>, with the
+ time zone set to UTC (i.e. the time corresponding to 1970-01-01 at
+ 00:00 UTC plus the offset corresponding to the time zone).</p>
- <div class=example>
- <p>The examples below show uses of the <code><a href=#the-i-element>i</a></code> element:</p>
- <pre><p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
-<p>The term <i>prose content</i> is 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=#the-i-element>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>Authors are encouraged to use the <code title=attr-class><a href=#classes>class</a></code> attribute on the <code><a href=#the-i-element>i</a></code>
- element to identify why the element is being used, so that if the
- style of a particular use (e.g. dream sequences as opposed to
- taxonomic terms) is to be changed at a later date, the author
- doesn't have to go through the entire document (or series of related
- documents) annotating each use. Similarly, authors are encouraged to
- consider whether other elements might be more applicable than the
- <code><a href=#the-i-element>i</a></code> element, for instance the <code><a href=#the-em-element>em</a></code> element for
- marking up stress emphasis, or the <code><a href=#the-dfn-element>dfn</a></code> element to mark
- up the defining instance of a term.</p>
-
- <p class=note>Style sheets can be used to format <code><a href=#the-i-element>i</a></code>
- elements, just like any other element can be restyled. Thus, it is
- not the case that content in <code><a href=#the-i-element>i</a></code> elements will
- necessarily be italicized.</p>
-
-
- <h4 id=the-b-element><span class=secno>4.6.20 </span>The <dfn><code>b</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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-b-element>b</a></code> element <a href=#represents>represents</a> 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.</p>
-
<div class=example>
- <p>The following example shows a use of the <code><a href=#the-b-element>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>
- </div>
- <div class=example>
- <p>In the following example, objects in a text adventure are
- highlighted as being special by use of the <code><a href=#the-b-element>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>In the following snippet:</p>
- <div class=example>
- <p>Another case where the <code><a href=#the-b-element>b</a></code> element is appropriate is
- in marking up the lede (or lead) sentence or paragraph. The
- following example shows how a <a href=http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm>BBC
- article about kittens adopting a rabbit as their own</a> could be
- marked up:</p>
- <pre><article>
- <h2>Kittens 'adopted' by pet rabbit</h2>
- <p><b>Six abandoned kittens have found an unexpected new
- mother figure — a pet rabbit.</b></p>
- <p>Veterinary nurse Melanie Humble took the three-week-old
- kittens to her Aberdeen home.</p>
-<i>[...]</i></pre>
- </div>
+ <pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
- <p>The <code><a href=#the-b-element>b</a></code> element should be used as a last resort when
- no other element is more appropriate. In particular, headings should
- use the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, stress emphasis
- should use the <code><a href=#the-em-element>em</a></code> element, importance should be denoted
- with the <code><a href=#the-strong-element>strong</a></code> element, and text marked or highlighted
- should use the <code><a href=#the-mark-element>mark</a></code> element.</p>
+ <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-date><a href=#dom-time-date>date</a></code> attribute would have the value
+ 1,158,969,600,000ms, and the <code title=dom-time-time><a href=#dom-time-time>time</a></code>
+ and <code title=dom-time-timezone><a href=#dom-time-timezone>timezone</a></code> attributes would
+ return null.</p>
- <div class=example>
- <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=#the-strong-element>strong</a></code>, not <code><a href=#the-b-element>b</a></code>.</p>
- </div>
- <p class=note>Style sheets can be used to format <code><a href=#the-b-element>b</a></code>
- elements, just like any other element can be restyled. Thus, it is
- not the case that content in <code><a href=#the-b-element>b</a></code> elements will
- necessarily be boldened.</p>
+ <p>In the following snippet:</p>
+ <pre><p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p></pre>
- <h4 id=the-bdo-element><span class=secno>4.6.21 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-date><a href=#dom-time-date>date</a></code> attribute would have the value
+ 1,159,056,000,000ms, the <code title=dom-time-time><a href=#dom-time-time>time</a></code>
+ attribute would have the value 18,000,000ms, and the <code title=dom-time-timezone><a href=#dom-time-timezone>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>
- <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>
- <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
- <dt>Content attributes:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dd>Also, the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> global attribute has special semantics on this element.</dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><p>The <code><a href=#the-bdo-element>bdo</a></code> element <a href=#represents>represents</a> explicit
- text directionality formatting control for its children. It allows
- authors to override the Unicode bidi algorithm by explicitly
- specifying a direction override. <a href=#refsBIDI>[BIDI]</a></p>
- <p>Authors must specify the <code title=attr-dir><a href=#the-dir-attribute>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>
+ <p>Finally, in the following snippet:</p>
- <div class=impl>
+ <pre><p>Many people get up at <time>08:00</time>.</p></pre>
- <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>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>
+ <p>...the <code><a href=#the-time-element>time</a></code> element's <code title=dom-time-date><a href=#dom-time-date>date</a></code> attribute would have the value null,
+ the <code title=dom-time-time><a href=#dom-time-time>time</a></code> attribute would have the
+ value 28,800,000ms, and the <code title=dom-time-timezone><a href=#dom-time-timezone>timezone</a></code> attribute would return
+ null.</p>
- <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>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>
-
- <p>The requirements on handling the <code><a href=#the-bdo-element>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 'unicode-bidi' property. <a href=#refsCSS>[CSS]</a></p>
-
</div>
- <h4 id=the-ruby-element><span class=secno>4.6.22 </span>The <dfn><code>ruby</code></dfn> element</h4>
+ <h4 id=the-ruby-element><span class=secno>4.6.20 </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>
@@ -16594,7 +16525,7 @@
<!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
- <h4 id=the-rt-element><span class=secno>4.6.23 </span>The <dfn><code>rt</code></dfn> element</h4>
+ <h4 id=the-rt-element><span class=secno>4.6.21 </span>The <dfn><code>rt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -16624,7 +16555,7 @@
</div>
- <h4 id=the-rp-element><span class=secno>4.6.24 </span>The <dfn><code>rp</code></dfn> element</h4>
+ <h4 id=the-rp-element><span class=secno>4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -16673,6 +16604,75 @@
</div>
+ <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd>Also, the <code title=attr-dir><a href=#the-dir-attribute>dir</a></code> global attribute has special semantics on this element.</dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><p>The <code><a href=#the-bdo-element>bdo</a></code> element <a href=#represents>represents</a> explicit
+ text directionality formatting control for its children. It allows
+ authors to override the Unicode bidi algorithm by explicitly
+ specifying a direction override. <a href=#refsBIDI>[BIDI]</a></p>
+
+ <p>Authors must specify the <code title=attr-dir><a href=#the-dir-attribute>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>
+
+ <div class=impl>
+
+ <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>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>
+
+ <p>If the element has the <code title=attr-dir><a href=#the-dir-attribute>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>
+
+ <p>The requirements on handling the <code><a href=#the-bdo-element>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 'unicode-bidi' property. <a href=#refsCSS>[CSS]</a></p>
+
+ </div>
+
+ <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</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>
+ <dd>Where <a href=#phrasing-content-0>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content-0>Phrasing content</a>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+ <pre class=idl>interface <dfn id=htmlspanelement>HTMLSpanElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-span-element>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=#classes>class</a></code>, <code title=attr-lang><a href=#attr-lang>lang</a></code>, or <code title=attr-dir><a href=#the-dir-attribute>dir</a></code>. It <a href=#represents>represents</a> its
+ children.</p>
+
+
+
<h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -16708,6 +16708,10 @@
<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-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-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>
@@ -16724,10 +16728,6 @@
<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>
Modified: source
===================================================================
--- source 2009-08-17 02:14:55 UTC (rev 3640)
+++ source 2009-08-17 02:23:49 UTC (rev 3641)
@@ -15394,240 +15394,6 @@
</div>
-
- <h4>The <dfn><code>q</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dd><code title="attr-q-cite">cite</code></dd>
- <dt>DOM interface:</dt>
- <dd>
- The <code>q</code> element uses the <code>HTMLQuoteElement</code> interface.
- </dd>
- </dl>
-
- <p>The <code>q</code> element <span>represents</span> some <span
- title="phrasing content">phrasing content</span> quoted from another
- source.</p>
-
- <p>Quotation punctuation (such as quotation marks) must not appear
- immediately before, after, or inside <code>q</code> elements; they
- will be inserted into the rendering by the user agent.</p>
-
- <p>Content inside a <code>q</code> element must be quoted from
- another source, whose address, if it has one, should be cited in the
- <dfn title="attr-q-cite"><code>cite</code></dfn> attribute. The
- source may be fictional, as when quoting characters in a novel or
- screenplay.</p>
-
- <div class="impl">
-
- <p>If the <code title="attr-q-cite">cite</code> attribute is
- present, it must be a <span>valid URL</span>. To obtain the
- corresponding citation link, the value of the attribute must be
- <span title="resolve a url">resolved</span> relative to the
- element. User agents should allow users to follow such citation
- links.</p>
-
- </div>
-
- <p>The <code>q</code> element must not be used in place of quotation
- marks that do not represent quotes; for example, it is inappropriate
- to use the <code>q</code> element for marking up sarcastic
- statements.</p>
-
- <p>The use of <code>q</code> elements to mark up quotations is
- entirely optional; using explicit quotation punctuation without
- <code>q</code> elements is just as correct.</p>
-
- <div class="example">
-
- <p>Here is a simple example of the use of the <code>q</code>
- element:</p>
-
- <pre><p>The man said <q>Things that are impossible just take
-longer</q>. I disagreed with him.</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>Here is an example with both an explicit citation link in the
- <code>q</code> element, and an explicit citation outside:</p>
-
- <pre><p>The W3C page <cite>About W3C</cite> says the W3C's
-mission is <q cite="http://www.w3.org/Consortium/">To lead the
-World Wide Web to its full potential by developing protocols and
-guidelines that ensure long-term growth for the Web</q>. I
-disagree with this mission.</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>In the following example, the quotation itself contains a
- quotation:</p>
-
- <pre><p>In <cite>Example One</cite>, he writes <q>The man
-said <q>Things that are impossible just take longer</q>. I
-disagreed with him</q>. Well, I disagree even more!</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>In the following example, quotation marks are used instead of
- the <code>q</code> element:</p>
-
- <pre><p>His best argument was ❝I disagree❞, which
-I thought was laughable.</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>In the following example, there is no quote — the
- quotation marks are used to name a word. Use of the <code>q</code>
- element in this case would be inappropriate.</p>
-
- <pre><p>The word "ineffable" could have been used to describe the disaster
-resulting from the campaign's mismanagement.</p></pre>
-
- </div>
-
-
- <h4>The <dfn><code>cite</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
-
- <p>The <code>cite</code> element <span>represents</span> the title
- of a work (e.g.
- a book,
- a paper,
- an essay,
- a poem,
- a score,
- a song,
- a script,
- a film,
- a TV show,
- a game,
- a sculpture,
- a painting,
- a theatre production,
- a play,
- an opera,
- a musical,
- an exhibition,
- a legal case report,
- etc). This can be a work that is being quoted or
- referenced in detail (i.e. a citation), or it can just be a work
- that is mentioned in passing.</p>
-
- <p>A person's name is not the title of a work — even if people
- call that person a piece of work — and the element must
- therefore not be used to mark up people's names. (In some cases, the
- <code>b</code> element might be appropriate for names; e.g. in a
- gossip article where the names of famous people are keywords
- rendered with a different style to draw attention to them. In other
- cases, if an element is <em>really</em> needed, the
- <code>span</code> element can be used.)</p>
-
- <p>A ship is similarly not a work, and the element must not be used
- to mark up ship names (the <code>i</code> element can be used for
- that purpose).</p>
-
- <div class="example">
-
- <p>This next example shows a typical use of the <code>cite</code>
- element:</p>
-
- <pre><p>My favorite book is <cite>The Reality Dysfunction</cite> by
-Peter F. Hamilton. My favorite comic is <cite>Pearls Before
-Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
-Samba</cite> by the Cannonball Adderley Sextet.</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>This is correct usage:</p>
-
- <pre><p>According to the Wikipedia article <cite>HTML</cite>, as it
-stood in mid-February 2008, leaving attribute values unquoted is
-unsafe. This is obviously an over-simplification.</p></pre>
-
- <p>The following, however, is incorrect usage, as the
- <code>cite</code> element here is containing far more than the
- title of the work:</p>
-
- <pre class="bad"><!-- do not copy this example, it is an example of bad usage! -->
-<p>According to <cite>the Wikipedia article on HTML</cite>, as it
-stood in mid-February 2008, leaving attribute values unquoted is
-unsafe. This is obviously an over-simplification.</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>The <code>cite</code> element is obviously a key part of any
- citation in a bibliography, but it is only used to mark the
- title:</p>
-
- <pre><p><cite>Universal Declaration of Human Rights</cite>, United Nations,
-December 1948. Adopted by General Assembly resolution 217 A (III).</p></pre>
-
- </div>
-
- <p class="note">A <em>citation</em> is not a <em>quote</em> (for
- which the <code>q</code> element is appropriate).</p>
-
- <div class="example">
-
- <p>This is incorrect usage, because <code>cite</code> is not for
- quotes:</p>
-
- <pre><p><cite>This is wrong!</cite>, said Ian.</p></pre>
-
- <p>This is also incorrect usage, because a person is not a
- work:</p>
-
- <pre><p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p></pre>
-
- <p>The correct usage does not use a <code>cite</code> element:</p>
-
- <pre><p><q>This is correct</q>, said Ian.</p></pre>
-
- <p>As mentioned above, the <code>b</code> element might be relevant
- for marking names as being keywords in certain kinds of
- documents:</p>
-
- <pre><p>And then <b>Ian</b> said <q>this might be right, in a
-gossip column, maybe!</q>.</p></pre>
-
- </div>
-
-
<h4>The <dfn><code>em</code></dfn> element</h4>
<dl class="element">
@@ -15847,7 +15613,7 @@
</div>
- <h4>The <dfn><code>mark</code></dfn> element</h4>
+ <h4>The <dfn><code>cite</code></dfn> element</h4>
<dl class="element">
<dt>Categories</dt>
@@ -15863,129 +15629,224 @@
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>mark</code> element <span>represents</span> a run of
- text in one document marked or highlighted for reference purposes,
- due to its relevance in another context. When used in a quotation or
- other block of text referred to from the prose, it indicates a
- highlight that was not originally present but which has been added
- to bring the reader's attention to a part of the text that might not
- have been considered important by the original author when the block
- was originally written, but which is now under previously unexpected
- scrutiny. When used in the main prose of a document, it indicates a
- part of the document that has been highlighted due to its likely
- relevance to the user's current activity.</p>
+ <p>The <code>cite</code> element <span>represents</span> the title
+ of a work (e.g.
+ a book,
+ a paper,
+ an essay,
+ a poem,
+ a score,
+ a song,
+ a script,
+ a film,
+ a TV show,
+ a game,
+ a sculpture,
+ a painting,
+ a theatre production,
+ a play,
+ an opera,
+ a musical,
+ an exhibition,
+ a legal case report,
+ etc). This can be a work that is being quoted or
+ referenced in detail (i.e. a citation), or it can just be a work
+ that is mentioned in passing.</p>
+ <p>A person's name is not the title of a work — even if people
+ call that person a piece of work — and the element must
+ therefore not be used to mark up people's names. (In some cases, the
+ <code>b</code> element might be appropriate for names; e.g. in a
+ gossip article where the names of famous people are keywords
+ rendered with a different style to draw attention to them. In other
+ cases, if an element is <em>really</em> needed, the
+ <code>span</code> element can be used.)</p>
+
+ <p>A ship is similarly not a work, and the element must not be used
+ to mark up ship names (the <code>i</code> element can be used for
+ that purpose).</p>
+
<div class="example">
- <p>This example shows how the <code>mark</code> element can be used
- to bring attention to a particular part of a quotation:</p>
- <pre><p lang="en-US">Consider the following quote:</p>
-<blockquote lang="en-GB">
- <p>Look around and you will find, no-one's really
- <mark>colour</mark> blind.</p>
-</blockquote>
-<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
-the person writing this quote is clearly not American.</p></pre>
+
+ <p>This next example shows a typical use of the <code>cite</code>
+ element:</p>
+
+ <pre><p>My favorite book is <cite>The Reality Dysfunction</cite> by
+Peter F. Hamilton. My favorite comic is <cite>Pearls Before
+Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
+Samba</cite> by the Cannonball Adderley Sextet.</p></pre>
+
</div>
<div class="example">
- <p>Another example of the <code>mark</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>
+ <p>This is correct usage:</p>
- <pre><p>I also have some <mark>kitten</mark>s who are visiting me
-these days. They're really cute. I think they like my garden! Maybe I
-should adopt a <mark>kitten</mark>.</p></pre>
+ <pre><p>According to the Wikipedia article <cite>HTML</cite>, as it
+stood in mid-February 2008, leaving attribute values unquoted is
+unsafe. This is obviously an over-simplification.</p></pre>
+ <p>The following, however, is incorrect usage, as the
+ <code>cite</code> element here is containing far more than the
+ title of the work:</p>
+
+ <pre class="bad"><!-- do not copy this example, it is an example of bad usage! -->
+<p>According to <cite>the Wikipedia article on HTML</cite>, as it
+stood in mid-February 2008, leaving attribute values unquoted is
+unsafe. This is obviously an over-simplification.</p></pre>
+
</div>
<div class="example">
- <p>In the following snippet, a paragraph of text refers to a
- specific part of a code fragment.</p>
+ <p>The <code>cite</code> element is obviously a key part of any
+ citation in a bibliography, but it is only used to mark the
+ title:</p>
- <pre><p>The highlighted part below is where the error lies:</p>
-<pre><code>var i: Integer;
-begin
- i := <mark>1.1</mark>;
-end.</code></pre></pre>
+ <pre><p><cite>Universal Declaration of Human Rights</cite>, United Nations,
+December 1948. Adopted by General Assembly resolution 217 A (III).</p></pre>
</div>
+ <p class="note">A <em>citation</em> is not a <em>quote</em> (for
+ which the <code>q</code> element is appropriate).</p>
+
<div class="example">
- <p>This is another example showing the use of <code>mark</code> to
- highlight a part of quoted text that was originally not
- emphasized. In this example, common typographic conventions have
- led the author to explicitly style <code>mark</code> elements in
- quotes to render in italics.</p>
+ <p>This is incorrect usage, because <code>cite</code> is not for
+ quotes:</p>
- <pre><article>
- <style>
- blockquote mark, q mark {
- font: inherit; font-style: italic;
- text-decoration: none;
- background: transparent; color: inherit;
- }
- .bubble em {
- font: inherit; font-size: larger;
- text-decoration: underline;
- }
- </style>
- <h1>She knew</h1>
- <p>Did you notice the subtle joke in the joke on panel 4?</p>
- <blockquote>
- <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
- on some level I realized it was a known-plaintext attack.</mark> But I
- couldn't admit it until I saw for myself.</p>
- </blockquote>
- <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
- explains everything neatly.</p>
-</article></pre>
+ <pre><p><cite>This is wrong!</cite>, said Ian.</p></pre>
- <p>Note, incidentally, the distinction between the <code>em</code>
- element in this example, which is part of the original text being
- quoted, and the <code>mark</code> element, which is highlighting a
- part for comment.</p>
+ <p>This is also incorrect usage, because a person is not a
+ work:</p>
+ <pre><p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p></pre>
+
+ <p>The correct usage does not use a <code>cite</code> element:</p>
+
+ <pre><p><q>This is correct</q>, said Ian.</p></pre>
+
+ <p>As mentioned above, the <code>b</code> element might be relevant
+ for marking names as being keywords in certain kinds of
+ documents:</p>
+
+ <pre><p>And then <b>Ian</b> said <q>this might be right, in a
+gossip column, maybe!</q>.</p></pre>
+
</div>
+
+
+ <h4>The <dfn><code>q</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dd><code title="attr-q-cite">cite</code></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+ The <code>q</code> element uses the <code>HTMLQuoteElement</code> interface.
+ </dd>
+ </dl>
+
+ <p>The <code>q</code> element <span>represents</span> some <span
+ title="phrasing content">phrasing content</span> quoted from another
+ source.</p>
+
+ <p>Quotation punctuation (such as quotation marks) must not appear
+ immediately before, after, or inside <code>q</code> elements; they
+ will be inserted into the rendering by the user agent.</p>
+
+ <p>Content inside a <code>q</code> element must be quoted from
+ another source, whose address, if it has one, should be cited in the
+ <dfn title="attr-q-cite"><code>cite</code></dfn> attribute. The
+ source may be fictional, as when quoting characters in a novel or
+ screenplay.</p>
+
+ <div class="impl">
+
+ <p>If the <code title="attr-q-cite">cite</code> attribute is
+ present, it must be a <span>valid URL</span>. To obtain the
+ corresponding citation link, the value of the attribute must be
+ <span title="resolve a url">resolved</span> relative to the
+ element. User agents should allow users to follow such citation
+ links.</p>
+
+ </div>
+
+ <p>The <code>q</code> element must not be used in place of quotation
+ marks that do not represent quotes; for example, it is inappropriate
+ to use the <code>q</code> element for marking up sarcastic
+ statements.</p>
+
+ <p>The use of <code>q</code> elements to mark up quotations is
+ entirely optional; using explicit quotation punctuation without
+ <code>q</code> elements is just as correct.</p>
+
<div class="example">
- <p>The following example shows the difference between denoting the
- <em>importance</em> of a span of text (<code>strong</code>) as
- opposed to denoting the <em>relevance</em> of a span of text
- (<code>mark</code>). It is an extract from a textbook, where the
- extract has had the parts relevant to the exam highlighted. The
- safety warnings, important though they may be, are apparently not
- relevant to the exam.</p>
+ <p>Here is a simple example of the use of the <code>q</code>
+ element:</p>
- <pre><h3>Wormhole Physics Introduction</h3>
+ <pre><p>The man said <q>Things that are impossible just take
+longer</q>. I disagreed with him.</p></pre>
-<p><mark>A wormhole in normal conditions can be held open for a
-maximum of just under 39 minutes.</mark> Conditions that can increase
-the time include a powerful energy source coupled to one or both of
-the gates connecting the wormhole, and a large gravity well (such as a
-black hole).</p>
+ </div>
-<p><mark>Momentum is preserved across the wormhole. Electromagnetic
-radiation can travel in both directions through a wormhole,
-but matter cannot.</mark></p>
+ <div class="example">
-<p>When a wormhole is created, a vortex normally forms.
-<strong>Warning: The vortex caused by the wormhole opening will
-annihilate anything in its path.</strong> Vortexes can be avoided when
-using sufficiently advanced dialing technology.</p>
+ <p>Here is an example with both an explicit citation link in the
+ <code>q</code> element, and an explicit citation outside:</p>
-<p><mark>An obstruction in a gate will prevent it from accepting a
-wormhole connection.</mark></p></pre>
+ <pre><p>The W3C page <cite>About W3C</cite> says the W3C's
+mission is <q cite="http://www.w3.org/Consortium/">To lead the
+World Wide Web to its full potential by developing protocols and
+guidelines that ensure long-term growth for the Web</q>. I
+disagree with this mission.</p></pre>
</div>
+ <div class="example">
+ <p>In the following example, the quotation itself contains a
+ quotation:</p>
+ <pre><p>In <cite>Example One</cite>, he writes <q>The man
+said <q>Things that are impossible just take longer</q>. I
+disagreed with him</q>. Well, I disagree even more!</p></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>In the following example, quotation marks are used instead of
+ the <code>q</code> element:</p>
+
+ <pre><p>His best argument was ❝I disagree❞, which
+I thought was laughable.</p></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>In the following example, there is no quote — the
+ quotation marks are used to name a word. Use of the <code>q</code>
+ element in this case would be inappropriate.</p>
+
+ <pre><p>The word "ineffable" could have been used to describe the disaster
+resulting from the campaign's mismanagement.</p></pre>
+
+ </div>
+
+
<h4>The <dfn><code>dfn</code></dfn> element</h4>
<dl class="element">
@@ -16184,7 +16045,7 @@
- <h4>The <dfn><code>time</code></dfn> element</h4>
+ <h4>The <dfn><code>code</code></dfn> element</h4>
<dl class="element">
<dt>Categories</dt>
@@ -16196,256 +16057,557 @@
<dd><span>Phrasing content</span>.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
- <dd><code title="attr-time-datetime">datetime</code></dd>
<dt>DOM interface:</dt>
- <dd>
-<pre class="idl">interface <dfn>HTMLTimeElement</dfn> : <span>HTMLElement</span> {
- attribute DOMString <span title="dom-time-datetime">dateTime</span>;
- readonly attribute <span>Date</span> <span title="dom-time-date">date</span>;
- readonly attribute <span>Date</span> <span title="dom-time-time">time</span>;
- readonly attribute <span>Date</span> <span title="dom-time-timezone">timezone</span>;
-};</pre>
- </dd>
+ <dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>time</code> element <span>represents</span> either a
- time on a 24 hour clock, or a precise date in the proleptic
- Gregorian calendar, optionally with a time and a time zone. <a
- href="#refsGREGORIAN">[GREGORIAN]</a></p>
+ <p>The <code>code</code> element <span>represents</span> 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
+ recognize.</p>
- <p>This element is intended as a way to encode modern dates and
- times in a machine-readable way so that user agents can offer to add
- them to the user's calendar. For example, adding birthday reminders
- or scheduling events.</p>
+ <p>Although there is no formal way to indicate the language of
+ computer code being marked up, authors who wish to mark
+ <code>code</code> elements with the language used, e.g. so that
+ syntax highlighting scripts can use the right rules, may do so by
+ adding a class prefixed with "<code title="">language-</code>" to
+ the element.</p>
- <!-- it's also intended for restyling to local conventions
- (2000-12-31 vs 31-12-2000 vs 12-31-2000), but CSS doesn't support
- that yet. -->
+ <div class="example">
- <div class="note">
+ <p>The following example shows how the element can be used in a
+ paragraph to mark up element names and computer code, including
+ punctuation.</p>
- <p>The <code>time</code> element is not intended for encoding times
- for which a precise date or time cannot be established. For
- example, it would be inappropriate for encoding times like "one
- millisecond after the big bang", "the early part of the Jurassic
- period", or "a winter around 250 BCE".</p>
+ <pre><p>The <code>code</code> element represents a fragment of computer
+code.</p>
- <p>For dates before the introduction of the Gregorian calendar,
- authors are encouraged to not use the <code>time</code> element, or
- else to be very careful about converting dates and times from the
- period to the Gregorian calendar. This is complicated by the manner
- in which the Gregorian calendar was phased in, which occurred at
- different times in different countries, ranging from partway
- through the 16th century all the way to early in the 20th.</p>
+<p>When you call the <code>activate()</code> method on the
+<code>robotSnowman</code> object, the eyes glow.</p>
+<p>The example below uses the <code>begin</code> keyword to indicate
+the start of a statement block. It is paired with an <code>end</code>
+keyword, which is followed by the <code>.</code> punctuation character
+(full stop) to indicate the end of the program.</p></pre>
+
</div>
- <p>The <dfn title="attr-time-datetime"><code>datetime</code></dfn>
- attribute, if present, must contain a <span>valid date or time
- string</span> that identifies the date or time being specified.</p>
+ <div class="example">
- <p>If the <code title="attr-time-datetime">datetime</code> attribute
- is not present, then the date or time must be specified in the
- content of the element, such that the element's
- <code>textContent</code> is a <span>valid date or time string in
- content</span>, and the date, if any, must be expressed using the
- Gregorian calendar.</p>
+ <p>The following example shows how a block of code could be marked
+ up using the <code>pre</code> and <code>code</code> elements.</p>
- <p>If the <code title="attr-time-datetime">datetime</code> attribute
- is present, then the element may be empty, in which case the user
- agent should convey the attribute's value to the user when rendering
- the element.</p>
+ <pre><pre><code class="language-pascal">var i: Integer;
+begin
+ i := 1;
+end.</code></pre></pre>
+ <p>A class is used in that example to indicate the language
+ used.</p>
+
+ </div>
+
+ <p class="note">See the <code>pre</code> element for more details.</p>
+
+
+ <h4>The <dfn><code>var</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>var</code> element <span>represents</span> 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.</p>
+
<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>
+flavors of ice cream to be available for purchase!</p></pre>
+ </div>
- <p>The <code>time</code> element can be used to encode dates, for
- example in Microformats. The following shows a hypothetical way of
- encoding an event using a variant on hCalendar that uses the
- <code>time</code> element:</p>
+ <p>For mathematics, in particular for anything beyond the simplest
+ of expressions, MathML is more appropriate. However, the
+ <code>var</code> element can still be used to refer to specific
+ variables that are then mentioned in MathML expressions.</p>
- <pre><div class="vevent">
- <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
- <span class="summary">Web 2.0 Conference</span>:
- <time class="dtstart" datetime="2007-10-05">October 5</time> -
- <time class="dtend" datetime="2007-10-20">19</time>,
- at the <span class="location">Argent Hotel, San Francisco, CA</span>
- </div></pre>
+ <div class="example">
+ <p>In this example, an equation is shown, with a legend that
+ references the variables in the equation. The expression itself is
+ marked up with MathML, but the variables are mentioned in the
+ figure's legend using <code>var</code>.</p>
+
+ <pre><figure>
+ <math>
+ <mi>a</mi>
+ <mo>=</mo>
+ <msqrt>
+ <msup><mi>b</mi><mn>2</mn></msup>
+ <mi>+</mi>
+ <msup><mi>c</mi><mn>2</mn></msup>
+ </msqrt>
+ </math>
+ <legend>
+ Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
+ a triangle with sides <var>b</var> and <var>c</var>
+ </legend>
+</figure></pre>
+
+
</div>
+
+ <h4>The <dfn><code>samp</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>samp</code> element <span>represents</span> (sample)
+ output from a program or computing system.</p>
+
+ <p class="note">See the <code>pre</code> and <code>kbd</code>
+ elements for more details.</p>
+
<div class="example">
+ <p>This example shows the <code>samp</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>The <code>time</code> element is not necessary for encoding
- dates or times. In the following snippet, the time is encoded using
- <code>time</code>, so that it can be restyled (e.g. using XBL2) to
- match local conventions, while the year is not marked up at all,
- since marking it up would not be particularly useful.</p>
+ <p>This second example shows a block of sample output. Nested
+ <code>samp</code> and <code>kbd</code> elements allow for the
+ styling of specific elements of the sample output using a
+ style sheet.</p>
- <pre><p>I usually have a snack at <time>16:00</time>.</p>
-<p>I've liked model trains since at least 1983.</p></pre>
+ <pre><pre><samp><span class="prompt">jdoe at mowmow:~$</span> <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
- <p>Using a styling technology that supports restyling times, the
- first paragraph from the above snippet could be rendered as follows:</p>
+<span class="prompt">jdoe at demo:~$</span> <span class="cursor">_</span></samp></pre></pre>
+ </div>
- <blockquote><p>I usually have a snack at 4pm.</p></blockquote>
- <p>Or it could be rendered as follows:</p>
+ <h4>The <dfn><code>kbd</code></dfn> element</h4>
- <blockquote><p>I usually have a snack at 16h00.</p></blockquote>
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+ <p>The <code>kbd</code> element <span>represents</span> user input
+ (typically keyboard input, although it may also be used to represent
+ other input, such as voice commands).</p>
+
+ <p>When the <code>kbd</code> element is nested inside a
+ <code>samp</code> element, it represents the input as it was echoed
+ by the system.</p>
+
+ <p>When the <code>kbd</code> element <em>contains</em> a
+ <code>samp</code> element, it represents input based on system
+ output, for example invoking a menu item.</p>
+
+ <p>When the <code>kbd</code> element is nested inside another
+ <code>kbd</code> element, it represents an actual key or other
+ single unit of input as appropriate for the input mechanism.</p>
+
+ <div class="example">
+ <p>Here the <code>kbd</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>kbd</code> element marks up a block of
+ input, with the inner <code>kbd</code> elements representing each
+ individual step of the input, and the <code>samp</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>
+
+ <p>Such precision isn't necessary; the following is equally fine:</p>
+
+ <pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre>
+
</div>
- <div class="impl">
- <p>The <dfn title="dom-time-datetime"><code>dateTime</code></dfn> DOM
- attribute must <span>reflect</span> the <code
- title="attr-time-datetime">datetime</code> content attribute.</p>
+ <h4>The <dfn><code>sub</code></dfn> and <dfn><code>sup</code></dfn> elements</h4>
- <p>User agents, to obtain the <dfn
- title="concept-time-date">date</dfn>, <dfn
- title="concept-time-time">time</dfn>, and <dfn
- title="concept-time-timezone">time zone</dfn> represented by a
- <code>time</code> element, must follow these steps:</p>
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which these elements may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
- <ol>
+ <p>The <code>sup</code> element <span>represents</span> a
+ superscript and the <code>sub</code> element <span>represents</span>
+ a subscript.</p>
- <li>If the <code title="attr-time-datetime">datetime</code>
- attribute is present, then use the rules to <span>parse a date or
- time string</span> with the flag <i>in attribute</i> from the value
- of that attribute, and let the result be <var
- title="">result</var>.</li>
+ <p>These elements must be used only 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>sub</code> and <code>sup</code> elements
+ to be used in the name of the LaTeX document preparation system. In
+ general, authors should use these elements only if the
+ <em>absence</em> of those elements would change the meaning of the
+ content.</p>
- <li>Otherwise, use the rules to <span>parse a date or time
- string</span> with the flag <i>in content</i> from the element's
- <code>textContent</code>, and let the result be <var
- title="">result</var>.</li>
+ <p>In certain languages, superscripts are part of the typographical
+ conventions for some abbreviations.</p>
- <li>If <var title="">result</var> is empty (because the parsing
- failed), then the <span title="concept-time-date">date</span> is
- unknown, the <span title="concept-time-time">time</span> is unknown,
- and the <span title="concept-time-timezone">time zone</span> is
- unknown.</li>
+ <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>
- <li>Otherwise: if <var title="">result</var> contains a date, then
- that is the <span title="concept-time-date">date</span>; if <var
- title="">result</var> contains a time, then that is the <span
- title="concept-time-time">time</span>; and if <var
- title="">result</var> contains a time zone, then the time zone is the
- element's <span title="concept-time-timezone">time zone</span>. (A
- time zone can only be present if both a date and a time are also
- present.)</li>
+ <p>The <code>sub</code> element can be used inside a
+ <code>var</code> element, for variables that have subscripts.</p>
- </ol>
+ <div class="example">
+ <p>Here, the <code>sub</code> element is used to represents the
+ subscript that identifies the variable in a family of
+ variables:</p>
+
+ <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>
- <dl class="domintro">
+ <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>
- <dt><var title="">time</var> . <code title="dom-time-date">date</code></dt>
+ <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>
- <dd>
- <p>Returns a <code>Date</code> object representing the date
- component of the element's value, at midnight in the UTC
- time zone.</p>
- <p>Returns null if there is no date.</p>
- </dd>
- <dt><var title="">time</var> . <code title="dom-time-time">time</code></dt>
+ <h4>The <dfn><code>i</code></dfn> element</h4>
- <dd>
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
- <p>Returns a <code>Date</code> object representing the time
- component of the element's value, on 1970-01-01 in the UTC
- time zone.</p>
+ <p>The <code>i</code> element <span>represents</span> 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>
- <p>Returns null if there is no time.</p>
+ <p>Terms in languages different from the main text should be
+ annotated with <code title="attr-lang">lang</code> attributes (or,
+ in XML, <span title="attr-xml-lang"><code title="">lang</code>
+ attributes in the <span>XML namespace</span></span>).</p>
- </dd>
+ <div class="example">
+ <p>The examples below show uses of the <code>i</code> element:</p>
+ <pre><p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
+<p>The term <i>prose content</i> is 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>i</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>
- <dt><var title="">time</var> . <code title="dom-time-timezone">timezone</code></dt>
+ <p>Authors are encouraged to use the <code
+ title="attr-class">class</code> attribute on the <code>i</code>
+ element to identify why the element is being used, so that if the
+ style of a particular use (e.g. dream sequences as opposed to
+ taxonomic terms) is to be changed at a later date, the author
+ doesn't have to go through the entire document (or series of related
+ documents) annotating each use. Similarly, authors are encouraged to
+ consider whether other elements might be more applicable than the
+ <code>i</code> element, for instance the <code>em</code> element for
+ marking up stress emphasis, or the <code>dfn</code> element to mark
+ up the defining instance of a term.</p>
- <dd>
+ <p class="note">Style sheets can be used to format <code>i</code>
+ elements, just like any other element can be restyled. Thus, it is
+ not the case that content in <code>i</code> elements will
+ necessarily be italicized.</p>
- <p>Returns a <code>Date</code> object representing the time
- corresponding to 1970-01-01 00:00 UTC in the time zone given by the
- element's value.</p>
- <p>Returns null if there is no time zone.</p>
+ <h4>The <dfn><code>b</code></dfn> element</h4>
- </dd>
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+ <p>The <code>b</code> element <span>represents</span> 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.</p>
+
+ <div class="example">
+ <p>The following example shows a use of the <code>b</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>
+ </div>
+
+ <div class="example">
+ <p>In the following example, objects in a text adventure are
+ highlighted as being special by use of the <code>b</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>
+
+ <div class="example">
+ <p>Another case where the <code>b</code> element is appropriate is
+ in marking up the lede (or lead) sentence or paragraph. The
+ following example shows how a <a
+ href="http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">BBC
+ article about kittens adopting a rabbit as their own</a> could be
+ marked up:</p>
+ <pre><article>
+ <h2>Kittens 'adopted' by pet rabbit</h2>
+ <p><b>Six abandoned kittens have found an unexpected new
+ mother figure — a pet rabbit.</b></p>
+ <p>Veterinary nurse Melanie Humble took the three-week-old
+ kittens to her Aberdeen home.</p>
+<i>[...]</i></pre>
+ </div>
+
+ <p>The <code>b</code> element should be used as a last resort when
+ no other element is more appropriate. In particular, headings should
+ use the <code>h1</code> to <code>h6</code> elements, stress emphasis
+ should use the <code>em</code> element, importance should be denoted
+ with the <code>strong</code> element, and text marked or highlighted
+ should use the <code>mark</code> element.</p>
+
+ <div class="example">
+ <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>strong</code>, not <code>b</code>.</p>
+ </div>
+
+ <p class="note">Style sheets can be used to format <code>b</code>
+ elements, just like any other element can be restyled. Thus, it is
+ not the case that content in <code>b</code> elements will
+ necessarily be boldened.</p>
+
+
+
+ <h4>The <dfn><code>mark</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <div>
+ <p>The <code>mark</code> element <span>represents</span> a run of
+ text in one document marked or highlighted for reference purposes,
+ due to its relevance in another context. When used in a quotation or
+ other block of text referred to from the prose, it indicates a
+ highlight that was not originally present but which has been added
+ to bring the reader's attention to a part of the text that might not
+ have been considered important by the original author when the block
+ was originally written, but which is now under previously unexpected
+ scrutiny. When used in the main prose of a document, it indicates a
+ part of the document that has been highlighted due to its likely
+ relevance to the user's current activity.</p>
- <p>The <dfn title="dom-time-date"><code>date</code></dfn> DOM
- attribute must return null if the <span
- title="concept-time-date">date</span> is unknown, and otherwise must
- return the time corresponding to midnight UTC (i.e. the first
- second) of the given <span
- title="concept-time-date">date</span>.</p>
+ <div class="example">
+ <p>This example shows how the <code>mark</code> element can be used
+ to bring attention to a particular part of a quotation:</p>
+ <pre><p lang="en-US">Consider the following quote:</p>
+<blockquote lang="en-GB">
+ <p>Look around and you will find, no-one's really
+ <mark>colour</mark> blind.</p>
+</blockquote>
+<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
+the person writing this quote is clearly not American.</p></pre>
+ </div>
- <p>The <dfn title="dom-time-time"><code>time</code></dfn> DOM attribute
- must return null if the <span title="concept-time-time">time</span> is
- unknown, and otherwise must return the time corresponding to the
- given <span title="concept-time-time">time</span> of 1970-01-01, with
- the time zone UTC.</p>
+ <div class="example">
- <p>The <dfn title="dom-time-timezone"><code>timezone</code></dfn> DOM
- attribute must return null if the <span
- title="concept-time-timezone">time zone</span> is unknown, and otherwise
- must return the time corresponding to 1970-01-01 00:00 UTC in the
- given <span title="concept-time-timezone">time zone</span>, with the
- time zone set to UTC (i.e. the time corresponding to 1970-01-01 at
- 00:00 UTC plus the offset corresponding to the time zone).</p>
+ <p>Another example of the <code>mark</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 <mark>kitten</mark>s who are visiting me
+these days. They're really cute. I think they like my garden! Maybe I
+should adopt a <mark>kitten</mark>.</p></pre>
+
</div>
<div class="example">
- <p>In the following snippet:</p>
+ <p>In the following snippet, a paragraph of text refers to a
+ specific part of a code fragment.</p>
- <pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
+ <pre><p>The highlighted part below is where the error lies:</p>
+<pre><code>var i: Integer;
+begin
+ i := <mark>1.1</mark>;
+end.</code></pre></pre>
- <p>...the <code>time</code> element's <code
- title="dom-time-date">date</code> attribute would have the value
- 1,158,969,600,000ms, and the <code title="dom-time-time">time</code>
- and <code title="dom-time-timezone">timezone</code> attributes would
- return null.</p>
+ </div>
+ <div class="example">
- <p>In the following snippet:</p>
+ <p>This is another example showing the use of <code>mark</code> to
+ highlight a part of quoted text that was originally not
+ emphasized. In this example, common typographic conventions have
+ led the author to explicitly style <code>mark</code> elements in
+ quotes to render in italics.</p>
- <pre><p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p></pre>
+ <pre><article>
+ <style>
+ blockquote mark, q mark {
+ font: inherit; font-style: italic;
+ text-decoration: none;
+ background: transparent; color: inherit;
+ }
+ .bubble em {
+ font: inherit; font-size: larger;
+ text-decoration: underline;
+ }
+ </style>
+ <h1>She knew</h1>
+ <p>Did you notice the subtle joke in the joke on panel 4?</p>
+ <blockquote>
+ <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
+ on some level I realized it was a known-plaintext attack.</mark> But I
+ couldn't admit it until I saw for myself.</p>
+ </blockquote>
+ <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
+ explains everything neatly.</p>
+</article></pre>
- <p>...the <code>time</code> element's <code
- title="dom-time-date">date</code> attribute would have the value
- 1,159,056,000,000ms, the <code title="dom-time-time">time</code>
- attribute would have the value 18,000,000ms, and the <code
- title="dom-time-timezone">timezone</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>Note, incidentally, the distinction between the <code>em</code>
+ element in this example, which is part of the original text being
+ quoted, and the <code>mark</code> element, which is highlighting a
+ part for comment.</p>
+ </div>
- <p>Finally, in the following snippet:</p>
+ <div class="example">
- <pre><p>Many people get up at <time>08:00</time>.</p></pre>
+ <p>The following example shows the difference between denoting the
+ <em>importance</em> of a span of text (<code>strong</code>) as
+ opposed to denoting the <em>relevance</em> of a span of text
+ (<code>mark</code>). It is an extract from a textbook, where the
+ extract has had the parts relevant to the exam highlighted. The
+ safety warnings, important though they may be, are apparently not
+ relevant to the exam.</p>
- <p>...the <code>time</code> element's <code
- title="dom-time-date">date</code> attribute would have the value null,
- the <code title="dom-time-time">time</code> attribute would have the
- value 28,800,000ms, and the <code
- title="dom-time-timezone">timezone</code> attribute would return
- null.</p>
+ <pre><h3>Wormhole Physics Introduction</h3>
+<p><mark>A wormhole in normal conditions can be held open for a
+maximum of just under 39 minutes.</mark> Conditions that can increase
+the time include a powerful energy source coupled to one or both of
+the gates connecting the wormhole, and a large gravity well (such as a
+black hole).</p>
+
+<p><mark>Momentum is preserved across the wormhole. Electromagnetic
+radiation can travel in both directions through a wormhole,
+but matter cannot.</mark></p>
+
+<p>When a wormhole is created, a vortex normally forms.
+<strong>Warning: The vortex caused by the wormhole opening will
+annihilate anything in its path.</strong> Vortexes can be avoided when
+using sufficiently advanced dialing technology.</p>
+
+<p><mark>An obstruction in a gate will prevent it from accepting a
+wormhole connection.</mark></p></pre>
+
</div>
-
<h4>The <dfn><code>progress</code></dfn> element</h4>
<dl class="element">
@@ -17137,10 +17299,8 @@
</div>
+ <h4>The <dfn><code>time</code></dfn> element</h4>
-
- <h4>The <dfn><code>code</code></dfn> element</h4>
-
<dl class="element">
<dt>Categories</dt>
<dd><span>Flow content</span>.</dd>
@@ -17151,490 +17311,252 @@
<dd><span>Phrasing content</span>.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
+ <dd><code title="attr-time-datetime">datetime</code></dd>
<dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
+ <dd>
+<pre class="idl">interface <dfn>HTMLTimeElement</dfn> : <span>HTMLElement</span> {
+ attribute DOMString <span title="dom-time-datetime">dateTime</span>;
+ readonly attribute <span>Date</span> <span title="dom-time-date">date</span>;
+ readonly attribute <span>Date</span> <span title="dom-time-time">time</span>;
+ readonly attribute <span>Date</span> <span title="dom-time-timezone">timezone</span>;
+};</pre>
+ </dd>
</dl>
- <p>The <code>code</code> element <span>represents</span> 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
- recognize.</p>
+ <p>The <code>time</code> element <span>represents</span> either a
+ time on a 24 hour clock, or a precise date in the proleptic
+ Gregorian calendar, optionally with a time and a time zone. <a
+ href="#refsGREGORIAN">[GREGORIAN]</a></p>
- <p>Although there is no formal way to indicate the language of
- computer code being marked up, authors who wish to mark
- <code>code</code> elements with the language used, e.g. so that
- syntax highlighting scripts can use the right rules, may do so by
- adding a class prefixed with "<code title="">language-</code>" to
- the element.</p>
+ <p>This element is intended as a way to encode modern dates and
+ times in a machine-readable way so that user agents can offer to add
+ them to the user's calendar. For example, adding birthday reminders
+ or scheduling events.</p>
- <div class="example">
+ <!-- it's also intended for restyling to local conventions
+ (2000-12-31 vs 31-12-2000 vs 12-31-2000), but CSS doesn't support
+ that yet. -->
- <p>The following example shows how the element can be used in a
- paragraph to mark up element names and computer code, including
- punctuation.</p>
+ <div class="note">
- <pre><p>The <code>code</code> element represents a fragment of computer
-code.</p>
+ <p>The <code>time</code> element is not intended for encoding times
+ for which a precise date or time cannot be established. For
+ example, it would be inappropriate for encoding times like "one
+ millisecond after the big bang", "the early part of the Jurassic
+ period", or "a winter around 250 BCE".</p>
-<p>When you call the <code>activate()</code> method on the
-<code>robotSnowman</code> object, the eyes glow.</p>
+ <p>For dates before the introduction of the Gregorian calendar,
+ authors are encouraged to not use the <code>time</code> element, or
+ else to be very careful about converting dates and times from the
+ period to the Gregorian calendar. This is complicated by the manner
+ in which the Gregorian calendar was phased in, which occurred at
+ different times in different countries, ranging from partway
+ through the 16th century all the way to early in the 20th.</p>
-<p>The example below uses the <code>begin</code> keyword to indicate
-the start of a statement block. It is paired with an <code>end</code>
-keyword, which is followed by the <code>.</code> punctuation character
-(full stop) to indicate the end of the program.</p></pre>
-
</div>
- <div class="example">
+ <p>The <dfn title="attr-time-datetime"><code>datetime</code></dfn>
+ attribute, if present, must contain a <span>valid date or time
+ string</span> that identifies the date or time being specified.</p>
- <p>The following example shows how a block of code could be marked
- up using the <code>pre</code> and <code>code</code> elements.</p>
+ <p>If the <code title="attr-time-datetime">datetime</code> attribute
+ is not present, then the date or time must be specified in the
+ content of the element, such that the element's
+ <code>textContent</code> is a <span>valid date or time string in
+ content</span>, and the date, if any, must be expressed using the
+ Gregorian calendar.</p>
- <pre><pre><code class="language-pascal">var i: Integer;
-begin
- i := 1;
-end.</code></pre></pre>
+ <p>If the <code title="attr-time-datetime">datetime</code> attribute
+ is present, then the element may be empty, in which case the user
+ agent should convey the attribute's value to the user when rendering
+ the element.</p>
- <p>A class is used in that example to indicate the language
- used.</p>
+ <div class="example">
- </div>
+ <p>The <code>time</code> element can be used to encode dates, for
+ example in Microformats. The following shows a hypothetical way of
+ encoding an event using a variant on hCalendar that uses the
+ <code>time</code> element:</p>
- <p class="note">See the <code>pre</code> element for more details.</p>
+ <pre><div class="vevent">
+ <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
+ <span class="summary">Web 2.0 Conference</span>:
+ <time class="dtstart" datetime="2007-10-05">October 5</time> -
+ <time class="dtend" datetime="2007-10-20">19</time>,
+ at the <span class="location">Argent Hotel, San Francisco, CA</span>
+ </div></pre>
-
- <h4>The <dfn><code>var</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
-
- <p>The <code>var</code> element <span>represents</span> 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.</p>
-
- <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>
-flavors of ice cream to be available for purchase!</p></pre>
</div>
- <p>For mathematics, in particular for anything beyond the simplest
- of expressions, MathML is more appropriate. However, the
- <code>var</code> element can still be used to refer to specific
- variables that are then mentioned in MathML expressions.</p>
-
<div class="example">
- <p>In this example, an equation is shown, with a legend that
- references the variables in the equation. The expression itself is
- marked up with MathML, but the variables are mentioned in the
- figure's legend using <code>var</code>.</p>
+ <p>The <code>time</code> element is not necessary for encoding
+ dates or times. In the following snippet, the time is encoded using
+ <code>time</code>, so that it can be restyled (e.g. using XBL2) to
+ match local conventions, while the year is not marked up at all,
+ since marking it up would not be particularly useful.</p>
- <pre><figure>
- <math>
- <mi>a</mi>
- <mo>=</mo>
- <msqrt>
- <msup><mi>b</mi><mn>2</mn></msup>
- <mi>+</mi>
- <msup><mi>c</mi><mn>2</mn></msup>
- </msqrt>
- </math>
- <legend>
- Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
- a triangle with sides <var>b</var> and <var>c</var>
- </legend>
-</figure></pre>
+ <pre><p>I usually have a snack at <time>16:00</time>.</p>
+<p>I've liked model trains since at least 1983.</p></pre>
+ <p>Using a styling technology that supports restyling times, the
+ first paragraph from the above snippet could be rendered as follows:</p>
- </div>
+ <blockquote><p>I usually have a snack at 4pm.</p></blockquote>
+ <p>Or it could be rendered as follows:</p>
- <h4>The <dfn><code>samp</code></dfn> element</h4>
+ <blockquote><p>I usually have a snack at 16h00.</p></blockquote>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
-
- <p>The <code>samp</code> element <span>represents</span> (sample)
- output from a program or computing system.</p>
-
- <p class="note">See the <code>pre</code> and <code>kbd</code>
- elements for more details.</p>
-
- <div class="example">
- <p>This example shows the <code>samp</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>samp</code> and <code>kbd</code> elements allow for the
- styling of specific elements of the sample output using a
- style sheet.</p>
-
- <pre><pre><samp><span class="prompt">jdoe at mowmow:~$</span> <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
-
-<span class="prompt">jdoe at demo:~$</span> <span class="cursor">_</span></samp></pre></pre>
</div>
+ <div class="impl">
- <h4>The <dfn><code>kbd</code></dfn> element</h4>
+ <p>The <dfn title="dom-time-datetime"><code>dateTime</code></dfn> DOM
+ attribute must <span>reflect</span> the <code
+ title="attr-time-datetime">datetime</code> content attribute.</p>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
+ <p>User agents, to obtain the <dfn
+ title="concept-time-date">date</dfn>, <dfn
+ title="concept-time-time">time</dfn>, and <dfn
+ title="concept-time-timezone">time zone</dfn> represented by a
+ <code>time</code> element, must follow these steps:</p>
- <p>The <code>kbd</code> element <span>represents</span> user input
- (typically keyboard input, although it may also be used to represent
- other input, such as voice commands).</p>
+ <ol>
- <p>When the <code>kbd</code> element is nested inside a
- <code>samp</code> element, it represents the input as it was echoed
- by the system.</p>
+ <li>If the <code title="attr-time-datetime">datetime</code>
+ attribute is present, then use the rules to <span>parse a date or
+ time string</span> with the flag <i>in attribute</i> from the value
+ of that attribute, and let the result be <var
+ title="">result</var>.</li>
- <p>When the <code>kbd</code> element <em>contains</em> a
- <code>samp</code> element, it represents input based on system
- output, for example invoking a menu item.</p>
+ <li>Otherwise, use the rules to <span>parse a date or time
+ string</span> with the flag <i>in content</i> from the element's
+ <code>textContent</code>, and let the result be <var
+ title="">result</var>.</li>
- <p>When the <code>kbd</code> element is nested inside another
- <code>kbd</code> element, it represents an actual key or other
- single unit of input as appropriate for the input mechanism.</p>
+ <li>If <var title="">result</var> is empty (because the parsing
+ failed), then the <span title="concept-time-date">date</span> is
+ unknown, the <span title="concept-time-time">time</span> is unknown,
+ and the <span title="concept-time-timezone">time zone</span> is
+ unknown.</li>
- <div class="example">
- <p>Here the <code>kbd</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>
+ <li>Otherwise: if <var title="">result</var> contains a date, then
+ that is the <span title="concept-time-date">date</span>; if <var
+ title="">result</var> contains a time, then that is the <span
+ title="concept-time-time">time</span>; and if <var
+ title="">result</var> contains a time zone, then the time zone is the
+ element's <span title="concept-time-timezone">time zone</span>. (A
+ time zone can only be present if both a date and a time are also
+ present.)</li>
- <p>In this second example, the user is told to pick a particular
- menu item. The outer <code>kbd</code> element marks up a block of
- input, with the inner <code>kbd</code> elements representing each
- individual step of the input, and the <code>samp</code> elements
- inside them indicating that the steps are input based on something
- being displayed by the system, in this case menu labels:</p>
+ </ol>
- <pre><p>To make George eat an apple, select
- <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
-</p></pre>
-
- <p>Such precision isn't necessary; the following is equally fine:</p>
-
- <pre><p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p></pre>
-
</div>
+ <dl class="domintro">
- <h4>The <dfn><code>sub</code></dfn> and <dfn><code>sup</code></dfn> elements</h4>
+ <dt><var title="">time</var> . <code title="dom-time-date">date</code></dt>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which these elements may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
+ <dd>
- <p>The <code>sup</code> element <span>represents</span> a
- superscript and the <code>sub</code> element <span>represents</span>
- a subscript.</p>
+ <p>Returns a <code>Date</code> object representing the date
+ component of the element's value, at midnight in the UTC
+ time zone.</p>
- <p>These elements must be used only 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>sub</code> and <code>sup</code> elements
- to be used in the name of the LaTeX document preparation system. In
- general, authors should use these elements only if the
- <em>absence</em> of those elements would change the meaning of the
- content.</p>
+ <p>Returns null if there is no date.</p>
- <p>In certain languages, superscripts are part of the typographical
- conventions for some abbreviations.</p>
+ </dd>
- <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>
+ <dt><var title="">time</var> . <code title="dom-time-time">time</code></dt>
- <p>The <code>sub</code> element can be used inside a
- <code>var</code> element, for variables that have subscripts.</p>
+ <dd>
- <div class="example">
+ <p>Returns a <code>Date</code> object representing the time
+ component of the element's value, on 1970-01-01 in the UTC
+ time zone.</p>
- <p>Here, the <code>sub</code> element is used to represents the
- subscript that identifies the variable in a family of
- variables:</p>
+ <p>Returns null if there is no time.</p>
- <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>
+ </dd>
- <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>
+ <dt><var title="">time</var> . <code title="dom-time-timezone">timezone</code></dt>
- <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>
+ <dd>
+ <p>Returns a <code>Date</code> object representing the time
+ corresponding to 1970-01-01 00:00 UTC in the time zone given by the
+ element's value.</p>
- <h4>The <dfn><code>span</code></dfn> element</h4>
+ <p>Returns null if there is no time zone.</p>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>
- <pre class="idl">interface <dfn>HTMLSpanElement</dfn> : <span>HTMLElement</span> {};</pre>
</dd>
- </dl>
- <p>The <code>span</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">class</code>, <code
- title="attr-lang">lang</code>, or <code
- title="attr-dir">dir</code>. It <span>represents</span> its
- children.</p>
-
-
- <h4>The <dfn><code>i</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>i</code> element <span>represents</span> 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>
+ <div>
- <p>Terms in languages different from the main text should be
- annotated with <code title="attr-lang">lang</code> attributes (or,
- in XML, <span title="attr-xml-lang"><code title="">lang</code>
- attributes in the <span>XML namespace</span></span>).</p>
+ <p>The <dfn title="dom-time-date"><code>date</code></dfn> DOM
+ attribute must return null if the <span
+ title="concept-time-date">date</span> is unknown, and otherwise must
+ return the time corresponding to midnight UTC (i.e. the first
+ second) of the given <span
+ title="concept-time-date">date</span>.</p>
- <div class="example">
- <p>The examples below show uses of the <code>i</code> element:</p>
- <pre><p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
-<p>The term <i>prose content</i> is 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>i</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 <dfn title="dom-time-time"><code>time</code></dfn> DOM attribute
+ must return null if the <span title="concept-time-time">time</span> is
+ unknown, and otherwise must return the time corresponding to the
+ given <span title="concept-time-time">time</span> of 1970-01-01, with
+ the time zone UTC.</p>
- <p>Authors are encouraged to use the <code
- title="attr-class">class</code> attribute on the <code>i</code>
- element to identify why the element is being used, so that if the
- style of a particular use (e.g. dream sequences as opposed to
- taxonomic terms) is to be changed at a later date, the author
- doesn't have to go through the entire document (or series of related
- documents) annotating each use. Similarly, authors are encouraged to
- consider whether other elements might be more applicable than the
- <code>i</code> element, for instance the <code>em</code> element for
- marking up stress emphasis, or the <code>dfn</code> element to mark
- up the defining instance of a term.</p>
+ <p>The <dfn title="dom-time-timezone"><code>timezone</code></dfn> DOM
+ attribute must return null if the <span
+ title="concept-time-timezone">time zone</span> is unknown, and otherwise
+ must return the time corresponding to 1970-01-01 00:00 UTC in the
+ given <span title="concept-time-timezone">time zone</span>, with the
+ time zone set to UTC (i.e. the time corresponding to 1970-01-01 at
+ 00:00 UTC plus the offset corresponding to the time zone).</p>
- <p class="note">Style sheets can be used to format <code>i</code>
- elements, just like any other element can be restyled. Thus, it is
- not the case that content in <code>i</code> elements will
- necessarily be italicized.</p>
-
-
- <h4>The <dfn><code>b</code></dfn> element</h4>
-
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
-
- <p>The <code>b</code> element <span>represents</span> 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.</p>
-
- <div class="example">
- <p>The following example shows a use of the <code>b</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>
</div>
<div class="example">
- <p>In the following example, objects in a text adventure are
- highlighted as being special by use of the <code>b</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>
- <div class="example">
- <p>Another case where the <code>b</code> element is appropriate is
- in marking up the lede (or lead) sentence or paragraph. The
- following example shows how a <a
- href="http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">BBC
- article about kittens adopting a rabbit as their own</a> could be
- marked up:</p>
- <pre><article>
- <h2>Kittens 'adopted' by pet rabbit</h2>
- <p><b>Six abandoned kittens have found an unexpected new
- mother figure — a pet rabbit.</b></p>
- <p>Veterinary nurse Melanie Humble took the three-week-old
- kittens to her Aberdeen home.</p>
-<i>[...]</i></pre>
- </div>
+ <p>In the following snippet:</p>
- <p>The <code>b</code> element should be used as a last resort when
- no other element is more appropriate. In particular, headings should
- use the <code>h1</code> to <code>h6</code> elements, stress emphasis
- should use the <code>em</code> element, importance should be denoted
- with the <code>strong</code> element, and text marked or highlighted
- should use the <code>mark</code> element.</p>
+ <pre><p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p></pre>
- <div class="example">
- <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>strong</code>, not <code>b</code>.</p>
- </div>
+ <p>...the <code>time</code> element's <code
+ title="dom-time-date">date</code> attribute would have the value
+ 1,158,969,600,000ms, and the <code title="dom-time-time">time</code>
+ and <code title="dom-time-timezone">timezone</code> attributes would
+ return null.</p>
- <p class="note">Style sheets can be used to format <code>b</code>
- elements, just like any other element can be restyled. Thus, it is
- not the case that content in <code>b</code> elements will
- necessarily be boldened.</p>
+ <p>In the following snippet:</p>
- <h4>The <dfn><code>bdo</code></dfn> element</h4>
+ <pre><p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p></pre>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>phrasing content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
- <dt>Content attributes:</dt>
- <dd><span>Global attributes</span></dd>
- <dd>Also, the <code title="attr-dir">dir</code> global attribute has special semantics on this element.</dd>
- <dt>DOM interface:</dt>
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl>
+ <p>...the <code>time</code> element's <code
+ title="dom-time-date">date</code> attribute would have the value
+ 1,159,056,000,000ms, the <code title="dom-time-time">time</code>
+ attribute would have the value 18,000,000ms, and the <code
+ title="dom-time-timezone">timezone</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>The <code>bdo</code> element <span>represents</span> explicit
- text directionality formatting control for its children. It allows
- authors to override the Unicode bidi algorithm by explicitly
- specifying a direction override. <a href="#refsBIDI">[BIDI]</a></p>
- <p>Authors must specify the <code title="attr-dir">dir</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>
+ <p>Finally, in the following snippet:</p>
- <div class="impl">
+ <pre><p>Many people get up at <time>08:00</time>.</p></pre>
- <p>If the element has the <code title="attr-dir">dir</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>
+ <p>...the <code>time</code> element's <code
+ title="dom-time-date">date</code> attribute would have the value null,
+ the <code title="dom-time-time">time</code> attribute would have the
+ value 28,800,000ms, and the <code
+ title="dom-time-timezone">timezone</code> attribute would return
+ null.</p>
- <p>If the element has the <code title="attr-dir">dir</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>
-
- <p>The requirements on handling the <code>bdo</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 'unicode-bidi' property. <a
- href="#refsCSS">[CSS]</a></p>
-
</div>
@@ -17822,6 +17744,84 @@
</div>
+ <h4>The <dfn><code>bdo</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dd>Also, the <code title="attr-dir">dir</code> global attribute has special semantics on this element.</dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>bdo</code> element <span>represents</span> explicit
+ text directionality formatting control for its children. It allows
+ authors to override the Unicode bidi algorithm by explicitly
+ specifying a direction override. <a href="#refsBIDI">[BIDI]</a></p>
+
+ <p>Authors must specify the <code title="attr-dir">dir</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>
+
+ <div class="impl">
+
+ <p>If the element has the <code title="attr-dir">dir</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>
+
+ <p>If the element has the <code title="attr-dir">dir</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>
+
+ <p>The requirements on handling the <code>bdo</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 'unicode-bidi' property. <a
+ href="#refsCSS">[CSS]</a></p>
+
+ </div>
+
+ <h4>The <dfn><code>span</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>
+ <pre class="idl">interface <dfn>HTMLSpanElement</dfn> : <span>HTMLElement</span> {};</pre>
+ </dd>
+ </dl>
+
+ <p>The <code>span</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">class</code>, <code
+ title="attr-lang">lang</code>, or <code
+ title="attr-dir">dir</code>. It <span>represents</span> its
+ children.</p>
+
+
+
<h4>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -17869,6 +17869,11 @@
<td><pre class="example">The term <strong><dfn>organic food</dfn></strong> refers to food produced without synthetic chemicals.</pre>
<tr>
+ <td><code>abbr</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>code</code>
<td>Computer code
<td><pre class="example">The <strong><code>fruitdb</code></strong> program can be used for tracking fruit production.</pre>
@@ -17889,11 +17894,6 @@
<td><pre class="example">Hit <strong><kbd>F1</kbd></strong> to continue.</pre>
<tr>
- <td><code>abbr</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>sub</code>
<td>Subscripts
<td><pre class="example">Water is H<strong><sub>2</sub></strong>O.</pre>
More information about the Commit-Watchers
mailing list