HTML and CSS Reference
In-Depth Information
considered a child of the
figure
when the
figcaption
is nested inside of a
figure
element. However, that doesn't mean that they'll appear on the page together. In fact, aligning
a i gure with its caption can be tricky.
101
Figure 5-8: Horizontal rules can fragment meaning.
In more sophisticated CSS3 formatting, the i gure and its caption can be treated as an object
with a parent-child relationship. Just because
figure
and
figcaption
are part of HTML5's
grouping elements that doesn't mean they're formatted on the page together; instead, it means
that they can be referenced as a single l ow in the main content of the page. In the meantime,
you'll have to carefully work with the two elements together, as shown in the following
HTML5 program (
Figure_n_caption.html
in this chapter's folder at
www.wiley.
com/go/smashinghtml5
) where the caption references a stylized image.
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
style type
=
”text/css”
>
/* 732D3F,A66879,D9C3B0,260101,F2F2F2 */
body
{
background
-
color
:
#D9C3B0;
color
:
#732D3F;
