The difference between article and section

There’s been a lot of confusion over the difference (or perceived lack of a difference) between the <article> and <section> elements in HTML5. The <article> element is a specialised kind of <section>; it has a more specific semantic meaning than <section> in that it is an independent, self-contained block of related content. We could use <section>, but using <article> gives more semantic meaning to the content.

By contrast <section> is only a block of related content, and <div> is only a block of content. Also as mentioned above the pubdate attribute doesn’t apply to <section>. To decide which of these three elements is appropriate, choose the first suitable option:

  1. Would the content would make sense on its own in a feed reader? If so use <article>
  2. Is the content related? If so use <section>
  3. Finally if there’s no semantic relationship use <div>

Dr Bruce has written HTML5 <article>s and <section>s, what’s the difference?, so we recommend reading that if you are still fuzzy on when to use <article>.


Hopefully this post has given you some insight into the correct use of the <article> element. Do you have any other examples that you can share for using <article> in your HTML5 markup?

I’m also keen to hear your thoughts on the confusion between the <article> and <section> elements. Do you think the distinction between the two is clear?