What's the most semantically correct way to do subheadings?

Spec

  • https://www.w3.org/TR/html51/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines

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.

A heading should help comprise the outline of the document. The document outline in Microsoft Word—which also uses headings 1 - 6—is a good example of this concept in action. Headings often serve (or have the potential to serve) as the title for some additional body of information, that is, "headings for the sections with which they are associated".

If the content does not help form the outline of the document and has no potential to be a title for other information, then it probably doesn't belong in a H[1-6] tag.

Example

A header typically contains a group of introductory or navigational aids. http://www.w3.org/TR/html51/sections.html#the-header-element, emphasis mine.

<header>
    <h1>About</h1>
    <div class="subtitle">We sell apples, yay!</div>
</header>

<style>
    header .subtitle{ color: blue; }
</style>

HTML5 solves this by way of the hgroup tag. Use that.

If you feel you're not yet ready to migrate, then I'd say you should still go with proper heading tags whenever you're marking up a heading. If you feel uncomfortable marking up two headings as siblings, perhaps you can adjust your copy to reduce the number of headings to just one.

Edit:

Since the time of writing, the future of hgroup has been endangered: http://dev.w3.org/html5/status/issue-status.html#ISSUE-164

Edit 2:

As of April 2nd 2013 hgroup is removed from the spec: http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

(Source: https://twitter.com/iandevlin/status/318961224836587521)


I really liked Toby Inkster's suggestion here: http://lists.w3.org/Archives/Public/public-html/2010Nov/0405.html as an alternative to HTML5's proposed <hgroup> element which seems to be a difficult concept for many web authors to grasp. (See the start of that thread by Bruce Lawson.) Toby suggests:

<h2>
  <span>About<span>
  <small>We sell apples, yay!</small>
</h2>

Tags:

Html

Semantics