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

Sobre este problema HTML

A especificação HTML define um modelo de conteúdo rigoroso para o elemento th: aceita conteúdo de fluxo, mas exclui especificamente header, footer, conteúdo de seccionamento e conteúdo de cabeçalho (h1–h6). Esta restrição existe porque elementos th são eles próprios cabeçalhos — eles descrevem os dados na sua linha ou coluna correspondente. Colocar um elemento de cabeçalho dentro de um th cria um conflito no esboço do documento e na estrutura semântica.

Isto é importante por várias razões:

Acessibilidade: Leitores de ecrã usam cabeçalhos para construir um esboço navegável do documento. Cabeçalhos enterrados dentro de células de cabeçalho de tabela podem confundir a tecnologia assistiva, tornando mais difícil para os utilizadores compreenderem a estrutura da página e navegarem entre secções.
Esboço do documento: Elementos de cabeçalho definem a estrutura hierárquica do conteúdo de um documento. Quando cabeçalhos aparecem dentro de células de tabela, eles perturbam esta hierarquia e criam secções inesperadas e muitas vezes sem sentido no esboço.
Conformidade com padrões: Browsers podem lidar com este aninhamento inválido de forma inconsistente, e o validador W3C irá marcá-lo como um erro.

Uma razão comum para os programadores colocarem cabeçalhos em células th é para conseguir um estilo visual específico — texto maior ou mais negrito. A abordagem correta é usar CSS para estilizar o conteúdo th diretamente, mantendo a marcação limpa e válida.

Como corrigir

Remova o elemento de cabeçalho de dentro do th.
Mova o cabeçalho acima da tabela se precisar de um título ou cabeçalho de secção para a tabela.
Use CSS para estilizar o texto th se precisar de uma aparência visual particular.
Use o elemento caption se quiser fornecer um título visível que seja semanticamente associado à tabela.

Exemplos

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

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

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

✅ Correto: Texto simples dentro de `th`, cabeçalho movido para fora

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

✅ Correto: Usar `caption` para o título da tabela

<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 é a forma semanticamente apropriada de dar um título a uma tabela. É anunciado por leitores de ecrã no contexto da tabela, fornecendo uma melhor experiência do que um cabeçalho colocado antes da tabela.

✅ Correto: Estilizar `th` com CSS para ênfase visual

Se o cabeçalho foi adicionado puramente para efeito visual, use CSS em vez disso:

<style>
  .prominent-header th {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
  }
</style>

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

Isto dá-lhe controlo total sobre a aparência das células de cabeçalho sem quebrar a estrutura do documento ou introduzir erros de validação. Lembre-se: elementos th já são semanticamente cabeçalhos, por isso não há necessidade de envolver o seu conteúdo em elementos de cabeçalho.