Path // www.yourhtmlsource.com → Reference → <h6>

<h6>

The <h6> element represents a sixth-level heading, the lowest level in HTML's heading hierarchy. It is used for the most granular subsections within an <h5> section. This level of nesting is rare in practice and typically only appears in extremely detailed technical specifications, complex legal documents, or highly structured academic content.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

<h6>Most Specific Subsection</h6>

Attributes

class - CSS class name
id - Unique identifier for linking
style - Inline CSS styles
title - Advisory information
lang - Language of the heading

Examples

Maximum nesting depth:

<h5>Advanced Configuration</h5>
<h6>Environment Variables</h6>
<p>Setting system variables...</p>
<h6>Command Line Flags</h6>
<p>Available flags and options...</p>

Legal document with full depth:

<h4>4.2 Liability Limitations</h4>
<h5>4.2.1 Direct Damages</h5>
<h6>Calculation Method</h6>
<p>How damages are calculated...</p>
<h6>Maximum Amount</h6>
<p>Cap on liability...</p>

Technical specification:

<h3>Protocol Specification</h3>
<h4>Message Format</h4>
<h5>Header Fields</h5>
<h6>Version Field</h6>
<p>2-byte unsigned integer...</p>
<h6>Length Field</h6>
<p>4-byte unsigned integer...</p>

When to Use

Use <h6> only when absolutely necessary and when your document structure genuinely requires six levels of hierarchy. This is the deepest heading level available in HTML, and using it indicates extremely detailed content organization. In most web projects, you will never need this level.

If you find yourself needing <h6> elements regularly, this is a strong signal that your content should be restructured. Consider splitting the content across multiple pages, creating a more modular information architecture, or using alternative organizational methods such as definition lists or tables for the most detailed information.

The visual distinction between <h5> and <h6> is minimal in default browser styling, with both appearing quite small. If you use <h6>, you may need custom CSS to ensure adequate visual hierarchy. Screen readers will announce "heading level 6," but users may find such deep nesting disorienting. Always prioritize clarity and usability over strict adherence to hierarchical depth.

Remember that heading elements exist to create semantic document structure, not visual styling. If you need small bold text that is not actually a heading, use CSS on a <p> or <span> element instead.