Constructing Content - HTML5 with CSS3 - page 93

Figure 4-9. A lightly styled figure and its caption
A figure element can contain any flow content, and so might actually consist of several elements that act
together as one figure with a single figcaption . To take it a step further, a figure could even hold
several nested figure elements, each with its own caption, such as the collection of images you see in
Listing 4-19. Any one figure element can still only have one child figcaption . All of the nested figure
elements together act as one figure, described by a single figcaption . Here the inner captions come
after the content they describe, but the group caption appears before its figure content.
Listing 4-19. Multiple figures, each with its own caption, collected as a single figure with another figcaption to
describe the group
<figure class="product-examples">
<figcaption>A few of our most popular domino mask designs</figcaption>
<figure class="product">
<img src="images/masks/mdts40-th.jpg" alt="" width="192" height="170">
<figcaption>Model MDTS40<br>“The Colt”</figcaption>
</figure>
<figure class="product">
<img src="images/masks/mdmv77-th.jpg" alt="" width="192" height="170">
<figcaption>Model MDMV77<br>“The Danvers”</figcaption>
</figure>
<figure class="product">
<img src="images/masks/mddc59-th.jpg" alt="" width="192" height="170">
<figcaption>Model MDDC59<br>“The Jordan”</figcaption>
</figure>
</figure>
With a bit of added styling, that markup can look something like Figure 4-10.