<h2> Tag in HTML: Definition, Usage, and SEO Best Practices

Definition of the <h2> tag

The <h2> tag is an HTML element that represents a level 2 heading in the heading hierarchy of a web page. It is part of the heading tag family (headings) which includes tags <h1> to <h6>, where <h1> represents the most important title and <h6> the least important.

In the semantic structure of an HTML document, the <h2> tag is used to define the main sections that directly depend on the main title (<h1>). It plays a fundamental role in content organization, both for users and search engines. If you want to perfectly master HTML structuring, our comprehensive HTML course will guide you through all best practices.

The basic syntax is simple:

<h2>Section title</h2>

Unlike some self-closing tags like <br> or <img>, the <h2> tag requires both an opening and closing tag enclosing the title text.

The role of <h2> in the heading hierarchy

To fully understand the importance of the <h2> tag, it is essential to visualize the complete hierarchy of HTML headings. Think of your page structure like a book:

• <h1>: The book title (only one per page)
• <h2>: The main chapters
• <h3>: The subsections of each chapter
• <h4> to <h6>: Additional levels of detail

Here is a concrete example illustrating this hierarchy:

<h1>Complete Guide to Gardening</h1>

<h2>Gardening Basics</h2>
<p>Introduction to fundamental concepts...</p>

<h3>Choosing Your Tools</h3>
<p>Essential tools for beginners...</p>

<h3>Preparing Your Soil</h3>
<p>Ground preparation techniques...</p>

<h2>Indoor Plants</h2>
<p>Everything about apartment plants...</p>

<h3>Watering</h3>
<p>Recommended frequency and water quantity...</p>

<h2>Outdoor Plants</h2>
<p>Growing a successful outdoor garden...</p>

In this example, the <h2> tags clearly define the three main sections of the article: "Gardening Basics", "Indoor Plants" and "Outdoor Plants". Each of these sections can then contain subsections marked with <h3>.

Importance of <h2> for SEO

The <h2> tag plays a crucial role in search engine optimization (SEO). Here's why:

Structure signal for search engines

Indexing robots like Googlebot use heading tags to understand the structure and subject of your page. The <h2> tags indicate the main topics covered in your content, which helps search engines determine the relevance of your page for certain queries.

Featured Snippets and rich snippets

A well-organized structure with relevant <h2> increases your chances of appearing in Google's "featured snippets". These boxes displayed at the top of search results capture a large portion of clicks.

Automatic table of contents

Many tools and plugins automatically generate a table of contents based on your <h2> and <h3> tags. This feature improves user experience and can generate jump links in search results.

Importance of <h2> for accessibility

Beyond SEO, the <h2> tag is fundamental for web accessibility. Screen reader users (like JAWS, NVDA or VoiceOver) rely heavily on heading structure to navigate a page.

Navigation by headings

Screen readers offer shortcuts to jump from one heading to another. A well-defined heading structure allows visually impaired users to:

• Quickly understand the page content
• Navigate directly to the section they're interested in
• Evaluate whether the content meets their needs

WCAG compliance

The Web Content Accessibility Guidelines (WCAG) explicitly recommend using heading tags in a hierarchical and logical manner. A well-structured page with appropriate <h2> complies with these guidelines and improves overall accessibility.

Practical examples of using <h2>

Let's now look at concrete examples of using the <h2> tag in different contexts.

Homepage structure

<body>
  <header>
    <h1>My Website</h1>
    <nav>...</nav>
  </header>
  
  <main>
    <section>
      <h2>Our services</h2>
      <p>Discover our complete range of services...</p>
    </section>
    
    <section>
      <h2>Customer testimonials</h2>
      <blockquote>"Excellent service!"</blockquote>
    </section>
    
    <section>
      <h2>Latest news</h2>
      <article>...</article>
    </section>
  </main>
  
  <footer>
    <h2>Contact us</h2>
    <p>Address: ...</p>
  </footer>
</body>

In this example, each <section> of the <main> starts with an <h2> that clearly defines its content. Note that even the footer can contain an <h2> if it makes semantic sense.

Blog article structure

