HTML and CSS Reference
The difference between section and article can be confusing, and as the spec evolves,
the path doesn't seem to be getting much clearer. For the majority of use cases, though,
considering these guidelines should help:
• Do not use section simply as a styling hook. Use div s and span s instead.
• Do not use section if header , footer , aside , or article is more semantically
appropriate for your content (see Recipe 1.5 ).
• Do not use section unless the content has a natural heading.
HTML5 Doctor has a handy flow chart to help you choose the right HTML5 structural
elements at http://html5doctor.com/happy-1st-birthday-us/#flowchart .
1.7 Checking Your Document Outline
You want to view your document's content outline.
Run your page through the HTML5 Outliner tool: http://gsnedders.html5.org/outliner/ .
HTML5 has an outline algorithm that calculates the structure of a web document. This
algorithm is based on sections defined by the new structural elements.
For the main document outline, section and aside each introduce a new section in the
outline, while the heading(s) within each form the outline content. This is known as
explicit sectioning .
Let's examine the following markup example:
<h1>Most Recent Blog Posts</h1>
<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>
<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>