Having correctly structured HTML headings in documents is essential for helping people using accessibility technologies find their way around your webpage. But what are headings, and why are they so important.
Video explaining HTML Headings
What are HTML Headings
HTML has six heading levels labelled
<h1> being the most important heading and <h6> being the least important.
<h1> heading is only used once per page and represents the main heading of the page. The remaining levels can be used as many times as needed but must be used in order.
How to write Headings in HTML
The code for HTML headings is as follows:-
<h1>Main Heading Text</h1> <h2>Section Heading Text</h2> <h3>Subheading Text</h3>
Why you should use headings
When a sighted person looks at a webpage, they use factors such as the size, colours, fonts and position of the text to get clues to how the page is structured.
In this example, the main heading <h1> is the largest, centred and bold. In addition, the section headings
<h2> are bold and have an underline, and the subheadings
<h3> for each section are bold.
This is what the HTML code looks like for the heading structure in this document.
<h1>Maine Coon</h1> <h2>History</h2> <h3>Origin</h3> <h3>Cat Shows</h3> <h2>Description</h2> <h3>Markings</h3> <h3>Habits</h3> <h3>Personality</h3> <h3>Size</h3> <h3>Diet</h3> <h2>Health</h2>
When a person uses a screen reader, they have access to none of these navigational clues. Screen readers read text on the screen; they have no way of knowing what is and is not important. So we have to tell them the structure of the document, one of the ways of doing this is by using HTML headings. The screen reader user can then use navigation tools built into their screen reader to move around the page more efficiently.
Using headings correctly will also help search engines to know what is important on the page. There are several tutorials available on YouTube about headings and search engine optimisation.
Common mistakes with headings
Using formatted text instead of headings
In this example, the document on the left appears to use headings; however, the text has been formatted to look like headings. This means to a screen reader, it has no structural information and looks like a mass of text on the right.
Using headings for things that arn’t headings
It’s quite common on web pages for the first paragraph of an article to be in a larger font, and bolder than the rest of the body text. However, in this case,
<h2> level heading has been used to achieve this. If you need to format a paragraph, then this should be done with the stylesheet for the web page
Using Headings out of Order
The headings should be in a hierarchical order but in this case, we can see that
<h4> comes after
<h1>, we’ve got
<h2>, but then
<h3> is missing.
Ways to check your headings
- Headings Map for Firefox – https://addons.mozilla.org/en-US/firefox/addon/headingsmap
- WAVE Accessibility Extension – https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
- NVDA screen reader – Windows – https://www.nvaccess.org/download/
- VoiceOver screen reader for mac – Available from system preferences > accessibility > VoiceOver