In the example above, the main title of this section is ‘Security’. However, because the design dictated that it should be visually smaller than the heading below it, it has been given an H4 tag and the title below it an H2.
That means that in terms of hierarchy the title ‘Don’t just comply with compliance, surpass it’ comes first and the title of ‘Security’ comes after it. And that’s ignoring the fact that headings skip a level from H4 to H2.
This is how I am seeing headings being misused all over the web. It seems like headings have been misunderstood to mean a heading with the largest font should be an H1 and a heading with the smallest font should be an H6.
If the example above was using headings correctly, the design should stay the same, however, the title of the section, which is ‘Security’ should be an H2 (because there should only be 1 H1 on a page and it should be the title of the page, so we can assume there is already an H1). ‘Don’t just comply with compliance, surpass it’ should be an H3 if we agree that is a heading that lives within the security section. Finally, the titles of the 4 sections below should be H4’s as they live within the ‘Don’t just comply with compliance, surpass it’ section.
What can we do to fix this
If you’re a designer reading this, start annotating the headings in your designs with what heading tag each should have. Remember that headings are used to denote hierarchy not presentation. The main title of the page should be an H1, the main sections of the page should be H2’s and title within each section should start at H3 and so on.
If you’re a developer reading this, stop using heading tags as a way of forcing a certain font size or presentation style. Create heading classes for this. You could create a set of CSS classes ranging from headingLarge to headingSmall and use those when you need to change the way a heading looks without changing the semantics of the code.