The H1 is a page’s primary heading that names the topic and anchors the content structure for readers and search engines.
The first heading on a page carries the page’s topic. It tells people where they are, sets hierarchy for the rest of the content, and gives crawlers a clean signal about sectioning. Get this right and the rest of your layout, links, and body copy fall into place with less friction.
H1 Basics And Why It Matters
The H1 is a semantic heading element. It marks the top level of a page or article. Search engines parse it to understand section hierarchy. Screen readers use it to build a quick outline. Humans scan it to decide whether to keep reading. In short, it helps everyone grasp the page in seconds.
Heading Levels At A Glance
This quick table shows how the six heading levels typically map to a page:
| Level | Typical Use | Notes |
|---|---|---|
| H1 | Page or article title | One main heading per page keeps things clear. |
| H2 | Major sections | Each H2 starts a new section of the topic. |
| H3 | Subsections under an H2 | Great for steps, features, or methods. |
| H4 | Details under an H3 | Use when depth is needed, not by habit. |
| H5 | Edge cases or footnotes | Rare on marketing pages; common in docs. |
| H6 | Lowest-level bits | Use sparingly; often a list is cleaner. |
What The H1 Tag Means For Search Visibility
Heading elements do not act as magic rank switches. They help search engines and users grasp structure. When your top heading states the topic plainly and your subheads map the flow, crawlers can map sections correctly and people finish the page without getting lost. That leads to better engagement signals and fewer pogo-backs.
Best Practices For Writing A Strong H1
State The Topic, Not Fluff
Use clear, everyday words. Name the subject and, if helpful, the angle. Leave click-bait tricks at the door. If the page is a how-to, say so. If it’s a comparison, say which items.
Match Searcher Intent
Look at the query you want to serve and reflect it naturally. People skim titles first. If the H1 matches their task, they stay. If it’s vague, they bounce.
Keep It Short And Scannable
Most titles land near 45–65 characters on content pages and still read well on phones. Longer can work on a blog layout, but test on mobile to avoid wraps that bury meaning.
Use One Main Heading
Modern browsers can render more than one top-level heading, but a single clear main heading keeps the outline and breadcrumbs tidy for users and assistive tech.
Where The H1 Fits In Your HTML
The H1 usually sits inside the content area, not just the site header. If your theme prints a logo or site name inside a banner, don’t treat that as the page’s main heading unless the page itself is the site home. In article templates, the main heading should label that article’s subject, and the site name can live in a <header> or <nav>.
H1 vs. Title Tag (And Other Elements)
The H1 is visible in the page body. The title element sits in the head and feeds browser tabs and search result title links. These two can match or differ slightly. Keep them aligned in meaning, even if you adjust the wording for click-through in the title element.
How It Helps Accessibility
A clear top heading lets screen reader users jump straight to the main content, then scan the rest of the outline. That’s good usability and aligns with guidance on descriptive headings. You can read a plain explanation of heading ranks in the WAI tutorial: WAI headings tutorial.
Proof-Backed Guidance From Standards And Docs
HTML defines heading ranks (h1…h6) that map to nested sections. That’s baked into the spec and explains why a clean outline helps both machines and readers parse a page. Google’s primer also calls for clear headings that break up content for people, not for stuffing. See the SEO Starter Guide for plain guidance on headings and scannability.
Common Missteps And Simple Fixes
Using A Logo As The Main Heading
Logos are branding, not page topics. Keep the brand in the banner and give the content its own top heading.
Stuffing Keywords
Repeating terms or jamming modifiers reads badly and doesn’t help. Pick a clear phrase that matches the page and move on.
Over-nesting Headings
Stacks of H4–H6 often signal that the page needs fewer levels and more lists. If you’re three levels deep and the section feels skinny, switch to bullets or merge short bits.
Hiding The Main Heading For Style
Don’t hide the top heading with CSS just to tidy the layout. If design needs a smaller look, style it smaller and keep it visible.
How Many H1s Can A Page Have?
HTML supports multiple top-level headings inside separate sections, and browsers won’t break if you use more than one. Still, a single main heading on most pages is the clearest choice. Product listings, dashboards, or app-like pages can break this pattern; content articles rarely need to.
Placement, Length, And Wording Tips
Put It Near The Top
Place the top heading early in the DOM so assistive tech reaches it fast and so readers see it without scrolling.
Keep It Human
Write to a person who clicked for an answer. Use plain speech. Avoid vague phrases that tease without saying what’s inside.
Mirror The Page’s Promise
If the page solves a task, the top heading should reflect the task. If the page compares two items, name both.
Mapping Your Outline So Everything Flows
Think in chapters. The top heading sets the subject, each H2 marks a major chapter, and H3 subheads break those chapters into chunks. When a subsection grows long, consider splitting it into its own page to preserve clarity.
Editorial Checks Before You Publish
Ask Three Quick Questions
- Does the top heading match the main task?
- Can a new visitor understand the page after only reading headings?
- Does each subhead predict the text that follows?
Run A Simple Scroll Test
Open the page on a phone and skim only the headings. If the story flows and the promise is clear, you’re set. If not, revise the wording or adjust the order.
Theme And CMS Gotchas
Avoid Multiple Top-Level Headings From Widgets
Some page builders print large text as heading elements by default. Change those to styled paragraphs or divs when the text is decorative or navigational.
Use The Right Element, Not Just Bold Text
Bold fonts do not create structure. Use a real heading element and style it however you like. Structure first, cosmetics second.
Check For Hidden Headings
Collapsed blocks or accordions can contain headings that confuse the outline. If a heading hides behind a toggle by default, consider demoting it or removing it.
When You Might Tweak The Pattern
Homepages, app dashboards, and index pages sometimes lead with a site name or a phrase like “Latest Posts.” In these layouts, a top heading for the main content region is still helpful, even if a banner includes brand text above.
H1 Do’s And Don’ts
Use this quick checklist during your final pass:
| Rule | Do | Don’t |
|---|---|---|
| Clarity | Name the subject plainly. | Hide meaning behind puns. |
| Count | Use one main heading on content pages. | Print a second top heading for style. |
| Length | Stay tight; keep the core words. | Pack in modifiers and filler. |
| Placement | Place it near the start of the main content. | Bury it below long banners. |
| Consistency | Align with the title element’s meaning. | Send mixed signals between title and body. |
| Accessibility | Write descriptive headings across the page. | Use generic labels that say nothing. |
How To Audit And Fix A Page In Minutes
Step 1: View The Outline
In your browser dev tools, search for <h to list headings. Check for one clear top heading and a clean H2 → H3 cascade.
Step 2: Rewrite Weak Headings
Turn vague text into plain cues. Swap “Overview” for a phrase that names the section, like “Pricing Choices” or “Refund Rules.”
Step 3: Trim Excess Levels
If you have H4–H6 with only a line or two below each one, demote them to bold list items or merge them into a parent section.
Step 4: Align Title And H1
Make sure your title element and top heading tell the same story. Wording can vary a bit; the meaning should match to avoid mixed cues in search results and on the page.
Edge Cases You’ll Run Into
Product Pages
The product name is the top heading. Specs, reviews, and Q&A live under H2s. If you must print category crumbs above the product name, style them smaller and keep them as links, not headings.
News Hubs And Category Pages
Use a top heading for the category name. Each teaser uses a subhead or just a link with strong anchor text. Keep the outline shallow to avoid clutter.
Docs And Knowledge Bases
Docs often need deeper nesting. Even then, short sections read better with lists and code blocks instead of many low-level headings.
Quick Takeaways
- The top heading sets topic and structure.
- Write it for people first; crawlers benefit too.
- One clear main heading is the safest default.
- Keep wording short, plain, and specific.
- Let subheads map the rest of the story.