What is the <h6> tag in HTML? Definition and usage

The <h6> tag represents the sixth and last heading level in the HTML heading hierarchy. It holds a very specific place: that of the lowest, most granular level in your content's tree structure. If you want to fully master the semantic structure of your web pages, including the appropriate use of this often overlooked tag, we recommend following our complete HTML course.

Definition of the <h6> tag

The <h6> tag belongs to the family of heading tags in HTML, which includes six levels ranging from <h1> (the most important) to <h6> (the least important). Each level represents an additional degree of depth in the document's hierarchical structure.

Concretely, the <h6> tag is a block-level element that defines a sixth-level heading, the deepest of all. It sits just below <h5> in the hierarchy.

Here is the complete heading hierarchy:

Basic syntax

The syntax of the <h6> tag is identical to that of other heading tags. It is an opening and closing tag that wraps the heading text:

<h6>Your level 6 heading</h6>

The <h6> tag accepts the same global attributes as all other HTML tags, including id, class, style, lang, and title. It has no specific attributes of its own.

<h6 id="important-note" class="detail-heading">Note on compatibility</h6>

The place of <h6> in the heading hierarchy

To properly understand when to use <h6>, it is essential to visualize how this tag fits into a complete document structure. Each heading must be logically nested under the heading of the level above, without skipping levels.

Here is an example showing a complete hierarchy going down to level 6:

<h1>Complete Guide to French Cuisine</h1>

<h2>Starters</h2>
  <h3>Soups</h3>
    <h4>Hot Soups</h4>
      <h5>French Onion Soup</h5>
        <h6>Traditional Parisian Variant</h6>
        <p>The Parisian variant is distinguished by the use of toasted bread and gruyère cheese gratinated in the oven.</p>
        <h6>Lyonnaise Variant</h6>
        <p>The Lyonnaise version incorporates more butter and a richer broth.</p>

<h2>Main Courses</h2>
  <h3>Meats</h3>
    <h4>Beef</h4>
      <h5>Beef Bourguignon</h5>
        <h6>Slow Cooking Tips</h6>
        <p>For optimal results, let it simmer for at least 3 hours on low heat.</p>

As you can see, reaching the <h6> level requires extremely detailed and deeply structured content. This is why this tag is rarely used in everyday practice.

When to use the <h6> tag?

Using <h6> is legitimate in certain specific contexts. Let's look at the situations where this tag can be relevant.

In-depth technical documentation

Technical documentation, user manuals and detailed specifications are the natural habitat of the <h6> tag. When you write dense technical content with many levels of detail, the sixth heading level can become necessary.

<article>
  <h1>REST API Documentation</h1>

  <h2>Authentication</h2>
    <h3>OAuth 2.0</h3>
      <h4>Authorization Flows</h4>
        <h5>Authorization Code Grant</h5>
          <h6>Authorization Request Parameters</h6>
          <p>The authorization request must include the following parameters: client_id, redirect_uri, response_type and scope.</p>
          <h6>Response Handling</h6>
          <p>The server returns a temporary authorization code to be exchanged for an access token.</p>
</article>

Academic or scientific articles

Academic publications, theses and research reports often have a structure of chapters, sections, subsections, paragraphs and sub-paragraphs that can justify the use of the sixth heading level.

Complex and hierarchical FAQ pages

In the case of a FAQ organized by categories, subcategories and specific topics, you might need to go down to the <h6> level to properly structure the information.

<main>
  <h1>Help Center</h1>

  <section>
    <h2>User Account</h2>
    <h3>Account Security</h3>
      <h4>Two-Factor Authentication</h4>
        <h5>Mobile Setup</h5>
          <h6>Google Authenticator App</h6>
          <p>Download Google Authenticator, scan the QR code displayed in your settings, then enter the 6-digit code.</p>
          <h6>Microsoft Authenticator App</h6>
          <p>The process is similar, but Microsoft Authenticator also allows push notifications.</p>
  </section>
</main>

Default visual rendering

By default, browsers display the <h6> tag with a font size smaller than normal text (<p> tag). Along with <h5>, it is one of only two heading levels rendered smaller than body text, and the smaller of the two. Here are the typical relative sizes:

This very small size is a good indicator of how rarely this tag is used. In practice, you will almost always need to customize its appearance via CSS to make it readable and consistent with your design:

h6 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

Best practices

Using the <h6> tag must follow a number of rules to ensure good semantics, optimal accessibility and positive SEO impact.

Respect the heading hierarchy

The golden rule is to never skip levels. You should not jump directly from an <h3> to an <h6>. Each level must appear in logical order:

<!-- ❌ Bad practice: skipping levels -->
<h2>Main Section</h2>
<h6>Detail lost in the hierarchy</h6>

<!-- ✅ Good practice: hierarchy respected -->
<h2>Main Section</h2>
  <h3>Subsection</h3>
    <h4>Subsection detail</h4>
      <h5>Sub-detail</h5>
        <h6>Most precise point</h6>

Ask yourself if <h6> is truly necessary

Before using <h6>, ask yourself: does your content truly need six levels of depth? In the vast majority of cases, restructuring the content allows you to limit yourself to four levels maximum (<h1> to <h4>).

Do not use <h6> for styling

