Text - Introducing HTML5 - page 40

As you've seen, comments on blog posts are <article> s inside
a parent <article> . There are other uses for this nesting besides
comments—for example, a transcript to a video:
<article>
<h1>Stars celebrate Bruce Lawson</h1>
<video>...</video>

<article class=transcript>
<h1>Transcript</h1>
<p>Supermodel #1: “He's so hunky!”</p>
<p>Supermodel #2: “He's a snogtabulous bundle of gorgeous
¬ manhood! And I saw him first, so hands off!”</p>
</article>

</article>
The transcript is complete in itself, even though it's related to
the video in the outer <article> . Remember: The spec says,
“When article elements are nested, the inner article elements
represent articles that are in principle related to the contents of
the outer article.”

<section>
Compared to <article> , <section> is not “a self-contained
composition in a document, page, application, or site and that
is intended to be independently distributable or reusable.” It's
either a way of sectioning a page into different subject areas, or
sectioning an article into, well, sections.
Consider this HTML 4 markup—the rules from Remy's previous
job in an off-Broadway production of The Wizard of Oz:
<h1>Rules for Munchkins</h1>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so no selling
¬ bricks as “souvenirs”</p>
<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>

NoTE A <section>
generally begins with a
heading that introduces it. An
exception to this might be a
<section> that will have
a heading injected using
JavaScript. If you wouldn't use a
heading, or you want some
wrapping element purely for
styling purposes you probably
should be using a <div> .