<h2>

Defines a level 2 heading (section heading)

Definition and Usage

The <h2> element establishes a level 2 heading in an HTML document. It represents major section headings that fall under the main <h1> title.

HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.

Tip: Use <h2> tags to divide your content into major sections. Each major topic or section should have its own <h2> heading.

Best Practice: Always ensure an <h1> exists before using <h2>. Don't skip heading levels in the hierarchy.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Examples

Basic H2 Heading

Create section headings with H2:

Example
<h1>Complete HTML Guide</h1>

<h2>Introduction to HTML</h2>
<p>HTML stands for HyperText Markup Language...</p>

<h2>HTML Elements</h2>
<p>HTML elements are the building blocks...</p>

H2 with Styling

Style section headings with CSS:

Example
<style>
  h2 {
    color: #1f2937;
    font-size: 32px;
    font-weight: 600;
    margin-top: 48px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid #3b82f6;
  }
</style>

<h2>Features Overview</h2>

Document Structure with H2

Create a well-structured document with proper heading hierarchy:

Example
<article>
  <h1>Web Development Best Practices</h1>

  <h2>HTML Best Practices</h2>
  <p>Writing semantic HTML is crucial for accessibility...</p>

  <h2>CSS Best Practices</h2>
  <p>Use modern CSS techniques for better styling...</p>

  <h2>JavaScript Best Practices</h2>
  <p>Write clean and maintainable JavaScript code...</p>
</article>

Semantic Hierarchy with H2 and H3

Combine H2 with H3 for deeper content structure:

Example
<article>
  <h1>Getting Started with React</h1>

  <h2>Installation</h2>
  <h3>Using npm</h3>
  <p>Install React using npm package manager...</p>

  <h3>Using Create React App</h3>
  <p>Use Create React App for quick setup...</p>

  <h2>Your First Component</h2>
  <h3>Functional Components</h3>
  <p>Create components using functions...</p>

  <h3>Class Components</h3>
  <p>Traditional class-based components...</p>
</article>

Heading Hierarchy

HTML headings follow a hierarchical structure from <h1> to <h6>:

H1 - Main Page Title

H2 - Major Section

H3 - Subsection

H4 - Sub-subsection

H5 - Minor heading

H6 - Least important

Warning: Don't skip heading levels. Always go from <h1> → <h2> → <h3>, etc. Never jump from <h1> directly to <h3>.

Default Heading Sizes

Comparison of default sizes for all heading tags:

Tag	Default Size	Importance	Usage
<h1>	2em (32px)	Most Important	Main page title (one per page)
<h2>	1.5em (24px)	High	Major section headings
<h3>	1.17em (18.72px)	Medium-High	Subsection headings
<h4>	1em (16px)	Medium	Sub-subsection headings
<h5>	0.83em (13.28px)	Low	Minor headings
<h6>	0.67em (10.72px)	Least Important	Lowest level headings

SEO Best Practices

Multiple H2 Tags OK: Unlike H1, you can have multiple <h2> tags per page
Descriptive Headings: Make H2 headings clearly describe the section content
Include Keywords: Naturally incorporate relevant keywords in section headings
Logical Order: H2 should come after H1, and before H3
Content Division: Use H2 to break content into scannable sections
User Experience: Help users quickly understand page structure
Search Visibility: Search engines use H2 to understand page topics

Accessibility

Screen readers and assistive technologies rely on heading structure for navigation:

Section Markers: H2 tags mark major sections for screen reader users
Quick Navigation: Users can jump between H2 sections efficiently
Content Outline: H2 helps create a logical document outline
Hierarchical Structure: Maintain proper order (H1 → H2 → H3)
Meaningful Content: H2 text should clearly indicate section content
No Visual Styling Only: Don't use H2 just for size - use CSS instead

Accessibility Tip: Screen reader users often navigate by heading levels. Proper use of H2 tags helps them understand and navigate your content structure.

CSS Styling Examples

Modern H2 Design

Example
<style>
  h2 {
    font-size: 36px;
    font-weight: 600;
    color: #111827;
    margin: 40px 0 20px 0;
    position: relative;
    padding-left: 20px;
  }

  h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 70%;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-radius: 3px;
  }
</style>

<h2>Section Heading</h2>

H2 with Icon

Example
<style>
  .icon-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 600;
    color: #1f2937;
    margin: 32px 0 16px 0;
  }

  .icon-heading::before {
    content: '📚';
    font-size: 32px;
  }
</style>

<h2 class="icon-heading">Learning Resources</h2>

Numbered Section Headings

Example
<style>
  body {
    counter-reset: section;
  }

  h2 {
    font-size: 32px;
    font-weight: 600;
    color: #111827;
    counter-increment: section;
  }

  h2::before {
    content: counter(section) ". ";
    color: #3b82f6;
    font-weight: 700;
  }
</style>

<h2>Introduction</h2>
<h2>Getting Started</h2>
<h2>Advanced Topics</h2>

Best Practices

DO:

Use H2 for major section headings under your H1
Have multiple H2 tags to divide content into sections
Make H2 headings descriptive and relevant
Follow proper hierarchy (H1 before H2, H2 before H3)
Use CSS for styling, not heading choice

DON'T:

Use H2 before establishing an H1
Skip from H1 to H3 without H2
Choose headings based on visual size alone
Make H2 text too long (keep it concise)
Overuse H2 tags (only for true section divisions)

Related Tags

<h1>
Level 1 heading (main title)
<h3>
Level 3 heading
<h4>
Level 4 heading
<h5>
Level 5 heading
<h6>
Level 6 heading
<section>
Defines a section container