Search code examples
htmlsemantics

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


What's the most semantically correct way to do subheadings or subtitles? Example below.


About

We sell apples, yay!

Lorem ipsum...


Since the contents of the subheading aren't of much importance when compared to actual, informative headings, I thought that they should not be seen as separate headings by screen readers and search engines.

So, the options that I thought of are as follows:

  • <h2>About</h2><h3>We sell apples, yay!</h3> -> This is what I would like to avoid.
  • <h2>About</h2><span class="subheading">We sell apples, yay!</span> -> Works. Is it the best way? Don't know.
  • <h2>About<span class="subheading">We sell apples, yay!</span></h2> -> Part of the heading. I don't really know if it's a good or bad thing.

Any advice on this one?


Solution

  • 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)

    Edit 3:

    It seems that hgroup is back, but with a notable change to what kind of content it should contain:

    The element may be used to group an h1–h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.
    (source: https://html.spec.whatwg.org/dev/sections.html#the-hgroup-element)