Pichan Pichan - 1 year ago 40
HTML Question

What's the most semantically correct way to do sub-headings?

Edit: the correct term seems to be byline, not sub-heading. I'll leave the post otherwise unmodified. Convert in your head :)

What's the most semantically correct way to do sub-headings? Example below.


We sell apples, yay!

Lorem ipsum...

Since the contents of the sub-heading 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="sub-heading">We sell apples, yay!</span>
    -> Works. Is it the best way? Don't know.

  • <h2>About<span class="sub-heading">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?

Please correct me if I got the term sub-heading wrong(I probably did) :)

Answer Source

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.


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)