Create Accessible Headings
Headings change the look of the text and draw your attention the content structure. They are visual indicators to "eyeballs", helping to break up and chunk your content for easy scanning, but they are also important for structure, SEO, and accessibility.
Screen readers and other assistive technologies use headings to construct a table of contents. When writing web text, you always want to use headings to break up your content hierarchically.
Headings are HTML tags that are used to divide sections of a page. The number in each heading indicates its level in the content’s hierarchy. By default, your page titles will be formatted as a Heading 1. The following header should be an H2, followed by an H3, etc. The content within the hierarchy of the heading sections should also be hierarchical in nature.
Why use headings?
Headings serve an important function for search engine optimization (SEO). Think about your headings as keywords that will be crawled by search engines as you create the writing for your website. As headings increase scanning ease for a sighted user, they do the same thing for search engines. Your headings provide keyword-rich context about your site content. That does not mean you should unnaturally use or overuse headings to attempt altering search engine ranking (as this will inevitably fail, search engines are also optimized to recognize these tricks). But bear in mind that your headings, including "keywords" that highlight important topics of your content, will have an impact on the success of your SEO.
Headings help describe the structure of the page and help assistive technologies to navigate websites. As stated in WebAIM, Web Accessibility in Mind, when use properly, "the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top-level headings (<h1>), next-level headings (<h2>), third level headings (<h3>), and so on."
Heading types are used as follows:
- Heading 1: Page title
- Heading 2: Sub-head (added in content)
- Heading 3: Grouping or title within Sub-head (added in content)
- Heading 4: Grouping or title within grouping (added in content)
- Heading 5: Grouping or title within grouping (added in content)
Basic patterns and strategies for headings
- Keep headings short: skip unneeded words like “How do I...” or “Read how to...”
- But not too short: include keywords to ensure people will understand the context of this page and facilitate searching by headers.
- Keep it simple: avoid jargon and technical terms if possible.
- Use sentence case for readability. (Page titles can be in title case if desired.)
- Ensure all page titles in your site are unique.
Use headings hierarchically
Although you may prefer the look of an H4 over an H2 in a particular, it is more important to use headings hierarchically. Following the title, or H1, the first heading should be a Heading 2 (H2) and if there's more detail needed the next heading should be a Heading 3. Using this "semantically correct" structure throughout your content will provide the structure that is good for sighted users, SEO, and accessibility.
Use headings appropriately
Given a snippet of text:
- If it provides a title for other content, use a heading.
- If there is no associated text or subheading, don't use a heading. Consider making the text bold.
If you use a heading without following content, Siteimprove will flag the following issue:
This issue is demonstrated in the examples below.
- In the first example, there is some following content, so the words "Jane Stanford" are a heading. In HTML it's <h2>Jane Stanford</h2>.
- In the second example, there is no following content, so the words "Jane Stanford" are simply bolded text.
Inline images with headings
In our text areas, headings always appear on separate lines. This ensures legibility across screen sizes and devices. A heading will NOT wrap around an image. Your heading can go above or below your image. Keep in mind that if you want to make a styled list, you can use one of our specialized paragraph types.
Why is Heading 1 (H1) not an option within the Normal dropdown?
In order to be semantically correct, by standards of HTML, Heading 1 is not available to use in any text area. An H1 should appear only once, at the top of the page. In this case, the H1 styling is applied to the immediate page title.