Accessible Headings
Group content for better understanding with a logical heading structure.
Use descriptive headings to group similar information to make content easier to understand. It is like an outline that helps people quickly follow along and find what they need.
Start with a heading level 1 for the page or document title. Break the rest of the page into sections for different topics and use smaller headings for these sections. Make sure headings clearly describe what is in the section. Do not skip levels: heading level 2 goes under heading level 1, and heading level 3 goes under heading level 2, and so on.
Website Heading Styles
To illustrate a logical heading style, this page implements headings level 1 through 6. The page title, "Accessible Headings" appears as an <h1>
or Heading Level 1 element. "Website Heading Styles" appears as an <h2>
or Heading Level 2 element.
Heading Level 3
If a topical section of a page or document can be divided into subsections, each subsection could be grouped under an <h3>
or Heading Level 3 element.
Heading Level 4
If a subtopic section of a page or document can be divided into smaller sections, these sections could be grouped under an <h4>
or Heading Level 4 element.
Heading Level 5
If a section grouped under a Heading Level 4 can be divided into smaller sections, these sections could be grouped under an <h5>
or Heading Level 5 element. While it is unlikely a website page will include a Heading Level 5, it may be useful for a large document.
Heading Level 6
If a section grouped under a Heading Level 5 can be divided into smaller sections, these sections could be grouped under an <h6>
or Heading Level 6 element. While it is unlikely a website page will include a Heading Level 6, it may be useful for a large document. Heading Level 6 is the smallest heading level, and should only be used after all the other levels.