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

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>

Solution

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, so that your markup looks like this:

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

The outlining algorithm never had any practical use even though it seemed like a good idea at the time, so the use of h1s in nested sectioning elements is obsolete and authors are still required to ensure their heading levels are consistent.