hgroup for semantic headings / TIL / From the Python and Django developers at Lincoln Loop

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:

A card component with a heading that says Services, followed by some brief supporting text

Here's some potential HTML for this card:

<section class="card">
  <hgroup class="card-header">
    <h2>Services</h2>
    <h3>Design &rarr; 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.