New format
The HTML H1 tag: styling, hierarchy, and SEO
H1 is the main visible page heading: it sets the topic for people and helps search understand the document. It is not a magic ranking switch — it is part of a clear structure with the title tag, subheads, and body copy.
Below: how to style H1, how it differs from Title, how to build an H2–H6 hierarchy, typical CMS mistakes, and a quick check. Broader on-page work lives in the page-optimization article; here the focus is headings.
Why you need H1
H1 answers “what is this page?” above the fold. Users see the topic immediately; the bot gets a strong structural signal next to Title, lead, and main copy.
A perfect H1 alone will not save thin or stolen content. It works as a chain: one intent → clear heading → text that delivers the promise.
A good H1:
- one per main-content page
- reads as a heading, not a keyword sheet
- aligned with Title and URL in meaning
- visible without hunting through template blocks
H1 and Title: the difference
Title lives in `<head>` and usually becomes the snippet headline. H1 is in `<body>` — people see it on the page. Matching wording one-to-one is not required and often hurts CTR: the results and the page need different accents.
Example: Title — “Water delivery in Kazan — order from 1 bottle”; H1 on the page — “Drinking water delivery across Kazan.” Shared meaning, not clones.
In practice:
- Title shorter and written for the click
- H1 more natural for reading on the page
- do not cram five commercial tails into both
- brand in Title where it helps; in H1 if it is part of the offer
How to add and style H1
In HTML it is `<h1>…</h1>`. In a CMS the “post title” field often already outputs as H1 — check the theme: sometimes the post title is H2 while H1 is the logo or hidden utility text.
Style via CSS, not font size on a random `<div>` and not `<b>` instead of hierarchy. For accessibility, heading order matters — not only “big text.”
Styling:
- short and to the point (often about 70–90 characters, no hard cap)
- no ALL CAPS and “!!!!!”
- no nested “just in case” links inside H1
- do not hide H1 with `display:none` for SEO — pointless and risky
Keywords in H1 without stuffing
State the main topic the way a person would: service, product category, article question. Secondary wording goes to H2–H3 and body copy.
Stuffing (“buy cheap wholesale price moscow”) hurts trust and often the snippet. One clear H1 beats three keywords separated by commas.
Wording checklist:
- reflects page intent
- does not clone Title verbatim
- no city × service × “cheap” × “24/7” in one line without need
- aligned with the first paragraph
H1–H6 hierarchy
Think table of contents: H1 is the document topic, H2 large blocks, H3 subsections under H2. Skipping levels “because the type size looks nice” hurts scanning and accessibility.
H4–H6 are rarer on marketing sites; if you use them, keep nesting logic. On a product card often: H1 = name, H2 = description / specs / reviews.
Anti-patterns:
- five H1s in the template
- an H2 higher in meaning than a “lost” H1
- all subheads one style with no heading tags
- the same H1 on pagination “page 2” with no clarification
How to check H1 on the site
Spot checks: View Source or inspector — search `h1`. In bulk: a crawler (Screaming Frog and peers) — H1 column, duplicates, empties. In webmaster panels, spot-check problem URLs after a template change.
After a CMS theme swap, recheck home, product card, category, and a blog post — templates often differ.
What to log in the audit:
- pages with no H1
- pages with two or more H1s
- duplicate H1s across URLs
- H1 = Title word for word sitewide (template-spam signal)
FAQ
How many H1s should a page have?
Aim for one meaningful H1 on the main content. Multiple H1s in the template (logo, widgets) are better removed — they confuse people and markup.
Must Title and H1 match word for word?
No. Shared meaning, different wording is better: Title for the snippet, H1 for the on-page screen.
Is a keyword required in H1?
A clear sense of the query or service helps — not exact-match at any cost. Readability beats density.
Can you style a div like a heading without H1?
Visually yes; for SEO and accessibility it is worse. A heading should be a real HTML heading by meaning.
Are H2–H6 always needed?
On a short landing, H1 plus paragraphs may suffice. On long copy and catalogs, an H2–H3 hierarchy helps scanning a lot.
Does H1 rank harder than Title?
Both help topic understanding. For clicks from the results, Title and the snippet matter more; for understanding the page on-site — H1 and structure.
How do you check H1?
View source, an extension, or a crawler: look for `<h1>`. In DevTools it is easy to see if the heading is hidden or duplicated.
Can H1 be an image?
Bad idea: text in an image is worse for search and accessibility. If the logo is in the header, do not replace the content H1 with it.
Logo as H1 on every URL — and titles cloned sitewide?
We’ll set one meaningful H1 per template and a sane H2–H3 hierarchy — readable, not stuffed.
Discuss the task
