Accessible Heading Structure

The ability to scan web page titles to quickly jump to specific content is something many people take for granted. Those with visual disabilities rely on screen readers, which will read everything in a linear order- except for headings.

A view from behind of a man in a wheelchair looking at several computer screens.

Screen readers can jump from heading to heading, providing something closer to a table of contents for those users.

That’s why correct <h1> through <h6> heading structure is essential for website accessibility. It provides a clear, logical framework for both users and assistive technologies.

Without proper headings, screen reader users must read through everything on a web page in a linear order which is time-consuming and can be frustrating. Accessibility software will red-flag heading hierarchy as a serious issue.

Understanding Heading Tag Basics

Graphic image showing a magnifying glass over a computer screen with H1, H2 and H3 headers displayed prominently.

Headings range from <h1> (most important) to <h6> (least).
There should be only one <h1> per page, typically the page or post title.
Headings should follow a logical, nested order: h1 > h2 > h3, etc.
Avoid skipping levels (e.g., h1 > h3 without an h2).
Use them for organization, not visual style.

How to Add or Edit Headings

Step One:

Add a new line on your WordPress block editor web page by hitting enter. The default element is the paragraph, or text field.

A screenshot of the WordPress block editor with a text field with the words Type / to choose a block in the field.

Step Two:

Enter your heading text.

Screenshot in WordPress block editor with the title Test Page and the text "This is a new heading." now written in the field.

Step Three:

Select the Paragraph icon in the toolbar at the top of the WordPress editor.

In the dropdown menu, select the first option titled Heading.

A screenshot of the WordPress block editor showing a red arrow pointing to the Paragraph icon in the top toolbar. There is a dropdown menu with the first option titled Heading selected.

Step Four:

This will convert the text you just wrote to a heading. The entire line automatically updates, and a heading identifier appears in the toolbar.

A screenshot of the WordPress block editor showing that the text reading This is a new heading is now bold and enlarged, and an icon that says H2 is now in the top toolbar.

Step Five:

If you want to select a different heading level, click the icon in the toolbar and a menu of heading options will open.

A screenshot of the WordPress block editor showing a red arrow pointing to the H2 icon, which now has a dropdown menu listing Headings from H1 to H6.

Evaluate Your Heading Structure Visually

To evaluate the heading structure of a page select the Document Overview icon of three offset, stacked lines.

Screenshot of a WordPress block editor with a red arrow pointing out a Document Overview icon in the top toolbar.

Select the word Outline on the right, and a visual index of that page’s headings will display beneath.

Screenshot of a WordPress block editor with a red arrow pointing out the word Outline. There is a menu of headings open beneath it.

If any of your headings are out of order, the icon for that heading and title will be highlighted.

Screenshot of a WordPress block editor Outline, with a list of H1 through H6 headings. One of the items in the list is a different color, with the text beneath it "Incorrect heading level".

To change an incorrect heading level, select that heading text and go to Step Five above.

Typical Heading Structure

<h1>: Page Title </h1>
<h2>: Major Sections </h2>
<h3>: Subsections under h2 Major Sections </h3>
<h4>: Subsections under h3 Subsections </h4> (rare)

Heading Levels on This Page

A screenshot of this web page, with red dots indicating the heading levels. There is an H1 next to the page title Ensuring Accessible Heading Structure. There are H2 markers next to the subtitles Understanding Heading Tag Basics and How to Add or Edit Heading. There are H3 markers by the subtitles Step One and Step Two.

Accessible Heading Structure

Understanding Heading Tag Basics

How to Add or Edit Headings

Step One:

Step Two:

Step Three:

Step Four:

Step Five:

Evaluate Your Heading Structure Visually

Typical Heading Structure

Heading Levels on This Page

Examples

<h1> Heading

<h2> Heading

<h3> Heading

<h4> Heading

<h5> Heading

<h6> Heading

Delaware's Government