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

Question

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?

Answer 1

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>