Web pages must be created so that they are well-structured. A well-structured page includes headings which use the HTML heading tags of h1, h2, etc. Headings are especially important to those using screen readers and other assistive technology. Why? It allows these users to navigate web pages by structure. This means that the user can jump directly to the desired elements, such as the top level element (heading 1) and the to the next levels (heading 2, heading 3, and so on).
Guidelines for Headings
Here are some guidelines regarding the heading tags and content structure.
- Headings should be formatted using a CSS style sheet.
- Pages should be structured in a hierarchical manner. The 1st degree heading (h1) is the most important and is used for the page title. This is followed by the 2nd degree headings (h2) which are usually major section headings. These are followed by the 3rd degree headings (h3) which are sub-sections of h2 and so on.
- There should only be one h1 tag for a page and it is used for the title of the page.
- Headings h2, h3, etc. should be used in the proper sequence. For example, a page may contain one or more main topics. The main topics should be assigned an h2 tag. Any subtopics within the main topics should be assigned as h3 tag. Do not skip an h3 tag and use an h4 tag for a subtopic simply because it styles the text in a more desireable way. Why? If you go from a h2 tag to a h4 tag, this will cause confusion for assistive technology users. (This is because the screen reader keys on the heading tags to inform the user of the apge's organization.) As a result, the user may wonder what information they are missing due to the omission of the h3 tag.
- Do not use text formatting, such as font size or boldfacing, to give the visual appearance of headings. Items that are boldfaced or displayed with a larger font are not interpreted to be structural elements. Assistive technologies rely upon the literal mark-up of the page to determine the structure.
- Do not use headers to achieve visual results. For instance, you may want to highlight or emphasize an element within your content which is not a heading. To do so, use the proper tags or styles to achieve the visual results of formatting; don't use a heading tag. (Example: The first sentence in each of these bulleted items is boldfaced. No heading tags were used.)
Here are some additional resources for learning more about headings and struture: