Fundamental Syntax and Semantics - HTML5 - page 10

<section>
section is the most generic of the new structural elements, intended to simply group
related content. However, it is not a generic container element like div . The content it
groups must be related .
Applying this definition to Recipe 1.5 , we might want to add section as the parent
element for both instances of article :
<section>
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't
mean that <em>all</em> links on a site need <code>nav</code>.</p>
</article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what
works best for you. So once you have the <code>DOCTYPE</code> in place,
you should explore.</p>
</article>
</section>
This example meets the core criterion for section : the grouped content is thematically
related.
But wait! The spec (see http://www.w3.org/TR/html5/sections.html#the-section-ele
ment ) further clarifies:
A general rule is that the section element is appropriate only if the element's contents
would be listed explicitly in the document's outline.
The document outline refers to HTML5's new sectioning content model, where each of
the new structural elements creates its own self-contained outline. This outline is
generated by the headings ( h1 - h6 ) contained in each element (see Recipe 1.7 ).
So, if you want to use section , the content should have a natural heading. Given this
additional clarification, let's modify the markup from Recipe 1.5 , to include a heading
for our section :
<section>
<h1>Most Recent Blog Posts</h1>
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't
mean that <em>all</em> links on a site need <code>nav</code>.</p>
</article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what
works best for you. So once you have the <code>DOCTYPE</code> in place,
you should explore.</p>
</article>
</section>