H tags in SEO

The six levels

HTML has six heading levels. The browser draws each one a bit smaller than the last, but the level is about importance, not size.

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

Hierarchy: like the chapters of a book

Headings nest. An H2 lives inside an H1, an H3 inside an H2, and so on. Here is the classic outline:

<h1>Modes of transportation</h1>
  <h2>Vehicles</h2>
    <h3>Manual</h3>
    <h3>Automatic</h3>
      <h4>Nissan</h4>

Keep it logical: don’t talk about dogs in your H1 and cats in your H2. Talk about dogs in the H1 and, say, one dog breed in the H2.

A real example

This is how it works in my article What is the meta title tag and what is it for?: the H1 holds the main topic and the H2 opens a subtopic.

<h1>What is the meta title tag and what is it for?</h1>
<p>...</p>
<h2>How do we change the meta title of a URL?</h2>
<p>...</p>

The H1 contains the keywords I want to rank for. It tells Google: “this is the main topic of my article.”

Meaning first, size second

Choose the tag for its meaning, then change how it looks with CSS. Never pick an <h4> because you like its size.

<h4 style="font-size:2rem">Coffee guide</h4>
<h1 style="font-size:1rem">Everything you need</h1>

<h1 class="big">Coffee guide</h1>
<h2 class="small">Everything you need</h2>

Headings inside page sections

Headings work together with semantic containers like <main>, <article> and <section>: each section gets its own heading.

<main>
  <h1>Coffee guide</h1>
  <p>Intro...</p>
  <section>
    <h2>Origins</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Brewing</h2>
    <p>...</p>
  </section>
</main>

Accessibility: what a screen reader hears

Screen reader users often jump from heading to heading to skim a page. Good headings are their table of contents. The W3C Web Accessibility Initiative recommends headings that reflect the page structure.

<h1>Coffee guide</h1>
<h2>Origins</h2>
<h2>Brewing</h2>
<h3>Espresso</h3>

Common mistakes

Three mistakes I see all the time, each with its fix.

1. Skipping levels

<h1>Coffee guide</h1>
<h4>Ingredients</h4>
<h2>Steps</h2>

<h1>Coffee guide</h1>
<h2>Ingredients</h2>
<h2>Steps</h2>

2. Fake headings made with styles

<p style="font-size:2rem;font-weight:bold">Coffee guide</p>

<h1>Coffee guide</h1>

3. Headings for things that are not titles

<h2>Menu</h2>
<h2>Login</h2>
<h2></h2>

<nav aria-label="Menu">
  <a href="/">Home</a>
</nav>
<h2>Ingredients</h2>

Try it yourself

Edit the code, load a preset and watch the outline and the checks change.

What are H tags for in SEO?

H tags let us prioritize some keywords over others for Googlebot and give it more context about the page. The better Google understands our content, the more ways it can surface it: we show up for queries related to our main keyword and for the keywords in the H2 and H3. To choose them well, lean on solid keyword research.

The H1 is not the meta title

They are two different things. The meta title is what appears in the search results; the H1 is the headline on the page. They should be related, but they don’t need to be identical. I explain the first one in what is the meta title tag.

<head>
  <title>H Tags in SEO: Examples and Best Practices</title>
</head>
<body>
  <h1>H tags in SEO</h1>
</body>

Remember: the H1 should contain the main topic of the page. Google has said that using more than one H1 is not a problem, but one clear H1 is the best practice and keeps the structure easy to read, as the Google SEO Starter Guide suggests.

Where to place keywords

In SEO we usually place the keywords we care about in the H1, H2 and H3, because the further a tag is from the H1, the less weight it carries. Write them for people first.

<h1>SEO SEO services cheap SEO</h1>
<h2>best SEO cheap SEO agency SEO</h2>
<h2>SEO SEO SEO prices</h2>

<h1>What is SEO</h1>
<h2>How SEO works</h2>
<h2>SEO for Google vs. SEO for YouTube</h2>
<h3>Which one to start with</h3>

Each subheading should answer a question your reader is likely to have. That is also how you earn extra queries.

A full SEO example

Here is a complete outline for an article targeting “how to make coffee”:

<h1>How to make coffee at home</h1>
  <h2>What you need</h2>
    <h3>Coffee beans</h3>
    <h3>Equipment</h3>
  <h2>Step by step</h2>
  <h2>Common mistakes</h2>
  <h2>FAQ</h2>

Quick checklist

• One clear H1 with the main topic.
• H2 for the main sections, H3 only inside an H2.
• No skipped levels and no empty headings.
• Keywords written naturally, never stuffed.
• Don’t use headings just to make text bigger.
• Don’t hide headings with CSS tricks.

Want to see more?