Heading hierarchy

Proper heading structure

Heading hierarchy starts with one H1 (the main topic), followed by H2s for major sections. Under each H2, use H3s for subsections. Under H3s, use H4s. Never skip levels—going from H2 directly to H4 breaks the logical structure.

Think of headings like a document outline: H1 is the title, H2s are chapters, H3s are sections within chapters, H4s are subsections. This hierarchy makes content scannable and navigable.

Why hierarchy matters for accessibility

Screen readers use heading structure to navigate pages. Users can jump between headings to quickly find relevant sections. Breaking hierarchy—skipping levels or using headings for visual styling rather than structure—makes this navigation confusing or impossible.

Proper accessibility means using headings for structure, then styling them visually with CSS. Don't use H3 just because you want smaller text—use the structurally correct heading level and adjust its appearance separately.

SEO benefits of heading hierarchy

Search engines use heading structure to understand topic organisation and content relationships. Clear hierarchy signals well-structured, thoughtfully-organized content. Including relevant keywords in H2 and H3 headings (naturally, not forced) helps search engines understand subtopics covered.

Good hierarchy also improves featured snippet chances. Google can more easily extract well-structured content with clear section headings for snippet display.

Implementation in every build

We treat heading hierarchy as essential, not optional. Every page we build uses proper H1-H6 structure. Content editors sometimes break this accidentally—our QA process catches hierarchy violations before they reach production.