[html5] r4636 - [acgiow] (0) Change <figure> and <details> to use <figcaption> and <summary> rat [...]

whatwg at whatwg.org whatwg at whatwg.org
Fri Jan 29 19:12:12 PST 2010


Author: ianh
Date: 2010-01-29 19:12:10 -0800 (Fri, 29 Jan 2010)
New Revision: 4636

Modified:
   complete.html
   index
   source
Log:
[acgiow] (0) Change <figure> and <details> to use <figcaption> and <summary> rather than <dt>/<dd> or <legend>.

Modified: complete.html
===================================================================
--- complete.html	2010-01-29 23:11:02 UTC (rev 4635)
+++ complete.html	2010-01-30 03:12:10 UTC (rev 4636)
@@ -110,7 +110,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    <hgroup><h1>Web Applications 1.0</h1>
-    <h2 class="no-num no-toc">Draft Standard — 29 January 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard — 30 January 2010</h2>
    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -403,75 +403,76 @@
    <li><a href=#embedded-content-1><span class=secno>4.8 </span>Embedded content</a>
     <ol>
      <li><a href=#the-figure-element><span class=secno>4.8.1 </span>The <code>figure</code> element</a></li>
-     <li><a href=#the-img-element><span class=secno>4.8.2 </span>The <code>img</code> element</a>
+     <li><a href=#the-figcaption-element><span class=secno>4.8.2 </span>The <code>figcaption</code> element</a></li>
+     <li><a href=#the-img-element><span class=secno>4.8.3 </span>The <code>img</code> element</a>
       <ol>
-       <li><a href=#alt><span class=secno>4.8.2.1 </span>Requirements for providing text to act as an alternative for images</a>
+       <li><a href=#alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</a>
         <ol>
-         <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.2.1.1 </span>A link or button containing nothing but the image</a></li>
-         <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.2.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
-         <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.2.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
-         <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.2.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
-         <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.2.1.5 </span>A graphical representation of some of the surrounding text</a></li>
-         <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.2.1.6 </span>A purely decorative image that doesn't add any information</a></li>
-         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.2.1.7 </span>A group of images that form a single larger picture with no links</a></li>
-         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.2.1.8 </span>A group of images that form a single larger picture with links</a></li>
-         <li><a href=#a-key-part-of-the-content><span class=secno>4.8.2.1.9 </span>A key part of the content</a></li>
-         <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.2.1.10 </span>An image not intended for the user</a></li>
-         <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.2.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
-         <li><a href=#general-guidelines><span class=secno>4.8.2.1.12 </span>General guidelines</a></li>
-         <li><a href=#guidance-for-markup-generators><span class=secno>4.8.2.1.13 </span>Guidance for markup generators</a></li>
-         <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.2.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
-     <li><a href=#the-iframe-element><span class=secno>4.8.3 </span>The <code>iframe</code> element</a></li>
-     <li><a href=#the-embed-element><span class=secno>4.8.4 </span>The <code>embed</code> element</a></li>
-     <li><a href=#the-object-element><span class=secno>4.8.5 </span>The <code>object</code> element</a></li>
-     <li><a href=#the-param-element><span class=secno>4.8.6 </span>The <code>param</code> element</a></li>
-     <li><a href=#video><span class=secno>4.8.7 </span>The <code>video</code> element</a></li>
-     <li><a href=#audio><span class=secno>4.8.8 </span>The <code>audio</code> element</a></li>
-     <li><a href=#the-source-element><span class=secno>4.8.9 </span>The <code>source</code> element</a></li>
-     <li><a href=#media-elements><span class=secno>4.8.10 </span>Media elements</a>
+         <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</a></li>
+         <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
+         <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
+         <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
+         <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</a></li>
+         <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</a></li>
+         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</a></li>
+         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</a></li>
+         <li><a href=#a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</a></li>
+         <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</a></li>
+         <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
+         <li><a href=#general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</a></li>
+         <li><a href=#guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</a></li>
+         <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+     <li><a href=#the-iframe-element><span class=secno>4.8.4 </span>The <code>iframe</code> element</a></li>
+     <li><a href=#the-embed-element><span class=secno>4.8.5 </span>The <code>embed</code> element</a></li>
+     <li><a href=#the-object-element><span class=secno>4.8.6 </span>The <code>object</code> element</a></li>
+     <li><a href=#the-param-element><span class=secno>4.8.7 </span>The <code>param</code> element</a></li>
+     <li><a href=#video><span class=secno>4.8.8 </span>The <code>video</code> element</a></li>
+     <li><a href=#audio><span class=secno>4.8.9 </span>The <code>audio</code> element</a></li>
+     <li><a href=#the-source-element><span class=secno>4.8.10 </span>The <code>source</code> element</a></li>
+     <li><a href=#media-elements><span class=secno>4.8.11 </span>Media elements</a>
       <ol>
-       <li><a href=#error-codes><span class=secno>4.8.10.1 </span>Error codes</a></li>
-       <li><a href=#location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</a></li>
-       <li><a href=#mime-types><span class=secno>4.8.10.3 </span>MIME types</a></li>
-       <li><a href=#network-states><span class=secno>4.8.10.4 </span>Network states</a></li>
-       <li><a href=#loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</a></li>
-       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</a></li>
-       <li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
-       <li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
-       <li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
-       <li><a href=#user-interface><span class=secno>4.8.10.10 </span>User interface</a></li>
-       <li><a href=#time-ranges><span class=secno>4.8.10.11 </span>Time ranges</a></li>
-       <li><a href=#mediaevents><span class=secno>4.8.10.12 </span>Event summary</a></li>
-       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.13 </span>Security and privacy considerations</a></ol></li>
-     <li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
+       <li><a href=#error-codes><span class=secno>4.8.11.1 </span>Error codes</a></li>
+       <li><a href=#location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</a></li>
+       <li><a href=#mime-types><span class=secno>4.8.11.3 </span>MIME types</a></li>
+       <li><a href=#network-states><span class=secno>4.8.11.4 </span>Network states</a></li>
+       <li><a href=#loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</a></li>
+       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</a></li>
+       <li><a href=#the-ready-states><span class=secno>4.8.11.7 </span>The ready states</a></li>
+       <li><a href=#playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</a></li>
+       <li><a href=#seeking><span class=secno>4.8.11.9 </span>Seeking</a></li>
+       <li><a href=#user-interface><span class=secno>4.8.11.10 </span>User interface</a></li>
+       <li><a href=#time-ranges><span class=secno>4.8.11.11 </span>Time ranges</a></li>
+       <li><a href=#mediaevents><span class=secno>4.8.11.12 </span>Event summary</a></li>
+       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</a></ol></li>
+     <li><a href=#the-canvas-element><span class=secno>4.8.12 </span>The <code>canvas</code> element</a>
       <ol>
-       <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
+       <li><a href=#2dcontext><span class=secno>4.8.12.1 </span>The 2D context</a>
         <ol>
-         <li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
-         <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
-         <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
-         <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
-         <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
-         <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
-         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
-         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
-         <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
-         <li><a href=#text><span class=secno>4.8.11.1.10 </span>Text</a></li>
-         <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
-         <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
-         <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
-         <li><a href=#examples><span class=secno>4.8.11.1.14 </span>Examples</a></ol></li>
-       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
-       <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
-     <li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
-     <li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
-     <li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
+         <li><a href=#the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</a></li>
+         <li><a href=#transformations><span class=secno>4.8.12.1.2 </span>Transformations</a></li>
+         <li><a href=#compositing><span class=secno>4.8.12.1.3 </span>Compositing</a></li>
+         <li><a href=#colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</a></li>
+         <li><a href=#line-styles><span class=secno>4.8.12.1.5 </span>Line styles</a></li>
+         <li><a href=#shadows><span class=secno>4.8.12.1.6 </span>Shadows</a></li>
+         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</a></li>
+         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</a></li>
+         <li><a href=#focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</a></li>
+         <li><a href=#text><span class=secno>4.8.12.1.10 </span>Text</a></li>
+         <li><a href=#images><span class=secno>4.8.12.1.11 </span>Images</a></li>
+         <li><a href=#pixel-manipulation><span class=secno>4.8.12.1.12 </span>Pixel manipulation</a></li>
+         <li><a href=#drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</a></li>
+         <li><a href=#examples><span class=secno>4.8.12.1.14 </span>Examples</a></ol></li>
+       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</a></li>
+       <li><a href=#security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+     <li><a href=#the-map-element><span class=secno>4.8.13 </span>The <code>map</code> element</a></li>
+     <li><a href=#the-area-element><span class=secno>4.8.14 </span>The <code>area</code> element</a></li>
+     <li><a href=#image-maps><span class=secno>4.8.15 </span>Image maps</a>
       <ol>
-       <li><a href=#authoring><span class=secno>4.8.14.1 </span>Authoring</a></li>
-       <li><a href=#processing-model><span class=secno>4.8.14.2 </span>Processing model</a></ol></li>
-     <li><a href=#mathml><span class=secno>4.8.15 </span>MathML</a></li>
-     <li><a href=#svg-0><span class=secno>4.8.16 </span>SVG</a></li>
-     <li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
+       <li><a href=#authoring><span class=secno>4.8.15.1 </span>Authoring</a></li>
+       <li><a href=#processing-model><span class=secno>4.8.15.2 </span>Processing model</a></ol></li>
+     <li><a href=#mathml><span class=secno>4.8.16 </span>MathML</a></li>
+     <li><a href=#svg-0><span class=secno>4.8.17 </span>SVG</a></li>
+     <li><a href=#dimension-attributes><span class=secno>4.8.18 </span>Dimension attributes</a></ol></li>
    <li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
     <ol>
      <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
@@ -575,27 +576,28 @@
    <li><a href=#interactive-elements><span class=secno>4.11 </span>Interactive elements</a>
     <ol>
      <li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
-     <li><a href=#the-command><span class=secno>4.11.2 </span>The <code>command</code> element</a></li>
-     <li><a href=#menus><span class=secno>4.11.3 </span>The <code>menu</code> element</a>
+     <li><a href=#the-summary-element><span class=secno>4.11.2 </span>The <code>summary</code> element</a></li>
+     <li><a href=#the-command><span class=secno>4.11.3 </span>The <code>command</code> element</a></li>
+     <li><a href=#menus><span class=secno>4.11.4 </span>The <code>menu</code> element</a>
       <ol>
-       <li><a href=#menus-intro><span class=secno>4.11.3.1 </span>Introduction</a></li>
-       <li><a href=#building-menus-and-toolbars><span class=secno>4.11.3.2 </span>Building menus and toolbars</a></li>
-       <li><a href=#context-menus><span class=secno>4.11.3.3 </span>Context menus</a></li>
-       <li><a href=#toolbars><span class=secno>4.11.3.4 </span>Toolbars</a></ol></li>
-     <li><a href=#commands><span class=secno>4.11.4 </span>Commands</a>
+       <li><a href=#menus-intro><span class=secno>4.11.4.1 </span>Introduction</a></li>
+       <li><a href=#building-menus-and-toolbars><span class=secno>4.11.4.2 </span>Building menus and toolbars</a></li>
+       <li><a href=#context-menus><span class=secno>4.11.4.3 </span>Context menus</a></li>
+       <li><a href=#toolbars><span class=secno>4.11.4.4 </span>Toolbars</a></ol></li>
+     <li><a href=#commands><span class=secno>4.11.5 </span>Commands</a>
       <ol>
