Headings
When laying out a page, headings provide a semantic way to lay out sections of content. A heading element briefly describes the topic of the section it introduces. Heading elements are used by users of AT to navigate a page quickly and to understand the structure of a page. Also see the section on landmarks.
When using heading elements, reserve the <h1>
element for the page title. On the home page, this is usually the title of the site, and on other pages this may be the page title. Use the <h1>
element once per page — some assistive technology may be unable to read multiple <h1>
element’s on a single page correctly. Other heading levels may be used more than once following document outline order.
Note
<section>
and <article>
elements may allow you to reset the heading order allowing you to “restart” heading levels at <h1>
according to the HTML5 spec. At this point, we’re unaware of any browsers that support this feature beyond general HTML5 conformance checkers. For this reason, we recommend developers maintain the document outline with h1-h6
when using HTML5 outline elements.
For subsections, use <h2>
to <h6>
in document outline order. <h1>
is the most important and <h6>
is the least. Avoid skipping headings. Avoid breaking document outline order (you may go from <h1>
to <h3>
, but never <h3>
to <h1>
).
For logos that are text-based, use <em>
element.
If your logo is an image and acting as the main heading of the page, add an <h1>
element for its text and use a sr-only
rule so it’s visibly hidden but accessible to screen reader users.
<h3>Section</h3>
lorum ipsum
<h2>Sub Section</h2>
lorum ipsum
Testing
- Identify visual “heading” elements.
- Check that all visual “heading” elements use an
<h>
tag. - Verify that all subheading elements have a higher number.
Examples
Passes
Category
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.
Subcategory 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.
Subcategory 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.
<div>
<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>Subcategory 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>Subcategory 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>
</div>
This section has a main category and two subcategories. The subcategories are on the same level and as such use the the same heading element.
Fails
Category
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.
Subcategory 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.
Subcategory 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.
<div>
<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>Subcategory 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>Subcategory 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>
</div>
This section has several issues. The first subcategory has a lower value than the main category. The second subcategory has skipped a heading level which, while better, can cause confusion as it’s not clear if this category is the subcategory of Category
or Subcategory 1