Headings revisited

Image with blocks which resemble document structure

For some time we have now two HTML standards, one by W3C and one by WHATWG. Since HTML 5.2 became recently a recommended standard and I’ve been playing with Gutenberg I thought that it’s good time to revisit h1 dilemma.

WHATWG and W3C diverge on this topic a lot. According to WHATWG you can use h1 tags as the most important thing in a block:

According to W3C standard and my tests with VoiceOver this is problematic because at least VoiceOver doesn’t know how to parse it in a way that both h1 tags aren’t on the same level. Currently VoiceOver tells me that both are heading level 1¬† on this demo.

Semantically WHATWG documentation makes sense when it comes to parsing content for search engine crawlers. I don’t want to create websites for crawlers, I want to create websites for humans. And that means rethinking how I use WordPress.

It makes sense to use on the front page h1 tag for the name of the website. Does it really make sense when it comes to individual pages? Frankly, I am not sure because when I am looking at a post the most interesting thing for me there is the name of the post, name of the website is secondary.

At the moment the theme used on this website is based on underscores starter theme and at least the version which I forked has in the header a switch which allows h1 on home page and p tag everywhere else. It may or may not be ideal but it makes sense when I am using a screen reader.

On the home page I’ll have a tag structure1:

And everywhere else:

I will have to consider how many changes I’ll have to do backwards because there are posts with a lot of h1 tags and my spoons are limited. But for the future posts I’ll do my best to stick with this structure.

  1. When I’ll update the whole theme, not just the landing page animation. I am working on some big changes at the moment.