<h6> Heading level 6

The lowest heading level, used inside an h5 section.

<h6> is the sixth and lowest heading level. It titles a subsection of an h5 section, which happens almost exclusively in very long technical or legal documents.

HTML stops at six, so there is no h7. Do not use h6 to get small text. Fine print goes in a paragraph styled with CSS, or in <small>.

Six levels and no more are defined in the WHATWG headings section (opens in a new tab). The Heading Order lesson helps you keep them in sequence.

Syntax

<h6>Sixth-level title</h6>

When to use it

You will meet h6 mostly in specifications, legal codes and large technical manuals, where a clause can sit six levels deep, and in content converted automatically from them. It belongs there. The six levels exist to mirror real structure.

HTML stops at six. When content seems to go deeper, stay at h6 and use ordered lists or a description list for the finer points, or split the document into several pages that each start again at h1. ARIA allows aria-level values above 6, but support for them is inconsistent, so do not count on them.

Some designs use h6 for small uppercase "eyebrow" labels above a heading, such as "NEW" or "CASE STUDY", because the default style is already tiny. A label like that is not a section title. Make it a paragraph with a class, or the headings list fills up with one-word entries that lead nowhere.

Live example

Edit the code and watch the preview.

<h5>Section 4.2.1</h5>
<h6>Note A</h6>
<p>This clause applies only to annual plans.</p>

More examples

Clauses in a technical specification

A specification can need all six levels. Here the deepest clause, 2.4.1.3.2, is an h6 under an h5. Each heading carries its clause number, so readers and screen reader users always know where they are.

<h2>2. Materials</h2>
<h3>2.4 Timber</h3>
<h4>2.4.1 Treatment</h4>
<h5>2.4.1.3 Outdoor use</h5>
<h6>2.4.1.3.2 Ground contact</h6>
<p>Posts in contact with soil must be pressure treated.</p>

Restyling h6 with CSS

By default an h6 is often smaller than body text. In a long document that can make the deepest headings hard to read, so this example gives h6 a normal size and a left border. The level stays correct while the look improves.

<style>
h5{font-size:1.05rem}
h6{font-size:1rem;border-left:3px solid #888;padding-left:6px;margin:12px 0 4px}
</style>
<h5>4.2.1 Refunds</h5>
<h6>4.2.1.1 Card payments</h6>
<p>Refunds reach your card within 5 working days.</p>
<h6>4.2.1.2 Bank transfers</h6>
<p>Refunds are sent to the original account.</p>

Tip: Get small text from CSS, never h6.

Browser support

The h6 element is part of the original set of HTML headings and works in every browser. Its default rendering is often smaller than normal text, so most sites restyle it. Screen readers announce it as heading level 6; levels beyond six exist in ARIA only as an optional extension that is not handled consistently.

Accessibility

Every heading shows up in the screen reader headings list. Use h6 only for a real sixth-level section title. Why headings have to reflect real structure is covered in the W3C note Understanding Info and Relationships (opens in a new tab).

Common mistakes

Wrong

<h6>Terms and conditions apply.</h6>

Right

<p><small>Terms and conditions apply.</small></p>

Small print is not a section heading.

Frequently asked questions

Is there an h7 tag in HTML?

No. HTML has six heading levels, <h1> to <h6>, and that is it. Content that seems to need more usually wants restructuring or splitting across pages. ARIA does offer role="heading" with aria-level="7", but support is patchy and it is rarely a good idea.

Can I use h6 for small print?

No. Headings label sections of content, and small bold text is a styling question. Put fine print, footnotes and disclaimers in <small> or a normal <p> styled with CSS. A misused <h6> adds a fake entry to the heading list that screen reader users browse. Legal notes and side comments belong in the small element.

Related sections elements