<article>
  <header>
    <h1>How to Learn HTML in 2024</h1>
    <p>Published on January 15, 2024</p>
  </header>
  
  <p>Article introduction...</p>
  
  <h2>Why learn HTML?</h2>
  <p>HTML is the foundation of the web...</p>
  
  <h2>Recommended resources</h2>
  <p>Here are the best resources...</p>
  
  <h3>Online tutorials</h3>
  <p>List of tutorials...</p>
  
  <h3>Recommended books</h3>
  <p>Book selection...</p>
  
  <h2>Conclusion</h2>
  <p>In summary...</p>
</article>

Combination with HTML5 semantic elements

The <h2> tag integrates perfectly with HTML5 semantic elements like <article>, <section>, <aside> and <nav>:

<main>
  <article>
    <h1>Main article title</h1>
    <p>Article content...</p>
    
    <section>
      <h2>First section</h2>
      <p>Content...</p>
    </section>
  </article>
  
  <aside>
    <h2>Related articles</h2>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
    </ul>
  </aside>
</main>

CSS styling of the <h2> tag

By default, browsers apply a predefined style to <h2> tags: a larger font size and bold text. You can fully customize this rendering with CSS.

Basic styles

h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

Advanced styles with decoration

/* H2 with a decorative line */
h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a1a;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #3498db;
  margin-bottom: 1.5rem;
}

/* H2 with icon before */
h2::before {
  content: "📌 ";
  margin-right: 0.5rem;
}

/* Centered H2 with colored background */
h2.highlight {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
}

Best practices for using <h2>

To get the most out of the <h2> tag, follow these recommendations:

Respect the hierarchy

Never skip levels in the heading hierarchy. If you have an <h1>, the next level should be <h2>, then <h3>, etc.

Be descriptive and concise

Your <h2> titles should be:

• Descriptive: they should clearly indicate the section content
• Concise: avoid titles that are too long (ideally less than 70 characters)
• Unique: each <h2> should be different from others on the same page

Include your keywords naturally

Integrate your target keywords into <h2> naturally, without over-optimization:

<!-- ❌ Over-optimized -->
<h2>Running shoes - Buy running shoes cheap price</h2>

<!-- ✅ Natural and optimized -->
<h2>How to choose your running shoes</h2>

Use multiple <h2> if necessary

Unlike <h1> which should generally be unique on a page, you can use as many <h2> as needed to structure your content. A long article can easily contain 5 to 10 <h2> tags.

Avoid common mistakes

Attributes of the <h2> tag

The <h2> tag accepts all global HTML attributes. Here are the most useful ones:

The id attribute

The id attribute is particularly useful for creating navigation anchors:

<h2 id="services-section">Our services</h2>

<!-- Link to this section -->
<a href="#services-section">See our services</a>

The class attribute

Use class to apply specific CSS styles:

<h2 class="section-title highlight">Highlighted title</h2>

The lang attribute

If a title is in a different language from the rest of the page:

<h2 lang="fr">Bienvenue sur notre site</h2>

Comparison with other heading tags

Here is a summary table of the different heading tags and their recommended usage:

Frequently Asked Questions

There is no technical limit to the number of <h2> tags you can use. The important thing is that each <h2> introduces a logical and distinct section of your content. A typical blog article contains between 3 and 10 <h2> tags, while a homepage may have more if it presents many sections.

Technically, yes, but it's not recommended. A page should ideally start with an <h1> that defines its main subject, followed by <h2> for sections. Omitting the <h1> can harm accessibility and SEO because the document hierarchy becomes incomplete.

The <h2> tag is a structural element that defines a section heading, while <strong> is a strong emphasis element for important text within a paragraph. Both have completely different semantic roles: <h2> structures the document, <strong> highlights part of the content. Never use <strong> to simulate a heading.

To master HTML structuring and optimal use of tags like <h2>, regular practice is essential. Our comprehensive HTML course on Believemy will teach you not only how to correctly use all heading tags, but also how to create semantic, accessible, and SEO-optimized web pages. You will discover practical exercises and concrete projects to consolidate your skills.