HTML5 Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/4682

SVNBugCommentTime (UTC)
46828726Move <figure> to the grouping section.2010-02-06 10:50
Index: source
===================================================================
--- source	(revision 4681)
+++ source	(revision 4682)
@@ -16596,8 +16596,163 @@
   </div>
 
 
+  <h4>The <dfn><code>figure</code></dfn> element</h4>
 
+  <dl class="element">
+   <dt>Categories</dt>
+   <dd><span>Flow content</span>.</dd>
+   <dd><span>Sectioning root</span>.</dd>
+   <dt>Contexts in which this element may be used:</dt>
+   <dd>Where <span>flow content</span> is expected.</dd>
+   <dt>Content model:</dt>
+   <dd>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 <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
+  self-contained and is typically referenced as a single unit from the
+  main flow of the document.</p>
+
+  <p>The element can thus be used to annotate illustrations, diagrams,
+  photos, code listings, etc, that are referred to from the main
+  content of the document, but that could, without affecting the flow
+  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>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>figcaption</code> element, then there is no caption.</p>
+
+  <div class="example">
+
+   <p>This example shows the <code>figure</code> element to mark up a
+   code listing.</p>
+
+   <pre>&lt;p>In &lt;a href="#l4">listing 4&lt;/a> we see the primary core interface
+API declaration.&lt;/p>
+&lt;figure id="l4">
+ &lt;figcaption>Listing 4. The primary core interface API declaration.&lt;/figcaption>
+ &lt;pre>&lt;code>interface PrimaryCore {
+ boolean verifyDataLine();
+ void sendData(in sequence&amp;lt;byte> data);
+ void initSelfDestruct();
+}&lt;/code>&lt;/pre>
+&lt;/figure>
+&lt;p>The API is designed to use UTF-8.&lt;/p></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>Here we see a <code>figure</code> element to mark up a
+   photo.</p>
+
+   <pre>&lt;figure>
+ &lt;img src="bubbles-work.jpeg"
+      alt="Bubbles, sitting in his office chair, works on his
+           latest project intently.">
+ &lt;figcaption>Bubbles at work&lt;/figcaption>
+&lt;/figure></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>In this example, we see an image that is <em>not</em>
+   a figure, as well as an image and a video that are.</p>
+
+   <pre>&lt;h2>Malinko's comics&lt;/h2>
+
+&lt;p>This case centered on some sort of "intellectual property"
+infringement related to a comic (see Exhibit A). The suit started
+after a trailer ending with these words:
+
+&lt;blockquote>
+ &lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
+&lt;/blockquote>
+
+&lt;p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
+preemptive strike using snowballs. A complete copy of the trailer is
+included with Exhibit B.
+
+&lt;figure>
+ &lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
+ &lt;figcaption>Exhibit A. The alleged &lt;cite>rough copy&lt;/cite> comic.&lt;/figcaption>
+&lt;/figure>
+
+&lt;figure>
+ &lt;video src="ex-b.mov">&lt;/video>
+ &lt;figcaption>Exhibit B. The &lt;cite>Rough Copy&lt;/cite> trailer.&lt;/figcaption>
+&lt;/figure>
+
+&lt;p>The case was resolved out of court.</pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>Here, a part of a poem is marked up using
+   <code>figure</code>.</p>
+
+   <pre>&lt;figure>
+ &lt;p>'Twas brillig, and the slithy toves&lt;br>
+ Did gyre and gimble in the wabe;&lt;br>
+ All mimsy were the borogoves,&lt;br>
+ And the mome raths outgrabe.&lt;/p>
+ &lt;figcaption>&lt;cite>Jabberwocky&lt;/cite> (first verse). Lewis Carroll, 1832-98&lt;/figcaption>
+&lt;/figure></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>In this example, which could be part of a much larger work
+   discussing a castle, the figure has three images in it.</p>
+
+   <pre>&lt;figure>
+ &lt;img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
+      alt="The castle has one tower, and a tall wall around it.">
+ &lt;img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
+      alt="The castle now has two towers and two walls.">
+ &lt;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.">
+ &lt;figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/figcaption>
+&lt;/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>div</code></dfn> element</h4>
 
   <dl class="element">
