It is in HTML to group headings to separate them for styling. A HTML tag I rarely hear about, and only recently rediscovered, is the
<hgroup> tag. It's built for this exact purpose.
Let's look at an example, a card component:
Here's some potential HTML for this card:
<section class="card"> <hgroup class="card-header"> <h2>Services</h2> <h3>Design → Development. Just for you. </hgroup> <div class="card-content"> <p>We help innovative startups, solo entrepreneurs, and skunkworks teams explore, shape, and realize big ideas.</p> <a href="/services">Learn more</a> </div> <img src="/images/anvil.svg" class="card-icon" alt="An anvil with a hammer on top"> </section>
Pretty standard. Notice that we're able to use
<hgroup> to provide some semantic meaning to the "top" of the card. We're still stuck with the
<div> for the content, but that's a different story.
The downside to
<hgroup> is that it doesn't have any accessible helpers. It won't tell a screenreader anything useful. So, for now it's a little cleaner HTML and one fewer
<div> in our potential HTML soup.