Base page template

Let's dive right in, starting with a blog's base page
template. This should include the site's header, footer,
and sidebar, but doesn't include the "meat," which will be
provided by relevant sub-templates.

The <header> element can be used as a header
of any sectioning element. In this case, it's being used as the
header of <body>, which is just as much a
sectioning element as the new ones like
<article>. For styling purposes, authors may
wish to distinguish between a site-wide heading and page- or
section-specific headings. This is possible with a child
selector like body>header (or via
class="" & id="" for browsers that
don't support such selectors).

The <hgroup> element is
used to group a set of h1–h6
elements when the heading has multiple levels, such as
subheadings, alternative titles, or taglines. In our header,
we use it for marking up the blog title & subtitle so that
the subtitle doesn't appear in the document
outline.

The spec
defines <nav> as representing
a section of a page that links to other pages or to parts within
the page: a section with navigation links. As a sectioning
element, <nav> can have its own header. In
this case there's no need for one.

The sidebar itself is represented with an <aside>
element, because it consists
of content that is tangentially related to the main content
of the page.

Each section of the sidebar is contained in a <section>
element. HTML5 defines <section> to be a
generic document or application section. A section, in this
context, is a thematic grouping of content, typically with a
heading, possibly with a footer.

Essentially, a <section> is a portion of
a larger work which participates in the larger work's outline.
The spec says
that the section
element is appropriate only if the element's contents would
be listed explicitly in the document's outline
(emphasis mine). Each of our sidebar's sections has a heading
and should explicitly appear in the outline, so we use
<section> for them.

You may have noticed that—with the exception of the blog
subtitle—I've only been using <h1>
elements for headings, and not <h2>
through <h6>. This is because sectioning
elements scope heading elements, so that this document:

have the same outline. Future UAs are expected to render
section>h1 smaller than body>h1.
For now, though, you could continue to use
<h1>–<h6>, even with
the new sectioning elements, because the child heading element
with the highest rank is considered the heading of the section.

The search form uses some HTML5 bits and pieces that aren't
strictly speaking on-topic for this article, but I'll go ahead
and explain them anyway. Search boxes (<input
type="search">) behave like text boxes
(type="text"), but may have a different appearance.
They've been implemented in WebKit (Safari) for
several years, and were adopted by HTML5 from there. The placeholder
attribute provides as native HTML functionality something
many web developers hack
together with JavaScript. Placeholder
text is displayed inside the input field as long as the field is
empty and not focused. As soon you click on (or tab to) the
input field, the placeholder text disappears. (Dive
Into HTML5)

There's not much to say about this footer: it contains site-wide
metadata like rights information, contact information, and the
like. Suppose instead you'd like a Powazek-style fat footer.
Sounds great! As of spec rev 3751,
you can go right ahead and do that. Here's a fat footer cobbled
together from my example header, sidebar, and footer:

Individual blog posts

Now it's time to talk about what we put where I have that … main content goes here …
placeholder above. There are two cases I'd like to look at:
pages that hold only one blog post, and archive pages which hold
several at once.
Let's start with the individual blog post template
first.

In addition to some elements we've already covered, this markup
uses <article>,
<time>,
and <time>'s pubdate
attribute. (I'm going to skip explaining
<time> and pubdate="" as they're
tangential to the points I'm aiming to make here.)

It's pretty obvious (and uncontroversial) that <article>
is the best sectioning element to use for a blog post.

The article
element represents a
section of a page that consists of a composition that forms an
independent part of a document, page, application, or
site[.…] An article
element is "independent" in the sense that its contents could
stand alone, for example in syndication, or as a
interchangeable component on a user-configurable portal page.

Now, suppose your blog post is very long and has several
distinct pieces with their own subheadings. Unsurprisingly, this
is a case for the <section> element:

In both of the above cases, there's no element that contains
just the "meat" of the blog post. The
<article> contains the meat, but also the
header and footer. The <section>s just
contain one subsection each. Perhaps you need a "meat" element,
for styling purposes or some such. The correct element to use
for this is <div>. Here's what the spec has
to say about this case (emphasis mine):

The section
element is not a generic container element. When an
element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div
element instead.

Using <div> for such a situation looks like
this in the case of a short blog post:

Comments

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 Web log
entry on a site that accepts user-submitted comments could
represent the comments as article
elements nested within the article
element for the Web log entry.

But what about the "add a comment" form? They typically appear
after any existing comments. I'm itching for a container to hold
both the comments and the form, and I think the best match is
<section>. After all, I think it's
appropriate for the comments section to participate in the
document outline.

Archive pages

Archive pages typically have multiple blog posts on
them. So the most obvious way to mark such a page up would be to
put the <article> elements, one after
another, where I have that …
main content goes here … placeholder above.