Why headings matter
Many screen reader users navigate web pages by jumping from heading to heading, much like a visual reader scans headlines to find the right section. A clear heading outline helps everyone understand what is on the page, find what they need faster, and grasp the relationship between sections. When headings are missing, skipped, empty, or chosen only for visual size, the page becomes harder to scan and navigate.
The H1/H2/H3 model in plain English
Think of headings as a document outline, similar to a table of contents:
- H1: The page topic. Think of it like the title of a document. In most cases, use one H1 per page.
- H2: Major sections. These are the main topics within the page content.
- H3: Subsections within an H2. They break a major section into smaller parts.
- H4, H5, H6: Deeper subsections. Use them sparingly when the content needs that level of detail.
Some modern HTML patterns use multiple H1s inside sectioning elements. This is technically valid but is still inconsistently supported by assistive technology. For practical reliability, a single H1 with H2/H3 hierarchy is the safest default for Canadian websites right now.
Common heading problems
- No H1: The page does not have a main heading. Users cannot quickly identify what the page is about.
- Multiple H1s: More than one H1 can confuse the page outline. It is not automatically broken, but it often signals unclear structure.
- Skipped heading levels: Jumping from H2 to H4 breaks the hierarchy. Users expect H3 under H2, not a deep jump.
- Empty headings: A heading element with no text creates noise in assistive technology navigation without helping anyone.
- Headings chosen for visual size: Using H3 because "that is the font size I want" rather than because it is the right level in the outline. Choose the right level first, then style it with CSS.
- Generic or repeated headings: Headings like "More," "Details," "Section," or repeated identical headings make it hard to tell sections apart.
Headings versus visual styling
The most common heading mistake is choosing a heading tag because of how it looks. An H4 is not a way to get small bold text; it is a structural signal that a subsection belongs inside an H3 section. If you want a particular font size, weight, or colour, use a CSS class on the correct heading level. If the text does not introduce a section at all, it may not need to be a heading.
Ask: "If I read only the headings, would I understand what this page is about and how it is organized?" If the answer is no, your heading structure needs attention.
Page types and common heading patterns
Blog and article pages
Use one H1 for the article title. Use H2 for main sections within the article. Use H3 for sub-points under an H2. Keep headings meaningful, not decorative.
Service pages
Use one H1 for the service name. Use H2 for major aspects of the service (pricing, process, eligibility, contact). Use H3 for details within each H2 section. Avoid headings chosen only for visual emphasis.
Card grids and listing pages
Card title headings should be at the same level as sub-sections under a parent heading. If a card grid is introduced by an H2 like "Our services," each card title should be H3. Cards should not skip levels (no H2 to H4 jump).
FAQ sections
FAQ questions work well as headings because screen reader users can jump directly to the question they care about. If "FAQ" is the H2, each question should be H3. The answer text follows as a paragraph. Avoid styling questions only as bold text when they could be navigable headings.
What automated tools can catch
Use the heading structure checker to paste HTML and see the heading outline with flagged problems. The main website accessibility checker also scans for missing H1s, multiple H1s, skipped levels, empty headings, generic text, repeated headings, and overly long headings as part of every scan.
Automated checks can spot code-level problems. They cannot judge whether the heading text is actually meaningful or whether the outline matches the content. That requires a human to read the heading list and compare it with the page.
Workflow for content editors
- Before publishing a page or blog post, paste the HTML into the heading structure checker.
- Read only the heading outline. Does it make sense as a table of contents?
- Fix any missing H1s, skipped levels, empty headings, or generic text.
- Confirm headings describe their sections, not just look right.
- Run the main checker on the published page.
See the content editor guide for daily habits that prevent accessibility regressions.
Workflow for agencies and developers
- Review heading structure in key page templates before build handoff.
- Use the heading structure checker to scan template output alongside visual QA.
- Export developer tickets from the main checker after page-type scans.
- Add acceptance criteria for heading outline in client-facing deliverables.
- Share the content editor guide with clients so they maintain the structure after launch.
What still needs human review
Even with a clean automated scan, someone needs to confirm:
- Heading text actually describes the content that follows.
- The outline works as a standalone table of contents.
- Visual-only headings (like large promotional text) are not marked up as headings unless they introduce a real section.
- Custom components, cards, and tabs preserve heading order across breakpoints.
- Content editors understand how to add headings correctly in the CMS.
Read the what automated checkers miss guide for a broader perspective.
Related resources
- Heading structure checker — paste HTML and see the outline.
- Heading structure examples — bad, better, and best heading patterns.
- Missing H1, skipped heading levels, empty headings, generic headings, overly long headings issue pages.
- Content editor guide.
- Canadian website accessibility checklist.
- Content editor printable checklist.