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

Sobre este problema HTML

O elemento th foi especificamente concebido para funcionar como uma célula de cabeçalho dentro de uma tabela. Já carrega semântica implícita de cabeçalho — os leitores de ecrã anunciam o conteúdo do th como um cabeçalho ao navegar pelas células da tabela. Quando coloca um h5 (ou qualquer h1–h6) dentro de um th, está a criar um conflito: o conteúdo é simultaneamente um cabeçalho de tabela e um cabeçalho de secção do documento. Isto quebra a estrutura do esquema do documento e cria comportamento confuso para as tecnologias assistivas, que podem anunciar o conteúdo como um cabeçalho de tabela e um cabeçalho de secção.

A especificação HTML restringe o modelo de conteúdo do th a “conteúdo de fluxo, mas sem descendentes de header, footer, conteúdo de seccionamento ou conteúdo de cabeçalho.” Os elementos de cabeçalho (h1 a h6) enquadram-se no conteúdo de cabeçalho, pelo que colocar qualquer um deles dentro de um th é inválido.

Este problema surge tipicamente quando os programadores querem que o texto dentro de um th pareça um cabeçalho — maior, mais negrito ou com estilo diferente. A abordagem correta é usar CSS para estilizar o conteúdo do th diretamente, em vez de o envolver num elemento de cabeçalho.

Como corrigir

Remova o elemento de cabeçalho de dentro do th.
Mantenha o conteúdo de texto diretamente dentro do th.
Use CSS para aplicar qualquer estilo visual desejado ao elemento th.
Se o cabeçalho se destina a descrever toda a tabela (não apenas uma coluna), mova-o para fora da tabela ou use o elemento <caption>.

Exemplos

❌ Incorreto: Cabeçalho dentro de um `th`

<table>
  <tr>
    <th><h5>Product</h5></th>
    <th><h5>Price</h5></th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>

Isto desencadeia o erro de validação porque os elementos h5 estão aninhados dentro dos elementos th.

✅ Correto: Texto simples dentro do `th`, estilizado com CSS

<table>
  <tr>
    <th class="table-heading">Product</th>
    <th class="table-heading">Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>

<style>
  .table-heading {
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

Os elementos th já transmitem semântica de cabeçalho. O CSS trata da apresentação visual sem introduzir marcação inválida.

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

Se o cabeçalho se destinava a descrever a tabela como um todo, use <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>

✅ Correto: Cabeçalho colocado antes da tabela

Se precisa de um cabeçalho ao nível do documento que apresente a tabela, coloque-o do lado de fora:

<h5>Revenue per Month</h5>
<table>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$500</td>
  </tr>
</table>

Isto mantém o esquema do documento limpo e evita aninhar cabeçalhos dentro de células de tabela. A mesma regra aplica-se a todos os níveis de cabeçalho — h1, h2, h3, h4, h5 e h6 são todos igualmente inválidos dentro de elementos th (e td).