Heading Tags: How to Use H1 to H6 and Fix H1 Errors

What are heading tags (H1 to H6) in HTML?

HTML headings, often called header tags in casual speech, are visible body content that names a section of the page. Browsers give them a default size and a bold weight, but that is only styling, and CSS can change it. The number in the tag is the rank of the heading, not its size.

The syntax is simple: open the element, write the text, close it.

<h1>Heading Tags Explained</h1>
<h2>What each level means</h2>

The WHATWG HTML Living Standard allows more than one H1 on a page. MDN Web Docs calls that not a best practice and advises a single H1 for screen reader users, and our report follows that advice. The MDN heading elements reference has the full specification details.

Heading tags vs title tag, header and head

These words get mixed up constantly, and people confuse the H1 and the title tag more than any other pair. The title element lives in the head of the document and shows in search results and browser tabs, while the H1 lives in the body. The header element is a layout region and the head element holds metadata, so neither is a heading. Our meta title guide covers the title side.

Why heading tags matter for SEO, readers and screen readers

People scan before they read. Descriptive subheadings let a visitor judge in seconds whether the page answers their question and jump to the part they need.

Screen reader users depend on the heading structure even more. JAWS, NVDA and VoiceOver let a person do heading navigation, jumping from heading to heading and filtering by level, so your document outline works as their table of contents. WCAG 1.3.1 Info and Relationships and WCAG 2.4.6 Headings and Labels both apply.

Search engines read headings as clues about topic, and clear question style sections can be easier to lift into featured snippets. Be realistic, though. The Google SEO Starter Guide lists the number and order of headings among the things it believes you should not focus on, and says there is no ideal number. The gain is clarity, accessibility and a cleaner snippet, not a bonus for a perfect count. Our AI readiness card also counts a single clear H1 as a signal.

How SEO Site Checker tests your heading tags

Our audit opens your URL in headless Chromium, waits for the load event (with a 20 second navigation limit) and takes the rendered HTML. BeautifulSoup then finds every h1 to h6 element in the document and reads its text.

The exact rule: only the number of H1 elements decides the result. Exactly one passes. No H1 fails, and two or more H1 elements also fail. H2 to H6 never change the status.

This check never returns a warning. It counts as one pass or fail item in the overall score, which is passed checks divided by all checks.

What the report reads

The report works from the rendered DOM, not the raw source, so scripts that run before the load event can add headings we will see. Each level gets a count badge and an expandable list. Signed in users can open the heading text, while guests see a log in prompt.

Pass and fail rules

A pass shows a green tick and a line saying the page has heading tags. That wording is looser than the rule, because a page with H2 tags and no H1 still fails. A fail shows a red marker and a How to Fix button that opens the steps further down this page.

The red card prints the same no H1 sentence whether you have no H1 or several, so it can appear on a page that has two. Trust the console count described below, not the sentence. A late script gives a red result too, because the heading did not exist when we read the page.

The separate AI readiness item called Single descriptive H1 is softer. It passes one H1 and fails none, but two or more earn an amber warning at half weight, so a duplicate H1 page can be amber there and red in the SEO check. It sits outside the SEO score.

Edge cases we confirmed

• Counted. Hidden H1s (display none), empty H1s, H1s that only wrap an image, H1s a script adds before load, and H1s inside noscript, template or inline SVG foreignObject.
• Not counted. H1s inside shadow DOM or iframes, a div with role heading and aria-level 1, and an H1 a script adds about three seconds after load, which leaves the report with a missing H1 result.

Put together, the rules look like this.

• Pass: exactly one H1 element in the rendered DOM.
• Fail: zero H1 elements, or two or more.
• Not tested: H2 to H6 counts, level order, skipped levels, heading length, keywords and duplicate headings.

Run the heading check

How to check heading tags on any page

You can see any outline in under a minute, including pages you do not own.

1. Run the report. Open the Headings card to see the count for each level.
2. Use the console. Press F12 in Chrome DevTools, open the Console and paste the snippet below. For a quick H1 count, run document.querySelectorAll('h1').length instead, which must return 1.
3. View page source. Press Ctrl+U (Cmd+Option+U on a Mac) and search for h1. View source shows raw HTML while our report reads the rendered page, so a script built H1 may appear in only one.
4. Read it as a contents page. If it makes no sense alone, the structure needs work.

document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function (h) {
  console.log(h.tagName, h.textContent.trim());
});

Each line shows the level and text in document order. Look for a second H1, a jump such as H2 to H5, and headings that say nothing. The console only counts elements in the live page DOM, so an H1 inside a noscript or template block is counted by our report but not by this query. If the numbers disagree, search the page source.

How to fix a missing or duplicate H1 tag

Start by working out where each H1 comes from. It is usually one template edit.

