Heading tags - From H1 to H6

Published on Friday, 3 March 2023.
At 286 words, this article should take about 2 minutes to read.

I’ve seen a lot of headings related horrors in my time building websites.

p>strong is not a heading

Firstly, you should be using actual heading tags for your headings.

<p>
  <strong>Heading</strong>
</p>

This may look like a title when rendered but it really isn’t. Screen readers will have no idea it’s a heading, for example.

In my experience, the main reason this happens is a lack of education. Content managers often write their copy in Word or Google Docs and paste it into your CMS. Content managers are often completely unaware they should be using anything other than bold text (sometimes in block capitals - shudder!)

h2 is not a sub-title

This may be acceptable. I'd avoid it if possible though! 😆

<h1>Headings</h1>  
<h2>A deep dive into the HTML spec</h2>

Whatever you do, please don’t do this;

<h1>Something</h1>  
<h2>is about to happen!</h2>

Just because the default styles for Headings give them a larger font size than basic body copy doesn't mean we should be using them for all "large text".

How does the Heading hierarchy work then?

You can think of headers as like indenting bullet-points;

• h1 Dogs
  • h2 Corgi
  • h2 Daschund
    • h3 Short-haired Daschund
    • h3 Long-haired Daschund
    • h3 Wire-haired Daschund
• h2 St Bernard
• h2 Weimaraner

Information sits beneath headers of equal importance. In the example above, breed names are all equal. Hair types sit beneath breed names but are equal to one another.

<h2>Daschund</h2>
The tiny loveable daschund comes in three varieties...

<h3>Short-haired</h3>
This variety is ideal for allergy sufferers as the short hair doesn't shed.

Conclusion

Just because something looks like a heading, doesn't mean it is. There are rules around how and when we use <h[1-6]/> tags and these need to be communicated to your Content Managers.

Fin

onward-journeys module