<h2>
The <h2> element represents a second-level heading in the document's heading hierarchy. It is used for major sections within a page, directly subordinate to the main <h1> heading. Multiple <h2> elements are common on a single page to divide content into logical sections.
This page was last updated on 2025-11-17
Syntax
<h2>Section Title</h2>
Attributes
- class - CSS class name
- id - Unique identifier for linking
- style - Inline CSS styles
- title - Advisory information
- lang - Language of the heading
Examples
Major section heading:
<h1>Complete Guide to Gardening</h1>
<h2>Choosing Your Plants</h2>
<p>Content about plant selection...</p>
<h2>Soil Preparation</h2>
<p>Content about soil...</p>
With subsections:
<h2>Installation</h2>
<h3>Windows</h3>
<p>Windows instructions...</p>
<h3>macOS</h3>
<p>macOS instructions...</p>
With anchor ID for linking:
<h2 id="features">Key Features</h2>
<!-- Link to this section: href="#features" -->
When to Use
Use <h2> for the main sections of your page content. After the single <h1> that describes the overall page topic, <h2> elements divide your content into major thematic sections. Think of them as chapter titles in a book.
Maintain proper heading hierarchy by ensuring <h2> elements appear after an <h1>, and that any subsections within an <h2> use <h3> elements. Avoid skipping levels (such as jumping from <h1> directly to <h3>) as this creates an illogical document structure that harms accessibility and SEO. While skipping levels is technically valid HTML, it's strongly discouraged because screen reader users rely on heading hierarchy to navigate content.
Screen reader users often navigate pages by jumping between headings. Clear, descriptive <h2> text helps these users quickly understand what each section contains. Search engines also use heading hierarchy to understand content structure and relevance.
