Validación HTML: El elemento "h5" no debe aparecer como descendiente del elemento "th".

Acerca de este problema HTML

El elemento th está específicamente diseñado para actuar como una celda de encabezado dentro de una tabla. Ya lleva semántica implícita de encabezado — los lectores de pantalla anuncian el contenido de th como un encabezado al navegar por las celdas de la tabla. Cuando colocas un h5 (o cualquier h1–h6) dentro de un th, estás creando un conflicto: el contenido es simultáneamente un encabezado de tabla y un encabezado de sección del documento. Esto rompe la estructura del esquema del documento y crea comportamientos confusos para las tecnologías de asistencia, que pueden anunciar el contenido tanto como encabezado de tabla como encabezado de sección.

La especificación HTML restringe el modelo de contenido de th a “contenido de flujo, pero sin descendientes de contenido header, footer, de seccionado o de encabezado”. Los elementos de encabezado (h1 a h6) entran en la categoría de contenido de encabezado, por lo que colocar cualquiera de ellos dentro de un th es inválido.

Este problema típicamente surge cuando los desarrolladores quieren que el texto dentro de un th se vea como un encabezado — más grande, en negrita, o con un estilo diferente. El enfoque correcto es usar CSS para dar estilo al contenido del th directamente, en lugar de envolverlo en un elemento de encabezado.

Cómo solucionarlo

Elimina el elemento de encabezado de dentro del th.
Mantén el contenido de texto directamente dentro del th.
Usa CSS para aplicar cualquier estilo visual deseado al elemento th.
Si el encabezado está destinado a describir toda la tabla (no solo una columna), muévelo fuera de la tabla o usa el elemento <caption>.

Ejemplos

❌ Incorrecto: Encabezado dentro de un `th`

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

Esto desencadena el error de validación porque los elementos h5 están anidados dentro de elementos th.

✅ Correcto: Texto plano dentro del `th`, con estilo 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>

Los elementos th ya transmiten semántica de encabezado. CSS maneja la presentación visual sin introducir marcado inválido.

✅ Correcto: Usar `<caption>` para un título de tabla

Si el encabezado estaba destinado a describir la tabla en su conjunto, usa <caption> en su lugar:

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

✅ Correcto: Encabezado colocado antes de la tabla

Si necesitas un encabezado a nivel de documento que introduzca la tabla, colócalo fuera:

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

Esto mantiene el esquema del documento limpio y evita anidar encabezados dentro de las celdas de la tabla. La misma regla se aplica a todos los niveles de encabezado — h1, h2, h3, h4, h5, y h6 son todos igualmente inválidos dentro de elementos th (y td).