HTML5 (part-two)

When to use the new HTML5 structural elements:

We’ve used these elements to mark up our page, and styled them,
and although the use of each might seem to be self-evident from
the names, it’s time to study them in a little more detail.

<header>

In our example above, as on most sites, the header will be the
fi rst element on a page, and contains the title of the site, logos,
links back to the home page, etc. The specifi cation says:
“The header element represents a group of introductory or navigational
aids ... Note: A header element is intended to usually
contain the section’s heading (an h1–h6 element or an hgroup
element), but this is not required. The header element can also
be used to wrap a section’s table of contents, a search form, or
any relevant logos.”
Let’s dissect this. The fi rst thing to note is that a header element
is not required; in our example above, it’s superfl uous as it surrounds
just the <h1>. Its value is that it groups “introductory or
navigational” elements, so here’s a more realistic example:
<header>
<a href=”/”><img src=logo.png alt=”home”></a>
<h1>My interesting blog</h1>
</header>
Many websites have a title and a tagline or subtitle. To mask the
subtitle from the outlining algorithm (so making the main heading
and subtitle into one logical unit; see Chapter 2 for more discussion),
the main heading and subtitle can be grouped in the
new <hgroup> element:
<header>
<a href=”/”><img src=logo.png alt=”home”></a>
<hgroup>
<h1>My interesting blog</h1>
<h2>Tedium, dullness and monotony</h2>
</hgroup>
</header>
The header can also contain navigation. This can be very useful
for site-wide navigation, especially on template-driven sites

INTRODUCING HTML5

where the whole of the <header> element could come from a
template fi le. So, for example, the horizontal site-wide navigation
on www.thaicookery.co.uk could be coded as in Figure 1.6.
<header>
<hgroup>
<h1>Thai cookery school></h1>
<h2>Learn authentic Thai cookery in your own home</h2>
</hgroup>
<nav>
<ul>
<li>Home</li>
<li><a href=”courses.html”>Cookery courses</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
</header>
Of course, it’s not required that the <nav> be in the <header>.
The Thai cookery example could just as easily be marked up
with the main <nav> outside the <header>:
<header>
<hgroup>
<h1>Thai cookery school></h1>
<h2>Learn authentic Thai cookery in your own home</h2>
</hgroup>
</header>
<nav>
<ul>
<li>Home</li>
<li><a href=”courses.html”>Cookery courses</a></li>

<nav>

The <nav> element is designed to mark up navigation. Navigation
is defi ned as being links around a page (so, for example,
a table of contents at the top of an article that links to anchor
points on the same page) or within a site. But not every collection
of links is <nav>; a list of sponsored links isn’t <nav>. Neither
is a page of search results, as that is the main content of the
page.
As with <header>s and <footer>s (and all of the new elements),
you’re not restricted to one <nav> per page. You might very well
have site-wide <nav> in a header, a <nav> which is a table of contents
for the current article, and a <nav> below that which links
to other related articles on your site.
FIGURE 1.7 Typical page with
site-wide navigation out of the
main header area.

<footer>

The <footer> element is defi ned in the spec as representing “a
footer for its nearest ancestor sectioning content or sectioning
root element.” (“Sectioning content” includes article, aside, nav,
section, and “sectioning root elements” are blockquote, body,
details, fi eldset, fi gure, td).
Note that, as with the header element, there can be more than
one footer on a page; we’ll revisit that in Chapter 2. For now,
we’re just having one footer on the page that is a child of the
body element. As the spec says, “When the nearest ancestor
sectioning content or sectioning root element is the body element,
then it applies to the whole page.”
The spec continues “A footer typically contains information
about its section such as who wrote it, links to related documents,
copyright data, and the like.”
Our footer holds copyright data, which we’re wrapping in a
<small> element, too. <small> has been redefi ned in HTML5;

<article>

The main content of this blog’s home page contains a few blog
posts. We wrap each one up in an <article> element. <article>
is specifi ed thus: “The article element represents a component
of a page that consists of a self-contained composition in a
document, page, application, or site and that is intended to be
independently distributable or reusable, e.g., in syndication.”
A blog post, a tutorial, a news story, comic strip, or a video with
its transcript all fi t perfectly into this defi nition. Note that, as with
<nav>, the heading goes inside the element, so
<h1>My article</h1>
<article>
<p>Blah blah</p>
</article>
is incorrect; it should be
<article>
<h1>My article</h1>
<p>Blah blah</p>
</article>
There are many more interesting facets to <article> which
(you’ve guessed it) we’ll look at in the next chapter.

Summary

In this chapter, we’ve taken our first look at HTML5, and its
DOCTYPE. We’ve seen its forgiving syntax rules such as
optional uppercase/lowercase, quoting and attribute minimisation,
omitting implied elements like head/body, omitting
standard stuff like type=”text/javascript” and ”text/css” on
the <script>, and <style> tags. We’ve structured the main landmarks
of a web page using <header>, <footer>, <nav>, <aside>,
and <article>, providing user agents with more semantics than
the meaningless generic <div> element that was our only option
in HTML 4 and styled the new elements with the magic of CSS.
Not bad for one chapter, eh?