Headings

<h1> - <h6>

The heading elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

  • Avoid using heading elements to resize text. Instead, use the CSS font-size property
  • Avoid skipping heading levels: always start from <h1>, followed by <h2> and so on
  • Use only one <h1> per page or view. It should concisely describe the overall purpose of the content

Full reference at MDN Web Docs: <h1>–<h6>: The HTML Section Heading elements

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Accessibility concerns

A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

Wrong

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Correct

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>