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?