HTML5: Section vs Article elements

HTML & CSS
1

Hi all,
I’m learning HTML5 so I can take advantage of the semantic elements such as <header>, <nav>, <article>, etc, in my own projects. But, I have a question on how to correctly use the <section> and <article> elements in my documents.

Is there a set standard on how to lay out the page with <section> and <article> elements? To me, it makes sense to wrap your SECTIONS of content with the <section> element like so:


<section>
  <article>
   <header><h2>This is an article title</h2></header>
   <p>This is the main body text of the article blah blah blah</p>
  </article>
   <aside> A sidebar here</aside>
</section>

I prefer placing the <section> elements as a “wrapper” outside the various sections of the page because semantically it becomes like a newspaper: You go to the SPORTS SECTION and then you read the various ARTICLES within that section. You don’t go to the SPORTS ARTICLES to read the various SECTIONS.

Am I right in my thinking? THanks!

2

If i understand your logic correctly then yes you are, typically it’s best practice with HTML5 to use <section> elements as a parent wrapper and then in your case just loop through the <article> elements. To put what i think your logic is into perspective see the below examples.

Bad practice

<section class="body-wrapper">
    <section class="news-wrapper">
        <article></article>
    </section>
    <section class="news-wrapper">
        <article></article>
    </section>
    <section class="news-wrapper">
        <article></article>
    </section>
    <aside class="columns column-right"></aside>
</section>


Good practice

<section class="body-wrapper">
    <section id="news-wrapper">
        <article></article>
        <article></article>
        <article></article>
    </section>
    <aside class="columns column-right"></aside>
</section>

The above is what i believe to be perfectly valid HTML5 semantics as there is a parent wrapping the articles and side column as well as a child parent of the body wrapper that wraps the articles, of course at the moment everyone has there own idea of how to do this as <div> elements are the popular trend still but because HTML5 is still been finalized and such in spec there are technically no right and wrong ways.

3

Well, the vs part is wrong. The two are very different in semantic.

<hr>

<article> means self-contained content. Use <article> if that content in the page is independent and for syndication, i.e. “Beam me up, Scotty”.

<hr>

<section> on the other hand is code word for thematic grouping, not independent content. Use <section> if that content makes sense to be highlighted in the document outline, i.e. “T.o.C.”.

<hr>

Depending on the content in <article>, of course, it makes perfectly good sense to have this:


<article>
  <section>
  </section>
  <section>
  </section>
</article>
4

itmitică makes a good point. The thing that might confuse people is that this logic can be recursive ( to a reasonable degree).

Depending on the SCOPE of your thinking you can see that it makes sense to have SECTIONS of content, that have other (sub) sections … which have articles which are also SECTIONED. As always it really depends on what your content is trying to convey.

5

… and where you also have a <section> of <article>s, and those <article>s have <section>s in them, and those <article>s are also <section>ed:


<section>
  <h2>I'd like you to enjoy a few articles on food</h2>

  <section>
    <h3>Soups</h3>
    <article>
      <h1>Tomatoe soup</h1>
      <section>
         <h2>Origin</h2>
          [...]
      </section>
      <section>
         <h2>Preparation</h2>
          [...]
      </section>
    <article>

    <article>
    [...]
    </article>
  </section>

  <section>
     <h3>Main courses</h3>
     <article>
       <h1>Sirloin steak</h1>
       <section>
         <h2>Origin</h2>
          [...]
       </section>
       <section>
         <h2>Preparation</h2>
          [...]
        </section>
    <article>

    <article>
    [...]
    </article>
  </section>
</section>
6

HTML5doctor.com is generally a good place to read what the standardistas in general have decided about tag semantics and how to use what (and in this case, agree with Mitică).

The endless nesting of articles in sections in articles in sections will cause great joy, for it is totally legal.