<h4> - Level 4 Heading

The `<h4>` Element

Block-level HTML 1.0

The <h4> element represents a fourth-level heading, used for detailed subsections within <h3> sections. It’s useful for deeply structured content that requires fine-grained organization.

Quick Example

<h2>JavaScript Fundamentals</h2>
<h3>Data Types</h3>
<h4>Primitive Types</h4>
<p>String, Number, Boolean...</p>

<h4>Reference Types</h4>
<p>Objects, Arrays, Functions...</p>

Result

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

<h2>JavaScript Fundamentals</h2>
<h3>Data Types</h3>
<h4>Primitive Types</h4>
<p>String, Number, Boolean...</p>

<h4>Reference Types</h4>
<p>Objects, Arrays, Functions...</p>

Syntax

<h4>Detailed Subsection Title</h4>

The <h4> element creates a detailed subsection heading beneath <h3> headings.

Attributes

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

<h4 id="step-1" class="tutorial-step">Step 1: Setup</h4>

Common Use Cases

Technical Documentation

<h2>API Documentation</h2>
<h3>Authentication</h3>
<h4>API Key Authentication</h4>
<p>Include your API key in the header...</p>

<h4>OAuth 2.0</h4>
<p>Use OAuth for user-based authentication...</p>

<h4>JWT Tokens</h4>
<p>JSON Web Tokens provide stateless auth...</p>

Result

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

<h2>API Documentation</h2>
<h3>Authentication</h3>
<h4>API Key Authentication</h4>
<p>Include your API key in the header...</p>

<h4>OAuth 2.0</h4>
<p>Use OAuth for user-based authentication...</p>

<h4>JWT Tokens</h4>
<p>JSON Web Tokens provide stateless auth...</p>

Step-by-Step Tutorials

<h2>Building Your First App</h2>
<h3>Setup and Installation</h3>

<h4>Installing Node.js</h4>
<p>Download Node.js from the official website...</p>

<h4>Creating a Project Directory</h4>
<p>Create a new folder for your project...</p>

<h4>Initializing Package.json</h4>
<p>Run npm init to create package.json...</p>

Result

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

<h2>Building Your First App</h2>
<h3>Setup and Installation</h3>

<h4>Installing Node.js</h4>
<p>Download Node.js from the official website...</p>

<h4>Creating a Project Directory</h4>
<p>Create a new folder for your project...</p>

<h4>Initializing Package.json</h4>
<p>Run npm init to create package.json...</p>

Reference Documentation

<h3>Array Methods</h3>

<h4>map()</h4>
<p>Creates a new array with transformed elements...</p>

<h4>filter()</h4>
<p>Creates a new array with elements that pass a test...</p>

<h4>reduce()</h4>
<p>Reduces an array to a single value...</p>

<h4>forEach()</h4>
<p>Executes a function for each array element...</p>

Result

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

<h3>Array Methods</h3>

<h4>map()</h4>
<p>Creates a new array with transformed elements...</p>

<h4>filter()</h4>
<p>Creates a new array with elements that pass a test...</p>

<h4>reduce()</h4>
<p>Reduces an array to a single value...</p>

<h4>forEach()</h4>
<p>Executes a function for each array element...</p>

Complex Content Hierarchies

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

<h2>Layout Techniques</h2>

<h3>Flexbox</h3>
<p>Modern one-dimensional layout...</p>

<h4>Flex Container Properties</h4>
<p>Properties applied to the parent...</p>

<h4>Flex Item Properties</h4>
<p>Properties applied to children...</p>

<h3>Grid</h3>
<p>Two-dimensional layout system...</p>

<h4>Grid Container Properties</h4>
<p>Define the grid structure...</p>

<h4>Grid Item Properties</h4>
<p>Position items within the grid...</p>
</article>

Result

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

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

<h2>Layout Techniques</h2>

<h3>Flexbox</h3>
<p>Modern one-dimensional layout...</p>

<h4>Flex Container Properties</h4>
<p>Properties applied to the parent...</p>

<h4>Flex Item Properties</h4>
<p>Properties applied to children...</p>

<h3>Grid</h3>
<p>Two-dimensional layout system...</p>

<h4>Grid Container Properties</h4>
<p>Define the grid structure...</p>

<h4>Grid Item Properties</h4>
<p>Position items within the grid...</p>
</article>

Heading Hierarchy

When to Use H4

Use <h4> when you need to break down <h3> sections into smaller parts:

Good
Consider if Needed

<h1>Web Development Course</h1>
  <h2>Frontend Development</h2>
    <h3>HTML</h3>
      <h4>Elements and Tags</h4>
      <h4>Attributes</h4>
      <h4>Semantic HTML</h4>
    <h3>CSS</h3>
      <h4>Selectors</h4>
      <h4>Box Model</h4>

