HTML and CSS Reference
In-Depth Information
Estelle Weyl has a good 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.”
NoTE
All of your which-
structural-element-should-I-
choose conundrums are easily
solved with “The Amazing
HTML5 Doctor Easily Confused
HTML5 Element Flowchart
of Enlightenment!” at
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
(
www.guardian.co.uk
)
. Let's see how this could
be represented in HTML5.
FIguRE 2.12
The
Guardian
homepage.