<h3>

Defines a level 3 heading (subsection heading)

Definition and Usage

The <h3> element establishes a level 3 heading in an HTML document. It represents subsection headings that fall under <h2> sections.

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

Tip: Use <h3> tags to divide content within <h2> sections into smaller, more specific subsections.

Best Practice: Only use <h3> after establishing both <h1> and <h2>. Don't skip heading levels.

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 H3 Heading

Create subsection headings with H3:

Example
<h1>Web Development Tutorial</h1>

<h2>Frontend Development</h2>

<h3>HTML Basics</h3>
<p>Learn the fundamentals of HTML...</p>

<h3>CSS Styling</h3>
<p>Style your web pages with CSS...</p>

<h3>JavaScript Programming</h3>
<p>Add interactivity with JavaScript...</p>

H3 with Styling

Style subsection headings with CSS:

Example
<style>
  h3 {
    color: #374151;
    font-size: 24px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #3b82f6;
  }
</style>

<h3>Important Subsection</h3>

Document Structure with H3

Create detailed content hierarchy with H3:

Example
<article>
  <h1>Complete CSS Guide</h1>

  <h2>CSS Selectors</h2>

  <h3>Element Selectors</h3>
  <p>Target HTML elements by tag name...</p>

  <h3>Class Selectors</h3>
  <p>Target elements by class attribute...</p>

  <h3>ID Selectors</h3>
  <p>Target unique elements by ID...</p>

  <h2>CSS Properties</h2>

  <h3>Color Properties</h3>
  <p>Set text and background colors...</p>

  <h3>Layout Properties</h3>
  <p>Control element positioning...</p>
</article>

Semantic Hierarchy with H3 and H4

Combine H3 with H4 for even deeper structure:

Example
<article>
  <h1>JavaScript ES6+ Features</h1>

  <h2>Modern Syntax</h2>

  <h3>Arrow Functions</h3>
  <p>Concise function syntax introduced in ES6...</p>

  <h4>Basic Arrow Function</h4>
  <p>Simple arrow function examples...</p>

  <h4>Arrow Functions with Parameters</h4>
  <p>Passing parameters to arrow functions...</p>

  <h3>Template Literals</h3>
  <p>String interpolation with backticks...</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: Never use <h3> before establishing <h1> and <h2>. Always maintain proper heading order.

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 H3 Tags OK: You can have multiple <h3> tags under each <h2> section
Descriptive Content: Make H3 headings clearly describe subsection content
Natural Keywords: Include relevant keywords naturally in headings
Proper Hierarchy: H3 should come after H2 and before H4
Content Organization: Use H3 to break down H2 sections into logical parts
Readability: Help users scan and understand content structure
Topic Relevance: Ensure H3 relates to parent H2 section

Accessibility

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

Subsection Markers: H3 tags mark subsections within H2 sections
Detail Navigation: Users can navigate to specific subsections
Content Outline: H3 adds detail to document outline
Hierarchical Order: Maintain H1 → H2 → H3 sequence
Clear Descriptions: H3 text should indicate subsection content
Semantic Structure: Don't use H3 for styling purposes only

Accessibility Tip: Proper H3 usage helps screen reader users understand the relationship between subsections and their parent sections.

CSS Styling Examples

Modern H3 Design

Example
<style>
  h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1f2937;
    margin: 28px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
  }

  h3:hover {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    transition: all 0.3s ease;
  }
</style>

<h3>Subsection Title</h3>

H3 with Bullet Point

Example
<style>
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin: 24px 0 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  h3::before {
    content: '▸';
    color: #3b82f6;
    font-size: 18px;
  }
</style>

<h3>Key Point</h3>

Numbered Subsections

Example
<style>
  h2 {
    counter-reset: subsection;
  }

  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    counter-increment: subsection;
    margin: 20px 0 12px 0;
  }

  h3::before {
    content: counter(section) "." counter(subsection) " ";
    color: #3b82f6;
  }
</style>

<h2>Main Section</h2>
<h3>First Subsection</h3>
<h3>Second Subsection</h3>

Best Practices

DO:

Use H3 for subsections within H2 sections
Ensure H3 content relates to its parent H2
Make H3 headings specific and descriptive
Follow the hierarchy: H1 → H2 → H3
Use multiple H3 tags when needed

DON'T:

Use H3 before establishing H1 and H2
Skip from H2 to H4 without H3
Choose H3 based on visual size alone
Make H3 too long (keep it concise)
Use H3 for styling purposes only

Related Tags

<h1>
Level 1 heading (main title)
<h2>
Level 2 heading
<h4>
Level 4 heading
<h5>
Level 5 heading
<h6>
Level 6 heading
<article>
Defines an article