Use meaningful heading structure

Applicable Role(s): Content Creator, Developer

Overview

Headings describe the content beneath it in a concise way. They act as a table of contents for your page and outline the major sections, sub-sections, and so on. Headings are helpful for everyone to understand how content is divided and relates to each other, but is especially helpful for users of assistive technology who use headings to navigate a page.

Best Practices

The heading level 1 <h1> of each page should reflect the title of the main page content. Include only one h1 on the page.

Headings represent section titles that contain major sections of content. Example: Page subsections are heading level 2, sub-sections of a page are typically heading level 3, sub-sections of heading level 3s are heading level 4s, etc.

Don't use a heading only to make text bigger or achieve a certain style. See the "Logical Heading Structure" section under Pattern Examples.

Headings decrease by one level and don't skip. Example: an h2 to an h3, not h2 to h5 or h1 to h4).

Mark sections with true headings, instead of a paragraph with larger font or a different style.

Pattern Examples

Semantic Headings

Do This

<h4>I'm a real heading</h4>

I'm a real heading

Don't Do This

<p style="margin:36px 0 12px;
font-family: 'PT Serif',serif;
line-height: 1.2em; 
font-weight: 400; 
font-size:25.5208px; 
color: #003f87;">
  I look like an h4, but really am a paragraph
</p>

I look like an h4, but really am a paragraph

Don't style paragraphs to look like headings. This may look like a real section title, but will not provide the accessibility info needed to help users navigate or understand your content.

Logical Heading Structure

Do This

<h1>Page Title</h1>
<h2>Section Title</h2>
<p>Information pertaining to this section</p> <h2>Section Title</h2>
<h3>Sub section title</h3>
<p>Information pertanaining to subsection</p> <h2>Section Title</h2>

<p>Information pertaining to section</p>

Do use logical heading structure. Headings should increase by no more than one, and an increase in heading level should correspond with a meaningful relationship.

Don't Do This

<h1>Page Title</h1>
<h4>Section Title</h4>
<p>Text for this section</p>
<h2>More important section</h2>
<h4>Sub-section Title</h4>
<p>Text for this section</p>

Don't choose a heading out of sequential order just because it has a preferred style or size. Headings convey semantic information telling the user the heading contains content, and where the content falls in the page table of contents. If a heading is only for style, that creates a confusing page outline.

If modifications are needed, use the correct heading and then style accordingly.

Heading Structure with Other Regions

Depending on the needs on your page content, there may be navigation or aside elements that require headings before the main content starts.

main page content with navigation and aside regions highlighted

Each of these regions should start with a heading 2, since they are essentially more subsections of the page and represent major blocks of content.

<h2>Sidebar navigation</h2>
<nav>...</nav>
<main>
<h1>Main content title</h1>
</main>
<h2>Aside content</h2>
<aside>...</aside>

Avoid using empty heading tags as spacing. In content management systems, hitting "Enter" at any heading level might create empty heading tags. An empty heading can be confusing for users and create more visual space than intended. For accessible ways to create space, see the guide Use style sheets (CSS) for styles and spacing.