HTML and CSS Reference
In-Depth Information
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 fi rst. As you saw in
Chapter 1, you can replace the outer
<div class=”post”>
with
<article>
, but you can still go further. 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 is “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 “typically con-
tains 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
.
<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.
