HTML and CSS Reference
In-Depth Information
Discussion
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.
See Also
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
Problem
You want to view your document's content outline.
Solution
Run your page through the HTML5 Outliner tool:
http://gsnedders.html5.org/outliner/
.
Discussion
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:
<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>