An official State of Delaware site.

Official websites end in .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use https://

The https:// at the beginning of the delaware.gov address means you are safely connected to the government website. Any information that you provide is securely transmitted.

GIC logo
Government Information Center

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.

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.

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

Understanding Heading Tag Basics

  • 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

  1. 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, first of a sequence accompanying the instructions.
  2. Enter your heading text.
    Next screenshot accompanying the instructions.
  3. Select the Paragraph icon in the toolbar at the top of the WordPress editor.
    In the dropdown menu, select the first option titled Heading.
    Next screenshot accompanying the instructions.
  4. This will convert the text you just wrote to a heading. The entire line automatically updates, and a heading identifier appears in the toolbar.
    Next screenshot accompanying the instructions.
  5. If you want to select a different heading level, click the icon in the toolbar and a menu of heading options will open.
    Final screenshot accompanying the instructions.

Evaluate Your Heading Structure Visually

  1. To evaluate the heading structure of a page select the Document Overview icon of three offset, stacked lines.
    Screenshot of a WordPress block editor, the first in a sequence accompanying the instructions.
  2. Select the word Outline on the right, and a visual index of that page’s headings will display beneath.
    Next screenshot in a sequence accompanying the instructions.
  3. If any of your headings are out of order, the icon for that heading and title will be highlighted.
    Next screenshot in a sequence accompanying the instructions.
  4. To change an incorrect 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.

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 Interface Examples

<h1> Heading

<h2> Heading

<h3> Heading

<h4> Heading

<h5> Heading
<h6> Heading