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

Sobre este problema HTML

O elemento th tem uma função específica no HTML: define uma célula de cabeçalho dentro de uma tabela. Já carrega semântica implícita de cabeçalho através da sua associação com as linhas ou colunas que descreve. Quando você coloca um elemento h1–h6 dentro de um th, está a aninhar um tipo de estrutura de cabeçalho dentro de outro, o que viola o modelo de conteúdo HTML. A especificação HTML exclui explicitamente elementos de cabeçalho do conteúdo permitido de th.

Isto causa vários problemas:

Confusão no esboço do documento: Elementos de cabeçalho contribuem para o esboço e estrutura de seccionamento do documento. Colocá-los dentro de cabeçalhos de tabela injeta entradas inesperadas no esboço que não representam secções reais do documento, tornando a navegação imprevisível.
Problemas de acessibilidade: Leitores de ecrã tratam cabeçalhos e cabeçalhos de tabela de forma diferente. Um cabeçalho dentro de um th cria sinais conflituosos—tecnologias assistivas podem anunciar o conteúdo tanto como cabeçalho de tabela quanto como cabeçalho de documento, confundindo utilizadores que dependem de qualquer um dos métodos de navegação.
Conformidade com padrões: Os navegadores podem lidar com este aninhamento inválido de forma inconsistente, levando a renderização ou comportamento imprevisível em diferentes ambientes.

Se o seu objetivo é tornar o texto dentro de um th visualmente maior ou mais negrito, use CSS em vez disso. O elemento th já é renderizado em negrito por padrão na maioria dos navegadores, e pode estilizá-lo ainda mais com font-size, font-weight, ou qualquer outra propriedade CSS.

Exemplos

Incorreto: cabeçalho dentro de um elemento `th`

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

Isto desencadeia o erro de validação porque elementos h1 estão aninhados dentro de elementos th.

Corrigido: texto simples no `th`, cabeçalho movido para fora da tabela

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

O cabeçalho agora introduz a tabela como um todo, e os elementos th contêm texto simples.

Corrigido: estilizar `th` com CSS em vez de usar cabeçalhos

Se quer que os cabeçalhos da tabela tenham uma aparência visual específica, aplique CSS diretamente aos elementos th:

<style>
  .styled-table th {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>

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

Corrigido: usar `caption` para um título de tabela

Se o cabeçalho era destinado a servir como título para a tabela, o elemento caption é a escolha semanticamente correta:

<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 é especificamente desenhado para rotular uma tabela e está adequadamente associado a ela para tecnologia assistiva. Pode estilizá-lo com CSS para conseguir qualquer aparência visual de que necessite.