Short URL: http://html5.org/r/4636
| SVN | Bug | Comment | Time (UTC) |
|---|---|---|---|
| 4636 | 2010-01-30 03:12 |
Index: source
===================================================================
--- source (revision 4635)
+++ source (revision 4636)
@@ -16286,23 +16286,22 @@
<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>dt</code> element.</p>
+ <code>figure</code> element and its <code>figcaption</code>
+ element.</p>
<pre><figure>
- <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>
+ <figcaption>The top 10 movies of all time</figcaption>
+ <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>
</figure></pre>
<p>The markup could also be written as follows, using the <code
@@ -16310,21 +16309,19 @@
<code>ol</code> element:</p>
<pre><figure>
- <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>
+ <figcaption>The top 10 movies of all time</figcaption>
+ <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>
</figure></pre>
</div>
@@ -16499,22 +16496,17 @@
<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>In a <code>figure</code> element containing no other <code>dt</code> element children.</dd>
- <dd>As the first child of a <code>details</code> 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>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <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>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).</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
@@ -16531,8 +16523,6 @@
<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>In a <code>figure</code> element containing no other <code>dd</code> element children.</dd>
- <dd>As the last child of a <code>details</code> element.</dd>
<dt>Content model:</dt>
<dd><span>Flow content</span>.</dd>
<dt>Content attributes:</dt>
@@ -16541,11 +16531,9 @@
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>dd</code> element <span>represents</span> either: the
+ <p>The <code>dd</code> element <span>represents</span> the
description, definition, or value, part of a term-description group
- 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>
+ in a description list (<code>dl</code> element).</p>
<div class="example">
@@ -17960,21 +17948,19 @@
figure's legend using <code>var</code>.</p>
<pre><figure>
- <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>
+ <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>
+ <figcaption>
Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
a triangle with sides <var>b</var> and <var>c</var>
- </dt>
+ </figcaption>
</figure></pre>
</div>
@@ -19147,14 +19133,16 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt>Content model:</dt>
- <dd>In any order, one <code>dd</code> element, and optionally one <code>dt</code> element.</dd>
+ <dd>Either: One <code>figcaption</code> element followed by <span>phrasing content</span>.</dd>
+ <dd>Or: <span>Phrasing content</span> followed by one <code>figcaption</code> element.</dd>
+ <dd>Or: <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>
- <!-- v2: Add a <dc> or <credit> element for photo credits -->
+ <!-- v2: Add a <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
@@ -19167,16 +19155,11 @@
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 <span class="impl">first</span> <code>dt</code> element child
- of the element, if any, represents the caption of the
+ <p>The <span class="impl">first</span> <code>figcaption</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>
+ <code>figcaption</code> element, then there is no caption.</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 are no contents.</span></p>
-
<div class="example">
<p>This example shows the <code>figure</code> element to mark up a
@@ -19185,14 +19168,12 @@
<pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
- <dt>Listing 4. The primary core interface API declaration.</dt>
- <dd>
- <pre><code>interface PrimaryCore {
- boolean verifyDataLine();
- void sendData(in sequence&lt;byte> data);
- void initSelfDestruct();
+ <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
+ <pre><code>interface PrimaryCore {
+ boolean verifyDataLine();
+ void sendData(in sequence&lt;byte> data);
+ void initSelfDestruct();
}</code></pre>
- </dd>
</figure>
<p>The API is designed to use UTF-8.</p></pre>
@@ -19204,12 +19185,10 @@
photo.</p>
<pre><figure>
- <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>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ <figcaption>Bubbles at work</figcaption>
</figure></pre>
</div>
@@ -19234,13 +19213,13 @@
included with Exhibit B.
<figure>
- <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.
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>
<figure>
- <dd><video src="ex-b.mov"></video>
- <dt>Exhibit B. The <cite>Rough Copy</cite> trailer.
+ <video src="ex-b.mov"></video>
+ <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>
<p>The case was resolved out of court.</pre>
@@ -19253,13 +19232,11 @@
<code>figure</code>.</p>
<pre><figure>
- <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>
+ <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>
+ <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure></pre>
</div>
@@ -19270,20 +19247,39 @@
discussing a castle, the figure has three images in it.</p>
<pre><figure>
- <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>
+ <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.">
+ <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure></pre>
</div>
+ <h4>The <dfn><code>figcaption</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first or last child of a <code>figure</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>figcaption</code> element <span>represents</span> a
+ caption or legend for the rest of the contents of the
+ <code>figcaption</code> element's parent <code>figure</code>
+ element<span class="impl">, if any</span>.</p>
+
+
<h4>The <dfn><code>img</code></dfn> element</h4>
<dl class="element">
@@ -19582,9 +19578,9 @@
steps.</p></li>
<li><p>If the image is the child of a <code>figure</code> element
- 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>
+ that has a child <code>figcaption</code> element, then the
+ contents of the first such <code>figcaption</code> element are
+ the caption information; abort these steps.</p></li>
<li><p>Run the algorithm to create the <span>outline</span> for
the document.</p></li>
@@ -20024,7 +20020,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>dt</code> element of a <code>figure</code> with this
+ <code>figcaption</code> element of a <code>figure</code> with this
image).</p>
</div>
@@ -20213,10 +20209,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>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>
+ be used, or the <code>figure</code> and <code>figcaption</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
@@ -20227,22 +20223,20 @@
<p><strong><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></strong></p></pre>
- <pre><!-- Using <figure> and <dt> -->
+ <pre><!-- Using <figure> and <figcaption> -->
<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>
- <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>
+ <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>
+ <figcaption>Flowchart representation of the parsing model.</figcaption>
</figure></pre>
<pre class="bad"><!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
@@ -20407,19 +20401,17 @@
some alternative text:</p>
<pre><figure>
- <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>
+ <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>
+ <figcaption>Screenshot of a KDE desktop.</figcaption>
</figure></pre>
</div>
@@ -20463,14 +20455,14 @@
if brief, is still better than nothing:</p>
<pre><figure>
- <dd><strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ <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></dd>
- <dt>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</dt>
+ the center extending below the sides."></strong>
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
</figure></pre>
<p>Note that the following would be a very bad use of alternative
@@ -20478,10 +20470,10 @@
<pre class="bad"><!-- This example is wrong. Do not copy it. -->
<figure>
- <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>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
</figure></pre>
<p>Including the caption in the alternative text like this isn't
@@ -20535,8 +20527,9 @@
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>dt</code> element that contains
- content other than <span>inter-element whitespace</span>.</li>
+ element that contains a <code>figcaption</code> element that
+ contains content other than <span>inter-element
+ whitespace</span>.</li>
<li>The <code>img</code> element is part of the only
<span>paragraph</span> directly in its <span
@@ -20560,8 +20553,8 @@
image with no metadata other than the caption:</p>
<pre><figure>
- <dd><strong><img src="1100670787_6a7c664aef.jpg"></strong></dd>
- <dt>Bubbles traveled everywhere with us.</dt>
+ <strong><img src="1100670787_6a7c664aef.jpg"></strong>
+ <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure></pre>
<p>It could also be marked up like this:</p>
@@ -20587,8 +20580,8 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <dd><strong><img src="photo2.jpeg"></strong></dd>
- <dt>A photograph taken blindly from my front porch.</dt>
+ <strong><img src="photo2.jpeg"></strong>
+ <figcaption>A photograph taken blindly from my front porch.</figcaption>
</figure>
</article></pre>
@@ -20599,13 +20592,13 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <dd><strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
+ <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></dd>
- <dt>A photograph taken blindly from my front porch.</dt>
+ with light blue streaks."></strong>
+ <figcaption>A photograph taken blindly from my front porch.</figcaption>
</figure>
</article></pre>
@@ -22522,13 +22515,11 @@
not support third-party technologies like Java.)</p>
<pre><figure>
- <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>
+ <object type="application/x-java-applet">
+ <param name="code" value="MyJavaClass">
+ <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ <figcaption>My Java Clock</figcaption>
</figure></pre>
</div>
@@ -22539,8 +22530,8 @@
<code>object</code> element.</p>
<pre><figure>
- <dd><object data="clock.html"></object>
- <dt>My HTML Clock
+ <object data="clock.html"></object>
+ <figcaption>My HTML Clock</figcaption>
</figure></pre>
</div>
@@ -31051,12 +31042,10 @@
<caption>
<strong>Characteristics with positive and negative sides.</strong>
<details>
- <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>
+ <summary>Help</summary>
+ <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>
</details>
</caption>
<thead>
@@ -31080,59 +31069,55 @@
<dd>
<div class="example"><pre><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>
+ <figcaption>Characteristics with positive and negative sides</figcaption>
+ <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></pre></div>
</dd>
- <dt>Next to the table, in a <code>figure</code>'s <code>dt</code></dt>
+ <dt>Next to the table, in a <code>figure</code>'s <code>figcaption</code></dt>
<dd>
<div class="example"><pre><figure>
- <dt>
+ <figcaption>
<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>
- </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>
+ </figcaption>
+ <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></pre></div>
</dd>
@@ -31533,9 +31518,9 @@
</div>
<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>
+ <code>figure</code> element other than the <code>figcaption</code>,
+ the <code>caption</code> element should be omitted in favor of the
+ <code>figcaption</code>.</p>
<p>A caption can introduce context for a table, making it
significantly easier to understand.</p>
@@ -45264,7 +45249,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>Optionally one <code>dt</code> element, followed by one <code>dd</code> element.</dd>
+ <dd>One <code>summary</code> element followed by <span>flow content</span>.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dd><code title="attr-details-open">open</code></dd>
@@ -45284,18 +45269,12 @@
for footnotes. Please see <a href="#footnotes">the section on
footnotes</a> for details on how to mark up footnotes.</p>
- <p>The <span class="impl">first</span> <code>dt</code> element child
- of the element, if any, <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>
+ <p>The <span class="impl">first</span> <code>summary</code> element
+ child of the element, if any, <span>represents</span> the summary or
+ legend of the details. <span class="impl">If there is no child
+ <code>summary</code> element, the user agent should provide its own
+ legend (e.g. "Details").</span></p>
- <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>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
@@ -45329,17 +45308,15 @@
<pre><section class="progress window">
<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
<details>
- <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>
+ <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
+ <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>
</details>
</section></pre>
@@ -45351,10 +45328,9 @@
used to hide some controls by default:</p>
<pre><details>
- <dt>Name & Extension:
- <dd>
- <p><input type=text name=fn value="Pillar Magazine.pdf">
- <p><label><input type=checkbox name=ext checked> Hide extension</label>
+ <summary>Name & Extension:</summary>
+ <p><input type=text name=fn value="Pillar Magazine.pdf">
+ <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details></pre>
<p>One could use this in conjuction with other <code>details</code>
@@ -45363,9 +45339,35 @@
<p class="details-example"><img src="images/sample-details-1.png" alt=""><img src="images/sample-details-2.png" alt=""></p>
+ <p>In these examples, the summary really just summarises what the
+ controls can change, and not the actual values, which is less than
+ ideal.</p>
+
</div>
+ <h4>The <dfn><code>summary</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first child of a <code>details</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>summary</code> element <span>represents</span> a
+ summary, caption, or legend for the rest of the contents of the
+ <code>summary</code> element's parent <code>details</code>
+ element<span class="impl">, if any</span>.</p>
+
+
+
<!-- v2DATAGRID
<h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
@@ -49645,8 +49647,8 @@
<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>
+ <code>figcaption</code> or <code>caption</code> element, or in
+ surrounding prose.</p>
<div class="example">
@@ -49656,31 +49658,29 @@
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>
+ <figcaption>Table 1. Alternative activities for knights.</figcaption>
+ <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>
@@ -50383,14 +50383,14 @@
following two examples:</p>
<pre><figure>
- <dd><img src="castle.jpeg">
- <dt><span itemscope><span itemprop="name">The Castle</span></span> (1986)
+ <img src="castle.jpeg">
+ <figcaption><span itemscope><span itemprop="name">The Castle</span></span> (1986)</figcaption>
</figure></pre>
<pre><span itemscope><meta itemprop="name" content="The Castle"></span>
<figure>
- <dd><img src="castle.jpeg">
- <dt>The Castle (1986)
+ <img src="castle.jpeg">
+ <figcaption>The Castle (1986)</figcaption>
</figure></pre>
<p>Both have a figure with a caption, and both, completely
@@ -54897,8 +54897,8 @@
simultaneously.</p>
<pre><figure <strong>itemscope itemtype="http://n.whatwg.org/work"</strong>>
- <dd><img <strong>itemprop="work"</strong> src="mypond.jpeg">
- <dt>
+ <img <strong>itemprop="work"</strong> src="mypond.jpeg">
+ <figcaption>
<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
@@ -54906,6 +54906,7 @@
and the <a <strong>itemprop="license"</strong>
href="http://www.opensource.org/licenses/mit-license.php">MIT
license</a>.</small>
+ </figcaption>
</figure></pre>
</div>
@@ -66353,8 +66354,8 @@
<a href="../">Return to photo index</a>
</nav>
<figure>
- <dd><img src="/pix/39627052_fd8dcd98b5.jpg">
- <dt>Kissat
+ <img src="/pix/39627052_fd8dcd98b5.jpg">
+ <figcaption>Kissat</figcaption>
</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>
@@ -89455,9 +89456,9 @@
}
address, article, aside, blockquote, body, center, dd, dir, div, dl,
-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; }
+dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,
+hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
+section, summary, ul, xmp { display: block; }
table { display: table; }
caption { display: table-caption; }
@@ -89555,7 +89556,6 @@
h6 { margin-top: 2.33em; margin-bottom; 2.33em; }
dd { margin-left: 40px; } /* <span>LTR-specific</span>: use 'margin-right' for rtl elements */
-details > dd, figure > dd { margin-left: 0; } /* <span>LTR-specific</span>: use 'margin-right' for rtl elements */
dir, menu, ol, ul { padding-left: 40px; } /* <span>LTR-specific</span>: use 'padding-right' for rtl elements */
blockquote, figure { margin-left: 40px; margin-right: 40px; }
@@ -90841,10 +90841,10 @@
<code>details</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 the element's first child
- <code>dt</code> element, if any, and place it in a first 'block' box
- container, and then take the element's first child <code>dd</code>
- element, if any, and place it in a second 'block' box container,
- ignoring all the other children of the element.</p>
+ <code>summary</code> element, if any, and place it in a first
+ 'block' box container, and then take the element's remaining
+ descendants, if any, and place them in a second 'block' box
+ container.</p>
<p>The first container is expected to contain at least one line box,
and that line box is expected to contain a disclosure widget
@@ -94706,9 +94706,7 @@
<th><code>dd</code></th>
<td>Content for corresponding <code>dt</code> element(s)</td>
<td>none</td>
- <td><code>dl</code>;
- <code>figure</code>;
- <code>details</code></td>
+ <td><code>dl</code></td>
<td><span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
@@ -94734,8 +94732,8 @@
<span title="Sectioning root">sectioning root</span>;
<span title="Interactive content">interactive</span></td>
<td><span title="Flow content">flow</span></td>
- <td><code>dt</code>*;
- <code>dd</code>*</td>
+ <td><code>summary</code>*;
+ <span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span>;
<code title="attr-details-open">open</code></td>
<td><code>HTMLDetailsElement</code></td>
@@ -94778,9 +94776,7 @@
<th><code>dt</code></th>
<td>Legend for corresponding <code>dd</code> element(s)</td>
<td>none</td>
- <td><code>dl</code>;
- <code>figure</code>;
- <code>details</code></td>
+ <td><code>dl</code></td>
<td>varies*</td>
<td><span title="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
@@ -94833,13 +94829,23 @@
</tr>
<tr>
+ <th><code>figcaption</code></th>
+ <td>Caption for <code>figure</code></td>
+ <td>none</td>
+ <td><code>figure</code></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>figure</code></th>
<td>Figure with optional caption</td>
<td><span title="Flow content">flow</span>;
<span title="Sectioning root">sectioning root</span></td>
<td><span title="Flow content">flow</span></td>
- <td><code>dt</code>*;
- <code>dd</code>*</td>
+ <td><code>figcaption</code>*;
+ <span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
</tr>
@@ -95557,6 +95563,16 @@
</tr>
<tr>
+ <th><code>summary</code></th>
+ <td>Caption for <code>details</code></td>
+ <td>none</td>
+ <td><code>details</code></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>sup</code></th>
<td>Superscript</td>
<td><span title="Flow content">flow</span>;
@@ -97148,6 +97164,10 @@
<td> <code>HTMLFieldSetElement</code> : <code>HTMLElement</code>
<tr>
+ <td> <code>figcaption</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>figure</code>
<td> <code>HTMLElement</code>
@@ -97356,6 +97376,10 @@
<td> <code>HTMLElement</code>
<tr>
+ <td> <code>summary</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>sup</code>
<td> <code>HTMLElement</code>