<h6> - Level 6 Heading

The `<h6>` Element

Block-level HTML 1.0

The <h6> element represents the sixth and lowest level heading in HTML. It’s used for the most granular subsections and is rarely needed in typical web content.

Quick Example

<h4>Function Parameters</h4>
<h5>Optional Parameters</h5>
<h6>Default Values</h6>
<p>Parameters can have default values...</p>

<h6>Undefined Handling</h6>
<p>How optional params handle undefined...</p>

Result

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

<h4>Function Parameters</h4>
<h5>Optional Parameters</h5>
<h6>Default Values</h6>
<p>Parameters can have default values...</p>

<h6>Undefined Handling</h6>
<p>How optional params handle undefined...</p>

Syntax

<h6>Smallest Heading Level</h6>

The <h6> element creates the lowest-level heading, representing the most specific subsection.

Attributes

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

<h6 id="note-1" class="minor-detail">Important Note</h6>

Common Use Cases

Complex Technical Documentation

<h4>Database Design Patterns</h4>
<h5>Normalization</h5>
<h6>First Normal Form (1NF)</h6>
<p>Eliminate repeating groups...</p>

<h6>Second Normal Form (2NF)</h6>
<p>Remove partial dependencies...</p>

<h6>Third Normal Form (3NF)</h6>
<p>Remove transitive dependencies...</p>

<h6>Boyce-Codd Normal Form (BCNF)</h6>
<p>Stricter version of 3NF...</p>

Result

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

<h4>Database Design Patterns</h4>
<h5>Normalization</h5>
<h6>First Normal Form (1NF)</h6>
<p>Eliminate repeating groups...</p>

<h6>Second Normal Form (2NF)</h6>
<p>Remove partial dependencies...</p>

<h6>Third Normal Form (3NF)</h6>
<p>Remove transitive dependencies...</p>

<h6>Boyce-Codd Normal Form (BCNF)</h6>
<p>Stricter version of 3NF...</p>

Detailed Specifications

<h5>CSS Selectors</h5>

<h6>Type Selectors</h6>
<p>Select elements by tag name...</p>

<h6>Class Selectors</h6>
<p>Select elements by class attribute...</p>

<h6>ID Selectors</h6>
<p>Select elements by ID attribute...</p>

<h6>Attribute Selectors</h6>
<p>Select elements by attribute values...</p>

Result

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

<h5>CSS Selectors</h5>

<h6>Type Selectors</h6>
<p>Select elements by tag name...</p>

<h6>Class Selectors</h6>
<p>Select elements by class attribute...</p>

<h6>ID Selectors</h6>
<p>Select elements by ID attribute...</p>

<h6>Attribute Selectors</h6>
<p>Select elements by attribute values...</p>

Nested Reference Content

<h4>JavaScript Events</h4>
<h5>Mouse Events</h5>

<h6>click</h6>
<p>Fired when element is clicked...</p>

<h6>dblclick</h6>
<p>Fired when element is double-clicked...</p>

<h6>mouseenter</h6>
<p>Fired when pointer enters element...</p>

<h6>mouseleave</h6>
<p>Fired when pointer leaves element...</p>

Result

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

<h4>JavaScript Events</h4>
<h5>Mouse Events</h5>

<h6>click</h6>
<p>Fired when element is clicked...</p>

<h6>dblclick</h6>
<p>Fired when element is double-clicked...</p>

<h6>mouseenter</h6>
<p>Fired when pointer enters element...</p>

<h6>mouseleave</h6>
<p>Fired when pointer leaves element...</p>

When NOT to Use H6

<h4>Configuration Options</h4>
<ul>
  <li><strong>port:</strong> Server port number (default: 3000)</li>
  <li><strong>host:</strong> Server hostname (default: 'localhost')</li>
  <li><strong>debug:</strong> Enable debug mode (default: false)</li>
</ul>

<h4>Configuration Options</h4>
<h5>Server Settings</h5>
<h6>port</h6>
<p>Server port number (default: 3000)</p>
<h6>host</h6>
<p>Server hostname (default: 'localhost')</p>
<h6>debug</h6>
<p>Enable debug mode (default: false)</p>

Better Alternatives

Description List
Table Format

<h4>API Parameters</h4>
<dl>
  <dt>limit</dt>
  <dd>Maximum number of results (1-100)</dd>

  <dt>offset</dt>
  <dd>Starting position for pagination</dd>

  <dt>sort</dt>
  <dd>Sort order: 'asc' or 'desc'</dd>
</dl>

<h4>Request Headers</h4>
<table>
  <tr>
    <th>Header</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Authorization</td>
    <td>Bearer token for authentication</td>
  </tr>
  <tr>
    <td>Content-Type</td>
    <td>Request body format</td>
  </tr>
</table>

Heading Hierarchy

Complete Six-Level Example

<article>
<h1>Web Development Encyclopedia</h1>

<h2>Frontend Technologies</h2>

<h3>JavaScript Frameworks</h3>

<h4>React</h4>

<h5>React Hooks</h5>

