Confusion between <article> or <section> tags. Which to use?

Question

Despite reading pages upon pages about the <article> and <section> tags I really don't understand how to apply them to my site.

I have a product page with related products at the end of the page. First I thought about doing something like this:

<section>
   <header><h1>Product title</h1><header>
   <img src="image.jpg"/>
   <p>Description</p>
   <p>Price</p>
   <p><a href="...">Order</a></p>
</section>

<section>
  <header><h1>Related products</h1></header>
  <article>
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price
  </article>
  <article>
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price
  </article>
  <article>
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price
  </article>
</section>

But, then I read some other blogs and it occured to me that maybe I should replace the <section> tags with <article> tags.

Which is right and why? Thanks.

Answer 1

Section

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Article

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Straight from the W3 http://www.w3.org/html/wg/drafts/html/master/sections.html

---

In their example, they have an article nested within a section within an article. I would say you are definitely using it correctly.

<article>
 <header></header>
 <section>
  <h1></h1>
  <article></article>
  <article></article>
 </section>
</article>

Answer 2

<article> is for an independent piece of content that should make sense even if all of it's surrounding content is stripped away. <section> is more of a generic container that's quite similar to div tag and mostly used for content structuring. So the right code should be like this:

<article>
   <header><h1>Product title</h1><header>
   <img src="image.jpg"/>
   <p>Description</p>
   <p>Price</p>
   <p><a href="...">Order</a></p>
</article>

<article>
  <header><h1>Related products</h1></header>
  <section>
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price
  </section>
  <section>
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price
  </section>
  <section>
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price
  </section>
</article>

Also HTML 5 doctor's got a great Flowchart if you get confused picking the right HTML5 semantic element for your need. You can give it a try and see if it helps.