What's the most semantically correct way to do subheadings or subtitles? Example below.
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?
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)