Never use <h6> solely to obtain small or specifically styled text. Heading tags have a semantic value, not just a visual one. If you need small text, use CSS with a <span> or <p> tag:

<!-- ❌ Bad practice: h6 used for styling -->
<h6>Footer note</h6>

<!-- ✅ Good practice: use CSS for styling -->
<p class="small-note">Footer note</p>

Accessibility and screen readers

Assistive technologies use the heading hierarchy to allow users to quickly navigate through the page content. A screen reader user can list all the headings on a page and jump directly to the section of interest. A well-constructed heading hierarchy, even down to level 6, facilitates this navigation.

Make sure the text of each <h6> is descriptive and unique within the context of the parent section. Avoid generic headings like "Details" or "More information" that provide no navigational value.

SEO impact of the <h6> tag

From a search engine optimization perspective, the <h6> tag has a very low SEO weight compared to higher levels. Search engines assign decreasing importance to each heading level:

• <h1>: very high SEO weight — main page title
• <h2>: high SEO weight — structures main sections
• <h3>: moderate SEO weight
• <h4>: low SEO weight
• <h5>: very low SEO weight
• <h6>: minimal SEO weight

This does not mean the <h6> tag is useless for SEO. It contributes to the clarity of your page's semantic structure, which search engines appreciate. However, do not rely on it to position strategic keywords.

Concrete usage examples

Example in a documentation page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Documentation - Layout Properties</title>
</head>
<body>
  <header>
    <h1>CSS Documentation</h1>
  </header>

  <main>
    <section>
      <h2>Layout</h2>

      <h3>Flexbox</h3>
        <h4>Flex Container Properties</h4>
          <h5>flex-direction</h5>
            <h6>Row Value</h6>
            <p>Arranges elements horizontally from left to right (default).</p>
            <h6>Column Value</h6>
            <p>Arranges elements vertically from top to bottom.</p>
            <h6>Row-reverse Value</h6>
            <p>Arranges elements horizontally from right to left.</p>
            <h6>Column-reverse Value</h6>
            <p>Arranges elements vertically from bottom to top.</p>
    </section>
  </main>
</body>
</html>

Example in a semantic structure with <article> and <section>

Semantic tags like <article> and <section> allow you to create independent heading contexts. This can reduce the need to use <h6>, as each section can restart its own hierarchy:

<article>
  <h2>Deployment Guide</h2>

  <section>
    <h3>Production Environment</h3>

    <section>
      <h4>Server Configuration</h4>

      <section>
        <h5>Security Settings</h5>

        <section>
          <h6>SSL/TLS Certificates</h6>
          <p>Install a valid SSL certificate issued by a recognized certificate authority.</p>

          <h6>HTTP Security Headers</h6>
          <p>Configure the Content-Security-Policy, X-Frame-Options and Strict-Transport-Security headers.</p>
        </section>
      </section>
    </section>
  </section>
</article>

Differences between <h6> and other heading levels

It is useful to summarize the key differences between <h6> and its counterparts to fully understand its specificity:

Common mistakes to avoid

Here are the most frequent mistakes we observe regarding the use of <h6>:

1. Using <h6> as a styling tag: Some developers use <h6> to get small bold text. This is a serious semantic error. Use CSS instead.

2. Skipping heading levels: Jumping from an <h2> directly to an <h6> breaks the document's hierarchical logic and harms accessibility.

3. Multiplying <h6> without parent structure: Having numerous <h6> tags without intermediate levels makes the page confusing for assistive technologies.

4. Forcing the use of six levels: If your content only requires three or four levels, do not go further. The depth of the hierarchy must match the actual complexity of the content.

<!-- ❌ Error: using h6 in simple content -->
<h1>My Blog</h1>
<h6>Published on January 15</h6>
<p>Article content...</p>

<!-- ✅ Correct: use an appropriate element -->
<h1>My Blog</h1>
<p><time datetime="2024-01-15">Published on January 15</time></p>
<p>Article content...</p>

Frequently asked questions

Yes, you can use as many <h6> tags as needed on the same page, as long as they are all correctly integrated into a coherent heading hierarchy. Each <h6> must be a subheading of an existing <h5> within the same sectional context. There is no technical limit to the number of <h6> tags, but their multiplication must remain justified by the actual depth of the content.

Browsers apply a decreasing font size for each heading level. Since <h6> is the last level, its default size (approximately 0.67em or 10.72px) ends up below that of body text (1em or 16px). This is an intended behavior defined by HTML specifications and browser default stylesheets. In practice, it is strongly recommended to redefine the <h6> size via CSS to ensure good readability while maintaining a visual distinction from standard text.

No, the <h6> tag is neither obsolete nor deprecated. It remains a full part of the HTML5 specification and is perfectly valid. However, its usage is naturally rare because few contents require six levels of hierarchical depth. The introduction of sectioning elements in HTML5 (<article>, <section>, <aside>, <nav>) has also reduced the need to use the deepest heading levels by allowing the creation of separate heading contexts.

To fully master the heading hierarchy and semantic structuring of your web pages, we recommend following our dedicated HTML course on Believemy. You will learn how to correctly use each heading level, from <h1> to <h6>, including accessibility and search engine optimization best practices. Regular practice and analyzing existing page structures will also help you develop a solid intuition for content hierarchization.