HTML and CSS Reference
Listing 4-17 shows a minimal figure element containing a single image without a caption. We'll cover the
img element in detail in Chapter 5.
Listing 4-17. A figure element containing a single image with no caption
<p>A domino mask covers the area around and between the eyes, and may also
cover the eyebrows and part or all of the nose, as shown below.</p>
<img src="images/domino-mask.jpg" alt="A hero modeling a black and red domino mask">
In this case, the figure element might not seem necessary because it doesn't add a great deal of
structural value, but it does imply the figurative nature of the image where an inline image alone would lack
that semantic context. The figure element really comes into its own when you combine it with the
The figure element is flow content and can contain any other flow content. It displays as block-level by
default, and typically has indented margins the same as blockquote (see Figure 4-8), but you can always
override those margins in your own style sheet. Also like blockquote , the figure element is a sectioning
root so any headings that appear within it won't affect the generated outline of the parent section.
Figure 4-8. The figure element is indented on each side by default
The figure element doesn't require any attributes.
There aren't any optional attributes for the figure element but the usual global attributes still apply.