Theresa O’Connor

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 one h1, h2, h3, h4, h5, or h6 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>