@@ -19165,162 +19320,7 @@
 
   <h3>Embedded content</h3>
 
-  <h4>The <dfn><code>figure</code></dfn> element</h4>
 
-  <dl class="element">
-   <dt>Categories</dt>
-   <dd><span>Flow content</span>.</dd>
-   <dd><span>Sectioning root</span>.</dd>
-   <dt>Contexts in which this element may be used:</dt>
-   <dd>Where <span>flow content</span> is expected.</dd>
-   <dt>Content model:</dt>
-   <dd>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 <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
-  self-contained and is typically referenced as a single unit from the
-  main flow of the document.</p>
-
-  <p>The element can thus be used to annotate illustrations, diagrams,
-  photos, code listings, etc, that are referred to from the main
-  content of the document, but that could, without affecting the flow
-  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>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>figcaption</code> element, then there is no caption.</p>
-
-  <div class="example">
-
-   <p>This example shows the <code>figure</code> element to mark up a
-   code listing.</p>
-
-   <pre>&lt;p>In &lt;a href="#l4">listing 4&lt;/a> we see the primary core interface
-API declaration.&lt;/p>
-&lt;figure id="l4">
- &lt;figcaption>Listing 4. The primary core interface API declaration.&lt;/figcaption>
- &lt;pre>&lt;code>interface PrimaryCore {
- boolean verifyDataLine();
- void sendData(in sequence&amp;lt;byte> data);
- void initSelfDestruct();
-}&lt;/code>&lt;/pre>
-&lt;/figure>
-&lt;p>The API is designed to use UTF-8.&lt;/p></pre>
-
-  </div>
-
-  <div class="example">
-
-   <p>Here we see a <code>figure</code> element to mark up a
-   photo.</p>
-
-   <pre>&lt;figure>
- &lt;img src="bubbles-work.jpeg"
-      alt="Bubbles, sitting in his office chair, works on his
-           latest project intently.">
- &lt;figcaption>Bubbles at work&lt;/figcaption>
-&lt;/figure></pre>
-
-  </div>
-
-  <div class="example">
-
-   <p>In this example, we see an image that is <em>not</em>
-   a figure, as well as an image and a video that are.</p>
-
-   <pre>&lt;h2>Malinko's comics&lt;/h2>
-
-&lt;p>This case centered on some sort of "intellectual property"
-infringement related to a comic (see Exhibit A). The suit started
-after a trailer ending with these words:
-
-&lt;blockquote>
- &lt;img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
-&lt;/blockquote>
-
-&lt;p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
-preemptive strike using snowballs. A complete copy of the trailer is
-included with Exhibit B.
-
-&lt;figure>
- &lt;img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
- &lt;figcaption>Exhibit A. The alleged &lt;cite>rough copy&lt;/cite> comic.&lt;/figcaption>
-&lt;/figure>
-
-&lt;figure>
- &lt;video src="ex-b.mov">&lt;/video>
- &lt;figcaption>Exhibit B. The &lt;cite>Rough Copy&lt;/cite> trailer.&lt;/figcaption>
-&lt;/figure>
-
-&lt;p>The case was resolved out of court.</pre>
-
-  </div>
-
-  <div class="example">
-
-   <p>Here, a part of a poem is marked up using
-   <code>figure</code>.</p>
-
-   <pre>&lt;figure>
- &lt;p>'Twas brillig, and the slithy toves&lt;br>
- Did gyre and gimble in the wabe;&lt;br>
- All mimsy were the borogoves,&lt;br>
- And the mome raths outgrabe.&lt;/p>
- &lt;figcaption>&lt;cite>Jabberwocky&lt;/cite> (first verse). Lewis Carroll, 1832-98&lt;/figcaption>
-&lt;/figure></pre>
-
-  </div>
-
-  <div class="example">
-
-   <p>In this example, which could be part of a much larger work
-   discussing a castle, the figure has three images in it.</p>
-
-   <pre>&lt;figure>
- &lt;img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
-      alt="The castle has one tower, and a tall wall around it.">
- &lt;img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
-      alt="The castle now has two towers and two walls.">
- &lt;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.">
- &lt;figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.&lt;/figcaption>
-&lt;/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">

|