You may be thinking that you can get a page up and running without the hassle of the section tags. That’s true. However, under the hood of your mild-mannered Web page is a rumbling engine that can reference different parts of your page. Known as the Document Object Model (DOM), the different groupings you have set up using the section elements can be addressed as different objects and children of objects in a well-ordered stream of data coursing over the Internet. By paying attention to the organizational model used in HTML5, your Web page will be happy, the Internet will be happy, and the galaxy will be happy.
95
<h2>Getting a Parking Place</h2>
</p> </div>
Th at code works perfectly well in HTML5, but it’s better organized using the most specifi 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 fi 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).
<!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>
96
<div class=”girls”>
<h2> Girls</h2> <ul> <li>Olivia</li> <li>Tess</li> <li>Emily</li> </ul> </div> </section> <section>
<div class=”boys”>
<h2> Boys</h2> <ul> <li>Jacob</li> <li>Ricky</li> <li>John</li> </ul> </div> </section> </body> </html>
Figure 5-6 shows the output, but the important point is that the <div> tag was employed only to provide the background colors for two diff erent <section> elements.
97 As you can see in the listing, the div element allowed two diff 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 diff erence is built into ordered (<ol>) and unordered lists (<ul>).
Th 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 fi nal results. Th e following Web page (ol_ul.html in this chapter’s folder at www.wiley.com/go/ smashinghtml5) refl ects the diff 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> World Cup 2010</h2> <h3>Beginning</h3>
98 <ul> <li>Spain</li> <li>Netherlands</li> <li>Germany</li> <li>Uruguay</li> </ul> <h3>End</h3> <ol> <li>Spain</li> <li>Netherlands</li> <li>Germany</li> <li>Uruguay</li> </ol> </body> </html>
As you can see in Figure 5-7, the meaning of the group at the beginning of the World Cup has no hierarchy — the list is just four teams at the World Cup. However, at the end, the order means everything, so the ordered list element is more appropriate.
Figure 5-7: Ordered and unordered lists convey different meanings.
You may also note that the two diff erent kinds of lists have diff erent background colors added with CSS3. So when using grouping elements, you might also want to further group the content using color, as shown in both Figures 5-6 and 5-7.
99