POSH subtitle markup
Please note that, since this blog post was written, the HTML5
spec has been changed many times, including changes to the
<header> element, the introduction of an
<hgroup> element, and more. As such, the
advice below might not reflect current best practices.
PPK wants to know how to mark up page subtitles:
In many instances, a regular
<h2>or<h3>is followed by a subtitle that gives a little more information about the subject being discussed in the normal text below the header(s). The most obvious example is a subtitle for an entire page…The subtitle always occurs directly below the regular header. The question is whether this subtitle should be an
<h3>or a<p>; or maybe even an<h2>.
This is a really common issue when writing HTML. So let’s try to come up with some nice, POSH markup! To simplify things, I’ll assume we’re trying to mark up a blog post.
The HTML 5 draft addresses this need by introducing a header
element (emphasis mine):
headerelements must have at least oneh1,h2,h3,h4,h5, orh6element as a descendant…Other heading elements indicate subheadings or subtitles.
Cool. So we’d mark up a blog post’s title and subtitle in HTML 5 like so:
<header>
<h1>Blog post title</h1>
<p>Blog post subtitle</p>
</header>
But of course browsers don’t yet support HTML 5’s new elements. I like to write HTML 5-inspired HTML 4, using the new element names as class names.
<div class="header">
<h1>Blog post title</h1>
<p>Blog post subtitle</p>
</div>
We should really be using the hAtom microformat
to mark up blog posts. Assuming our header is already inside an
hentry, here’s how the markup looks:
<div class="header">
<h1 class="entry-title">Blog post title</h1>
<p class="entry-summary">Blog post subtitle</p>
</div>