ORGANIZING A PAGE - HTML5 - page 98

font - family : Verdana , Geneva , sans - serif ;
font - size : 11px ;
}
aside {
margin - left : 260px ;
}
h1 {
font - family : ”Trebuchet MS” , Arial , Helvetica , sans - serif ;
background - color : #F2F2F2;
color : #A66879;
text - align : center ;
}
figcaption {
color : #A66879;
background - color : #F2F2F2;
}
img {
margin : 5px ;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Figure and Caption Grouping </ title >
</ head >
< body >
< header >
< h1 > Memories of Baja </ h1 >
</ header >
< article >
< figure > < img src = ”PuntaBufeo250.png” alt = ”Punta Bufeo” >< br >
< figcaption >& nbsp ; Landing Strip on the Beach in Punta Bufeo & nbsp ;</ figcaption >
</ figure >
< section >
< p > Trips to the best places in Baja are accessible either by reinforced off - road
vehicles or small airplanes . The beaches are pristine , uncrowded , and uncluttered .
Fishing is most rewarding when the fish are cooked up in fish tacos—a delicacy not
to be missed . The < i > Sea of Cortez </ i > ( known also as the < i > Gulf of Baja </ i > and
< i > Vermillion Sea </ i >) is a bright and clear blue . Of course the beaches are
uncrowded and free of debris left by others .</ p >
</ section >
</ article >
</ body >
</ html >

102

You can begin to think about elements and their descendants. In this case, the figcaption
element is a descendant of the figure element. Figure 5-9 shows the caption under the
picture, both within the <figure> container.

As you can see clearly in Figure 5-9, the <figcaption> is dif erently styled, even though it's
a descendant of the <figure> container. However, you can't assume that a figcaption
element will be correctly positioned as in Figure 5-9 just because it's a child of the figure
element that it captions.