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

Sobre este problema HTML

O elemento th foi especificamente criado para representar uma célula de cabeçalho numa tabela. Ele inerentemente transmite semântica de cabeçalho aos navegadores, leitores de ecrã e outras tecnologias assistivas. Quando coloca um elemento de cabeçalho como h3 dentro de um th, está a criar um conflito estrutural — o conteúdo está simultaneamente a atuar como cabeçalho de tabela e como cabeçalho de secção do documento. A especificação HTML restringe o modelo de conteúdo de th a “conteúdo de fluxo, mas sem descendentes de conteúdo header, footer, de seccionamento ou de cabeçalho.”

Isto é importante por várias razões:

Acessibilidade: Os leitores de ecrã usam elementos de cabeçalho para construir um esboço do documento e permitir que os utilizadores naveguem entre secções. Um cabeçalho enterrado dentro de uma célula de cabeçalho de tabela interrompe esta navegação, criando confusão sobre a estrutura da página. O elemento th já comunica o seu papel como cabeçalho através da semântica da própria tabela.
Estrutura do documento: Os cabeçalhos definem a estrutura hierárquica de um documento. Colocá-los dentro de células de tabela implica que uma nova secção do documento começa dentro da tabela, o que quase nunca é o significado pretendido.
Conformidade com padrões: Os navegadores podem lidar com este aninhamento inválido de forma inconsistente, levando a renderização imprevisível ou representações na árvore de acessibilidade.

A correção é simples: remova o elemento de cabeçalho de dentro do th. Se o texto dentro do th precisar de ser visualmente maior ou mais negrito, aplique estilos CSS diretamente ao elemento th ou use um span com uma classe. Se o cabeçalho pretendia titular a tabela inteira, mova-o para fora da tabela ou use o elemento caption.

Exemplos

❌ Incorreto: cabeçalho dentro de `th`

<table>
  <tr>
    <th>Mês</th>
    <th><h3>Receita</h3></th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>€500</td>
  </tr>
</table>

O h3 dentro do segundo th desencadeia o erro de validação.

✅ Corrigido: remover o cabeçalho, usar texto simples

<table>
  <tr>
    <th>Mês</th>
    <th>Receita</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>€500</td>
  </tr>
</table>

O elemento th já comunica que “Receita” é um cabeçalho. Nenhum elemento de cabeçalho é necessário.

✅ Corrigido: usar CSS para estilo visual

Se o cabeçalho foi usado para fazer o texto parecer maior ou com estilo diferente, aplique CSS ao th em vez disso:

<table>
  <tr>
    <th>Mês</th>
    <th class="prominent">Receita</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>€500</td>
  </tr>
</table>

<style>
  .prominent {
    font-size: 1.2em;
    font-weight: bold;
  }
</style>

✅ Corrigido: usar `caption` para título da tabela

Se o cabeçalho pretendia descrever a tabela inteira, use o elemento caption:

<table>
  <caption>Receita Mensal</caption>
  <tr>
    <th>Mês</th>
    <th>Receita</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>€500</td>
  </tr>
</table>

O elemento caption é a forma semanticamente correta de fornecer um título ou descrição para uma tabela. Pode estilizá-lo com CSS para corresponder à aparência de um cabeçalho. Se ainda precisar de um cabeçalho no esboço do documento para preceder a tabela, coloque-o antes do elemento table:

<h3>Relatório de Receita</h3>
<table>
  <tr>
    <th>Mês</th>
    <th>Receita</th>
  </tr>
  <tr>
    <td>Janeiro</td>
    <td>€500</td>
  </tr>
</table>

Esta abordagem mantém a estrutura do documento limpa enquanto mantém a semântica adequada da 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).