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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-h1-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 has a specific role in HTML: it defines a header cell within a table. It already carries implicit heading semantics through its association with the rows or columns it describes. When you place an `h1`–`h6` element inside a `th`, you're nesting one type of heading structure inside another, which violates the HTML content model. The HTML specification explicitly excludes heading elements from the allowed content of `th`.

This causes several problems:

- **Document outline confusion**: Heading elements contribute to the document's outline and sectioning structure. Placing them inside table headers injects unexpected entries into the outline that don't represent actual document sections, making navigation unpredictable.
- **Accessibility issues**: Screen readers treat headings and table headers differently. A heading inside a `th` creates conflicting signals—assistive technology may announce the content as both a table header and a document heading, confusing users who rely on either navigation method.
- **Standards compliance**: Browsers may handle this invalid nesting inconsistently, leading to unpredictable rendering or behavior across different environments.

If your goal is to make the text inside a `th` visually larger or bolder, use CSS instead. The `th` element is already rendered bold by default in most browsers, and you can further style it with `font-size`, `font-weight`, or any other CSS property.

## Examples

### Incorrect: heading inside a `th` element

```html
<table>
  <tr>
    <th><h1>Product</h1></th>
    <th><h1>Price</h1></th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$25</td>
  </tr>
</table>
```

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

### Fixed: plain text in `th`, heading moved outside the table

```html
<h1>Product Pricing</h1>
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$25</td>
  </tr>
</table>
```

The heading now introduces the table as a whole, and the `th` elements contain plain text.

### Fixed: styling `th` with CSS instead of using headings

If you want the table headers to have a specific visual appearance, apply CSS directly to the `th` elements:

```html
<style>
  .styled-table th {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

<table class="styled-table">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$25</td>
  </tr>
</table>
```

### Fixed: using `caption` for a table title

If the heading was meant to serve as a title for the table, the `caption` element is the semantically correct choice:

```html
<table>
  <caption>Product Pricing</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$25</td>
  </tr>
</table>
```

The `caption` element is specifically designed to label a table and is properly associated with it for assistive technology. You can style it with CSS to achieve any visual appearance you need.