The <h3> tag in HTML: subheading and hierarchy

The <h3> tag is a fundamental element for structuring the content of your web pages. As a level 3 heading, it plays a crucial role in your HTML document's hierarchy, both for user experience and search engine optimization. If you want to perfectly master HTML structuring, our complete HTML course will guide you step by step in learning all heading tags.

Definition of the <h3> tag

The <h3> tag is part of the HTML heading tags family, which includes levels <h1> through <h6>. The number 3 indicates that it is a third-level heading in the document hierarchy. This tag is used to define subsections within a section already introduced by a level 2 heading (<h2>).

The basic syntax is simple:

<h3>Your level 3 subheading</h3>

The <h3> tag is a block-level element, which means it takes up the full available width and automatically creates a line break before and after its content. By default, browsers display text contained in an <h3> in bold with a font size slightly smaller than that of an <h2>.

Place of <h3> in the heading hierarchy

To fully understand the usefulness of the <h3> tag, it is essential to visualize the complete hierarchy of HTML headings. Here is a summary table:

This hierarchical structure can be compared to that of a book: the <h1> represents the book title, the <h2> elements represent chapters, and the <h3> elements represent sub-chapters or sections within each chapter.

Practical usage examples

Basic article structure

Here is a concrete example showing how to integrate <h3> tags into an article structure:

<article>
  <h1>Complete guide to organic gardening</h1>
  
  <h2>Soil preparation</h2>
  <p>Soil preparation is a crucial step...</p>
  
  <h3>Composition analysis</h3>
  <p>Before starting, analyze your soil...</p>
  
  <h3>Natural amendments</h3>
  <p>Compost is your best ally...</p>
  
  <h2>Seed selection</h2>
  <p>Selecting the right seeds is essential...</p>
  
  <h3>Heirloom seeds</h3>
  <p>Heirloom varieties have many advantages...</p>
  
  <h3>Hybrid seeds</h3>
  <p>F1 hybrids offer increased productivity...</p>
</article>

In this example, each <h3> introduces a subsection that develops a specific aspect of the topic addressed by the parent <h2>. This logical organization facilitates reading and understanding of the content.

Combination with semantic tags

The <h3> tag is ideally used in combination with HTML5 semantic tags like <section>, <article>, or <aside>:

<main>
  <article>
    <h1>JavaScript frameworks in 2024</h1>
    
    <section>
      <h2>Front-end frameworks</h2>
      
      <section>
        <h3>React</h3>
        <p>Developed by Meta, React dominates the market...</p>
      </section>
      
      <section>
        <h3>Vue.js</h3>
        <p>Vue.js stands out for its learning curve...</p>
      </section>
      
      <section>
        <h3>Angular</h3>
        <p>Angular offers a complete solution...</p>
      </section>
    </section>
  </article>
</main>

This approach reinforces the semantics of your document and improves its accessibility. Assistive technologies can thus better navigate through the content.

Example in a documentation page

Technical documentation pages frequently use the <h3> tag to organize different methods or features:

<div class="documentation">
  <h1>User management API</h1>
  
  <h2>Available endpoints</h2>
  
  <h3>GET /users</h3>
  <p>Retrieves the list of all users.</p>
  <p><strong>Parameters:</strong> page, limit, sort</p>
  
  <h3>POST /users</h3>
  <p>Creates a new user.</p>
  <p><strong>Required body:</strong> name, email, password</p>
  
  <h3>PUT /users/:id</h3>
  <p>Updates an existing user.</p>
  
  <h3>DELETE /users/:id</h3>
  <p>Deletes a user.</p>
</div>

CSS styling of the <h3> tag

Although browsers apply a default style to <h3> tags, you will generally want to customize their appearance via CSS. Here are several styling examples:

/* Basic style */
h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Style with left border */
h3.accent {
  padding-left: 1rem;
  border-left: 4px solid #3498db;
}

