We come across a lot of DIY websites (and some professional ones too) that are using HTML headings incorrectly. If this were just an aesthetic problem, it wouldn’t bother us so much. Unfortunately, there are some pretty serious consequences involved like making your site non-navigable for those who rely on screen readers and other assistive technologies. As if that wasn’t bad enough, your SEO can take a big hit.
What are headings?
Heading tags (or just headings) are used to organize your website’s content in a meaningful way. They range from h1 (largest, most broad label) to h6 (smallest, most defined label). Think of it like outlining a paper – similar to what many of us did in high school or college. You start with an introduction or main idea, followed by subsections with pertaining details. Within each subsection, you may or may not have more subsections. Here is an example of how a paper outline would be organized with headings (heading levels are in parentheses):
See the Pen
HTML Headings by Kristen (@renfrodesigndev)
on CodePen.
Like an outline, you should use headings to create structure on your page or post. They are not to be used for aesthetics (size, color, font etc.).
How Do Headings Affect SEO?
The hierarchy that headings create help search engines understand what your content is about. This gives them the ability to index your page and show it on the search results page when someone searches for relevant information.
When your content is well organized and easily scannable, it not only benefits web crawlers and search engines, but it’s also attractive to your readers. People enjoy and can digest content when it’s organized with clear subsections. They can readily scan to find the information they are looking for and reference it easily. When your content is valuable in this way, it can lead to an increase in traffic. This all in turn can increase your page authority, which can increase your SERP ranking.
How Do Headings Affect Assistive Technologies?
Headings are navigable with a screen reader and help visually impaired users determine what the page is about along with the exact location they can find the information they are looking for.
It’s crucial that you maintain a logical sequence of your headings (think back to the paper outline) to avoid creating a confusing experience for visitors. For example, you shouldn’t have an h3 above an h2 unless it’s nested (indented in our example above) in another h2. Screen readers move in a semantic way, starting with h1 and working down to h6.
You should strive to create an equitable experience for all of your users, not just because it’s the right thing to do, but also because you want to reach as many of your ideal customers or readers as possible. Leaving them out means missing out on an opportunity to include them in your community or in some instances, leaves you open for ADA lawsuits.
TLDR;
- Headings are important for chunking your content into digestible, scannable sections for your readers, including those who use assistive technologies.
- Proper use of headings in your pages and posts also create digestible content for search engines, letting them know exactly what your page is about.
- Assistive technologies rely on the semantic use of HTML headings (h1-h6). When you don’t use headings in this way, it’s confusing and makes your content hard to scan through and understand.
- Strive to create an equitable experience for your users to reach the largest audience possible and avoid legal ramifications.
