It’s easy to assume that headings are used for decorative text, but headings are actually important and helpful pieces of text, especially for people who use assistive technology. According to the W3C, “Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.”
Headings and subheadings essentially organize your content and are important for usability and accessibility. If someone is using a screen reader on a page, the person can use the headings to navigate the page. The headings make it possible for a person to skip to a desired heading and/or skip blocks of content like menus and sidebars. Even if someone is not using a screen reader, users are much more likely to discover topics of interest if they are marked with a heading. Headings also help with SEO.
The key, however, is to use headings correctly. When they are not used correctly, it is an accessibility issue and it’s something we work to fix during a content audit.
How to Use Headings
The first thing to note is that the page title is automatically formatted as an H1 (Heading 1). The page title should be the only <h1> on the page.
There are six levels of headings, with <h1> being the title of the page, <h2> being the top-level headings within the content, and <h3> through <h6> being lower-level headings.
| Heading Level | HTML Tag | Purpose |
|---|---|---|
Heading 1 |
<h1> |
This is reserved for the page title only. The H1 shouldn’t be used anywhere else on the page. |
Heading 2 |
<h2> |
Used for subtopics of the page |
Heading 3 |
<h3> |
Used for subtopics of a <h2> |
Heading 4 |
<h4> |
Used for subtopics of a <h3> |
Heading 5 |
<h5> |
Used for subtopics of a <h4> |
Heading 6 |
<h6> |
Used for subtopics of a <h5> |
Most pages that we come across on the university website do not have a need for headings beyond an <h4> or <h5>. This is an example of a page with an <h1> title, and then <h2> and <h3> headings. Some pages may only need <h2> headings, like this page.
After the title, a page should never start with anything beyond an <h2>. Headings are not for decoration.
When headings are used incorrectly (out of order, for example), it gets flagged as an accessibility issue in Siteimprove and has to be corrected. Please remember to use headings correctly, so that all users can navigate our website in an efficient and inclusive way.
With the redesigned site, we will have a new heading style that will have an improved look and will continue to meet accessibility guidelines.
This post was written by Meaghan Milliorn, Director of Digital Strategy.