There’s been a lot of confusion over the difference (or perceived lack of a difference) between the
<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.
<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
- Is the content related? If so use
- Finally if there’s no semantic relationship use
Dr Bruce has written HTML5
<section>s, what’s the difference?, so we recommend reading that if you are still fuzzy on when to use
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
<section> elements. Do you think the distinction between the two is clear?