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 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 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:

• Text Area
• Card
• Image Banner
• Page Title Banner
• Teasers
• Lists

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

• 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, 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, SiteImprove will flag the following issue:

Siteimprove issue: Headings are not structured

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

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

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 boldly styled text.

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. 

If you are seeing Content missing after heading on Basic Page list paragraphs see Add Metadata.

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.