Heading levels should only increase by one
Log in (Premium content) Request a demo
Headings must be in a valid logical order, meaning
<h1>-<h6> element tags must appear in a sequentially-descending order.
The Algorithm, in Simple Terms
Ensures the order of headings is semantically correct.
Why this is Important
The underlying purpose of headers is to convey the structure of the page. For sighted users, the same purpose can be achieved by using different sizes of text. This is not helpful for users of screen readers, though, because a screen reader identifies a header only if it is marked up as such. When headers are properly used, though, the page becomes much easier to navigate for screen reader users and sighted users alike.
How to Fix the Problem
Ensure headings are in a logical order. For example, check that all headings are marked with
<h1>-<h6> elements and that these are ordered hierarchically. For example, the heading level following an
<h1> should be an
<h2>, not an
<h3>. Finally, don't use heading mark up on text that isn't actually a heading.
- HTML 4
- HTML 5