<h5> - Level 5 Heading

The `<h5>` Element

Block-level HTML 1.0

The <h5> element represents a fifth-level heading, used for very detailed subsections within <h4> sections. It’s typically reserved for highly structured, complex documents.

Quick Example

<h3>JavaScript Objects</h3>
<h4>Object Methods</h4>
<h5>Object.keys()</h5>
<p>Returns an array of object keys...</p>

<h5>Object.values()</h5>
<p>Returns an array of object values...</p>

Result

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

<h3>JavaScript Objects</h3>
<h4>Object Methods</h4>
<h5>Object.keys()</h5>
<p>Returns an array of object keys...</p>

<h5>Object.values()</h5>
<p>Returns an array of object values...</p>

Syntax

<h5>Very Specific Subsection</h5>

The <h5> element creates fine-grained subsection headings beneath <h4> headings.

Attributes

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

<h5 id="subsection-detail" class="minor-heading">Detail</h5>

Common Use Cases

Technical Documentation

<h3>HTTP Methods</h3>
<h4>GET Request</h4>

<h5>Query Parameters</h5>
<p>Parameters passed in the URL...</p>

<h5>Headers</h5>
<p>Request headers for GET...</p>

<h5>Response Format</h5>
<p>Expected response structure...</p>

<h5>Error Codes</h5>
<p>Common errors for GET requests...</p>

Result

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

<h3>HTTP Methods</h3>
<h4>GET Request</h4>

<h5>Query Parameters</h5>
<p>Parameters passed in the URL...</p>

<h5>Headers</h5>
<p>Request headers for GET...</p>

<h5>Response Format</h5>
<p>Expected response structure...</p>

<h5>Error Codes</h5>
<p>Common errors for GET requests...</p>

API Reference

<h4>Authentication Methods</h4>

<h5>API Key Authentication</h5>
<p>Include API key in header...</p>

<h5>OAuth 2.0 Flow</h5>
<p>Multi-step authorization process...</p>

<h5>Bearer Token</h5>
<p>JWT-based authentication...</p>

<h5>Session-Based Auth</h5>
<p>Traditional cookie sessions...</p>

Result

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

<h4>Authentication Methods</h4>

<h5>API Key Authentication</h5>
<p>Include API key in header...</p>

<h5>OAuth 2.0 Flow</h5>
<p>Multi-step authorization process...</p>

<h5>Bearer Token</h5>
<p>JWT-based authentication...</p>

<h5>Session-Based Auth</h5>
<p>Traditional cookie sessions...</p>

Detailed Specifications

<h4>CSS Grid Properties</h4>

<h5>grid-template-columns</h5>
<p>Defines column tracks...</p>

<h5>grid-template-rows</h5>
<p>Defines row tracks...</p>

<h5>grid-template-areas</h5>
<p>Named grid areas...</p>

<h5>grid-gap</h5>
<p>Spacing between grid items...</p>

Result

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

<h4>CSS Grid Properties</h4>

<h5>grid-template-columns</h5>
<p>Defines column tracks...</p>

<h5>grid-template-rows</h5>
<p>Defines row tracks...</p>

<h5>grid-template-areas</h5>
<p>Named grid areas...</p>

<h5>grid-gap</h5>
<p>Spacing between grid items...</p>

When to Use H5

Appropriate Use Cases

<article>
<h1>Complete Programming Reference</h1>

<h2>Data Structures</h2>

<h3>Trees</h3>

<h4>Binary Trees</h4>
<p>Trees with at most two children per node...</p>

<h5>Binary Search Trees</h5>
<p>Ordered binary trees for efficient searching...</p>

<h5>AVL Trees</h5>
<p>Self-balancing binary search trees...</p>

<h5>Red-Black Trees</h5>
<p>Balanced trees with color properties...</p>
</article>

Result

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

<article>
<h1>Complete Programming Reference</h1>

<h2>Data Structures</h2>

<h3>Trees</h3>

<h4>Binary Trees</h4>
<p>Trees with at most two children per node...</p>

<h5>Binary Search Trees</h5>
<p>Ordered binary trees for efficient searching...</p>

<h5>AVL Trees</h5>
<p>Self-balancing binary search trees...</p>

<h5>Red-Black Trees</h5>
<p>Balanced trees with color properties...</p>
</article>

Consider Alternatives

Instead of deep heading hierarchies, consider:

Alternative: List
Using H5

<h4>Configuration Options</h4>
<dl>
  <dt>timeout</dt>
  <dd>Maximum wait time in milliseconds</dd>

  <dt>retries</dt>
  <dd>Number of retry attempts</dd>

  <dt>cache</dt>
  <dd>Enable response caching</dd>
</dl>

<h4>Configuration Options</h4>

<h5>timeout</h5>
<p>Maximum wait time in milliseconds</p>

<h5>retries</h5>
<p>Number of retry attempts</p>

<h5>cache</h5>
<p>Enable response caching</p>

Heading Hierarchy

Proper Structure

Always maintain the complete hierarchy:

Good
Avoid

