<h6> is a level-6 heading, the lowest native heading rank. It describes a subsection under an h5 section.
A heading in context
HTML and CSS
HTML
<h1>Page: gardening</h1>
<h2>Section: planting</h2>
<h3>Subsection: vegetables</h3>
<h4>Topic: tomatoes</h4>
<h5>Detail: seedlings</h5>
<h6>Specific note: transplanting</h6>
<p>The text belonging to this section follows its heading.</p>CSS
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0.4rem 0;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
When to use it
Use h6 only when the content really has six nested levels. Deep nesting can make a document harder to follow; consider whether some subsections could become separate lessons.
Placement and attributes
It accepts global attributes and phrasing content. Do not nest heading elements. Its native accessibility role is a heading with level 6; CSS does not change that level. Inspect the heading list in the accessibility tree to check the complete hierarchy.
Common mistakes
Do not choose h6 for small text. Use font-size for that. There is no native h7: reorganize a deeper outline or use the appropriate existing heading level. Returning to h2 starts another major section.
Source
MDN: heading elements explains ranks, placement, and accessible document structure.