Headings

Overview

Your webpage’s heading structure is like a table of contents for your page, helping people (and search engines) understand the structure and content on your page. Headings are intended to divide content into scannable sections for both search engines and page visitors to better understand and consume the content. Proper use of headings is a critical accessibility requirement.

In WordPress, you’ll see headings used on Pages and Posts, Blocks and Patterns, and HTML and rich text fields. The Block Editor gives you full control over adding and adjusting headings, so it’s important to know how to properly structure your headings.

Heading Structure

Heading elements should be used at the beginning of any important sections of content, and proper heading structure follows a hierarchy from H1 (the main title of the page) through H2-H6 (subheadings). Using this structure makes it possible for people using assistive technology to tell the difference between headings and regular body text, and use the browse-by-heading feature of their assistive technology. 

Headings are nested in order to convey the logical hierarchy of the page. For example:

  • h1: Secret Sauce Recipe
    • h2: About the Recipe
    • h2: Ingredients
    • h2: Preparation
      • h3: Step 1
      • h3: Step 2

The Document Outline View displays a nested view of the Blocks, grouped by their heading level. This allows you to see the hierarchy of your headings and quickly navigate to specific sections of the page.

Tips for Headings

  • One, and only one, H1 tag should exist on each page. The H1 tag should be the page title and located as the first heading on the page. The H1 tag is most often automatically generated, however some page templates may require the content creator to manually add an H1 tag.
  • Use proper HTML heading tag to identify headings (e.g. H1, H2, H3, H4, etc.). Choose heading levels by meaning, not by visible size.
  • Nest headings in order to convey the logical hierarchy of the page. (e.g. an H3 heading called “Financial Services” becomes a subsection of an H2 headings called “Our Services”).
  • Provide heading elements at the beginning of any important sections of content. This will help people use the browse-by-heading feature of their assistive technology.
  • A good heading should simply and concisely describe the content that follows. 

What to Avoid

  • Do not use bold, italics, emphasis, or strong to convey a heading. (i.e. <b>, <i>, <em>, <strong>)
  • Do not style content so that it looks like a heading without using the appropriate heading markup.
  • Avoid skipping levels when a heading is a subsection of another heading (e.g. an H3 should not follow an H1). It is acceptable to move back up, for example from an H3 back to an H2 to restart a new section.