How to structure headings

WCAG: 1.3.1 Info and Relationships and 2.4.6 Headings and Labels · Updated October 14, 2026

Many screen reader users navigate by jumping from heading to heading, the way sighted readers skim. Headings that are just bold paragraphs, or that skip around, make that impossible.

Rules of thumb

• One <h1> that describes the page.
• Sections use <h2>, sub-sections <h3>, and so on. Avoid skipping levels going down.
• Choose heading level by structure, not by font size. Change size with CSS.
• Do not use headings just to make text big, and do not fake headings with bold paragraphs.

<h1>Emergency plumbing in San Antonio</h1>
  <h2>Services</h2>
    <h3>Drain cleaning</h3>
    <h3>Water heaters</h3>
  <h2>Service area</h2>

Landmarks help too

Wrap the main content in <main>, navigation in <nav>, and add a skip link. Together with headings, these let keyboard and screen reader users bypass repeated menus.

Automated tools can only catch some heading problems, such as paragraphs styled to look like headings. Review the outline yourself with a browser extension that lists headings.

Step by step

1. List your headings. Use a heading outline tool or your browser’s accessibility panel.
2. Fix the outline. Make one h1, use h2 for sections, and nest deeper levels.
3. Replace fake headings. Turn bold paragraphs that act as headings into real heading tags.
4. Add landmarks. Wrap content in main and nav and add a skip link.

Automated accessibility scan. Results are informational and may not identify every accessibility issue. This service is not legal advice, a compliance certification, or a substitute for comprehensive manual accessibility testing.