Heading cannot be a child of another heading.

According to the HTML specification, heading elements (h1–h6) have a content model of “phrasing content,” which means they can only contain inline-level elements like span, strong, em, a, and text nodes. Other heading elements are not phrasing content — they are flow content — so placing one heading inside another is invalid HTML.

This matters for several reasons. Screen readers and other assistive technologies rely on a well-formed heading hierarchy to help users navigate a page. When headings are nested inside each other, the document outline becomes broken and confusing, making it harder for users to understand the structure of the content. Browsers may also attempt to “fix” the invalid markup by auto-closing the outer heading before starting the inner one, which can produce unexpected rendering and DOM structures that differ from what you intended.

There are two common causes of this error:

1. Intentionally nesting headings for styling. Developers sometimes nest an h2 inside an h1 hoping to create a visual “main heading + subtitle” pattern. This is invalid. Instead, use separate heading elements or use a span or p element for the subtitle.

2. A missing or malformed closing tag. If you accidentally write <h3> instead of </h3> for a closing tag, the browser sees two opening h3 tags in a row. The first heading is never properly closed, and the second heading appears to be nested inside it.

Examples

❌ Heading nested inside another heading

<h1>Main heading
  <h2>Sub heading</h2>
</h1>

The h2 is a child of the h1, which is not allowed. To create a heading with a subtitle, use separate elements:

✅ Headings as siblings

<h1>Main heading</h1>
<h2>Sub heading</h2>

Or, if the subtitle should be part of a sectioned document structure:

<main>
  <h1>Main heading</h1>
  <section>
    <h2>Section heading</h2>
    <p>Paragraph content</p>
  </section>
</main>

❌ Missing closing slash causes nesting

A very common typo is forgetting the / in the closing tag:

<h3>Meet the Feebles<h3>
<h3>Bad Taste<h3>

Here, <h3>Meet the Feebles<h3> opens a second h3 instead of closing the first one. The validator sees the second h3 as a child of the first. The same problem cascades to subsequent headings.

✅ Properly closed heading tags

<h3>Meet the Feebles</h3>
<h3>Bad Taste</h3>

❌ Using nested headings for visual hierarchy inside a heading

<h1>
  Our Company
  <h3>Established 1999</h3>
</h1>

✅ Using a span for supplementary text within a heading

<h1>
  Our Company
  <span class="subtitle">Established 1999</span>
</h1>

You can then style the .subtitle class with CSS to achieve the desired visual appearance — for example, displaying it on a new line with a smaller font size:

.subtitle {
  display: block;
  font-size: 0.5em;
  font-weight: normal;
}

✅ Using the hgroup element

The hgroup element is specifically designed for grouping a heading with related content like subtitles:

<hgroup>
  <h1>Our Company</h1>
  <p>Established 1999</p>
</hgroup>

This keeps the heading hierarchy clean while semantically associating the subtitle with the heading. The hgroup element is supported in the current HTML living standard and works well with assistive technologies.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing