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 find different sections
that constitute the building blocks of the article. Figure 1 provides
an overview of the sections in an HTML5 page.
Figure 1: Some sections that make up a page.
In looking at Figure 1, you can see different
blocks of information, but the tags used generally don’t have any
inherent capacity to structure the information visually. The <h>
tags, which are section elements, certainly configure text to different
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.
The section elements include the following:
• Body
• Section
• Nav
• Article
• Aside
• H1 . . . H6
• Hgroup
• Header
• Footer
• Address
The body element is the sectioning root just as the html
element is the page root.
<!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>
<address>
Contact us at:<a href=”www.aopa.org”>AOPA</a>
</address>
</footer>
</article>
</body>
</html>
The purpose of sections is to divide the page into
coherent parts. They’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. The article is
about pilots and flying. The article’s header announces the topic
(pilots and planes) and provides a quote from a pilot using a <q> tag. After the header, the first section is about flying stories. Nested within the first 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 2, 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.
Figure 2: A page organized with section elements.
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 organizational element for the section elements. Within the footer is an address element with a link to a URL related to the article.
