HTML5 – HGROUP For Titles And Subtitles?

When writing a page or a post in the WordPress Gutenberg editor, H1 tags are automatically wrapped around the title. This is straightforward. But when you’re building a home page or some sort of landing page or sales page, you often end up needing a title and subtitle which appear one after the other.

I found some real-life examples of home pages where a headline and subtitle appear consecutively. Here are the screenshots.

I usually write these as an H1 directly followed by an H2. But is that right?

Liz Jamieson – WordStamped

Does it make sense to search engines and accessibility tools to place an H2 directly after an H1? I decided to check out how it was done on a well-known community run website dedicated to spreading the word of the best online accessibility practices.

I’ve found the A11Y Project to be the best resource online for all things accessibility as well as for making real-world sense of the communications disaster that is sometimes the HTML5 specification.

A11Y Project Home Page Titles And Subtitles

The first thing I saw was that the A11Y Project included the hero section of the home page within the header tags. Normally I would place the hero section into the main content. I think I will continue with that practice as on a home page the hero is to my mind part of the main content.

Within the hero section they had placed the title into H1 tags and the subtitle (styled to be large, but smaller than the title), was actually in p tags.

OK. So having come up with the hgroup tag in HTML5, the World Wide Web Consortium (W3C) some time later changed their minds and killed it off. It’s not the only idea they’ve published and then later removed. The problem with doing this is half the world starts to use or write about using the W3C recommendations and then don’t get the memo when its deprecated.

The A11Y Project clearly did get hear about it, and are avoiding the deprecated hgroup tag. Further, they back this up by saying:

Better not use <hgroup> … it hinders assistive technology, and it isn’t supported by browsers.

Rian Teitveld, A11Y Project

Other Ways To Implement Titles And Subtitles

Here are some other examples you could think about using. Personally, I will be using something like the third option, with h1 and p elements grouped inside an enclosing header element, probably all within a section re-tagged as an article.

I will give the section a class of something like hero, and then I’ll be able to target the h1 tags and p tags within that section using CSS, to style them to be larger or of different colours – or change their fonts.