Heading Checker (H1–H6)

A heading checker shows the outline of a web page the way search engines and screen readers see it. Our free tool fetches any URL, lists every H1 to H6 heading in page order as an indented tree, and flags the problems that make a page harder to understand: a missing or repeated H1, skipped levels, empty or overly long headings, and headings hidden from view. It also compares the H1 with the title tag, because the two should describe the same thing.

How to use the Heading checker

1. 1 Sign in and open the checkerLog in to your free account and open the Heading Checker from the tools list.
2. 2 Paste the page addressEnter the full URL of the page, including its path. The tool checks that exact page, not just your homepage.
3. 3 Read the outlineScan the indented tree from top to bottom. It should read like a table of contents for the page.
4. 4 Fix flagged itemsDeal with a missing H1 and empty headings first, then skipped levels and very long headings.
5. 5 Check other templatesRun the checker on one page of each type, such as a blog post, service page and category page, because each template builds headings differently.

What a heading checker does

HTML has six heading levels, from H1 to H6. Used properly, they form an outline: one H1 for the page topic, H2s for the main sections, H3s for subsections inside those, and so on. Browsers show headings in bigger, bolder text, but their real job is structural. Screen-reader users jump from heading to heading to scan a page, and search engines use headings as strong clues about what each part of the page covers.

Our heading checker reads the HTML that your server sends and pulls out every heading tag in the order it appears. It indents each heading by its level, so you can see at a glance whether the structure makes sense or whether, for example, an H4 appears directly under the H1. Each heading is tagged if it is empty, very long, skips a level, or appears to be hidden.

Because the tool reads the HTML before any JavaScript runs, it shows the same starting point a search engine crawler gets. If your headings only appear after JavaScript runs, the checker will not see them, and that is a useful warning in itself.

H1 rules: one clear main heading

The H1 is the visible title of the page. It should say what the page is about in words a visitor would recognise, such as Boiler Repair in Croydon or Spring Menu, rather than a slogan or the company name. Most pages should have exactly one.

HTML does not forbid several H1s, and Google has said its systems cope with pages that have more than one. Even so, a single H1 removes any doubt about the main topic, and it is what accessibility guidance generally recommends. Multiple H1s usually happen by accident: a theme wraps the logo in an H1, a page builder uses H1 for every big banner, or a sidebar widget has its own H1.

A missing H1 is more serious. Without it, the page has no stated topic in its structure, screen-reader users lose their usual landmark, and Google has less to go on when it writes the title link for your result. If your theme hides the title on some pages, put a proper H1 back in the content.

Heading hierarchy and skipped levels

A skipped level is a jump of more than one step down, such as an H2 followed directly by an H4. It suggests a section is missing and confuses screen-reader users who navigate by level. It usually happens because someone picked a heading level for its size rather than its meaning, for example choosing H4 because it looked right in the design.

The fix is to choose heading levels for structure and use CSS for appearance. If an H3 is too large in your theme, change its style, not its level. Going back up is fine: after an H3 section you can start a new H2, and that is not a skip.

Web accessibility guidance (WCAG 2.2 success criteria 1.3.1 Info and Relationships and 2.4.6 Headings and Labels) asks for headings that reflect the real structure and describe their content. A logical outline is one of the cheapest accessibility improvements you can make, and it helps search engines at the same time.

• H1: the page topic, once.
• H2: each main section of the page.
• H3: subsections inside an H2 section.
• H4 to H6: deeper levels, rarely needed on marketing pages.

Empty, long and hidden headings

Empty headings are heading tags with no text in them. Page builders often leave them behind as spacers, or a template outputs a heading even when the field is blank. Screen readers announce them as empty headings, which is confusing, so remove them. A heading that contains only an image counts as having text if the image has alt text, and the checker shows that alt text in the outline.

Very long headings, over about 70 characters for an H1 or 100 for other levels, are usually paragraphs or calls to action styled with a heading tag because it looked bold. Headings work best as short labels. Move the extra words into a paragraph and keep the heading tight.

Hidden headings are headings that visitors cannot see. The checker looks for the most common patterns: inline display:none or visibility:hidden, the hidden attribute, aria-hidden, and classes such as hidden or d-none. Headings with screen-reader-only classes such as sr-only are reported separately, because they are a legitimate accessibility technique when used to label sections. Be aware that we cannot see rules in external stylesheets or changes made by JavaScript, so a heading hidden that way will not be flagged.

Title tag vs H1: should they match?

The title tag is what Google usually shows as the clickable headline in search results and what appears in the browser tab. The H1 is the headline people see on the page. They serve different moments, so they do not need to be identical, but they should clearly describe the same topic.

A common pattern is a title that adds context and your brand, such as Boiler Repair in Croydon | Example Heating, with a shorter H1 such as Boiler repair in Croydon. Google sometimes rewrites title links that do not match the page well, and when it does, the main visible heading is one of the sources it can use. Keeping the title and H1 consistent makes that less likely.

The checker compares the meaningful words in both. If they share at least half of the H1's main words, it treats them as consistent. If they share none, it flags them, because that usually means a template is outputting the wrong title or the H1 is a slogan rather than a description.

Fixing headings in WordPress, Shopify and page builders

In the WordPress block editor, select a Heading block and choose its level in the toolbar. The page or post title is normally output as the H1 by your theme, so headings inside the content should start at H2. If you see two H1s, check whether your theme also wraps the site logo or name in an H1 on inner pages.

In page builders such as Elementor or Divi, each heading widget has an HTML tag setting separate from its visual size. Set the tag to the right level and style it separately. Shopify themes usually make the product or page title the H1; headings you add in the rich text editor should be H2 or lower.

After making changes, clear any page cache and run the heading checker again, then check a page of each template so the fix is consistent across the site.

Examples you can copy

<h1>Boiler repair in Croydon</h1>
  <h2>Boilers we repair</h2>
    <h3>Combi boilers</h3>
    <h3>System and regular boilers</h3>
  <h2>Prices</h2>
  <h2>Frequently asked questions</h2>

<a class="logo" href="/"><img src="/logo.svg" alt="Example Heating home"></a>
<h1>Boiler repair in Croydon</h1>

<h2 class="section-title--small">Prices</h2>

.section-title--small { font-size: 1.125rem; }

Common mistakes to avoid

Frequently asked questions