use-valid-heading-hierarchy

Summary

Use HTML heading tags (<h1> - <h6>) to create a logical outline of the page content. Do not choose headings based on font size; choose them based on structure.

Rationale

• Accessibility: Screen reader users navigate by headings. Skipping levels (e.g., h2 to h4) creates confusion.
• SEO: Search engines use headings to understand the main topics of the page.
• Consistency: Enforces a consistent document structure.

Guidance

1. One H1: Each page should have exactly one <h1> representing the main title.
2. Sequential: Do not skip levels. An <h3> must follow an <h2> (or another <h3>).
3. No Styling: Do not use <h5> just because you want "small bold text". Use CSS for styling.

Examples