Headings

When laying out a page, headings provide a semantic way to layout sections of content.

Heading elements are used by users of Assistive Technology (AT) to navigate a page quickly and to understand the structure of a page. Also see Landmarks.

When using headings, it is best practice to reserve <h1> for the most important header text on the page, with subsequent headings, h1-h6, identifying a clear hierarchy. Use the <h1> element once per page — some assistive technology may be unable to read multiple <h1>s on a single page correctly. Other heading levels may be used more than once following document outline order and you may reset headings up to <h2> with the <section> element.

Typical example

<h1>Page Title</h1>

<h2>Section 1</h2>
<h3>Section 1a</h3>
<h3>Section 1b</h3>

<h2>Section 2</h2>
<h3>Section 2a</h3>
<h3>Section 2b</h3>

Page Title

Section 1

Section 1a

Section 1b

Section 2

Section 2a

Section 2b

Testing

Identify visual ‘heading’ elements.
Check that all visual ‘heading’ elements use an <h1> - <h6> tag.
Verify that all sub heading elements have a higher number.

Examples

Passes

<h3>Category</h3>
<p>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.</p>
<h4>Sub Category 1</h4>
<p>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.</p>
<h4>Sub Category 2</h4>
<p>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.</p>

Fails

<h3>Category</h3>
<p>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.</p>
<h2>Sub Category 1</h2>
<p>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.</p>
<h5>Sub Category 2</h5>
<p>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.</p>

Sub Category 1

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 Category 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.

Fails: This section has several issues. The first sub category has a lower value than the main category. The second sub category has skipped a heading level which while is better, this can cause confusion as its not clear if this category is the sub category of Category or Sub category 1.