Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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:

  1. HTML5 Bones
    1. Untitled Section
    2. Getting Started
      1. Untitled Section
      2. Introduction
      3. Instructions
      4. 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.

share|improve this question
add comment

1 Answer

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 needs article > section.
  • an "About us" page on a company site: article > section (or section > section)
  • a shop: only the product listings need section > article, but each product needs article > 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.