<h4>

<h4> is a level-4 section heading. It identifies a subsection beneath an h3 section. Choose its rank from the document’s structure, then change its appearance with CSS.

A heading in context

The example uses real heading elements inside its own document. They do not become headings in this article.

<h1>Page: gardening</h1>
<h2>Section: planting</h2>
<h3>Subsection: vegetables</h3>
<h4>Topic: tomatoes</h4>
<p>The text belonging to this section follows its heading.</p>

A practical use

Use <h4> for a subsection beneath an h3 section. A heading should describe the content that follows it. A screen-reader user can often browse a page by heading, so “Tomato seedlings” is more useful than an unrelated marketing phrase.

Placement and attributes

Headings are flow content with phrasing content inside them. Do not nest one heading inside another. They accept global attributes such as id, which can make a section linkable. An ordinary heading is not a keyboard focus stop by default.

Common mistakes

Do not choose a heading because its default font size looks right. Use font-size for appearance and keep heading levels in order when opening nested sections. Returning from a subsection to a higher-level section is normal.

A section wrapper does not automatically lower an h1 to an h2. One main h1 with subordinate headings gives ordinary article pages a clear structure. A styled div does not provide the same semantics.

Check the structure

Inspect this document’s accessibility tree or heading list. Check the levels and whether their names would let someone find the right section without reading the entire page.

Continue to the next heading rank for a nested subsection.

Source

MDN: heading elements explains ranks, placement, and accessible document structure.