Should <sections> have <articles> or should <articles> have <sections>?

Question

I'm reading Mark Pilgirm's "Dive into HTML5" and in the semantics section, it talks about how HTML5 introduces the <article> and <section> elements. It says that <section>s represent a generic document or section, while <article>s represent a self-contained composition. I don't see a logically semantic parent-child relationship either way.

I tried running the following code through the HTML5 Outliner and it seemed to indicate that the document outline comes out the same, no matter how they were nested.

So my question is: should <section>s be nested inside <article>s, should <article>s be nested inside <secion>s, or does it not matter from a semantic view point?

<section><h1>section article?</h1>
  <article><h1>art 1</h1></article>
  <article><h1>art 2</h1></article>
  <article><h1>art 3</h1></article>
</section>

<article><h1>article section?</h1>
  <section><h1>sec 1</h1></section>
  <section><h1>sec 2</h1></section>
  <section><h1>sec 3</h1></section>
</article>

Answer 1

It's entirely acceptable to nest them either way. Although the document outline does not distinguish between a <section> and an <article>, from a semantic point of view they are two different things. That's the whole point of introducing them as two distinct semantic elements.

Use the first snippet if your page consists of multiple articles.

Use the second snippet when you have an article that's comprehensive enough to contain multiple sections.

You can even combine them both if using both fits your content, such that your markup looks like this:

<section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>

Answer 2

The HTML documentation tends to use sections only inside articles. It seems to suggest that you should always use an <article> and use each <section> for, well, a section of that article. The example they give involves apples:

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for apple pies.</p>
 </section>
</article>

I don't see many examples where a <section> is not contained by an <article>, but an <article> can contain another <article> within it, such that a blog would be represented by an article, and then a comment to that blog would be represented by another article inside the parent article. So, that looks like the direction you should be headed.

So, continuing from the apples example: If you wanted to allow users to comment on each type of apple, then in that case you would have an article inside a section, which would still be inside an article.

---

After looking more into it and thinking harder about it, this is the generalization I've come up with:

Using articles should be reserved for "posts" such as a blog, a topic (and each of its subsequent posts), comments, etc. Anything which can have an author should be using an <article> element.

Using sections should be reserved for separating sections of your website, such as an introduction (to what your site might be about), some news articles, or an area within an article used for comments. Anything which is a "section" of something (doesn't really have an author).