Headings are the titles and subtitles used within text content. They draw attention to content sections within a web page and organize content into related groups. They are invaluable for creating well structured content.

Using a clear heading structure helps improve the user experience by:

  • Providing a consistent look for a site.
  • Offering a hierarchical structure for web page content.
  • Providing guidance for users to easily navigate and quickly scan (either visually or with a screen reader) for the information they seek.

Headings and Screen Readers

Screen readers and speech software, like NVDA, JAWS, Orca, VoiceOver, and TalkBack allow people who are blind or visually impaired to read text on a website. They are also useful for users who choose to listen to speech output of a page rather than view it.

Common Errors

  • Bold text and/or larger text size is used to represent a heading instead of using the heading.
  • Heading levels are skipped.
  • Heading levels are out of order.
  • There are multiple Heading 1 headings.
  • A Heading 1 (Page title) is not used.
  • Empty heading tags are used.

Users of these tools often start by scanning for headings to help them quickly learn what content is on a web page. For people who use screen readers, clear heading hierarchies are critical for navigating and scanning a page.

Headings and Content Structure

When laying out a page, headings provide a semantic way to lay out sections of content. A heading element briefly describes the topic of the section it introduces. Most users look for headings to navigate a page quickly and to understand the structure of a page.

Every page must have a main heading designated with the <h1> element. This will almost always be the page title (or the site title on the home page). Use <h1> elements only once per page. In WordPress, the template will often create the main heading automatically, so when entering content avoid using the <h1> heading level. (See the headings guide for more detail.)

Other heading levels (2 through 6) may be used more than once, following document outline order.

Use headings level 2 through 6 in document outline order for sections of content within a web page. Heading 2 is for top-level sections and each level must be a subsection of one level higher. For example, heading 3 will always be within a heading 2 section, and heading 4 within a heading 3 section.

In the HRS theme the <h1> element is automatically generated. Never manually create a heading with level 1 in the body of a post or page.

Never skipping heading levels. Skipping headings, going from heading 2 directly to 4, for example, breaks the content structure.

You can picture this as a document outline, where the page title is the main title, and each following section and sub-section is a different level in the outline, like so:

  • [Heading level 1] Page Title
    • [Heading level 2] Section #1 of the Page Content
      • [Heading level 3] Sub-Section of Section #1
      • [Heading level 3] Another sub-section of Section #1
    • [Heading level 2] Section #2 of the Page Content
      • [Heading level 3] Sub-Section of Section #2
        • [Heading level 4] Sub-Sub-Section

Examples

Well Structured Headings: Will Pass Accessibility Standards

Here is an example of a heading structure that would pass accessibility standards:

Page Title

Every page should have a main heading, denoted with the <h1> element, but not every page requires sections beyond that. If the page is short, or does not include clearly defined sections, all of the content can be organized under the main heading.

Section #1 of the Page Content

Always use the <h2> element for the primary sections of a page. If you only have primary sections, then the only headings your page will contain are <h1> and <h2> heading.

Sub-Section of Section #1

If you need to provide another section of content within an existing section, use the heading one level down from its parent. Here, for example, we used an <h3> element (heading level 3) because this content is a sub-section of an <h2> element (heading level 2).

Another sub-section of Section #1

You can repeat section headings as many times as you have sections.

Section #2 of the Page Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet auctor lectus. Curabitur non est nibh. Suspendisse vehicula fermentum quam. Donec lobortis diam a ligula faucibus mattis.

Sub-Section of Section #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet auctor lectus. Curabitur non est nibh. Suspendisse vehicula fermentum quam. Donec lobortis diam a ligula faucibus mattis.

Sub-Sub-Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet auctor lectus. Curabitur non est nibh. Suspendisse vehicula fermentum quam. Donec lobortis diam a ligula faucibus mattis.

Poorly Structured Headings: Will Fail Accessibility Standards

Here is an example of a heading structure that would fail accessibility standards, making the content organization unclear:

Page Title

This fails because the main heading should be an <h1> element. If there were no other heading elements on the page this might be acceptable, but every page should have a main heading denoted with the <h1> element.

Section #1 of the Page Content

This fails because it uses an <h1> element – which should be reserved for the main page heading – to identify a section of the main page. A child section should never have a higher level than its parent. Always use the <h2> element for the primary sections of a page.

Sub-Section of Section #1

This fails because it has skipped a heading level by going directly from <h1> to <h3>.

Another sub-section of Section #1

This fails because you can only have one main heading <h1> element per page.