Headings help users understand what information is contained on a page and how it is organized. If headings are clear, descriptive, and consistent across pages, users can more easily find the information they are looking for.
Who do Headings Help?
- Everyone benefits from pages that use meaningful headings. Headings provide structure and predictability, they can assist with improving search engine rankings, and they make it easier to maintain human-readable and future-friendly CSS.
- People who read slowly or who have limited short-term memory are more able to determine what content is contained in different sections of a page.
- People who are blind often approach a page for the first time by skimming through the headings to get a sense of the page’s content and structure. Then they navigate by headings to get quickly to the content they are interested in accessing.
- Keyboard-only users may navigate by headings in order to reduce keystrokes.
What Does Using Good Heading Structure Mean?
Just like headings in a newspaper or magazine, headings on a web page structure the content, telling users what information is contained on the page and how it is organized. Different fonts, colors, and/or sizes generally denote headings at different levels, thus directing users to the primary, secondary, and tertiary content.
Because people who are blind can't see the visual formatting of headings, it is imperative that the relationships communicated by using different fonts, colors, and sizes be communicated by using correct html heading-level (semantic) markup.
Here are some good rules of thumb when designing the structure of a web page:
- Apply heading markup (H1 – H6) to all visual headings.
- Use headings to denote a page’s structure rather than for visual effect.
- Use only one main heading, H1. This often doubles as the page title.
- Think of headings as an outline of the page's contents. Subheadings of the H1 are H2s and subheadings of the H2s are H3s, and so forth.
- Try not to skip heading levels, but if you must do so, do so predictably across the site.
- Make sure all headings have associated content, i.e., no empty headings.
- Do not use headings on form labels.
- Within a website, be consistent in how headings are applied, especially if there is similar content on multiple pages.
How to Check
The Firefox Web Developer Toolbar and Internet Explorer Web Accessibility Toolbar contain tools for displaying heading structure. Note that the directions below pertain to current versions of these two tools, but we expect that future versions will continue to retain this functionality. There are a number of developer tools that support reviewing the use of headings, so be sure to check your preferred development environment, such as Chrome or Firefox, to find alternatives. Here are some examples.
When using the Firefox Web Developer Toolbar v.1.2.5:
- Information > View Document Outline
- Outline > Show Element Tag Names When Outlining, then Outline > Outline Headings
When using the Internet Explorer Web Accessibility Toolbar:
- Structure > Heading Structure
- Structure > Headings