HTML and CSS Reference
In-Depth Information
The figcaption element, also introduced in HTML5, represents a caption or legend for the other contents
of its parent figure element. It's a flow element and can contain any other flow elements. It can only
appear as a child of the figure element, and figcaption must be either the first child or last child of its
parent figure . A figure element may only contain a single-child figcaption element.
Listing 4-18 shows a figure element, this time using a code listing instead of an image, like you might see
in an online CSS tutorial. We've given it a descriptive figcaption , in this case adding the caption before
the rest of the figure content.
Listing 4-18. A code figure with a caption
These CSS rules will give figures and captions a bit of style
figure {
padding: 10px 15px;
border: 3px double #aaa;
figcaption {
font-style: italic;
text-align: center;
padding-bottom: .5em;
border-bottom: 1px solid #aaa;
margin-bottom: 1.5em;
The figcaption element displays as block-level by default, but has no other default styling so it's ripe for
some sprucing up. Figure 4-9 shows the code figure from Listing 4-18, styled with the CSS from that same
example (aren't we clever).
Search WWH ::

Custom Search