Jason Knight
2 min readSep 26, 2022

--

How / why are you starting the document with a H3... and have the H1 after it? Why are you pairing H3 before the H2 inside a section? That is semantic gibberish.

H1 is THE (singular) headING (singular) that every section of the page is a subsection of. This is because H2 means the start of a subsection of the H1 preceding it. H3 means the start of a subsection of the H2 preceding it, and so-forth down the line. Thus in most cases the site title inside BODY, typically inside BODY > HEADER would be your H1, and should be the first content-bearing element!

If your H2 on the page are not subsections of the H1, you've got the wrong element being the H1. If you have an H3 before you even have H2, it's not a H3 as there's no section for it to mark being a subsection OF. Thus that H3 in your HEADER, H1 inside MAIN, and H3 + H2 are structural gibberish!

Almost as if you're choosing your headings for what they look like, not what they actually mean. Have you ever pulled up a structural outline in the validation tools?

Basically non-visual UA’s are going to choke on that HARD.

And that's before we talk the likelihood of classes for nothing, lack of media target for your stylesheet so you're shoveling your style at "all", vague/meaningless stylesheet filename, multiple NAV causing some screen readers and braille readers to wig out...

Much less you seem to be thinking black-hat SEO nonsense, instead of -- as Matt Cutts told us over a decade ago -- writing "for the user not the search engine". Anyone tells you that these structural tags, semantic tags, and the rest are "just for search" is talking out their collective arses.

Now don't get me wrong, I applaud your efforts to move towards leveraging semantic markup, but you've got a ways to go in terms of choosing your tags in a useful and accessible manner.

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse