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

Acerca de este problema HTML

El elemento <th> ya tiene significado semántico como celda de encabezado de tabla. Colocar un elemento de encabezado como <h6> dentro de él crea un conflicto en la estructura semántica del documento. Los lectores de pantalla y otras tecnologías de asistencia usan los encabezados para construir un esquema navegable de la página, y también interpretan los elementos <th> como encabezados de tabla. Anidar uno dentro del otro produce una estructura confusa y redundante que puede confundir a las tecnologías de asistencia sobre la organización de la página y el significado de la tabla.

Según el estándar HTML vivo de WHATWG, el modelo de contenido para <th> es “contenido de flujo, pero sin descendientes header, footer, 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>.

Las personas comúnmente cometen este error cuando tratan de estilizar visualmente el texto del encabezado de tabla para que se vea más negrito o más grande. Dado que las celdas <th> ya se renderizan en negrita por defecto en la mayoría de navegadores, y CSS te da control total sobre el tamaño de fuente, peso y apariencia, no hay necesidad de usar elementos de encabezado para el estilizado visual dentro de encabezados de tabla.

Cómo solucionarlo

Elimina el elemento de encabezado del interior del <th> y coloca el texto directamente dentro del <th>.
Usa CSS si necesitas que el texto del encabezado de tabla aparezca más grande o estilizado de manera diferente.
Usa un elemento <caption> si el encabezado estaba destinado a servir como título para la tabla, o coloca un elemento de encabezado antes del <table>.

Ejemplos

❌ Incorrecto: Encabezado dentro de `<th>`

<table>
  <tr>
    <th><h6>Product</h6></th>
    <th><h6>Price</h6></th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$19.99</td>
  </tr>
</table>

Esto desencadena el error de validación porque los elementos <h6> son descendientes de elementos <th>.

✅ Correcto: Texto plano dentro de `<th>`

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

El elemento <th> ya es semánticamente un encabezado, por lo que no se necesita ninguna etiqueta de encabezado adicional.

✅ Correcto: `<th>` estilizado con CSS

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

<style>
  .table-header {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
</style>

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

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

Si el encabezado estaba destinado como título para toda la tabla, usa el elemento <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>

El elemento <caption> es la forma semánticamente correcta de proporcionar un título para una tabla. Es anunciado por los lectores de pantalla y asociado directamente con la tabla, dando a los usuarios el contexto adecuado. También puedes colocar un encabezado antes del elemento <table> si un <caption> no se adapta a tus necesidades de diseño.