<h1>Simple Blog Post</h1>
  <h2>Introduction</h2>
    <h4>Overview</h4> <!-- h3 might be sufficient -->
  <h2>Conclusion</h2>
    <h4>Summary</h4>  <!-- h3 might be sufficient -->

Don’t Skip Levels

Always maintain proper hierarchy:

Good
Avoid

<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>

<h1>Title</h1>
<h2>Section</h2>
<h4>Detail</h4> <!-- Skipped h3 -->

Real-World Example

<h2>Chapter 3: Functions</h2>

<h3>Function Basics</h3>
<p>Functions are reusable blocks of code...</p>

<h4>Function Declaration</h4>
<p>The traditional way to create functions...</p>

<h4>Function Expression</h4>
<p>Assigning a function to a variable...</p>

<h4>Arrow Functions</h4>
<p>Modern, concise function syntax...</p>

<h3>Advanced Function Concepts</h3>

<h4>Closures</h4>
<p>Functions that remember their environment...</p>

<h4>Higher-Order Functions</h4>
<p>Functions that accept or return functions...</p>

Result

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

<h2>Chapter 3: Functions</h2>

<h3>Function Basics</h3>
<p>Functions are reusable blocks of code...</p>

<h4>Function Declaration</h4>
<p>The traditional way to create functions...</p>

<h4>Function Expression</h4>
<p>Assigning a function to a variable...</p>

<h4>Arrow Functions</h4>
<p>Modern, concise function syntax...</p>

<h3>Advanced Function Concepts</h3>

<h4>Closures</h4>
<p>Functions that remember their environment...</p>

<h4>Higher-Order Functions</h4>
<p>Functions that accept or return functions...</p>

Styling Considerations

Visual Hierarchy

Ensure font sizes reflect the heading level:

<style>
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
</style>

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<p>Content text...</p>

Result

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

<style>
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
</style>

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<p>Content text...</p>

Consistent Styling

<style>
h4 {
  color: #4b5563;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
h4::before {
  content: "→ ";
  color: #3b82f6;
}
</style>

<h4>First Step</h4>
<p>Begin by installing the software...</p>

<h4>Second Step</h4>
<p>Configure your environment...</p>

<h4>Third Step</h4>
<p>Run the application...</p>

Result

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

<style>
h4 {
  color: #4b5563;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
h4::before {
  content: "→ ";
  color: #3b82f6;
}
</style>

<h4>First Step</h4>
<p>Begin by installing the software...</p>

<h4>Second Step</h4>
<p>Configure your environment...</p>

<h4>Third Step</h4>
<p>Run the application...</p>

Accessibility

Screen readers allow users to navigate by heading level:

<!-- Screen reader announces: "Heading level 4: Configuration Options" -->
<h4>Configuration Options</h4>

Meaningful Content

Use descriptive text that’s clear without context:

Good
Avoid

<h4>Required Dependencies</h4>
<h4>Optional Plugins</h4>
<h4>Development Tools</h4>

<h4>Required</h4>
<h4>Optional</h4>
<h4>Dev</h4>

Don’t Overuse

If you’re using <h4> frequently, consider if simpler structure would work:

Consider
Instead of

<h3>Features</h3>
<ul>
  <li><strong>Fast:</strong> Optimized performance</li>
  <li><strong>Secure:</strong> Industry-standard encryption</li>
  <li><strong>Scalable:</strong> Grows with your needs</li>
</ul>

<h3>Features</h3>
<h4>Fast</h4>
<p>Optimized performance</p>
<h4>Secure</h4>
<p>Industry-standard encryption</p>
<h4>Scalable</h4>
<p>Grows with your needs</p>

When to Use H4

Good Use Cases

Technical documentation with detailed subsections
Step-by-step tutorials with multiple sub-steps
API reference with method parameters
Educational content with fine-grained topics

Consider Alternatives

Simple blog posts (stick to h1-h3)
Marketing pages (often h1-h3 is sufficient)
Short articles (simpler hierarchy works better)

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

to

Higher-level headings in the hierarchy. Learn more →

and

Lower-level headings for even deeper nesting. Learn more →

Consider lists for flat content instead of deep headings. Learn more →

Description lists for term/definition pairs. Learn more →

<h4> - Level 4 Heading

The <h4> Element

Quick Example

Syntax

Attributes

Common Use Cases

Technical Documentation

Step-by-Step Tutorials

Reference Documentation

Complex Content Hierarchies

Heading Hierarchy

When to Use H4

Don’t Skip Levels

Real-World Example

Styling Considerations

Visual Hierarchy

Consistent Styling

Accessibility

Screen Reader Navigation

Meaningful Content

Don’t Overuse

When to Use H4

Good Use Cases

Consider Alternatives

Browser Support

Related Elements

to

Higher-level headings in the hierarchy. Learn more →

and

Lower-level headings for even deeper nesting. Learn more →

Specifications

The `<h4>` Element