# H1 Tag Definition: Examples and What Google Actually Reads
**URL:** https://mettevo.com/blog/article/h1-tag-definition-examples-and-what-google-actually-reads
**Published:** 2026-10-14
**Updated:** 2026-10-14
**Author:** Oleg Silin
**Category:** Blog | Mettevo
> Learn what an H1 tag is, why it matters for SEO, and how to optimize heading tags to improve page structure, readability, and search visibility.
---
An H1 tag is the HTML (HyperText Markup Language) heading element, written , that marks a page's main headline for browsers, search engines, and assistive technology. Google's own documentation lists heading elements among the signals it scans to build the blue title link shown in search results, alongside the element and other prominent on-page text.
## What Is an H1 Tag?
The <h1> element sits in a page's <body>, not its <head>, and renders as visible text, typically the large headline at the top of an article or landing page. <h1> through <h6> "represent six levels of section headings," with <h1> as "the highest section level."
## Correct H1 Example and Common Mistakes
A correct <h1> is simple: one heading element in the <body>, with text describing the specific page it sits on.
<head>
<title>Wireless Noise-Cancelling Headphones - Buy Online | Example Store
Wireless Noise-Cancelling Headphones
Free shipping on orders over $50.
The carries store branding for the browser tab. The <h1> states the page's subject for a visitor reading the page itself. They can overlap without matching word for word, as they do here.
Two <h1> elements on one page is the classic version of this mistake:
<h1>Wireless Noise-Cancelling Headphones</h1>
<h1>Limited Time Offer</h1>
Two competing headlines like these recreate the exact scenario Google's title-link documentation calls out: two large, prominent headings with no clear signal for which one is the page's actual title.
A styled <div> standing in for a real heading is a quieter version of the same problem:
<div class="hero-title">Wireless Noise-Cancelling Headphones</div>
CSS (Cascading Style Sheets) can make this look identical to an <h1>, but it carries none of the heading semantics, so screen readers and any system reading the document's outline skip past it.
A generic, template-inherited heading is the pattern our own audit below found most often. <h1>Projects</h1> is correct on a project listing page. It is wrong on an individual case-study article that never got a headline of its own, just whatever a shared layout component printed.
Skipping a heading level breaks the outline in a different way:
<h1>Wireless Noise-Cancelling Headphones</h1>
<h3>Battery Life and Charging</h3>
MDN's accessibility guidance is specific about why this matters: "Do not skip heading levels: always start from <h1>, followed by <h2> and so on."
## H1 vs Title Tag: What Shows Where
The H1 and the title tag get confused because both describe a page, but they serve different audiences. H1 is one piece of a page's broader [on-page SEO](https://mettevo.com/seo/on-page-seo) setup; the table below isolates the two headline elements specifically.
**Title tag (****<title>****)**
**H1 heading**
Lives in
<head>, not visible on the page
<body>, visible as the main headline
Visitors see it
Browser tab and bookmarks
The page content itself
Google's stated use
Primary source for the title link in search results
Fallback source, used "when there's more than one large, prominent heading, and it isn't clear which text is the main title of the page"
Display limit
No HTML limit; Google's own documentation says the title link "is truncated in Google Search results as needed, typically to fit the device width"
No display limit; a readability choice, not a technical one
Closing tag
Required
Required, per MDN: "both the starting and ending tag are mandatory"
The title-link fallback described above is the real link between H1 and search results, not a ranking effect on its own. When a title tag is missing, generic, or ambiguous, Google may reach for a page's most prominent heading to fill the gap. A page with several competing headings gives that process nothing clear to grab.
## What Are H1, H2, and H3 Tags Used For?
These three levels build a page's outline much like a table of contents nests sections under chapters. <h1> names the page itself. <h2> marks its major sections, matching the headings used throughout this guide. <h3> breaks a section into smaller topics when one <h2> covers too much ground. <h4> through <h6> extend that nesting further, though most articles never need to go past <h3>.
Order matters more for people than for rankings. Google's SEO Starter Guide states: "Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn't matter if you're using them out of order." Screen reader users feel a broken sequence directly. Google will not penalize a scrambled order, but the people relying on that order to read the page will notice it anyway.
## How to Check H1 Tags on Your Own Site
Checking H1 tags on your own site takes three tools working together, since each one shows something the others miss.
1. Open Search Console's Performance report, filter by Query, and compare position against clicks for pages you suspect are affected.
2. Check the Pages report under Indexing for any URL marked "Duplicate without user-selected canonical."
3. Run a one-line script in DevTools to see every <h1> a single page renders, including ones JavaScript adds after load. View page source shows only the server response, so it misses anything a script inserts later.
4. Crawl the full site and sort the H1 column to catch repeats a page-by-page check would miss.
### In Google Search Console
Search Console has no report labeled H1. The Performance report's default view covers [the past three months](https://support.google.com/webmasters/answer/7576553), the same window used in the audit above. A query with steady impressions, a page-two position, and zero clicks over that window is worth a second look. Check whether the ranking page actually shows what the query asks for. The Indexing report's duplicate-canonical status catches address-level duplicates, such as a trailing-slash homepage. It will not catch a template printing the wrong heading onto a page with its own unique URL.
### In Your Browser
The DevTools console script from step 3 above is:
document.querySelectorAll('h1').forEach(h => console.log(h.textContent.trim()));
The snippet above prints the text of every <h1> currently in the rendered page, including ones added after the first paint, which a raw page-source view will not show.
### With a Site Crawler
A crawler such as Screaming Frog's SEO Spider exports an H1 column for every URL in one pass; sorted, repeated values sit next to each other regardless of which page they came from. [Screaming Frog's own documentation](https://www.screamingfrog.co.uk/seo-spider/issues/h1/h1-duplicate/) states the reason plainly: "It's important to have distinct, unique and useful main headings. If every page has the same <h1>, then it can make it more challenging for users and the search engines to understand one page from another." That is the exact question the audit above set out to answer, at a scale no browser tab covers alone.
## FAQ
The FAQ section below is marked up as FAQPage structured data in the JSON-LD (JavaScript Object Notation for Linked Data) at the top of this page. The same schema.org approach applies to product, review, and article markup across the rest of the site.
### Can a page have more than one H1 tag?
HTML allows more than one h1 element on a page, as long as none are nested inside each other, according to MDN's documentation. MDN still calls a single h1 the general recommendation, comparable to a page's title element. Google's title-link documentation adds a practical reason to keep to one: multiple large, prominent headings can leave it unclear which text is the page's actual title.
### Does an H1 tag need a closing tag?
Yes. MDN's tag-omission rule for h1 through h6 is explicit: none, both the starting and ending tag are mandatory. That sets h1 apart from elements such as li or p, where a closing tag can sometimes be left out. A browser's parser usually recovers from a missing closing tag by closing it automatically, but the markup itself is invalid.
### What is the difference between H1 and H4 tags?
Both belong to the same h1 through h6 family of section headings MDN defines, and the difference is level, not function. H1 marks a page's top-level heading, generally one per page, while h4 marks a heading nested three levels deeper, inside an h3 section within an h2 section. Browsers style each level differently by default, but that is CSS, not a semantic rule.
### Does heading order affect Google rankings?
Not directly. Google's SEO Starter Guide states that semantic heading order is fantastic for screen readers, but from Google Search's perspective it doesn't matter if headings are used out of order. It matters more for people: in WebAIM's Screen Reader User Survey #10, conducted December 2023 to January 2024, 71.6% of respondents said they navigate long pages by jumping between headings.