-       <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.4.1 </span>Using the <code>a</code> element to define a command</a></li>
-       <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.4.2 </span>Using the <code>button</code> element to define a command</a></li>
-       <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.4.3 </span>Using the <code>input</code> element to define a command</a></li>
-       <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.4.4 </span>Using the <code>option</code> element to define a command</a></li>
-       <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.4.5 </span>Using the <code>command</code> element to define
+       <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li>
+       <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li>
+       <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li>
+       <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li>
+       <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <code>command</code> element to define
   a command</a></li>
-       <li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.4.6 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
-       <li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.4.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
-       <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.4.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
-     <li><a href=#devices><span class=secno>4.11.5 </span>The <code>device</code> element</a>
+       <li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.6 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
+       <li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
+       <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
+     <li><a href=#devices><span class=secno>4.11.6 </span>The <code>device</code> element</a>
       <ol>
-       <li><a href=#stream-api><span class=secno>4.11.5.1 </span>Stream API</a></ol></ol></li>
+       <li><a href=#stream-api><span class=secno>4.11.6.1 </span>Stream API</a></ol></ol></li>
    <li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.12 </span>Common idioms without dedicated elements</a>
     <ol>
      <li><a href=#tag-clouds><span class=secno>4.12.1 </span>Tag clouds</a></li>
@@ -15406,44 +15408,41 @@
   <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-dt-element>dt</a></code> element.</p>
+   <code><a href=#the-figure-element>figure</a></code> element and its <code><a href=#the-figcaption-element>figcaption</a></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 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>
- <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>
 
@@ -15611,20 +15610,15 @@
    <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>In a <code><a href=#the-figure-element>figure</a></code> element containing no other <code><a href=#the-dt-element>dt</a></code> element children.</dd>
-   <dd>As the first child of a <code><a href=#the-details-element>details</a></code> 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>
    <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> 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>
+  </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).</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
@@ -15640,19 +15634,15 @@
    <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>In a <code><a href=#the-figure-element>figure</a></code> element containing no other <code><a href=#the-dd-element>dd</a></code> element children.</dd>
-   <dd>As the last 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> either: the
+  </dl><p>The <code><a href=#the-dd-element>dd</a></code> element <a href=#represents>represents</a> 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); 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>
+  in a description list (<code><a href=#the-dl-element>dl</a></code> element).</p>
 
   <div class=example>
 
@@ -16928,21 +16918,19 @@
    figure's legend using <code><a href=#the-var-element>var</a></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>
@@ -18022,12 +18010,14 @@
    <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>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>
+   <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#phrasing-content>phrasing content</a>.</dd>
+   <dd>Or: <a href=#phrasing-content>Phrasing content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
+   <dd>Or: <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><!-- 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
+  </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
   <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>
@@ -18038,16 +18028,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><a href=#the-dt-element>dt</a></code> element child
-  of the element, if any, represents the caption of the
+  <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</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>
+  <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</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 are no contents.</span></p>
-
   <div class=example>
 
    <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
@@ -18056,14 +18041,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>
 
@@ -18075,12 +18058,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>
@@ -18105,13 +18086,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>
@@ -18124,13 +18105,11 @@
    <code><a href=#the-figure-element>figure</a></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>
@@ -18141,23 +18120,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 id=the-img-element><span class=secno>4.8.2 </span>The <dfn><code>img</code></dfn> element</h4>
+  <h4 id=the-figcaption-element><span class=secno>4.8.2 </span>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><a href=#the-figure-element>figure</a></code> element.</dd>
+   <dt>Content model:</dt>
+   <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>
+   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+  </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
+  caption or legend for the rest of the contents of the
+  <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
+  element<span class=impl>, if any</span>.</p>
+
+
+  <h4 id=the-img-element><span class=secno>4.8.3 </span>The <dfn><code>img</code></dfn> element</h4>
+
+  <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
    <dd><a href=#embedded-content>Embedded content</a>.</dd>
@@ -18415,9 +18410,9 @@
      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-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>
+     that has a child <code><a href=#the-figcaption-element>figcaption</a></code> element, then the
+     contents of the first such <code><a href=#the-figcaption-element>figcaption</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
      the document.</li>
@@ -18691,14 +18686,14 @@
 
 
 
-  <h5 id=alt><span class=secno>4.8.2.1 </span>Requirements for providing text to act as an alternative for images</h5>
+  <h5 id=alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</h5>
 
   <p>The requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   attribute depend on what the image is intended to represent, as
   described in the following sections.</p>
 
 
-  <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.2.1.1 </span>A link or button containing nothing but the image</h6>
+  <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</h6>
 
   <p>When an <a href=#the-a-element>a</a> element that is a <a href=#hyperlink>hyperlink</a>,
   or a <code><a href=#the-button-element>button</a></code> element, has no textual content but
@@ -18747,7 +18742,7 @@
 
 
 
-  <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.2.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
+  <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
 
   <p>Sometimes something can be more clearly stated in graphical
   form, for example as a flowchart, a diagram, a graph, or a simple
@@ -18816,13 +18811,13 @@
    <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-dt-element>dt</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
+   <code><a href=#the-figcaption-element>figcaption</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
    image).</p>
 
   </div>
 
 
-  <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.2.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
+  <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
 
   <p>A document can contain information in iconic form. The icon is
   intended to help users of visual browsers to recognize features at
@@ -18951,7 +18946,7 @@
   </div>
 
 
-  <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.2.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
+  <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
 
   <p>Sometimes, an image just consists of text, and the purpose of the
   image is not to highlight the actual typographic effects used to
@@ -18975,7 +18970,7 @@
 
 
 
-  <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.2.1.5 </span>A graphical representation of some of the surrounding text</h6>
+  <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</h6>
 
   <p>In many cases, the image is actually just supplementary, and
   its presence merely reinforces the surrounding text. In these
@@ -19001,10 +18996,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-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>
+   be used, or the <code><a href=#the-figure-element>figure</a></code> and <code><a href=#the-figcaption-element>figcaption</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
@@ -19015,22 +19010,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. -->
@@ -19059,7 +19052,7 @@
 
 
 
-  <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.2.1.6 </span>A purely decorative image that doesn't add any information</h6>
+  <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</h6>
 
   <p>In general, if an image is decorative but isn't especially
   page-specific, for example an image that forms part of a site-wide
@@ -19097,7 +19090,7 @@
 
 
 
-  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.2.1.7 </span>A group of images that form a single larger picture with no links</h6>
+  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</h6>
 
   <p>When a picture has been sliced into smaller image files that are
   then displayed together to form the complete picture again, one of
@@ -19136,7 +19129,7 @@
 
 
 
-  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.2.1.8 </span>A group of images that form a single larger picture with links</h6>
+  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</h6>
 
   <p>Generally, <a href=#image-map title="image map">image maps</a> should be
   used instead of slicing an image for links.</p>
@@ -19164,7 +19157,7 @@
 
 
 
-  <h6 id=a-key-part-of-the-content><span class=secno>4.8.2.1.9 </span>A key part of the content</h6>
+  <h6 id=a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</h6>
 
   <p>In some cases, the image is a critical part of the
   content. This could be the case, for instance, on a page that is
@@ -19191,19 +19184,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>
@@ -19247,14 +19238,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
@@ -19262,10 +19253,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
@@ -19317,8 +19308,9 @@
      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-dt-element>dt</a></code> element that contains
-     content other than <a href=#inter-element-whitespace>inter-element whitespace</a>.</li>
+     element that contains a <code><a href=#the-figcaption-element>figcaption</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
      <a href=#paragraph>paragraph</a> directly in its <a href=#concept-section title=concept-section>section</a>, and is the only
@@ -19338,8 +19330,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>
@@ -19365,8 +19357,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>
 
@@ -19377,13 +19369,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>
 
@@ -19438,7 +19430,7 @@
 
    </dd>
 
-  </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.2.1.10 </span>An image not intended for the user</h6>
+  </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</h6>
 
   <p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
   for purposes other than showing images.</p>
@@ -19454,7 +19446,7 @@
 
 
 
-  <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.2.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
+  <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
 
   <p><i>This section does not apply to documents that are publicly
   accessible, or whose target audience is not necessarily personally
@@ -19474,7 +19466,7 @@
 
 
 
-  <h6 id=general-guidelines><span class=secno>4.8.2.1.12 </span>General guidelines</h6>
+  <h6 id=general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</h6>
 
   <p>The most general rule to consider when writing alternative text
   is the following: <strong>the intent is that replacing every image
@@ -19501,7 +19493,7 @@
 
   <div class=impl>
 
-  <h6 id=guidance-for-markup-generators><span class=secno>4.8.2.1.13 </span>Guidance for markup generators</h6>
+  <h6 id=guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</h6>
 
   <p>Markup generators (such as WYSIWYG authoring tools) should,
   wherever possible, obtain alternative text from their
@@ -19536,7 +19528,7 @@
 
   <div class=impl>
 
-  <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.2.1.14 </span>Guidance for conformance checkers</h6>
+  <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</h6>
 
   <p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute as an error unless either
   the conditions listed above for <a href=#unknown-images>images
@@ -19551,7 +19543,7 @@
 
 
 
-  <h4 id=the-iframe-element><span class=secno>4.8.3 </span>The <dfn><code>iframe</code></dfn> element</h4>
+  <h4 id=the-iframe-element><span class=secno>4.8.4 </span>The <dfn><code>iframe</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20256,7 +20248,7 @@
 
 
 
-  <h4 id=the-embed-element><span class=secno>4.8.4 </span>The <dfn><code>embed</code></dfn> element</h4>
+  <h4 id=the-embed-element><span class=secno>4.8.5 </span>The <dfn><code>embed</code></dfn> element</h4>
 
 <!-- (v2?)
  we have all kinds of quirks we should define if they come up during
@@ -20543,7 +20535,7 @@
 
 
 
-  <h4 id=the-object-element><span class=secno>4.8.5 </span>The <dfn><code>object</code></dfn> element</h4>
+  <h4 id=the-object-element><span class=secno>4.8.6 </span>The <dfn><code>object</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21091,13 +21083,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>
@@ -21108,15 +21098,15 @@
    <code><a href=#the-object-element>object</a></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>
 
 
 
-  <h4 id=the-param-element><span class=secno>4.8.6 </span>The <dfn><code>param</code></dfn> element</h4>
+  <h4 id=the-param-element><span class=secno>4.8.7 </span>The <dfn><code>param</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd>None.</dd>
@@ -21186,7 +21176,7 @@
   </div>
 
 
-  <h4 id=video><span class=secno>4.8.7 </span>The <dfn><code>video</code></dfn> element</h4>
+  <h4 id=video><span class=secno>4.8.8 </span>The <dfn><code>video</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21443,7 +21433,7 @@
 
 
 
-  <h4 id=audio><span class=secno>4.8.8 </span>The <dfn><code>audio</code></dfn> element</h4>
+  <h4 id=audio><span class=secno>4.8.9 </span>The <dfn><code>audio</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21579,7 +21569,7 @@
 
 
 
