Guides · HTML

H1-H6 heading hierarchy: structuring a web page

Headings are not simply larger text. They describe the logical structure of content and help readers, assistive technologies and search engines understand a page quickly.

Practical guideHTML

Start with the main topic

The H1 should express the central topic of the page. H2 headings then divide the main sections, while H3 headings develop a subtopic only when that extra level is useful.

  • Keep one clear primary H1.
  • Make each H2 correspond to a real section of content.
  • Use H3 to develop an H2, not to obtain a smaller font size.

Avoid artificial hierarchy

The heading structure should follow the content. Jumping from H2 to H4 or multiplying short headings for visual reasons makes the page harder to scan.

  • Do not choose a heading level for its appearance.
  • Avoid empty labels such as “Miscellaneous”.
  • Use headings that clearly announce the content that follows.

Read the page as an outline

A useful test is to read only the sequence of headings. Without the paragraphs, you should still understand the page’s progression and the order of ideas.

  • Read H1, H2 and H3 in isolation.
  • Check that neighbouring headings do not repeat the same promise.
  • Rewrite vague headings before adding more content.

Practical checklist

  • One clearly identifiable primary topic.
  • H2 headings for the main sections.
  • H3 used only when a real sub-level is needed.
  • No heading level selected for visual size alone.
  • An outline that remains understandable without the paragraphs.

Conclusion

A simple, coherent heading hierarchy immediately improves readability and makes future content growth easier to manage.