Headings & the Outline

HTML gives you six heading ranks, <h1> down to <h6>. <h1> is the highest rank and <h6> the lowest. Together they form the outline of the page, the same way a table of contents shows a document's structure.

A heading marks the start of a section and says how important that section is relative to the others. It is about meaning and hierarchy, not about making text look big. The default sizes are just a visual hint of the rank underneath.

Headings are how a lot of people move around a page. Screen reader users jump from heading to heading and can pull up a list of every heading to understand the layout in seconds, so a clean outline is real navigation, not decoration.

Search engines read the same outline to understand what your page is about. Get the ranks right and your structure is legible to humans, assistive tech, and crawlers all at once, from one set of tags.

Start every page with a single <h1> that names the whole page, much like the <title>. Then nest sections by rank: an <h2> for each major section, an <h3> for a subsection inside it, and so on. The rule is to go in order and never skip a level on the way down, so <h1> then <h2> then <h3>, not <h1> straight to <h3>. Coming back up is fine: you can close an <h4> subsection and start the next <h2>.

Choose a rank by where the section sits in the hierarchy, never by how the text should look. If a heading is too big or too small, change its size with CSS font-size, not by switching to a different heading level.

One thing that surprises people: the sectioning elements like <section> and <article> do not adjust heading ranks for you. The old document outline algorithm was never actually implemented in browsers or screen readers, and the default style that shrank an <h1> inside a <section> was removed from the standard in 2025. So you still set the correct <h1> to <h6> yourself, even inside a <section>.