Heading tags (also called header tags or H tags) are a semantic tool for providing structure to web content. If you’ve researched search engine optimization (SEO) or reviewed the Web Content Accessibility Guidelines (WCAG), you’ve probably read about the importance of heading tags.
Nevertheless, these HTML elements are often used incorrectly, which can create significant accessibility issues. Here’s why: Many people use headings to scan long-form web content for information. You probably do this, too — after reading this introduction, you might read through a few of the headings below to determine whether you’re making any mistakes with your tags.
When heading tags are misused, some users may be unable to use them for their intended purpose. That’s especially true for people who use screen readers and other assistive technologies. To provide your users with the best possible experience, review your header tags regularly — and make sure you’re not making one of these common mistakes.
Don’t use header tags out of sequential order
Heading tags should follow a standard sequential order:
- H1 Tags - These tags describe the purpose of the content. In many cases, the H1 tag is identical to the page title tag.
- H2 Tags - These tags break up the content below the H1 tag into smaller subjects.
- H3, H4, H5, and H6 Tags - Each lower subheading breaks up content into more digestible sections, going into greater detail about the topic. An H3 tag breaks up the content below an H2 tag, while an H4 tag breaks up the content below an H3 tag.
To put this another way, headings and subheadings function like the sections of a college essay. The H1 is the most important tag, while the H6 is the least important. The order of the tags is extremely important because real-life users expect header tags to follow a consistent, logical order. If the headings are out of order, a user might assume that they’ve missed important information.
Don’t choose a subheading tag simply because it looks great on your page — some users can’t perceive content visually, and heading tags can be styled with CSS to achieve any desired aesthetic.
Read: Why Headings Aren't Simply Style Elements
Don’t write vague heading tags
Your heading tags should incorporate relevant keywords that explain the purpose of your content. A vague heading like “More Info" doesn’t give enough context — “Read More About Our Plumbing Services" would be much more effective.
Remember, header tags are powerful SEO signals. Search engines will look for keywords in your headings, and sites that write descriptive tags may see more organic traffic. Most search engines give more preference to primary headings, so your H1 tags are especially important for SEO, while subheadings like H5 and H6 are less important. That’s another great reason to use your tags in logical order.
With that said, your primary goal is to write your headings for real users, not search engines. When writing, ask yourself whether your headings provide enough context to allow a user to find the information they need.
Read: How Headings Help People with Disabilities Navigate a Website
Don’t write extremely long header tags
A person with vision disabilities may use a screen reader to scan through headings. The screen reader will read each tag in its entirety before moving on to the next; while the user can pause the audio and skip to the next tag, extremely long subheadings can negatively affect their on-page experience.
Many content creators recognize the importance of header tags for SEO, so they try to add as many keywords as possible to their headings. This can make your page look messy, especially when users magnify their screens — an important consideration for digital accessibility. Keep your heading tags concise and descriptive.
Read: Writing Clearer Content That Benefits Accessibility Expands Your Audience
Don’t try to use every type of heading on every page
Every page should contain an H1 tag, and most pages will contain H2s. On longer blogs, H3s can help to break up content, but lower-level header tags are rarely necessary. Using more headings won’t always improve your page’s structure, and they can make your page less useful for some people with disabilities.
Heading tags can help to break up longform content into easily digestible sections, but other tools may be preferable. Consider adding unordered or ordered lists to your content. Media can also help to break up longer pages (as long as you provide text alternatives for any non-text content).
Read: Tips for Making HTML Lists Accessible
To use header tags appropriately, make sure you understand their purpose
Page organization is crucial for accessibility. Well-written subheadings can improve the browsing experience for people with vision, mobility, and neurocognitive disabilities — along with users who don’t have disabilities that affect their browsing habits.
When writing header tags, ask yourself these questions:
- Does my content have large blocks of text? If so, could I use headings, lists, or other tools to improve readability?
- Could a visitor understand the purpose of my content by simply reading the headings?
- Do the headings use relevant keywords?
- If I resize my page to 200%, are the headings still legible?
- Do I use subheadings consistently throughout my website?
Content optimization can expand your site’s audience and improve user retention, so audit your subheadings regularly. For more web accessibility tips, download The Ultimate Guide to Web Accessibility, our free 29-page guide to accessible design.
