HTML and CSS Reference
In-Depth Information
So, you have a page with a header, footer, navigation, and
content areas containing several articles (blog posts), each
with its own header and footer. But wait...what is a blog
without comments?
The specification mentions this case, and recommends the use
of nested
<article>
s: “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.”
So let's do that. Note as well that blog comments are typically
shown in chronological order and have information such as
author's name and URL—in short, header information. Diagram-
matically it looks like
Figure 2.3
.
<article>
FIguRE 2.3
The structure of
a blog post, with comments as
nested articles.
<header>
heading
<time> (just date)
Article text
<footer> (metadata)
<article>
<header>
<time> comment date and time
Comment text
<article> another comment
The code is as you'd expect, with comments highlighted:
<article>
<header>
<h1>Come to my party on <time datetime=
¬ 2010-12-01>1 December</time></h1>
<p>Published on <time datetime=2010-06-20 pubdate>
¬ 20 June 2010</time></p>
</header>
