What this example teaches
- How to keep one clear H1 for a page.
- How to avoid skipped levels and style-only headings.
- How cards, FAQ sections, and articles can keep a useful outline.
One H1
Bad
<h1>Services</h1>
<h1>Commercial inspections</h1>Two H1s can make the page topic unclear.
Better
<h1>Commercial inspection services</h1>
<h2>What we inspect</h2>One H1 names the page, and H2s introduce major sections.
Skipped heading levels
Bad
<h1>Donation page checklist</h1>
<h4>Payment form</h4>Jumping from H1 to H4 can make section relationships harder to follow.
Better
<h1>Donation page checklist</h1>
<h2>Payment form</h2>
<h3>Required fields</h3>The levels reflect the hierarchy of the content.
Headings used for styling
Bad
<h3 class="big">Free consultation</h3>The heading level is chosen for appearance instead of document structure.
Better
<p class="big">Free consultation</p>If the text is not introducing a section, it does not need to be a heading.
Best when it starts a section
<h2 class="big">Free consultation</h2>If it does introduce a real section, use the correct structural level and style it with CSS.
Card grids
Bad
<h2>Services</h2>
<h4>Audits</h4>
<h4>Training</h4>Card headings skip a level under the Services section.
Better
<h2>Services</h2>
<ul class="cards">
<li><h3>Audits</h3></li>
<li><h3>Training</h3></li>
</ul>Each card title is a subsection of Services.
FAQ sections
Bad
<h2>FAQ</h2>
<p class="question">Do you certify websites?</p>Questions can be harder to navigate if they are only styled as bold text.
Better
<h2>FAQ</h2>
<h3>Do you certify websites?</h3>
<p>No. We help with first-pass triage before qualified review.</p>Questions become navigable headings under the FAQ section.
Article or guide structure
Bad
<h1>Guide</h1>
<h2>Step 1</h2>
<h2>Step 2</h2>The H1 is generic and does not identify the actual guide.
Better
<h1>How to use an accessibility report</h1>
<h2>Start with critical findings</h2>
<h2>Create developer tickets</h2>The outline communicates the page topic and the work sequence.
Repeated vague headings
Bad
<h2>Services</h2>
<h3>More</h3>
<h3>More</h3>
<h3>More</h3>Repeated "More" headings make it impossible to tell sections apart when navigating by heading.
Better
<h2>Services</h2>
<h3>Single-page audits</h3>
<h3>Template reviews</h3>
<h3>Content editor training</h3>Each heading names the specific service, making the outline usable.
Service page structure
Bad
<h1>Services</h1>
<h3>Pricing</h3>
<h2>Contact</h2>H2 is skipped. The heading order jumps around instead of following the content hierarchy.
Better
<h1>Accessibility review services</h1>
<h2>What we offer</h2>
<h3>Single-page audits</h3>
<h3>Template reviews</h3>
<h2>Pricing</h2>
<h2>Contact</h2>H2 sections organize the service into a logical outline that matches the content flow.
Blog or article page
Bad
<h1>Blog</h1>
<h2>Article title goes here</h2>
<h4>Key point</h4>A generic H1 and a skipped heading level make the article outline confusing.
Better
<h1>How to write accessible link text</h1>
<h2>Why link text matters</h2>
<h3>Screen reader navigation</h3>
<h3>Visual scanning</h3>
<h2>How to fix vague links</h2>The article title is the H1. Sections follow a natural hierarchy matching the article structure.
What still needs human review
- Whether headings accurately describe the content that follows.
- Whether the page outline makes sense when read without visual layout.
- Whether custom components preserve heading order across templates and breakpoints.
- Whether repeated or generic headings are intentional or accidental.
Related tools
Related issue library pages
- No H1 found
- Multiple H1 headings found
- Heading levels are skipped
- Empty heading found
- Heading text appears to be generic or repeated
- Heading appears unusually long