[css-exclusions-1] figure/figcaption and widths (w3c#5980)

Author: nschonni

css-exclusions-1/Overview.bs

@@ -202,22 +202,22 @@ The 'wrap-flow' property</h4>
   to its containing block's <a>wrapping context</a>, causing the containing
   block's descendants to wrap around its <a>exclusion area</a>.
 
-  <div class="figure">
-    <img alt="LTR text wrapping on left edge, RTL text wrapping on right edge, and vertical text wrapping on top edge." src="images/exclusion-writing-modes.png" width="70%" />
-    <p class="caption">Exclusion with 'wrap-flow': ''start'' interacting with various
-    writing modes.</p>
-  </div>
+  <figure>
+    <img alt="LTR text wrapping on left edge, RTL text wrapping on right edge, and vertical text wrapping on top edge." src="images/exclusion-writing-modes.png" style="width: 70%" />
+    <figcaption>Exclusion with 'wrap-flow': ''start'' interacting with various
+    writing modes.</figcaption>
+  </figure>
 
   Determining the relevant edges of the exclusion depends on the
   <a href="https://www.w3.org/TR/css3-writing-modes/#text-flow">writing mode</a> [[!CSS3-WRITING-MODES]] of the content wrapping around the 'exclusion area'.
 
   An <a>exclusion element</a> establishes a new <a href="">block formatting
   context</a> (see [[!CSS21]]) for its content.
 
-  <div class="figure">
-      <img alt="General illustration showing how exclusions combine" src="images/exclusions-illustration.png" width="70%" />
-      <p class="caption">Combining exclusions</p>
-  </div>
+  <figure>
+      <img alt="General illustration showing how exclusions combine" src="images/exclusions-illustration.png" style="width: 70%" />
+      <figcaption>Combining exclusions</figcaption>
+  </figure>
 
   The above figure illustrates how exclusions are combined. The outermost box
   represents an element's content box. The A, B, C and D darker gray boxes
@@ -677,15 +677,15 @@ Processing Model Example</h4>
     <li>the layout tree of generated block boxes
   </ul>
 
-  <div class="figure">
+  <figure>
     <img src="images/processing-model-example-dom.svg" width="200" alt="DOM tree nodes"/>
-    <p class="caption">DOM tree
-  </div>
+    <figcaption>DOM tree</figcaption>
+  </figure>
 
-  <div class="figure">
+  <figure>
     <img src="images/processing-model-example-layout-tree.svg" width="350" alt="Layout tree boxes"/>
-    <p class="caption">Layout tree of generated block boxes
-  </div>
+    <figcaption>Layout tree of generated block boxes</figcaption>
+  </figure>
 
 <h5 id="example-step-1">
 Step 1: resolve exclusion boxes belonging to each <a>wrapping context</a></h5>