Yes, I should maybe apologize for the word play with heading as direction in my own heading title but I thought it will break the initial ice in a funny way. I may be wrong but anyway – I decided to write some research based thoughts on the heading elements in the webpage or web application context.
Heading elements are a prehistoric member of the HTML elements community and according to W3C they were included at the beginning of the standard because they were a part of Standard Generalized Mark-up Language (SGML) that HTML is strongly based on (link opens in new window).
Why do we even use headings – well to project logical hierarchy that enables the user to quickly browse different parts that are divided with headings. Some assistive technologies, like for example screen-readers, even enable their users to navigate by headings alone.
So – let’s be honest – we should use headings and we should respect best practices for them
Like this subtitle says – we should not avoid headings as they add to the segmentation of content, especially when it is long – as humans prefer to cope with partial data when consuming information.
I am not encouraging anybody against the use of headings in any way, I just want to explain that there are some myths there that should be understood before judged.
me, trying to explain that I support proper use of headings.
Breaking the myths of correct versus wrong heading usage
Let’s begin with short summary that may come as a shock for the reader first;
- We are allowed to use multiple h1 headings on the same site – it is not a accessibility failure and google mentions that they can still understand the page well enough!
- We are even allowed to not use headings at all – but I do not recommend it though.
- We can even skip h1 and begin with h2 if we want to. No problem for accessibility and no problem for search engines.
This list may come as a shock to somebody, maybe you are even wanting to shout or be really passionate about it. I must say I was surprised as well.
But the statements are correct (please see the sources that confirm these statements) although I would not consider them when building anything for the web, because the headings add so much semantics to the whole design and even more – they can be used as a means for navigation for assistive technology users which helps them to scan the content more quickly.
And yes – search engines do not rely so much on the headings as they did years ago – I suppose they have built on experiences with keyword stuffing and other black-hat SEO methods that tried to abuse all, otherwise useful, semantics they could get their hands on.
In case you want to understand more about headings – welcome to investigate the sources I provided below.
But please – do use headings in the semantic way and think of how best can they be descriptive
Wrong use of headings can be a real accessibility issue and you should really avoid next things:
- Headings that are not describing the content in a meaningful way – please avoid stuffing keywords in the headings – make them count. They should be descriptive enough also if taken out of context because they are also used as navigation controls for some assistive technology users.
- Styling normal paragraphs to look like headings – again – please use correct semantics for the headings – and not just some styles that make normal paragraphs look like headings. I must explain again – headings are useful for navigation too.
- Do not use headings only for visual effect! Use CSS for that!
Using meaningful, descriptive headings means a lot for all users and is a key to good readability and usability. So – please do not stop using them!
me, again, advocating the use of headings.
Sources to explain my thesis in details
- Official W3C tutorial on headings (opens in new window),
- WCAG Understanding Success Criterion 2.4.6: Headings and Labels (opens in new window),
- WCAG 2.1 Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content (opens in new window),
- WCAG 2.1 Providing heading elements at the beginning of each section of content (opens in new window),
- WCAG 2.1 Understanding Success Criterion 2.4.6: Headings and Labels (opens in new window),
- WCAG 2.1 Success Criterion 2.4.10 Section Headings AAA (opens in new window),
- The Paciello Group – Headings & Accessibility (opens in new window),
- Google Webmasters (21.Dec 2017) – multiple H1 tags on a page is just fine (opens in new window),
- Ask Google Webmasters (3.Oct 2019), John Mueller discusses how to handle multiple H1 headings and accessibility (opens in new window)
