A good structure for the HTML headings H1, H2, H3 etc. is valuable for all your visitors, important for search engine optimization and not very difficult to achieve. In this article you can learn why HTML headers are so important, how to easily identify any problems and how to fix them.
Table of contents
The purpose of the HTML headings H1, H2 etc.
You’ve probably noticed that you can choose different types of headings when writing texts in WordPress. And maybe you choose headings based on how big you want them to be and how what you’re writing looks. But that’s not the right way to think about it.
Think of headings as a Table of Contents (ToC). Most ToC plugins, blocks or widgets, parse the page content, look for HTML headings and automatically create a table of contents with links leading directly to the different sections.
You should therefore not choose between H1, H2 and H3 based on how big or small your headlines should be. You should choose headings that communicate a meaningful content structure.
W3.org’s Web Accessibility Tutorials carefully describe the purpose of HTML headers:
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Link: W3.org on Page Structure – Headings
The importance of correct heading levels for screen reader users
The YouTube channel A11ycasts with Rob Dodson clearly shows how correct headings benefit users of screen readers.
In the video “Why headings and landmarks are so important” they use Apple VoiceOver for the demonstration, but a similar experience is available for PC users with NVDA or JAWS, or by using the built-in “Immersive Reader” in Microsoft Edge.
“If you look at some screen reader surveys, where they ask folks who use this technology, what’s your primary way of navigating an unfamiliar page, a lot of folks say, the first thing they do, is they try and navigate by heading.”
YouTube: Why headings and landmarks are so important
How to identify your heading levels
W3C HTML validator with outline view
You can use the W3C HTML validator to identify heading levels regardless of your choice of content editor, being it Gutenberg, Elementor, Divi or something else.
You don’t need to download any software or install a plugin. Just visit validator.w3.org, paste the URL of the page you want to test, check the outline box and press the check button.
The validator displays a list of possible HTML errors, including a “Heading-level outline” with clear indications of missing heading levels.
In the example below, the header “SerpWorx HTTP Security Headers …” should be an H3 instead of an H4.
HeadingsMap Chrome extension
This method requires Google Chrome and the Chrome extension HeadingsMap but it is really easy to use. Once the extension is installed, simply visit the page you want to test and click on the HeadingsMap icon on the toolbar.
WordPress block-editor document outline
If you create content using WordPress’ built-in block editor, better known as Gutenberg, you can use the details button to get an overview of your content.
The document outline shows the number of characters, words, paragraphs the document structure, and highlights incorrect heading levels with a yellow marker. The outline is handy as it reveals errors during the editing process.
Accessibility Checker plugin for WordPress
There are several WordPress plugins that check your posts for accessibility issues. Accessibility Checker from Equalize Digital is a favorite. One of the benefits of Accessibility Checker is that it scans for more than 40 types of issues every time you save a draft or publish a post.
A thorough check like this probably raises a lot of red flags, many of which can only be fixed by a developer, not editorially.
Headings in Gutenberg, Elementor and Divi
If you’ve identified a problem with your headline levels using one of the tools above, you can easily fix it. In Gutenberg there is a dedicated Heading Block, and the same is in the case of Elementor where they just call it a Heading Widget. In Divi it’s called Text Module where they combine both headings and body text into one element.
The principle is the same. If you need to fix the error from the example earlier, you select the heading that is mistakenly an H4, change it to H3, save, and check the outline again.
What if I want my headings larger or smaller?
That’s what styling is for. It is done in your CSS file or in your editor and varies a lot depending on which theme and which editor you use. There are also often several ways to achieve the same result, so spend some time finding the smartest one.
I strongly urge you to find out where you can globally set the sizes for H1, H2, H3 etc, so that you don’t have to change this setting on every heading you insert.
With Gutenberg, may find headline settings in Appearance > Customize, unless you use a new Full Site Editing (FSE) theme. In Divi, you have limited options there and may want to take a look at Divi’s Global Presets instead.
Need help with web accessibility?
We often find that web accessibility is an afterthought when a website has already gone live. That’s a bit of a shame. It’s easier, faster and cheaper to keep web accessibility in mind during both development and content creation.
This is not to say that it is not worth correcting errors and shortcomings later on.
If you need help understanding where the biggest pain points are in your project, what you can do yourself and what you can do better by hiring a web developer, get in touch.
