Text - Introducing HTML5 - page 25

HTML 4 gives us generic structures to mark up content. <div> ,
for example, is just a generic box that tells the browser, “Here's
some stuff, it all belongs together,” but it doesn't mean anything;
there's no semantic value beyond “these belong together.”
Where possible, we'll replace generic boxes with new HTML5
elements, while still using <div> where there isn't an appropriate
element, just as we did in HTML 4.
Let's concentrate on an individual article first. As you saw in
Chapter 1, you can replace the outer <div class=”post”> with
<article> , but you can go further still. The HTML5 <header> and
<footer> elements can be used multiple times on a page, each
time referring to the section it's in.
The heading and the time of posting are introductory matter and
thus the job for <header> , right? Similarly, the metadata about the
post that is currently in a paragraph with class=”postmetadata” is
better marked up in HTML5 as a <footer> , which the spec says
“typically contains information about its section, such as who
wrote it, links to related documents, copyright data, and the like.”
Diagrammatically, the revised structure is shown in Figure 2.2 .

NoTE All quotes describ-
ing the elements, unless
otherwise noted, are from the
HTML5 specification as it read
at the time of writing.

<article>

FIguRE 2.2 A single blog
article using new HTML5
structures. <header>

heading
<time> (just date)

Article text

<footer> (metadata)

<article>
<header>
<h2>Memoirs of a Parisian lion-tamer</h2>
<time datetime=2010-01-24>January 24th,
¬ 2010</time>
</header>
<p>Claude Bottom's poignant autobiography is this
¬ summer's must-read.</p>
<footer>
Posted in <a href=”/?cat=3” >Books category</a>.
¬ <a href=”/?p=34#respond”>No Comments</a>
</footer>
</article>
Let's look at this in more detail.