0%

<h3> Heading level 3

A subsection heading inside an h2 section.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<h3> titles a subsection of an h2 section. A recipe page, say, might have an h2 called Method with an h3 for each stage.

Screen reader users navigate by the outline your headings build, so keep it logical. An h3 follows an h2 and never comes straight after the h1. If you want a different size, change it in CSS and keep the level.

The WHATWG definition of h1 to h6 (opens in a new tab) covers h3 along with the others. The Headings lesson shows how the levels nest.

Syntax

<h3>Subsection title</h3>

When to use it

Inside an h2 section, the parts are h3: the questions under a "Shipping" FAQ heading, the dishes under "Starters", the job openings under "Careers", the card titles in a "Latest posts" section. After h2 it is the level content sites use most.

Check that there are at least two h3 headings, or a clear reason for a single one. A lone subheading in a section often means the content wants to be its own h2 section. When a label is short and only names a small fact, such as "Weight" next to a value, a description list works better than a heading.

Reusable components are where h3 goes wrong. A card built with an h3 looks right on the home page, under an h2, and creates a skipped level on a page where it sits directly under the h1. Pick the level each time you place the component, or let your template pass it in. See how levels nest in the heading order lesson.

Live example

Edit the code and watch the preview.

<h1>Bike Care</h1>
<h2>Cleaning</h2>
<h3>The frame</h3>
<p>Wash with warm soapy water.</p>
<h3>The chain</h3>
<p>Scrub with an old toothbrush.</p>

More examples

Questions in an FAQ section

The FAQ is grouped by topic with h2 headings, and each question inside a topic is an h3. Screen reader users can list all questions by jumping between level 3 headings and read only the answers they need.

<h1>Help</h1>
<h2>Shipping</h2>
<h3>How long does delivery take?</h3>
<p>Two to four working days.</p>
<h3>Do you ship abroad?</h3>
<p>Yes, to every country in the EU.</p>
<h2>Returns</h2>
<h3>Can I return an opened item?</h3>
<p>Yes, within 14 days.</p>

Card titles in a section

The section is titled with an h2, so each card inside it uses an h3. Simple inline-block CSS places the cards in a row. If the same cards moved to a page without the h2, their level would change to h2.

<style>
.post{display:inline-block;vertical-align:top;width:45%;margin-right:4%}
.post img{width:100%;height:auto}
</style>
<h1>Pet Blog</h1>
<h2>Latest posts</h2>
<div class="post">
  <img src="cat.svg" alt="A cat sitting" width="400" height="300">
  <h3>Why cats love boxes</h3>
</div>
<div class="post">
  <img src="dog.svg" alt="A happy dog" width="400" height="300">
  <h3>Teaching an old dog new tricks</h3>
</div>

Tip: An h3 lives under an h2. Do not skip a level.

Browser support

No browser has trouble with h3; it has been there since the early days of HTML. Browsers draw it bold and a little larger than body text by default, but the exact size is up to each browser, so set it in CSS. Assistive technology exposes it as a heading with level 3.

Accessibility

Keep h1 to h6 in logical order and assistive technology can present an accurate outline. Skipping levels breaks it (WCAG 1.3.1). Heading structure is covered in the W3C note Understanding Info and Relationships (opens in a new tab).

Common mistakes

Wrong

<h1>Recipes</h1>
<h3>Pancakes</h3>

Right

<h1>Recipes</h1>
<h2>Breakfast</h2>
<h3>Pancakes</h3>

Never skip a heading level only to get smaller text.

Frequently asked questions

Can I use h3 without an h2?

The validator will let it through. Screen reader users, though, hear a jump from <h1> straight to <h3> and wonder whether they missed a section, which is why accessibility guidance says headings should not skip levels on the way down. Want smaller text? Use the correct level and resize it with CSS. The level above is explained on the h2 page.

Is it okay to go back from h3 to h2?

Yes. Climbing back up any number of levels is normal. After the last <h3> subsection of one part, the next part starts with a fresh <h2>. The thing to avoid is skipping levels on the way down, such as h2 directly to h4.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.