<h6>useState</h6>
<p>Manages component state...</p>

<h6>useEffect</h6>
<p>Handles side effects...</p>

<h6>useContext</h6>
<p>Accesses context values...</p>
</article>

Result

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

<article>
<h1>Web Development Encyclopedia</h1>

<h2>Frontend Technologies</h2>

<h3>JavaScript Frameworks</h3>

<h4>React</h4>

<h5>React Hooks</h5>

<h6>useState</h6>
<p>Manages component state...</p>

<h6>useEffect</h6>
<p>Handles side effects...</p>

<h6>useContext</h6>
<p>Accesses context values...</p>
</article>

Maintaining Hierarchy

Never skip heading levels:

Good
Avoid

<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<h5>Sub-detail</h5>
<h6>Fine detail</h6>

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

Styling Considerations

Subtle Visual Differences

At this level, style should be subtle but still distinguishable:

<style>
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; color: #4b5563; }
h6 { font-size: 1rem; font-weight: 600; color: #6b7280; }
p { font-size: 1rem; color: #374151; }
</style>

<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
<p>Regular paragraph text</p>

Result

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

<style>
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; color: #4b5563; }
h6 { font-size: 1rem; font-weight: 600; color: #6b7280; }
p { font-size: 1rem; color: #374151; }
</style>

<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
<p>Regular paragraph text</p>

Alternative Approaches

<style>
h6 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
</style>

<h6>Technical Note</h6>
<p>This is an advanced concept...</p>

<h6>Warning</h6>
<p>Deprecated in version 2.0...</p>

Result

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

<style>
h6 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
</style>

<h6>Technical Note</h6>
<p>This is an advanced concept...</p>

<h6>Warning</h6>
<p>Deprecated in version 2.0...</p>

Accessibility

Deep hierarchies can confuse users navigating by headings:

<!-- Screen reader: "Heading level 6: Performance Considerations" -->
<h6>Performance Considerations</h6>

Cognitive Load

Too many heading levels increase cognitive load:

User-Friendly
Overwhelming

<h1>Guide to HTML</h1>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>
    <h3>Lists</h3>

<h1>Guide</h1>
  <h2>Section</h2>
    <h3>Topic</h3>
      <h4>Subtopic</h4>
        <h5>Detail</h5>
          <h6>Note</h6> <!-- Too deep -->

Best Practices

Reconsider If Using H6

Ask yourself:

Is this content complex enough to need 6 levels?
Should this be split into multiple pages?
Would a list or table work better?
Are users able to follow this hierarchy?

When H6 Makes Sense

Comprehensive technical specifications
Legal documents with deep hierarchies
Academic papers with complex structure
API documentation with detailed parameters

When to Use Alternatives

Blog posts (use h1-h3)
Marketing pages (use h1-h2)
Product pages (use h1-h3)
Most web content (rarely beyond h4)

Real-World Example

<article>
<h1>HTTP Protocol Specification</h1>

<h2>Request Methods</h2>

<h3>POST Method</h3>
<p>Submits data to be processed...</p>

<h4>POST Request Structure</h4>

<h5>Request Headers</h5>
<p>Headers specific to POST requests...</p>

<h6>Content-Type</h6>
<p>application/json, multipart/form-data, etc.</p>

<h6>Content-Length</h6>
<p>Size of the request body in bytes...</p>

<h5>Request Body</h5>

<h6>JSON Format</h6>
<p>Structured data in JSON notation...</p>

<h6>Form Data Format</h6>
<p>Traditional form submissions...</p>
</article>

Result

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

<article>
<h1>HTTP Protocol Specification</h1>

<h2>Request Methods</h2>

<h3>POST Method</h3>
<p>Submits data to be processed...</p>

<h4>POST Request Structure</h4>

<h5>Request Headers</h5>
<p>Headers specific to POST requests...</p>

<h6>Content-Type</h6>
<p>application/json, multipart/form-data, etc.</p>

<h6>Content-Length</h6>
<p>Size of the request body in bytes...</p>

<h5>Request Body</h5>

<h6>JSON Format</h6>
<p>Structured data in JSON notation...</p>

<h6>Form Data Format</h6>
<p>Traditional form submissions...</p>
</article>

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

to

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

,: Better for term/definition content than deep headings. Learn more →

Lists for flat, related items. Learn more →

Tabular data organization. Learn more →

<h6> - Level 6 Heading

The <h6> Element

Quick Example

Syntax

Attributes

Common Use Cases

Complex Technical Documentation

Detailed Specifications

Nested Reference Content

When NOT to Use H6

Most Content Doesn’t Need It

Better Alternatives

Heading Hierarchy

Complete Six-Level Example

Maintaining Hierarchy

Styling Considerations

Subtle Visual Differences

Alternative Approaches

Accessibility

Screen Reader Impact

Cognitive Load

Navigation Challenges

Best Practices

Reconsider If Using H6

When H6 Makes Sense

When to Use Alternatives

Real-World Example

Browser Support

Related Elements

to

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

Specifications

The `<h6>` Element