HTML and CSS Reference
In-Depth Information
figcaption
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
<figure>
<figcaption>
These CSS rules will give figures and captions a bit of style
</figcaption>
<pre><code>
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;
}
</code></pre>
</figure>
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).
