The <h5> tag in HTML: definition, usage and best practices

Definition of the <h5> tag

The <h5> tag is part of the HTML heading tag family, ranging from <h1> to <h6>. It represents the fifth heading level in the content hierarchy of a web page. Although less frequently used than its higher-level counterparts, the <h5> tag plays an important role in structuring complex and highly detailed content.

If you want to perfectly master HTML tags and their usage, our comprehensive HTML course will guide you through all fundamental and advanced concepts.

The <h5> tag is a block-level element, which means it occupies the entire available width of its parent container and creates a line break before and after its content. It is semantically significant, meaning it conveys structural information to browsers, screen readers, and search engines.

Basic syntax

The syntax of the <h5> tag is simple and follows the standard pattern of HTML heading tags:

<h5>Level 5 heading content</h5>

Unlike self-closing tags like <br> or <img>, the <h5> tag necessarily requires an opening tag <h5> and a closing tag </h5>.

Place in the heading hierarchy

To fully understand the role of the <h5> tag, it is essential to visualize its position in the complete HTML heading hierarchy:

The <h5> tag is therefore at the second-to-last level of the hierarchy. Its use indicates that you are structuring content with a very fine level of granularity.

Common use cases

Although the <h5> tag is less common than higher-level headings, it finds its place in several specific contexts:

In-depth technical documentation

In complex technical documentation, such as programming manuals or API specifications, it is common to need several levels of subdivision:

<article>
  <h1>REST API Guide</h1>
  
  <section>
    <h2>Authentication</h2>
    
    <section>
      <h3>Authentication methods</h3>
      
      <section>
        <h4>OAuth 2.0</h4>
        
        <section>
          <h5>Client configuration</h5>
          <p>To configure your OAuth client...</p>
        </section>
        
        <section>
          <h5>Authorization flow</h5>
          <p>The authorization flow includes several steps...</p>
        </section>
      </section>
    </section>
  </section>
</article>

Academic and scientific articles

Academic publications often follow a highly hierarchical structure that may require the use of the <h5> tag:

<article>
  <h1>Study on environmental impacts</h1>
  
  <section>
    <h2>Methodology</h2>
    
    <section>
      <h3>Data collection</h3>
      
      <section>
        <h4>Sampling protocol</h4>
        
        <section>
          <h5>Geographic area A</h5>
          <p>Detailed description of area A...</p>
        </section>
        
        <section>
          <h5>Geographic area B</h5>
          <p>Detailed description of area B...</p>
        </section>
      </section>
    </section>
  </section>
</article>

User manuals

Product or software manuals can also benefit from this granularity:

<main>
  <h1>User Manual - Digital Camera</h1>
  
  <section>
    <h2>Advanced settings</h2>
    
    <section>
      <h3>Manual mode</h3>
      
      <section>
        <h4>Exposure parameters</h4>
        
        <section>
          <h5>Shutter speed</h5>
          <p>Shutter speed controls the sensor exposure duration...</p>
        </section>
        
        <section>
          <h5>Aperture</h5>
          <p>The aperture determines the amount of incoming light...</p>
        </section>
      </section>
    </section>
  </section>
</main>

Default and custom CSS styling

By default, browsers apply a specific style to the <h5> tag. It typically appears with a font size slightly smaller than or equal to regular text, with bold font weight.

Default browser styles

Here are the typical default styles applied:

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

Customization with CSS

You can customize the appearance of your <h5> headings according to your design needs:

h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-left: 3px solid #3498db;
  padding-left: 10px;
}

This customization makes your level 5 headings more visible and distinctive while preserving their semantic meaning.

Attributes of the <h5> tag

The <h5> tag accepts all global attributes available in HTML. Here are the most commonly used ones:

Example with id attribute for anchors

The id attribute is particularly useful for creating anchor links to specific sections:

<!-- In the table of contents -->
<nav>
  <ul>
    <li><a href="#advanced-settings">Advanced settings</a></li>
  </ul>
</nav>

<!-- Further down in the document -->
<h5 id="advanced-settings">Advanced settings</h5>
<p>This section details the available advanced settings...</p>

Accessibility and semantics

The correct use of the <h5> tag has important implications for your website's accessibility.

Importance for screen readers

Assistive technologies, such as screen readers, use the heading structure to allow users to navigate through content. A user can thus "jump" from one heading to another to quickly browse a page.

