Home/ Questions/Q 7597095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:04:50+00:00

I’m reading Mark Pilgirm’s " Dive into HTML5 " and in the semantics section

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0