Skip to main content

Headings

Example
Live
Defines HTML headings

Usage​

Semantic ordering​

Headings must be nested by their rank. The most important heading has the rank 1 (H1), the least important heading rank 6 (H6).

<body>
  <h1>Rank 1</h1>
  <h2>Rank 2</h2>
  <h3>Rank 3</h3>
  <h4>Rank 4</h4>
  <h5>Rank 5</h5>
  <h6>Rank 6</h6>
</body>

Do

  • Start all pages with an H1 heading
  • Use only one H1 heading per page
  • Ensure sufficient colour contrast between foreground and background
  • Use headings with an equal or higher rank start a new section. Headings with a lower rank start new subsections that are part of the higher ranked section

Don't

  • Skip heading ranks. This can be confusing and should be avoided where possible. For example, make sure that a H2 is not followed directly by an H4.
  • Leave heading elements empty
  • Exceed more than 100 characters in a heading.
  • Write headings in all-caps as it can present accessibility barriers for some types of users.