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

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).

Answer 3

Both are semantically valid
It all depends on how you want your page interpreted.
If you're writing a blog post, each post would be an <article>, and in a particularly long blog post, you could separate it into logical <section>s with their own <h1>s and whatever else it needs.
If you're writing a research page, you might use <sections> to separate out the table of contents, abstract, main body, and appendix. In the main body (and appendix) you might have a particular section that truly is an <article>.
If you're laying out a page, I highly recommend the following format:
<body>
<div id="page">
<div id="page-inner">
<header id="header">
<div id="header-inner">
<!-- logo, site name, search, etc -->
</div>
</header>
<nav id="nav">
<div id="nav-inner">
<ul>
<li>Primary Nav</li>
...
</ul>
</div>
</nav>
<div id="wrapper">
<div id="wrapper-inner">
<div id="content">
<div id="content-inner">
<article>
<header>
<h1>Title</h1>
<span class="author"></span>
<time class="timestamp"></time>
...
</header>
<div class="content">
</div>
<footer>
...
</footer>
</article>
...
</div>
</div><!-- end #content -->
<div id="sidebar">
<div id="sidebar-inner">
<div class="module"></div>
<!-- more sidebar widgets, modules, blocks, what-have-you -->
</div>
</div><!-- end #sidebar -->
<!-- more columns if necessary -->
</div>
</div>
<footer id="footer">
<div id="footer-inner">
<!-- copyright notice, footer menu, contact form, etc -->
</div>
</footer>
</div>
</div>
</body>
Although if you don't need so many <div>s, keep it simple with:
<body>
<header></header>
<nav></nav>
<div id="wrapper">
<div id="content">
<article></article>
...
</div>
<div id="sidebar">
<div class="module"></div>
...
</div>
</div>
<footer></footer>
</body>