Stanford UniversityRequest a Site
Stanford Sites User Guide

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?

Improved SEO 

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. 

Improved accessibility 

Headings and subheadings help describe the structure of the page by providing a navigable table of contents for assistive devices. 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 options

The Stanford Sites platforms tries to balance editor control with best practices. Content types and Paragraph types have default header settings that reflect the best heading settings for the most common use cases. 

Many components provide additional control over heading level, which can be handy if you are using paragraphs or layouts in creative ways.  Learn more about paragraphs that allow for more sophisticated controls over headings:

Heading types

Heading types are used as follows and should always be created in order.

  • Heading 1: Page title. There can only be a single Heading 1 per page.
  • Heading 2: Sub-head. Added in content after a Heading 1.  A page can be broken up into multiple sections with Heading 2.
  • Heading 3: Grouping or title within a sub-head under a Heading 2.
  • Heading 4: Grouping or title within a grouping under a Heading 3.
  • Heading 5: Grouping or title title within a grouping under a Heading 4.

Use headings

Basic patterns and strategies for headings

  • Use sentence case for readability. (Page titles can be in title case if desired.)
  • Ensure all page titles in your site are unique.

Keep headings succinct

  • 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 Intro and Splash Text for Longer Titles

Utilizing an introductory style for presenting longer titles can break down complex information into more digestible parts, ensuring clarity and maintaining reader engagement. Alternatively, using splash text can highlight key elements of the title, drawing attention and making the content more visually appealing and easier to navigate.

If you don't use headings hierarchically, Editoria11y will flag the following issue:

Manual check: long heading

Use headings hierarchically

Although you may prefer the look of an H4 over an H2, it is more important to use headings hierarchically. Following the title (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 (h3). 

If you don't use headings hierarchically, 

Learn more about Was a heading level skipped?

On your Stanford Site, if Siteimprove is flagging this on a filtered list page, such as news or events, please visit Update from a legacy version of the filtered page.

There are tools to help you see the heading structure of your page:

  1. On Stanford Sites, after logging in, Editora11y will annotate page headings. Look for the widget at the bottom of the page.
     

  2. On any site, the HeadingsMap browser extension will display the heading structure in an outline.

 

Use headings appropriately

When you have a heading such as a Heading 2, it is expected that there is content associated with it. If there is no content, it can be confusing and may lead screen reader users might think the content is hidden. 

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 or use one of the available text styles.

If you use a heading without following content, SiteImprove will flag the following issue:

Siteimprove issue: Content missing after heading

See examples of content missing after heading

💡 To address "Content missing after heading"

  • For a Card Paragraph the default for the headline on a Card Paragaph is H2. In the Style/Behaviors of Card Paragraphs, you can select the appropriate heading level or style for each card. To learn more about changing heading styles or levels see Styles/Behaviors.
  • When displaying Basic Page List Paragraphs the title displays as an H2 with the metadata as following content. To learn more about adding metadata, see Add Metadata to a Basic Page.

Troubleshooting

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. 

Why is Heading 1 (H1) not an option within the text editor?

An H1 should appear only once, and should appear before all other page content. The H1 is always applied to the page title.

Related topics