Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Nest headings by their rank (or level). The most important heading has the rank 1 (
<h1>), the least important heading 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: Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a
<h2> is not followed directly by an
<h4>, for example. It is ok to skip ranks when closing subsections, for instance, a
<h2> beginning a new section, can follow an
<h4> as it closes the previous section.
Exception for fixed page sections
In fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area. In those cases, consistency across pages is more important.
Organize passages of text
In the following example, headings are used to only organize passages of text on a page, for example the main content:
Headings that reflect the page organization
Headings are useful for labeling page regions. Use
aria-labelledby to associate headings with their page region, as described in the label page regions section of this tutorial. If the headings are visible, the regions are easy to identify for all users.
Main heading before navigation
In this first example, the heading with the rank 1 is the first heading in the document. All other headings for structuring the page (Navigation Menu, Sidebar, Footer) are one rank lower, and so is the heading for the main content.
Main heading after navigation
In this second example, the main heading is not the site name but the content heading, which is rank 1. The subheadings in the content are rank 2 as are all the other structural headings.
Related WCAG 2.0 resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
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)
- ARIA12: Using role=heading to identify headings
- G130: Providing descriptive headings
- G141: Organizing a page using headings
- H42: Using h1-h6 to identify headings
- H69: Providing heading elements at the beginning of each section of content
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- PDF9: Providing headings by marking content with heading tags in PDF documents