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

Acerca de este problema HTML

El elemento th está específicamente diseñado para representar una celda de encabezado en una tabla. Inherentemente transmite semántica de encabezado a navegadores, lectores de pantalla y otras tecnologías de asistencia. Cuando colocas un elemento de encabezado como h3 dentro de un th, estás creando un conflicto estructural: el contenido está actuando simultáneamente como encabezado de tabla y como encabezado de sección del documento. La especificación HTML restringe el modelo de contenido de th a “contenido de flujo, pero sin descendientes de contenido header, footer, contenido de sección o contenido de encabezado.”

Esto importa por varias razones:

Accesibilidad: Los lectores de pantalla usan elementos de encabezado para construir un esquema del documento y permitir a los usuarios navegar entre secciones. Un encabezado enterrado dentro de una celda de encabezado de tabla interrumpe esta navegación, creando confusión sobre la estructura de la página. El elemento th ya comunica su papel como encabezado a través de la semántica propia de la tabla.
Estructura del documento: Los encabezados definen la estructura jerárquica de un documento. Colocarlos dentro de celdas de tabla implica que una nueva sección del documento comienza dentro de la tabla, lo que casi nunca es el significado pretendido.
Cumplimiento de estándares: Los navegadores pueden manejar este anidamiento inválido de manera inconsistente, llevando a renderizado impredecible o representaciones del árbol de accesibilidad.

La solución es directa: elimina el elemento de encabezado de dentro del th. Si el texto dentro del th necesita ser visualmente más grande o en negrita, aplica estilos CSS directamente al elemento th o usa un span con una clase. Si el encabezado estaba destinado a titular toda la tabla, muévelo fuera de la tabla o usa el elemento caption.

Ejemplos

❌ Incorrecto: encabezado dentro de `th`

<table>
  <tr>
    <th>Mes</th>
    <th><h3>Ingresos</h3></th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$500</td>
  </tr>
</table>

El h3 dentro del segundo th desencadena el error de validación.

✅ Corregido: eliminar el encabezado, usar texto plano

<table>
  <tr>
    <th>Mes</th>
    <th>Ingresos</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$500</td>
  </tr>
</table>

El elemento th ya comunica que “Ingresos” es un encabezado. No se necesita ningún elemento de encabezado.

✅ Corregido: usar CSS para el estilo visual

Si el encabezado se usaba para hacer que el texto se viera más grande o con un estilo diferente, aplica CSS al th en su lugar:

<table>
  <tr>
    <th>Mes</th>
    <th class="prominent">Ingresos</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$500</td>
  </tr>
</table>

<style>
  .prominent {
    font-size: 1.2em;
    font-weight: bold;
  }
</style>

✅ Corregido: usar `caption` para un título de tabla

Si el encabezado estaba destinado a describir toda la tabla, usa el elemento caption:

<table>
  <caption>Ingresos mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ingresos</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$500</td>
  </tr>
</table>

El elemento caption es la forma semánticamente correcta de proporcionar un título o descripción para una tabla. Puedes darle estilo con CSS para que coincida con la apariencia de un encabezado. Si todavía necesitas un encabezado en el esquema del documento que preceda a la tabla, colócalo antes del elemento table:

<h3>Reporte de ingresos</h3>
<table>
  <tr>
    <th>Mes</th>
    <th>Ingresos</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$500</td>
  </tr>
</table>

Este enfoque mantiene limpia la estructura del documento mientras conserva la semántica adecuada 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).