Heading Structure

What is a heading?

A heading is an HTML element used to label the beginning of a section of content, like the title of this page! Using headings allows assistive technology users to quickly navigate to each section and know its relationship with other content on the page. Headings range from <h1> (the highest) to <h6> (the lowest). 

Implementing Accessible Headings


In general, you should use a heading whenever you start a new section (or subsection) of content. Take the following example. 

 Text: Heading 1 Cal Poly Pomona, Heading 2 Campus, Heading 3 Dining Locations, Heading 3 Housing, Heading 2 Students, Heading 2 Faculty.

Would it make sense to include the “Students” heading as a heading level 3 under “Campus”? Probably not. If you come across information on your website that seems like either a new topic or a specific part of the current topic, it is best to create a new heading to organize the page. 

DO use descriptive heading text. While some heading text may make sense in the context of your page, users of assistive technology often navigate using just the headings outside of context. Having non-descriptive heading text (or sentence fragments such as “Here you can”) makes the page less accessible for everyone. 
 
DON’T skip heading levels. While it may be tempting to skip heading levels because a topic seems much less important than its parent section, this can cause confusion for screen reader users who may think that they have missed a section. In the example below, heading level 3 is skipped between “Campus” and “Dining Locations”. This creates an illogical structure that may lead to difficulty in navigating the page.
Text: Heading 1 Cal Poly Pomona, Heading 2 Campus, Heading 4 Dining Locations, Heading 4 Housing, Heading 2 Students, Heading 2 Faculty.
Is it ever okay to skip heading levels? Only if there is content that is repeated on multiple pages. There, continuity is more important than heading organization.