Headings and Document Outline

Headings label the sections of a page. HTML gives you six levels, <h1> through <h6>, ranked by importance.

<h1>This is the most important heading</h1>
<h2>A section heading</h2>
<h3>A sub-section heading</h3>
<h4>Rarely needed</h4>
<h5>Rarely needed</h5>
<h6>Rarely needed</h6>

Why heading order matters

Headings aren’t just bigger text. Screen reader users often jump between headings to scan a page, the same way sighted users skim a page visually. Search engines also use headings to understand what a page is about.

That only works if the levels are used in order, like a document outline:

<h1>Blog post title</h1>
  <h2>Introduction</h2>
  <h2>Main argument</h2>
    <h3>First point</h3>
    <h3>Second point</h3>
  <h2>Conclusion</h2>

One <h1> per page

Use a single <h1> for the main title of the page, usually matching or closely related to the <title> in <head>. Everything else nests underneath it as <h2>, <h3>, and so on.

<h1>How to bake sourdough bread</h1>
<h2>Ingredients</h2>
<h2>Method</h2>
  <h3>Making the starter</h3>
  <h3>Mixing the dough</h3>

Common mistakes

Skipping levels. Going from <h2> straight to <h4> because it “looks right” breaks the outline for screen reader users navigating by heading level. Pick heading levels by structure, then adjust the size with CSS if you need a different visual size.

<!-- Avoid -->
<h2>Section</h2>
<h4>Sub-section</h4>

<!-- Better -->
<h2>Section</h2>
<h3>Sub-section</h3>

Choosing a heading level for its font size. If an <h3> looks too big, resize it with CSS. Don’t drop to <h4> just to get smaller text; that changes the document’s meaning, not just its appearance.

Using headings for anything that isn’t a heading. A bold line of text that isn’t introducing a section shouldn’t be a heading. Use <strong> or CSS instead. See Text and Formatting .

FAQ

Can I have more than one <h1> on a page?

Technically the HTML spec allows it, but one <h1> per page is the safer, more accessible convention, and it’s what most style guides and linters expect.

Do headings need to look a certain size?

No. The browser applies default sizes, but you control how headings actually look with CSS. Heading level is about structure and meaning, not appearance.