The new HTML5 Bones template uses the following example for the main content (I removed some parts (like ARIA, comments, aside
, ...) not relevant for this question):
<!-- The <section> element can be used to enclose content that comes under a related heading.
NOTE: The <section> element can contain <article> elements and vice versa, if you think the content warrants it. -->
<section>
<header>
<h2>Getting Started</h2>
<nav>
...
</nav>
</header>
<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
<article id="introduction">
<h3>Introduction</h3>
<p>Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>
</article>
<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
<article id="instructions">
<h3>Instructions</h3>
<ol>
<li>Read the comments in this template</li>
<li>Decide how you think your content may fit into the template</li>
<li>Start building your document</li>
</ol>
</article>
</section>
The whole document has the following outline:
- HTML5 Bones
- Untitled Section
- Getting Started
- Untitled Section
- Introduction
- Instructions
- Did you know?
This outline is correct for the document. But I wonder if the use of the section
element and the article
elements is correct.
1 Answer 1
I think the section
element should be an article
element, and the two article
elements should be section
elements:
<article>
<h2>Getting Started</h2>
<section id="introduction">
<h3>Introduction</h3>
</section>
<section id="instructions">
<h3>Instructions</h3>
</section>
</article>
While there are, of course, valid cases where a section
element contains article
elements, I think this not the case in this example.
The "Getting started" content is without question the main content for this document. The section
element can be used for that purpose, but the article
element would fit, too. A simple question to ask: Could this whole "Getting started" article be an entry in a feed? If yes, use article
.
"Introduction" and "Instructions" are "sub-chapters" for "Getting started". Would it make sense to create separate entries for them in a feed? I don't think so.
However, as this document is meant as a boilerplate and therefor doesn't contain much content, it is hard to decide here. If "Introdcution" and "Instructions" would contain more content, so that these chapters could stand on their own, the current sectioning element choice would be correct.
But then there is the question: What would make more sense for the "typical site" the users of the HTML5 Bones template would create?
I guess you find more documents that need "article > section
" than "section > article
".
Examples:
- a blog: only the front page and the tag pages need
section > article
, but each blog entry needsarticle > section
. - an "About us" page on a company site:
article > section
(orsection > section
) - a shop: only the product listings need
section > article
, but each product needsarticle > section
Of course, a template can't make the choice for all users/sites. The users need to know what is right for their content. But I feel like it's dangerous to "default" to this sectioning element choice. If in doubt, one should use rather section
than article
, because section
is what you get anyway (simply by using headings), while article
has special meaning.