<h3> - Level 3 Heading

The `<h3>` Element

Block-level HTML 1.0

The <h3> element represents a third-level heading, used for subsections within <h2> sections. It helps create a clear content hierarchy and improves both readability and accessibility.

Quick Example

<h1>Web Development Guide</h1>

<h2>Frontend Development</h2>
<h3>HTML Basics</h3>
<p>Learn HTML fundamentals...</p>

<h3>CSS Styling</h3>
<p>Master CSS techniques...</p>

<h2>Backend Development</h2>
<h3>Node.js</h3>
<p>Server-side JavaScript...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<h1>Web Development Guide</h1>

<h2>Frontend Development</h2>
<h3>HTML Basics</h3>
<p>Learn HTML fundamentals...</p>

<h3>CSS Styling</h3>
<p>Master CSS techniques...</p>

<h2>Backend Development</h2>
<h3>Node.js</h3>
<p>Server-side JavaScript...</p>

Syntax

<h3>Subsection Title</h3>

The <h3> element creates a subsection heading beneath <h2> sections, further organizing your content.

Attributes

The <h3> element supports all global attributes like id, class, style, and lang.

<h3 id="installation" class="subsection">Installation</h3>

Common Use Cases

Subsections in Articles

<article>
<h1>Complete Guide to CSS Grid</h1>

<h2>Getting Started</h2>

<h3>What is CSS Grid?</h3>
<p>CSS Grid is a powerful layout system...</p>

<h3>Browser Support</h3>
<p>Grid is supported in all modern browsers...</p>

<h2>Grid Basics</h2>

<h3>Creating a Grid Container</h3>
<p>Use display: grid to create a grid...</p>

<h3>Defining Columns and Rows</h3>
<p>Use grid-template-columns and grid-template-rows...</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h1>Complete Guide to CSS Grid</h1>

<h2>Getting Started</h2>

<h3>What is CSS Grid?</h3>
<p>CSS Grid is a powerful layout system...</p>

<h3>Browser Support</h3>
<p>Grid is supported in all modern browsers...</p>

<h2>Grid Basics</h2>

<h3>Creating a Grid Container</h3>
<p>Use display: grid to create a grid...</p>

<h3>Defining Columns and Rows</h3>
<p>Use grid-template-columns and grid-template-rows...</p>
</article>

Product Features

<section>
<h2>Premium Features</h2>

<h3>Advanced Analytics</h3>
<p>Track user behavior with detailed insights...</p>

<h3>Priority Support</h3>
<p>Get help when you need it most...</p>

<h3>Custom Integrations</h3>
<p>Connect with your favorite tools...</p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h2>Premium Features</h2>

<h3>Advanced Analytics</h3>
<p>Track user behavior with detailed insights...</p>

<h3>Priority Support</h3>
<p>Get help when you need it most...</p>

<h3>Custom Integrations</h3>
<p>Connect with your favorite tools...</p>
</section>

Documentation Structure

<h2>API Reference</h2>

<h3>Authentication</h3>
<p>All API requests require authentication...</p>

<h3>Rate Limiting</h3>
<p>We limit requests to 1000 per hour...</p>

<h3>Error Handling</h3>
<p>Our API uses standard HTTP status codes...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<h2>API Reference</h2>

<h3>Authentication</h3>
<p>All API requests require authentication...</p>

<h3>Rate Limiting</h3>
<p>We limit requests to 1000 per hour...</p>

<h3>Error Handling</h3>
<p>Our API uses standard HTTP status codes...</p>

FAQ Sections

<section>
<h2>Frequently Asked Questions</h2>

<h3>How do I create an account?</h3>
<p>Click the "Sign Up" button in the top right corner...</p>

<h3>Is there a free trial?</h3>
<p>Yes! We offer a 14-day free trial with no credit card required...</p>

<h3>Can I cancel anytime?</h3>
<p>Absolutely. You can cancel your subscription at any time...</p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h2>Frequently Asked Questions</h2>

<h3>How do I create an account?</h3>
<p>Click the "Sign Up" button in the top right corner...</p>

<h3>Is there a free trial?</h3>
<p>Yes! We offer a 14-day free trial with no credit card required...</p>

<h3>Can I cancel anytime?</h3>
<p>Absolutely. You can cancel your subscription at any time...</p>
</section>

Heading Hierarchy

Proper Nesting

Always maintain proper heading hierarchy:

Good
Avoid

<h1>Main Title</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
      <h4>Minor Detail</h4>
  <h2>Another Major Section</h2>
    <h3>Subsection</h3>

<h1>Main Title</h1>
  <h3>Subsection</h3> <!-- Missing h2 -->
  <h2>Major Section</h2>
    <h5>Detail</h5> <!-- Skipped h3 and h4 -->

Multiple H3 Elements

You can use multiple <h3> elements under a single <h2>:

<h2>Programming Languages</h2>

<h3>JavaScript</h3>
<p>Versatile language for web development...</p>

<h3>Python</h3>
<p>Great for beginners and data science...</p>

<h3>Rust</h3>
<p>Fast and memory-safe systems programming...</p>

<h3>Go</h3>
<p>Simple and efficient for backend services...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<h2>Programming Languages</h2>

<h3>JavaScript</h3>
<p>Versatile language for web development...</p>

<h3>Python</h3>
<p>Great for beginners and data science...</p>

<h3>Rust</h3>
<p>Fast and memory-safe systems programming...</p>

