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.)