-  <h4 id=the-source-element><span class=secno>4.8.9 </span>The <dfn><code>source</code></dfn> element</h4>
+  <h4 id=the-source-element><span class=secno>4.8.10 </span>The <dfn><code>source</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd>None.</dd>
@@ -21730,7 +21720,7 @@
 
 
 
-  <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>
+  <h4 id=media-elements><span class=secno>4.8.11 </span>Media elements</h4>
 
   <p><dfn id=media-element title="media element">Media elements</dfn> implement the
   following interface:</p>
@@ -21862,7 +21852,7 @@
 
 
 
-  <h5 id=error-codes><span class=secno>4.8.10.1 </span>Error codes</h5>
+  <h5 id=error-codes><span class=secno>4.8.11.1 </span>Error codes</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
 
@@ -21931,7 +21921,7 @@
 
    <dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
 
-  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</h5>
+  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</h5>
 
   <p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
   attribute on <a href=#media-element title="media element">media elements</a> gives
@@ -21978,7 +21968,7 @@
 
 
 
-  <h5 id=mime-types><span class=secno>4.8.10.3 </span>MIME types</h5>
+  <h5 id=mime-types><span class=secno>4.8.11.3 </span>MIME types</h5>
 
   <p>A <a href=#media-resource>media resource</a> can be described in terms of its
   <em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
@@ -22074,7 +22064,7 @@
   render.</p>
 
 
-  <h5 id=network-states><span class=secno>4.8.10.4 </span>Network states</h5>
+  <h5 id=network-states><span class=secno>4.8.11.4 </span>Network states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
 
@@ -22127,7 +22117,7 @@
 
 
 
-  <h5 id=loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</h5>
+  <h5 id=loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
 
@@ -22895,7 +22885,7 @@
 
 
 
-  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</h5>
+  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
 
@@ -23032,7 +23022,7 @@
 
 
 
-  <h5 id=the-ready-states><span class=secno>4.8.10.7 </span>The ready states</h5>
+  <h5 id=the-ready-states><span class=secno>4.8.11.7 </span>The ready states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
 
@@ -23340,7 +23330,7 @@
 -->
 
 
-  <h5 id=playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</h5>
+  <h5 id=playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
 
@@ -23775,7 +23765,7 @@
 
 
 
-  <h5 id=seeking><span class=secno>4.8.10.9 </span>Seeking</h5>
+  <h5 id=seeking><span class=secno>4.8.11.9 </span>Seeking</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
 
@@ -23891,7 +23881,7 @@
   </div>
 
 
-  <h5 id=user-interface><span class=secno>4.8.10.10 </span>User interface</h5>
+  <h5 id=user-interface><span class=secno>4.8.11.10 </span>User interface</h5>
 
   <p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
@@ -23996,7 +23986,7 @@
 
 
 
-  <h5 id=time-ranges><span class=secno>4.8.10.11 </span>Time ranges</h5>
+  <h5 id=time-ranges><span class=secno>4.8.11.11 </span>Time ranges</h5>
 
   <p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
   represent a list of ranges (periods) of time.</p>
@@ -24074,7 +24064,7 @@
   </div>
 
 
-  <h5 id=mediaevents><span class=secno>4.8.10.12 </span>Event summary</h5>
+  <h5 id=mediaevents><span class=secno>4.8.11.12 </span>Event summary</h5>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -24182,7 +24172,7 @@
      <td>
   </table><div class=impl>
 
-  <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.13 </span>Security and privacy considerations</h5>
+  <h5 id=security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</h5>
 
   <p>The main security and privacy implications of the
   <code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
@@ -24230,7 +24220,7 @@
   </div>
 
 
-  <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
+  <h4 id=the-canvas-element><span class=secno>4.8.12 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24479,7 +24469,7 @@
 
   
 
-  <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
+  <h5 id=2dcontext><span class=secno>4.8.12.1 </span>The 2D context</h5>
 
   <!-- v2: we're on v4. suggestions for next version are marked v5. -->
 
@@ -24681,7 +24671,7 @@
 
 
 
-  <h6 id=the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</h6>
+  <h6 id=the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</h6>
 
   <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
 
@@ -24741,7 +24731,7 @@
   </div>
 
 
-  <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+  <h6 id=transformations><span class=secno>4.8.12.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
 
   <p>The transformation matrix is applied to coordinates when creating
   shapes and paths.</p> <!-- conformance criteria for actual drawing
@@ -24846,7 +24836,7 @@
   </div>
 
 
-  <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
+  <h6 id=compositing><span class=secno>4.8.12.1.3 </span>Compositing</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -25002,7 +24992,7 @@
   </div>
 
 
-  <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
+  <h6 id=colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -25366,7 +25356,7 @@
 
 
 
-  <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
+  <h6 id=line-styles><span class=secno>4.8.12.1.5 </span>Line styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -25538,7 +25528,7 @@
   </div>
 
 
-  <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
+  <h6 id=shadows><span class=secno>4.8.12.1.6 </span><dfn>Shadows</dfn></h6>
 
   <p>All drawing operations are affected by the four global shadow
   attributes.</p>
@@ -25673,7 +25663,7 @@
   (since the shape will overwrite the shadow).</p>
 
 
-  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
+  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</h6>
 
   <p>There are three methods that immediately draw rectangles to the
   bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -25743,7 +25733,7 @@
   </div>
 
 
-  <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
+  <h6 id=complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</h6>
 
   <p>The context always has a current path. There is only one current
   path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
@@ -26100,7 +26090,7 @@
   </div>
 
 
-  <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+  <h6 id=focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</h6> <!-- a v4 feature -->
 
   <p>When a canvas is interactive, authors should include focusable
   elements in the element's fallback content corresponding to each
@@ -26244,7 +26234,7 @@
   </div>
 
 
-  <h6 id=text><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
+  <h6 id=text><span class=secno>4.8.12.1.10 </span>Text</h6> <!-- a v3 feature -->
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -26753,7 +26743,7 @@
 
 
 
-  <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
+  <h6 id=images><span class=secno>4.8.12.1.11 </span>Images</h6>
 
   <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
   can be used.</p>
@@ -26877,7 +26867,7 @@
 
 
 
-  <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+  <h6 id=pixel-manipulation><span class=secno>4.8.12.1.12 </span><dfn>Pixel manipulation</dfn></h6>
 
   <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
 
@@ -27237,7 +27227,7 @@
 
   <div class=impl>
 
-  <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
+  <h6 id=drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</h6>
 
   <p>When a shape or image is painted, user agents must follow these
   steps, in the order given (or act as if they do):</p>
@@ -27267,7 +27257,7 @@
   </ol></div>
 
 
-  <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
+  <h6 id=examples><span class=secno>4.8.12.1.14 </span>Examples</h6>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -27320,7 +27310,7 @@
 
   <div class=impl>
 
-  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
+  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</h5>
 
   <p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
   only two points: when rendering images with their own gamma
@@ -27362,7 +27352,7 @@
 
   <div class=impl>
 
-  <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+  <h5 id=security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
 
   <p><strong>Information leakage</strong> can occur if scripts from
   one <a href=#origin>origin</a> can access information (e.g. read pixels)
@@ -27430,7 +27420,7 @@
 
 
 
-  <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code></dfn> element</h4>
+  <h4 id=the-map-element><span class=secno>4.8.13 </span>The <dfn><code>map</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27501,7 +27491,7 @@
 
 
 
-  <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
+  <h4 id=the-area-element><span class=secno>4.8.14 </span>The <dfn><code>area</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27706,7 +27696,7 @@
   </div>
 
 
-  <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
+  <h4 id=image-maps><span class=secno>4.8.15 </span>Image maps</h4>
 
   <!-- TESTS
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -27717,7 +27707,7 @@
 
   <div class=impl>
 
-  <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>
+  <h5 id=authoring><span class=secno>4.8.15.1 </span>Authoring</h5>
 
   </div>
 
@@ -27759,7 +27749,7 @@
 
   <div class=impl>
 
-  <h5 id=processing-model><span class=secno>4.8.14.2 </span>Processing model</h5>
+  <h5 id=processing-model><span class=secno>4.8.15.2 </span>Processing model</h5>
 
   <p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
   representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
@@ -27959,7 +27949,7 @@
 
 
 
-  <h4 id=mathml><span class=secno>4.8.15 </span>MathML</h4>
+  <h4 id=mathml><span class=secno>4.8.16 </span>MathML</h4>
 
   <p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -28033,7 +28023,7 @@
 
 
 
-  <h4 id=svg-0><span class=secno>4.8.16 </span>SVG</h4>
+  <h4 id=svg-0><span class=secno>4.8.17 </span>SVG</h4>
 
   <p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -28073,7 +28063,7 @@
 
 
 
-  <h4 id=dimension-attributes><span class=secno>4.8.17 </span><dfn>Dimension attributes</dfn></h4>
+  <h4 id=dimension-attributes><span class=secno>4.8.18 </span><dfn>Dimension attributes</dfn></h4>
 
   <p><span class=impl><strong>Author requirements</strong>:</span>
   The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
@@ -28304,12 +28294,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>
@@ -28333,59 +28321,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><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-dt-element>dt</a></code></dt>
+   <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></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>
 
@@ -28750,9 +28734,9 @@
   </div>
 
   <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>
+  <code><a href=#the-figure-element>figure</a></code> element other than the <code><a href=#the-figcaption-element>figcaption</a></code>,
+  the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
+  <code><a href=#the-figcaption-element>figcaption</a></code>.</p>
 
   <p>A caption can introduce context for a table, making it
   significantly easier to understand.</p>
@@ -40453,7 +40437,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>Optionally 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>
+   <dd>One <code><a href=#the-summary-element>summary</a></code> element followed by <a href=#flow-content>flow content</a>.</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>
@@ -40471,18 +40455,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><a href=#the-dt-element>dt</a></code> element child
-  of the element, if any, <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>
+  <p>The <span class=impl>first</span> <code><a href=#the-summary-element>summary</a></code> element
+  child of the element, if any, <a href=#represents>represents</a> the summary or
+  legend of the details. <span class=impl>If there is no child
+  <code><a href=#the-summary-element>summary</a></code> element, the user agent should provide its own
+  legend (e.g. "Details").</span></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>
-  <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>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
@@ -40513,17 +40491,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>
 
@@ -40535,10 +40511,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><a href=#the-details-element>details</a></code>
@@ -40547,9 +40522,32 @@
 
    <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></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 id=the-summary-element><span class=secno>4.11.2 </span>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><a href=#the-details-element>details</a></code> element.</dd>
+   <dt>Content model:</dt>
+   <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>
+   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+  </dl><p>The <code><a href=#the-summary-element>summary</a></code> element <a href=#represents>represents</a> a
+  summary, caption, or legend for the rest of the contents of the
+  <code><a href=#the-summary-element>summary</a></code> element's parent <code><a href=#the-details-element>details</a></code>
+  element<span class=impl>, if any</span>.</p>
+
+
+
 <!-- v2DATAGRID
   <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
 
@@ -43145,7 +43143,7 @@
 
 -->
 
-  <h4 id=the-command><span class=secno>4.11.2 </span>The <dfn><code>command</code></dfn> element</h4>
+  <h4 id=the-command><span class=secno>4.11.3 </span>The <dfn><code>command</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#metadata-content>Metadata content</a>.</dd>
@@ -43355,7 +43353,7 @@
 
 
 
