Skip to main content

Headings

Headings (<h1>–<h6>) aren’t just for visual styling — they provide structure and meaning to assistive technologies like screen readers. A well-ordered heading hierarchy helps users understand the layout of a page and navigate it efficiently.

Examples​

✅ Correct

<h1>Page Title</h1>
  <h2>Main Section</h2>
    <h3>Sub-section</h3>
  <h2>Another Section</h2>
    <h3>Details</h3>

✅ Correct

<!-- Accessible templating example (Handlebars / JSX-style logic) -->
<h1>{{page.title}}</h1>
{{#each sections}}
  <h2>{{this.heading}}</h2>
  {{#each this.subsections}}
    <h3>{{this.heading}}</h3>
  {{/each}}
{{/each}}

👍 Do's​

  • Use only one <h1> per page — it defines the main topic.
  • Follow a logical order (h1 → h2 → h3, never skipping levels).
  • Use headings for structure, not styling — don’t use <h3> just because it "looks right".
  • Ensure template-generated headings stay consistent across pages.
  • Keep headings descriptive (avoid vague titles like "Info" or "Section").

👎 Don’ts​

  • Don’t skip levels (h1 → h3 without an h2 in between).
  • Don’t use <div>s or <span>s styled as headings — screen readers won’t detect them.
  • Don’t use headings for emphasis only — use <strong> or CSS instead.
  • Don’t repeat identical headings in the same level unless they are clearly grouped.

Extras​

  • Use ARIA landmarks (<main>, <nav>, <aside>) with headings for even better accessibility.
  • To visually hide a heading but keep it readable by screen readers, use:
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
<h2 class="visually-hidden">Navigation</h2>
<nav>...</nav>