HTML and CSS Reference
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.
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 */
background - color : #D9C3B0;
color : #732D3F;