-  <h4 id=menus><span class=secno>4.11.3 </span>The <dfn><code>menu</code></dfn> element</h4>
+  <h4 id=menus><span class=secno>4.11.4 </span>The <dfn><code>menu</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -43423,7 +43421,7 @@
 
 
 
-  <h5 id=menus-intro><span class=secno>4.11.3.1 </span>Introduction</h5>
+  <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -43498,7 +43496,7 @@
 
   <div class=impl>
 
-  <h5 id=building-menus-and-toolbars><span class=secno>4.11.3.2 </span><dfn>Building menus and toolbars</dfn></h5>
+  <h5 id=building-menus-and-toolbars><span class=secno>4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>
 
   <p>A menu (or toolbar) consists of a list of zero or more of the
   following components:</p>
@@ -43583,7 +43581,7 @@
 
 
 
-  <h5 id=context-menus><span class=secno>4.11.3.3 </span><dfn>Context menus</dfn></h5>
+  <h5 id=context-menus><span class=secno>4.11.4.3 </span><dfn>Context menus</dfn></h5>
 
   <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn>
   attribute gives the element's <a href=#context-menus title="context menus">context
@@ -43673,7 +43671,7 @@
 
   <div class=impl>
 
-  <h5 id=toolbars><span class=secno>4.11.3.4 </span><dfn>Toolbars</dfn></h5>
+  <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>
 
   <p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the user agent
   must <a href=#building-menus-and-toolbars title="building menus and toolbars">build</a> the
@@ -43688,7 +43686,7 @@
 
 
 
-  <h4 id=commands><span class=secno>4.11.4 </span>Commands</h4>
+  <h4 id=commands><span class=secno>4.11.5 </span>Commands</h4>
 
   <p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
   behind menu items, buttons, and links.<!--v2COMMAND: Once a command
@@ -43936,7 +43934,7 @@
 
   <div class=impl>
 
-  <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.4.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
+  <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
 
   <p>An <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -43982,7 +43980,7 @@
   command is to <a href=#fire-a-click-event title="fire a click event">fire a <code title=event-click>click</code> event</a> at the element.</p>
 
 
-  <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.4.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
+  <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
 
   <p>A <code><a href=#the-button-element>button</a></code> element always <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -43994,7 +43992,7 @@
   State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the button.</p>
 
 
-  <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.4.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
+  <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
 
   <p>An <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, <a href=#image-button-state title=attr-input-type-image>Image Button</a>, <a href=#button-state title=attr-input-type-button>Button</a>, <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>, or <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> states <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -44065,7 +44063,7 @@
   element.</p>
 
 
-  <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.4.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
+  <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
 
   <p>An <code><a href=#the-option-element>option</a></code> element with an ancestor
   <code><a href=#the-select-element>select</a></code> element and either no <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute or a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute that is not the
@@ -44118,7 +44116,7 @@
   element.</p>
 
 
-  <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.4.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
+  <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
   a command</h5>
 
   <p>A <code><a href=#the-command>command</a></code> element <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -44175,7 +44173,7 @@
 
 
 
-  <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.4.6 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
+  <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.6 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
 
   <p>A <code><a href=#the-label-element>label</a></code> element that has an <a href=#assigned-access-key>assigned access
   key</a> and a <a href=#labeled-control>labeled control</a> and whose
@@ -44216,7 +44214,7 @@
 
 
 
-  <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.4.7 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
+  <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.7 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
 
   <p>A <code><a href=#the-legend-element>legend</a></code> element that has an <a href=#assigned-access-key>assigned access
   key</a> and is a child of a <code><a href=#the-fieldset-element>fieldset</a></code> element that
@@ -44260,7 +44258,7 @@
 
 
 
-  <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.4.8 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
+  <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
 
   <p>An element that has an <a href=#assigned-access-key>assigned access key</a> <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -44325,7 +44323,7 @@
 
 
 
-  <h4 id=devices><span class=secno>4.11.5 </span>The <dfn><code>device</code></dfn> element</h4>
+  <h4 id=devices><span class=secno>4.11.6 </span>The <dfn><code>device</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -44394,7 +44392,7 @@
   </div>
 
 
-  <h5 id=stream-api><span class=secno>4.11.5.1 </span>Stream API</h5>
+  <h5 id=stream-api><span class=secno>4.11.6.1 </span>Stream API</h5>
 
   <p>The <code><a href=#stream>Stream</a></code> interface is used to represent
   streams.</p>
@@ -44610,8 +44608,8 @@
   </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>
+  <code><a href=#the-figcaption-element>figcaption</a></code> or <code><a href=#the-caption-element>caption</a></code> element, or in
+  surrounding prose.</p>
 
   <div class=example>
 
