Headings
Heading structure is used on web pages to organize information on a page into an outline format. Assistive technology, like screen readers, and some browsers provide a list of these headings so the user can jump to their choice of topics. Headings add structure and meaning to web pages by labeling content and indicating their relative importance to each other. When creating web page content, keep in mind that a screen reader will assign a hierarchy to content using headings.
Best Practices
- Do not use headings to decorate or emphasize text.
- Do not use headings on large blocks of text.
- Always use headings in outline format.
- Always use a main heading first with sub-headings below.
Resources
Below are a list of resources that include more information about proper heading usage.
Example
Below is an example of a correct use of headings. The heading level used is also indicated in the heading for clarity.
Majors & Programs (h2)
This is where you can put all of your text that describes the overall number of majors and programs that you offer and why they are great.
Program 1 (h3)
You can give an overview of a specific program in this area. Because this is a sub heading of "Majors & Programs", you move down one heading level. Never move down more than one heading level at a time.
Program Requirements (h4)
The application information would be another sub head, so again we move down one level to an h4.
Application Deadlines (h4)
Here we use an h4 again because it's not a sub topic of program requirements, but does logically fall under the "Program 1" heading.
Program 2 (h3)
When we are done talking about the first program, we would move back up to an h3 to start talking about our new program. Remember, you can skip levels going back up in your outline (h4 to h2) but cannot skip levels when going down (h2 to h4).
It's helpful to remember that sometimes there is more than one correct heading level to use. In the example above an argument could be made that "Application Deadlines" is a sub head of "Program Requirements" and would use an h5. This isn't incorrect, just a different organizational view. Either way is accessible, it just needs to be consistent throughout your page and site.