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 assistive technology to navigate a page quickly and to understand the structure of a page. Also see 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>
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.
For sub sections, use <h2>
to <h6>
in document outline order. <h2>
is the most important and <h6>
is the least. Avoid skipping headings. Avoid breaking document outline order (you may go from <h2>
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.
Testing
- Identify visual ‘heading’ elements
- Check that all visual ‘heading’ elements use an
<h>
tag - Verify that all sub heading 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.
Sub Category, Level 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, Level 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.
Sub Category, Level 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.
Sub Category, Level 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, Level 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.
Sub Category, Level 3
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.
<h2>Category</h2> 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. <h3>Sub Category, Level 1</h3> 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. <h4>Sub Category, Level 2</h4> 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. <h4>Sub Category, Level 2</h4> 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. <h3>Sub Category, Level 1</h3> 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. <h4>Sub Category, Level 2</h4> 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. <h5>Sub Category, Level 3</h5> 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.
This section has a main category, as well as level 1, 2, and 3 sub categories. Sub categories that are on the same level are using the the same heading elements. The level 3 sub category is nested correctly under the level 2 sub category and not vice-versa.
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.
Sub Category, Level 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, Level 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.
Sub Category, Level 3
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.
<h2>Category</h2> 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. <h1>Sub Category, Level 1</h1> 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. <h4>Sub Category, Level 2</h4> 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. <h6>Sub Category, Level 3</h6> 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.
This section has several issues. The first sub category has a lower h
value than the main category. The second sub category has skipped a heading level which, while better, can cause confusion. It’s not clear if this category is the sub category of Category
or Sub category, Level 1
. The same problem is repeated with Sub Category, Level 3
, as it should be an h5
when following an h4
heading.