ORGANIZING A PAGE - HTML5 - page 93

As you can see in the listing, the div element allowed two dif erent background styles in the
section containers without having to add classes to the <section> tag. Overall, though,
keep in mind that both <p> and <div> are more generalized elements, and at all times, you
should use elements that are the most descriptive of your object on the Web page.

Besides grouping and styling using the <div> tag, lists also serve to outline data. HTML5 still
uses the <ul> tags to group baby names for boys and girls. However, a subtle yet important
dif erence is built into ordered ( <ol>) and unordered lists ( <ul> ).

h e use of unordered or ordered lists depends on the context. For example, in the 2010
Fédération Internationale de Football Association (FIFA) World Cup in South Africa, four of
the teams competing for the championship were Germany, Netherlands, Spain, and Uruguay.
If you were listing them at the beginning of the competition, you might use an unordered list.
At the end of the competition, you may want to use an ordered list to show the i nal results.
h e following Web page ( ol_ul.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ) rel ects the dif erent groupings depending on the context and the mean-
ing that accompanies the context.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/*20268C,0C080C,2F8C2B,F27507,F20505 */
body {
background - color : #2F8C2B;
color : #0C080C;
font - family : Verdana , Geneva , sans - serif ;
}
h2 {
background - color : #F27507;
color : #20268C;
font - family : ”Comic Sans MS” , cursive ;
}
h3 {
font - family : ”Comic Sans MS” , cursive ;
}
ol {
background - color : #F27507;
}
ul {
background - color : #F20505;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Ordered and Unordered </ title >
</ head >
< body >
< h2 >& nbsp ; World Cup 2010 </ h2 >
< h3 > Beginning </ h3 >

97