This is a tricky one —
<article> are poorly defined in terms of what their differences are, and it confuses a lot of people. They are both semantic block level elements that apply meaning to their contents, but that meaning is quite subtle and distinct:
The way I understand it:
<section> should be used to wrap a separate unit of functionality on a page, such as a box containing your recent tweets, or a map widget, or a photo stream, or a set of news headlines.
<article> should be used to wrap a content item that could be considered to appear in a series of items, so for example each tweet in a series of tweets (which might contain the tweet text, author name, time and date, etc.), or each news headline box (which might contain a title, abstract, thumbnail, author name, etc.) All the articles do not have to appear on the same page necessarily. Note that the most obvious way of think about this is “news articles”, but this is not the best way —they are more like “multiple articles of clothing on a shelf”.
However, it gets more confusing — you can nest multiple
<article>s inside a
<section>, or vice versa.
So if your page includes a
<section> containing news headlines, each individual headline could be inside an
<article>, as we said above.
But if your page contains a single complete news article, that could be inside an
<article>, and different units of functionality inside the article could be inside
<sections>, for example the list of comments at the bottom of the article…
<div> is quite easy conceptually — it’s a block-level container with no semantic meaning, so it should be used when you want to group together more than one element and apply styling to the whole lot at the same time, without introducing any extra semantic meaning to that group. So for example if you have a group of
<img> elements, and you want position them all somewhere else on a page as a group, you could wrap them in a
<div> and then apply positioning CSS to the
However, the group you want to wrap and style is often a separate unit of functionality, or a content item in a series, so often
<article> are more appropriate than
Really, it doesn’t matter all that much — you just need to try your best to make your content as semantically accurate as possible. In some cases this is easy — you should use a
<button> element to mark up a button, and not a
<div>! But no-one reasonable is going to shout at you if you mix up
<article> on occasion.