# The element “h5” must not appear as a descendant of the “th” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-h5-must-not-appear-as-a-descendant-of-the-th-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `th` element is specifically designed to act as a header cell within a table. It already carries implicit heading semantics — screen readers announce `th` content as a header when navigating table cells. When you place an `h5` (or any `h1`–`h6`) inside a `th`, you're creating a conflict: the content is simultaneously a table header and a document section heading. This breaks the document's outline structure and creates confusing behavior for assistive technologies, which may announce the content as both a table header and a section heading.

The HTML specification restricts the content model of `th` to "flow content, but with no `header`, `footer`, sectioning content, or heading content descendants." Heading elements (`h1` through `h6`) fall under heading content, so placing any of them inside a `th` is invalid.

This issue typically arises when developers want the text inside a `th` to look like a heading — larger, bolder, or styled differently. The correct approach is to use CSS to style the `th` content directly, rather than wrapping it in a heading element.

## How to Fix It

1. **Remove the heading element** from inside the `th`.
2. **Keep the text content** directly inside the `th`.
3. **Use CSS** to apply any desired visual styling to the `th` element.
4. If the heading is meant to describe the entire table (not just a column), **move it outside the table** or use the `<caption>` element.

## Examples

### ❌ Incorrect: Heading inside a `th`

```html
<table>
  <tr>
    <th><h5>Product</h5></th>
    <th><h5>Price</h5></th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>
```

This triggers the validation error because `h5` elements are nested inside `th` elements.

### ✅ Correct: Plain text inside `th`, styled with CSS

```html
<table>
  <tr>
    <th class="table-heading">Product</th>
    <th class="table-heading">Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>

<style>
  .table-heading {
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>
```

The `th` elements already convey header semantics. CSS handles the visual presentation without introducing invalid markup.

### ✅ Correct: Using `<caption>` for a table title

If the heading was meant to describe the table as a whole, use `<caption>` instead:

```html
<table>
  <caption>Monthly Revenue</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$500</td>
  </tr>
</table>
```

### ✅ Correct: Heading placed before the table

If you need a document-level heading that introduces the table, place it outside:

```html
<h5>Revenue per Month</h5>
<table>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$500</td>
  </tr>
</table>
```

This keeps the document outline clean and avoids nesting headings inside table cells. The same rule applies to all heading levels — `h1`, `h2`, `h3`, `h4`, `h5`, and `h6` are all equally invalid inside `th` (and `td`) elements.