Semantic structure in HTML - Subtitles (Pre-HTML5)

There may be a SUBLINE or SUBHEAD element coming soon that will be most appropriate:

http://www.techrepublic.com/blog/web-designer/html5-hgroup-is-dead-what-you-need-to-know/

Until it becomes available we are left with trying to make H2's (or some other Hx element) or P's or Q's act as sublines/subheads/subtitles, etc. When it becomes available the structure of the content suggested in the original post will, I believe, be as follows (let's assume the SUBHEAD element is what it ends up being):

<h1>A BLOG TITLE
<subhead>the best blog in the world</subhead>
</h1>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

Although I would prefer it to be:

<h1>A BLOG TITLE</h1>
<subhead>the best blog in the world</subhead>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

The mere fact that a particular SUBHEAD element follows a particular Hx element in my mind would semantically pair those two elements together, just as an H2 (as a subsequent sibling, rather than as a child or other such descendant) following an H1 associates those two elements.

In a world where the vast majority of web developers are clamoring to be allowed to make every single Hx element on their page be an H1 the OP here gets some credit for being concerned with proper heading structure and even going beyond that and recognizing that subtitles are not the same as headers.

Since I can't show rendered code here the Codepen at http://codepen.io/WebDevCA/pen/wzyIH shows a test of the SUBHEAD element and shows that, in my mind, the preferred positioning of it in the DOM is as an immediately subsequent sibling selector to its associated Hx element rather than as a child element inside the Hx element.


I would just use a paragraph element, it doesn't feel as odd to me as using a heading element:

<p class="subtitle">the best blog in the world</p>

You's answer ("your answer", "his answer"?) would certainly be the way to go if you're marking up using HTML5.


The specification has changed quite a bit since the working draft that was up-to-date when this answer was first posted five years ago. As @Andre Figueiredo righly points out in the comments, the published HTML5.2 specification is very clear on this specific use case (emphasis added):

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

In short, use an appropriately classified p element inside a header element:

<header>
    <h1>A BLOG TITLE</h1>
    <p class="tagline">the best blog in the world</p>
</header>
In HTML5, there's an obvious solution: 
<header>
    <h1>A BLOG TITLE</h1>
    <h2>the best blog in the world</h2>
</header>

When using HTML4 I personally tend to replace the h2 with p class="tagline", or something similar.

Edit: To motivate the use of h2 in HTML5, think of the title of Dr. Strangelove:

<h1>Dr. Strangelove</h1>
<?>Or: How I Learned to Stop Worrying and Love the Bomb</?>

Does a p element make sense here? Not really — it's not a paragraph, it's a title. Does h2 work as-is? No, we might confuse it with subtitles of the text itself. So what do we do? We use h2 and group it with h1 using a header element, thereby getting rid of the ambiguity concerning the subtitles in the text.


If you'd use a heading for the subtitle, a wrong document outline would be created.

<body>
 <h1>John's blog</h1>
 <h2 class="tagline">the best blog in the world</h2>
 <div>…</div>
</body>

Here all following content (until a next h1/h2, if any) would be in the scope of the tagline instead of the actual blog title. Which is not what we want for a subtitle.

in HTML5

(UPDATE: The hgroup element got removed from HTML5. See my answer to another question about how to mark up subheadings in HTML5 now.)

For HTML5, there is a new element especially for this use case: hgroup

The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

By using hgroup, only one of the child headings counts for the document outline.

<body>
 <hgroup>
   <h1>John's blog</h1>
   <h2 class="tagline">the best blog in the world</h2>
 </hgroup>
 <div>…</div>
</body>

in HTML 4.01

There would be two ways

1) Include the subtitle in the main heading, probably separated by a colon.

<body>
 <h1>John's blog: <span class="tagline">the best blog in the world</span></h1>
 <div>…</div>
</body>

2) Use a p (or if it's not a paragraph, div) for the subtitle:

<body>
 <h1>John's blog</h1>
 <p class="tagline">the best blog in the world</p>
 <div>…</div>
</body>

(if the immediately following content would consist of paragraphs, too, you could think of using the hr element after the tagline)

Tags:

Html

Semantic Markup

Recent Posts