JUMP START HTML5 (2014)

Chapter 3 Basics: Structuring Documents

HTML5 adds several elements that provide a way to break a single document into multiple chunks of content—content that may be either related or independent. These elements add semantic richness to our markup, and make it easier to repurpose our documents across media and devices.

We’ll take a look at these elements and how they interact using a fictitious top story from a fictitious news web site: The HTML5 News-Press, as shown in Figure 3.1.

The HTML5 News-Press

Figure 3.1. The HTML5 News-Press

Our news story page begins with a masthead and main navigation bar. In previous versions of HTML, we might have marked that up like so:

<h1>HTML5 <i>News-Press</i></h1>

<li><a href="#">World</a></li>

<li><a href="#">National</a></li>

<li><a href="#">Metro area</a></li>

<li><a href="#">Sports</a></li>

<li><a href="#">Arts & Entertainment</a></li>

</ul>

</div>

Our page ends with a footer element. Again, using HTML 4, our markup might look like this:

<ul>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Terms of Use</a></li>

<li><a href="#">Privacy Policy</a></li>

</ul>

</div>

HTML5, however, adds elements specifically for this purpose: header, nav and footer.

The header element functions as a header for the contents of a document segment. The footer functions as a footer for a document segment. Notice, I said segment and not document or page. Some elements are considered sectioning elements. They split a document into sections or chunks. One of these elements, of course, is the new section element. Other sectioning elements include body, article, aside, are nav as well. Here’s the tricky part: each sectioning element may contain its own header and footer. It’s a bit confusing, but the main point here is that a document may contain multiple header and footer elements.

<h1>HTML5 <i>News-Press</i></h1>

<nav>

<ul>

<li><a href="#">World</a></li>

<li><a href="#">National</a></li>

<li><a href="#">Metro area</a></li>

<li><a href="#">Sports</a></li>

<li><a href="#">Arts & Entertainment</a></li>

</ul>

</nav>

</header>

Here, we’ve wrapped our masthead and navigation in header tags. We’ve also swapped our id="nav" attribute and value for the nav element. Let’s re-write our footer using HTML5’s footer element.

<ul>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Terms of Use</a></li>

<li><a href="#">Privacy Policy</a></li>

</ul>

</footer>

Here we’ve simply swapped <div id="footer"> for <footer>. Our document bones are in place. Let’s add some flesh.

The article Element

As defined by the HTML5 specification, the article element:

"[R]epresents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication."

Magazine articles and blog posts are obvious examples of when an article element would be semantically appropriate. But you could also use it for blog comments. This element is appropriate for any almost content item that could be reused.

We can replace our <div id="article"> start and end tags with article tags.

<h1>Sky fall imminent says young chicken leader</h1>

<i class="employment-status">Staff Writer</i>

</p>

<h2>About Henny Penny</h2>

<dl>

<dt>Occupation</dt>

<dd>President, National Organization of Chickens</dd>

<dt>Education</dt>

<dd>B.A., Chicken Studies, Farmer University</dd>

<dd>J.D., University of Cluckland</dd>

</dl>

<p>

Penny joined the National Organization of Chickens in 2002

↵as a staff lobbyist after short, but effective career in

↵the Farmlandia senate. Penny rose through the

↵organization's ranks, serving as secretary, then vice-

↵president before being elected president by the group's

↵members in 2011.

</p>

<p>

The National Organization of Chickens is an advocacy group

↵focused on environmental justice for chickens.

</p>

</div>

<p>

LONDON -- Henny Penny, young leader of the National

↵Organization of Chickens announced that the sky will fall

↵within the next week. Opponents criticize Penny,

↵suggesting that acorns are the more likely threat.

</p>

<p>

Phasellus viverra faucibus arcu ullamcorper sodales. Curabitur

↵tincidunt est in imperdiet ultrices. Sed dignissim felis a

↵neque dignissim, nec cursus sapien egestas.

</p>

<p class="reporter-contact">You may reach reporter Foxy Loxy

↵via email at foxy.loxy@html5newspress.com</p>

<p class="contributor">Staff writer Turkey Lurkey contributed

↵to this report.</p>

<p class="pubdate">Published:

↵<time>2013-07-11T09:00:00-07:00</time>.</p>

</div>

</article>

The article element is an example of sectioning content, which means it may contain a header and a footer. If we think about it, our <div id="article-meta"> could be considered a footer for our article element. How about we swap our div element tags for footer tags?

<p class="reporter-contact">You may reach reporter Foxy Loxy

↵via email at foxy.loxy@html5newspress.com</p>

<p class="contributor">Staff writer Turkey Lurkey contributed

↵to this report.</p>

<p class="pubdate">Published:

↵<time>2013-07-11T09:00:00-07:00</time>.</p>

</footer>

We are keeping our id attribute intact, however. This makes it easier to distinguish from other footer elements on the page if we add CSS or DOM scripting.

Think of the aside element as the HTML5 equivalent of newspaper or magazine sidebar. It denotes content that's related to the main article, but could stand alone. In our HTML 4 example, we used <div class="sidebar"> to mark up our aside. However, the aside element offers more meaning and context. Let’s change our markup to use the aside element instead.

