[html5] r3859 - [acgiowt] (2) Parser changes: <dc>, <ds>, <dialog> are now treated differently. [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Sep 15 04:09:23 PDT 2009
Author: ianh
Date: 2009-09-15 04:09:22 -0700 (Tue, 15 Sep 2009)
New Revision: 3859
Modified:
index
source
Log:
[acgiowt] (2) Parser changes: <dc>, <ds>, <dialog> are now treated differently. Styling changes: <dialog>, <dc>, <ds>, and <details> are now treated differently. Semantic changes: Dropped <dialog>. <figure> and <details> now use <dt>/<dd> instead of <legend>. Editorial changes: Added a section on how to mark up conversations, moved the sections on footnotes and tag clouds around. Updated lots of examples. Validator changes: Changed rules for missing alt='' given the new elements.
Modified: index
===================================================================
--- index 2009-09-15 08:46:30 UTC (rev 3858)
+++ index 2009-09-15 11:09:22 UTC (rev 3859)
@@ -381,17 +381,13 @@
<li><a href=#the-hr-element><span class=secno>4.5.2 </span>The <code>hr</code> element</a></li>
<li><a href=#the-br-element><span class=secno>4.5.3 </span>The <code>br</code> element</a></li>
<li><a href=#the-pre-element><span class=secno>4.5.4 </span>The <code>pre</code> element</a></li>
- <li><a href=#the-dialog-element><span class=secno>4.5.5 </span>The <code>dialog</code> element</a></li>
- <li><a href=#the-blockquote-element><span class=secno>4.5.6 </span>The <code>blockquote</code> element</a></li>
- <li><a href=#the-ol-element><span class=secno>4.5.7 </span>The <code>ol</code> element</a></li>
- <li><a href=#the-ul-element><span class=secno>4.5.8 </span>The <code>ul</code> element</a></li>
- <li><a href=#the-li-element><span class=secno>4.5.9 </span>The <code>li</code> element</a></li>
- <li><a href=#the-dl-element><span class=secno>4.5.10 </span>The <code>dl</code> element</a></li>
- <li><a href=#the-dt-element><span class=secno>4.5.11 </span>The <code>dt</code> element</a></li>
- <li><a href=#the-dd-element><span class=secno>4.5.12 </span>The <code>dd</code> element</a></li>
- <li><a href=#common-grouping-idioms><span class=secno>4.5.13 </span>Common grouping idioms</a>
- <ol>
- <li><a href=#tag-clouds><span class=secno>4.5.13.1 </span>Tag clouds</a></ol></ol></li>
+ <li><a href=#the-blockquote-element><span class=secno>4.5.5 </span>The <code>blockquote</code> element</a></li>
+ <li><a href=#the-ol-element><span class=secno>4.5.6 </span>The <code>ol</code> element</a></li>
+ <li><a href=#the-ul-element><span class=secno>4.5.7 </span>The <code>ul</code> element</a></li>
+ <li><a href=#the-li-element><span class=secno>4.5.8 </span>The <code>li</code> element</a></li>
+ <li><a href=#the-dl-element><span class=secno>4.5.9 </span>The <code>dl</code> element</a></li>
+ <li><a href=#the-dt-element><span class=secno>4.5.10 </span>The <code>dt</code> element</a></li>
+ <li><a href=#the-dd-element><span class=secno>4.5.11 </span>The <code>dd</code> element</a></ol></li>
<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>
@@ -418,8 +414,7 @@
<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=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
<ol>
<li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
@@ -620,7 +615,12 @@
<ol>
<li><a href=#the-legend-element><span class=secno>4.12.1 </span>The <code>legend</code> element</a></li>
<li><a href=#the-div-element><span class=secno>4.12.2 </span>The <code>div</code> element</a></ol></li>
- <li><a href=#matching-html-elements-using-selectors><span class=secno>4.13 </span>Matching HTML elements using selectors</a></ol></li>
+ <li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
+ <ol>
+ <li><a href=#tag-clouds><span class=secno>4.13.1 </span>Tag clouds</a></li>
+ <li><a href=#conversations><span class=secno>4.13.2 </span>Conversations</a></li>
+ <li><a href=#footnotes><span class=secno>4.13.3 </span>Footnotes</a></ol></li>
+ <li><a href=#matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
<li><a href=#introduction-1><span class=secno>5.1 </span>Introduction</a>
@@ -8409,7 +8409,6 @@
<li><code><a href=#the-del-element>del</a></code></li>
<li><code><a href=#the-details-element>details</a></code></li>
<li><code><a href=#the-dfn-element>dfn</a></code></li>
- <li><code><a href=#the-dialog-element>dialog</a></code></li>
<li><code><a href=#the-div-element>div</a></code></li>
<li><code><a href=#the-dl-element>dl</a></code></li>
<li><code><a href=#the-em-element>em</a></code></li>
@@ -14442,63 +14441,9 @@
</div>
- <h4 id=the-dialog-element><span class=secno>4.5.5 </span>The <dfn><code>dialog</code></dfn> element</h4>
- <dl class=element><dt>Categories</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
- <dt>Content model:</dt>
- <dd>Zero or more pairs of one <code><a href=#the-dt-element>dt</a></code> element followed by
- one <code><a href=#the-dd-element>dd</a></code> element.</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-dialog-element>dialog</a></code> element <a href=#represents>represents</a> a
- conversation, meeting minutes, a chat transcript, a dialog in a
- screenplay, an instant message log, or some other construct in which
- different players take turns in discourse.</p>
+ <h4 id=the-blockquote-element><span class=secno>4.5.5 </span>The <dfn><code>blockquote</code></dfn> element</h4>
- <p>Each part of the conversation must have an explicit talker (or
- speaker) given by a <code><a href=#the-dt-element>dt</a></code> element, and a discourse (or
- quote) given by a <code><a href=#the-dd-element>dd</a></code> element.</p>
-
- <div class=example>
- <p>This example demonstrates this using an extract from Abbot and
- Costello's famous sketch, <cite>Who's on first</cite>:</p>
-<pre><dialog>
- <dt> Costello
- <dd> Look, you gotta first baseman?
- <dt> Abbott
- <dd> Certainly.
- <dt> Costello
- <dd> Who's playing first?
- <dt> Abbott
- <dd> That's right.
- <dt> Costello
- <dd> When you pay off the first baseman every month, who gets the money?
- <dt> Abbott
- <dd> Every dollar of it.
-</dialog></pre>
- </div>
-
- <p class=note>Text in a <code><a href=#the-dt-element>dt</a></code> element in a
- <code><a href=#the-dialog-element>dialog</a></code> element is implicitly the source of the text
- given in the following <code><a href=#the-dd-element>dd</a></code> element, and the contents of
- the <code><a href=#the-dd-element>dd</a></code> element are implicitly a quote from that
- speaker. There is thus no need to include <code><a href=#the-cite-element>cite</a></code>,
- <code><a href=#the-q-element>q</a></code>, or <code><a href=#the-blockquote-element>blockquote</a></code> elements in this
- markup. Indeed, a <code><a href=#the-q-element>q</a></code> element inside a <code><a href=#the-dd-element>dd</a></code>
- element in a conversation would actually imply the people talking
- were themselves quoting another work. See the <code><a href=#the-cite-element>cite</a></code>,
- <code><a href=#the-q-element>q</a></code>, and <code><a href=#the-blockquote-element>blockquote</a></code> elements for other ways
- to cite or quote.</p>
-
-
-
- <h4 id=the-blockquote-element><span class=secno>4.5.6 </span>The <dfn><code>blockquote</code></dfn> element</h4>
-
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#sectioning-root>Sectioning root</a>.</dd>
@@ -14539,10 +14484,6 @@
</div>
- <p class=note>The best way to represent a conversation is not with
- the <code><a href=#the-cite-element>cite</a></code> and <code><a href=#the-blockquote-element>blockquote</a></code> elements, but with
- the <code><a href=#the-dialog-element>dialog</a></code> element.</p>
-
<div class=example>
<p>This next example shows the use of <code><a href=#the-cite-element>cite</a></code> alongside
@@ -14556,10 +14497,15 @@
</div>
+ <p class=note><a href=#conversations>Examples of how to
+ represent a conversation</a> are shown below; it is not appropriate
+ to use the <code><a href=#the-cite-element>cite</a></code> and <code><a href=#the-blockquote-element>blockquote</a></code> elements
+ for this purpose.</p>
- <h4 id=the-ol-element><span class=secno>4.5.7 </span>The <dfn><code>ol</code></dfn> element</h4>
+ <h4 id=the-ol-element><span class=secno>4.5.6 </span>The <dfn><code>ol</code></dfn> element</h4>
+
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
@@ -14660,7 +14606,7 @@
</div>
- <h4 id=the-ul-element><span class=secno>4.5.8 </span>The <dfn><code>ul</code></dfn> element</h4>
+ <h4 id=the-ul-element><span class=secno>4.5.7 </span>The <dfn><code>ul</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -14715,7 +14661,7 @@
</div>
- <h4 id=the-li-element><span class=secno>4.5.9 </span>The <dfn><code>li</code></dfn> element</h4>
+ <h4 id=the-li-element><span class=secno>4.5.8 </span>The <dfn><code>li</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -14767,40 +14713,44 @@
<div class=example>
<p>The following example, the top ten movies are listed (in reverse
order). Note the way the list is given a title by using a
- <code><a href=#the-figure-element>figure</a></code> element and its <code><a href=#the-legend-element>legend</a></code>.</p>
+ <code><a href=#the-figure-element>figure</a></code> element and its <code><a href=#the-dt-element>dt</a></code> element.</p>
<pre><figure>
- <legend>The top 10 movies of all time</legend>
- <ol>
- <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
- <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
- <li value="8"><cite>A Bug's Life</cite>, 1998</li>
- <li value="7"><cite>Toy Story</cite>, 1995</li>
- <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
- <li value="5"><cite>Cars</cite>, 2006</li>
- <li value="4"><cite>Toy Story 2</cite>, 1999</li>
- <li value="3"><cite>Finding Nemo</cite>, 2003</li>
- <li value="2"><cite>The Incredibles</cite>, 2004</li>
- <li value="1"><cite>Ratatouille</cite>, 2007</li>
- </ol>
+ <dt>The top 10 movies of all time</dt>
+ <dd>
+ <ol>
+ <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
+ <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
+ <li value="8"><cite>A Bug's Life</cite>, 1998</li>
+ <li value="7"><cite>Toy Story</cite>, 1995</li>
+ <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
+ <li value="5"><cite>Cars</cite>, 2006</li>
+ <li value="4"><cite>Toy Story 2</cite>, 1999</li>
+ <li value="3"><cite>Finding Nemo</cite>, 2003</li>
+ <li value="2"><cite>The Incredibles</cite>, 2004</li>
+ <li value="1"><cite>Ratatouille</cite>, 2007</li>
+ </ol>
+ <dd>
</figure></pre>
<p>The markup could also be written as follows, using the <code title=attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> attribute on the
<code><a href=#the-ol-element>ol</a></code> element:</p>
<pre><figure>
- <legend>The top 10 movies of all time</legend>
- <ol reversed>
- <li><cite>Josie and the Pussycats</cite>, 2001</li>
- <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
- <li><cite>A Bug's Life</cite>, 1998</li>
- <li><cite>Toy Story</cite>, 1995</li>
- <li><cite>Monsters, Inc</cite>, 2001</li>
- <li><cite>Cars</cite>, 2006</li>
- <li><cite>Toy Story 2</cite>, 1999</li>
- <li><cite>Finding Nemo</cite>, 2003</li>
- <li><cite>The Incredibles</cite>, 2004</li>
- <li><cite>Ratatouille</cite>, 2007</li>
- </ol>
+ <dt>The top 10 movies of all time</dt>
+ <dd>
+ <ol reversed>
+ <li><cite>Josie and the Pussycats</cite>, 2001</li>
+ <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
+ <li><cite>A Bug's Life</cite>, 1998</li>
+ <li><cite>Toy Story</cite>, 1995</li>
+ <li><cite>Monsters, Inc</cite>, 2001</li>
+ <li><cite>Cars</cite>, 2006</li>
+ <li><cite>Toy Story 2</cite>, 1999</li>
+ <li><cite>Finding Nemo</cite>, 2003</li>
+ <li><cite>The Incredibles</cite>, 2004</li>
+ <li><cite>Ratatouille</cite>, 2007</li>
+ </ol>
+ </dd>
</figure></pre>
</div>
@@ -14812,7 +14762,7 @@
- <h4 id=the-dl-element><span class=secno>4.5.10 </span>The <dfn><code>dl</code></dfn> element</h4>
+ <h4 id=the-dl-element><span class=secno>4.5.9 </span>The <dfn><code>dl</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -14832,7 +14782,9 @@
association list consisting of zero or more name-value groups (a
description list). Each group must consist of one or more names
(<code><a href=#the-dt-element>dt</a></code> elements) followed by one or more values
- (<code><a href=#the-dd-element>dd</a></code> elements).</p>
+ (<code><a href=#the-dd-element>dd</a></code> elements). Within a single <code><a href=#the-dl-element>dl</a></code> element,
+ there should not be more than one <code><a href=#the-dt-element>dt</a></code> element for each
+ name.</p>
<p>Name-value groups may be terms and definitions, metadata topics
and values, or any other groups of name-value data.</p>
@@ -14956,78 +14908,58 @@
</div>
<p class=note>The <code><a href=#the-dl-element>dl</a></code> element is inappropriate for
- marking up dialogue. For an example of how to mark up dialogue, see
- the <code><a href=#the-dialog-element>dialog</a></code> element.</p>
+ marking up dialogue. <a href=#conversations>Examples of how to
+ mark up dialogue</a> are shown below.</p>
- <h4 id=the-dt-element><span class=secno>4.5.11 </span>The <dfn><code>dt</code></dfn> element</h4>
+ <h4 id=the-dt-element><span class=secno>4.5.10 </span>The <dfn><code>dt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Before <code><a href=#the-dd-element>dd</a></code> or <code><a href=#the-dt-element>dt</a></code> elements inside <code><a href=#the-dl-element>dl</a></code> elements.</dd>
- <dd>Before a <code><a href=#the-dd-element>dd</a></code> element inside a <code><a href=#the-dialog-element>dialog</a></code> element.</dd>
+ <dd>As a child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
+ <dd>As a child of a <code><a href=#the-details-element>details</a></code> element.</dd>
<dt>Content model:</dt>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd>When the parent node is a <code><a href=#the-figure-element>figure</a></code> element: <a href=#flow-content>flow content</a>, but with no descendant <code><a href=#the-figure-element>figure</a></code> elements.</dd>
+ <dd>Otherwise: <a href=#phrasing-content>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-dt-element>dt</a></code> element <a href=#represents>represents</a> the term, or
- name, part of a term-description group in a description list
- (<code><a href=#the-dl-element>dl</a></code> element), and the talker, or speaker, part of a
- talker-discourse pair in a conversation (<code><a href=#the-dialog-element>dialog</a></code>
- element).</p>
+ </dl><p>The <code><a href=#the-dt-element>dt</a></code> element <a href=#represents>represents</a> either: the
+ term, or name, part of a term-description group in a description
+ list (<code><a href=#the-dl-element>dl</a></code> element); or, the caption of a
+ <code><a href=#the-figure-element>figure</a></code> element; or, the summary of a
+ <code><a href=#the-details-element>details</a></code> element.</p>
<p class=note>The <code><a href=#the-dt-element>dt</a></code> element itself, when used in a
<code><a href=#the-dl-element>dl</a></code> element, does not indicate that its contents are a
term being defined, but this can be indicated using the
<code><a href=#the-dfn-element>dfn</a></code> element.</p>
- <p>If the <code><a href=#the-dt-element>dt</a></code> element is the child of a
- <code><a href=#the-dialog-element>dialog</a></code> element, and it further contains a
- <code><a href=#the-time-element>time</a></code> element, then that <code><a href=#the-time-element>time</a></code> element
- represents a timestamp for when the associated discourse
- (<code><a href=#the-dd-element>dd</a></code> element) was said, and is not part of the name of
- the talker.</p>
- <div class=example>
- <p>The following extract shows how an IM conversation log could be
- marked up.</p>
- <pre><dialog>
- <dt> <time>14:22</time> egof
- <dd> I'm not that nerdy, I've only seen 30% of the star trek episodes
- <dt> <time>14:23</time> kaj
- <dd> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
- <dt> <time>14:23</time> egof
- <dd> it's unarguably
- <dt> <time>14:24</time> kaj
- <dd> you are not helping your case
-</dialog></pre>
- <!-- with thanks to http://bash.org/?854262 -->
+ <h4 id=the-dd-element><span class=secno>4.5.11 </span>The <dfn><code>dd</code></dfn> element</h4>
- </div>
-
-
- <h4 id=the-dd-element><span class=secno>4.5.12 </span>The <dfn><code>dd</code></dfn> element</h4>
-
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>After <code><a href=#the-dt-element>dt</a></code> or <code><a href=#the-dd-element>dd</a></code> elements inside <code><a href=#the-dl-element>dl</a></code> elements.</dd>
- <dd>After a <code><a href=#the-dt-element>dt</a></code> element inside a <code><a href=#the-dialog-element>dialog</a></code> element.</dd>
+ <dd>As a child of a <code><a href=#the-figure-element>figure</a></code> element.</dd>
+ <dd>As a child of a <code><a href=#the-details-element>details</a></code> element.</dd>
<dt>Content model:</dt>
<dd><a href=#flow-content>Flow 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-dd-element>dd</a></code> element <a href=#represents>represents</a> the
+ </dl><p>The <code><a href=#the-dt-element>dt</a></code> element <a href=#represents>represents</a> either: the
description, definition, or value, part of a term-description group
- in a description list (<code><a href=#the-dl-element>dl</a></code> element), and the discourse,
- or quote, part in a conversation (<code><a href=#the-dialog-element>dialog</a></code> element).</p>
+ in a description list (<code><a href=#the-dl-element>dl</a></code> element); or, the data of a
+ <code><a href=#the-figure-element>figure</a></code> element; or, the details of a
+ <code><a href=#the-details-element>details</a></code> element.</p>
<div class=example>
@@ -15051,61 +14983,8 @@
</div>
- <h4 id=common-grouping-idioms><span class=secno>4.5.13 </span>Common grouping idioms</h4>
- <h5 id=tag-clouds><span class=secno>4.5.13.1 </span>Tag clouds</h5>
- <p id=tag-cloud>This specification does not define any markup
- specifically for marking up lists of keywords that apply to a group
- of pages (also known as <i>tag clouds</i>). In general, authors are
- encouraged to either mark up such lists using <code><a href=#the-ul-element>ul</a></code>
- elements with explicit inline counts that are then hidden and turned
- into a presentational effect using a style sheet, or to use SVG.</p>
-
- <div class=example>
-
- <p>Here, three tags are included in a short tag cloud:</p>
-
- <pre><style>
- at media screen, print, handheld, tv {
- /* should be ignored by non-visual browsers */
- .tag-cloud > li > span { display: none; }
- .tag-cloud > li { display: inline; }
- .tag-cloud-1 { font-size: 0.7em; }
- .tag-cloud-2 { font-size: 0.9em; }
- .tag-cloud-3 { font-size: 1.1em; }
- .tag-cloud-4 { font-size: 1.3em; }
- .tag-cloud-5 { font-size: 1.5em; }
-}
-</style>
-...
-<ul class="tag-cloud">
- <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
- <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
- <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
-</ul></pre>
-
- <p>The actual frequency of each tag is given using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute. A CSS style sheet is
- provided to convert the markup into a cloud of differently-sized
- words, but for user agents that do not support CSS or are not
- visual, the markup contains annotations like "(popular)" or
- "(rare)" to categorize the various tags by frequency, thus enabling
- all users to benefit from the information.</p>
-
- <p>The <code><a href=#the-ul-element>ul</a></code> element is used (rather than
- <code><a href=#the-ol-element>ol</a></code>) because the order is not particular important:
- while the list is in fact ordered alphabetically, it would convey
- the same information if ordered by, say, the length of the tag.</p>
-
- <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>-keyword is <em>not</em> used
- on these <code><a href=#the-a-element>a</a></code> elements because they do not represent tags
- that apply to the page itself; they are just part of an index
- listing the tags themselves.</p>
-
- </div>
-
-
-
<h3 id=text-level-semantics><span class=secno>4.6 </span>Text-level semantics</h3>
<h4 id=the-a-element><span class=secno>4.6.1 </span>The <dfn><code>a</code></dfn> element</h4>
@@ -16281,19 +16160,21 @@
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>
+ <dd>
+ <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>
+ </dd>
+ <dt>
Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
a triangle with sides <var>b</var> and <var>c</var>
- </legend>
+ </dt>
</figure></pre>
</div>
@@ -17707,135 +17588,8 @@
<td>Other
<td><pre class=example>In French we call it <strong><span lang="fr">sirop de sureau</span></strong>.</pre>
- </table><h4 id=footnotes><span class=secno>4.6.26 </span>Footnotes</h4>
+ </table><h3 id=edits><span class=secno>4.7 </span>Edits</h3>
- <p>HTML does not have a dedicated mechanism for marking up
- footnotes. Here are the recommended alternatives.</p>
-
- <p>For short inline annotations, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute should be used.</p>
-
- <div class=example>
-
- <p>In this example, two parts of a dialog are annotated.</p>
-
- <pre><dialog>
- <dt>Customer
- <dd>Hello! I wish to register a complaint. Hello. Miss?
- <dt>Shopkeeper
- <dd><span title="Colloquial pronunciation of 'What do you'"
- >Watcha</span> mean, miss?
- <dt>Customer
- <dd>Uh, I'm sorry, I have a cold. I wish to make a complaint.
- <dt>Shopkeeper
- <dd>Sorry, <span title="This is, of course, a lie.">we're
- closing for lunch</span>.
-</dialog></pre>
-
- </div>
-
- <p>For longer annotations, the <code><a href=#the-a-element>a</a></code> element should be
- used, pointing to an element later in the document. The convention
- is that the contents of the link be a number in square brackets.</p>
-
- <div class=example>
-
- <p>In this example, a footnote in the dialog links to a paragraph
- below the dialog. The paragraph then reciprocally links back to the
- dialog, allowing the user to return to the location of the
- footnote.</p>
-
- <pre><dialog>
- <dt>Announcer
- <dd>Number 16: The <i>hand</i>.
- <dt>Interviewer
- <dd>Good evening. I have with me in the studio tonight Mr
- Norman St John Polevaulter, who for the past few years has
- been contradicting people. Mr Polevaulter, why <em>do</em>
- you contradict people?
- <dt>Norman
- <dd>I don't. <a href="#fn1" id="r1">[1]</a>
- <dt>Interviewer
- <dd>You told me you did!
-</dialog>
-<section>
- <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
- but paradoxically if it were true he could not say so without
- contradicting the interviewer and thus making it false.</p>
-</section></pre>
-
- </div>
-
- <p>For side notes, longer annotations that apply to entire sections
- of the text rather than just specific words or sentences, the
- <code><a href=#the-aside-element>aside</a></code> element should be used.</p>
-
- <div class=example>
-
- <p>In this example, a sidebar is given after a dialog, giving some
- context to the dialog.</p>
-
- <pre><dialog>
- <dt>Customer
- <dd>I will not buy this record, it is scratched.
- <dt>Shopkeeper
- <dd>I'm sorry?
- <dt>Customer
- <dd>I will not buy this record, it is scratched.
- <dt>Shopkeeper
- <dd>No no no, this's'a tobacconist's.
-</dialog>
-<aside>
- <p>In 1970, the British Empire lay in ruins, and foreign
- nationalists frequented the streets — many of them Hungarians
- (not the streets — the foreign nationals). Sadly, Alexander
- Yalt has been publishing incompetently-written phrase books.
-</aside></pre>
-
- </div>
-
- <p>For figures or tables, footnotes can be included in the relevant
- <code><a href=#the-legend-element>legend</a></code> or <code><a href=#the-caption-element>caption</a></code> element, or in
- surrounding prose.</p>
-
- <div class=example>
-
- <p>In this example, a <!-- round --> table has cells with footnotes
- that are given in prose. A <code><a href=#the-figure-element>figure</a></code> element is used to
- give a single legend to the combination of the table and its
- footnotes.</p>
-
- <pre><figure>
- <legend>Table 1. Alternative activities for knights.</legend>
- <table>
- <tr>
- <th> Activity
- <th> Location
- <th> Cost
- <tr>
- <td> Dance
- <td> Wherever possible
- <td> £0<sup><a href="#fn1">1</a></sup>
- <tr>
- <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
- <td> Undisclosed
- <td> Undisclosed
- <tr>
- <td> Dining<sup><a href="#fn3">3</a></sup>
- <td> Camelot
- <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
- </table>
- <p id="fn1">1. Assumed.</p>
- <p id="fn2">2. Footwork impeccable.</p>
- <p id="fn3">3. Quality described as "well".</p>
- <p id="fn4">4. A lot.</p>
-</figure></pre>
-
- </div>
-
-
-
- <h3 id=edits><span class=secno>4.7 </span>Edits</h3>
-
<p>The <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements represent
edits to the document.</p>
@@ -18146,14 +17900,12 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
<dt>Content model:</dt>
- <dd>Either: one <code><a href=#the-legend-element>legend</a></code> element followed by <a href=#flow-content>flow content</a>.</dd>
- <dd>Or: <a href=#flow-content>Flow content</a> followed by one <code><a href=#the-legend-element>legend</a></code> element.</dd>
- <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
+ <dd>In any order, one <code><a href=#the-dd-element>dd</a></code> element, and optionally one <code><a href=#the-dt-element>dt</a></code> element.</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><!-- v2: Add a <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
+ </dl><!-- v2: Add a <dc> or <credit> element for photo credits --><p>The <code><a href=#the-figure-element>figure</a></code> element <a href=#represents>represents</a> some
<a href=#flow-content>flow content</a>, optionally with a caption, that is
self-contained and is typically referenced as a single unit from the
main flow of the document.</p>
@@ -18164,13 +17916,15 @@
of the document, be moved away from that primary content, e.g. to
the side of the page, to dedicated pages, or to an appendix.</p>
- <p>The first <code><a href=#the-legend-element>legend</a></code> element child of the element, if
- any, represents the caption of the <code><a href=#the-figure-element>figure</a></code> element's
- contents. If there is no child <code><a href=#the-legend-element>legend</a></code> element, then
- there is no caption.</p>
+ <p>The <span class=impl>first</span> <code><a href=#the-dt-element>dt</a></code> element child
+ of the element, if any, represents the caption of the
+ <code><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
+ <code><a href=#the-dt-element>dt</a></code> element, then there is no caption.</p>
- <p>The remainder of the element's contents, if any, represents the
- content.</p>
+ <p>The <span class=impl>first</span> <code><a href=#the-dd-element>dd</a></code> element child
+ of the element<span class=impl>, if any,</span> represents the
+ element's contents. <span class=impl>If there is no child
+ <code><a href=#the-dd-element>dd</a></code> element, then there is no caption.</span></p>
<div class=example>
@@ -18180,12 +17934,14 @@
<pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
- <legend>Listing 4. The primary core interface API declaration.</legend>
- <pre><code>interface PrimaryCore {
+ <dt>Listing 4. The primary core interface API declaration.</dt>
+ <dd>
+ <pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
+ </dd>
</figure>
<p>The API is designed to use UTF-8.</p></pre>
@@ -18197,10 +17953,12 @@
photo.</p>
<pre><figure>
- <img src="bubbles-work.jpeg"
- alt="Bubbles, sitting in his office chair, works on his
- latest project intently.">
- <legend>Bubbles at work</legend>
+ <dd>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ </dd>
+ <dt>Bubbles at work</dt>
</figure></pre>
</div>
@@ -18214,25 +17972,27 @@
<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
-after a trailer ending with these words:</p>
+after a trailer ending with these words:
-<img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+<blockquote>
+ <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+</blockquote>
<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
-included with Exhibit B.</p>
+included with Exhibit B.
<figure>
- <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- <legend>Exhibit A. The alleged <cite>rough copy</cite> comic.</legend>
+ <dd><img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <dt>Exhibit A. The alleged <cite>rough copy</cite> comic.
</figure>
<figure>
- <video src="ex-b.mov"></video>
- <legend>Exhibit B. The <cite>Rough Copy</cite> trailer.</legend>
+ <dd><video src="ex-b.mov"></video>
+ <dt>Exhibit B. The <cite>Rough Copy</cite> trailer.
</figure>
-<p>The case was resolved out of court.</p></pre>
+<p>The case was resolved out of court.</pre>
</div>
@@ -18242,11 +18002,13 @@
<code><a href=#the-figure-element>figure</a></code>.</p>
<pre><figure>
- <p>'Twas brillig, and the slithy toves<br>
-Did gyre and gimble in the wabe;<br>
-All mimsy were the borogoves,<br>
-And the mome raths outgrabe.</p>
- <legend><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</legend>
+ <dd>
+ <p>'Twas brillig, and the slithy toves<br>
+ Did gyre and gimble in the wabe;<br>
+ All mimsy were the borogoves,<br>
+ And the mome raths outgrabe.</p>
+ </dd>
+ <dt><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</dt>
</figure></pre>
</div>
@@ -18257,13 +18019,15 @@
discussing a castle, the figure has three images in it.</p>
<pre><figure>
- <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
- alt="The castle has one tower, and a tall wall around it.">
- <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
- alt="The castle now has two towers and two walls.">
- <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
- alt="The castle lies in ruins, the original tower all that remains in one piece.">
- <legend>The castle through the ages: 1423, 1858, and 1999 respectively.</legend>
+ <dd>
+ <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+ alt="The castle has one tower, and a tall wall around it.">
+ <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+ alt="The castle now has two towers and two walls.">
+ <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
+ alt="The castle lies in ruins, the original tower all that remains in one piece.">
+ </dd>
+ <dt>The castle through the ages: 1423, 1858, and 1999 respectively.</dt>
</figure></pre>
</div>
@@ -18528,8 +18292,8 @@
steps.</li>
<li><p>If the image is the child of a <code><a href=#the-figure-element>figure</a></code> element
- that has a child <code><a href=#the-legend-element>legend</a></code> element, then the contents
- of the first such <code><a href=#the-legend-element>legend</a></code> element are the caption
+ that has a child <code><a href=#the-dt-element>dt</a></code> element, then the contents of
+ the first such <code><a href=#the-dt-element>dt</a></code> element are the caption
information; abort these steps.</li>
<li><p>Run the algorithm to create the <a href=#outline>outline</a> for
@@ -18925,7 +18689,7 @@
<p>Text such as "Photo of white house with boarded door" would be
equally bad alternative text (though it could be suitable for the
<code title=attr-title><a href=#the-title-attribute>title</a></code> attribute or in the
- <code><a href=#the-legend-element>legend</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
+ <code><a href=#the-dt-element>dt</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
image).</p>
</div>
@@ -19110,10 +18874,10 @@
<p>In these cases, it would be wrong to include alternative text
that consists of just a caption. If a caption is to be included,
then either the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can
- be used, or the <code><a href=#the-figure-element>figure</a></code> and <code><a href=#the-legend-element>legend</a></code>
- elements can be used. In the latter case, the image would in fact
- be a phrase or paragraph with an alternative graphical
- representation, and would thus require alternative text.</p>
+ be used, or the <code><a href=#the-figure-element>figure</a></code> and <code><a href=#the-dt-element>dt</a></code> elements
+ can be used. In the latter case, the image would in fact be a
+ phrase or paragraph with an alternative graphical representation,
+ and would thus require alternative text.</p>
<pre><!-- Using the title="" attribute -->
<p>The network passes data to the Tokenizer stage, which
@@ -19124,20 +18888,22 @@
<p><strong><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></strong></p></pre>
- <pre><!-- Using <figure> and <legend> -->
+ <pre><!-- Using <figure> and <dt> -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<figure>
- <strong><img src="images/parsing-model-overview.png" alt="The Network leads
- to the Tokenizer, which leads to the Tree Construction. The Tree
- Construction leads to two items. The first is Script Execution, which
- leads via document.write() back to the Tokenizer. The second item
- from which Tree Construction leads is the DOM. The DOM is related to
- the Script Execution."></strong>
- <legend>Flowchart representation of the parsing model.</legend>
+ <dd>
+ <strong><img src="images/parsing-model-overview.png" alt="The Network leads
+ to the Tokenizer, which leads to the Tree Construction. The Tree
+ Construction leads to two items. The first is Script Execution, which
+ leads via document.write() back to the Tokenizer. The second item
+ from which Tree Construction leads is the DOM. The DOM is related to
+ the Script Execution."></strong>
+ </dd>
+ <dt>Flowchart representation of the parsing model.</dt>
</figure></pre>
<pre class=bad><!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
@@ -19298,17 +19064,19 @@
some alternative text:</p>
<pre><figure>
- <strong><img src="KDE%20Light%20desktop.png"
- alt="The desktop is blue, with icons along the left hand side in
- two columns, reading System, Home, K-Mail, etc. A window is
- open showing that menus wrap to a second line if they
- cannot fit in the window. The window has a list of icons
- along the top, with an address bar below it, a list of
- icons for tabs along the left edge, a status bar on the
- bottom, and two panes in the middle. The desktop has a bar
- at the bottom of the screen with a few buttons, a pager, a
- list of open applications, and a clock."></strong>
- <legend>Screenshot of a KDE desktop.</legend>
+ <dd>
+ <strong><img src="KDE%20Light%20desktop.png"
+ alt="The desktop is blue, with icons along the left hand side in
+ two columns, reading System, Home, K-Mail, etc. A window is
+ open showing that menus wrap to a second line if they
+ cannot fit in the window. The window has a list of icons
+ along the top, with an address bar below it, a list of
+ icons for tabs along the left edge, a status bar on the
+ bottom, and two panes in the middle. The desktop has a bar
+ at the bottom of the screen with a few buttons, a pager, a
+ list of open applications, and a clock."></strong>
+ </dd>
+ <dt>Screenshot of a KDE desktop.</dt>
</figure></pre>
</div>
@@ -19352,14 +19120,14 @@
if brief, is still better than nothing:</p>
<pre><figure>
- <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ <dd><strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
- the center extending below the sides."></strong>
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+ the center extending below the sides."></strong></dd>
+ <dt>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</dt>
</figure></pre>
<p>Note that the following would be a very bad use of alternative
@@ -19367,10 +19135,10 @@
<pre class=bad><!-- This example is wrong. Do not copy it. -->
<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+ <dd><img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test."></dd>
+ <dt>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</dt>
</figure></pre>
<p>Including the caption in the alternative text like this isn't
@@ -19422,7 +19190,7 @@
present and has a non-empty value.</li>
<li>The <code><a href=#the-img-element>img</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
- element that contains a <code><a href=#the-legend-element>legend</a></code> element that contains
+ element that contains a <code><a href=#the-dt-element>dt</a></code> element that contains
content other than <a href=#inter-element-whitespace>inter-element whitespace</a>.</li>
<li>The <code><a href=#the-img-element>img</a></code> element is part of the only
@@ -19443,8 +19211,8 @@
image with no metadata other than the caption:</p>
<pre><figure>
- <strong><img src="1100670787_6a7c664aef.jpg"></strong>
- <legend>Bubbles traveled everywhere with us.</legend>
+ <dd><strong><img src="1100670787_6a7c664aef.jpg"></strong></dd>
+ <dt>Bubbles traveled everywhere with us.</dt>
</figure></pre>
<p>It could also be marked up like this:</p>
@@ -19470,8 +19238,8 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <strong><img src="photo2.jpeg"></strong>
- <legend>A photograph taken blindly from my front porch.</legend>
+ <dd><strong><img src="photo2.jpeg"></strong></dd>
+ <dt>A photograph taken blindly from my front porch.</dt>
</figure>
</article></pre>
@@ -19482,13 +19250,13 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
+ <dd><strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
feeder hanging from the edge of my roof. It is half full, but there
are no birds around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
- with light blue streaks."></strong>
- <legend>A photograph taken blindly from my front porch.</legend>
+ with light blue streaks."></strong></dd>
+ <dt>A photograph taken blindly from my front porch.</dt>
</figure>
</article></pre>
@@ -20881,11 +20649,13 @@
not support third-party technologies like Java.)</p>
<pre><figure>
- <object type="application/x-java-applet">
- <param name="code" value="MyJavaClass">
- <p>You do not have Java available, or it is disabled.</p>
- </object>
- <legend>My Java Clock</legend>
+ <dd>
+ <object type="application/x-java-applet">
+ <param name="code" value="MyJavaClass">
+ <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ </dd>
+ <dt>My Java Clock</dt>
</figure></pre>
</div>
@@ -20896,8 +20666,8 @@
<code><a href=#the-object-element>object</a></code> element.</p>
<pre><figure>
- <object data="clock.html"></object>
- <legend>My HTML Clock</legend>
+ <dd><object data="clock.html"></object>
+ <dt>My HTML Clock
</figure></pre>
</div>
@@ -27937,10 +27707,12 @@
<caption>
<strong>Characteristics with positive and negative sides.</strong>
<details>
- <legend>Help</legend>
- <p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.</p>
+ <dt>Help</dt>
+ <dd>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ </dd>
</details>
</caption>
<thead>
@@ -27964,57 +27736,61 @@
<dd>
<div class=example><pre><figure>
- <legend>Characteristics with positive and negative sides</legend>
- <p>Characteristics are given in the second
- column, with the negative side in the left column and the positive
- side in the right column.</p>
- <table>
- <thead>
- <tr>
- <th id="n"> Negative
- <th> Characteristic
- <th> Positive
- <tbody>
- <tr>
- <td headers="n r1"> Sad
- <th id="r1"> Mood
- <td> Happy
- <tr>
- <td headers="n r2"> Failing
- <th id="r2"> Grade
- <td> Passing
- </table>
-<figure>
+ <dt>Characteristics with positive and negative sides</dt>
+ <dd>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ <table>
+ <thead>
+ <tr>
+ <th id="n"> Negative
+ <th> Characteristic
+ <th> Positive
+ <tbody>
+ <tr>
+ <td headers="n r1"> Sad
+ <th id="r1"> Mood
+ <td> Happy
+ <tr>
+ <td headers="n r2"> Failing
+ <th id="r2"> Grade
+ <td> Passing
+ </table>
+ </dd>
+</figure>
</pre></div>
</dd>
- <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-legend-element>legend</a></code></dt>
+ <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-dt-element>dt</a></code></dt>
<dd>
<div class=example><pre><figure>
- <legend>
+ <dt>
<strong>Characteristics with positive and negative sides</strong>
- <p>Characteristics are given in the second
- column, with the negative side in the left column and the positive
- side in the right column.</p>
- </legend>
- <table>
- <thead>
- <tr>
- <th id="n"> Negative
- <th> Characteristic
- <th> Positive
- <tbody>
- <tr>
- <td headers="n r1"> Sad
- <th id="r1"> Mood
- <td> Happy
- <tr>
- <td headers="n r2"> Failing
- <th id="r2"> Grade
- <td> Passing
- </table>
-<figure>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ </dt>
+ <dd>
+ <table>
+ <thead>
+ <tr>
+ <th id="n"> Negative
+ <th> Characteristic
+ <th> Positive
+ <tbody>
+ <tr>
+ <td headers="n r1"> Sad
+ <th id="r1"> Mood
+ <td> Happy
+ <tr>
+ <td headers="n r2"> Failing
+ <th id="r2"> Grade
+ <td> Passing
+ </table>
+ </dd>
+</figure>
</pre></div>
</dd>
@@ -28342,10 +28118,10 @@
</div>
- <p>When a <code><a href=#the-table-element>table</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
- element alone but for the <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-legend-element>legend</a></code>,
- the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
- <code><a href=#the-legend-element>legend</a></code>.</p>
+ <p>When a <code><a href=#the-table-element>table</a></code> element is the only content in a
+ <code><a href=#the-figure-element>figure</a></code> element's <code><a href=#the-dd-element>dd</a></code>, the
+ <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
+ <code><a href=#the-dt-element>dt</a></code>.</p>
<p>A caption can introduce context for a table, making it
significantly easier to understand.</p>
@@ -39108,7 +38884,7 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
<dt>Content model:</dt>
- <dd>One <code><a href=#the-legend-element>legend</a></code> element followed by <a href=#flow-content>flow content</a>.</dd>
+ <dd>One <code><a href=#the-dt-element>dt</a></code> element followed by one <code><a href=#the-dd-element>dd</a></code> element.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dd><code title=attr-details-open><a href=#attr-details-open>open</a></code></dd>
@@ -39125,16 +38901,17 @@
for footnotes. Please see <a href=#footnotes>the section on
footnotes</a> for details on how to mark up footnotes.</p>
- <p>The first element child of a <code><a href=#the-details-element>details</a></code> element, <span class=impl>if it is</span> a <code><a href=#the-legend-element>legend</a></code> element,
- <a href=#represents>represents</a> the summary of the details.</p>
+ <p>The <span class=impl>first</span> <code><a href=#the-dt-element>dt</a></code> element child
+ of the element<span class=impl>, if any,</span>
+ <a href=#represents>represents</a> the summary of the details. <span class=impl>If there is no child <code><a href=#the-dt-element>dt</a></code> element, the user
+ agent should provide its own legend (e.g. "Details").</span></p>
- <div class=impl>
+ <p>The <span class=impl>first</span> <code><a href=#the-dd-element>dd</a></code> element child
+ of the element<span class=impl>, if any,</span>
+ <a href=#represents>represents</a> the details. <span class=impl>If there is
+ no child <code><a href=#the-dd-element>dd</a></code> element, then there are no
+ details.</span></p>
- <p>If the first element is not a <code><a href=#the-legend-element>legend</a></code> element, the
- UA should provide its own legend (e.g. "Details").</p>
-
- </div>
-
<p>The <dfn id=attr-details-open title=attr-details-open><code>open</code></dfn>
content attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present,
it indicates that the details are to be shown to the user. If the
@@ -39165,15 +38942,17 @@
<pre><section class="progress window">
<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
<details>
- <legend>Copying... <progress max="375505392" value="97543282"></progress> 25%</legend>
- <dl>
- <dt>Transfer rate:</dt> <dd>452KB/s</dd>
- <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
- <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
- <dt>Duration:</dt> <dd>01:16:27</dd>
- <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
- <dt>Dimensions:</dt> <dd>320×240</dd>
- </dl>
+ <dt>Copying... <progress max="375505392" value="97543282"></progress> 25%</dt>
+ <dd>
+ <dl>
+ <dt>Transfer rate:</dt> <dd>452KB/s</dd>
+ <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
+ <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
+ <dt>Duration:</dt> <dd>01:16:27</dd>
+ <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
+ <dt>Dimensions:</dt> <dd>320×240</dd>
+ </dl>
+ </dd>
</details>
</section></pre>
@@ -42916,11 +42695,8 @@
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>As the first child of a <code><a href=#the-fieldset-element>fieldset</a></code> element.</dd>
- <dd>As the first child of a <code><a href=#the-details-element>details</a></code> element.</dd>
- <dd>As the first or last child of a <code><a href=#the-figure-element>figure</a></code> element, if there are no other <code><a href=#the-legend-element>legend</a></code> element children of that element.</dd>
<dt>Content model:</dt>
- <dd>When the parent node is a <code><a href=#the-figure-element>figure</a></code> element: <a href=#flow-content>flow content</a>, but with no descendant <code><a href=#the-figure-element>figure</a></code> elements.</dd>
- <dd>Otherwise: <a href=#phrasing-content>phrasing content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
@@ -42929,9 +42705,10 @@
readonly attribute <a href=#htmlformelement>HTMLFormElement</a> <a href=#dom-legend-form title=dom-legend-form>form</a>;
};</pre>
</dd>
- </dl><p>The <code><a href=#the-legend-element>legend</a></code> element <a href=#represents>represents</a> a title
- or explanatory caption for the rest of the contents of the
- <code><a href=#the-legend-element>legend</a></code> element's parent element.</p>
+ </dl><p>The <code><a href=#the-legend-element>legend</a></code> element <a href=#represents>represents</a> a caption
+ for the rest of the contents of the <code><a href=#the-legend-element>legend</a></code> element's
+ parent <code><a href=#the-fieldset-element>fieldset</a></code> element<span class=impl>, if
+ any</span>.</p>
<dl class=domintro><dt><var title="">legend</var> . <code title=dom-legend-form><a href=#dom-legend-form>form</a></code></dt>
@@ -43014,11 +42791,218 @@
</div>
+ <h3 id=common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</h3>
+ <h5 id=tag-clouds><span class=secno>4.13.1 </span>Tag clouds</h5>
+ <p id=tag-cloud>This specification does not define any markup
+ specifically for marking up lists of keywords that apply to a group
+ of pages (also known as <i>tag clouds</i>). In general, authors are
+ encouraged to either mark up such lists using <code><a href=#the-ul-element>ul</a></code>
+ elements with explicit inline counts that are then hidden and turned
+ into a presentational effect using a style sheet, or to use SVG.</p>
+
+ <div class=example>
+
+ <p>Here, three tags are included in a short tag cloud:</p>
+
+ <pre><style>
+ at media screen, print, handheld, tv {
+ /* should be ignored by non-visual browsers */
+ .tag-cloud > li > span { display: none; }
+ .tag-cloud > li { display: inline; }
+ .tag-cloud-1 { font-size: 0.7em; }
+ .tag-cloud-2 { font-size: 0.9em; }
+ .tag-cloud-3 { font-size: 1.1em; }
+ .tag-cloud-4 { font-size: 1.3em; }
+ .tag-cloud-5 { font-size: 1.5em; }
+}
+</style>
+...
+<ul class="tag-cloud">
+ <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
+ <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
+ <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
+</ul></pre>
+
+ <p>The actual frequency of each tag is given using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute. A CSS style sheet is
+ provided to convert the markup into a cloud of differently-sized
+ words, but for user agents that do not support CSS or are not
+ visual, the markup contains annotations like "(popular)" or
+ "(rare)" to categorize the various tags by frequency, thus enabling
+ all users to benefit from the information.</p>
+
+ <p>The <code><a href=#the-ul-element>ul</a></code> element is used (rather than
+ <code><a href=#the-ol-element>ol</a></code>) because the order is not particular important:
+ while the list is in fact ordered alphabetically, it would convey
+ the same information if ordered by, say, the length of the tag.</p>
+
+ <p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>-keyword is <em>not</em> used
+ on these <code><a href=#the-a-element>a</a></code> elements because they do not represent tags
+ that apply to the page itself; they are just part of an index
+ listing the tags themselves.</p>
+
+ </div>
+
+
+ <h4 id=conversations><span class=secno>4.13.2 </span>Conversations</h4>
+
+ <p>This specification does not define a specific element for marking
+ up conversations, meeting minutes, chat transcripts, dialogues in
+ screenplays, instant message logs, and other situations where
+ different players take turns in discourse.</p>
+
+ <p>Instead, authors are encouraged to mark up conversations using
+ <code><a href=#the-p-element>p</a></code> elements, with the <code><a href=#the-b-element>b</a></code> element for marking
+ up the speaker, optionally separated from their lines with
+ punctuation. Paragraphs with their text wrapped in the
+ <code><a href=#the-i-element>i</a></code> element can be used for marking up stage
+ directions.</p>
+
+ <div class=example>
+
+ <p>This example demonstrates this using an extract from Abbot and
+ Costello's famous sketch, <cite>Who's on first</cite>:</p>
+
+<pre><p> <b>Costello</b>: Look, you gotta first baseman?
+<p> <b>Abbott</b>: Certainly.
+<p> <b>Costello</b>: Who's playing first?
+<p> <b>Abbott</b>: That's right.
+<p> <i>Costello becomes exasperated.</i>
+<p> <b>Costello</b>: When you pay off the first baseman every month, who gets the money?
+<p> <b>Abbott</b>: Every dollar of it.</pre>
+
+ </div>
+
+ <div class=example>
+
+ <p>The following extract shows how an IM conversation log could be
+ marked up.</p>
+
+ <pre><p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
+<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
+<p> <time>14:23</time> <b>egof</b> it's unarguably
+<p> <time>14:24</time> <b>kaj</b> you are not helping your case</pre>
+ <!-- with thanks to http://bash.org/?854262 -->
+
+ </div>
+
+
+ <h4 id=footnotes><span class=secno>4.13.3 </span>Footnotes</h4>
+
+ <p>HTML does not have a dedicated mechanism for marking up
+ footnotes. Here are the recommended alternatives.</p>
+
+ <hr><p>For short inline annotations, the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute should be used.</p>
+
+ <div class=example>
+
+ <p>In this example, two parts of a dialogue are annotated.</p>
+
+ <pre><p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
+<p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'"
+>Watcha</span> mean, miss?
+<p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
+<p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
+closing for lunch</span>.</pre>
+
+ </div>
+
+ <hr><p>For longer annotations, the <code><a href=#the-a-element>a</a></code> element should be
+ used, pointing to an element later in the document. The convention
+ is that the contents of the link be a number in square brackets.</p>
+
+ <div class=example>
+
+ <p>In this example, a footnote in the dialogue links to a paragraph
+ below the dialogue. The paragraph then reciprocally links back to the
+ dialogue, allowing the user to return to the location of the
+ footnote.</p>
+
+ <pre><p> <b>Announcer</b>: Number 16: The <i>hand</i>.
+<p> <b>Interviewer</b>: Good evening. I have with me in the
+studio tonight Mr Norman St John Polevaulter, who for the past few
+years has been contradicting people. Mr Polevaulter, why
+<em>do</em> you contradict people?
+<p> <b>Norman</b>: I don't. <a href="#fn1" id="r1">[1]</a>
+<p> <b>Interviewer</b>: You told me you did!
+<em>...</em>
+<section>
+ <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
+ but paradoxically if it were true he could not say so without
+ contradicting the interviewer and thus making it false.</p>
+</section></pre>
+
+ </div>
+
+ <hr><p>For side notes, longer annotations that apply to entire sections
+ of the text rather than just specific words or sentences, the
+ <code><a href=#the-aside-element>aside</a></code> element should be used.</p>
+
+ <div class=example>
+
+ <p>In this example, a sidebar is given after a dialogue, giving it
+ some context.</p>
+
+ <pre><p> <b>Customer</b>: I will not buy this record, it is scratched.
+<p> <b>Shopkeeper</b>: I'm sorry?
+<p> <b>Customer</b>: I will not buy this record, it is scratched.
+<p> <b>Shopkeeper</b>: No no no, this's'a tobacconist's.
+<aside>
+ <p>In 1970, the British Empire lay in ruins, and foreign
+ nationalists frequented the streets — many of them Hungarians
+ (not the streets — the foreign nationals). Sadly, Alexander
+ Yalt has been publishing incompetently-written phrase books.
+</aside></pre>
+
+ </div>
+
+ <hr><p>For figures or tables, footnotes can be included in the relevant
+ <code><a href=#the-dt-element>dt</a></code> or <code><a href=#the-caption-element>caption</a></code> element, or in surrounding
+ prose.</p>
+
+ <div class=example>
+
+ <p>In this example, a <!-- round --> table has cells with footnotes
+ that are given in prose. A <code><a href=#the-figure-element>figure</a></code> element is used to
+ give a single legend to the combination of the table and its
+ footnotes.</p>
+
+ <pre><figure>
+ <dt>Table 1. Alternative activities for knights.</dt>
+ <dd>
+ <table>
+ <tr>
+ <th> Activity
+ <th> Location
+ <th> Cost
+ <tr>
+ <td> Dance
+ <td> Wherever possible
+ <td> £0<sup><a href="#fn1">1</a></sup>
+ <tr>
+ <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
+ <td> Undisclosed
+ <td> Undisclosed
+ <tr>
+ <td> Dining<sup><a href="#fn3">3</a></sup>
+ <td> Camelot
+ <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
+ </table>
+ <p id="fn1">1. Assumed.</p>
+ <p id="fn2">2. Footwork impeccable.</p>
+ <p id="fn3">3. Quality described as "well".</p>
+ <p id="fn4">4. A lot.</p>
+ </dd>
+</figure></pre>
+
+ </div>
+
+
+
<div class=impl>
- <h3 id=matching-html-elements-using-selectors><span class=secno>4.13 </span>Matching HTML elements using selectors</h3>
+ <h3 id=matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</h3>
<p>There are a number of dynamic selectors that can be used with
HTML. This section defines when these selectors match HTML
@@ -43530,14 +43514,14 @@
following two examples:</p>
<pre><figure>
- <img src="castle.jpeg">
- <legend><span item><span itemprop="name">The Castle</span></span> (1986)</legend>
+ <dd><img src="castle.jpeg">
+ <dt><span item><span itemprop="name">The Castle</span></span> (1986)
</figure></pre>
<pre><span item><meta itemprop="name" content="The Castle"></span>
<figure>
- <img src="castle.jpeg">
- <legend>The Castle (1986)</legend>
+ <dd><img src="castle.jpeg">
+ <dt>The Castle (1986)
</figure></pre>
<p>Both have a figure with a caption, and both, completely
@@ -46090,8 +46074,8 @@
simultaneously.</p>
<pre><figure <strong>item="work"</strong>>
- <img <strong>itemprop="about"</strong> src="mypond.jpeg">
- <legend>
+ <dd><img <strong>itemprop="about"</strong> src="mypond.jpeg">
+ <dt>
<p><cite <strong>itemprop="title"</strong>>My Pond</cite></p>
<p><small>Licensed under the <a <strong>itemprop="license"</strong>
href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative
@@ -46099,7 +46083,6 @@
and the <a <strong>itemprop="license"</strong>
href="http://www.opensource.org/licenses/mit-license.php">MIT
license</a>.</small>
- </legend>
</figure></pre>
</div>
@@ -55702,8 +55685,8 @@
<a href="../">Return to photo index</a>
</nav>
<figure>
- <img src="/pix/39627052_fd8dcd98b5.jpg">
- <legend>Kissat</legend>
+ <dd><img src="/pix/39627052_fd8dcd98b5.jpg">
+ <dt>Kissat
</figure>
<p>One of them has six toes!</p>
<p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
@@ -61192,6 +61175,8 @@
immediately followed by another <code><a href=#the-li-element>li</a></code> element or if there
is no more content in the parent element.</p>
+ <!-- </dc> and </ds> can be added here one they are invented -->
+
<!-- </dt> -->
<p>A <code><a href=#the-dt-element>dt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
tag</a> may be omitted if the <code><a href=#the-dt-element>dt</a></code> element is
@@ -61210,13 +61195,13 @@
tag</a> may be omitted if the <code><a href=#the-p-element>p</a></code> element is
immediately followed by an <code><a href=#the-address-element>address</a></code>,
<code><a href=#the-article-element>article</a></code>, <code><a href=#the-aside-element>aside</a></code>, <code><a href=#the-blockquote-element>blockquote</a></code>,
- <!--v2DATAGRID <code>datagrid</code>,--> <code><a href=#the-dialog-element>dialog</a></code>,
- <code><a href=#dir>dir</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>,
- <code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>,
- <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>,
- <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>,
- <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#menus>menu</a></code>,
- <code><a href=#the-nav-element>nav</a></code>, <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
+ <!--v2DATAGRID <code>datagrid</code>,--> <code><a href=#dir>dir</a></code>,
+ <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
+ <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>,
+ <code><a href=#the-hr-element>hr</a></code>, <code><a href=#menus>menu</a></code>, <code><a href=#the-nav-element>nav</a></code>,
+ <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
<code><a href=#the-section-element>section</a></code>, <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>,
element, or if there is no more content in the parent element and
the parent element is not an <code><a href=#the-a-element>a</a></code> element.</p>
@@ -62433,8 +62418,9 @@
<code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-br-element>br</a></code>,
<code><a href=#center>center</a></code>, <code><a href=#the-col-element>col</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>,
<code><a href=#the-command>command</a></code>, <!--v2DDATAGRID--><code>datagrid</code>,
- <code><a href=#the-dd-element>dd</a></code>, <code><a href=#the-details-element>details</a></code>, <code><a href=#the-dialog-element>dialog</a></code>,
- <code><a href=#dir>dir</a></code>, <code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>,
+ <code>dc</code><!-- speculative -->, <code><a href=#the-dd-element>dd</a></code>,
+ <code><a href=#the-details-element>details</a></code>, <code><a href=#dir>dir</a></code>, <code><a href=#the-div-element>div</a></code>,
+ <code><a href=#the-dl-element>dl</a></code>, <code>ds</code><!-- speculative -->,
<code><a href=#the-dt-element>dt</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
<code><a href=#the-figure-element>figure</a></code>, <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>,
<code><a href=#frame>frame</a></code>, <code><a href=#frameset>frameset</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
@@ -64321,9 +64307,11 @@
</ol><h5 id=closing-elements-that-have-implied-end-tags><span class=secno>9.2.5.2 </span>Closing elements that have implied end tags</h5>
+ <!-- <dc> and <ds> are here speculatively for future expansion (they're not defined elements yet) -->
<p>When the steps below require the UA to <dfn id=generate-implied-end-tags>generate implied end
tags</dfn>, then, while the <a href=#current-node>current node</a> is a
- <code><a href=#the-dd-element>dd</a></code> element, a <code><a href=#the-dt-element>dt</a></code> element, an
+ <code>dc</code> element, a <code><a href=#the-dd-element>dd</a></code> element, a
+ <code>ds</code> element, a <code><a href=#the-dt-element>dt</a></code> element, an
<code><a href=#the-li-element>li</a></code> element, an <code><a href=#the-option-element>option</a></code> element, an
<code><a href=#the-optgroup-element>optgroup</a></code> element, a <code><a href=#the-p-element>p</a></code> element, an
<code><a href=#the-rp-element>rp</a></code> element, or an <code><a href=#the-rt-element>rt</a></code> element, the UA must
@@ -65117,14 +65105,15 @@
<dd>
<p>If there is a node in the <a href=#stack-of-open-elements>stack of open elements</a>
- that is not either a <code><a href=#the-dd-element>dd</a></code> element, a <code><a href=#the-dt-element>dt</a></code>
- element, an <code><a href=#the-li-element>li</a></code> element, a <code><a href=#the-p-element>p</a></code> element, a
+ that is not either a <code>dc</code> element, a <code><a href=#the-dd-element>dd</a></code>
+ element, a <code>ds</code> element, a <code><a href=#the-dt-element>dt</a></code> element, an
+ <code><a href=#the-li-element>li</a></code> element, a <code><a href=#the-p-element>p</a></code> element, a
<code><a href=#the-tbody-element>tbody</a></code> element, a <code><a href=#the-td-element>td</a></code> element, a
<code><a href=#the-tfoot-element>tfoot</a></code> element, a <code><a href=#the-th-element>th</a></code> element, a
<code><a href=#the-thead-element>thead</a></code> element, a <code><a href=#the-tr-element>tr</a></code> element, the
<code><a href=#the-body-element-0>body</a></code> element, or the <code><a href=#the-html-element-0>html</a></code> element, then
this is a <a href=#parse-error>parse error</a>.</p> <!-- (some of those are
- fragment cases) -->
+ fragment cases) --> <!-- <dc> and <ds> are there speculatively -->
<p><a href=#stop-parsing>Stop parsing</a>.</p>
@@ -65141,7 +65130,8 @@
body". -->
<p>Otherwise, if there is a node in the <a href=#stack-of-open-elements>stack of open
- elements</a> that is not either a <code><a href=#the-dd-element>dd</a></code> element, a
+ elements</a> that is not either a <code>dc</code> element, a
+ <code><a href=#the-dd-element>dd</a></code> element, a <code>ds</code> element, a
<code><a href=#the-dt-element>dt</a></code> element, an <code><a href=#the-li-element>li</a></code> element, an
<code><a href=#the-optgroup-element>optgroup</a></code> element, an <code><a href=#the-option-element>option</a></code> element, a
<code><a href=#the-p-element>p</a></code> element, an <code><a href=#the-rp-element>rp</a></code> element, an
@@ -65152,7 +65142,8 @@
<code><a href=#the-html-element-0>html</a></code> element, then this is a <a href=#parse-error>parse
error</a>.</p> <!-- (some of those are fragment cases, e.g. for
<tbody> you'd have hit the first paragraph since the <body>
- wouldn't be in scope, unless it was a fragment case) -->
+ wouldn't be in scope, unless it was a fragment case) --> <!-- <dc>
+ and <ds> are there speculatively -->
<!-- If we ever change the frameset-ok flag to an insertion mode,
then we'd have to somehow keep track of its state when we switch
@@ -65179,9 +65170,8 @@
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", <!--v2DATAGRID-->"datagrid",
- "details", "dialog", "dir", "div", "dl", "fieldset", "figure",
- "footer", "header", "hgroup", "menu", "nav", "ol", "p", "section",
- "ul"</dt>
+ "details", "dir", "div", "dl", "fieldset", "figure", "footer",
+ "header", "hgroup", "menu", "nav", "ol", "p", "section", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -65308,7 +65298,8 @@
</ol></dd>
<!-- as normal, but imply </dt> or </dd> when there's another <dt> or <dd> open in weird cases -->
- <dt>A start tag whose tag name is one of: "dd", "dt"</dt>
+ <!-- <dc> and <ds> are here speculatively for future expansion (they're not defined elements yet) -->
+ <dt>A start tag whose tag name is one of: "dc", "dd", "ds", "dt"</dt>
<dd>
<p>Run the following algorithm:</p>
@@ -65319,9 +65310,10 @@
node</a> (the bottommost node of the stack).</li>
<li><p><i>Loop</i>: If <var title="">node</var> is a
- <code><a href=#the-dd-element>dd</a></code> or <code><a href=#the-dt-element>dt</a></code> element, then act as if an end
- tag with the same tag name as <var title="">node</var> had been
- seen, then jump to the last step.</li>
+ <code>dc</code>, <code><a href=#the-dd-element>dd</a></code>, <code>ds</code>, or
+ <code><a href=#the-dt-element>dt</a></code> element, then act as if an end tag with the same
+ tag name as <var title="">node</var> had been seen, then jump to
+ the last step.</li>
<li><p>If <var title="">node</var> is not in the
<a href=#formatting>formatting</a> category, and is not in the
@@ -65383,9 +65375,9 @@
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", <!--v2DATAGRID-->"datagrid",
- "details", "dialog", "dir", "div", "dl", "fieldset", "figure",
- "footer", "header", "hgroup", "listing", "menu", "nav", "ol",
- "pre", "section", "ul"</dt>
+ "details", "dir", "div", "dl", "fieldset", "figure", "footer",
+ "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "section", "ul"</dt>
<dd>
<p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
@@ -65482,7 +65474,8 @@
</ol></dd>
<!-- as normal, but needs care as the elements have optional tags -->
- <dt>An end tag whose tag name is one of: "dd", "dt"</dt>
+ <!-- <dc> and <ds> are here speculatively for future expansion (they're not defined elements yet) -->
+ <dt>An end tag whose tag name is one of: "dc", "dd", "ds", "dt"</dt>
<dd>
<p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
@@ -67270,9 +67263,10 @@
<dt>A start tag whose tag name is one of: <!--"a",--> "b", "big",
"blockquote", "body"<!--by inspection-->, "br", "center", "code",
- "dd", "div", "dl", "dt"<!-- so that dd and dt can be handled
- uniformly throughout the parser -->, "em", "embed", "h1", "h2",
- "h3", "h4"<!--for completeness-->, "h5", "h6"<!--for
+ "dc"<!-- with dt -->, "dd", "div", "dl", "ds"<!-- with dt -->,
+ "dt"<!-- so that dd and dt can be handled uniformly throughout the
+ parser; dc and ds are here for the same reason -->, "em", "embed",
+ "h1", "h2", "h3", "h4"<!--for completeness-->, "h5", "h6"<!--for
completeness-->, "head"<!--by inspection-->, "hr", "i", "img",
"li", "listing"<!-- so that pre and listing can be handled
uniformly throughout the parser -->, "menu", "meta", "nobr",
@@ -67280,15 +67274,13 @@
the parser -->, "p", "pre", "ruby", "s", <!--"script",--> "small",
"span", "strong", "strike"<!-- so that s and strike can be handled
uniformly throughout the parser -->, <!--"style",--> "sub", "sup",
- "table"<!--by inspection-->, "tt", "u", "ul", "var"</dt>
- <!-- this list was determined empirically by studying over
- 6,000,000,000 pages that were specifically not XML pages -->
- <dt>A start tag whose tag name is "font", if the token has
- any attributes named "color", "face", or "size"</dt>
- <!-- the attributes here are required so that SVG <font> will go
- through as SVG but legacy <font>s won't -->
- <dt>An end-of-file token</dt>
- <dd>
+ "table"<!--by inspection-->, "tt", "u", "ul", "var"</dt> <!-- this
+ list was determined empirically by studying over 6,000,000,000
+ pages that were specifically not XML pages --> <dt>A start tag
+ whose tag name is "font", if the token has any attributes named
+ "color", "face", or "size"</dt> <!-- the attributes here are
+ required so that SVG <font> will go through as SVG but legacy
+ <font>s won't --> <dt>An end-of-file token</dt> <dd>
<p><a href=#parse-error>Parse error</a>.</p>
@@ -71017,8 +71009,8 @@
display: none;
}
-address, article, aside, blockquote, body, center, dd, dialog, dir,
-div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
+address, article, aside, blockquote, body, center, dc, dd, dir, div,<!-- dc and ds are here for speculative purposes to enable future extensions -->
+dl, ds, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
section, ul, xmp { display: block; }
@@ -71086,7 +71078,7 @@
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
-blockquote, dialog, dir, dl, figure, listing, menu, ol, p, plaintext,
+blockquote, dir, dl, figure, listing, menu, ol, p, plaintext,
pre, ul, xmp {
margin-top: 1em; margin-bottom: 1em;
}
@@ -72206,7 +72198,7 @@
<code><a href=#the-details-element>details</a></code> element, the element is expected to render as a
'block' box with its 'padding-left' property set to '40px'. The
element's shadow tree is expected to take a child element that
- matches the selector <code title="">:bound-element > legend:first-child</code> and
+ matches the selector <code title="">:bound-element > dt:first-of-type</code> and
place it in a first 'block' box container, and then take the
remaining child nodes and place them in a later 'block' box
container.</p>
@@ -75976,6 +75968,7 @@
Jens Fendler,
Jens Lindström,
Jens Meiert,
+ Jeremy Keith,
Jeremy Orlow,
Jeroen van der Meer,
Jian Li,
Modified: source
===================================================================
--- source 2009-09-15 08:46:30 UTC (rev 3858)
+++ source 2009-09-15 11:09:22 UTC (rev 3859)
@@ -8565,7 +8565,6 @@
<li><code>del</code></li>
<li><code>details</code></li>
<li><code>dfn</code></li>
- <li><code>dialog</code></li>
<li><code>div</code></li>
<li><code>dl</code></li>
<li><code>em</code></li>
@@ -15359,64 +15358,7 @@
</div>
- <h4>The <dfn><code>dialog</code></dfn> element</h4>
- <dl class="element">
- <dt>Categories</dt>
- <dd><span>Flow content</span>.</dd>
- <dt>Contexts in which this element may be used:</dt>
- <dd>Where <span>flow content</span> is expected.</dd>
- <dt>Content model:</dt>
- <dd>Zero or more pairs of one <code>dt</code> element followed by
- one <code>dd</code> element.</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>dialog</code> element <span>represents</span> a
- conversation, meeting minutes, a chat transcript, a dialog in a
- screenplay, an instant message log, or some other construct in which
- different players take turns in discourse.</p>
-
- <p>Each part of the conversation must have an explicit talker (or
- speaker) given by a <code>dt</code> element, and a discourse (or
- quote) given by a <code>dd</code> element.</p>
-
- <div class="example">
- <p>This example demonstrates this using an extract from Abbot and
- Costello's famous sketch, <cite>Who's on first</cite>:</p>
-<pre><dialog>
- <dt> Costello
- <dd> Look, you gotta first baseman?
- <dt> Abbott
- <dd> Certainly.
- <dt> Costello
- <dd> Who's playing first?
- <dt> Abbott
- <dd> That's right.
- <dt> Costello
- <dd> When you pay off the first baseman every month, who gets the money?
- <dt> Abbott
- <dd> Every dollar of it.
-</dialog></pre>
- </div>
-
- <p class="note">Text in a <code>dt</code> element in a
- <code>dialog</code> element is implicitly the source of the text
- given in the following <code>dd</code> element, and the contents of
- the <code>dd</code> element are implicitly a quote from that
- speaker. There is thus no need to include <code>cite</code>,
- <code>q</code>, or <code>blockquote</code> elements in this
- markup. Indeed, a <code>q</code> element inside a <code>dd</code>
- element in a conversation would actually imply the people talking
- were themselves quoting another work. See the <code>cite</code>,
- <code>q</code>, and <code>blockquote</code> elements for other ways
- to cite or quote.</p>
-
-
-
<h4>The <dfn><code>blockquote</code></dfn> element</h4>
<dl class="element">
@@ -15464,10 +15406,6 @@
</div>
- <p class="note">The best way to represent a conversation is not with
- the <code>cite</code> and <code>blockquote</code> elements, but with
- the <code>dialog</code> element.</p>
-
<div class="example">
<p>This next example shows the use of <code>cite</code> alongside
@@ -15481,8 +15419,13 @@
</div>
+ <p class="note"><a href="#conversations">Examples of how to
+ represent a conversation</a> are shown below; it is not appropriate
+ to use the <code>cite</code> and <code>blockquote</code> elements
+ for this purpose.</p>
+
<h4>The <dfn><code>ol</code></dfn> element</h4>
<dl class="element">
@@ -15706,21 +15649,23 @@
<div class="example">
<p>The following example, the top ten movies are listed (in reverse
order). Note the way the list is given a title by using a
- <code>figure</code> element and its <code>legend</code>.</p>
+ <code>figure</code> element and its <code>dt</code> element.</p>
<pre><figure>
- <legend>The top 10 movies of all time</legend>
- <ol>
- <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
- <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
- <li value="8"><cite>A Bug's Life</cite>, 1998</li>
- <li value="7"><cite>Toy Story</cite>, 1995</li>
- <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
- <li value="5"><cite>Cars</cite>, 2006</li>
- <li value="4"><cite>Toy Story 2</cite>, 1999</li>
- <li value="3"><cite>Finding Nemo</cite>, 2003</li>
- <li value="2"><cite>The Incredibles</cite>, 2004</li>
- <li value="1"><cite>Ratatouille</cite>, 2007</li>
- </ol>
+ <dt>The top 10 movies of all time</dt>
+ <dd>
+ <ol>
+ <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
+ <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
+ <li value="8"><cite>A Bug's Life</cite>, 1998</li>
+ <li value="7"><cite>Toy Story</cite>, 1995</li>
+ <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
+ <li value="5"><cite>Cars</cite>, 2006</li>
+ <li value="4"><cite>Toy Story 2</cite>, 1999</li>
+ <li value="3"><cite>Finding Nemo</cite>, 2003</li>
+ <li value="2"><cite>The Incredibles</cite>, 2004</li>
+ <li value="1"><cite>Ratatouille</cite>, 2007</li>
+ </ol>
+ <dd>
</figure></pre>
<p>The markup could also be written as follows, using the <code
@@ -15728,19 +15673,21 @@
<code>ol</code> element:</p>
<pre><figure>
- <legend>The top 10 movies of all time</legend>
- <ol reversed>
- <li><cite>Josie and the Pussycats</cite>, 2001</li>
- <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
- <li><cite>A Bug's Life</cite>, 1998</li>
- <li><cite>Toy Story</cite>, 1995</li>
- <li><cite>Monsters, Inc</cite>, 2001</li>
- <li><cite>Cars</cite>, 2006</li>
- <li><cite>Toy Story 2</cite>, 1999</li>
- <li><cite>Finding Nemo</cite>, 2003</li>
- <li><cite>The Incredibles</cite>, 2004</li>
- <li><cite>Ratatouille</cite>, 2007</li>
- </ol>
+ <dt>The top 10 movies of all time</dt>
+ <dd>
+ <ol reversed>
+ <li><cite>Josie and the Pussycats</cite>, 2001</li>
+ <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
+ <li><cite>A Bug's Life</cite>, 1998</li>
+ <li><cite>Toy Story</cite>, 1995</li>
+ <li><cite>Monsters, Inc</cite>, 2001</li>
+ <li><cite>Cars</cite>, 2006</li>
+ <li><cite>Toy Story 2</cite>, 1999</li>
+ <li><cite>Finding Nemo</cite>, 2003</li>
+ <li><cite>The Incredibles</cite>, 2004</li>
+ <li><cite>Ratatouille</cite>, 2007</li>
+ </ol>
+ </dd>
</figure></pre>
</div>
@@ -15777,7 +15724,9 @@
association list consisting of zero or more name-value groups (a
description list). Each group must consist of one or more names
(<code>dt</code> elements) followed by one or more values
- (<code>dd</code> elements).</p>
+ (<code>dd</code> elements). Within a single <code>dl</code> element,
+ there should not be more than one <code>dt</code> element for each
+ name.</p>
<p>Name-value groups may be terms and definitions, metadata topics
and values, or any other groups of name-value data.</p>
@@ -15902,8 +15851,8 @@
</div>
<p class="note">The <code>dl</code> element is inappropriate for
- marking up dialogue. For an example of how to mark up dialogue, see
- the <code>dialog</code> element.</p>
+ marking up dialogue. <a href="#conversations">Examples of how to
+ mark up dialogue</a> are shown below.</p>
<h4>The <dfn><code>dt</code></dfn> element</h4>
@@ -15913,53 +15862,31 @@
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Before <code>dd</code> or <code>dt</code> elements inside <code>dl</code> elements.</dd>
- <dd>Before a <code>dd</code> element inside a <code>dialog</code> element.</dd>
+ <dd>As a child of a <code>figure</code> element.</dd>
+ <dd>As a child of a <code>details</code> element.</dd>
<dt>Content model:</dt>
- <dd><span>Phrasing content</span>.</dd>
+ <dd>When the parent node is a <code>figure</code> element: <span>flow content</span>, but with no descendant <code>figure</code> elements.</dd>
+ <dd>Otherwise: <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>dt</code> element <span>represents</span> the term, or
- name, part of a term-description group in a description list
- (<code>dl</code> element), and the talker, or speaker, part of a
- talker-discourse pair in a conversation (<code>dialog</code>
- element).</p>
+ <p>The <code>dt</code> element <span>represents</span> either: the
+ term, or name, part of a term-description group in a description
+ list (<code>dl</code> element); or, the caption of a
+ <code>figure</code> element; or, the summary of a
+ <code>details</code> element.</p>
<p class="note">The <code>dt</code> element itself, when used in a
<code>dl</code> element, does not indicate that its contents are a
term being defined, but this can be indicated using the
<code>dfn</code> element.</p>
- <p>If the <code>dt</code> element is the child of a
- <code>dialog</code> element, and it further contains a
- <code>time</code> element, then that <code>time</code> element
- represents a timestamp for when the associated discourse
- (<code>dd</code> element) was said, and is not part of the name of
- the talker.</p>
- <div class="example">
- <p>The following extract shows how an IM conversation log could be
- marked up.</p>
- <pre><dialog>
- <dt> <time>14:22</time> egof
- <dd> I'm not that nerdy, I've only seen 30% of the star trek episodes
- <dt> <time>14:23</time> kaj
- <dd> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
- <dt> <time>14:23</time> egof
- <dd> it's unarguably
- <dt> <time>14:24</time> kaj
- <dd> you are not helping your case
-</dialog></pre>
- <!-- with thanks to http://bash.org/?854262 -->
-
- </div>
-
-
<h4>The <dfn><code>dd</code></dfn> element</h4>
<dl class="element">
@@ -15967,7 +15894,8 @@
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>After <code>dt</code> or <code>dd</code> elements inside <code>dl</code> elements.</dd>
- <dd>After a <code>dt</code> element inside a <code>dialog</code> element.</dd>
+ <dd>As a child of a <code>figure</code> element.</dd>
+ <dd>As a child of a <code>details</code> element.</dd>
<dt>Content model:</dt>
<dd><span>Flow content</span>.</dd>
<dt>Content attributes:</dt>
@@ -15976,10 +15904,11 @@
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>dd</code> element <span>represents</span> the
+ <p>The <code>dt</code> element <span>represents</span> either: the
description, definition, or value, part of a term-description group
- in a description list (<code>dl</code> element), and the discourse,
- or quote, part in a conversation (<code>dialog</code> element).</p>
+ in a description list (<code>dl</code> element); or, the data of a
+ <code>figure</code> element; or, the details of a
+ <code>details</code> element.</p>
<div class="example">
@@ -16003,63 +15932,8 @@
</div>
- <h4>Common grouping idioms</h4>
- <h5>Tag clouds</h5>
- <p id="tag-cloud">This specification does not define any markup
- specifically for marking up lists of keywords that apply to a group
- of pages (also known as <i>tag clouds</i>). In general, authors are
- encouraged to either mark up such lists using <code>ul</code>
- elements with explicit inline counts that are then hidden and turned
- into a presentational effect using a style sheet, or to use SVG.</p>
-
- <div class="example">
-
- <p>Here, three tags are included in a short tag cloud:</p>
-
- <pre><style>
- at media screen, print, handheld, tv {
- /* should be ignored by non-visual browsers */
- .tag-cloud > li > span { display: none; }
- .tag-cloud > li { display: inline; }
- .tag-cloud-1 { font-size: 0.7em; }
- .tag-cloud-2 { font-size: 0.9em; }
- .tag-cloud-3 { font-size: 1.1em; }
- .tag-cloud-4 { font-size: 1.3em; }
- .tag-cloud-5 { font-size: 1.5em; }
-}
-</style>
-...
-<ul class="tag-cloud">
- <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
- <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
- <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
-</ul></pre>
-
- <p>The actual frequency of each tag is given using the <code
- title="attr-title">title</code> attribute. A CSS style sheet is
- provided to convert the markup into a cloud of differently-sized
- words, but for user agents that do not support CSS or are not
- visual, the markup contains annotations like "(popular)" or
- "(rare)" to categorize the various tags by frequency, thus enabling
- all users to benefit from the information.</p>
-
- <p>The <code>ul</code> element is used (rather than
- <code>ol</code>) because the order is not particular important:
- while the list is in fact ordered alphabetically, it would convey
- the same information if ordered by, say, the length of the tag.</p>
-
- <p>The <code title="rel-tag">tag</code> <code
- title="attr-hyperlink-rel">rel</code>-keyword is <em>not</em> used
- on these <code>a</code> elements because they do not represent tags
- that apply to the page itself; they are just part of an index
- listing the tags themselves.</p>
-
- </div>
-
-
-
<h3>Text-level semantics</h3>
<h4>The <dfn><code>a</code></dfn> element</h4>
@@ -17364,19 +17238,21 @@
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>
+ <dd>
+ <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>
+ </dd>
+ <dt>
Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
a triangle with sides <var>b</var> and <var>c</var>
- </legend>
+ </dt>
</figure></pre>
</div>
@@ -18943,134 +18819,8 @@
</table>
- <h4 id="footnotes">Footnotes</h4>
- <p>HTML does not have a dedicated mechanism for marking up
- footnotes. Here are the recommended alternatives.</p>
- <p>For short inline annotations, the <code
- title="attr-title">title</code> attribute should be used.</p>
-
- <div class="example">
-
- <p>In this example, two parts of a dialog are annotated.</p>
-
- <pre><dialog>
- <dt>Customer
- <dd>Hello! I wish to register a complaint. Hello. Miss?
- <dt>Shopkeeper
- <dd><span title="Colloquial pronunciation of 'What do you'"
- >Watcha</span> mean, miss?
- <dt>Customer
- <dd>Uh, I'm sorry, I have a cold. I wish to make a complaint.
- <dt>Shopkeeper
- <dd>Sorry, <span title="This is, of course, a lie.">we're
- closing for lunch</span>.
-</dialog></pre>
-
- </div>
-
- <p>For longer annotations, the <code>a</code> element should be
- used, pointing to an element later in the document. The convention
- is that the contents of the link be a number in square brackets.</p>
-
- <div class="example">
-
- <p>In this example, a footnote in the dialog links to a paragraph
- below the dialog. The paragraph then reciprocally links back to the
- dialog, allowing the user to return to the location of the
- footnote.</p>
-
- <pre><dialog>
- <dt>Announcer
- <dd>Number 16: The <i>hand</i>.
- <dt>Interviewer
- <dd>Good evening. I have with me in the studio tonight Mr
- Norman St John Polevaulter, who for the past few years has
- been contradicting people. Mr Polevaulter, why <em>do</em>
- you contradict people?
- <dt>Norman
- <dd>I don't. <a href="#fn1" id="r1">[1]</a>
- <dt>Interviewer
- <dd>You told me you did!
-</dialog>
-<section>
- <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
- but paradoxically if it were true he could not say so without
- contradicting the interviewer and thus making it false.</p>
-</section></pre>
-
- </div>
-
- <p>For side notes, longer annotations that apply to entire sections
- of the text rather than just specific words or sentences, the
- <code>aside</code> element should be used.</p>
-
- <div class="example">
-
- <p>In this example, a sidebar is given after a dialog, giving some
- context to the dialog.</p>
-
- <pre><dialog>
- <dt>Customer
- <dd>I will not buy this record, it is scratched.
- <dt>Shopkeeper
- <dd>I'm sorry?
- <dt>Customer
- <dd>I will not buy this record, it is scratched.
- <dt>Shopkeeper
- <dd>No no no, this's'a tobacconist's.
-</dialog>
-<aside>
- <p>In 1970, the British Empire lay in ruins, and foreign
- nationalists frequented the streets — many of them Hungarians
- (not the streets — the foreign nationals). Sadly, Alexander
- Yalt has been publishing incompetently-written phrase books.
-</aside></pre>
-
- </div>
-
- <p>For figures or tables, footnotes can be included in the relevant
- <code>legend</code> or <code>caption</code> element, or in
- surrounding prose.</p>
-
- <div class="example">
-
- <p>In this example, a <!-- round --> table has cells with footnotes
- that are given in prose. A <code>figure</code> element is used to
- give a single legend to the combination of the table and its
- footnotes.</p>
-
- <pre><figure>
- <legend>Table 1. Alternative activities for knights.</legend>
- <table>
- <tr>
- <th> Activity
- <th> Location
- <th> Cost
- <tr>
- <td> Dance
- <td> Wherever possible
- <td> £0<sup><a href="#fn1">1</a></sup>
- <tr>
- <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
- <td> Undisclosed
- <td> Undisclosed
- <tr>
- <td> Dining<sup><a href="#fn3">3</a></sup>
- <td> Camelot
- <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
- </table>
- <p id="fn1">1. Assumed.</p>
- <p id="fn2">2. Footwork impeccable.</p>
- <p id="fn3">3. Quality described as "well".</p>
- <p id="fn4">4. A lot.</p>
-</figure></pre>
-
- </div>
-
-
-
<h3>Edits</h3>
<p>The <code>ins</code> and <code>del</code> elements represent
@@ -19398,16 +19148,14 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt>Content model:</dt>
- <dd>Either: one <code>legend</code> element followed by <span>flow content</span>.</dd>
- <dd>Or: <span>Flow content</span> followed by one <code>legend</code> element.</dd>
- <dd>Or: <span>Flow content</span>.</dd>
+ <dd>In any order, one <code>dd</code> element, and optionally one <code>dt</code> element.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dt>DOM interface:</dt>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <!-- v2: Add a <credit> element for photo credits -->
+ <!-- v2: Add a <dc> or <credit> element for photo credits -->
<p>The <code>figure</code> element <span>represents</span> some
<span>flow content</span>, optionally with a caption, that is
@@ -19420,13 +19168,15 @@
of the document, be moved away from that primary content, e.g. to
the side of the page, to dedicated pages, or to an appendix.</p>
- <p>The first <code>legend</code> element child of the element, if
- any, represents the caption of the <code>figure</code> element's
- contents. If there is no child <code>legend</code> element, then
- there is no caption.</p>
+ <p>The <span class="impl">first</span> <code>dt</code> element child
+ of the element, if any, represents the caption of the
+ <code>figure</code> element's contents. If there is no child
+ <code>dt</code> element, then there is no caption.</p>
- <p>The remainder of the element's contents, if any, represents the
- content.</p>
+ <p>The <span class="impl">first</span> <code>dd</code> element child
+ of the element<span class="impl">, if any,</span> represents the
+ element's contents. <span class="impl">If there is no child
+ <code>dd</code> element, then there is no caption.</span></p>
<div class="example">
@@ -19436,12 +19186,14 @@
<pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
- <legend>Listing 4. The primary core interface API declaration.</legend>
- <pre><code>interface PrimaryCore {
+ <dt>Listing 4. The primary core interface API declaration.</dt>
+ <dd>
+ <pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
+ </dd>
</figure>
<p>The API is designed to use UTF-8.</p></pre>
@@ -19453,10 +19205,12 @@
photo.</p>
<pre><figure>
- <img src="bubbles-work.jpeg"
- alt="Bubbles, sitting in his office chair, works on his
- latest project intently.">
- <legend>Bubbles at work</legend>
+ <dd>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ </dd>
+ <dt>Bubbles at work</dt>
</figure></pre>
</div>
@@ -19470,25 +19224,27 @@
<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
-after a trailer ending with these words:</p>
+after a trailer ending with these words:
-<img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+<blockquote>
+ <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+</blockquote>
<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
-included with Exhibit B.</p>
+included with Exhibit B.
<figure>
- <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- <legend>Exhibit A. The alleged <cite>rough copy</cite> comic.</legend>
+ <dd><img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <dt>Exhibit A. The alleged <cite>rough copy</cite> comic.
</figure>
<figure>
- <video src="ex-b.mov"></video>
- <legend>Exhibit B. The <cite>Rough Copy</cite> trailer.</legend>
+ <dd><video src="ex-b.mov"></video>
+ <dt>Exhibit B. The <cite>Rough Copy</cite> trailer.
</figure>
-<p>The case was resolved out of court.</p></pre>
+<p>The case was resolved out of court.</pre>
</div>
@@ -19498,11 +19254,13 @@
<code>figure</code>.</p>
<pre><figure>
- <p>'Twas brillig, and the slithy toves<br>
-Did gyre and gimble in the wabe;<br>
-All mimsy were the borogoves,<br>
-And the mome raths outgrabe.</p>
- <legend><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</legend>
+ <dd>
+ <p>'Twas brillig, and the slithy toves<br>
+ Did gyre and gimble in the wabe;<br>
+ All mimsy were the borogoves,<br>
+ And the mome raths outgrabe.</p>
+ </dd>
+ <dt><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</dt>
</figure></pre>
</div>
@@ -19513,13 +19271,15 @@
discussing a castle, the figure has three images in it.</p>
<pre><figure>
- <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
- alt="The castle has one tower, and a tall wall around it.">
- <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
- alt="The castle now has two towers and two walls.">
- <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
- alt="The castle lies in ruins, the original tower all that remains in one piece.">
- <legend>The castle through the ages: 1423, 1858, and 1999 respectively.</legend>
+ <dd>
+ <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+ alt="The castle has one tower, and a tall wall around it.">
+ <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+ alt="The castle now has two towers and two walls.">
+ <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
+ alt="The castle lies in ruins, the original tower all that remains in one piece.">
+ </dd>
+ <dt>The castle through the ages: 1423, 1858, and 1999 respectively.</dt>
</figure></pre>
</div>
@@ -19822,8 +19582,8 @@
steps.</p></li>
<li><p>If the image is the child of a <code>figure</code> element
- that has a child <code>legend</code> element, then the contents
- of the first such <code>legend</code> element are the caption
+ that has a child <code>dt</code> element, then the contents of
+ the first such <code>dt</code> element are the caption
information; abort these steps.</p></li>
<li><p>Run the algorithm to create the <span>outline</span> for
@@ -20261,7 +20021,7 @@
<p>Text such as "Photo of white house with boarded door" would be
equally bad alternative text (though it could be suitable for the
<code title="attr-title">title</code> attribute or in the
- <code>legend</code> element of a <code>figure</code> with this
+ <code>dt</code> element of a <code>figure</code> with this
image).</p>
</div>
@@ -20450,10 +20210,10 @@
<p>In these cases, it would be wrong to include alternative text
that consists of just a caption. If a caption is to be included,
then either the <code title="attr-title">title</code> attribute can
- be used, or the <code>figure</code> and <code>legend</code>
- elements can be used. In the latter case, the image would in fact
- be a phrase or paragraph with an alternative graphical
- representation, and would thus require alternative text.</p>
+ be used, or the <code>figure</code> and <code>dt</code> elements
+ can be used. In the latter case, the image would in fact be a
+ phrase or paragraph with an alternative graphical representation,
+ and would thus require alternative text.</p>
<pre><!-- Using the title="" attribute -->
<p>The network passes data to the Tokenizer stage, which
@@ -20464,20 +20224,22 @@
<p><strong><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></strong></p></pre>
- <pre><!-- Using <figure> and <legend> -->
+ <pre><!-- Using <figure> and <dt> -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<figure>
- <strong><img src="images/parsing-model-overview.png" alt="The Network leads
- to the Tokenizer, which leads to the Tree Construction. The Tree
- Construction leads to two items. The first is Script Execution, which
- leads via document.write() back to the Tokenizer. The second item
- from which Tree Construction leads is the DOM. The DOM is related to
- the Script Execution."></strong>
- <legend>Flowchart representation of the parsing model.</legend>
+ <dd>
+ <strong><img src="images/parsing-model-overview.png" alt="The Network leads
+ to the Tokenizer, which leads to the Tree Construction. The Tree
+ Construction leads to two items. The first is Script Execution, which
+ leads via document.write() back to the Tokenizer. The second item
+ from which Tree Construction leads is the DOM. The DOM is related to
+ the Script Execution."></strong>
+ </dd>
+ <dt>Flowchart representation of the parsing model.</dt>
</figure></pre>
<pre class="bad"><!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
@@ -20642,17 +20404,19 @@
some alternative text:</p>
<pre><figure>
- <strong><img src="KDE%20Light%20desktop.png"
- alt="The desktop is blue, with icons along the left hand side in
- two columns, reading System, Home, K-Mail, etc. A window is
- open showing that menus wrap to a second line if they
- cannot fit in the window. The window has a list of icons
- along the top, with an address bar below it, a list of
- icons for tabs along the left edge, a status bar on the
- bottom, and two panes in the middle. The desktop has a bar
- at the bottom of the screen with a few buttons, a pager, a
- list of open applications, and a clock."></strong>
- <legend>Screenshot of a KDE desktop.</legend>
+ <dd>
+ <strong><img src="KDE%20Light%20desktop.png"
+ alt="The desktop is blue, with icons along the left hand side in
+ two columns, reading System, Home, K-Mail, etc. A window is
+ open showing that menus wrap to a second line if they
+ cannot fit in the window. The window has a list of icons
+ along the top, with an address bar below it, a list of
+ icons for tabs along the left edge, a status bar on the
+ bottom, and two panes in the middle. The desktop has a bar
+ at the bottom of the screen with a few buttons, a pager, a
+ list of open applications, and a clock."></strong>
+ </dd>
+ <dt>Screenshot of a KDE desktop.</dt>
</figure></pre>
</div>
@@ -20696,14 +20460,14 @@
if brief, is still better than nothing:</p>
<pre><figure>
- <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ <dd><strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
- the center extending below the sides."></strong>
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+ the center extending below the sides."></strong></dd>
+ <dt>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</dt>
</figure></pre>
<p>Note that the following would be a very bad use of alternative
@@ -20711,10 +20475,10 @@
<pre class="bad"><!-- This example is wrong. Do not copy it. -->
<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <legend>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</legend>
+ <dd><img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test."></dd>
+ <dt>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</dt>
</figure></pre>
<p>Including the caption in the alternative text like this isn't
@@ -20768,7 +20532,7 @@
present and has a non-empty value.</li>
<li>The <code>img</code> element is in a <code>figure</code>
- element that contains a <code>legend</code> element that contains
+ element that contains a <code>dt</code> element that contains
content other than <span>inter-element whitespace</span>.</li>
<li>The <code>img</code> element is part of the only
@@ -20793,8 +20557,8 @@
image with no metadata other than the caption:</p>
<pre><figure>
- <strong><img src="1100670787_6a7c664aef.jpg"></strong>
- <legend>Bubbles traveled everywhere with us.</legend>
+ <dd><strong><img src="1100670787_6a7c664aef.jpg"></strong></dd>
+ <dt>Bubbles traveled everywhere with us.</dt>
</figure></pre>
<p>It could also be marked up like this:</p>
@@ -20820,8 +20584,8 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <strong><img src="photo2.jpeg"></strong>
- <legend>A photograph taken blindly from my front porch.</legend>
+ <dd><strong><img src="photo2.jpeg"></strong></dd>
+ <dt>A photograph taken blindly from my front porch.</dt>
</figure>
</article></pre>
@@ -20832,13 +20596,13 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
+ <dd><strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
feeder hanging from the edge of my roof. It is half full, but there
are no birds around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
- with light blue streaks."></strong>
- <legend>A photograph taken blindly from my front porch.</legend>
+ with light blue streaks."></strong></dd>
+ <dt>A photograph taken blindly from my front porch.</dt>
</figure>
</article></pre>
@@ -22384,11 +22148,13 @@
not support third-party technologies like Java.)</p>
<pre><figure>
- <object type="application/x-java-applet">
- <param name="code" value="MyJavaClass">
- <p>You do not have Java available, or it is disabled.</p>
- </object>
- <legend>My Java Clock</legend>
+ <dd>
+ <object type="application/x-java-applet">
+ <param name="code" value="MyJavaClass">
+ <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ </dd>
+ <dt>My Java Clock</dt>
</figure></pre>
</div>
@@ -22399,8 +22165,8 @@
<code>object</code> element.</p>
<pre><figure>
- <object data="clock.html"></object>
- <legend>My HTML Clock</legend>
+ <dd><object data="clock.html"></object>
+ <dt>My HTML Clock
</figure></pre>
</div>
@@ -30734,10 +30500,12 @@
<caption>
<strong>Characteristics with positive and negative sides.</strong>
<details>
- <legend>Help</legend>
- <p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.</p>
+ <dt>Help</dt>
+ <dd>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ </dd>
</details>
</caption>
<thead>
@@ -30761,57 +30529,61 @@
<dd>
<div class="example"><pre><figure>
- <legend>Characteristics with positive and negative sides</legend>
- <p>Characteristics are given in the second
- column, with the negative side in the left column and the positive
- side in the right column.</p>
- <table>
- <thead>
- <tr>
- <th id="n"> Negative
- <th> Characteristic
- <th> Positive
- <tbody>
- <tr>
- <td headers="n r1"> Sad
- <th id="r1"> Mood
- <td> Happy
- <tr>
- <td headers="n r2"> Failing
- <th id="r2"> Grade
- <td> Passing
- </table>
-<figure>
+ <dt>Characteristics with positive and negative sides</dt>
+ <dd>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ <table>
+ <thead>
+ <tr>
+ <th id="n"> Negative
+ <th> Characteristic
+ <th> Positive
+ <tbody>
+ <tr>
+ <td headers="n r1"> Sad
+ <th id="r1"> Mood
+ <td> Happy
+ <tr>
+ <td headers="n r2"> Failing
+ <th id="r2"> Grade
+ <td> Passing
+ </table>
+ </dd>
+</figure>
</pre></div>
</dd>
- <dt>Next to the table, in a <code>figure</code>'s <code>legend</code></dt>
+ <dt>Next to the table, in a <code>figure</code>'s <code>dt</code></dt>
<dd>
<div class="example"><pre><figure>
- <legend>
+ <dt>
<strong>Characteristics with positive and negative sides</strong>
- <p>Characteristics are given in the second
- column, with the negative side in the left column and the positive
- side in the right column.</p>
- </legend>
- <table>
- <thead>
- <tr>
- <th id="n"> Negative
- <th> Characteristic
- <th> Positive
- <tbody>
- <tr>
- <td headers="n r1"> Sad
- <th id="r1"> Mood
- <td> Happy
- <tr>
- <td headers="n r2"> Failing
- <th id="r2"> Grade
- <td> Passing
- </table>
-<figure>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ </dt>
+ <dd>
+ <table>
+ <thead>
+ <tr>
+ <th id="n"> Negative
+ <th> Characteristic
+ <th> Positive
+ <tbody>
+ <tr>
+ <td headers="n r1"> Sad
+ <th id="r1"> Mood
+ <td> Happy
+ <tr>
+ <td headers="n r2"> Failing
+ <th id="r2"> Grade
+ <td> Passing
+ </table>
+ </dd>
+</figure>
</pre></div>
</dd>
@@ -31174,10 +30946,10 @@
</div>
- <p>When a <code>table</code> element is in a <code>figure</code>
- element alone but for the <code>figure</code>'s <code>legend</code>,
- the <code>caption</code> element should be omitted in favor of the
- <code>legend</code>.</p>
+ <p>When a <code>table</code> element is the only content in a
+ <code>figure</code> element's <code>dd</code>, the
+ <code>caption</code> element should be omitted in favor of the
+ <code>dt</code>.</p>
<p>A caption can introduce context for a table, making it
significantly easier to understand.</p>
@@ -43870,7 +43642,7 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt>Content model:</dt>
- <dd>One <code>legend</code> element followed by <span>flow content</span>.</dd>
+ <dd>One <code>dt</code> element followed by one <code>dd</code> element.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dd><code title="attr-details-open">open</code></dd>
@@ -43889,17 +43661,18 @@
for footnotes. Please see <a href="#footnotes">the section on
footnotes</a> for details on how to mark up footnotes.</p>
- <p>The first element child of a <code>details</code> element, <span
- class="impl">if it is</span> a <code>legend</code> element,
- <span>represents</span> the summary of the details.</p>
+ <p>The <span class="impl">first</span> <code>dt</code> element child
+ of the element<span class="impl">, if any,</span>
+ <span>represents</span> the summary of the details. <span
+ class="impl">If there is no child <code>dt</code> element, the user
+ agent should provide its own legend (e.g. "Details").</span></p>
- <div class="impl">
+ <p>The <span class="impl">first</span> <code>dd</code> element child
+ of the element<span class="impl">, if any,</span>
+ <span>represents</span> the details. <span class="impl">If there is
+ no child <code>dd</code> element, then there are no
+ details.</span></p>
- <p>If the first element is not a <code>legend</code> element, the
- UA should provide its own legend (e.g. "Details").</p>
-
- </div>
-
<p>The <dfn title="attr-details-open"><code>open</code></dfn>
content attribute is a <span>boolean attribute</span>. If present,
it indicates that the details are to be shown to the user. If the
@@ -43933,15 +43706,17 @@
<pre><section class="progress window">
<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
<details>
- <legend>Copying... <progress max="375505392" value="97543282"></progress> 25%</legend>
- <dl>
- <dt>Transfer rate:</dt> <dd>452KB/s</dd>
- <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
- <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
- <dt>Duration:</dt> <dd>01:16:27</dd>
- <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
- <dt>Dimensions:</dt> <dd>320×240</dd>
- </dl>
+ <dt>Copying... <progress max="375505392" value="97543282"></progress> 25%</dt>
+ <dd>
+ <dl>
+ <dt>Transfer rate:</dt> <dd>452KB/s</dd>
+ <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
+ <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
+ <dt>Duration:</dt> <dd>01:16:27</dd>
+ <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
+ <dt>Dimensions:</dt> <dd>320×240</dd>
+ </dl>
+ </dd>
</details>
</section></pre>
@@ -47876,11 +47651,8 @@
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>As the first child of a <code>fieldset</code> element.</dd>
- <dd>As the first child of a <code>details</code> element.</dd>
- <dd>As the first or last child of a <code>figure</code> element, if there are no other <code>legend</code> element children of that element.</dd>
<dt>Content model:</dt>
- <dd>When the parent node is a <code>figure</code> element: <span>flow content</span>, but with no descendant <code>figure</code> elements.</dd>
- <dd>Otherwise: <span>phrasing content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dt>DOM interface:</dt>
@@ -47891,9 +47663,10 @@
</dd>
</dl>
- <p>The <code>legend</code> element <span>represents</span> a title
- or explanatory caption for the rest of the contents of the
- <code>legend</code> element's parent element.</p>
+ <p>The <code>legend</code> element <span>represents</span> a caption
+ for the rest of the contents of the <code>legend</code> element's
+ parent <code>fieldset</code> element<span class="impl">, if
+ any</span>.</p>
<dl class="domintro">
@@ -47987,8 +47760,226 @@
</div>
+ <h3>Common idioms without dedicated elements</h3>
+ <h5>Tag clouds</h5>
+ <p id="tag-cloud">This specification does not define any markup
+ specifically for marking up lists of keywords that apply to a group
+ of pages (also known as <i>tag clouds</i>). In general, authors are
+ encouraged to either mark up such lists using <code>ul</code>
+ elements with explicit inline counts that are then hidden and turned
+ into a presentational effect using a style sheet, or to use SVG.</p>
+
+ <div class="example">
+
+ <p>Here, three tags are included in a short tag cloud:</p>
+
+ <pre><style>
+ at media screen, print, handheld, tv {
+ /* should be ignored by non-visual browsers */
+ .tag-cloud > li > span { display: none; }
+ .tag-cloud > li { display: inline; }
+ .tag-cloud-1 { font-size: 0.7em; }
+ .tag-cloud-2 { font-size: 0.9em; }
+ .tag-cloud-3 { font-size: 1.1em; }
+ .tag-cloud-4 { font-size: 1.3em; }
+ .tag-cloud-5 { font-size: 1.5em; }
+}
+</style>
+...
+<ul class="tag-cloud">
+ <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
+ <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
+ <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
+</ul></pre>
+
+ <p>The actual frequency of each tag is given using the <code
+ title="attr-title">title</code> attribute. A CSS style sheet is
+ provided to convert the markup into a cloud of differently-sized
+ words, but for user agents that do not support CSS or are not
+ visual, the markup contains annotations like "(popular)" or
+ "(rare)" to categorize the various tags by frequency, thus enabling
+ all users to benefit from the information.</p>
+
+ <p>The <code>ul</code> element is used (rather than
+ <code>ol</code>) because the order is not particular important:
+ while the list is in fact ordered alphabetically, it would convey
+ the same information if ordered by, say, the length of the tag.</p>
+
+ <p>The <code title="rel-tag">tag</code> <code
+ title="attr-hyperlink-rel">rel</code>-keyword is <em>not</em> used
+ on these <code>a</code> elements because they do not represent tags
+ that apply to the page itself; they are just part of an index
+ listing the tags themselves.</p>
+
+ </div>
+
+
+ <h4>Conversations</h4>
+
+ <p>This specification does not define a specific element for marking
+ up conversations, meeting minutes, chat transcripts, dialogues in
+ screenplays, instant message logs, and other situations where
+ different players take turns in discourse.</p>
+
+ <p>Instead, authors are encouraged to mark up conversations using
+ <code>p</code> elements, with the <code>b</code> element for marking
+ up the speaker, optionally separated from their lines with
+ punctuation. Paragraphs with their text wrapped in the
+ <code>i</code> element can be used for marking up stage
+ directions.</p>
+
+ <div class="example">
+
+ <p>This example demonstrates this using an extract from Abbot and
+ Costello's famous sketch, <cite>Who's on first</cite>:</p>
+
+<pre><p> <b>Costello</b>: Look, you gotta first baseman?
+<p> <b>Abbott</b>: Certainly.
+<p> <b>Costello</b>: Who's playing first?
+<p> <b>Abbott</b>: That's right.
+<p> <i>Costello becomes exasperated.</i>
+<p> <b>Costello</b>: When you pay off the first baseman every month, who gets the money?
+<p> <b>Abbott</b>: Every dollar of it.</pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>The following extract shows how an IM conversation log could be
+ marked up.</p>
+
+ <pre><p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
+<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
+<p> <time>14:23</time> <b>egof</b> it's unarguably
+<p> <time>14:24</time> <b>kaj</b> you are not helping your case</pre>
+ <!-- with thanks to http://bash.org/?854262 -->
+
+ </div>
+
+
+ <h4 id="footnotes">Footnotes</h4>
+
+ <p>HTML does not have a dedicated mechanism for marking up
+ footnotes. Here are the recommended alternatives.</p>
+
+ <hr>
+
+ <p>For short inline annotations, the <code
+ title="attr-title">title</code> attribute should be used.</p>
+
+ <div class="example">
+
+ <p>In this example, two parts of a dialogue are annotated.</p>
+
+ <pre><p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
+<p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'"
+>Watcha</span> mean, miss?
+<p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
+<p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
+closing for lunch</span>.</pre>
+
+ </div>
+
+ <hr>
+
+ <p>For longer annotations, the <code>a</code> element should be
+ used, pointing to an element later in the document. The convention
+ is that the contents of the link be a number in square brackets.</p>
+
+ <div class="example">
+
+ <p>In this example, a footnote in the dialogue links to a paragraph
+ below the dialogue. The paragraph then reciprocally links back to the
+ dialogue, allowing the user to return to the location of the
+ footnote.</p>
+
+ <pre><p> <b>Announcer</b>: Number 16: The <i>hand</i>.
+<p> <b>Interviewer</b>: Good evening. I have with me in the
+studio tonight Mr Norman St John Polevaulter, who for the past few
+years has been contradicting people. Mr Polevaulter, why
+<em>do</em> you contradict people?
+<p> <b>Norman</b>: I don't. <a href="#fn1" id="r1">[1]</a>
+<p> <b>Interviewer</b>: You told me you did!
+<em>...</em>
+<section>
+ <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
+ but paradoxically if it were true he could not say so without
+ contradicting the interviewer and thus making it false.</p>
+</section></pre>
+
+ </div>
+
+ <hr>
+
+ <p>For side notes, longer annotations that apply to entire sections
+ of the text rather than just specific words or sentences, the
+ <code>aside</code> element should be used.</p>
+
+ <div class="example">
+
+ <p>In this example, a sidebar is given after a dialogue, giving it
+ some context.</p>
+
+ <pre><p> <b>Customer</b>: I will not buy this record, it is scratched.
+<p> <b>Shopkeeper</b>: I'm sorry?
+<p> <b>Customer</b>: I will not buy this record, it is scratched.
+<p> <b>Shopkeeper</b>: No no no, this's'a tobacconist's.
+<aside>
+ <p>In 1970, the British Empire lay in ruins, and foreign
+ nationalists frequented the streets — many of them Hungarians
+ (not the streets — the foreign nationals). Sadly, Alexander
+ Yalt has been publishing incompetently-written phrase books.
+</aside></pre>
+
+ </div>
+
+ <hr>
+
+ <p>For figures or tables, footnotes can be included in the relevant
+ <code>dt</code> or <code>caption</code> element, or in surrounding
+ prose.</p>
+
+ <div class="example">
+
+ <p>In this example, a <!-- round --> table has cells with footnotes
+ that are given in prose. A <code>figure</code> element is used to
+ give a single legend to the combination of the table and its
+ footnotes.</p>
+
+ <pre><figure>
+ <dt>Table 1. Alternative activities for knights.</dt>
+ <dd>
+ <table>
+ <tr>
+ <th> Activity
+ <th> Location
+ <th> Cost
+ <tr>
+ <td> Dance
+ <td> Wherever possible
+ <td> £0<sup><a href="#fn1">1</a></sup>
+ <tr>
+ <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
+ <td> Undisclosed
+ <td> Undisclosed
+ <tr>
+ <td> Dining<sup><a href="#fn3">3</a></sup>
+ <td> Camelot
+ <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
+ </table>
+ <p id="fn1">1. Assumed.</p>
+ <p id="fn2">2. Footwork impeccable.</p>
+ <p id="fn3">3. Quality described as "well".</p>
+ <p id="fn4">4. A lot.</p>
+ </dd>
+</figure></pre>
+
+ </div>
+
+
+
<div class="impl">
<h3>Matching HTML elements using selectors</h3>
@@ -48607,14 +48598,14 @@
following two examples:</p>
<pre><figure>
- <img src="castle.jpeg">
- <legend><span item><span itemprop="name">The Castle</span></span> (1986)</legend>
+ <dd><img src="castle.jpeg">
+ <dt><span item><span itemprop="name">The Castle</span></span> (1986)
</figure></pre>
<pre><span item><meta itemprop="name" content="The Castle"></span>
<figure>
- <img src="castle.jpeg">
- <legend>The Castle (1986)</legend>
+ <dd><img src="castle.jpeg">
+ <dt>The Castle (1986)
</figure></pre>
<p>Both have a figure with a caption, and both, completely
@@ -51655,8 +51646,8 @@
simultaneously.</p>
<pre><figure <strong>item="work"</strong>>
- <img <strong>itemprop="about"</strong> src="mypond.jpeg">
- <legend>
+ <dd><img <strong>itemprop="about"</strong> src="mypond.jpeg">
+ <dt>
<p><cite <strong>itemprop="title"</strong>>My Pond</cite></p>
<p><small>Licensed under the <a <strong>itemprop="license"</strong>
href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative
@@ -51664,7 +51655,6 @@
and the <a <strong>itemprop="license"</strong>
href="http://www.opensource.org/licenses/mit-license.php">MIT
license</a>.</small>
- </legend>
</figure></pre>
</div>
@@ -64958,8 +64948,8 @@
<a href="../">Return to photo index</a>
</nav>
<figure>
- <img src="/pix/39627052_fd8dcd98b5.jpg">
- <legend>Kissat</legend>
+ <dd><img src="/pix/39627052_fd8dcd98b5.jpg">
+ <dt>Kissat
</figure>
<p>One of them has six toes!</p>
<p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
@@ -75639,6 +75629,8 @@
immediately followed by another <code>li</code> element or if there
is no more content in the parent element.</p>
+ <!-- </dc> and </ds> can be added here one they are invented -->
+
<!-- </dt> -->
<p>A <code>dt</code> element's <span title="syntax-end-tag">end
tag</span> may be omitted if the <code>dt</code> element is
@@ -75657,13 +75649,13 @@
tag</span> may be omitted if the <code>p</code> element is
immediately followed by an <code>address</code>,
<code>article</code>, <code>aside</code>, <code>blockquote</code>,
- <!--v2DATAGRID <code>datagrid</code>,--> <code>dialog</code>,
- <code>dir</code>, <code>div</code>, <code>dl</code>,
- <code>fieldset</code>, <code>footer</code>, <code>form</code>,
- <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
- <code>h5</code>, <code>h6</code>, <code>header</code>,
- <code>hgroup</code>, <code>hr</code>, <code>menu</code>,
- <code>nav</code>, <code>ol</code>, <code>p</code>, <code>pre</code>,
+ <!--v2DATAGRID <code>datagrid</code>,--> <code>dir</code>,
+ <code>div</code>, <code>dl</code>, <code>fieldset</code>,
+ <code>footer</code>, <code>form</code>, <code>h1</code>,
+ <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>,
+ <code>h6</code>, <code>header</code>, <code>hgroup</code>,
+ <code>hr</code>, <code>menu</code>, <code>nav</code>,
+ <code>ol</code>, <code>p</code>, <code>pre</code>,
<code>section</code>, <code>table</code>, or <code>ul</code>,
element, or if there is no more content in the parent element and
the parent element is not an <code>a</code> element.</p>
@@ -77054,8 +77046,9 @@
<code>blockquote</code>, <code>body</code>, <code>br</code>,
<code>center</code>, <code>col</code>, <code>colgroup</code>,
<code>command</code>, <!--v2DDATAGRID--><code>datagrid</code>,
- <code>dd</code>, <code>details</code>, <code>dialog</code>,
- <code>dir</code>, <code>div</code>, <code>dl</code>,
+ <code>dc</code><!-- speculative -->, <code>dd</code>,
+ <code>details</code>, <code>dir</code>, <code>div</code>,
+ <code>dl</code>, <code>ds</code><!-- speculative -->,
<code>dt</code>, <code>embed</code>, <code>fieldset</code>,
<code>figure</code>, <code>footer</code>, <code>form</code>,
<code>frame</code>, <code>frameset</code>, <code>h1</code>,
@@ -79207,9 +79200,11 @@
<h5>Closing elements that have implied end tags</h5>
+ <!-- <dc> and <ds> are here speculatively for future expansion (they're not defined elements yet) -->
<p>When the steps below require the UA to <dfn>generate implied end
tags</dfn>, then, while the <span>current node</span> is a
- <code>dd</code> element, a <code>dt</code> element, an
+ <code>dc</code> element, a <code>dd</code> element, a
+ <code>ds</code> element, a <code>dt</code> element, an
<code>li</code> element, an <code>option</code> element, an
<code>optgroup</code> element, a <code>p</code> element, an
<code>rp</code> element, or an <code>rt</code> element, the UA must
@@ -80097,14 +80092,15 @@
<dd>
<p>If there is a node in the <span>stack of open elements</span>
- that is not either a <code>dd</code> element, a <code>dt</code>
- element, an <code>li</code> element, a <code>p</code> element, a
+ that is not either a <code>dc</code> element, a <code>dd</code>
+ element, a <code>ds</code> element, a <code>dt</code> element, an
+ <code>li</code> element, a <code>p</code> element, a
<code>tbody</code> element, a <code>td</code> element, a
<code>tfoot</code> element, a <code>th</code> element, a
<code>thead</code> element, a <code>tr</code> element, the
<code>body</code> element, or the <code>html</code> element, then
this is a <span>parse error</span>.</p> <!-- (some of those are
- fragment cases) -->
+ fragment cases) --> <!-- <dc> and <ds> are there speculatively -->
<p><span>Stop parsing</span>.</p>
@@ -80122,7 +80118,8 @@
body". -->
<p>Otherwise, if there is a node in the <span>stack of open
- elements</span> that is not either a <code>dd</code> element, a
+ elements</span> that is not either a <code>dc</code> element, a
+ <code>dd</code> element, a <code>ds</code> element, a
<code>dt</code> element, an <code>li</code> element, an
<code>optgroup</code> element, an <code>option</code> element, a
<code>p</code> element, an <code>rp</code> element, an
@@ -80133,7 +80130,8 @@
<code>html</code> element, then this is a <span>parse
error</span>.</p> <!-- (some of those are fragment cases, e.g. for
<tbody> you'd have hit the first paragraph since the <body>
- wouldn't be in scope, unless it was a fragment case) -->
+ wouldn't be in scope, unless it was a fragment case) --> <!-- <dc>
+ and <ds> are there speculatively -->
<!-- If we ever change the frameset-ok flag to an insertion mode,
then we'd have to somehow keep track of its state when we switch
@@ -80161,9 +80159,8 @@
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", <!--v2DATAGRID-->"datagrid",
- "details", "dialog", "dir", "div", "dl", "fieldset", "figure",
- "footer", "header", "hgroup", "menu", "nav", "ol", "p", "section",
- "ul"</dt>
+ "details", "dir", "div", "dl", "fieldset", "figure", "footer",
+ "header", "hgroup", "menu", "nav", "ol", "p", "section", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -80294,7 +80291,8 @@
</dd>
<!-- as normal, but imply </dt> or </dd> when there's another <dt> or <dd> open in weird cases -->
- <dt>A start tag whose tag name is one of: "dd", "dt"</dt>
+ <!-- <dc> and <ds> are here speculatively for future expansion (they're not defined elements yet) -->
+ <dt>A start tag whose tag name is one of: "dc", "dd", "ds", "dt"</dt>
<dd>
<p>Run the following algorithm:</p>
@@ -80307,9 +80305,10 @@
node</span> (the bottommost node of the stack).</p></li>
<li><p><i>Loop</i>: If <var title="">node</var> is a
- <code>dd</code> or <code>dt</code> element, then act as if an end
- tag with the same tag name as <var title="">node</var> had been
- seen, then jump to the last step.</p></li>
+ <code>dc</code>, <code>dd</code>, <code>ds</code>, or
+ <code>dt</code> element, then act as if an end tag with the same
+ tag name as <var title="">node</var> had been seen, then jump to
+ the last step.</p></li>
<li><p>If <var title="">node</var> is not in the
<span>formatting</span> category, and is not in the
@@ -80373,9 +80372,9 @@
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", <!--v2DATAGRID-->"datagrid",
- "details", "dialog", "dir", "div", "dl", "fieldset", "figure",
- "footer", "header", "hgroup", "listing", "menu", "nav", "ol",
- "pre", "section", "ul"</dt>
+ "details", "dir", "div", "dl", "fieldset", "figure", "footer",
+ "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "section", "ul"</dt>
<dd>
<p>If the <span>stack of open elements</span> does not <span
@@ -80492,7 +80491,8 @@
</dd>
<!-- as normal, but needs care as the elements have optional tags -->
- <dt>An end tag whose tag name is one of: "dd", "dt"</dt>
+ <!-- <dc> and <ds> are here speculatively for future expansion (they're not defined elements yet) -->
+ <dt>An end tag whose tag name is one of: "dc", "dd", "ds", "dt"</dt>
<dd>
<p>If the <span>stack of open elements</span> does not <span
@@ -82437,9 +82437,10 @@
<dt>A start tag whose tag name is one of: <!--"a",--> "b", "big",
"blockquote", "body"<!--by inspection-->, "br", "center", "code",
- "dd", "div", "dl", "dt"<!-- so that dd and dt can be handled
- uniformly throughout the parser -->, "em", "embed", "h1", "h2",
- "h3", "h4"<!--for completeness-->, "h5", "h6"<!--for
+ "dc"<!-- with dt -->, "dd", "div", "dl", "ds"<!-- with dt -->,
+ "dt"<!-- so that dd and dt can be handled uniformly throughout the
+ parser; dc and ds are here for the same reason -->, "em", "embed",
+ "h1", "h2", "h3", "h4"<!--for completeness-->, "h5", "h6"<!--for
completeness-->, "head"<!--by inspection-->, "hr", "i", "img",
"li", "listing"<!-- so that pre and listing can be handled
uniformly throughout the parser -->, "menu", "meta", "nobr",
@@ -82447,15 +82448,13 @@
the parser -->, "p", "pre", "ruby", "s", <!--"script",--> "small",
"span", "strong", "strike"<!-- so that s and strike can be handled
uniformly throughout the parser -->, <!--"style",--> "sub", "sup",
- "table"<!--by inspection-->, "tt", "u", "ul", "var"</dt>
- <!-- this list was determined empirically by studying over
- 6,000,000,000 pages that were specifically not XML pages -->
- <dt>A start tag whose tag name is "font", if the token has
- any attributes named "color", "face", or "size"</dt>
- <!-- the attributes here are required so that SVG <font> will go
- through as SVG but legacy <font>s won't -->
- <dt>An end-of-file token</dt>
- <dd>
+ "table"<!--by inspection-->, "tt", "u", "ul", "var"</dt> <!-- this
+ list was determined empirically by studying over 6,000,000,000
+ pages that were specifically not XML pages --> <dt>A start tag
+ whose tag name is "font", if the token has any attributes named
+ "color", "face", or "size"</dt> <!-- the attributes here are
+ required so that SVG <font> will go through as SVG but legacy
+ <font>s won't --> <dt>An end-of-file token</dt> <dd>
<p><span>Parse error</span>.</p>
@@ -84263,8 +84262,8 @@
display: none;
}
-address, article, aside, blockquote, body, center, dd, dialog, dir,
-div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
+address, article, aside, blockquote, body, center, dc, dd, dir, div,<!-- dc and ds are here for speculative purposes to enable future extensions -->
+dl, ds, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
section, ul, xmp { display: block; }
@@ -84337,7 +84336,7 @@
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-blockquote, dialog, dir, dl, figure, listing, menu, ol, p, plaintext,
+blockquote, dir, dl, figure, listing, menu, ol, p, plaintext,
pre, ul, xmp {
margin-top: 1em; margin-bottom: 1em;
}
@@ -85616,7 +85615,7 @@
'block' box with its 'padding-left' property set to '40px'. The
element's shadow tree is expected to take a child element that
matches the selector <code
- title="">:bound-element > legend:first-child</code> and
+ title="">:bound-element > dt:first-of-type</code> and
place it in a first 'block' box container, and then take the
remaining child nodes and place them in a later 'block' box
container.</p>
@@ -90057,6 +90056,7 @@
Jens Fendler,
Jens Lindström,
Jens Meiert,
+ Jeremy Keith,
Jeremy Orlow,
Jeroen van der Meer,
Jian Li,
More information about the Commit-Watchers
mailing list