Verificação HTML: O elemento "h6" não deve aparecer como descendente do elemento "th".

Sobre este problema HTML

O elemento <th> já carrega significado semântico como uma célula de cabeçalho de tabela. Colocar um elemento de cabeçalho como <h6> dentro dele cria um conflito na estrutura semântica do documento. Leitores de ecrã e outras tecnologias assistivas usam cabeçalhos para construir um esboço navegável da página, e também interpretam elementos <th> como cabeçalhos de tabela. Aninhar um dentro do outro produz uma estrutura confusa e redundante que pode enganar as tecnologias assistivas sobre a organização da página e o significado da tabela.

De acordo com o padrão HTML vivo da WHATWG, o modelo de conteúdo para <th> é “conteúdo de fluxo, mas sem descendentes header, footer, conteúdo de secção ou conteúdo de cabeçalho.” Isto significa que <h1>, <h2>, <h3>, <h4>, <h5> e <h6> são todos explicitamente não permitidos dentro de <th>.

As pessoas frequentemente cometem este erro quando tentam estilizar visualmente o texto do cabeçalho da tabela para parecer mais negrito ou maior. Como as células <th> já são renderizadas a negrito por defeito na maioria dos navegadores, e CSS dá-lhe controlo total sobre o tamanho da fonte, peso e aparência, não há necessidade de usar elementos de cabeçalho para estilização visual dentro dos cabeçalhos de tabela.

Como corrigir

Remova o elemento de cabeçalho de dentro do <th> e coloque o texto diretamente dentro do <th>.
Use CSS se precisar que o texto do cabeçalho da tabela apareça maior ou estilizado de forma diferente.
Use um elemento <caption> se o cabeçalho era suposto servir como título para a tabela, ou coloque um elemento de cabeçalho antes da <table>.

Exemplos

❌ Incorreto: Cabeçalho 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>

Isto desencadeia o erro de validação porque elementos <h6> são descendentes de elementos <th>.

✅ Correto: Texto simples dentro de `<th>`

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

O elemento <th> já é semanticamente um cabeçalho, então nenhuma tag de cabeçalho adicional é necessária.

✅ Correto: `<th>` estilizado com CSS

Se precisar que as células de cabeçalho tenham uma aparência visual específica, use 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>

✅ Correto: Usar `<caption>` para título de tabela

Se o cabeçalho era pretendido como título para toda a tabela, use o elemento <caption> em vez disso:

<table>
  <caption>Monthly Revenue</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$500</td>
  </tr>
</table>

O elemento <caption> é a forma semanticamente correta de fornecer um título para uma tabela. É anunciado pelos leitores de ecrã e associado diretamente à tabela, dando aos utilizadores o contexto adequado. Também pode colocar um cabeçalho antes do elemento <table> se um <caption> não se adequar às suas necessidades de layout.