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

Acerca de este problema HTML

La especificación HTML define un modelo de contenido estricto para el elemento th: acepta contenido de flujo, pero excluye específicamente header, footer, contenido de sección y contenido de encabezado (h1–h6). Esta restricción existe porque los elementos th son encabezados en sí mismos — describen los datos en su fila o columna correspondiente. Colocar un elemento de encabezado dentro de un th crea un conflicto en el esquema del documento y la estructura semántica.

Esto es importante por varias razones:

Accesibilidad: Los lectores de pantalla usan encabezados para construir un esquema de documento navegable. Los encabezados enterrados dentro de celdas de encabezado de tabla pueden confundir a la tecnología de asistencia, haciendo más difícil para los usuarios entender la estructura de la página y navegar entre secciones.
Esquema del documento: Los elementos de encabezado definen la estructura jerárquica del contenido de un documento. Cuando los encabezados aparecen dentro de celdas de tabla, interrumpen esta jerarquía y crean secciones inesperadas, a menudo sin sentido, en el esquema.
Cumplimiento de estándares: Los navegadores pueden manejar este anidamiento inválido de manera inconsistente, y el validador de W3C lo marcará como un error.

Una razón común por la que los desarrolladores colocan encabezados en celdas th es para lograr un estilo visual específico — texto más grande o en negrita. El enfoque correcto es usar CSS para dar estilo al contenido del th directamente, manteniendo el marcado limpio y válido.

Cómo solucionarlo

Elimina el elemento de encabezado de dentro del th.
Mueve el encabezado por encima de la tabla si necesitas un título o encabezado de sección para la tabla.
Usa CSS para dar estilo al texto del th si necesitas una apariencia visual particular.
Usa el elemento caption si quieres proporcionar un título visible que esté semánticamente asociado con la tabla.

Ejemplos

❌ Incorrecto: Encabezado dentro de un elemento `th`

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

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

✅ Correcto: Texto plano dentro de `th`, encabezado movido fuera

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

✅ Correcto: Usando `caption` para el título de la tabla

<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 es la forma semánticamente apropiada de darle un título a una tabla. Es anunciado por los lectores de pantalla en contexto con la tabla, proporcionando una mejor experiencia que un encabezado colocado antes de la tabla.

✅ Correcto: Dar estilo a `th` con CSS para énfasis visual

Si el encabezado fue añadido puramente por efecto visual, usa CSS en su lugar:

<style>
  .prominent-header th {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
  }
</style>

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

Esto te da control total sobre la apariencia de las celdas de encabezado sin romper la estructura del documento o introducir errores de validación. Recuerda: los elementos th ya son encabezados semánticamente, así que no hay necesidad de envolver su contenido en elementos de encabezado.