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):
header
elements must have at least oneh1
,h2
,h3
,h4
,h5
, orh6
element 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>