How to create headings

Learn how to create accessible headings that enable users to quickly understand the content’s structure and find the information they’re looking for.

What is a heading?

A heading is a succinct summary that describes and introduces the content that follows it.

Headings help people understand how content is organised on a page and give users a fast way of scanning for the content they’re looking for.

On websites, headings are used to:

introduce sections of content
label page regions
enable users to navigate by heading.

Heading levels

Headings have different levels or rank for structuring content hierarchically. On the web, there are 6 heading levels.

A heading indicates the beginning of a new section of content. A subsequent heading:

at a lower level indicates a subsection that is part of and relates to the previous section
at the same or a higher level starts a new section.

Heading level 1

Heading level 1 is typically reserved for the document or page’s main title, which should succinctly describe the main topic of the page. It’s usually placed just before the main content starts. Ideally, it will also uniquely identify and distinguish the page from all other pages on the site.

Heading level 1 should not be confused with the document or page <title>, although these should match or be very similar to each other. For more, see the Web Content Type: Page titles.

Heading levels 2–6

Heading levels 2–6 can be used to divide text content into subsections, each with its own heading at the appropriate level based on the content’s structure, or to introduce different sections of the page, such as:

a secondary navigation menu
an advanced search form
other interactive widgets.

How headings help users find information quickly

Headings act as visual cues for sighted users, enabling them to skim read the page more easily and find the content they’re looking for.

While accessible headings are useful to everyone, they’re particularly helpful to people using assistive technologies (AT) and to those with reading and learning disabilities.

If headings are marked up correctly in HTML, people using AT can scan through the headings in a page. For example, screen readers will announce each heading and its level as they read through the content. Screen readers also enable users to:

search the content by a list of headings
jump to a desired heading to begin reading at that point and thereby skip past any repeated blocks of content such as site banners, menus and sidebars.

For more about the AT that disabled people use to access web content, see the Knowledge Area: Assistive technologies.

For more about why it’s important to mark up content so that it’s accessible to people who use AT, see the Knowledge Areas:

Search engine optimisation (SEO)

Accessible headings are good for SEO, increasing the discoverability of a web page by helping search engines:

determine if a page is relevant to a user’s search
rank pages with relevant headings higher in search results.

For more, see Headings — Accessibility and SEO — The A11y Project.

Create a heading

There are a few ways to create a heading.

Native HTML headings

Headings are created using the <h1> to <h6> elements, which represent the 6 heading levels available in HTML.

For details and examples of how to use the HTML heading elements, see <h1>–<h6>: The HTML Section Heading elements — MDN Web Docs.

Custom headings

In almost all cases, it’s recommended to use native HTML heading elements.

Sometimes, however, a developer might not be able to use native HTML headings — for example, when:

retrofitting a site whose existing structure of <h1>–<h6> elements cannot be modified because some JavaScript relies on that existing structure
more heading levels beyond <h1>–<h6> are needed.

Creating a custom heading requires the use of the ARIA heading role and aria-level attribute.

Note: The JAWS screen reader always identifies custom headings with an aria-level value of 7 or higher as level 2 headings, regardless of the browser used. Meanwhile, VoiceOver and NVDA in Firefox and Chrome readily support <div role="heading"> with aria-level values up to 9.

Deeply nested headings create a more complex document structure that can be difficult for people to follow. If content calls for heading levels beyond the <h1>–<h6> elements, consider reorganising the content to use a less complex heading structure.

For more on creating custom headings, see: