# Heading cannot be a child of another heading.

> Canonical HTML version: https://rocketvalidator.com/html-validation/heading-cannot-be-a-child-of-another-heading
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

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

```html
<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:

```html
<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

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

### ❌ Using nested headings for visual hierarchy inside a heading

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

### ✅ Using a `span` for supplementary text within a heading

```html
<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:

```css
.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:

```html
<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.