Correct hierarchy

Here is an example of a correct hierarchy including the <h5> tag:

<h1>Main title</h1>
  <h2>Main section</h2>
    <h3>Sub-section</h3>
      <h4>Sub-section detail</h4>
        <h5>Specific point</h5>
        <h5>Another specific point</h5>
      <h4>Another detail</h4>
    <h3>Another sub-section</h3>
  <h2>Another main section</h2>

This hierarchical structure allows clear and logical navigation for all users.

SEO impact of the <h5> tag

From a search engine optimization (SEO) perspective, the <h5> tag has a limited but notable impact.

Semantic weight for search engines

Search engines like Google use heading hierarchy to understand a page's structure and content. However, the weight given decreases as you go down the hierarchy:

• <h1>: Very high weight
• <h2>: High weight
• <h3>: Medium weight
• <h4>: Low weight
• <h5>: Very low weight
• <h6>: Minimal weight

This doesn't mean the <h5> tag is useless for SEO. It contributes to a clear and well-organized content structure, which Google appreciates.

SEO best practices

To optimize the use of the <h5> tag from an SEO perspective:

• Include relevant keywords when it makes sense
• Keep headings concise and descriptive
• Ensure the heading accurately reflects the content that follows
• Don't use the <h5> tag for styling purposes only

Best practices for usage

To effectively use the <h5> tag, here are the recommendations to follow:

What to do

• Respect the hierarchy: Use <h5> only after having used <h4>
• Be consistent: Maintain a logical structure throughout your document
• Use sparingly: If you regularly reach the <h5> level, your content may be too complex and could be divided into multiple pages
• Combine with <section>: Use semantic tags like <section> to reinforce the structure

What not to do

• Don't skip levels: Never use <h5> directly after <h2> or <h3>
• Don't use for styling: Don't choose <h5> because its default size suits you
• Avoid empty headings: An <h5> without content makes no sense
• Don't duplicate headings: Each heading should be unique and descriptive

Complete usage example

Here is a complete example showing how the <h5> tag integrates into a well-organized document structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technical documentation</title>
</head>
<body>
  <main>
    <article>
      <h1>Complete JavaScript Guide</h1>
      <p>Introduction to the JavaScript language...</p>
      
      <section>
        <h2>Fundamentals</h2>
        <p>The basic concepts of JavaScript...</p>
        
        <section>
          <h3>Variables</h3>
          <p>Variables allow you to store data...</p>
          
          <section>
            <h4>Declaration types</h4>
            <p>There are several ways to declare a variable...</p>
            
            <section>
              <h5>The var keyword</h5>
              <p>var is the traditional declaration method...</p>
            </section>
            
            <section>
              <h5>The let keyword</h5>
              <p>let is the modern method for mutable variables...</p>
            </section>
            
            <section>
              <h5>The const keyword</h5>
              <p>const is used for constants...</p>
            </section>
          </section>
        </section>
      </section>
    </article>
  </main>
</body>
</html>

Browser compatibility

The <h5> tag benefits from universal compatibility with all browsers, old and modern. It has been part of the earliest HTML versions and is supported since:

• Chrome: All versions
• Firefox: All versions
• Safari: All versions
• Edge: All versions
• Internet Explorer: All versions
• Opera: All versions

You can therefore use this tag without any concerns about compatibility.

Frequently asked questions

The <h5> tag represents the fifth level of the heading hierarchy, just before <h6>. The higher the number, the finer the level of detail. In terms of default rendering, <h5> appears smaller than <h4>, <h3>, <h2>, and <h1>. From a semantic perspective, it indicates a very detailed subdivision of the content.

No, you should never use heading tags for styling purposes only. The <h1> to <h6> tags have important semantic meaning for accessibility and SEO. If you simply want to style text, use <p>, <span>, or <div> tags with appropriate CSS classes.

Yes, to respect accessibility and semantic best practices, you must use heading levels in order. Before using <h5>, your document should contain an <h1>, followed by an <h2>, then <h3>, and finally <h4>. Skipping levels creates confusion for assistive technologies.

To master the use of HTML tags and create well-structured web pages, we recommend following our comprehensive HTML course. You will learn not only heading tags but also all essential HTML elements to create professional, accessible, and SEO-optimized websites.