<aside>

<h2>About Henny Penny</h2>

<dl>

<dt>Occupation</dt>

<dd>President, National Organization of Chickens</dd>

<dt>Education</dt>

<dd>B.A., Chicken Studies, Farmer University</dd>

<dd>J.D., University of Cluckland</dd>

</dl>

<p>

Penny joined the National Organization of Chickens in 2002

↵as a staff lobbyist after short, but effective career in

↵the Farmlandia senate. Penny rose through the

↵organization's ranks, serving as secretary, then vice-

↵president before being elected president by the group's

↵members in 2011.

</p>

<p>

The National Organization of Chickens is an advocacy group

↵focused on environmental justice for chickens.

</p>

</aside>

Putting It Together

Our finished HTML5 document looks like this.

<!DOCTYPE html>

<head>

<title>HTML5 News-Press</title>

</head>

<body>

<h1>HTML5 <i>News-Press</i></h1>

<nav>

<ul>

<li><a href="#">World</a></li>

<li><a href="#">National</a></li>

<li><a href="#">Metro area</a></li>

<li><a href="#">Sports</a></li>

<li><a href="#">Arts & Entertainment</a></li>

</ul>

</nav>

</header>

<h1>Sky fall imminent says young chicken leader</h1>

<i class="employment-status">Staff Writer</i>

</p>

<aside>

<h2>About Henny Penny</h2>

<dl>

<dt>Occupation</dt>

<dd>President, National Organization of Chickens</dd>

<dt>Education</dt>

<dd>B.A., Chicken Studies, Farmer University</dd>

<dd>J.D., University of Cluckland</dd>

</dl>

<p>

Penny joined the National Organization of Chickens in 2002

↵as a staff lobbyist after short, but effective career in

↵the Farmlandia senate. Penny rose through the

↵organization's ranks, serving as secretary, then vice-

↵president before being elected president by the group's

↵members in 2011.

</p>

<p>

The National Organization of Chickens is an advocacy group

↵focused on environmental justice for chickens.

</p>

</aside>

<p>

LONDON -- Henny Penny, young leader of the National

↵Organization of Chickens announced that the sky will fall

↵within the next week. Opponents criticize Penny,

↵suggesting that acorns are the more likely threat.

</p>

<p>

Phasellus viverra faucibus arcu ullamcorper sodales. Curabitur

↵tincidunt est in imperdiet ultrices. Sed dignissim felis a

↵neque dignissim, nec cursus sapien egestas.

</p>

<p class="reporter-contact">You may reach reporter Foxy Loxy

↵via email at foxy.loxy@html5newspress.com</p>

<p class="contributor">Staff writer Turkey Lurkey contributed

↵to this report.</p>

<p class="pubdate">Published:

↵<time>2013-07-11T09:00:00-07:00</time>.</p>

</footer>

</article>

<ul>

<li><a href="#">Contact Us</a></li>

<li><a href=#">Terms of Use</a></li>

<li><a href=#">Privacy Policy</a></li>

</ul>

</footer>

The point of these new elements is to have a standardized way to describe document structures. HTML is, at heart, a language for exchanging and repurposing documents. Using these structural elements means that the same document can be published as a web page and also syndicated for e-book readers without having to sort through a jumble of arbitrary div elements and id attributes.

The section Element

HTML5 also introduces the section element, which is used to define segments of a document that are neither a header, footer, navigation, article, or aside. It’s more specific than our old friend, the div element, but more generic than article.

Let’s use the section element to mark up the HTML5 News-Press home page, shown in Figure 3.2.

HTML5 News-Press home page

Figure 3.2. HTML5 News-Press home page

Here we have three sections of news stories: "Top Stories," "Sports," and "Business." In HTML 4, the div elements is the clear choice to define these sections because it’s our only choice. But in HTML5, we have the somewhat more descriptive section element.

<h1>Top stories</h1>

<ul>

<li><a href="#">Sky fall imminent says young chicken

↵leader</a></li>

<li><a href="#">Wolf blows down homes of sticks, straw</a></li>

<li><a href="#">Children lost after breadcrumb trail goes

↵missing found safe</a></li>

<li><a href="#">Cow jumps over moon, witnesses

↵astounded</a></li>

</ul>

</footer>

</section>

<h1>Sports</h1>

<ul>

<li><a href="#">David beats Goliath in upset</a></li>

<li><a href="#">Goods top Evils 3-2</a></li>

<li><a href="#">Local swimmer qualifies for 2016

↵Olympics</a></li>

<li><a href="#">Woonsocket Little League team reaches

↵semis</a></li>

</ul>

<p><a href="#" class="mlink">More sports</a></p>

</footer>

</section>

<h1>Business</h1>

<ul>

<li><a href="#">BigWidgets, Ltd. expansion to create 3,000

↵jobs</a></li>

<li><a href="#">U.S. dollar, Euro achieve parity</a></li>

<li><a href="#">GiantAirline and Air Humongous to merge</a></li>

<li><a href="#">WorldDomination Banc deemed 'too big to

↵fail'</a></li>

</ul>

