Progressive Markup and Techniques - HTML5 - page 53

tag) and can include the nav element as well (hence the inclusion of the navigation bar
within our header).
Next, let's mark up our blog posts:
<div class="posts">
<div class="article">
<div class="header">
<h1>10 ways to eat ethically, cheaply, and well</h1>
<div class="meta">Posted on <span class="date">February 1st, 2011</span>
</div>
</div><!--end header-->
[Post Content]
<div class="footer">
<div class="meta">Tags: <a href="tags/simplicity" rel="tags">
simplicity</a>, <a href="tags/food">food</a></div>
</div><!--end footer-->
</div><!--end article-->
<div class="article">
<div class="header">
<h1>adventures in composting</h1>
<div class="meta">Posted on <span class="date">January 15th, 2011</span>
</div>
</div><!--end header-->
[Post Content]
<div class="footer">
<div class="meta">Tags: <a href="tags/simplicity" rel="tags">simplicity</a>,
<a href="tags/green/" rel="tags">green</a></div>
</div><!--end footer-->
</div><!--end article-->
</div><!--end posts-->`
Note first that we've wrapped our posts in a div we labeled "posts" . You may be
tempted to name it “section” (along with the corresponding HTML5 section tag)—
after all, a collection of blog posts does seem to account for its own generic section.
Recall, however, that the HTML5 section element is not meant to stand in for any old
div : something is justifiably a “section” only if it has at least one head tag (i.e., only if
it can represent a level in the outline of the HTML document). This div does not have
a head tag, so we have given it an alternative semantic name.
Next, we've wrapped each post within a div that we've named "article" . This
corresponds to the article tag in HTML5. Each article div , in turn, has its own header
and footer (which, again, would match up with the header and footer HTML5 tags).
Interestingly, we've also enclosed each post title in h1 tags. Prior to HTML5, having
more than one h1 tag within an XHTML/HTML document was generally frowned
upon. In order for your page to be outlined properly within the DOM, your head tags
should follow a natural progression: h3 tags followed h2 , and h2 followed the h1 tag,
which enclosed the title of the page. With the advent of HTML5, this was no longer
necessary: as the browser understood the article element, semantically, it could be
ranked (and outlined) differently than, say, the header element.