@@ -44621,31 +44619,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>
@@ -45240,14 +45236,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
@@ -48848,8 +48844,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
@@ -48857,6 +48853,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>
@@ -58635,8 +58632,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>
@@ -80543,9 +80540,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; }
@@ -80638,7 +80635,6 @@
 h6 { margin-top: 2.33em; margin-bottom; 2.33em; }
 
 dd { margin-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'margin-right' for rtl elements */
-details > dd, figure > dd { margin-left: 0; } /* <a href=#ltr-specific>LTR-specific</a>: use 'margin-right' for rtl elements */
 dir, menu, ol, ul { padding-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'padding-right' for rtl elements */
 blockquote, figure { margin-left: 40px; margin-right: 40px; }
 
@@ -81769,10 +81765,10 @@
   <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 the element's first child
-  <code><a href=#the-dt-element>dt</a></code> element, if any, and place it in a first 'block' box
-  container, and then take the element's first child <code><a href=#the-dd-element>dd</a></code>
-  element, if any, and place it in a second 'block' box container,
-  ignoring all the other children of the element.</p>
+  <code><a href=#the-summary-element>summary</a></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
@@ -85018,9 +85014,7 @@
     <tr><th><code><a href=#the-dd-element>dd</a></code></th>
      <td>Content for corresponding <code><a href=#the-dt-element>dt</a></code> element(s)</td>
      <td>none</td>
-     <td><code><a href=#the-dl-element>dl</a></code>;
-         <code><a href=#the-figure-element>figure</a></code>;
-         <code><a href=#the-details-element>details</a></code></td>
+     <td><code><a href=#the-dl-element>dl</a></code></td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
@@ -85040,8 +85034,8 @@
          <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
          <a href=#interactive-content title="Interactive content">interactive</a></td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
-     <td><code><a href=#the-dt-element>dt</a></code>*;
-         <code><a href=#the-dd-element>dd</a></code>*</td>
+     <td><code><a href=#the-summary-element>summary</a></code>*;
+         <a href=#flow-content title="Flow content">flow</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a>;
          <code title=attr-details-open><a href=#attr-details-open>open</a></code></td>
      <td><code><a href=#htmldetailselement>HTMLDetailsElement</a></code></td>
@@ -85072,9 +85066,7 @@
     <tr><th><code><a href=#the-dt-element>dt</a></code></th>
      <td>Legend for corresponding <code><a href=#the-dd-element>dd</a></code> element(s)</td>
      <td>none</td>
-     <td><code><a href=#the-dl-element>dl</a></code>;
-         <code><a href=#the-figure-element>figure</a></code>;
-         <code><a href=#the-details-element>details</a></code></td>
+     <td><code><a href=#the-dl-element>dl</a></code></td>
      <td>varies*</td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
@@ -85115,13 +85107,20 @@
          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
      <td><code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code></td>
+    <tr><th><code><a href=#the-figcaption-element>figcaption</a></code></th>
+     <td>Caption for <code><a href=#the-figure-element>figure</a></code></td>
+     <td>none</td>
+     <td><code><a href=#the-figure-element>figure</a></code></td>
+     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+     <td><a href=#global-attributes title="global attributes">globals</a></td>
+     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
     <tr><th><code><a href=#the-figure-element>figure</a></code></th>
      <td>Figure with optional caption</td>
      <td><a href=#flow-content title="Flow content">flow</a>;
          <a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
-     <td><code><a href=#the-dt-element>dt</a></code>*;
-         <code><a href=#the-dd-element>dd</a></code>*</td>
+     <td><code><a href=#the-figcaption-element>figcaption</a></code>*;
+         <a href=#flow-content title="Flow content">flow</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
     <tr><th><code><a href=#the-footer-element>footer</a></code></th>
@@ -85689,6 +85688,13 @@
      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
+    <tr><th><code><a href=#the-summary-element>summary</a></code></th>
+     <td>Caption for <code><a href=#the-details-element>details</a></code></td>
+     <td>none</td>
+     <td><code><a href=#the-details-element>details</a></code></td>
+     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+     <td><a href=#global-attributes title="global attributes">globals</a></td>
+     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
     <tr><th><code><a href=#the-sub-and-sup-elements>sup</a></code></th>
      <td>Superscript</td>
      <td><a href=#flow-content title="Flow content">flow</a>;
@@ -86983,6 +86989,9 @@
     <tr><td> <code><a href=#the-fieldset-element>fieldset</a></code>
      <td> <code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-figcaption-element>figcaption</a></code>
+     <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-figure-element>figure</a></code>
      <td> <code><a href=#htmlelement>HTMLElement</a></code>
 
@@ -87139,6 +87148,9 @@
     <tr><td> <code><a href=#the-sub-and-sup-elements>sub</a></code>
      <td> <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-summary-element>summary</a></code>
+     <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-sub-and-sup-elements>sup</a></code>
      <td> <code><a href=#htmlelement>HTMLElement</a></code>
 

Modified: index
===================================================================
--- index	2010-01-29 23:11:02 UTC (rev 4635)
+++ index	2010-01-30 03:12:10 UTC (rev 4636)
@@ -112,7 +112,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    <hgroup><h1>HTML5 (including next generation additions still in development)</h1>
-    <h2 class="no-num no-toc">Draft Standard — 29 January 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard — 30 January 2010</h2>
    </hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -410,75 +410,76 @@
    <li><a href=#embedded-content-1><span class=secno>4.8 </span>Embedded content</a>
     <ol>
      <li><a href=#the-figure-element><span class=secno>4.8.1 </span>The <code>figure</code> element</a></li>
-     <li><a href=#the-img-element><span class=secno>4.8.2 </span>The <code>img</code> element</a>
+     <li><a href=#the-figcaption-element><span class=secno>4.8.2 </span>The <code>figcaption</code> element</a></li>
+     <li><a href=#the-img-element><span class=secno>4.8.3 </span>The <code>img</code> element</a>
       <ol>
-       <li><a href=#alt><span class=secno>4.8.2.1 </span>Requirements for providing text to act as an alternative for images</a>
+       <li><a href=#alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</a>
         <ol>
-         <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.2.1.1 </span>A link or button containing nothing but the image</a></li>
-         <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.2.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
-         <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.2.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
-         <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.2.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
-         <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.2.1.5 </span>A graphical representation of some of the surrounding text</a></li>
-         <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.2.1.6 </span>A purely decorative image that doesn't add any information</a></li>
-         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.2.1.7 </span>A group of images that form a single larger picture with no links</a></li>
-         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.2.1.8 </span>A group of images that form a single larger picture with links</a></li>
-         <li><a href=#a-key-part-of-the-content><span class=secno>4.8.2.1.9 </span>A key part of the content</a></li>
-         <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.2.1.10 </span>An image not intended for the user</a></li>
-         <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.2.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
-         <li><a href=#general-guidelines><span class=secno>4.8.2.1.12 </span>General guidelines</a></li>
-         <li><a href=#guidance-for-markup-generators><span class=secno>4.8.2.1.13 </span>Guidance for markup generators</a></li>
-         <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.2.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
-     <li><a href=#the-iframe-element><span class=secno>4.8.3 </span>The <code>iframe</code> element</a></li>
-     <li><a href=#the-embed-element><span class=secno>4.8.4 </span>The <code>embed</code> element</a></li>
-     <li><a href=#the-object-element><span class=secno>4.8.5 </span>The <code>object</code> element</a></li>
-     <li><a href=#the-param-element><span class=secno>4.8.6 </span>The <code>param</code> element</a></li>
-     <li><a href=#video><span class=secno>4.8.7 </span>The <code>video</code> element</a></li>
-     <li><a href=#audio><span class=secno>4.8.8 </span>The <code>audio</code> element</a></li>
-     <li><a href=#the-source-element><span class=secno>4.8.9 </span>The <code>source</code> element</a></li>
-     <li><a href=#media-elements><span class=secno>4.8.10 </span>Media elements</a>
+         <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</a></li>
+         <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
+         <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
+         <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
+         <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</a></li>
+         <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</a></li>
+         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</a></li>
+         <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</a></li>
+         <li><a href=#a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</a></li>
+         <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</a></li>
+         <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
+         <li><a href=#general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</a></li>
+         <li><a href=#guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</a></li>
+         <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+     <li><a href=#the-iframe-element><span class=secno>4.8.4 </span>The <code>iframe</code> element</a></li>
+     <li><a href=#the-embed-element><span class=secno>4.8.5 </span>The <code>embed</code> element</a></li>
+     <li><a href=#the-object-element><span class=secno>4.8.6 </span>The <code>object</code> element</a></li>
+     <li><a href=#the-param-element><span class=secno>4.8.7 </span>The <code>param</code> element</a></li>
+     <li><a href=#video><span class=secno>4.8.8 </span>The <code>video</code> element</a></li>
+     <li><a href=#audio><span class=secno>4.8.9 </span>The <code>audio</code> element</a></li>
+     <li><a href=#the-source-element><span class=secno>4.8.10 </span>The <code>source</code> element</a></li>
+     <li><a href=#media-elements><span class=secno>4.8.11 </span>Media elements</a>
       <ol>
-       <li><a href=#error-codes><span class=secno>4.8.10.1 </span>Error codes</a></li>
-       <li><a href=#location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</a></li>
-       <li><a href=#mime-types><span class=secno>4.8.10.3 </span>MIME types</a></li>
-       <li><a href=#network-states><span class=secno>4.8.10.4 </span>Network states</a></li>
-       <li><a href=#loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</a></li>
-       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</a></li>
-       <li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
-       <li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
-       <li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
-       <li><a href=#user-interface><span class=secno>4.8.10.10 </span>User interface</a></li>
-       <li><a href=#time-ranges><span class=secno>4.8.10.11 </span>Time ranges</a></li>
-       <li><a href=#mediaevents><span class=secno>4.8.10.12 </span>Event summary</a></li>
-       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.13 </span>Security and privacy considerations</a></ol></li>
-     <li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
+       <li><a href=#error-codes><span class=secno>4.8.11.1 </span>Error codes</a></li>
+       <li><a href=#location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</a></li>
+       <li><a href=#mime-types><span class=secno>4.8.11.3 </span>MIME types</a></li>
+       <li><a href=#network-states><span class=secno>4.8.11.4 </span>Network states</a></li>
+       <li><a href=#loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</a></li>
+       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</a></li>
+       <li><a href=#the-ready-states><span class=secno>4.8.11.7 </span>The ready states</a></li>
+       <li><a href=#playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</a></li>
+       <li><a href=#seeking><span class=secno>4.8.11.9 </span>Seeking</a></li>
+       <li><a href=#user-interface><span class=secno>4.8.11.10 </span>User interface</a></li>
+       <li><a href=#time-ranges><span class=secno>4.8.11.11 </span>Time ranges</a></li>
+       <li><a href=#mediaevents><span class=secno>4.8.11.12 </span>Event summary</a></li>
+       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</a></ol></li>
+     <li><a href=#the-canvas-element><span class=secno>4.8.12 </span>The <code>canvas</code> element</a>
       <ol>
-       <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
+       <li><a href=#2dcontext><span class=secno>4.8.12.1 </span>The 2D context</a>
         <ol>
-         <li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
-         <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
-         <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
-         <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
-         <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
-         <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
-         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
-         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
-         <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
-         <li><a href=#text><span class=secno>4.8.11.1.10 </span>Text</a></li>
-         <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
-         <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
-         <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
-         <li><a href=#examples><span class=secno>4.8.11.1.14 </span>Examples</a></ol></li>
-       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
-       <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
-     <li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
-     <li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
-     <li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
+         <li><a href=#the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</a></li>
+         <li><a href=#transformations><span class=secno>4.8.12.1.2 </span>Transformations</a></li>
+         <li><a href=#compositing><span class=secno>4.8.12.1.3 </span>Compositing</a></li>
+         <li><a href=#colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</a></li>
+         <li><a href=#line-styles><span class=secno>4.8.12.1.5 </span>Line styles</a></li>
+         <li><a href=#shadows><span class=secno>4.8.12.1.6 </span>Shadows</a></li>
+         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</a></li>
+         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</a></li>
+         <li><a href=#focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</a></li>
+         <li><a href=#text><span class=secno>4.8.12.1.10 </span>Text</a></li>
+         <li><a href=#images><span class=secno>4.8.12.1.11 </span>Images</a></li>
+         <li><a href=#pixel-manipulation><span class=secno>4.8.12.1.12 </span>Pixel manipulation</a></li>
+         <li><a href=#drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</a></li>
+         <li><a href=#examples><span class=secno>4.8.12.1.14 </span>Examples</a></ol></li>
+       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</a></li>
+       <li><a href=#security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+     <li><a href=#the-map-element><span class=secno>4.8.13 </span>The <code>map</code> element</a></li>
+     <li><a href=#the-area-element><span class=secno>4.8.14 </span>The <code>area</code> element</a></li>
+     <li><a href=#image-maps><span class=secno>4.8.15 </span>Image maps</a>
       <ol>
-       <li><a href=#authoring><span class=secno>4.8.14.1 </span>Authoring</a></li>
-       <li><a href=#processing-model><span class=secno>4.8.14.2 </span>Processing model</a></ol></li>
-     <li><a href=#mathml><span class=secno>4.8.15 </span>MathML</a></li>
-     <li><a href=#svg-0><span class=secno>4.8.16 </span>SVG</a></li>
-     <li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
+       <li><a href=#authoring><span class=secno>4.8.15.1 </span>Authoring</a></li>
+       <li><a href=#processing-model><span class=secno>4.8.15.2 </span>Processing model</a></ol></li>
+     <li><a href=#mathml><span class=secno>4.8.16 </span>MathML</a></li>
+     <li><a href=#svg-0><span class=secno>4.8.17 </span>SVG</a></li>
+     <li><a href=#dimension-attributes><span class=secno>4.8.18 </span>Dimension attributes</a></ol></li>
    <li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
     <ol>
      <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
@@ -582,27 +583,28 @@
    <li><a href=#interactive-elements><span class=secno>4.11 </span>Interactive elements</a>
     <ol>
      <li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
-     <li><a href=#the-command><span class=secno>4.11.2 </span>The <code>command</code> element</a></li>
-     <li><a href=#menus><span class=secno>4.11.3 </span>The <code>menu</code> element</a>
+     <li><a href=#the-summary-element><span class=secno>4.11.2 </span>The <code>summary</code> element</a></li>
+     <li><a href=#the-command><span class=secno>4.11.3 </span>The <code>command</code> element</a></li>
+     <li><a href=#menus><span class=secno>4.11.4 </span>The <code>menu</code> element</a>
       <ol>
-       <li><a href=#menus-intro><span class=secno>4.11.3.1 </span>Introduction</a></li>
-       <li><a href=#building-menus-and-toolbars><span class=secno>4.11.3.2 </span>Building menus and toolbars</a></li>
-       <li><a href=#context-menus><span class=secno>4.11.3.3 </span>Context menus</a></li>
-       <li><a href=#toolbars><span class=secno>4.11.3.4 </span>Toolbars</a></ol></li>
-     <li><a href=#commands><span class=secno>4.11.4 </span>Commands</a>
+       <li><a href=#menus-intro><span class=secno>4.11.4.1 </span>Introduction</a></li>
+       <li><a href=#building-menus-and-toolbars><span class=secno>4.11.4.2 </span>Building menus and toolbars</a></li>
+       <li><a href=#context-menus><span class=secno>4.11.4.3 </span>Context menus</a></li>
+       <li><a href=#toolbars><span class=secno>4.11.4.4 </span>Toolbars</a></ol></li>
+     <li><a href=#commands><span class=secno>4.11.5 </span>Commands</a>
       <ol>
-       <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.4.1 </span>Using the <code>a</code> element to define a command</a></li>
-       <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.4.2 </span>Using the <code>button</code> element to define a command</a></li>
-       <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.4.3 </span>Using the <code>input</code> element to define a command</a></li>
-       <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.4.4 </span>Using the <code>option</code> element to define a command</a></li>
-       <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.4.5 </span>Using the <code>command</code> element to define
+       <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li>
+       <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li>
+       <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li>
+       <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li>
+       <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <code>command</code> element to define
   a command</a></li>
-       <li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.4.6 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
-       <li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.4.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
-       <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.4.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
-     <li><a href=#devices><span class=secno>4.11.5 </span>The <code>device</code> element</a>
+       <li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.6 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
+       <li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
+       <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
+     <li><a href=#devices><span class=secno>4.11.6 </span>The <code>device</code> element</a>
       <ol>
-       <li><a href=#stream-api><span class=secno>4.11.5.1 </span>Stream API</a></ol></ol></li>
+       <li><a href=#stream-api><span class=secno>4.11.6.1 </span>Stream API</a></ol></ol></li>
    <li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.12 </span>Common idioms without dedicated elements</a>
     <ol>
      <li><a href=#tag-clouds><span class=secno>4.12.1 </span>Tag clouds</a></li>
@@ -15306,44 +15308,41 @@
   <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-dt-element>dt</a></code> element.</p>
+   <code><a href=#the-figure-element>figure</a></code> element and its <code><a href=#the-figcaption-element>figcaption</a></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 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>
- <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>
 
@@ -15511,20 +15510,15 @@
    <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>In a <code><a href=#the-figure-element>figure</a></code> element containing no other <code><a href=#the-dt-element>dt</a></code> element children.</dd>
-   <dd>As the first child of a <code><a href=#the-details-element>details</a></code> 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>
    <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> 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>
+  </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).</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
@@ -15540,19 +15534,15 @@
    <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>In a <code><a href=#the-figure-element>figure</a></code> element containing no other <code><a href=#the-dd-element>dd</a></code> element children.</dd>
-   <dd>As the last 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> either: the
+  </dl><p>The <code><a href=#the-dd-element>dd</a></code> element <a href=#represents>represents</a> 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); 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>
+  in a description list (<code><a href=#the-dl-element>dl</a></code> element).</p>
 
   <div class=example>
 
@@ -16828,21 +16818,19 @@
    figure's legend using <code><a href=#the-var-element>var</a></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>
@@ -17922,12 +17910,14 @@
    <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>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>
+   <dd>Either: One <code><a href=#the-figcaption-element>figcaption</a></code> element followed by <a href=#phrasing-content>phrasing content</a>.</dd>
+   <dd>Or: <a href=#phrasing-content>Phrasing content</a> followed by one <code><a href=#the-figcaption-element>figcaption</a></code> element.</dd>
+   <dd>Or: <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><!-- 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
+  </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
   <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>
@@ -17938,16 +17928,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><a href=#the-dt-element>dt</a></code> element child
-  of the element, if any, represents the caption of the
+  <p>The <span class=impl>first</span> <code><a href=#the-figcaption-element>figcaption</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>
+  <code><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</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 are no contents.</span></p>
-
   <div class=example>
 
    <p>This example shows the <code><a href=#the-figure-element>figure</a></code> element to mark up a
@@ -17956,14 +17941,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>
 
@@ -17975,12 +17958,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>
@@ -18005,13 +17986,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>
@@ -18024,13 +18005,11 @@
    <code><a href=#the-figure-element>figure</a></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>
@@ -18041,23 +18020,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 id=the-img-element><span class=secno>4.8.2 </span>The <dfn><code>img</code></dfn> element</h4>
+  <h4 id=the-figcaption-element><span class=secno>4.8.2 </span>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><a href=#the-figure-element>figure</a></code> element.</dd>
+   <dt>Content model:</dt>
+   <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>
+   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+  </dl><p>The <code><a href=#the-figcaption-element>figcaption</a></code> element <a href=#represents>represents</a> a
+  caption or legend for the rest of the contents of the
+  <code><a href=#the-figcaption-element>figcaption</a></code> element's parent <code><a href=#the-figure-element>figure</a></code>
+  element<span class=impl>, if any</span>.</p>
+
+
+  <h4 id=the-img-element><span class=secno>4.8.3 </span>The <dfn><code>img</code></dfn> element</h4>
+
+  <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
    <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
    <dd><a href=#embedded-content>Embedded content</a>.</dd>
@@ -18315,9 +18310,9 @@
      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-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>
+     that has a child <code><a href=#the-figcaption-element>figcaption</a></code> element, then the
+     contents of the first such <code><a href=#the-figcaption-element>figcaption</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
      the document.</li>
@@ -18591,14 +18586,14 @@
 
 
 
-  <h5 id=alt><span class=secno>4.8.2.1 </span>Requirements for providing text to act as an alternative for images</h5>
+  <h5 id=alt><span class=secno>4.8.3.1 </span>Requirements for providing text to act as an alternative for images</h5>
 
   <p>The requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
   attribute depend on what the image is intended to represent, as
   described in the following sections.</p>
 
 
-  <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.2.1.1 </span>A link or button containing nothing but the image</h6>
+  <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.3.1.1 </span>A link or button containing nothing but the image</h6>
 
   <p>When an <a href=#the-a-element>a</a> element that is a <a href=#hyperlink>hyperlink</a>,
   or a <code><a href=#the-button-element>button</a></code> element, has no textual content but
@@ -18647,7 +18642,7 @@
 
 
 
-  <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.2.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
+  <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.3.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
 
   <p>Sometimes something can be more clearly stated in graphical
   form, for example as a flowchart, a diagram, a graph, or a simple
@@ -18716,13 +18711,13 @@
    <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-dt-element>dt</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
+   <code><a href=#the-figcaption-element>figcaption</a></code> element of a <code><a href=#the-figure-element>figure</a></code> with this
    image).</p>
 
   </div>
 
 
-  <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.2.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
+  <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.3.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
 
   <p>A document can contain information in iconic form. The icon is
   intended to help users of visual browsers to recognize features at
@@ -18851,7 +18846,7 @@
   </div>
 
 
-  <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.2.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
+  <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.3.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
 
   <p>Sometimes, an image just consists of text, and the purpose of the
   image is not to highlight the actual typographic effects used to
@@ -18875,7 +18870,7 @@
 
 
 
-  <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.2.1.5 </span>A graphical representation of some of the surrounding text</h6>
+  <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.3.1.5 </span>A graphical representation of some of the surrounding text</h6>
 
   <p>In many cases, the image is actually just supplementary, and
   its presence merely reinforces the surrounding text. In these
@@ -18901,10 +18896,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-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>
+   be used, or the <code><a href=#the-figure-element>figure</a></code> and <code><a href=#the-figcaption-element>figcaption</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
@@ -18915,22 +18910,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. -->
@@ -18959,7 +18952,7 @@
 
 
 
-  <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.2.1.6 </span>A purely decorative image that doesn't add any information</h6>
+  <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.3.1.6 </span>A purely decorative image that doesn't add any information</h6>
 
   <p>In general, if an image is decorative but isn't especially
   page-specific, for example an image that forms part of a site-wide
@@ -18997,7 +18990,7 @@
 
 
 
-  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.2.1.7 </span>A group of images that form a single larger picture with no links</h6>
+  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.3.1.7 </span>A group of images that form a single larger picture with no links</h6>
 
   <p>When a picture has been sliced into smaller image files that are
   then displayed together to form the complete picture again, one of
@@ -19036,7 +19029,7 @@
 
 
 
-  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.2.1.8 </span>A group of images that form a single larger picture with links</h6>
+  <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.3.1.8 </span>A group of images that form a single larger picture with links</h6>
 
   <p>Generally, <a href=#image-map title="image map">image maps</a> should be
   used instead of slicing an image for links.</p>
@@ -19064,7 +19057,7 @@
 
 
 
-  <h6 id=a-key-part-of-the-content><span class=secno>4.8.2.1.9 </span>A key part of the content</h6>
+  <h6 id=a-key-part-of-the-content><span class=secno>4.8.3.1.9 </span>A key part of the content</h6>
 
   <p>In some cases, the image is a critical part of the
   content. This could be the case, for instance, on a page that is
@@ -19091,19 +19084,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>
@@ -19147,14 +19138,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
@@ -19162,10 +19153,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
@@ -19217,8 +19208,9 @@
      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-dt-element>dt</a></code> element that contains
-     content other than <a href=#inter-element-whitespace>inter-element whitespace</a>.</li>
+     element that contains a <code><a href=#the-figcaption-element>figcaption</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
      <a href=#paragraph>paragraph</a> directly in its <a href=#concept-section title=concept-section>section</a>, and is the only
@@ -19238,8 +19230,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>
@@ -19265,8 +19257,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>
 
@@ -19277,13 +19269,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>
 
@@ -19338,7 +19330,7 @@
 
    </dd>
 
-  </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.2.1.10 </span>An image not intended for the user</h6>
+  </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.3.1.10 </span>An image not intended for the user</h6>
 
   <p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
   for purposes other than showing images.</p>
@@ -19354,7 +19346,7 @@
 
 
 
-  <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.2.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
+  <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.3.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
 
   <p><i>This section does not apply to documents that are publicly
   accessible, or whose target audience is not necessarily personally
@@ -19374,7 +19366,7 @@
 
 
 
-  <h6 id=general-guidelines><span class=secno>4.8.2.1.12 </span>General guidelines</h6>
+  <h6 id=general-guidelines><span class=secno>4.8.3.1.12 </span>General guidelines</h6>
 
   <p>The most general rule to consider when writing alternative text
   is the following: <strong>the intent is that replacing every image
@@ -19401,7 +19393,7 @@
 
   <div class=impl>
 
-  <h6 id=guidance-for-markup-generators><span class=secno>4.8.2.1.13 </span>Guidance for markup generators</h6>
+  <h6 id=guidance-for-markup-generators><span class=secno>4.8.3.1.13 </span>Guidance for markup generators</h6>
 
   <p>Markup generators (such as WYSIWYG authoring tools) should,
   wherever possible, obtain alternative text from their
@@ -19436,7 +19428,7 @@
 
   <div class=impl>
 
-  <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.2.1.14 </span>Guidance for conformance checkers</h6>
+  <h6 id=guidance-for-conformance-checkers><span class=secno>4.8.3.1.14 </span>Guidance for conformance checkers</h6>
 
   <p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute as an error unless either
   the conditions listed above for <a href=#unknown-images>images
@@ -19451,7 +19443,7 @@
 
 
 
-  <h4 id=the-iframe-element><span class=secno>4.8.3 </span>The <dfn><code>iframe</code></dfn> element</h4>
+  <h4 id=the-iframe-element><span class=secno>4.8.4 </span>The <dfn><code>iframe</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20156,7 +20148,7 @@
 
 
 
-  <h4 id=the-embed-element><span class=secno>4.8.4 </span>The <dfn><code>embed</code></dfn> element</h4>
+  <h4 id=the-embed-element><span class=secno>4.8.5 </span>The <dfn><code>embed</code></dfn> element</h4>
 
 <!-- (v2?)
  we have all kinds of quirks we should define if they come up during
@@ -20443,7 +20435,7 @@
 
 
 
-  <h4 id=the-object-element><span class=secno>4.8.5 </span>The <dfn><code>object</code></dfn> element</h4>
+  <h4 id=the-object-element><span class=secno>4.8.6 </span>The <dfn><code>object</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20991,13 +20983,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>
@@ -21008,15 +20998,15 @@
    <code><a href=#the-object-element>object</a></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>
 
 
 
-  <h4 id=the-param-element><span class=secno>4.8.6 </span>The <dfn><code>param</code></dfn> element</h4>
+  <h4 id=the-param-element><span class=secno>4.8.7 </span>The <dfn><code>param</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd>None.</dd>
@@ -21086,7 +21076,7 @@
   </div>
 
 
-  <h4 id=video><span class=secno>4.8.7 </span>The <dfn><code>video</code></dfn> element</h4>
+  <h4 id=video><span class=secno>4.8.8 </span>The <dfn><code>video</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21343,7 +21333,7 @@
 
 
 
-  <h4 id=audio><span class=secno>4.8.8 </span>The <dfn><code>audio</code></dfn> element</h4>
+  <h4 id=audio><span class=secno>4.8.9 </span>The <dfn><code>audio</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21479,7 +21469,7 @@
 
 
 
-  <h4 id=the-source-element><span class=secno>4.8.9 </span>The <dfn><code>source</code></dfn> element</h4>
+  <h4 id=the-source-element><span class=secno>4.8.10 </span>The <dfn><code>source</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd>None.</dd>
@@ -21630,7 +21620,7 @@
 
 
 
-  <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>
+  <h4 id=media-elements><span class=secno>4.8.11 </span>Media elements</h4>
 
   <p><dfn id=media-element title="media element">Media elements</dfn> implement the
   following interface:</p>
@@ -21762,7 +21752,7 @@
 
 
 
-  <h5 id=error-codes><span class=secno>4.8.10.1 </span>Error codes</h5>
+  <h5 id=error-codes><span class=secno>4.8.11.1 </span>Error codes</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
 
@@ -21831,7 +21821,7 @@
 
    <dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
 
-  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</h5>
+  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.11.2 </span>Location of the media resource</h5>
 
   <p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
   attribute on <a href=#media-element title="media element">media elements</a> gives
@@ -21878,7 +21868,7 @@
 
 
 
-  <h5 id=mime-types><span class=secno>4.8.10.3 </span>MIME types</h5>
+  <h5 id=mime-types><span class=secno>4.8.11.3 </span>MIME types</h5>
 
   <p>A <a href=#media-resource>media resource</a> can be described in terms of its
   <em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
@@ -21974,7 +21964,7 @@
   render.</p>
 
 
-  <h5 id=network-states><span class=secno>4.8.10.4 </span>Network states</h5>
+  <h5 id=network-states><span class=secno>4.8.11.4 </span>Network states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
 
@@ -22027,7 +22017,7 @@
 
 
 
-  <h5 id=loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</h5>
+  <h5 id=loading-the-media-resource><span class=secno>4.8.11.5 </span>Loading the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
 
@@ -22795,7 +22785,7 @@
 
 
 
-  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</h5>
+  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.11.6 </span>Offsets into the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
 
@@ -22932,7 +22922,7 @@
 
 
 
-  <h5 id=the-ready-states><span class=secno>4.8.10.7 </span>The ready states</h5>
+  <h5 id=the-ready-states><span class=secno>4.8.11.7 </span>The ready states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
 
@@ -23240,7 +23230,7 @@
 -->
 
 
-  <h5 id=playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</h5>
+  <h5 id=playing-the-media-resource><span class=secno>4.8.11.8 </span>Playing the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
 
@@ -23675,7 +23665,7 @@
 
 
 
-  <h5 id=seeking><span class=secno>4.8.10.9 </span>Seeking</h5>
+  <h5 id=seeking><span class=secno>4.8.11.9 </span>Seeking</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
 
@@ -23791,7 +23781,7 @@
   </div>
 
 
-  <h5 id=user-interface><span class=secno>4.8.10.10 </span>User interface</h5>
+  <h5 id=user-interface><span class=secno>4.8.11.10 </span>User interface</h5>
 
   <p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
@@ -23896,7 +23886,7 @@
 
 
 
-  <h5 id=time-ranges><span class=secno>4.8.10.11 </span>Time ranges</h5>
+  <h5 id=time-ranges><span class=secno>4.8.11.11 </span>Time ranges</h5>
 
   <p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
   represent a list of ranges (periods) of time.</p>
@@ -23974,7 +23964,7 @@
   </div>
 
 
-  <h5 id=mediaevents><span class=secno>4.8.10.12 </span>Event summary</h5>
+  <h5 id=mediaevents><span class=secno>4.8.11.12 </span>Event summary</h5>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -24082,7 +24072,7 @@
      <td>
   </table><div class=impl>
 
-  <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.13 </span>Security and privacy considerations</h5>
+  <h5 id=security-and-privacy-considerations><span class=secno>4.8.11.13 </span>Security and privacy considerations</h5>
 
   <p>The main security and privacy implications of the
   <code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
@@ -24130,7 +24120,7 @@
   </div>
 
 
-  <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
+  <h4 id=the-canvas-element><span class=secno>4.8.12 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24379,7 +24369,7 @@
 
   
 
-  <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
+  <h5 id=2dcontext><span class=secno>4.8.12.1 </span>The 2D context</h5>
 
   <!-- v2: we're on v4. suggestions for next version are marked v5. -->
 
@@ -24581,7 +24571,7 @@
 
 
 
-  <h6 id=the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</h6>
+  <h6 id=the-canvas-state><span class=secno>4.8.12.1.1 </span>The canvas state</h6>
 
   <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
 
@@ -24641,7 +24631,7 @@
   </div>
 
 
-  <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+  <h6 id=transformations><span class=secno>4.8.12.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
 
   <p>The transformation matrix is applied to coordinates when creating
   shapes and paths.</p> <!-- conformance criteria for actual drawing
@@ -24746,7 +24736,7 @@
   </div>
 
 
-  <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
+  <h6 id=compositing><span class=secno>4.8.12.1.3 </span>Compositing</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -24902,7 +24892,7 @@
   </div>
 
 
-  <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
+  <h6 id=colors-and-styles><span class=secno>4.8.12.1.4 </span>Colors and styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -25266,7 +25256,7 @@
 
 
 
-  <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
+  <h6 id=line-styles><span class=secno>4.8.12.1.5 </span>Line styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -25438,7 +25428,7 @@
   </div>
 
 
-  <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
+  <h6 id=shadows><span class=secno>4.8.12.1.6 </span><dfn>Shadows</dfn></h6>
 
   <p>All drawing operations are affected by the four global shadow
   attributes.</p>
@@ -25573,7 +25563,7 @@
   (since the shape will overwrite the shadow).</p>
 
 
-  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
+  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.12.1.7 </span>Simple shapes (rectangles)</h6>
 
   <p>There are three methods that immediately draw rectangles to the
   bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -25643,7 +25633,7 @@
   </div>
 
 
-  <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
+  <h6 id=complex-shapes-(paths)><span class=secno>4.8.12.1.8 </span>Complex shapes (paths)</h6>
 
   <p>The context always has a current path. There is only one current
   path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
@@ -26000,7 +25990,7 @@
   </div>
 
 
-  <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+  <h6 id=focus-management-0><span class=secno>4.8.12.1.9 </span>Focus management</h6> <!-- a v4 feature -->
 
   <p>When a canvas is interactive, authors should include focusable
   elements in the element's fallback content corresponding to each
@@ -26144,7 +26134,7 @@
   </div>
 
 
-  <h6 id=text><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
+  <h6 id=text><span class=secno>4.8.12.1.10 </span>Text</h6> <!-- a v3 feature -->
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -26653,7 +26643,7 @@
 
 
 
-  <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
+  <h6 id=images><span class=secno>4.8.12.1.11 </span>Images</h6>
 
   <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
   can be used.</p>
@@ -26777,7 +26767,7 @@
 
 
 
-  <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+  <h6 id=pixel-manipulation><span class=secno>4.8.12.1.12 </span><dfn>Pixel manipulation</dfn></h6>
 
   <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
 
@@ -27137,7 +27127,7 @@
 
   <div class=impl>
 
-  <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
+  <h6 id=drawing-model><span class=secno>4.8.12.1.13 </span>Drawing model</h6>
 
   <p>When a shape or image is painted, user agents must follow these
   steps, in the order given (or act as if they do):</p>
@@ -27167,7 +27157,7 @@
   </ol></div>
 
 
-  <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
+  <h6 id=examples><span class=secno>4.8.12.1.14 </span>Examples</h6>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -27220,7 +27210,7 @@
 
   <div class=impl>
 
-  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
+  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.12.2 </span>Color spaces and color correction</h5>
 
   <p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
   only two points: when rendering images with their own gamma
@@ -27262,7 +27252,7 @@
 
   <div class=impl>
 
-  <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+  <h5 id=security-with-canvas-elements><span class=secno>4.8.12.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
 
   <p><strong>Information leakage</strong> can occur if scripts from
   one <a href=#origin>origin</a> can access information (e.g. read pixels)
@@ -27330,7 +27320,7 @@
 
 
 
-  <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code></dfn> element</h4>
+  <h4 id=the-map-element><span class=secno>4.8.13 </span>The <dfn><code>map</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27401,7 +27391,7 @@
 
 
 
-  <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
+  <h4 id=the-area-element><span class=secno>4.8.14 </span>The <dfn><code>area</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -27606,7 +27596,7 @@
   </div>
 
 
-  <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
+  <h4 id=image-maps><span class=secno>4.8.15 </span>Image maps</h4>
 
   <!-- TESTS
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -27617,7 +27607,7 @@
 
   <div class=impl>
 
-  <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>
+  <h5 id=authoring><span class=secno>4.8.15.1 </span>Authoring</h5>
 
   </div>
 
@@ -27659,7 +27649,7 @@
 
   <div class=impl>
 
-  <h5 id=processing-model><span class=secno>4.8.14.2 </span>Processing model</h5>
+  <h5 id=processing-model><span class=secno>4.8.15.2 </span>Processing model</h5>
 
   <p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
   representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
@@ -27859,7 +27849,7 @@
 
 
 
-  <h4 id=mathml><span class=secno>4.8.15 </span>MathML</h4>
+  <h4 id=mathml><span class=secno>4.8.16 </span>MathML</h4>
 
   <p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -27933,7 +27923,7 @@
 
 
 
-  <h4 id=svg-0><span class=secno>4.8.16 </span>SVG</h4>
+  <h4 id=svg-0><span class=secno>4.8.17 </span>SVG</h4>
 
   <p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -27973,7 +27963,7 @@
 
 
 
-  <h4 id=dimension-attributes><span class=secno>4.8.17 </span><dfn>Dimension attributes</dfn></h4>
+  <h4 id=dimension-attributes><span class=secno>4.8.18 </span><dfn>Dimension attributes</dfn></h4>
 
   <p><span class=impl><strong>Author requirements</strong>:</span>
   The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
@@ -28204,12 +28194,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>
@@ -28233,59 +28221,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><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-dt-element>dt</a></code></dt>
+   <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></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>
 
@@ -28650,9 +28634,9 @@
   </div>
 
   <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>
+  <code><a href=#the-figure-element>figure</a></code> element other than the <code><a href=#the-figcaption-element>figcaption</a></code>,
+  the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
+  <code><a href=#the-figcaption-element>figcaption</a></code>.</p>
 
   <p>A caption can introduce context for a table, making it
   significantly easier to understand.</p>
@@ -40353,7 +40337,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>Optionally 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>
+   <dd>One <code><a href=#the-summary-element>summary</a></code> element followed by <a href=#flow-content>flow content</a>.</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>
@@ -40371,18 +40355,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><a href=#the-dt-element>dt</a></code> element child
-  of the element, if any, <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>
+  <p>The <span class=impl>first</span> <code><a href=#the-summary-element>summary</a></code> element
+  child of the element, if any, <a href=#represents>represents</a> the summary or
+  legend of the details. <span class=impl>If there is no child
+  <code><a href=#the-summary-element>summary</a></code> element, the user agent should provide its own
+  legend (e.g. "Details").</span></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>
-  <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>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
@@ -40413,17 +40391,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>
 
@@ -40435,10 +40411,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><a href=#the-details-element>details</a></code>
@@ -40447,9 +40422,32 @@
 
    <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></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 id=the-summary-element><span class=secno>4.11.2 </span>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><a href=#the-details-element>details</a></code> element.</dd>
+   <dt>Content model:</dt>
+   <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>
+   <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+  </dl><p>The <code><a href=#the-summary-element>summary</a></code> element <a href=#represents>represents</a> a
+  summary, caption, or legend for the rest of the contents of the
+  <code><a href=#the-summary-element>summary</a></code> element's parent <code><a href=#the-details-element>details</a></code>
+  element<span class=impl>, if any</span>.</p>
+
+
+
 <!-- v2DATAGRID
   <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
 
@@ -43045,7 +43043,7 @@
 
 -->
 
-  <h4 id=the-command><span class=secno>4.11.2 </span>The <dfn><code>command</code></dfn> element</h4>
+  <h4 id=the-command><span class=secno>4.11.3 </span>The <dfn><code>command</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#metadata-content>Metadata content</a>.</dd>
@@ -43255,7 +43253,7 @@
 
 
 
-  <h4 id=menus><span class=secno>4.11.3 </span>The <dfn><code>menu</code></dfn> element</h4>
+  <h4 id=menus><span class=secno>4.11.4 </span>The <dfn><code>menu</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -43323,7 +43321,7 @@
 
 
 
-  <h5 id=menus-intro><span class=secno>4.11.3.1 </span>Introduction</h5>
+  <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -43398,7 +43396,7 @@
 
   <div class=impl>
 
-  <h5 id=building-menus-and-toolbars><span class=secno>4.11.3.2 </span><dfn>Building menus and toolbars</dfn></h5>
+  <h5 id=building-menus-and-toolbars><span class=secno>4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>
 
   <p>A menu (or toolbar) consists of a list of zero or more of the
   following components:</p>
@@ -43483,7 +43481,7 @@
 
 
 
-  <h5 id=context-menus><span class=secno>4.11.3.3 </span><dfn>Context menus</dfn></h5>
+  <h5 id=context-menus><span class=secno>4.11.4.3 </span><dfn>Context menus</dfn></h5>
 
   <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn>
   attribute gives the element's <a href=#context-menus title="context menus">context
@@ -43573,7 +43571,7 @@
 
   <div class=impl>
 
-  <h5 id=toolbars><span class=secno>4.11.3.4 </span><dfn>Toolbars</dfn></h5>
+  <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>
 
   <p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the user agent
   must <a href=#building-menus-and-toolbars title="building menus and toolbars">build</a> the
@@ -43588,7 +43586,7 @@
 
 
 
-  <h4 id=commands><span class=secno>4.11.4 </span>Commands</h4>
+  <h4 id=commands><span class=secno>4.11.5 </span>Commands</h4>
 
   <p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
   behind menu items, buttons, and links.<!--v2COMMAND: Once a command
@@ -43836,7 +43834,7 @@
 
   <div class=impl>
 
-  <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.4.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
+  <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
 
   <p>An <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -43882,7 +43880,7 @@
   command is to <a href=#fire-a-click-event title="fire a click event">fire a <code title=event-click>click</code> event</a> at the element.</p>
 
 
-  <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.4.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
+  <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
 
   <p>A <code><a href=#the-button-element>button</a></code> element always <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -43894,7 +43892,7 @@
   State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the button.</p>
 
 
-  <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.4.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
+  <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
 
   <p>An <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in one of the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, <a href=#image-button-state title=attr-input-type-image>Image Button</a>, <a href=#button-state title=attr-input-type-button>Button</a>, <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>, or <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> states <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -43965,7 +43963,7 @@
   element.</p>
 
 
-  <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.4.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
+  <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
 
   <p>An <code><a href=#the-option-element>option</a></code> element with an ancestor
   <code><a href=#the-select-element>select</a></code> element and either no <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute or a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute that is not the
@@ -44018,7 +44016,7 @@
   element.</p>
 
 
-  <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.4.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
+  <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
   a command</h5>
 
   <p>A <code><a href=#the-command>command</a></code> element <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -44075,7 +44073,7 @@
 
 
 
-  <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.4.6 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
+  <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.6 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
 
   <p>A <code><a href=#the-label-element>label</a></code> element that has an <a href=#assigned-access-key>assigned access
   key</a> and a <a href=#labeled-control>labeled control</a> and whose
@@ -44116,7 +44114,7 @@
 
 
 
-  <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.4.7 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
+  <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.7 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
 
   <p>A <code><a href=#the-legend-element>legend</a></code> element that has an <a href=#assigned-access-key>assigned access
   key</a> and is a child of a <code><a href=#the-fieldset-element>fieldset</a></code> element that
@@ -44160,7 +44158,7 @@
 
 
 
-  <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.4.8 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
+  <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
 
   <p>An element that has an <a href=#assigned-access-key>assigned access key</a> <a href=#concept-command title=concept-command>defines a command</a>.</p>
 
@@ -44225,7 +44223,7 @@
 
 
 
-  <h4 id=devices><span class=secno>4.11.5 </span>The <dfn><code>device</code></dfn> element</h4>
+  <h4 id=devices><span class=secno>4.11.6 </span>The <dfn><code>device</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -44294,7 +44292,7 @@
   </div>
 
 
-  <h5 id=stream-api><span class=secno>4.11.5.1 </span>Stream API</h5>
+  <h5 id=stream-api><span class=secno>4.11.6.1 </span>Stream API</h5>
 
   <p>The <code><a href=#stream>Stream</a></code> interface is used to represent
   streams.</p>
@@ -44510,8 +44508,8 @@
   </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>
+  <code><a href=#the-figcaption-element>figcaption</a></code> or <code><a href=#the-caption-element>caption</a></code> element, or in
+  surrounding prose.</p>
 
   <div class=example>
 
@@ -44521,31 +44519,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>
@@ -45140,14 +45136,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
@@ -48748,8 +48744,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
@@ -48757,6 +48753,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>
@@ -58549,8 +58546,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>
@@ -74893,9 +74890,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; }
@@ -74988,7 +74985,6 @@
 h6 { margin-top: 2.33em; margin-bottom; 2.33em; }
 
 dd { margin-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'margin-right' for rtl elements */
-details > dd, figure > dd { margin-left: 0; } /* <a href=#ltr-specific>LTR-specific</a>: use 'margin-right' for rtl elements */
 dir, menu, ol, ul { padding-left: 40px; } /* <a href=#ltr-specific>LTR-specific</a>: use 'padding-right' for rtl elements */
 blockquote, figure { margin-left: 40px; margin-right: 40px; }
 
@@ -76119,10 +76115,10 @@
   <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 the element's first child
-  <code><a href=#the-dt-element>dt</a></code> element, if any, and place it in a first 'block' box
-  container, and then take the element's first child <code><a href=#the-dd-element>dd</a></code>
-  element, if any, and place it in a second 'block' box container,
-  ignoring all the other children of the element.</p>
+  <code><a href=#the-summary-element>summary</a></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
@@ -79368,9 +79364,7 @@
     <tr><th><code><a href=#the-dd-element>dd</a></code></th>
      <td>Content for corresponding <code><a href=#the-dt-element>dt</a></code> element(s)</td>
      <td>none</td>
-     <td><code><a href=#the-dl-element>dl</a></code>;
-         <code><a href=#the-figure-element>figure</a></code>;
-         <code><a href=#the-details-element>details</a></code></td>
+     <td><code><a href=#the-dl-element>dl</a></code></td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
@@ -79390,8 +79384,8 @@
          <a href=#sectioning-root title="Sectioning root">sectioning root</a>;
          <a href=#interactive-content title="Interactive content">interactive</a></td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
-     <td><code><a href=#the-dt-element>dt</a></code>*;
-         <code><a href=#the-dd-element>dd</a></code>*</td>
+     <td><code><a href=#the-summary-element>summary</a></code>*;
+         <a href=#flow-content title="Flow content">flow</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a>;
          <code title=attr-details-open><a href=#attr-details-open>open</a></code></td>
      <td><code><a href=#htmldetailselement>HTMLDetailsElement</a></code></td>
@@ -79422,9 +79416,7 @@
     <tr><th><code><a href=#the-dt-element>dt</a></code></th>
      <td>Legend for corresponding <code><a href=#the-dd-element>dd</a></code> element(s)</td>
      <td>none</td>
-     <td><code><a href=#the-dl-element>dl</a></code>;
-         <code><a href=#the-figure-element>figure</a></code>;
-         <code><a href=#the-details-element>details</a></code></td>
+     <td><code><a href=#the-dl-element>dl</a></code></td>
      <td>varies*</td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
@@ -79465,13 +79457,20 @@
          <code title=attr-fae-form><a href=#attr-fae-form>form</a></code>;
          <code title=attr-fe-name><a href=#attr-fe-name>name</a></code></td>
      <td><code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code></td>
+    <tr><th><code><a href=#the-figcaption-element>figcaption</a></code></th>
+     <td>Caption for <code><a href=#the-figure-element>figure</a></code></td>
+     <td>none</td>
+     <td><code><a href=#the-figure-element>figure</a></code></td>
+     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+     <td><a href=#global-attributes title="global attributes">globals</a></td>
+     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
     <tr><th><code><a href=#the-figure-element>figure</a></code></th>
      <td>Figure with optional caption</td>
      <td><a href=#flow-content title="Flow content">flow</a>;
          <a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
-     <td><code><a href=#the-dt-element>dt</a></code>*;
-         <code><a href=#the-dd-element>dd</a></code>*</td>
+     <td><code><a href=#the-figcaption-element>figcaption</a></code>*;
+         <a href=#flow-content title="Flow content">flow</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
     <tr><th><code><a href=#the-footer-element>footer</a></code></th>
@@ -80039,6 +80038,13 @@
      <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmlelement>HTMLElement</a></code></td>
+    <tr><th><code><a href=#the-summary-element>summary</a></code></th>
+     <td>Caption for <code><a href=#the-details-element>details</a></code></td>
+     <td>none</td>
+     <td><code><a href=#the-details-element>details</a></code></td>
+     <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+     <td><a href=#global-attributes title="global attributes">globals</a></td>
+     <td><code><a href=#htmlelement>HTMLElement</a></code></td>
     <tr><th><code><a href=#the-sub-and-sup-elements>sup</a></code></th>
      <td>Superscript</td>
      <td><a href=#flow-content title="Flow content">flow</a>;
@@ -81333,6 +81339,9 @@
     <tr><td> <code><a href=#the-fieldset-element>fieldset</a></code>
      <td> <code><a href=#htmlfieldsetelement>HTMLFieldSetElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-figcaption-element>figcaption</a></code>
+     <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-figure-element>figure</a></code>
      <td> <code><a href=#htmlelement>HTMLElement</a></code>
 
@@ -81489,6 +81498,9 @@
     <tr><td> <code><a href=#the-sub-and-sup-elements>sub</a></code>
      <td> <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-summary-element>summary</a></code>
+     <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-sub-and-sup-elements>sup</a></code>
      <td> <code><a href=#htmlelement>HTMLElement</a></code>
 

Modified: source
===================================================================
--- source	2010-01-29 23:11:02 UTC (rev 4635)
+++ source	2010-01-30 03:12:10 UTC (rev 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">&#x0426;&#x0440;&#x043d;&#x0430; &#x043c;&#x0430;&#x0447;&#x043a;&#x0430;, &#x0431;&#x0435;&#x043b;&#x0438; &#x043c;&#x0430;&#x0447;&#x043e;&#x0440;</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">&#x0426;&#x0440;&#x043d;&#x0430; &#x043c;&#x0430;&#x0447;&#x043a;&#x0430;, &#x0431;&#x0435;&#x043b;&#x0438; &#x043c;&#x0430;&#x0447;&#x043e;&#x0440;</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">&#x0426;&#x0440;&#x043d;&#x0430; &#x043c;&#x0430;&#x0447;&#x043a;&#x0430;, &#x0431;&#x0435;&#x043b;&#x0438; &#x043c;&#x0430;&#x0447;&#x043e;&#x0440;</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">&#x0426;&#x0440;&#x043d;&#x0430; &#x043c;&#x0430;&#x0447;&#x043a;&#x0430;, &#x0431;&#x0435;&#x043b;&#x0438; &#x043c;&#x0430;&#x0447;&#x043e;&#x0440;</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> &#x00A3;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> &#x00A3;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>
 




More information about the Commit-Watchers mailing list