/* Style with colored background */
h3.highlight {
  background-color: #f8f9fa;
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

/* Minimalist style */
h3.minimal {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: #7f8c8d;
}

You can apply these styles by adding the corresponding classes to your tags:

<h3 class="accent">Title with colored accent</h3>
<h3 class="highlight">Highlighted title</h3>
<h3 class="minimal">Minimalist title</h3>

SEO best practices

The <h3> tag plays an important role in search engine optimization. Here are the best practices to follow:

Respect the hierarchy

Never skip a level in your heading structure. An <h3> must always be preceded by an <h2> in the same section. This rule is fundamental for SEO and accessibility.

<!-- ❌ Bad practice: level skip -->
<h1>Main title</h1>
<h3>Subtitle</h3> <!-- The h2 is missing! -->

<!-- ✅ Good practice: hierarchy respected -->
<h1>Main title</h1>
<h2>Main section</h2>
<h3>Subsection</h3>

Integrate relevant keywords

Your <h3> tags should contain secondary keywords related to the page's topic. Search engines give particular importance to heading content to understand your page's theme.

<!-- Example for an article about coffee -->
<h2>Different preparation methods</h2>
<h3>Traditional drip coffee preparation</h3>
<h3>Italian espresso technique</h3>
<h3>French press coffee method</h3>

Avoid over-optimization

Don't abuse keywords in your headings. An <h3> should remain natural and provide real informational value to the reader. Google penalizes pages that practice keyword stuffing.

Accessibility and the <h3> tag

Accessibility is a crucial aspect of modern web development. Heading tags, including <h3>, are essential for users who navigate with assistive technologies.

Keyboard navigation and screen readers

Screen readers like JAWS, NVDA, or VoiceOver allow users to navigate from heading to heading. A well-organized heading structure with properly positioned <h3> elements greatly facilitates this navigation.

Users can:

• List all headings on the page to get an overview
• Jump directly from one heading to another
• Understand the document structure without reading all the content

Id attribute for internal links

Add an id attribute to your <h3> tags to enable anchor links:

<h3 id="installation">Software installation</h3>
<p>To install the software, follow these steps...</p>

<!-- Link to this section -->
<a href="#installation">See installation instructions</a>

This technique improves user experience and allows creating interactive tables of contents.

Common mistakes to avoid

Here are the most frequent mistakes regarding the use of the <h3> tag:

Using headings only for styling

Never choose a heading level for its size or appearance. If you need larger text without creating a heading, use CSS with a <p> or <span> tag:

<!-- ❌ Bad: using h3 to enlarge text -->
<h3>Important note about delivery times</h3>

<!-- ✅ Good: using a CSS class -->
<p class="text-large">Important note about delivery times</p>

Omitting content between headings

Each <h3> tag should be followed by content. A heading without associated content has no semantic meaning:

<!-- ❌ Bad: consecutive headings without content -->
<h2>The advantages</h2>
<h3>Savings</h3>
<h3>Efficiency</h3>
<h3>Durability</h3>

<!-- ✅ Good: each heading has its content -->
<h2>The advantages</h2>
<h3>Savings</h3>
<p>Reduce your costs by 30% on average...</p>
<h3>Efficiency</h3>
<p>Save time through automation...</p>

Excessively multiplying heading levels

If you find yourself regularly using <h5> or <h6>, it may be a sign that your content should be reorganized or divided into several pages. Most documents don't need to go beyond <h4>.

Browser compatibility

The <h3> tag benefits from universal compatibility with all web browsers, whether old or modern. It has been part of the earliest HTML specifications and has never been modified or deprecated.

Frequently asked questions

Yes, absolutely! Unlike the <h1> tag which should ideally be unique, you can use as many <h3> tags as needed to structure your subsections. The important thing is that each <h3> is logically attached to a parent <h2> and brings real structural value to your content.

The <h3> tag defines a level 3 heading in the document hierarchy. It has a structural semantic value and influences SEO. The <strong> tag simply indicates particular importance to text without creating structure. Visually, both may appear similar (bold text), but their semantic meaning is totally different.

It depends on the context. If your cards represent elements of a list within a section, using <h3> for their titles is quite appropriate. However, if the cards are independent elements (like in a sidebar widget), it may be better to use other tags or adjust the heading level based on the position in the page's overall hierarchy.

To master the use of heading tags like <h3> and the entire HTML structure, regular practice is essential. We recommend following our HTML course on Believemy which covers in depth HTML semantics, SEO best practices, and accessibility. You will learn to create perfectly structured and optimized web pages.