One of the major changes in HTML5 compared with older HTML versions is in the sections. Prior to HTML5, you could pretty well think of sections in terms of the body element and some <h> tags. In HTML5, a page can be envisioned in terms of a number of sections with subsections. A larger context in a Web page is an article, and just like an article in a magazine, you can fi nd diff erent sections that constitute the building blocks of the article. Figure 5-4 provides an overview of the sections in an HTML5 page.
Figure 5-4: Some sections that make up a page.
In looking at Figure 5-4, you can see diff erent blocks of information, but the tags used generally don’t have any inherent capacity to structure the information visually. Th e <h> tags, which are section elements, certainly confi gure text to diff erent sizes. However, the other section tags are as much for helping to organize a page as they are for specifying the visual display of the page.
Th e section elements include the following: Body Section Nav Article Aside H1 . . . H6 Hgroup
92
Header
Footer
Address
Th e body element is the sectioning root just as the html element is the page root. Th rough- out the previous chapters, you’ve seen several of the section elements, so you’re familiar with them. However, a script helps to see how they’re used in conjunction and consider their uses (ArticleStructure.html in this chapter’s folder at www.wiley.com/go/
smashinghtml5).
<!DOCTYPE HTML> <html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Sections</title>
</head> <body> <article>
<header>
<h1>Pilots and Planes</h1>
<p><q>I never left one up there. </q><i>Ace Davis</i></p>
</header>
<nav><a href=”#”> Safety</a> | <a href=”#”>Check Lists</a> | <a href=”#”>Landings</a></nav>
<section>
<h2>Flying Stories by Real Pilots</h2>
<h3>...and other cures for insomnia.</h3>
<section>
<h4>Short Final</h4>
<p>As we were on short final, control cleared the Maule for immediate takeoff,
which it did in about 15 feet of runway at an airspeed of 20 mph. It filled my windshield as I approached stall speed. After realizing its mistake, the tower instructed the Maule to loop, and we were able to land without incident.</p>
</section>
<section>
<h4>Thermal on Takeoff</h4>
<p>Taking off from Gila Bend, Arizona, with the ambient temperature of 130 F,
we encountered a strong thermal at the end of the runway, which took our Cessna 177b to 15,000 feet in 12 seconds flat, at which time we leveled off and proceeded to New Mexico via the jet stream, setting a new speed record.</p>
</section>
</section>
<aside>
<h2>Truthful Pilot Found!</h2>
<p>Emily Rudders, a pilot in Moose Bite, Vermont, was recently found to be the only truthful pilot in existence. When asked to relate her most exciting flying adventure, Emily replied, <q>I ain’t never flew no airplane. I jus’ shoot at ‘em when they fly over and bother the moose.</q></p>
</aside>
<footer>
93
Contact us at:<a href=”www.aopa.org”>AOPA</a>
</address>
</footer> </article> </body> </html>
Th e purpose of sections is to divide the page into coherent parts. Th ey’re an organizational set of elements, and while they can be used for formatting, that isn’t their main purpose. For adding formatting to a paragraph or group of paragraphs, the W3C Standards encourage the use of the <div> tag.
Figure 5-5 shows what the page looks like. Although it isn’t an attractive design, it is a functional one. Th e article is about pilots and fl ying. Th e article’s header announces the topic (pilots and planes) and provides a quote from a pilot using a <q> tag. Aft er the header, the fi rst section is about fl ying stories. Nested within the fi rst section are two other <section>
tags that separate out the two stories.
A somewhat related section about the veracity of pilot stories is placed in a separate aside
element container. In Figure 5-4, you may have noticed that the aside was placed in a separate column, but in and of itself, an aside element is a reference to the sense of the page. It is not a formatting element as such.
94
Finally, at the bottom of the article is a footer. Footer elements can go anywhere, including inside individual section and aside element containers. Footers act as a closing organiza- tional element for the section elements. Within the footer is an address element with a link to a URL related to the article.
In looking at the page in Figure 5-5 and the code, you can see the sense of the page described in the section tags. As noted, they’re really not for formatting but for organizing the sense of the page.