Heading ranks
Headings communicate the organisation of content on a page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation and to understand the relative importance of the information.
Heading rank
The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>).
- Rank 1 (
<h1>) - Rank 2 (
<h2>) - Rank 3 (
<h3>) - Rank 4 (
<h4>) - Rank 5 (
<h5>) - Rank 6 (
<h6>)
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.
Skipping heading ranks can be confusing and should be avoided where possible, for example, make sure that a <h2> is not followed directly by an <h4>.
It is okay to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
Example of content structure
Heading 1– Page titleHeading 2– Section titleHeading 3– Sub-section titleHeading 3– Sub-section titleHeading 3– Sub-section title
Heading 2– Section titleHeading 3– Sub-section titleHeading 4– Sub-section titleHeading 4– Sub-section title
A little like Russian dolls, if that helps you to take anything from this.
Exception for content in associated page sections
If a page has associated content in say a sidebar, the heading ranks should not take into consideration the structure of this content. It is more important to have consistency in the main content on the page.
Related WCAG resources
- 2.4.6 Headings and labels: Headings and labels describe topic or purpose. (Level AA)
- 2.4.10 Section Headings: Section headings are used to organize the content. (Level AAA)