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

Acerca de este problema HTML

El elemento th tiene un rol específico en HTML: define una celda de encabezado dentro de una tabla. Ya lleva implícita la semántica de encabezado a través de su asociación con las filas o columnas que describe. Cuando colocas un elemento h1–h6 dentro de un th, estás anidando un tipo de estructura de encabezado dentro de otro, lo que viola el modelo de contenido HTML. La especificación HTML excluye explícitamente los elementos de encabezado del contenido permitido de th.

Esto causa varios problemas:

Confusión en el esquema del documento: Los elementos de encabezado contribuyen al esquema y estructura de secciones del documento. Colocarlos dentro de encabezados de tabla inyecta entradas inesperadas en el esquema que no representan secciones reales del documento, haciendo la navegación impredecible.
Problemas de accesibilidad: Los lectores de pantalla tratan los encabezados y los encabezados de tabla de manera diferente. Un encabezado dentro de un th crea señales conflictivas—la tecnología asistiva puede anunciar el contenido como encabezado de tabla y encabezado de documento, confundiendo a los usuarios que dependen de cualquiera de los métodos de navegación.
Cumplimiento de estándares: Los navegadores pueden manejar este anidamiento inválido de manera inconsistente, llevando a renderizado o comportamiento impredecible en diferentes entornos.

Si tu objetivo es hacer que el texto dentro de un th sea visualmente más grande o más grueso, usa CSS en su lugar. El elemento th ya se renderiza en negrita por defecto en la mayoría de navegadores, y puedes estilizarlo adicionalmente con font-size, font-weight, o cualquier otra propiedad CSS.

Ejemplos

Incorrecto: encabezado dentro de un elemento `th`

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

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

Corregido: texto plano en `th`, encabezado movido fuera de la tabla

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

El encabezado ahora introduce la tabla como un todo, y los elementos th contienen texto plano.

Corregido: estilos en `th` con CSS en lugar de usar encabezados

Si quieres que los encabezados de tabla tengan una apariencia visual específica, aplica CSS directamente a los elementos th:

<style>
  .styled-table th {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

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

Corregido: usando `caption` para el título de la tabla

Si el encabezado estaba destinado a servir como título para la tabla, el elemento caption es la elección semánticamente correcta:

<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á específicamente diseñado para etiquetar una tabla y está apropiadamente asociado con ella para la tecnología asistiva. Puedes estilizarlo con CSS para lograr cualquier apariencia visual que necesites.