HTML and CSS Reference
In-Depth Information
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 veg-
etables. 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
the HTML5 outlining algorithm (whereas <div> doesn't, because
it has no special structural meaning).
<section>
<h1>Articles about llamas</h1>
<article>
<h2>The daily llama: buddhism and South American camelids
¬ </h2>
<p>blah blah</p>
</article>
<article>
<h2>Shh! Do not alarm a llama</h2>
<p>blah blah</p>
</article>
</section>
<section>
<h1>Articles about root vegetables</h1>
<article>
<h2>Carrots: the orange miracle</h2>
 
Search WWH ::




Custom Search