Text - Introducing HTML5 - page 42

<p>blah blah</p>
</article>
<article>
<h2>Eat more Swedes (the vegetables, not the people)</h2>
<p>blah blah</p>
</article>
</section>
Why didn't you mark the two <section> s up as <article> s instead?
Because, in this example, each <section> is a collection of inde-
pendent entities, each of which could be syndicated—but you
wouldn't ordinarily syndicate the collection as an individual entity.
Note that a <section> doesn't need to contain lots of <article> s;
it could be a collection of paragraphs explaining your creative
commons licensing, an author bio, or a copyright notice. In our
example, each article could contain sub-articles or sections, as
explained earlier—or both.
Estelle Weyl has a nice analogy at www.standardista.com/
html5-section-v-article : “Think of a newspaper. The paper
comes in sections. You have the sports section, real estate sec-
tion, maybe home & garden section, etc. Each of those sections,
in turn, has articles in it. And, some of those articles are divided
into sections themselves.
In other words, you can have parent <section> s with nested
<article> s that in turn have one or many <section> s. Not all
pages documents need these, but it is perfectly acceptable and
correct to nest this way.”
Case study: www.guardian.co.uk
Let's continue with the newspaper theme and look at a real
site and work out where you would use the new structures.
Figure 2.12 shows a screenshot from my favourite newspaper,
“The Guardian” at www.guardian.co.uk . Let's see how this could
be represented in HTML5.
Note that the following is how I would mark up this page; you
might choose different structures, and that's OK. There's not
necessarily “one true way” of doing this; it depends in part on