Let’s say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I’d say. What HTML do you go for? Dare I say, it depends? But have you considered all the options? And how those options play out semantically and accessibility-y?
As we do around here sometimes, let’s take a stroll through the options.
The visual examples
Let’s assume these are not the <h1>
on the page. Not that things would be dramatically different if one of them was, but just to set the stage. I find this tends to come up in subsections or cards the most.
Here’s an example a friend brought up in a conversation the other day:

Here’s one that I worked on also just the other day:

And here’s a classic card:

<h3>
then <h2>
Option 1: The ol’ The smaller one is on the top, and the bigger one is below, and obviously <h3>
is always smaller than an <h2>
right?
<h3>Subheading</h3>
<h2>Heading</h2>
This is probably pretty common thinking and my least favorite approach.
I’d rather see class names in use so that the styling is isolated to those classes.
<h3 class="card-subhead">Subheading</h3>
<h2 class="card-head">Heading</h2>
Don’t make semantic choices, particularly those that affect accessibility, based on this purely visual treatment.
The bigger weirdness is using two heading elements at all. Using two headings for a single bit of content doesn’t feel right. The combination feels like: “Hey here’s a major new section, and then here’s another subheading because there will be more of them in this subsection so this one is just for this first subsection.” But then there are no other subsections and no other subheadings. Even if that isn’t weird, the order is weird with the subsection heading coming first.
If you’re going to use two different heading elements, it seems to me the smaller heading is almost more likely to make more sense as the <h2>
, which leads us to…
<h2>
and <h3>
Option 2: Small ‘n’ mighty If we’ve got classes in place, and the subheading works contextually as the more dominant heading, then we can do this:
<h2 class="card-subheading">Subheading</h2>
<h3 class="card-heading">Heading</h3>
Just because that <h2>
is visually smaller doesn’t mean it still can’t be the dominant heading in the document outline. If you look at the example from CodePen above, the title “Context Switching” feels like it works better as a heading than the following sentence does. I think using the <h2>
on that smaller heading works fine there, and keeps the structure more “normal” (I suppose) with the <h2>
coming first.
Still, using two headings for one section still feels weird.
Option 3: One heading, one div
Perhaps only one of the two needs to be a heading? That feels generally more correct to me. I’ve definitely done this before:
<div class="card-subheading">Subheading</div>
<h3 class="card-heading">Heading</h3>
That feels OK, except for the weirdness that the subhead might have relevant content and people could potentially miss that if they navigated to the head via screenreader and read from there forward. I guess you could swap the visual order…
<hgroup> <!-- hgroup is deprecated, just defiantly using it anyway -->
<h3 class="card-heading">Heading</h3>
<div class="card-subheading">Subheading</div>
</hgroup>
hgroup {
display: flex;
flex-direction: column;
}
hgroup .card-subheading {
/* Visually, put on top, without affecting source order */
order: -1;
}
But I think messing with visual order like that is generally a no-no, as in, awkward for sighted screenreader users. So don’t tell anybody I showed you that.
Option 4: Keep it all in one heading
Since we’re only showing a heading for one bit of content anyway, it seems right to only use a single heading.
<h2>
<strong>Subheading</strong>
Heading
</h2>
Using the <strong>
element in there gives us a hook in the CSS to do the same type of styling. For example…
h2 strong {
display: block;
font-size: 75%;
opacity: 0.75;
}
The trick here is that the headings then need to work/read together as one. So, either they read together naturally, or you could use a colon :
or something.
<h2>
<strong>New Podcast:</strong>
Struggling with Basic HTML
</h2>
ARIA Role
It turns out that there is an ARIA role dedicated to subtitles:
So like:
<h2 class="card-heading">Heading</h2>
<div role="doc-subtitle">Subheading</div>
I like styles based on ARIA roles in general (because it demands their proper use), so the styling could be done directly with it:
[role="doc-subtitle"] { }
Testing from Steve and Léonie suggest that browsers generally treat it as a “heading without a level.” JAWS is the exception, which treats it like an <h2>
. That seems OK… maybe? Steve even thinks putting the subheading first is OK.
The bad and the ugly
What’s happening here is the subheading is providing general context to the heading — kinda like labelling it:
<label for="card-heading-1">Subheading</label>
<h2 id="card-heading-1" class="card-heading">Heading</h2>
But we’re not dealing in form elements here, so that’s not recommended. Another way to make it a single heading would be to use a pseudo-element to place the subhead, like:
<h2 class="card-heading" data-subheading="Subheading">Heading</h2>
.card-head::before {
content: attr(data-subheading);
display: block;
font-size: 75%;
opacity: 0.75;
}
It used to be that screen readers ignored pseudo-content, but it’s gotten better, though still not perfect. That makes this only slightly more usable, but the text is still un-selectable and not on-page-findable, so I’d rather not go here.
I take the advantage of class specially in Bootstrap which is the best way I believe
<h2 class="h3">Main Heading which is visually small in size</h2>
<h3 class="h2">Visually Main heading</h3>
So the css prefer class selector over element its help
Wait, hgroup is deprecated? I can’t actually see this on the WHATWG page for hgroup. Should I be looking somewhere else for an official statement on that?
Check out the usage notes over at MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#Usage_notes
It is in the WHATWG version, but not the W3C version of the spec. And in practice you can use the hgroup element, but no browser is using it to actually outline the document. So it has no real semantic value.
Hey Glen – it’s deprecated in the W3Cs HTML specification – but not in the WHATWG one. There’s a little more on this in the MDN page for hgroup.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#Usage_notes
Some better context can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup
Seems you can technically still use it, with most browsers supporting it.
aria-role
looks interesting, but based on what I see, it seems to refer only to the H1, so you can’t use it on sub-headings.From the alternatives that you present, I liked #4, because on many occasions it would make sense to have the entire thing as a single heading.
Also, wouldn’t it be valid in many cases if you used a
<header>
within a<section>
? Then, you could have the h-tag that you want along with a<p>
.Thanks for the info of
role="doc-subtitle"
. I didn’t know there is such a useful aria role for subtitle.After checking the tweets, I found a reply which explained the difference between a subtitle and a kicker. That kinda makes sense. In my opinion, a kicker is bettered wrapped in a
small
element than in an element withrole="doc-subtitle"
.What about something like this?
and
You could just do
flex-direction: column-reverse;
in thediv
rule to eliminate the need for theh2
andh3
rulesVisually solves the problem, but the tab indexing is slightly awkward and breaks flow if that’s a huge concern.
I will implement the headings and subheadings in HTML to view all the changes. Good job!
Option 4 is what I would use, however I don’t think
<strong>
is the best choice, as it adds semantic importance to its content, which might be a little weird for a subheading.I’ve always used option 4, or a variant with a
<span>
.I’d not heard of
role="doc-subtitle"
before, so thanks for the tip.The W3C has some suggestions: https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements
Any combination of h2/h3 seems off to me. As the W3C says: “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”.
To me, a single header element feels right:
<h2><strong>New thing:</strong> Thing title</h2>
It reads in a logical manner, and you don’t rely on screenreader behaviour. You can style it pretty easily, and – if you don’t like the colon and space, you could accessibly hide those characters.
But, as I say, this only feels right to me – I have no actual evidence to back this up
I don’t see the issue with having 2 headings next to each other. This happens in documents as well so why not just treat them as 2 headings if that’s what they are meant to be?
Because it’s a subtitle, not a subheading.
I think where this would be weird is for screen reader usage. Screen reader users rely on headings for navigation quite a bit, according to the WebAIM survey results, anyway. You can pop up a menu and get a list of them, select one and get dropped into that spot on the page. So, having two headings next to each other for one section would be weird for that user.
Personally, I tend to separate “visually a heading” from “functionally a heading” and use a p tag for the “visually” ones. If the text really makes sense as part of the heading, I could nest it in the heading tag and give it its own, overriding styling.
Hi! I’m new to development. As long as we achieve the result we want (making it accessible to all users as well), do the exact elements or the ways in which we do it really matter?
I really dislike using heading tags in these scenarios. Especially if you’re building a single component, then you have no idea what context that component is going to live in.. Shoving in an h2 into a random document structure might be the opposite of what semantic HTML enables us to do. How about instead wrapping both elements in a
<header>
tag instead? Since that way semantically the header is bound to its parent, whereas I feel heading tags are always document-level , thoughts?Maybe this is only specific to this example (i.e. card > card headings), but I my instinct is a
<h2>
for the primary heading, and a
for the sub-text. In that case are they both considered headings?
The double heading encounters I normally find in hero sections, or article pages, or features products promo’s. Maybe it’s just me, but unless there’s a few paragraphs of text after the heading and sub-heading area, the sub-heading should be a
if it’s not followed by content.
I’ve see this once and was very convinced by it:
Wonder what you think about this?
This is a constant struggle at my company and it seems every dev does it their own way. I’ve recently tried to restructure our typography and built a semantic hierarchy based on plain old semantic structure from this: https://www.w3.org/WAI/tutorials/page-structure/headings/
We have a token based style guide with fixed values for size/line-height, so after a thorough audit of what exists on our site and where it can be found it was fairly straightforward to apply this structure to almost every situation.
I don’t know if it’s pretty but it works, it makes sense to devs (not so much designers, at least not without a deep conversation), and is accessible.
Following the w3 rules is refreshing because in the end I know my rules can be backed up.
I wouldn’t call the “subheading” in these examples a heading at all; it’s a description of the content in that element. Ergo, I wouldn’t use an H tag for it but rather a P or a DIV. Problem solved.
When I have an actual subtitle, which would only ever follow the title, I commonly use a SMALL tag inside an H tag. E.g.,
<h1>Frankenstein <small>The Modern Prometheus</small></h1>
Why provide 1 as an option? The heading order is wrong, which creates an accessibility problem. It’s not the “ol'” technique; it’s just poor technique. It is just plain wrong to do this.
Then this article goes on to list things that are bad or deprecated. You do realize that people come to CSS tricks and copy paste your advice without too much thought, no ;)?
Given that they belong together I think a solution like Gustav’s comment is best.
I went the pseudo element route on a recent project.
A subheading is part of a heading, comments the heading, adds something to the heading. So let’s keep it all together:
Subheading
Heading
The tags left the message and made it worthless. Another try without a first or last bracket:
Hmm, an interesting question as I’ve asked myself that a lot… My solution would be:
And I would go with h3 instead of h2 as I reserve the h2 for larger sections that could group cards like this one. And most likely it already Is in such a section.
I dislike big time having text in
<div>
tags.. maybe my thing. I think you should always wrap text in proper text based tag likeor or or
<h3>
etc, not<div>
or<header>
or<footer>
or any other structural tag.Keep these “options for handling ___” articles coming… inevitably when I read one of these I’ve recently faced the same exact thing and they always have at least one option I hadn’t thought of. In this case I went with the out of order multiple headings with classes, but I’m going to go back and look at the alternatives now, in particular the single heading ones because you’re right, multiple headings are weird.
The ARIA
doc-subtitle
role is meant for epub documents. It has no heading level of its own, so per ARIA 1.1 it correctly defaults to level 2 (this is not a JAWS bug). Being ARIA, it is only exposed to screen readers and browser / screen reader support varies a bunch.If your audience is NVDA/Firefox users, then
doc-subtitle
may be helpful. Otherwise probably do not use it.ˋ
Supheading.Heading
ˋ that was meant to be :-/
I can’t reconcile the use of the term “subheading” to refer to the text above a heading, when the prefix “sub” means below. I get that we’re referring to relative visual hierarchy here, but there’s gotta be a less confusing term.
There are a lot of information on the Internet about headlines H1 and I have different opinions of some authors on this matter. I was not sure what to do with the titles on my site. After reading your article, I got answers to all my questions. Thanks you!!!
Just going to leave this here: http://html5doctor.com/howto-subheadings/
Here’s a thread discussing using
<small>
: https://lists.w3.org/Archives/Public/public-html/2013Apr/thread.html#msg22I think this article needs to be revisited.
As others have pointed out options 1 & 2 are just wrong.
Some better solutions here:
https://www.w3.org/TR/2014/REC-html5-20141028/common-idioms.html
My favourite for a card as the example in the article is:
It seems like your website has an answer to every one of the questions I ask google. Thank so much for this.