More than font size
When a developer makes text bigger and bold, they've made a visual heading. When they use an <h2> element, they've made a structural heading, one that screen readers can navigate, search engines can parse, and browser outline algorithms can organize.
The difference matters more than most people realize. Headings are the rows in your content garden. Without them, everything runs together. With them, each section has its place, and anyone navigating your page, sighted or not, can find what they're looking for.
The nesting rules
WCAG and HTML specifications are clear about heading hierarchy:
- Each page should have exactly one
<h1>, typically the page title or primary topic. - Headings should descend sequentially:
<h1>→<h2>→<h3>. You shouldn't jump from an<h2>directly to an<h4>. - You can return to a higher level when starting a new section: after an
<h3>, the next heading can be another<h3>(a sibling section) or an<h2>(a new top-level section). - Headings past
<h4>are rarely needed. If you're reaching for<h5>or<h6>, the content might be better structured as a list or a different layout entirely.
How screen reader users navigate
Headings are the primary scanning mechanism for screen reader users. In NVDA, pressing H jumps to the next heading. Pressing 2 jumps to the next <h2>. Users can also pull up a headings list, a table of contents generated from your markup, and jump directly to any section.
This means your heading text needs to be descriptive and distinct. An <h2> that says "Overview" followed by another <h2> that says "Overview" creates an unusable table of contents. Each heading should clearly communicate what its section contains.
The SEO connection
Search engines use heading hierarchy as a signal for content structure and topic relevance. Your <h1> tells Google what the page is about. Your <h2> elements define the major subtopics. Your <h3> elements break those subtopics into specifics.
Proper heading structure also increases your chances of earning featured snippets and passage-based rankings. When Google can clearly identify the sections of your content, it can extract the most relevant passage for a specific query, even if the overall page targets a broader topic.
Common heading mistakes
Styling over semantics
Using an <h3> because you want smaller text, even though the content is a top-level section that should be an <h2>. Headings define structure, not style. Use CSS to adjust the visual size independently of the semantic level.
Headings in components
Reusable components that include hardcoded heading levels create hierarchy problems when placed in different contexts. A card component with an <h3> works fine inside an <h2> section, but breaks the hierarchy if placed directly under an <h1>. Consider making heading levels configurable.
Missing headings in sections
A long page with no headings between the <h1> and the footer is a wall of undifferentiated content. Even if the visual design uses spacing, color, and layout to separate sections, screen reader users see none of that. Every distinct content section needs a heading.
Plant in straight rows
eiSEO flags heading hierarchy violations: skipped levels, missing <h1> elements, multiple <h1> tags on a single page. These are structural problems with clear fixes, and they pay dividends for both accessibility and search visibility.
Straight rows make a garden easier to tend, easier to harvest, and easier to admire. Proper headings do the same for your content, giving it the structure that humans and machines both need to find what they're looking for.