Status: This is an in-progress, unapproved draft.
Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.
Assistive technologies and some browsers provide mechanisms to present a list of headings to the user that allows users to jump to individual headings. Headings also provide visual clues that help to skim the page or find a specific section, this is especially useful for people that are easily distracted.
It is good practice to nest headings properly. When stepping down through headings, skipping levels should be avoided. That means that an
<h1> is followed by an
<h2> is followed by a
<h3> etc. When stepping up through headings it is perfectly legitimate to skip any number of levels.
Note: HTML5 has introduced an outline algorithm that assigns heading levels based on how deep sectioning elements are nested inside each other, regardless of the actual heading level. At the time of writing, this is not supported by any browser or assistive technology and should not be used.
Organize main page content
When looking at the content, the highest available heading level should be used to mark up the heading of the main content, as this makes it easy to discover. Ideally use an
Organize page sections
Similar to landmarks, headings can be used to give users a way of navigating through web pages. To do this, each section of the page (for example navigation) has its own heading, describing what can be found in the section. Often the heading levels are similar to this example:
The first heading in such cases is usually the page name. In this case, the heading of the actual content is hard to find between headings that describe the page structure. If possible use labeled landmarks to mark up the page structure as the provide more meaning to assistive technologies.
Related WCAG 2.0 resources
The following WCAG 2.0 resources are directly related to this page. Relationship to WCAG 2.0 provides more background information.
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