HTML Guides for h5

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

<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

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

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

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