ORGANIZING A PAGE - HTML5 - page 91

< h2 > Getting a Parking Place </ h2 >
</ p >
</ div >

h at code works perfectly well in HTML5, but it's better organized using the most specii c
element for the job. A better code would look like the following:

< header >
< h1 > All About Important Stuff </ h1 >
</ header >
< section >
< h2 > Finding True Love </ h2 >
< h2 > Choosing the Right Career </ h2 >
< h2 > Getting a Parking Place </ h2 >
</ section >

On your Web page, they look the same, but with HTML5 you'll i nd your pages more sensible
using the new section elements.

So the question is, “Where can the p and div elements be used?” Actually, you don't want to
rely on either very much. However, when you want to add a style element or some other
attribute in the middle of an <article> or <section> , they can be handy. Consider
the following ( UseDiv.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ).

95

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
body {
font - family : ”Comic Sans MS” , cursive ;
color : #0C6;
background - color : #FFC;
}
. girls {
background - color : pink ;
}
. boys {
background - color : powderblue ;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Baby Names </ title >
</ head >
< body >
< article >
< header >
< h1 > Baby Names </ h1 >
</ header >
< section >