`<h2>` Heading level 2

Q: When should I use h2 instead of h1?

The page topic gets one <h1> , and each major section under it gets an <h2> , like the chapters of a book. Sub-parts of a section get <h3> . The level comes from the element's position in the structure. How big the text looks is CSS's business. For the top level, see the h1 reference .

A main section heading, one step below h1.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

Main sections of a page get an <h2>. If the h1 is the title of a book, each h2 is a chapter title.

You can use as many h2 headings as you need. Keep the order sensible: h2 comes after the h1, and subsections inside an h2 use h3. Skipping levels (going from h2 straight to h4, for example) breaks the outline, and so does choosing a level for its font size.

The rules for every level are in the headings section of the HTML Living Standard (opens in a new tab). Build a complete outline in the Heading Order lesson.

Syntax

<h2>Section title</h2>

When to use it

Each main part of a page gets an h2: "Ingredients" and "Method" on a recipe, "Features", "Pricing" and "FAQ" on a product page, the chapters of a long article. If the parts would make a sensible table of contents, their titles are h2 headings.

A part with only a sentence or two may not need a heading at all. A bold lead-in word inside the paragraph can do the job. Cards in a grid that already sits under an h2 section take h3 titles, not another round of h2.

Sidebars and footers often get h2 headings like "Newsletter" or "Follow us". That is valid. If those blocks come early in the source, though, screen reader users hear site furniture mixed in with the page's own sections in the headings list. Keep such headings short and put the blocks after the main content. The headings lesson covers the basics.

Live example

Edit the code and watch the preview.

<h1>Pancake Guide</h1>
<h2>Ingredients</h2>
<p>Flour, milk and eggs.</p>
<h2>Method</h2>
<p>Mix, rest and fry.</p>

More examples

Table of contents linked to h2 ids

Each h2 has an id, and a small navigation list at the top links to them with # fragments. Readers can jump straight to a section, and the same links work when shared, because the fragment points at the heading.

<h1>Pancake guide</h1>
<nav aria-label="Contents">
  <ul>
    <li><a href="#batter">Making the batter</a></li>
    <li><a href="#frying">Frying</a></li>
  </ul>
</nav>
<h2 id="batter">Making the batter</h2>
<p>Whisk flour, milk and eggs until smooth.</p>
<h2 id="frying">Frying</h2>
<p>Use a hot pan and a little butter.</p>

h2 headings for page sections and sidebar

The main content and the sidebar both use h2 headings, because each starts a top-level part of the page under the single h1. The sidebar comes after the main content in the source, so the headings list starts with the page's own sections.

<main>
  <h1>Weekend workshops</h1>
  <h2>Bread basics</h2>
  <p>Saturday, 10am to 1pm.</p>
  <h2>Cake decorating</h2>
  <p>Sunday, 2pm to 5pm.</p>
</main>
<aside aria-label="Newsletter">
  <h2>Get new dates by email</h2>
  <p>One email a month, no spam.</p>
</aside>

Tip: h2 marks the main sections under the page's h1.

Browser support

Every browser has rendered h2 since the earliest versions of HTML. Default sizes and margins differ slightly between browsers, so set them in your own CSS if the exact look matters. Every heading level is exposed to screen readers, which can list headings or jump between them.

Accessibility

Screen reader users skim a page by its headings. Each h2 should be a short, descriptive label for the section after it (WCAG 2.4.6), and the W3C note Understanding Headings and Labels (opens in a new tab) has examples of clear ones.

Common mistakes

Wrong

<h2>Subscribe to our newsletter today!</h2>

Right

<p class="cta">Subscribe to our newsletter today!</p>

A heading labels a section. For a big, bold sentence, use CSS.

Frequently asked questions

When should I use h2 instead of h1?

The page topic gets one <h1>, and each major section under it gets an <h2>, like the chapters of a book. Sub-parts of a section get <h3>. The level comes from the element's position in the structure. How big the text looks is CSS's business. For the top level, see the h1 reference.

How many h2 tags can I use on a page?

As many as the page has main sections. There is no limit, and several <h2> elements carry no SEO penalty. Each one should honestly label the content that follows it and sit under the page's <h1> in a logical hierarchy.

Practise it

Headings (Module 2: Text)
Lists (Module 2: Text)
Project: Recipe Card (Module 2: Text)
New Tabs and Page Jumps (Module 3: Links and Media)
Project: Travel Postcard (Module 3: Links and Media)
div and span (Module 4: Structure and Semantics)

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.

<h2> Heading level 2