HTML and CSS Reference
In-Depth Information
If it had been inside the final section element
<article>
...
<section>
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their “I'm a friend
¬ of Dorothy!” t-shirt when representing the club</p>
<p><strong>Vital caveat about the information above:
¬ does not apply on the first Thursday of the month
¬ </strong></p>
</section>
</article>
it would unambiguously refer to that section alone, as illustrated
in
Figure 2.11
.
FIguRE 2.11
The
<section>
element removes any
ambiguity.
article
section (Yellow Brick Road)
section (Fan Club uniforms)
<strong>Vital caveat</strong>
It would not have been correct to divide up this article with nested
article elements, as they are not independent discrete entities.
OK. So you've seen that you can have
<article>
inside
<article>
and
<section>
inside
<article>
. But you can also
have
<article>
inside
<section>
. What's that all about then?
<article> inside <section>
Imagine that your content area is divided into two units: one for
articles about llamas, the other for articles about root vegeta-
bles. That's my kind of content.
Yo u ' r e n o t o b l i g e d t o m a r k u p y o u r l l a m a a r t i c l e s s e p a r a t e l y
from your root vegetable articles, but you want to demonstrate
that the two groups are thematically distinct. Perhaps, because
they're thematically distinct, you want them in separate columns,
or you'll use CSS and JavaScript to make a tabbed interface.
In HTML 4, you'd use our good but meaningless friend
<div>
.
In HTML5, you use
<section>
, which, like
<article>
, invokes
