This article in the HTML5 series covers the explanation and usage of the <article> element.
If you’re new to HTML5 then you might want to start at the following link which will give you an overview and a simple template to get you started: HTML5 Tutorial.
The Spec
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
How to use the article element
For standard content pages the <article> element is fairly self explanatory. You’d simply wrap the <article> element around your main content like the following example:
<article>
<header>
<h1>Heading</h1>
</header>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!</p>
<p>Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer</h1>
</article>
That’s pretty straight forward but there are more subtle times that you’d use the <article> element. In order to determine when you should use it, I like to think of whether the article would make sense independently of the current site that it sits within. Would it make sense if it was published on its own as an RSS feed within someone’s feedreader for example? If it does then it should probably be an <article> if not then it’s more likely that you’ll need a <section>, <aside> or <div> depending on the type of content (I’ll cover these elements in another blog post).
Other uses for the article element
Another example of using this element would be to nest them within blog post comments as these could be treated as articles in there own right. For example:
<article>
<header>
<h1>Heading</h1>
<p>Published: <time pubdate datetime="20011-01-15">15th January 2011</time></p>
</header>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur...</p>
<section>
<h2>Comments</h2>
<article>
<header>
<h3>I like your article</h3>
<p><time pubdate datetime="20011-01-17">17th January 2011</time></p>
</header>
<p>Odio lundium nec, non scelerisque, velit lacus, sed dignissim aliquam tortor</p>
</article>
<article>
<header>
<h3>I like your article</h3>
<p><time pubdate datetime="20011-01-18">18th January 2011</time></p>
</header>
<p>Odio lundium nec, non scelerisque, velit lacus, sed dignissim aliquam tortor</p>
</article>
</section>
</article>
Here you can see that everything is wrapped within the main <article> element but then the comments are wrapped with a <section> and within that are another couple of <article>’s for each of the blog comments.
Things like widgets and forum posts can also be handled in the same way. Just think that if you read the article independently of anything else on the page would it still make sense?
Further reading
There’s a couple of great articles on this subject available here:
great article, enjoyed reading.