Headings and the H1 tag
Headings (<h1> to <h6>) give a page its outline. The <h1> is the main heading: it says what
the whole page is about. <h2> elements mark the main sections, <h3> the subsections inside them,
and so on.
Why it matters
Readers scan before they read. A clear main heading tells a visitor within a second whether they landed on the right page, and section headings let them jump to the part they need.
Screen-reader users rely on headings even more. Most screen readers can list all headings on a page
or jump from one to the next, so the heading outline works as a table of contents. A page with no
<h1> has no obvious starting point.
Search engines also use headings, along with the title and the body text, to understand what a page
covers. Google has said that having more than one <h1> is not a problem for ranking on its own, so
treat a single <h1> as a clarity and accessibility convention rather than a ranking trick.
What we check
| Result | When |
|---|---|
| Pass | the HTML contains exactly one <h1> |
| Needs attention | the HTML contains two or more <h1> elements |
| Fail | the HTML contains no <h1> at all |
We count <h1> elements in the HTML your server returns, and show the text of up to three of them
in the report. We do not run JavaScript, so a heading that is only added by client-side code is not
counted. Headings that are hidden with CSS are still counted, because they are in the markup.
How to fix
No H1. Mark up the main heading of the page as an <h1>. It is often already there, but styled
as a <div> or a lower-level heading:
<!-- before -->
<div class="page-title">Running shoes for trail and road</div>
<!-- after -->
<h1 class="page-title">Running shoes for trail and road</h1>
More than one H1. Pick the heading that describes the whole page and keep it as the <h1>.
Change the others to <h2> or lower. Common causes:
- The site logo or site name is wrapped in an
<h1>in the shared header, so every page gets an extra one. Use a plain link or<p>for the logo instead. - A theme or page builder uses
<h1>for every large text block. Choose heading levels by structure, then style them with CSS. - Widgets, modals or cookie banners include their own
<h1>.
Single-page apps. If your framework renders headings only in the browser, make sure the <h1>
is part of the server-rendered or pre-rendered HTML.
Good heading structure
- Write the
<h1>for people: describe the page topic in plain words. It often matches the title tag closely, but it does not have to be identical. - Do not skip levels on the way down. An
<h2>section should contain<h3>subsections, not jump straight to<h5>. - Pick the level by position in the outline, not by font size. Size is a CSS decision.
- Do not use headings for things that are not section titles, such as a phone number or a tagline.
<h1>Trail running shoes</h1>
<h2>How to choose a trail shoe</h2>
<h3>Grip and lugs</h3>
<h3>Cushioning</h3>
<h2>Our top picks</h2>
MDN has a short reference on heading elements, including accessibility notes.