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

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

<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

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

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

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

Learn more:

MDN Reference

MDN - The Table Header element

→

MDN Reference

MDN - h1 to h6 - The HTML Section Heading elements

→