by gloomy-corner

How to add a HTML subheading or subtitle

A subheading or subtitle is usually a smaller or secondary title that comes after the main title. It is used to further explain the title above it.

Normally we use <h1> for title and <h2>...<h6> for titles of sections. What is the proper tag to present a subheading if we have a double heading? The most often way is to use a smaller HTML heading tag like <h2> or <h3> inside a div container. Now ARIA role="doc-subtitle" provides a semantic way to identify a subheading.

The basic way

Use a smaller HTML heading tag like <h2> or h3 inside a <div> container:

<header>
  <h1>The title of the article</h1>
  <h2>A subheading to further explain the title</h2>
</header>

Use role="doc-subtitle"

The ARIA role role="doc-subtitle" provides a semantic way to identify a subheading. You can use it like below:

<header>
  <h1>The title of the article</h1>
  <div role="doc-subtitle">A subheading to further explain the title</div>
</header>

Resource