<h1>Main Title</h1>
  <h2>Chapter</h2>
    <h3>Section</h3>
      <h4>Subsection</h4>
        <h5>Detail</h5>

<h1>Main Title</h1>
  <h2>Chapter</h2>
    <h5>Detail</h5> <!-- Skipped h3 and h4 -->

Complex Documentation Example

<h2>Chapter 5: Advanced Patterns</h2>

<h3>Design Patterns</h3>

<h4>Creational Patterns</h4>

<h5>Singleton</h5>
<p>Ensures only one instance exists...</p>

<h5>Factory</h5>
<p>Creates objects without specifying exact class...</p>

<h5>Builder</h5>
<p>Constructs complex objects step by step...</p>

<h4>Structural Patterns</h4>

<h5>Adapter</h5>
<p>Allows incompatible interfaces to work together...</p>

<h5>Decorator</h5>
<p>Adds behavior to objects dynamically...</p>

Result

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

<h2>Chapter 5: Advanced Patterns</h2>

<h3>Design Patterns</h3>

<h4>Creational Patterns</h4>

<h5>Singleton</h5>
<p>Ensures only one instance exists...</p>

<h5>Factory</h5>
<p>Creates objects without specifying exact class...</p>

<h5>Builder</h5>
<p>Constructs complex objects step by step...</p>

<h4>Structural Patterns</h4>

<h5>Adapter</h5>
<p>Allows incompatible interfaces to work together...</p>

<h5>Decorator</h5>
<p>Adds behavior to objects dynamically...</p>

Styling Considerations

Diminishing Visual Hierarchy

At this level, consider subtle visual differences:

<style>
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; color: #4b5563; }
</style>

<h3>Section</h3>
<h4>Subsection</h4>
<h5>Detail</h5>
<p>Content at this level...</p>

Result

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

<style>
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; color: #4b5563; }
</style>

<h3>Section</h3>
<h4>Subsection</h4>
<h5>Detail</h5>
<p>Content at this level...</p>

Alternative Styling

<style>
h5 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
</style>

<h5>Configuration</h5>
<p>Set up your environment...</p>

<h5>Deployment</h5>
<p>Deploy to production...</p>

Result

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

<style>
h5 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
</style>

<h5>Configuration</h5>
<p>Set up your environment...</p>

<h5>Deployment</h5>
<p>Deploy to production...</p>

Accessibility

Screen readers announce heading levels, but deep hierarchies can be confusing:

<!-- Screen reader: "Heading level 5: Implementation Details" -->
<h5>Implementation Details</h5>

<h4>Array Methods</h4>
<p><strong>map():</strong> Transforms each element</p>
<p><strong>filter():</strong> Selects matching elements</p>
<p><strong>reduce():</strong> Combines into single value</p>

<h4>Array Methods</h4>
<h5>map()</h5>
<p>Transforms each element</p>
<h5>filter()</h5>
<p>Selects matching elements</p>
<h5>reduce()</h5>
<p>Combines into single value</p>

Users navigating by headings may find 5+ levels overwhelming:

Best Practices

Use Sparingly

Appropriate
Reconsider

<!-- Comprehensive technical documentation -->
<h1>API Reference Guide</h1>
  <h2>Authentication</h2>
    <h3>OAuth 2.0</h3>
      <h4>Authorization Code Flow</h4>
        <h5>Step 1: Authorization Request</h5>
        <h5>Step 2: Token Exchange</h5>
        <h5>Step 3: Refresh Token</h5>

<!-- Simple blog post -->
<h1>5 Tips for Better CSS</h1>
  <h2>Tip 1: Use Variables</h2>
    <h3>Benefits</h3>
      <h4>Maintainability</h4>
        <h5>Easier Updates</h5> <!-- Too deep -->

Consider Content Type

Documentation: May need h5
Tutorials: Usually h1-h4 sufficient
Blog posts: Rarely need beyond h3
Marketing pages: Usually h1-h3 only

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

to

Higher-level headings, more commonly used. Learn more →

The sixth and final heading level. Learn more →

,: Description lists for term/definition pairs. Learn more →

Emphasize text without adding semantic heading. Learn more →

Specifications
Section titled “Specifications”

WHATWG HTML Living Standard

MDN Web Docs

W3C HTML 5.3

Previous
<h4> - Level 4 Heading Next
<h6> - Level 6 Heading

<h5> - Level 5 Heading

The <h5> Element

Quick Example

Syntax

Attributes

Common Use Cases

Technical Documentation

API Reference

Detailed Specifications

When to Use H5

Appropriate Use Cases

Consider Alternatives

Heading Hierarchy

Proper Structure

Complex Documentation Example

Styling Considerations

Diminishing Visual Hierarchy

Alternative Styling

Accessibility

Screen Reader Considerations

Simplify When Possible

Navigation Patterns

Best Practices

Use Sparingly

Consider Content Type

Browser Support

Related Elements

to

Higher-level headings, more commonly used. Learn more →

The sixth and final heading level. Learn more →

Specifications

The `<h5>` Element