HTML and CSS Reference
In-Depth Information
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>
<figure>
<img src="images/domino-mask.jpg" alt="A hero modeling a black and red domino mask">
</figure>
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
figcaption
element.
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
Required Attributes
The
figure
element doesn't require any attributes.
Optional Attributes
There aren't any optional attributes for the
figure
element but the usual global attributes still apply.
