<h6>

Defines a level 6 heading (least important heading)

Definition and Usage

The <h6> element establishes a level 6 heading in an HTML document. It represents the least important heading level, used for the most specific and detailed information.

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

Tip: The <h6> tag is the smallest and least significant heading. Use it sparingly for the most granular details in extremely complex documents.

Note: H6 headings are very rarely used. Most websites never need to go beyond H3 or H4. Consider using alternative formatting like bold text or lists instead.

Browser Support

The <h6> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Examples

Basic H6 Heading

Create the smallest heading level with H6:

Example
<h1>Encyclopedia Entry</h1>

<h2>Biology</h2>

<h3>Cellular Biology</h3>

<h4>Cell Structures</h4>

<h5>Organelles</h5>

<h6>Ribosomes - Free vs Bound</h6>
<p>Detailed explanation of ribosome types...</p>

<h6>Mitochondrial Membranes</h6>
<p>Inner and outer membrane details...</p>

H6 with Styling

Style the smallest headings with CSS:

Example
<style>
  h6 {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
</style>

<h6>Fine Print Detail</h6>

Complete Heading Hierarchy

All six heading levels in one example:

Example
<article>
  <h1>Software Architecture Guide</h1>

  <h2>Design Patterns</h2>

  <h3>Creational Patterns</h3>

  <h4>Factory Pattern</h4>

  <h5>Simple Factory</h5>

  <h6>Implementation in JavaScript</h6>
  <p>Code example and explanation...</p>

  <h6>Implementation in Python</h6>
  <p>Alternative implementation...</p>

  <h6>Implementation in Java</h6>
  <p>Traditional OOP approach...</p>
</article>

Technical Documentation Example

H6 in deeply nested technical content:

Example
<article>
  <h1>Network Protocol Specification</h1>

  <h2>TCP/IP Layer</h2>

  <h3>Transport Layer</h3>

  <h4>TCP Protocol</h4>

  <h5>Connection Establishment</h5>

  <h6>SYN Packet Structure</h6>
  <p>Bit-level packet details...</p>

  <h6>SYN-ACK Response</h6>
  <p>Server acknowledgment format...</p>

  <h6>ACK Finalization</h6>
  <p>Final handshake completion...</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: H6 is the deepest heading level. It must only be used after establishing H1 through H5. Consider if your content structure is too complex.

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

Very Rare Usage: H6 is almost never needed for most websites
Extreme Detail Only: Reserve for the most granular information
Limited SEO Value: H6 has minimal SEO impact compared to H1-H3
Proper Order: H6 must be the last level in hierarchy
Consider Alternatives: Often better to use lists, bold text, or restructure content
Complex Documents: Only justified in extremely detailed technical documentation
User Experience: Too many heading levels can confuse users

Accessibility

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

Deepest Level: H6 indicates the most specific navigation point
Complex Navigation: Very deep hierarchies can be hard to navigate
Hierarchy Depth: Six levels may be too complex for some users
Proper Order: Must follow complete H1 → H2 → H3 → H4 → H5 → H6 chain
Clear Descriptions: H6 should still describe content clearly
Simplification: Consider if content can be simplified to avoid H6

Accessibility Warning: Excessive heading depth (H5, H6) can create confusing navigation for screen reader users. Most content should use H1-H4 maximum.

CSS Styling Examples

Subtle H6 Style

Example
<style>
  h6 {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    margin: 10px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
</style>

<h6>Footnote</h6>

H6 as Label

Example
<style>
  h6 {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    margin: 8px 0 4px 0;
    padding: 2px 6px;
    background: #f3f4f6;
    border-radius: 3px;
    display: inline-block;
  }
</style>

<h6>Note</h6>

Minimal H6 Design

Example
<style>
  h6 {
    font-size: 12px;
    font-weight: 600;
    color: #d1d5db;
    margin: 8px 0 4px 0;
    font-style: italic;
  }
</style>

<h6>Additional Detail</h6>

When to Use H6

H6 headings are only appropriate in very specific scenarios:

Extremely Detailed Technical Specs: Low-level API documentation
Academic Papers: Deeply nested research sections
Legal Documents: Multiple levels of clauses and sub-clauses
Encyclopedia Entries: Highly detailed reference material
Complex Specifications: Industry standards or protocols

Important: If you're using H6 frequently, your content structure is likely too complex. Consider:

Breaking content into multiple pages
Using lists instead of deep headings
Restructuring with a simpler hierarchy
Using bold text for minor emphases

Alternatives to H6

Before using H6, consider these alternatives:

Example
<!-- Instead of H6, use strong tags -->
<h5>Configuration Options</h5>
<p><strong>timeout:</strong> Connection timeout in milliseconds</p>
<p><strong>retries:</strong> Number of retry attempts</p>

<!-- Or use definition lists -->
<h5>Configuration Options</h5>
<dl>
  <dt>timeout</dt>
  <dd>Connection timeout in milliseconds</dd>

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

<!-- Or use nested lists -->
<h5>Configuration Options</h5>
<ul>
  <li><strong>timeout</strong> - Connection timeout</li>
  <li><strong>retries</strong> - Retry attempts</li>
</ul>

Best Practices

DO:

Use H6 only for extremely detailed, technical content
Ensure H6 relates to its parent H5 section
Keep H6 headings very brief and specific
Follow complete hierarchy: H1 → H2 → H3 → H4 → H5 → H6
Question if H6 is truly necessary

DON'T:

Use H6 before establishing all previous levels (H1-H5)
Use H6 in typical website content
Choose H6 based on visual size alone
Create overly complex hierarchies
Use H6 when lists or bold text would work better

Summary

Key Takeaways

H6 is the smallest and least important heading
Very rarely used - most sites never need H6
Only use in extremely detailed technical documentation
Must follow complete H1 → H2 → H3 → H4 → H5 → H6 hierarchy
Consider simpler alternatives (lists, bold text, page splitting)
Deep hierarchies can harm accessibility and user experience

Related Tags

<h1>
Level 1 heading (main title)
<h2>
Level 2 heading
<h3>
Level 3 heading
<h4>
Level 4 heading
<h5>
Level 5 heading
<strong>
Bold emphasis (alternative to H6)