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

Definition of the <h4> tag

The <h4> tag is part of the heading tag family in HTML, which includes elements ranging from <h1> to <h6>. It represents a fourth-level heading in the content hierarchy of a web page. This tag is essential for properly structuring your HTML documents and providing smooth navigation for both users and search engines.

Within a well-organized document structure, the <h4> typically comes after an <h3> heading to introduce more specific subsections. If you want to fully master web page structuring, we recommend following our complete HTML course which covers the use of heading tags in depth.

Basic syntax and structure

The syntax of the <h4> tag is simple and intuitive. It is an opening and closing tag that wraps the heading text:

<h4>Your level 4 heading</h4>

This tag belongs to the category of block-level elements, which means it takes up the full width available in its parent container and automatically creates a line break before and after it.

Attributes of the <h4> tag

Like all HTML tags, <h4> accepts global attributes. Here are the most commonly used ones:

Place of <h4> in the heading hierarchy

To properly understand the role of <h4>, it's important to visualize the complete HTML heading hierarchy:

The <h4> therefore occupies an intermediate position in this hierarchy. It is particularly useful for pages with dense and structured content, such as technical documentation, in-depth articles or training pages.

Practical usage examples

Example 1: Blog article structure

Here's how the <h4> can be integrated into a well-structured blog article:

<article>
  <h1>Complete guide to web development</h1>
  
  <h2>Fundamental languages</h2>
  
  <h3>HTML: the structure</h3>
  <h4>Semantic tags</h4>
  <p>Semantic tags give meaning to your content...</p>
  
  <h4>HTML forms</h4>
  <p>Forms allow you to collect data...</p>
  
  <h3>CSS: the style</h3>
  <h4>CSS selectors</h4>
  <p>Selectors allow you to target elements...</p>
  
  <h4>The box model</h4>
  <p>Every HTML element is represented as a box...</p>
</article>

Example 2: Technical documentation

In technical documentation, the <h4> allows you to detail the sub-parts of a feature:

<section>
  <h2>API Reference</h2>
  
  <h3>getUserData() method</h3>
  
  <h4>Parameters</h4>
  <ul>
    <li><code>userId</code> - User identifier</li>
    <li><code>options</code> - Configuration options</li>
  </ul>
  
  <h4>Return value</h4>
  <p>Returns an object containing user data...</p>
  
  <h4>Usage examples</h4>
  <pre><code>const user = getUserData(123);console.log(user.name);</code></pre>
</section>

Example 3: E-commerce product page

On a product page, the <h4> can structure detailed specifications:

<main>
  <h1>ProBook X15 Laptop</h1>
  
  <h2>Technical specifications</h2>
  
  <h3>Performance</h3>
  <h4>Processor</h4>
  <p>12th generation Intel Core i7, 8 cores...</p>
  
  <h4>RAM</h4>
  <p>16 GB DDR5, expandable up to 64 GB...</p>
  
  <h3>Display</h3>
  <h4>Screen resolution</h4>
  <p>15.6-inch Full HD (1920x1080) display...</p>
  
  <h4>Display technology</h4>
  <p>IPS panel with anti-glare treatment...</p>
</main>

Styling the <h4> tag with CSS

By default, browsers apply a predefined style to <h4>, usually with a font size slightly larger than normal text and in bold. You can fully customize its appearance with CSS:

/* Basic style for h4 */
h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Alternative style with border */
h4.bordered {
  padding-left: 15px;
  border-left: 3px solid #007bff;
}

/* Style for documentation */
h4.code-heading {
  font-family: 'Fira Code', monospace;
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
}

Responsive styling example

For an optimal experience on all devices, consider adapting the size of your <h4> headings according to screen size:

h4 {
  font-size: 1.25rem;
}

@media (max-width: 768px) {
  h4 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  h4 {
    font-size: 1rem;
  }
}

SEO and accessibility best practices

Respecting the hierarchy

One of the most common mistakes is skipping heading levels. Avoid going directly from an <h2> to an <h4> without using an intermediate <h3>:

<!-- ❌ BAD PRACTICE: skipped level -->
<h2>Main section</h2>
<h4>Detailed subsection</h4>  <!-- Where is the h3? -->

<!-- ✅ GOOD PRACTICE: hierarchy respected -->
<h2>Main section</h2>
<h3>Subsection</h3>
<h4>Detailed subsection</h4>

Semantic usage

Never use an <h4> just to get a smaller font size. Heading tags have strong semantic value:

Descriptive content

The text of your <h4> should be clear and descriptive. It should summarize the content of the section it introduces:

<!-- ❌ BAD PRACTICE: vague title -->
<h4>Information</h4>

<!-- ✅ GOOD PRACTICE: descriptive title -->
<h4>Shipping information and delivery times</h4>

Accessibility with ARIA

To improve accessibility, you can combine <h4> with ARIA attributes when relevant:

<section aria-labelledby="options-title">
  <h4 id="options-title">Customization options</h4>
  <p>Select your preferences below...</p>
</section>

When to use (and not use) <h4>

Recommended use cases

The <h4> is particularly suited in the following situations:

• Long and detailed articles: when you need multiple levels of subdivision
• Technical documentation: to detail the parameters, returns and examples of a function
• Structured FAQ pages: to organize questions by categories and subcategories
• Guides and tutorials: to segment steps into sub-steps

Cases to avoid <h4>

In some situations, using <h4> is not appropriate:

• Short content: if your page doesn't need so many levels, stick with <h2> and <h3>
• Styling only: don't use <h4> to get smaller or bold text
• Isolated widgets and components: prefer other elements like <div> or <span> with CSS classes

Combination with semantic tags

The <h4> integrates perfectly with HTML5 semantic tags like <article>, <section>, <aside> and <main>:

<article>
  <header>
    <h1>Article title</h1>
  </header>
  
  <section>
    <h2>Introduction</h2>
    <p>Introduction content...</p>
  </section>
  
  <section>
    <h2>Development</h2>
    <h3>First part</h3>
    <h4>Point A</h4>
    <p>Details about point A...</p>
    <h4>Point B</h4>
    <p>Details about point B...</p>
  </section>
  
  <aside>
    <h3>Also read</h3>
    <h4>Similar articles</h4>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
    </ul>
  </aside>
</article>

Browser differences

The <h4> tag enjoys excellent support in all modern and older browsers. Here are the typical default styles applied by browsers:

Frequently asked questions

The main difference lies in the hierarchical level. The <h4> represents a fourth-level heading, intended for subsections of an <h3>. The higher the number, the more the heading is considered a sub-level in the document structure. Visually, browsers generally display lower-level headings with a smaller font size, but this difference is purely visual and can be modified with CSS.

There is no technical limit to the number of <h4> tags you can use on a page. However, for readability and SEO reasons, only use them when semantically justified. If you find yourself with a very large number of <h4> tags, this may indicate that your content should be reorganized or split into multiple pages.

Yes, heading tags, including <h4>, have an impact on search engine optimization. Search engines use the heading hierarchy to understand the structure and content of your page. Although the SEO weight of an <h4> is less than that of an <h1> or <h2>, it contributes to a coherent page structure that Google appreciates. Including relevant keywords in your <h4> tags can improve your ranking for long-tail queries.

To master the use of heading tags and semantic structuring of web pages, we recommend following our complete HTML course on Believemy. You will learn not only how to correctly use <h1> to <h6> tags, but also all the best practices for creating accessible, well-ranked and professional web pages.