`<h4>` Heading level 4

Q: When do I need an h4 heading?

When a subsection inside an <h3> subsection needs its own <h4> title, for example one API method inside a chapter section of technical documentation. Most web pages get by with h1 to h3. If you keep reaching for h4 to h6, the content probably wants to be split into separate pages.

Q: Why is my h4 smaller than normal text?

Blame the default browser styles. They make <h4> roughly the size of body text and <h5> and <h6> smaller still, though bold. That is only default CSS. Set the size you want, for example h4{font-size:1.1rem} , and keep the level that matches the document structure. The Colors and Fonts lesson shows how to set font sizes, so you can change the look and leave the level alone.

Heading for a subsection of an h3 section.

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

<h4> titles a subsection inside an h3 section. Long documents, technical docs and legal text use levels this deep all the time. Simple pages almost never do.

Reach for h4 only when the content really is a sub-subsection. Small bold text that is not a heading should come from CSS or <strong>, never from a low heading level.

The headings section of the HTML standard (opens in a new tab) defines all levels together. If nesting still feels shaky, go back to the Heading Order lesson.

Syntax

<h4>Sub-subsection title</h4>

When to use it

Reach for h4 when the content really has four levels. Documentation where a chapter (h2) has topics (h3) that list single options (h4) qualifies, and so does a restaurant menu with Dinner, Mains and then the dishes, or a handbook with numbered rules. Blogs and marketing pages rarely go below h3.

Hitting h4 on a short page usually means the structure is too deep. Move a long section to its own page, or turn small labelled items into a list, and the need often disappears. In forms, group titles belong in <legend> and field names in <label>, never in headings.

Site footers often use h4 for column titles such as "Company" or "Support", only because they should look small. In the outline those titles then turn into children of whatever h3 came last in the main content. Make footer column titles h2 and shrink them with CSS. The heading order lesson explains the nesting.

Live example

Edit the code and watch the preview.

<h2>Settings</h2>
<h3>Privacy</h3>
<h4>Cookies</h4>
<p>Choose which cookies to allow.</p>
<h4>Location</h4>
<p>Choose who can see where you are.</p>

More examples

A restaurant menu

The menu has four real levels: the page, the meal, the course and the individual dish. Each dish name is an h4 under its course, so the outline mirrors the printed menu and screen reader users can skim dish by dish.

<h1>Harbour Cafe menu</h1>
<h2>Dinner</h2>
<h3>Mains</h3>
<h4>Grilled fish</h4>
<p>With lemon potatoes. $16</p>
<h4>Vegetable curry</h4>
<p>With rice and flatbread. $13</p>
<h3>Desserts</h3>
<h4>Pancakes</h4>
<p>With berries and cream. $7</p>

Course handbook

A course handbook has a chapter on assessment with a subsection on projects, and each project is an h4. CSS makes the h4 slightly bigger and colored, while the level still describes the real position in the document.

<style>
h4{font-size:1.05rem;color:#0b6e4f;margin-bottom:4px}
</style>
<h2>Assessment</h2>
<h3>Projects</h3>
<h4>Project 1: Recipe page</h4>
<p>Build a page with headings, lists and an image.</p>
<h4>Project 2: Contact form</h4>
<p>Build an accessible form with labels and validation.</p>

Tip: h4 belongs below an h3.

Browser support

The h4 element is one of the original HTML headings and is supported in every browser. In most browsers its default size is close to normal body text, which surprises many people; what browsers pass to screen readers is the level, "heading level 4", not the size.

Accessibility

Go this deep only when the content is really nested that far, and keep the order logical so the outline holds together (WCAG 1.3.1). The W3C note Understanding Info and Relationships (opens in a new tab) explains why the order counts.

Common mistakes

Wrong

<h4>Price: 19 USD</h4>

Right

<p class="price">Price: 19 USD</p>

Headings label sections of content. Styling one value is a CSS job.

Frequently asked questions

When do I need an h4 heading?

When a subsection inside an <h3> subsection needs its own <h4> title, for example one API method inside a chapter section of technical documentation. Most web pages get by with h1 to h3. If you keep reaching for h4 to h6, the content probably wants to be split into separate pages.

Why is my h4 smaller than normal text?

Blame the default browser styles. They make <h4> roughly the size of body text and <h5> and <h6> smaller still, though bold. That is only default CSS. Set the size you want, for example h4{font-size:1.1rem}, and keep the level that matches the document structure. The Colors and Fonts lesson shows how to set font sizes, so you can change the look and leave the level alone.

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.<h3>A subsection heading inside an h2 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.

<h4> Heading level 4