PPK wants to know how to mark up page subtitles:
In many instances, a regular
<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
<p>; or maybe even an
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
element (emphasis mine):
headerelements must have at least one
h6element 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>