When you’re building a brand-new website, it’s easy to ignore the best practices of HTML. Your goal is to create beautiful, engaging content that keeps viewers' interest — but if you don’t pay attention to accessibility, you may make mistakes that limit your audience.
Semantic HTML keeps your website organized, and it’s an essential tool for ensuring that your content works well when accessed with different browsers and technologies. For novice web developers, one of the most common HTML mistakes is misusing subheading tags, which are intended to divide long pages into more digestible sections.
If you’re working in a content management system (CMS) like WordPress, you might choose subheadings based on their visual appearance — but that approach can create barriers for some users. Below, we’ll explain why (and provide some best practices to keep in mind while creating your content).
Why You Can’t Skip from H1 to H3 (Or H4, or H5…)
Subheadings play an important role in describing the semantic structure of your website. An <h1> tag, for instance, tells your users — and search engines, and assistive technologies — that the heading contains crucial information about your page.
An <h2> tag should divide the content under the <h1> tag into smaller sections. The <h3> tag divides <h2> tags into smaller sections, and so on. Here’s an example of subheading tags in proper sequential order:
<h1>Types of Cars</h1>
<h2>Sedans</h2>
<h3>Four-Door Sedans</h3>
<h3>Two-Door Sedans</h3>
In this example, each subheading would have enough content to justify the use of the subheading tag. In other words, you wouldn’t use subheadings for a simple list of items.
Related: Tips for Making HTML Lists Accessible
How Improper Subheadings Affect Users with Disabilities
If you jump from an <h1> tag to an <h3> tag — or any other type of subheading — you introduce unnecessary accessibility issues.
People who use screen readers (assistive software that converts text to audio or braille) often scan through subheadings to find the information they need. When subheadings appear in the wrong order, these users may believe that they’re missing out on important content.
And if a visitor chooses to ignore your website’s CSS (Cascading Style Sheets) to style the text in a certain way — a common practice for people with neurocognitive and vision-related disabilities — your website might look unprofessional. At the very least, you’re telling your visitors that you didn’t think about accessibility when structuring your content.
On the internet, first impressions matter. The best practice is to define your website’s structure using proper HTML (including sequential headings), then use CSS to style the visual appearance.
Related: How CSS Benefits Accessibility
WCAG Requirements for Subheadings
Published by the World Wide Web Consortium (W3C), the Web Content Accessibility Guidelines (WCAG) are the consensus international standard for digital accessibility.
WCAG 2.1 does not require the usage of headings, but when headings are present, WCAG 2.1 Success Criterion 2.4.6, “Headings and Labels,” requires that headings describe the “topic or purpose" of content. While the W3C strongly recommends proper nesting for headings, WCAG does not explicitly require subheadings to appear in a logical order.
Of course, we’ve already established that proper heading order is important — so why doesn’t WCAG require them?
The answer is slightly complicated: Many websites use subheading tags for sidebars and other fixed content that appears on multiple pages. People who use screen readers and other assistive technologies will logically expect those subheadings to remain consistent from page to page.
If you write a blog with several <h3> tags and you’re also using <h3> tags in your navigation menu, you’re technically using headings out of order — but it’s far more important to maintain consistent navigation controls from page to page.
Related: Why Consistency is Important to Accessible Design
Quick Rules for Using Headings for Accessibility
With all of that information in mind, here are a few tips for structuring your content:
- Always use headings in sequential order within your content.
- You may skip heading ranks when closing subsections of your content. For example, you can skip from <h4> to <h2>, but you shouldn’t skip from <h2> to <h4>.
- If fixed sections of content (such as sidebars and footers) use headings, do not change those headings from page to page.
- Make sure your headings are descriptive. For example, “More Information" doesn’t provide the visitor with useful information.
Following these rules will help you build a beautiful, useful website that accommodates your audience’s different abilities and preferences. By utilizing headings properly, you’ll also benefit from improved search engine optimization (SEO) — a nice secondary benefit.
For more guidance, download the Ultimate Guide to Web Accessibility or send us a message.
