El elemento “h4” no debe aparecer como descendiente del elemento “th”.

El elemento th ya tiene significado semántico como celda de encabezado de tabla. Anidar un elemento de encabezado como h4 dentro de él crea un conflicto en el esquema del documento y la estructura semántica. Los lectores de pantalla y otras tecnologías de asistencia tratan los encabezados y los encabezados de tabla como puntos de navegación distintos, por lo que combinarlos puede confundir a los usuarios que dependen de estas herramientas para entender la estructura de la página. Un encabezado enterrado dentro de una celda de tabla puede romper la jerarquía de encabezados esperada, haciendo más difícil que los usuarios naveguen por encabezados.

Según la especificación HTML, el modelo de contenido de th es “contenido de flujo, pero sin descendientes de contenido de encabezado, pie de página, contenido de sección o contenido de encabezado”. Esto significa que h1, h2, h3, h4, h5 y h6 están todos explícitamente prohibidos dentro de th.

La razón por la que los desarrolladores a menudo colocan encabezados dentro de th es para lograr un estilo visual específico — texto más grande y en negrita. Pero los elementos th ya se renderizan en negrita por defecto en la mayoría de navegadores, y cualquier estilo adicional debe manejarse con CSS en lugar de reutilizar elementos de encabezado.

Cómo solucionarlo

1. Elimina el elemento de encabezado de dentro del th y usa el texto directamente.
2. Estiliza con CSS si necesitas que el contenido del th se vea diferente al estilo por defecto.
3. Mueve el encabezado fuera de la tabla si sirve como título o leyenda para la tabla. Considera usar el elemento <caption> para títulos de tabla.

Ejemplos

❌ Incorrecto: Encabezado dentro de th

<table>
  <tr>
    <th><h4>Product</h4></th>
    <th><h4>Price</h4></th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$25</td>
  </tr>
</table>

Esto desencadena el error de validación porque los elementos h4 no están permitidos como descendientes de th.

✅ Corregido: Texto plano en th

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

La solución más simple — solo elimina las etiquetas de encabezado. El elemento th ya transmite que estas celdas son encabezados.

✅ Corregido: Usando CSS para estilo personalizado

Si necesitas que las celdas de encabezado tengan una apariencia visual específica, usa CSS:

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

<style>
  .styled-header {
    font-size: 1.2em;
    text-transform: uppercase;
  }
</style>

✅ Corregido: Moviendo el encabezado fuera y usando caption

Si el encabezado estaba destinado a servir como título para la tabla, usa el elemento <caption> en su lugar:

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

El elemento <caption> está diseñado específicamente para etiquetar tablas y es bien compatible con las tecnologías de asistencia. También puedes colocar un encabezado antes de la tabla si se ajusta a la jerarquía de encabezados de tu documento:

<h4>Product Pricing</h4>
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$25</td>
  </tr>
</table>

Ambos enfoques mantienen tu HTML válido mientras preservan la semántica clara tanto para usuarios visuales como para tecnologías de asistencia.

Más información:

MDN Reference

MDN - The Table Header element

→

MDN Reference

MDN - h1 to h6 - The HTML Section Heading elements

→