<h3>Go</h3>
<p>Simple and efficient for backend services...</p>

Deep Hierarchy Example

<h1>Complete HTML Tutorial</h1>

<h2>HTML Elements</h2>
<p>HTML consists of various elements...</p>

<h3>Text Content Elements</h3>
<p>Elements for structuring text...</p>

<h4>Headings</h4>
<p>Six levels of headings: h1 through h6...</p>

<h4>Paragraphs</h4>
<p>The p element for text blocks...</p>

<h3>Semantic Elements</h3>
<p>Elements that describe their content...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<h1>Complete HTML Tutorial</h1>

<h2>HTML Elements</h2>
<p>HTML consists of various elements...</p>

<h3>Text Content Elements</h3>
<p>Elements for structuring text...</p>

<h4>Headings</h4>
<p>Six levels of headings: h1 through h6...</p>

<h4>Paragraphs</h4>
<p>The p element for text blocks...</p>

<h3>Semantic Elements</h3>
<p>Elements that describe their content...</p>

Styling Best Practices

Visual Hierarchy

Ensure visual sizing matches semantic hierarchy:

<style>
h1 { font-size: 2.5rem; color: #1e40af; }
h2 { font-size: 2rem; color: #2563eb; }
h3 { font-size: 1.5rem; color: #3b82f6; }
</style>

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<p>Content goes here...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
h1 { font-size: 2.5rem; color: #1e40af; }
h2 { font-size: 2rem; color: #2563eb; }
h3 { font-size: 1.5rem; color: #3b82f6; }
</style>

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<p>Content goes here...</p>

Consistent Styling

<style>
.content-section h3 {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  margin: 1.5rem 0 1rem;
}
</style>

<div class="content-section">
<h2>Features</h2>

<h3>Fast Performance</h3>
<p>Optimized for speed...</p>

<h3>Easy to Use</h3>
<p>Intuitive interface...</p>

<h3>Secure</h3>
<p>Industry-standard encryption...</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.content-section h3 {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  margin: 1.5rem 0 1rem;
}
</style>

<div class="content-section">
<h2>Features</h2>

<h3>Fast Performance</h3>
<p>Optimized for speed...</p>

<h3>Easy to Use</h3>
<p>Intuitive interface...</p>

<h3>Secure</h3>
<p>Industry-standard encryption...</p>
</div>

Accessibility

Screen readers list headings for quick navigation:

<!-- Screen reader announces: "Heading level 3: Installation Steps" -->
<h3>Installation Steps</h3>

Descriptive Headings

Make headings understandable out of context:

Good
Avoid

<h3>System Requirements</h3>
<h3>Installation Instructions</h3>
<h3>Troubleshooting Common Issues</h3>

<h3>Requirements</h3>
<h3>How To</h3>
<h3>Problems</h3>

Users can jump between headings using keyboard shortcuts. Clear hierarchy helps:

<h2>Chapter 1: Introduction</h2>
  <h3>1.1 Overview</h3>
  <h3>1.2 Prerequisites</h3>
  <h3>1.3 Learning Objectives</h3>
<h2>Chapter 2: Getting Started</h2>
  <h3>2.1 Installation</h3>
  <h3>2.2 Configuration</h3>

SEO Considerations

Content Structure

Search engines use heading hierarchy to understand content structure:

<h1>Ultimate JavaScript Tutorial</h1>
  <h2>JavaScript Basics</h2>
    <h3>Variables and Data Types</h3>
    <h3>Functions and Scope</h3>
    <h3>Control Flow</h3>
  <h2>Advanced JavaScript</h2>
    <h3>Closures</h3>
    <h3>Promises and Async/Await</h3>
    <h3>Modules</h3>

Keyword Usage

Include relevant keywords naturally:

<h3>How to Install React for Beginners</h3>
<h3>React Components Tutorial</h3>
<h3>Managing State in React Applications</h3>

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 <h3> element has been supported since the earliest browsers.

and

Higher-level headings in the hierarchy. Learn more →

to

Lower-level headings for deeper nesting. Learn more →

Thematic grouping of content with headings. Learn more →

Self-contained content with its own heading structure. Learn more →

<h3> - Level 3 Heading

The `<h3>` Element

Quick Example

Syntax

Attributes

Common Use Cases

Subsections in Articles

Product Features

Documentation Structure

FAQ Sections

Heading Hierarchy

Proper Nesting

Multiple H3 Elements

Deep Hierarchy Example

Styling Best Practices

Visual Hierarchy

Consistent Styling

Accessibility

Descriptive Headings

Keyboard Navigation

SEO Considerations

Content Structure

Keyword Usage

Browser Support

and

Higher-level headings in the hierarchy. Learn more →

to

Lower-level headings for deeper nesting. Learn more →

Specifications

<h3> - Level 3 Heading

The <h3> Element

Quick Example

Syntax

Attributes

Common Use Cases

Subsections in Articles

Product Features

Documentation Structure

FAQ Sections

Heading Hierarchy

Proper Nesting

Multiple H3 Elements

Deep Hierarchy Example

Styling Best Practices

Visual Hierarchy

Consistent Styling

Accessibility

Screen Reader Navigation

Descriptive Headings

Keyboard Navigation

SEO Considerations

Content Structure

Keyword Usage

Browser Support

Related Elements

and

Higher-level headings in the hierarchy. Learn more →

to

Lower-level headings for deeper nesting. Learn more →

Specifications

The `<h3>` Element