Headings

HTML heading elements (such as <h1>, <h2>, <h3>) allow easier navigation and understanding of a page’s content by dividing it into smaller labelled portions.

Recommendations

Include exactly one <h1> element in a document.

Ensure heading levels after the <h1> are sequential, hierarchical and don’t skip heading levels.

Ensure each heading element is followed by content.

Why it matters

A logical heading structure is invaluable for users of assistive technologies such as screen readers to help navigate content.

A document's <h1> labels its primary content. Aim to have it as the first content element within the main landmark, so that users jumping to it don’t miss content. Pages should have only one primary subject.

Headings should not be used for non-heading purposes, such as styling. A heading should always label a portion of content and should be followed either by non-heading content or by the next sequential hierarchical sub-heading.

Sequential hierarchical heading levels provide a predictable document outline, which is an important factor for navigating, understanding the content structure, and comprehension. Each <h2> is a subheading of the <h1>, each <h3> a subheading of a <h2>, and so forth.

Examples

Recommended:

<main role="main">
    <h1>Example page content</h1>
    <p>Lorem ipsum …</p>
    <h2>First content portion</h2>
    <h3>List one</h3>
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
    </ul>
    <h3>List two</h3>
    <ul>
        <li>Dolor</li>
        <li>Est</li>
    </ul>
    <h2>Second content portion</h2>
    <p>Ipsum lorem …</p>
</main>

Not recommended:

<main role="main">
    <h3>Main content</h3>
    <h2>Secondary content</h2>
    <h2>Tertiary content</h2>
    <p>Lorem ipsum …</p>
</main>

Testing

Generate a document outline, using a tool such as or .

Aim for only one <h1> and sequential hierarchical headings with no skipped heading levels after the <h1>.

Check that each heading is followed by content, which may begin with the next sequential hierarchical sub-heading, and that each heading is an appropriate label for the portion of content which follows it.

��tv