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