Glossary

H1 heading

An `<h1>` is the top-level heading of a page's content — the visible title a reader sees, as distinct from the `<title>` element, which names the document to browsers and search engines. It is the first thing a screen reader user encounters when navigating by heading, and it is the strongest on-page statement of what the page is about. One per page is the practical convention, though the HTML standard itself does not forbid more.

H1 and title are different things

The title element lives in the head and is not rendered in the page. The h1 lives in the body and is what the reader sees.

They serve different audiences: the title is read out of context in a results list or a browser tab, the h1 is read with the page around it.

They usually say similar things and rarely say identical things. A title may carry the site name and a qualifier the h1 does not need.

A page with a title and no h1 looks complete to a search engine and is missing its heading structure for anyone navigating by headings.

What the standard actually says

HTML allows more than one h1 in a document. The document outline algorithm that was supposed to make this meaningful was never implemented by browsers and has been removed from the specification.

Because there is no working outline algorithm, heading levels are flat and global: assistive technology reads h1 as the top level of the whole page, not of a section.

So multiple h1 elements produce a page with several apparent top-level headings, which is confusing to navigate even though it is valid markup.

Google has said that multiple h1 elements do not cause a ranking problem. The argument for one is clarity for readers, not search.

Where the h1 goes missing

Designs where the visual title is styled text in a `div` rather than a heading element, which looks identical and carries none of the meaning.

Templates where the site logo is marked up as the h1 on every page, making every page's top-level heading the company name.

Home pages, which frequently open with a hero image or a slogan and no heading at all.

Pages rendered client-side where the heading appears only after JavaScript runs, which works for search engines that render but not for everything else.

How to check it

`curl -s https://example.com/page | grep -o '<h1[^>]*>' | wc -l` counts the h1 elements in the served HTML.

The three findings worth separating are: no h1, more than one h1, and an h1 that is empty or contains only an image with no alternative text.

Check the rendered DOM as well for client-side pages.

Read the h1 on its own and ask whether it names this page. A heading that names the site rather than the page is present and useless.

Frequently asked questions

Can a page have more than one h1?
HTML allows it and Google says it causes no ranking problem. One is still clearer, because assistive technology treats every h1 as a top-level heading of the whole page.
Should the h1 match the title tag?
They should agree about the subject without being identical. The title is read out of context; the h1 is read with the page around it.
Does the h1 have to be the first heading in the page?
Not by rule, but a page whose first heading is an h2 or h3 presents a structure that begins mid-hierarchy, which is harder to navigate.

Sources

Related

VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.

Scan a website