1. Choose the topic. Pick the phrase that names the page and make it the H1, near the top of the main content.
2. Find every source. Check the page title, logo, hero banner, widgets, footer blocks and builder text blocks set to H1.
3. Demote the extras. Keep the best H1. Change each other one to a paragraph, div or span with a CSS class, or to an H2 to H6 when it labels a real section.
4. Fix the hierarchy. Put each H3 under an H2, and use CSS for size.
5. Publish and re-test. Save and publish, then clear the page and CDN cache and run the report again.

A theme that wraps the logo in an h1 is the usual culprit.

<!-- Before: two H1 elements -->
<a href="/"><h1 class="logo">Acme Garden Tools</h1></a>
<h1>How to Sharpen Pruning Shears</h1>

<!-- After: one H1 -->
<a href="/"><div class="logo">Acme Garden Tools</div></a>
<h1>How to Sharpen Pruning Shears</h1>

Before touching a live theme, preview the corrected markup in our online HTML viewer.

No H1 on the page

Typical causes: the title is a styled div or span, the theme skips the H1 on some templates, or a page builder block uses a paragraph. Make the visible page title an h1 element. Don't paste in a hidden H1 just to turn the check green: our report counts it and passes, but nobody sees that heading.

Two causes are easy to miss. An H1 inside an iframe or shadow DOM, or a div with role heading, is not counted. And a bot protection warning means the report read a challenge page, not yours.

Two or more H1 tags

Usual causes are the logo plus the page title, several hero sections, and widgets or sliders. When the extra H1 repeats everywhere, fix it once in the theme template. A hidden H1 in a mobile menu counts too. The old idea of one H1 per section element never worked in browsers or screen readers, so don't rely on it.

H1 appears only after JavaScript runs

If your script builds the H1 well after load, the report and some crawlers may never see it. Render it on the server or make sure it exists before the load event. Then press Ctrl+U and confirm the h1 is in the raw HTML.

How to set heading tags in WordPress, Shopify, Wix and plain HTML

Most failures come from the theme, not from the editor where you set the level.

WordPress

In the WordPress block editor, the Heading block has a level control in its toolbar, and a new block defaults to H2. The post title normally prints the H1, so use H2 and below inside the content. Then check the Site Title or logo block in the header template. The Site Title block often prints an H1 on the home page only, so the problem may appear on one page and not another.

Shopify

Most Shopify Liquid themes already print the page or article title as the H1, so use Heading 2 and below in the formatting menu. Theme level H1s live in code: open Online Store, Themes, Edit code and search for h1.

Wix

In the Wix Editor, select the text, open Edit Text and look for the SEO and Accessibility option that lets you pick the heading tag. Menu labels change between editor versions, so confirm the path in your live editor.

Page builders

Elementor and similar builders give the heading widget an HTML tag setting. Set extras to div, span or p.

Plain HTML

Edit the element directly. Wrap the main content in a main element and keep the single h1 inside it.

Heading tags example: a clean outline and a broken one

Two short blocks show the difference. Copy the first pattern and avoid the second.

A clean outline

<h1>Pruning Shears Buying Guide</h1>
<h2>Bypass vs anvil blades</h2>
<h3>Best for live wood</h3>
<h2>How to sharpen and oil them</h2>

This page has one H1, two H2 sections and one H3 under the first, so the headings read like a table of contents.

A broken outline

<h1>Acme Garden Tools</h1>
<h1>Pruning Shears Buying Guide</h1>
<h4>Bypass vs anvil blades</h4>
<h3>Sign up for our newsletter</h3>

The logo is an H1, the title is a second H1, an H4 sits under an H1, and the newsletter line borrows an H3 for size. Use a paragraph with a class instead.

<p class="big-text">Sign up for our newsletter</p>

Common heading tag mistakes that fail the check

Each of these maps to something the report detects or misses.

• Logo wrapped in an H1. It gives every page two.
• Levels picked for size. Choosing an H4 because it looks smaller leaves skipped heading levels.
• An empty heading or image only H1. It passes our count but gives a screen reader nothing to announce.
• Hidden or late H1s. An off screen H1 in a mobile menu counts, and a script H1 may arrive too late, as the sections above explain.

Title tag is not the H1: they are different elements. Use the meta tag analyzer to read your title tag, then compare it with the H1 in the report.

Heading tag best practices that hold up

Only the first item is a report rule.

• One clear H1. State the topic in plain words near the top of the main content.
• Respect the sequence. Follow H2 with H3 so the heading hierarchy reads like a table of contents. Lighthouse and axe-core flag skipped levels, though our report does not.
• Write for people first. Match search intent without repeating a keyword in every heading. Our keyword usage check covers keywords in headings.
• Stay short and unique. Readers should grasp each heading at a glance, and no two should repeat.
• Separate structure from looks. Headings carry structure and CSS carries looks. The W3C headings tutorial goes deeper on nesting by rank.