article elementHTMLElement.The article element represents
a self-contained composition in a document, page, application, or
site and that is, in principle, 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.
When article elements are nested, the inner
article elements represent articles that
are in principle related to the contents of the outer article. For
instance, a blog entry on a site that accepts user-submitted
comments could represent the comments as article elements nested within the
article element for the blog entry.
Author information associated with an article element (q.v. the address element) does not apply to nested
article elements.
When used specifically with content to be
redistributed in syndication, the article element is similar in purpose to
the entry element in Atom. [ATOM]
This example shows a blog post using the article element:
<article> <header> <h1>The Very First Rule of Life</h1> <p><time datetime="2009-10-09">3 days ago</time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <footer> <a href="?comments=1">Show comments...</a> </footer> </article>
Here is that same blog post, but showing some of the comments:
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time
datetime="2009-10-09">3 days ago</time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article id="c1">
<footer>
<p>Posted by: George Washington
</p>
<p><time
datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article id="c2">
<footer>
<p>Posted by: George Hammond
</p>
<p><time
datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
Notice the use of footer to give the information for each
comment (such as who wrote it and when): the footer element can appear at the
start of its section when appropriate, such as in this case. (Using
header in this case wouldn't be wrong
either; it's mostly a matter of authoring preference.)