O elemento “h4” não deve aparecer como descendente do elemento “th”.

O elemento th já possui significado semântico como uma célula de cabeçalho de tabela. Aninhar um elemento de cabeçalho como h4 dentro dele cria um conflito na estrutura do documento e na estrutura semântica. Leitores de ecrã e outras tecnologias assistivas tratam cabeçalhos e cabeçalhos de tabela como marcos de navegação distintos, portanto, combiná-los pode confundir utilizadores que dependem dessas ferramentas para compreender a estrutura da página. Um cabeçalho enterrado numa célula de tabela pode quebrar a hierarquia esperada de cabeçalhos, tornando mais difícil para os utilizadores navegarem por cabeçalhos.

De acordo com a especificação HTML, o modelo de conteúdo de th é “conteúdo de fluxo, mas sem descendentes de cabeçalho, rodapé, conteúdo de seccionamento ou conteúdo de cabeçalho”. Isto significa que h1, h2, h3, h4, h5 e h6 são todos explicitamente proibidos dentro de th.

A razão pela qual os programadores frequentemente colocam cabeçalhos dentro de th é para obter um estilo visual específico — texto maior e mais negrito. Mas os elementos th já são renderizados em negrito por padrão na maioria dos navegadores, e qualquer estilização adicional deve ser tratada com CSS em vez de reutilizar elementos de cabeçalho.

Como corrigir

1. Remover o elemento de cabeçalho de dentro do th e usar o texto diretamente.
2. Estilizar com CSS se precisar que o conteúdo do th tenha uma aparência diferente da estilização padrão.
3. Mover o cabeçalho para fora da tabela se ele servir como título ou legenda para a tabela. Considere usar o elemento <caption> para títulos de tabela.

Exemplos

❌ Incorreto: Cabeçalho dentro de th

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

Isto desencadeia o erro de validação porque elementos h4 não são permitidos como descendentes de th.

✅ Corrigido: Texto simples em th

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

A correção mais simples — apenas remover as tags de cabeçalho. O elemento th já transmite que essas células são cabeçalhos.

✅ Corrigido: Usar CSS para estilização personalizada

Se precisar que as células de cabeçalho tenham uma aparência visual específica, use CSS:

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

<style>
  .styled-header {
    font-size: 1.2em;
    text-transform: uppercase;
  }
</style>

✅ Corrigido: Mover o cabeçalho para fora e usar caption

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

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

O elemento <caption> foi criado especificamente para rotular tabelas e é bem suportado por tecnologias assistivas. Você também pode colocar um cabeçalho antes da tabela se ele se adequar à hierarquia de cabeçalhos do seu documento:

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

Ambas as abordagens mantêm o seu HTML válido enquanto preservam semânticas claras tanto para utilizadores visuais quanto para tecnologias assistivas.

Saiba mais:

MDN Reference

MDN - The Table Header element

→

MDN Reference

MDN - h1 to h6 - The HTML Section Heading elements

→