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:
- Would the content would make sense on its own in a feed reader? If so use
<article> - Is the content related? If so use
<section> - 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>.
Summary
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?