The top-level heading for your page. Learn more →
<h2> - Level 2 Heading
The <h2> Element
Section titled “The <h2> Element”The <h2> element represents a second-level heading, used for major sections within a page. It sits directly below <h1> in the heading hierarchy and helps organize content into logical sections.
Quick Example
Section titled “Quick Example” Result
Syntax
Section titled “Syntax”<h2>Section Title</h2>The <h2> element creates a major section heading that subdivides content under the main <h1> title.
Attributes
Section titled “Attributes”The <h2> element supports all global attributes like id, class, style, and lang.
<h2 id="about" class="section-heading">About Us</h2>Common Use Cases
Section titled “Common Use Cases”Page Sections
Section titled “Page Sections”Use <h2> to divide your page into major sections:
Result
Blog Post Structure
Section titled “Blog Post Structure” Result
With Anchor Links
Section titled “With Anchor Links”Create a table of contents using <h2> with id attributes:
Result
Styled Sections
Section titled “Styled Sections” Result
Document Structure Best Practices
Section titled “Document Structure Best Practices”Proper Hierarchy
Section titled “Proper Hierarchy”Always use headings in order, starting with <h1>:
<h1>Main Title</h1><h2>First Major Section</h2><h3>Subsection</h3><h2>Second Major Section</h2><h3>Another Subsection</h3><h2>First Section</h2> <!-- Missing h1 --><h4>Subsection</h4> <!-- Skipped h3 -->Multiple H2 Elements
Section titled “Multiple H2 Elements”Unlike <h1>, you can (and should) use multiple <h2> elements:
<h1>Ultimate Guide to HTML</h1>
<h2>What is HTML?</h2><p>HTML stands for...</p>
<h2>Basic Syntax</h2><p>HTML uses tags...</p>
<h2>Common Elements</h2><p>The most frequently used elements are...</p>In Semantic Containers
Section titled “In Semantic Containers” Result
Accessibility
Section titled “Accessibility”Screen Reader Navigation
Section titled “Screen Reader Navigation”Screen reader users often navigate by headings. Clear <h2> elements help them scan your content:
<!-- Screen reader announces: "Heading level 2: Getting Started" --><h2>Getting Started</h2>Descriptive Headings
Section titled “Descriptive Headings”Use descriptive text that makes sense out of context:
<h2>Installation Instructions</h2><h2>System Requirements</h2><h2>Frequently Asked Questions</h2><h2>Step 1</h2><h2>Next</h2><h2>Click Here</h2>Don’t Skip Levels
Section titled “Don’t Skip Levels”Skipping heading levels confuses screen reader users:
<h1>Main Title</h1><h2>Section</h2><h3>Subsection</h3><h1>Main Title</h1><h4>Section</h4> <!-- Skipped h2 and h3 -->SEO Benefits
Section titled “SEO Benefits”Content Organization
Section titled “Content Organization”Search engines use <h2> elements to understand your page structure:
<h1>Complete Guide to React Hooks</h1>
<h2>What are React Hooks?</h2><!-- Search engines know this section explains hooks -->
<h2>useState Hook</h2><!-- This section covers useState specifically -->
<h2>useEffect Hook</h2><!-- This section covers useEffect specifically -->Keyword Placement
Section titled “Keyword Placement”Include relevant keywords naturally in <h2> headings:
<!-- Good: Natural keyword usage --><h2>How to Learn JavaScript for Beginners</h2><h2>JavaScript Tutorial: Variables and Data Types</h2>Browser Support
Section titled “Browser Support”| Browser | Version | Notes |
|---|---|---|
| Chrome | 1+ | Full support |
| Firefox | 1+ | Full support |
| Safari | 1+ | Full support |
| Edge | 12+ | Full support |
| IE | 3+ | Full support |
The <h2> element has been supported since the earliest browsers.
Related Elements
Section titled “Related Elements” to
Lower-level headings for deeper hierarchy. Learn more →
Thematic grouping, typically with an <h2> heading.
Learn more →
Self-contained content with its own heading hierarchy. Learn more →