Open Forum

What is a heading? 

Visually, headings are easy to spot. They're the important text that's bigger, bolder, and set apart from the main text. Headings describe the content they head up. When you land on a page you probably scan it quickly for headings, which give you a pretty good idea of what content you'll find in which parts of the page. You can then read the whole page knowing what to expect, or skip to the part that interests you most.  

But looking like a heading doesn't mean a piece of text acts like a heading. You may have had this experience when building a document with an automatic table of contents: If you use the pre-configured text styles with names like "Heading 1" and "Heading 2", those pieces of text show up in the table of contents. However, if you don't use a pre-configured style and instead adjust the text size and boldness on your own, the text won't show up in the table of contents. Why is that? 

Being big, bold, and set apart isn't enough to make a piece of text a heading - it also has to be marked up as a heading in the code. Usually that means it's a heading HTML element, like an <h1> or an <h2>. The good news is, most writing tools will take care of the code part for you when you set the text style, so you don't have to know anything about code to make a page with good accessible headings.  

Why are headings important for accessibility? 

Headings help you understand the content and layout of a page at a glance. But what happens if you're Blind? People with visual impairments can't necessarily do that visual scan of a page to understand the structure. They're likely using an assistive technology called a screen reader, which reads web content out loud to them. It can read the whole page out linearly, but that can be time-consuming, and it's frustrating to reach the end only to realize that the information they need is on a different page altogether! But if the page has properly coded headings, the screen reader can read just the headings, or skip around the page between different headings. Properly coded and well-structured headings make it easy for people using screen readers to navigate the page and understand its content and structure.  

How to make great headings 

For this section I’ll reference a fictional event speakers page as an example. In the screenshot, the blue circled “h1”, “h2”, and “h3” indicate headings. 

Describe the topic or purpose of their content 

The whole point of a heading is to tell the reader what a section of content is about. For example, by reading the headings of this article you already know that this section will talk about!

Understand the difference between styling and markup 

While many platforms apply styling and code markup using the same control, not all do! Find out whether setting a style named "header" or "heading" will apply a heading markup. If not, there may be a way for you to set the markup yourself.  

You can check a published page for headings by using the WAVE browser plugin, which also scans for accessibility issues. 

Be careful to only mark text as a heading if it's serving the purpose of a heading by describing a section of content. If you want some text to look special but it doesn't describe other content, look for a way to apply styling without marking it up as a heading.  

In the example page, note that the time and date of the event are not set as headings even though they’re visually prominent. That’s because they don’t describe a section of content. “Speakers” describes the content that follows it, so it is marked as a heading. 

Organize the page in a hierarchy 

Headings have different levels, which you can use to nest content into a hierarchy. Think of it like a table of contents of the page. Each page of your website is like its own book or document with a title, section names, and maybe sub-sections, or sub-sub-sections! Sub-sub-sections get confusing, which is why we use numbers to identify heading levels.  
 
The hierarchy of the example page looks like this (only the first portion is visible in the screenshot): 

Let's walk through what makes this a good example! 

The h1 is like a page title. It should describe what the whole page is about. If you have the same h1 on multiple pages, it probably means your h1 isn't descriptive enough.  

The h1 describes the main content of the page. This is a page about World of Design 2024. “Speakers” describes a section within the page. Because it’s nested within the page, it gets a level 2 heading, one level lower than the page heading itself. Within the Speaker section, Antionette Carol has a sub-section of information about her, so her name gets to be a level 3 heading. Bria Alexander’s information is at the same level of hierarchy as Antoinette’s, so her name is also an h3 – nested inside the Speakers section, but not inside Antoinette’s section. 

Try to avoid skipping levels on the way down. If the speaker names were all at level 4 it would be confusing – what happened to level 3? Skipping up is ok though. If there were an h4 under “Charmaine Jennings” it would be fine to have the next heading be an h2 “Sponsors”. 

Summary: 

Headings: 

Headings MUST  

Text that doesn't do the job of a heading MUST NOT be marked up as a heading in the code, even if it looks special. There should be a way to apply visual styles without setting heading markup in the code. 

Headings SHOULD 

Resources 

Product-specific instructions 

Learn how to set heading levels in different Cvent products 

Further reading on headings