<p><a href="#" class="mlink">More business</a></p>

</footer>

</section>

div Versus section

While these new sectioning elements give us better semantics and meaning, they also bring a touch of confusion. One question you may be asking is: "Is it still okay to use the div element?

The short answer is "Yes." After all, div is still a valid HTML5 element. But div has little semantic value. It doesn’t tell us anything about what it contains, so use it for those rare instances when another semantically-relevant tag doesn’t exist. For example, you may find that you need to add an extra element as a "wrapper" to ease styling. Or perhaps you want to group several French-language elements within an English-language document. Enclosing those elements with <div lang="fr"> and </div> is certainly appropriate. It most other cases, it’s better to use section, header,nav, footer, article or aside.

Other Document Elements

New sectioning elements aren’t the only new document-related elements introduced in HTML5. In this chapter, we’ll look at the following elements:

· figure and figcaption for defining figures, charts, and diagrams

· main which explicitly defines the predominant portion of a document’s content

figure and figcaption

If a document was accompanied by a chart or diagram, in HTML 4, we might have used a combination of div and p elements to mark it up as shown below.

<p class="caption">Figure 1: Chocolate has increased in price

↵by 200% since 2008.</p>

</div>

That’s an acceptable way to do it. But what happens when we want to read it on our fancy-pants ereader that displays HTML documents using a book-style layout? Using <div class="chart"> doesn’t tell us much about what this chunk of information is and how it should be displayed.

In this case, we should use the figure element. It gives us a way to mark up charts and captions and make them independent of document flow. How about we modify our markup a bit?

<p class="caption">Figure 1: Chocolate has increased in price

↵by 200% since 2008.</p>

</figure>

Now our e-reader knows this is a chart, and can display it in a suitable way. We’ve kept the class and ID attributes. The former comes in handy for CSS styling ― perhaps we want to display graphs differently than diagrams. The latter makes it easy to link to our figure.

We still have <p class="caption"> though, don’t we? How about we use the figcaption element instead? figcaption serves as a caption or legend for its sibling content. It isn’t required, but if included, figcaption needs to be either the first child or last child of a figure element. Let’s change our markup once more:

<figcaption>Figure 1: Chocolate has increased in price

↵by 200% since 2008.</figcaption>

</figure>

main Element

The main element is one of the newest elements in HTML5. It actually isn’t in the 2011 version of the specification published by the World Wide Web Consortium, but it is a part of the HTML 5.1 specification.

Unsurprisingly, main should be used to clarify the main part of a document or application. By "main part," of a document, we mean content that:

· is unique to the document or application

· doesn’t include elements, such as a global header or footer, that are shared across a site

To date, only Chrome 26+, Firefox 21+, and Opera 15+ support the main element. Support should come to Internet Explorer and Safari in a future release.

What’s the use case for main? Some browsers, such as Safari and Firefox for Android, offer a "reader mode" that strips away headers, footers, and ads. These browsers currently use heuristics—an educated guess—to determine the main content of a document. Using main makes it clear to the browser which segment of the page it should focus on. Browsers can also use the main element as a hook for accessibility features, such the ability to skip navigation.

Let’s take one last look at our news article markup, this time including the main element.

<!DOCTYPE html>

<head>

<title>HTML5 News-Press</title>

</head>

<body>

<h1>HTML5 <i>News-Press</i></h1>

<nav>

<ul>

<li><a href="#">World</a></li>

<li><a href="#">National</a></li>

<li><a href="#">Metro area</a></li>

<li><a href="#">Sports</a></li>

<li><a href="#">Arts & Entertainment</a></li>

</ul>

</nav>

</header>

<main>

<h1>Sky fall imminent says young chicken leader</h1>

<i class="employment-status">Staff Writer</i>

</p>

</header>

<aside>

<h2>About Henny Penny</h2>

<dl>

<dt>Occupation</dt>

<dd>President, National Organization of Chickens</dd>

<dt>Education</dt>

<dd>B.A., Chicken Studies, Farmer University</dd>

<dd>J.D., University of Cluckland</dd>

</dl>

<p>

Penny joined the National Organization of Chickens in 2002

↵as a staff lobbyist after short, but effective career in

↵the Farmlandia senate. Penny rose through the

↵organization's ranks, serving as secretary, then vice-

↵president before being elected president by the group's

↵members in 2011.

</p>

<p>

The National Organization of Chickens is an advocacy group

↵focused on environmental justice for chickens.

</p>

</aside>

<p>

LONDON -- Henny Penny, young leader of the National

↵Organization of Chickens announced that the sky will fall

↵within the next week. Opponents criticize Penny,

↵suggesting that acorns are the more likely threat.

</p>

<p>

Phasellus viverra faucibus arcu ullamcorper sodales.

↵Curabitur tincidunt est in imperdiet ultrices. Sed

↵dignissim felis a neque dignissim, nec cursus sapien

↵egestas.

</p>

</article>

</main>

<ul>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Terms of Use</a></li>

<li><a href="#">Privacy Policy</a></li>

</ul>

</footer>

</div>

</body>

</html>

Now we have a document that's more accessible and easier for browsers of all kinds to consume and display.