[prev in list] [next in list] [prev in thread] [next in thread]
List: html5-commit-watchers
Subject: [html5] r4636 - [acgiow] (0) Change <figure> and <details> to use
From: whatwg () whatwg ! org
Date: 2010-01-30 3:12:12
Message-ID: 20100130031212.659081C84004 () ps20323 ! dreamhostps ! com
[Download RAW message or body]
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%3 \
Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20oncl \
ick%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%3 \
Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20oncl \
ick%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">Црна \
мачка, бели \
мачор</cite>, 1998</li>
- <li value="8"><cite>A Bug's Life</cite>, 1998</li>
- <li value="7"><cite>Toy Story</cite>, 1995</li>
- <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
- <li value="5"><cite>Cars</cite>, 2006</li>
- <li value="4"><cite>Toy Story 2</cite>, 1999</li>
- <li value="3"><cite>Finding Nemo</cite>, 2003</li>
- <li value="2"><cite>The Incredibles</cite>, 2004</li>
- <li value="1"><cite>Ratatouille</cite>, 2007</li>
- </ol>
- <dd>
+ <figcaption>The top 10 movies of all time</figcaption>
+ <ol>
+ <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
+ <li value="9"><cite lang="sh">Црна \
мачка, бели \
мачор</cite>, 1998</li> + <li \
value="8"><cite>A Bug's Life</cite>, 1998</li> + <li \
value="7"><cite>Toy Story</cite>, 1995</li> + <li \
value="6"><cite>Monsters, Inc</cite>, 2001</li> + <li \
value="5"><cite>Cars</cite>, 2006</li> + <li value="4"><cite>Toy \
Story 2</cite>, 1999</li> + <li value="3"><cite>Finding Nemo</cite>, \
2003</li> + <li value="2"><cite>The Incredibles</cite>, 2004</li>
+ <li value="1"><cite>Ratatouille</cite>, 2007</li>
+ </ol>
</figure></pre>
<p>The markup could also be written as follows, using the <code
@@ -16310,21 +16309,19 @@
<code>ol</code> element:</p>
<pre><figure>
- <dt>The top 10 movies of all time</dt>
- <dd>
- <ol reversed>
- <li><cite>Josie and the Pussycats</cite>, 2001</li>
- <li><cite lang="sh">Црна \
мачка, бели \
мачор</cite>, 1998</li>
- <li><cite>A Bug's Life</cite>, 1998</li>
- <li><cite>Toy Story</cite>, 1995</li>
- <li><cite>Monsters, Inc</cite>, 2001</li>
- <li><cite>Cars</cite>, 2006</li>
- <li><cite>Toy Story 2</cite>, 1999</li>
- <li><cite>Finding Nemo</cite>, 2003</li>
- <li><cite>The Incredibles</cite>, 2004</li>
- <li><cite>Ratatouille</cite>, 2007</li>
- </ol>
- </dd>
+ <figcaption>The top 10 movies of all time</figcaption>
+ <ol reversed>
+ <li><cite>Josie and the Pussycats</cite>, 2001</li>
+ <li><cite lang="sh">Црна \
мачка, бели \
мачор</cite>, 1998</li> + <li><cite>A \
Bug's Life</cite>, 1998</li> + <li><cite>Toy Story</cite>, \
1995</li> + <li><cite>Monsters, Inc</cite>, 2001</li>
+ <li><cite>Cars</cite>, 2006</li>
+ <li><cite>Toy Story 2</cite>, 1999</li>
+ <li><cite>Finding Nemo</cite>, 2003</li>
+ <li><cite>The Incredibles</cite>, 2004</li>
+ <li><cite>Ratatouille</cite>, 2007</li>
+ </ol>
</figure></pre>
</div>
@@ -16499,22 +16496,17 @@
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Before <code>dd</code> or <code>dt</code> elements inside <code>dl</code> \
elements.</dd>
- <dd>In a <code>figure</code> element containing no other <code>dt</code> element \
children.</dd>
- <dd>As the first child of a <code>details</code> element.</dd>
<dt>Content model:</dt>
- <dd>When the parent node is a <code>figure</code> element: <span>flow \
content</span>, but with no descendant <code>figure</code> \
elements.</dd>
- <dd>Otherwise: <span>phrasing content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dt>DOM interface:</dt>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>dt</code> element <span>represents</span> either: the
- term, or name, part of a term-description group in a description
- list (<code>dl</code> element); or, the caption of a
- <code>figure</code> element; or, the summary of a
- <code>details</code> element.</p>
+ <p>The <code>dt</code> element <span>represents</span> the term, or
+ name, part of a term-description group in a description list
+ (<code>dl</code> element).</p>
<p class="note">The <code>dt</code> element itself, when used in a
<code>dl</code> element, does not indicate that its contents are a
@@ -16531,8 +16523,6 @@
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>After <code>dt</code> or <code>dd</code> elements inside <code>dl</code> \
elements.</dd>
- <dd>In a <code>figure</code> element containing no other <code>dd</code> element \
children.</dd>
- <dd>As the last child of a <code>details</code> element.</dd>
<dt>Content model:</dt>
<dd><span>Flow content</span>.</dd>
<dt>Content attributes:</dt>
@@ -16541,11 +16531,9 @@
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>dd</code> element <span>represents</span> either: the
+ <p>The <code>dd</code> element <span>represents</span> the
description, definition, or value, part of a term-description group
- in a description list (<code>dl</code> element); or, the data of a
- <code>figure</code> element; or, the details of a
- <code>details</code> element.</p>
+ in a description list (<code>dl</code> element).</p>
<div class="example">
@@ -17960,21 +17948,19 @@
figure's legend using <code>var</code>.</p>
<pre><figure>
- <dd>
- <math>
- <mi>a</mi>
- <mo>=</mo>
- <msqrt>
- <msup><mi>b</mi><mn>2</mn></msup>
- <mi>+</mi>
- <msup><mi>c</mi><mn>2</mn></msup>
- </msqrt>
- </math>
- </dd>
- <dt>
+ <math>
+ <mi>a</mi>
+ <mo>=</mo>
+ <msqrt>
+ <msup><mi>b</mi><mn>2</mn></msup>
+ <mi>+</mi>
+ <msup><mi>c</mi><mn>2</mn></msup>
+ </msqrt>
+ </math>
+ <figcaption>
Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
a triangle with sides <var>b</var> and <var>c</var>
- </dt>
+ </figcaption>
</figure></pre>
</div>
@@ -19147,14 +19133,16 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt>Content model:</dt>
- <dd>In any order, one <code>dd</code> element, and optionally one <code>dt</code> \
element.</dd> + <dd>Either: One <code>figcaption</code> element followed by \
<span>phrasing content</span>.</dd> + <dd>Or: <span>Phrasing content</span> \
followed by one <code>figcaption</code> element.</dd> + <dd>Or: <span>Phrasing \
content</span>.</dd> <dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dt>DOM interface:</dt>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <!-- v2: Add a <dc> or <credit> element for photo credits -->
+ <!-- v2: Add a <credit> element for photo credits -->
<p>The <code>figure</code> element <span>represents</span> some
<span>flow content</span>, optionally with a caption, that is
@@ -19167,16 +19155,11 @@
of the document, be moved away from that primary content, e.g. to
the side of the page, to dedicated pages, or to an appendix.</p>
- <p>The <span class="impl">first</span> <code>dt</code> element child
- of the element, if any, represents the caption of the
+ <p>The <span class="impl">first</span> <code>figcaption</code>
+ element child of the element, if any, represents the caption of the
<code>figure</code> element's contents. If there is no child
- <code>dt</code> element, then there is no caption.</p>
+ <code>figcaption</code> element, then there is no caption.</p>
- <p>The <span class="impl">first</span> <code>dd</code> element child
- of the element<span class="impl">, if any,</span> represents the
- element's contents. <span class="impl">If there is no child
- <code>dd</code> element, then there are no contents.</span></p>
-
<div class="example">
<p>This example shows the <code>figure</code> element to mark up a
@@ -19185,14 +19168,12 @@
<pre><p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
- <dt>Listing 4. The primary core interface API declaration.</dt>
- <dd>
- <pre><code>interface PrimaryCore {
- boolean verifyDataLine();
- void sendData(in sequence&lt;byte> data);
- void initSelfDestruct();
+ <figcaption>Listing 4. The primary core interface API \
declaration.</figcaption> + <pre><code>interface PrimaryCore {
+ boolean verifyDataLine();
+ void sendData(in sequence&lt;byte> data);
+ void initSelfDestruct();
}</code></pre>
- </dd>
</figure>
<p>The API is designed to use UTF-8.</p></pre>
@@ -19204,12 +19185,10 @@
photo.</p>
<pre><figure>
- <dd>
- <img src="bubbles-work.jpeg"
- alt="Bubbles, sitting in his office chair, works on his
- latest project intently.">
- </dd>
- <dt>Bubbles at work</dt>
+ <img src="bubbles-work.jpeg"
+ alt="Bubbles, sitting in his office chair, works on his
+ latest project intently.">
+ <figcaption>Bubbles at work</figcaption>
</figure></pre>
</div>
@@ -19234,13 +19213,13 @@
included with Exhibit B.
<figure>
- <dd><img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- <dt>Exhibit A. The alleged <cite>rough copy</cite> comic.
+ <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ <figcaption>Exhibit A. The alleged <cite>rough copy</cite> \
comic.</figcaption> </figure>
<figure>
- <dd><video src="ex-b.mov"></video>
- <dt>Exhibit B. The <cite>Rough Copy</cite> trailer.
+ <video src="ex-b.mov"></video>
+ <figcaption>Exhibit B. The <cite>Rough Copy</cite> \
trailer.</figcaption> </figure>
<p>The case was resolved out of court.</pre>
@@ -19253,13 +19232,11 @@
<code>figure</code>.</p>
<pre><figure>
- <dd>
- <p>'Twas brillig, and the slithy toves<br>
- Did gyre and gimble in the wabe;<br>
- All mimsy were the borogoves,<br>
- And the mome raths outgrabe.</p>
- </dd>
- <dt><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</dt>
+ <p>'Twas brillig, and the slithy toves<br>
+ Did gyre and gimble in the wabe;<br>
+ All mimsy were the borogoves,<br>
+ And the mome raths outgrabe.</p>
+ <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, \
1832-98</figcaption> </figure></pre>
</div>
@@ -19270,20 +19247,39 @@
discussing a castle, the figure has three images in it.</p>
<pre><figure>
- <dd>
- <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
- alt="The castle has one tower, and a tall wall around it.">
- <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, \
1858."
- alt="The castle now has two towers and two walls.">
- <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
- alt="The castle lies in ruins, the original tower all that remains in one \
piece.">
- </dd>
- <dt>The castle through the ages: 1423, 1858, and 1999 respectively.</dt>
+ <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+ alt="The castle has one tower, and a tall wall around it.">
+ <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+ alt="The castle now has two towers and two walls.">
+ <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
+ alt="The castle lies in ruins, the original tower all that remains in one \
piece."> + <figcaption>The castle through the ages: 1423, 1858, and 1999 \
respectively.</figcaption> </figure></pre>
</div>
+ <h4>The <dfn><code>figcaption</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first or last child of a <code>figure</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>figcaption</code> element <span>represents</span> a
+ caption or legend for the rest of the contents of the
+ <code>figcaption</code> element's parent <code>figure</code>
+ element<span class="impl">, if any</span>.</p>
+
+
<h4>The <dfn><code>img</code></dfn> element</h4>
<dl class="element">
@@ -19582,9 +19578,9 @@
steps.</p></li>
<li><p>If the image is the child of a <code>figure</code> element
- that has a child <code>dt</code> element, then the contents of
- the first such <code>dt</code> element are the caption
- information; abort these steps.</p></li>
+ that has a child <code>figcaption</code> element, then the
+ contents of the first such <code>figcaption</code> element are
+ the caption information; abort these steps.</p></li>
<li><p>Run the algorithm to create the <span>outline</span> for
the document.</p></li>
@@ -20024,7 +20020,7 @@
<p>Text such as "Photo of white house with boarded door" would be
equally bad alternative text (though it could be suitable for the
<code title="attr-title">title</code> attribute or in the
- <code>dt</code> element of a <code>figure</code> with this
+ <code>figcaption</code> element of a <code>figure</code> with this
image).</p>
</div>
@@ -20213,10 +20209,10 @@
<p>In these cases, it would be wrong to include alternative text
that consists of just a caption. If a caption is to be included,
then either the <code title="attr-title">title</code> attribute can
- be used, or the <code>figure</code> and <code>dt</code> elements
- can be used. In the latter case, the image would in fact be a
- phrase or paragraph with an alternative graphical representation,
- and would thus require alternative text.</p>
+ be used, or the <code>figure</code> and <code>figcaption</code>
+ elements can be used. In the latter case, the image would in fact
+ be a phrase or paragraph with an alternative graphical
+ representation, and would thus require alternative text.</p>
<pre><!-- Using the title="" attribute -->
<p>The network passes data to the Tokenizer stage, which
@@ -20227,22 +20223,20 @@
<p><strong><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing \
model."></strong></p></pre>
- <pre><!-- Using <figure> and <dt> -->
+ <pre><!-- Using <figure> and <figcaption> -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<figure>
- <dd>
- <strong><img src="images/parsing-model-overview.png" alt="The Network leads
- to the Tokenizer, which leads to the Tree Construction. The Tree
- Construction leads to two items. The first is Script Execution, which
- leads via document.write() back to the Tokenizer. The second item
- from which Tree Construction leads is the DOM. The DOM is related to
- the Script Execution."></strong>
- </dd>
- <dt>Flowchart representation of the parsing model.</dt>
+ <strong><img src="images/parsing-model-overview.png" alt="The Network leads
+ to the Tokenizer, which leads to the Tree Construction. The Tree
+ Construction leads to two items. The first is Script Execution, which
+ leads via document.write() back to the Tokenizer. The second item
+ from which Tree Construction leads is the DOM. The DOM is related to
+ the Script Execution."></strong>
+ <figcaption>Flowchart representation of the parsing model.</figcaption>
</figure></pre>
<pre class="bad"><!-- This is WRONG. Do not do this. Instead, do what the \
above examples do. --> @@ -20407,19 +20401,17 @@
some alternative text:</p>
<pre><figure>
- <dd>
- <strong><img src="KDE%20Light%20desktop.png"
- alt="The desktop is blue, with icons along the left hand side in
- two columns, reading System, Home, K-Mail, etc. A window is
- open showing that menus wrap to a second line if they
- cannot fit in the window. The window has a list of icons
- along the top, with an address bar below it, a list of
- icons for tabs along the left edge, a status bar on the
- bottom, and two panes in the middle. The desktop has a bar
- at the bottom of the screen with a few buttons, a pager, a
- list of open applications, and a clock."></strong>
- </dd>
- <dt>Screenshot of a KDE desktop.</dt>
+ <strong><img src="KDE%20Light%20desktop.png"
+ alt="The desktop is blue, with icons along the left hand side in
+ two columns, reading System, Home, K-Mail, etc. A window is
+ open showing that menus wrap to a second line if they
+ cannot fit in the window. The window has a list of icons
+ along the top, with an address bar below it, a list of
+ icons for tabs along the left edge, a status bar on the
+ bottom, and two panes in the middle. The desktop has a bar
+ at the bottom of the screen with a few buttons, a pager, a
+ list of open applications, and a clock."></strong>
+ <figcaption>Screenshot of a KDE desktop.</figcaption>
</figure></pre>
</div>
@@ -20463,14 +20455,14 @@
if brief, is still better than nothing:</p>
<pre><figure>
- <dd><strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with \
left-right + <strong><img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with \
left-right symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
- the center extending below the sides."></strong></dd>
- <dt>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</dt>
+ the center extending below the sides."></strong>
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
</figure></pre>
<p>Note that the following would be a very bad use of alternative
@@ -20478,10 +20470,10 @@
<pre class="bad"><!-- This example is wrong. Do not copy it. -->
<figure>
- <dd><img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test."></dd>
- <dt>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</dt>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
</figure></pre>
<p>Including the caption in the alternative text like this isn't
@@ -20535,8 +20527,9 @@
present and has a non-empty value.</li>
<li>The <code>img</code> element is in a <code>figure</code>
- element that contains a <code>dt</code> element that contains
- content other than <span>inter-element whitespace</span>.</li>
+ element that contains a <code>figcaption</code> element that
+ contains content other than <span>inter-element
+ whitespace</span>.</li>
<li>The <code>img</code> element is part of the only
<span>paragraph</span> directly in its <span
@@ -20560,8 +20553,8 @@
image with no metadata other than the caption:</p>
<pre><figure>
- <dd><strong><img src="1100670787_6a7c664aef.jpg"></strong></dd>
- <dt>Bubbles traveled everywhere with us.</dt>
+ <strong><img src="1100670787_6a7c664aef.jpg"></strong>
+ <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure></pre>
<p>It could also be marked up like this:</p>
@@ -20587,8 +20580,8 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <dd><strong><img src="photo2.jpeg"></strong></dd>
- <dt>A photograph taken blindly from my front porch.</dt>
+ <strong><img src="photo2.jpeg"></strong>
+ <figcaption>A photograph taken blindly from my front porch.</figcaption>
</figure>
</article></pre>
@@ -20599,13 +20592,13 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <dd><strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
+ <strong><img src="photo2.jpeg" alt="The photograph shows my hummingbird
feeder hanging from the edge of my roof. It is half full, but there
are no birds around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
- with light blue streaks."></strong></dd>
- <dt>A photograph taken blindly from my front porch.</dt>
+ with light blue streaks."></strong>
+ <figcaption>A photograph taken blindly from my front porch.</figcaption>
</figure>
</article></pre>
@@ -22522,13 +22515,11 @@
not support third-party technologies like Java.)</p>
<pre><figure>
- <dd>
- <object type="application/x-java-applet">
- <param name="code" value="MyJavaClass">
- <p>You do not have Java available, or it is disabled.</p>
- </object>
- </dd>
- <dt>My Java Clock</dt>
+ <object type="application/x-java-applet">
+ <param name="code" value="MyJavaClass">
+ <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ <figcaption>My Java Clock</figcaption>
</figure></pre>
</div>
@@ -22539,8 +22530,8 @@
<code>object</code> element.</p>
<pre><figure>
- <dd><object data="clock.html"></object>
- <dt>My HTML Clock
+ <object data="clock.html"></object>
+ <figcaption>My HTML Clock</figcaption>
</figure></pre>
</div>
@@ -31051,12 +31042,10 @@
<caption>
<strong>Characteristics with positive and negative sides.</strong>
<details>
- <dt>Help</dt>
- <dd>
- <p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.</p>
- </dd>
+ <summary>Help</summary>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
</details>
</caption>
<thead>
@@ -31080,59 +31069,55 @@
<dd>
<div class="example"><pre><figure>
- <dt>Characteristics with positive and negative sides</dt>
- <dd>
- <p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.</p>
- <table>
- <thead>
- <tr>
- <th id="n"> Negative
- <th> Characteristic
- <th> Positive
- <tbody>
- <tr>
- <td headers="n r1"> Sad
- <th id="r1"> Mood
- <td> Happy
- <tr>
- <td headers="n r2"> Failing
- <th id="r2"> Grade
- <td> Passing
- </table>
- </dd>
+ <figcaption>Characteristics with positive and negative sides</figcaption>
+ <p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.</p>
+ <table>
+ <thead>
+ <tr>
+ <th id="n"> Negative
+ <th> Characteristic
+ <th> Positive
+ <tbody>
+ <tr>
+ <td headers="n r1"> Sad
+ <th id="r1"> Mood
+ <td> Happy
+ <tr>
+ <td headers="n r2"> Failing
+ <th id="r2"> Grade
+ <td> Passing
+ </table>
</figure></pre></div>
</dd>
- <dt>Next to the table, in a <code>figure</code>'s <code>dt</code></dt>
+ <dt>Next to the table, in a <code>figure</code>'s <code>figcaption</code></dt>
<dd>
<div class="example"><pre><figure>
- <dt>
+ <figcaption>
<strong>Characteristics with positive and negative sides</strong>
<p>Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</p>
- </dt>
- <dd>
- <table>
- <thead>
- <tr>
- <th id="n"> Negative
- <th> Characteristic
- <th> Positive
- <tbody>
- <tr>
- <td headers="n r1"> Sad
- <th id="r1"> Mood
- <td> Happy
- <tr>
- <td headers="n r2"> Failing
- <th id="r2"> Grade
- <td> Passing
- </table>
- </dd>
+ </figcaption>
+ <table>
+ <thead>
+ <tr>
+ <th id="n"> Negative
+ <th> Characteristic
+ <th> Positive
+ <tbody>
+ <tr>
+ <td headers="n r1"> Sad
+ <th id="r1"> Mood
+ <td> Happy
+ <tr>
+ <td headers="n r2"> Failing
+ <th id="r2"> Grade
+ <td> Passing
+ </table>
</figure></pre></div>
</dd>
@@ -31533,9 +31518,9 @@
</div>
<p>When a <code>table</code> element is the only content in a
- <code>figure</code> element's <code>dd</code>, the
- <code>caption</code> element should be omitted in favor of the
- <code>dt</code>.</p>
+ <code>figure</code> element other than the <code>figcaption</code>,
+ the <code>caption</code> element should be omitted in favor of the
+ <code>figcaption</code>.</p>
<p>A caption can introduce context for a table, making it
significantly easier to understand.</p>
@@ -45264,7 +45249,7 @@
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt>Content model:</dt>
- <dd>Optionally one <code>dt</code> element, followed by one <code>dd</code> \
element.</dd> + <dd>One <code>summary</code> element followed by <span>flow \
content</span>.</dd> <dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dd><code title="attr-details-open">open</code></dd>
@@ -45284,18 +45269,12 @@
for footnotes. Please see <a href="#footnotes">the section on
footnotes</a> for details on how to mark up footnotes.</p>
- <p>The <span class="impl">first</span> <code>dt</code> element child
- of the element, if any, <span>represents</span> the summary of the
- details. <span class="impl">If there is no child <code>dt</code>
- element, the user agent should provide its own legend
- (e.g. "Details").</span></p>
+ <p>The <span class="impl">first</span> <code>summary</code> element
+ child of the element, if any, <span>represents</span> the summary or
+ legend of the details. <span class="impl">If there is no child
+ <code>summary</code> element, the user agent should provide its own
+ legend (e.g. "Details").</span></p>
- <p>The <span class="impl">first</span> <code>dd</code> element child
- of the element<span class="impl">, if any,</span>
- <span>represents</span> the details. <span class="impl">If there is
- no child <code>dd</code> element, then there are no
- details.</span></p>
-
<p>The <dfn title="attr-details-open"><code>open</code></dfn>
content attribute is a <span>boolean attribute</span>. If present,
it indicates that the details are to be shown to the user. If the
@@ -45329,17 +45308,15 @@
<pre><section class="progress window">
<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
<details>
- <dt>Copying... <progress max="375505392" value="97543282"></progress> \
25%</dt>
- <dd>
- <dl>
- <dt>Transfer rate:</dt> <dd>452KB/s</dd>
- <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
- <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
- <dt>Duration:</dt> <dd>01:16:27</dd>
- <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
- <dt>Dimensions:</dt> <dd>320×240</dd>
- </dl>
- </dd>
+ <summary>Copying... <progress max="375505392" \
value="97543282"></progress> 25%</summary> + <dl>
+ <dt>Transfer rate:</dt> <dd>452KB/s</dd>
+ <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
+ <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
+ <dt>Duration:</dt> <dd>01:16:27</dd>
+ <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
+ <dt>Dimensions:</dt> <dd>320×240</dd>
+ </dl>
</details>
</section></pre>
@@ -45351,10 +45328,9 @@
used to hide some controls by default:</p>
<pre><details>
- <dt>Name & Extension:
- <dd>
- <p><input type=text name=fn value="Pillar Magazine.pdf">
- <p><label><input type=checkbox name=ext checked> Hide \
extension</label> + <summary>Name & Extension:</summary>
+ <p><input type=text name=fn value="Pillar Magazine.pdf">
+ <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details></pre>
<p>One could use this in conjuction with other <code>details</code>
@@ -45363,9 +45339,35 @@
<p class="details-example"><img src="images/sample-details-1.png" alt=""><img \
src="images/sample-details-2.png" alt=""></p>
+ <p>In these examples, the summary really just summarises what the
+ controls can change, and not the actual values, which is less than
+ ideal.</p>
+
</div>
+ <h4>The <dfn><code>summary</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd>None.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>As the first child of a <code>details</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>summary</code> element <span>represents</span> a
+ summary, caption, or legend for the rest of the contents of the
+ <code>summary</code> element's parent <code>details</code>
+ element<span class="impl">, if any</span>.</p>
+
+
+
<!-- v2DATAGRID
<h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
@@ -49645,8 +49647,8 @@
<hr>
<p>For figures or tables, footnotes can be included in the relevant
- <code>dt</code> or <code>caption</code> element, or in surrounding
- prose.</p>
+ <code>figcaption</code> or <code>caption</code> element, or in
+ surrounding prose.</p>
<div class="example">
@@ -49656,31 +49658,29 @@
footnotes.</p>
<pre><figure>
- <dt>Table 1. Alternative activities for knights.</dt>
- <dd>
- <table>
- <tr>
- <th> Activity
- <th> Location
- <th> Cost
- <tr>
- <td> Dance
- <td> Wherever possible
- <td> £0<sup><a href="#fn1">1</a></sup>
- <tr>
- <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
- <td> Undisclosed
- <td> Undisclosed
- <tr>
- <td> Dining<sup><a href="#fn3">3</a></sup>
- <td> Camelot
- <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
- </table>
- <p id="fn1">1. Assumed.</p>
- <p id="fn2">2. Footwork impeccable.</p>
- <p id="fn3">3. Quality described as "well".</p>
- <p id="fn4">4. A lot.</p>
- </dd>
+ <figcaption>Table 1. Alternative activities for knights.</figcaption>
+ <table>
+ <tr>
+ <th> Activity
+ <th> Location
+ <th> Cost
+ <tr>
+ <td> Dance
+ <td> Wherever possible
+ <td> £0<sup><a href="#fn1">1</a></sup>
+ <tr>
+ <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
+ <td> Undisclosed
+ <td> Undisclosed
+ <tr>
+ <td> Dining<sup><a href="#fn3">3</a></sup>
+ <td> Camelot
+ <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
+ </table>
+ <p id="fn1">1. Assumed.</p>
+ <p id="fn2">2. Footwork impeccable.</p>
+ <p id="fn3">3. Quality described as "well".</p>
+ <p id="fn4">4. A lot.</p>
</figure></pre>
</div>
@@ -50383,14 +50383,14 @@
following two examples:</p>
<pre><figure>
- <dd><img src="castle.jpeg">
- <dt><span itemscope><span itemprop="name">The Castle</span></span> \
(1986) + <img src="castle.jpeg">
+ <figcaption><span itemscope><span itemprop="name">The \
Castle</span></span> (1986)</figcaption> </figure></pre>
<pre><span itemscope><meta itemprop="name" content="The Castle"></span>
<figure>
- <dd><img src="castle.jpeg">
- <dt>The Castle (1986)
+ <img src="castle.jpeg">
+ <figcaption>The Castle (1986)</figcaption>
</figure></pre>
<p>Both have a figure with a caption, and both, completely
@@ -54897,8 +54897,8 @@
simultaneously.</p>
<pre><figure <strong>itemscope itemtype="http://n.whatwg.org/work"</strong>>
- <dd><img <strong>itemprop="work"</strong> src="mypond.jpeg">
- <dt>
+ <img <strong>itemprop="work"</strong> src="mypond.jpeg">
+ <figcaption>
<p><cite <strong>itemprop="title"</strong>>My Pond</cite></p>
<p><small>Licensed under the <a <strong>itemprop="license"</strong>
href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative
@@ -54906,6 +54906,7 @@
and the <a <strong>itemprop="license"</strong>
href="http://www.opensource.org/licenses/mit-license.php">MIT
license</a>.</small>
+ </figcaption>
</figure></pre>
</div>
@@ -66353,8 +66354,8 @@
<a href="../">Return to photo index</a>
</nav>
<figure>
- <dd><img src="/pix/39627052_fd8dcd98b5.jpg">
- <dt>Kissat
+ <img src="/pix/39627052_fd8dcd98b5.jpg">
+ <figcaption>Kissat</figcaption>
</figure>
<p>One of them has six toes!</p>
<p><small><a rel="license" \
href="http://www.opensource.org/licenses/mit-license.php">MIT \
Licensed</a></small></p> @@ -89455,9 +89456,9 @@
}
address, article, aside, blockquote, body, center, dd, dir, div, dl,
-dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr,
-html, legend, listing, menu, nav, ol, p, plaintext, pre, section, ul,
-xmp { display: block; }
+dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,
+hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
+section, summary, ul, xmp { display: block; }
table { display: table; }
caption { display: table-caption; }
@@ -89555,7 +89556,6 @@
h6 { margin-top: 2.33em; margin-bottom; 2.33em; }
dd { margin-left: 40px; } /* <span>LTR-specific</span>: use 'margin-right' for rtl \
elements */
-details > dd, figure > dd { margin-left: 0; } /* <span>LTR-specific</span>: use \
'margin-right' for rtl elements */ dir, menu, ol, ul { padding-left: 40px; } /* \
<span>LTR-specific</span>: use 'padding-right' for rtl elements */ blockquote, \
figure { margin-left: 40px; margin-right: 40px; }
@@ -90841,10 +90841,10 @@
<code>details</code> element, the element is expected to render as a
'block' box with its 'padding-left' property set to '40px'. The
element's shadow tree is expected to take the element's first child
- <code>dt</code> element, if any, and place it in a first 'block' box
- container, and then take the element's first child <code>dd</code>
- element, if any, and place it in a second 'block' box container,
- ignoring all the other children of the element.</p>
+ <code>summary</code> element, if any, and place it in a first
+ 'block' box container, and then take the element's remaining
+ descendants, if any, and place them in a second 'block' box
+ container.</p>
<p>The first container is expected to contain at least one line box,
and that line box is expected to contain a disclosure widget
@@ -94706,9 +94706,7 @@
<th><code>dd</code></th>
<td>Content for corresponding <code>dt</code> element(s)</td>
<td>none</td>
- <td><code>dl</code>;
- <code>figure</code>;
- <code>details</code></td>
+ <td><code>dl</code></td>
<td><span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
@@ -94734,8 +94732,8 @@
<span title="Sectioning root">sectioning root</span>;
<span title="Interactive content">interactive</span></td>
<td><span title="Flow content">flow</span></td>
- <td><code>dt</code>*;
- <code>dd</code>*</td>
+ <td><code>summary</code>*;
+ <span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span>;
<code title="attr-details-open">open</code></td>
<td><code>HTMLDetailsElement</code></td>
@@ -94778,9 +94776,7 @@
<th><code>dt</code></th>
<td>Legend for corresponding <code>dd</code> element(s)</td>
<td>none</td>
- <td><code>dl</code>;
- <code>figure</code>;
- <code>details</code></td>
+ <td><code>dl</code></td>
<td>varies*</td>
<td><span title="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
@@ -94833,13 +94829,23 @@
</tr>
<tr>
+ <th><code>figcaption</code></th>
+ <td>Caption for <code>figure</code></td>
+ <td>none</td>
+ <td><code>figure</code></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>figure</code></th>
<td>Figure with optional caption</td>
<td><span title="Flow content">flow</span>;
<span title="Sectioning root">sectioning root</span></td>
<td><span title="Flow content">flow</span></td>
- <td><code>dt</code>*;
- <code>dd</code>*</td>
+ <td><code>figcaption</code>*;
+ <span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
</tr>
@@ -95557,6 +95563,16 @@
</tr>
<tr>
+ <th><code>summary</code></th>
+ <td>Caption for <code>details</code></td>
+ <td>none</td>
+ <td><code>details</code></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>sup</code></th>
<td>Superscript</td>
<td><span title="Flow content">flow</span>;
@@ -97148,6 +97164,10 @@
<td> <code>HTMLFieldSetElement</code> : <code>HTMLElement</code>
<tr>
+ <td> <code>figcaption</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>figure</code>
<td> <code>HTMLElement</code>
@@ -97356,6 +97376,10 @@
<td> <code>HTMLElement</code>
<tr>
+ <td> <code>summary</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>sup</code>
<td> <code>HTMLElement</code>
_______________________________________________
Commit-Watchers mailing list
Commit-Watchers@lists.whatwg.org
http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic