Headings H1–H6: structure for readers, accessibility and search

What headings are

MDN puts it in one line: “The <h1> to <h6> HTML elements represent six levels of section headings.” <h1> is the highest level and <h6> the lowest. A heading opens a section, and everything after it belongs to that section until the next heading of the same or a higher level.

That is why headings matter to three different audiences at once:

• Readers skim headings before they decide to read. A page with clear headings feels shorter and easier than the same text without them.
• Assistive technology. W3C's accessibility tutorial starts with this: “Headings communicate the organization of the content on the page.” Screen readers list the headings of a page and let people jump from one to the next.
• Software in general, including browsers, reader modes and search engines. “Heading information can be used by user agents to construct a table of contents for a document automatically.”

Headings are not the same thing as the <title> element. The title lives in the <head>, appears in the browser tab and is the main candidate for the title link in search results. The H1 is visible on the page and tells the reader where they have landed. The two should agree on the topic, but they do not need to be identical. The lesson “Title tags” covers the title element in detail.

Read only the headings of a well-built page and you get a table of contents. That is the simplest test of good structure.

What Google officially says

Google says less about headings than many SEO checklists suggest. Everything below is quoted word for word from Google Search Central.

Notice what is not there. Google's documentation does not call headings a ranking factor, does not say an H1 is required, and does not say you must have exactly one H1. The Starter Guide puts the number and order of headings in its section “Things we believe you shouldn't focus on”. So when someone tells you that a second H1 “gets you penalised”, there is no Google source for it.

That does not make headings unimportant. Their SEO value comes from three things Google does document: they help users navigate, they are one of the sources for the title link, and they make it clearer which text is the main title of the page.

How headings feed the title link

The title link is the clickable headline of a search result. The Starter Guide says: “There are a few sources that Google uses to generate this title link, including the words inside the <title> element (also called the title text) and other headings on the page.”

The title link documentation lists the sources in full. Among them are “Content in <title> elements”, the “Main visual title shown on the page” and “Heading elements, such as <h1> elements”. So your H1 is a real input: if Google decides your <title> is not a good description of the page, the main heading is one of the places it may take the title link from instead.

Google describes a specific problem it calls “No clear main title”: “If Google Search detects that there are multiple large, prominent headings, it may use the first heading as the text for the title link.” A page with three equally large headings at the top, for example a promo banner, the page title and a newsletter box, leaves Google to guess.

In practice: make the H1 the most prominent text on the page, put it near the top of the main content, and keep it consistent with the <title>. If your title says “Running shoes for women” and your H1 says “Spring sale”, you send two different messages about the page.

One H1 or several?

This is the most argued question about headings, and the answer depends on whom you ask.

Google Search

Google has not documented a rule. The Starter Guide says the number and order of headings do not matter from the Search perspective, and that there is “no magical, ideal amount of headings”. The title link documentation only asks that your main title be clear and distinctive. A page with two H1s will not be dropped from search because of them.

The HTML standard and MDN

HTML allows several H1s. MDN explains the nuance: “While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice.” It goes on: “A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element).”

You may have read that inside <section> or <article> every block can start with its own H1 and the browser will work out the levels. That idea, the “document outline algorithm”, was never implemented in browsers or assistive technology, and MDN now notes that nesting multiple H1s in sectioning elements is non-conforming. Do not rely on it.

Accessibility

For screen reader users the H1 is the signal for “this is where the main content starts and this is what it is about”. Several H1s weaken that signal. MDN's summary: “Prefer using only one <h1> per page and nest headings without skipping levels.”

The practical rule

Use one visible H1 per page that names the page topic. Treat a second H1 as a clarity and accessibility issue to fix when you are in the template anyway, not as an SEO emergency. A missing H1 deserves more attention, because then nothing on the page clearly says what it is.

Logical hierarchy and skipping levels

Headings form a tree. W3C describes the rule: “Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.” An H3 belongs to the H2 above it. An H2 belongs to the H1.

Skipping a level going down breaks that tree. W3C: “Skipping heading ranks can be confusing and should be avoided where possible”. MDN explains why: “A common navigation technique for users of screen reading software is to quickly jump from heading to heading in order to determine the content of the page.” If an H2 is followed directly by an H4, the listener wonders whether they missed a section.

Skipping going up is fine. W3C: “It is ok to skip ranks when closing subsections”. After an H4 you can start a new H2, because the H2 simply closes the subsections and opens a new main section.

• H1 → H2 → H3 → H3 → H2: correct.
• H1 → H2 → H3 → H4 → H2: correct, the jump back up closes the subsections.
• H1 → H3 → H3: a level is skipped. Make them H2s.
• H1 → H2 → H4: a level is skipped. Use an H3, or style the H3 smaller if that is the look you wanted.

Most pages need only H1 to H3. If you regularly reach H5 and H6, the page is probably trying to cover too much and could be split, or the content could be a list or a table instead of tiny sections.

Remember the Google quote above: out-of-order headings do not hurt you in Search. You fix the hierarchy for people, especially those using screen readers, and because a clean outline is easier for every tool to read.

How to write good headings

A heading is a promise about the text below it. Good headings let a reader understand the page from the headings alone.

• Describe the section. “Delivery times by country” beats “Delivery”. “Overview”, “More info” and “Introduction” say nothing about the content.
• Put the key words first. People scan the start of each heading. “Return policy for sale items” works better than “What you should know if you bought something on sale and want to return it”.
• Use the words your readers use. If people search for “repot a plant”, a heading that says “Container transition” makes the section harder to find and to understand.
• Keep them short, usually a few words to one line. A heading that wraps over three lines is a sentence, not a label.
• Make each heading unique on the page. Five H2s called “Features” tell neither the reader nor Google which is which.
• Do not stuff keywords. Repeating the main phrase in every heading reads badly and adds nothing. Use the main term in the H1 and let the H2s name the subtopics, with natural variations.
• Use questions where people ask questions. In an FAQ or a how-to, a heading like “How long does shipping take?” matches how users think.

For the H1 itself: it should name the page topic in plain words, match the search intent the page targets and agree with the <title>. On a product page that is usually the product name. On a category page, the category name. On an article, the article headline.

Headings, passages and featured snippets

This part is practice, not Google documentation. A clear heading followed by a direct answer makes a section easy to understand on its own. That is the kind of block Google can quote in a featured snippet or show as a relevant passage, and AI answer features also tend to work with self-contained sections.

A pattern that works well:

<h2>How often should you repot a houseplant?</h2>
<p>Most houseplants need a bigger pot when roots fill the
current one. Check the drainage holes once a year.</p>

The heading asks the question, and the first one or two sentences answer it without needing anything else on the page. Details, exceptions and examples come after. Nothing guarantees a snippet, though: Google chooses what to show for each query. The lesson “Featured snippets, lists and tables” goes deeper into formats.

Styling vs semantics

Heading levels describe structure, not size. MDN is direct: “Do not use heading elements to resize text. Instead, use the CSS font-size property.” If your H3 should look like a small label, style it that way. Do not pick an H5 because it happens to have the right font size in your theme.

The opposite mistake is just as common: text that looks like a heading but is a <div>, <span> or bold <p>. It looks right to sighted users, but screen readers do not announce it as a heading and it does not appear in their heading list. Crawlers that report headings do not see it either.

Other misuses to avoid:

• Wrapping a whole paragraph, a card or a button in a heading tag because the theme made that text big.
• Using headings for decorative words: “Welcome!”, “Hello”, a tagline under the logo.
• Empty headings, often left by a page builder block with no text.
• Headings that contain only an image. If you must, the image needs alt text, because that text becomes the heading.

When you cannot change the element, for example inside a third-party widget, role="heading" with aria-level="2" tells assistive technology to treat it as a heading. It is a fallback. A real <h2> is always better.

<header>
  <h1><img src="/logo.svg"></h1>
</header>
<main>
  <div class="big-title">
    How to repot a houseplant
  </div>
  <h4>When to repot</h4>
  <h2>Free delivery over $50!</h2>
</main>

<header>
  <a href="/"><img src="/logo.svg" alt="Example"></a>
</header>
<main>
  <h1>How to repot a houseplant</h1>
  <h2 class="small">When to repot</h2>
  <p class="promo">Free delivery over $50!</p>
</main>

Headings in templates

Most heading problems are not written by editors. They come from the theme or CMS template, which is why they repeat on every page of a site.

Logo or site name as H1

Many older themes wrap the logo in an <h1> on every page. The result: thousands of pages share the same H1, and the real page title is either a second H1 or demoted to an H2. Make the logo a link with an image and alt text, and give the H1 to the content title. Some themes keep the logo H1 only on the home page. That is acceptable if the home page has no better H1 to give.

Sidebar, footer and widget headings

“Recent posts”, “Categories”, “Newsletter”, “Follow us”: widgets often come with their own H2, H3 or H4. W3C's guidance for these fixed areas: “In fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area.” Keep them consistent across all pages. If a block is not really a section, a footer column of links for example, plain text styled as a label is often the better choice.

Listing and product grids

Category pages often mark each product or post name in a card as an H2 or H3. That is fine when it is consistent and sits below the page H1. Avoid giving every card an H1, and avoid putting the price or the button text into the heading.

Headings added by JavaScript and hidden headings

If the H1 only appears after JavaScript runs, check the rendered HTML, not just the source. Google renders pages, but a heading that exists only in a client-side component is easy to lose when something breaks. Headings hidden with CSS (for example inside collapsed tabs) are still in the HTML. Visually hidden headings for screen readers are a legitimate accessibility technique; hiding stacks of keyword headings is not.

Common mistakes

• ✕No H1 at allOften on product, category and landing pages built with a page builder, where the title is a styled block.
• ✕The same H1 on every pageUsually the logo or site name in the template. It hides the real topic of each page.
• ✕Several competing H1sPromo banner, page title and newsletter box all as H1, so it is unclear which text is the main title.
• ✕Levels chosen for looksH4 used as a small heading, H2 used for a big quote. Style with CSS instead.
• ✕Fake headingsDivs and bold paragraphs that look like headings but are invisible to screen readers and crawlers.
• ✕Vague or duplicated headings“Overview”, “Details”, or five H2s with the same text.
• ✕Keyword-stuffed headingsThe main phrase forced into every H2 and H3 so the page reads like a list of search queries.
• ✕Headings as paragraphsAn editor applies H2 to a long sentence to make it stand out.
• ✕H1 and title that disagreeThe title targets one topic, the H1 announces another, so the page sends mixed signals.

How to audit headings with a crawler

1. Crawl the site and export the H1 and H2 of every URL. Most SEO crawlers extract them by default.
2. Filter pages with no H1. Check whether the title exists as a styled div or only appears after JavaScript.
3. Filter pages with more than one H1. If the second H1 is the same on every page, it is a template issue.
4. Find duplicate H1s across many URLs. The same H1 on hundreds of pages points to a logo H1 or a missing field in the CMS.
5. Compare H1 with the title. Look for pages where they describe different topics, or where the H1 equals the site name.
6. Look for empty and very long headings. Both are usually editor or page builder misuse.
7. Check the hierarchy on key templates. Open one article, one product and one category page and read the heading list with a browser extension or a screen reader's heading navigation. Look for skipped levels and fake headings.
8. Compare raw and rendered HTML for pages built with JavaScript frameworks, to be sure the headings exist after rendering.
9. Fix templates first, then content. One template change can fix thousands of URLs. Content fixes, like rewriting vague headings, go page by page, starting with pages that bring traffic.

Treat the results with Google's own words in mind. Out-of-order headings and a second H1 are not ranking problems. Missing or misleading main titles, fake headings and templates that hide the topic of every page are worth fixing, for readers, for accessibility and for a cleaner title link.

FAQ

Sources

• Google Search Central — SEO Starter Guide
• Google Search Central — Influencing title links in Google Search
• MDN — <h1>–<h6>: The HTML section heading elements
• W3C WAI — Headings, Page Structure Tutorial

Quotes checked against the official pages on 30 October 2026.