Verificação HTML: Tag de início "section" perdido.

Sobre este problema HTML

A palavra “stray” nesta mensagem de erro significa que o validador encontrou uma tag de início num local onde nenhum elemento desse tipo é permitido de acordo com a especificação HTML. O elemento <section> é conteúdo de fluxo, pelo que deve aparecer dentro do elemento <body> (ou dentro de outro elemento que aceite conteúdo de fluxo, como <main>, <article>, <div>, etc.). Quando o validador vê <section> algures onde não pode legalmente existir, marca-o como “stray”.

Existem várias causas comuns para este erro:

Conteúdo colocado após </body> ou </html>: A causa mais frequente. Existe markup extra para além das tags de fecho do corpo do documento.
Fecho prematuro do <body>: Uma tag </body> extra ou mal colocada mais cedo no documento faz com que o browser considere o body fechado, tornando qualquer <section> subsequente perdido.
Aninhamento dentro de elementos que não aceitam conteúdo de fluxo: Colocar <section> diretamente dentro de um <p>, <span>, <a>, ou outro elemento que apenas aceite conteúdo de frase. Como estes elementos não podem conter conteúdo de fluxo ao nível de bloco, o browser fecha implicitamente o pai, deixando <section> numa posição inválida.
Tags malformadas ou não fechadas: Erros de sintaxe anteriores — como um > em falta numa tag — podem alterar a compreensão do analisador sobre a árvore do documento, fazendo com que elementos subsequentes apareçam perdidos.

Isto é importante porque os browsers usam recuperação de erro quando encontram elementos perdidos, e browsers diferentes podem lidar com a recuperação de forma diferente. O seu conteúdo pode acabar fora do documento visível, ser renderizado de forma inconsistente, ou fazer com que ferramentas de acessibilidade interpretem mal a estrutura da página. Corrigir este erro garante uma renderização previsível e um documento bem formado.

Exemplos

`<section>` perdido após a tag de fecho `</body>`

Este é o cenário mais comum. Conteúdo colocado após </body> não tem lugar válido onde ir:

<!-- ❌ Incorreto: section aparece após </body> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Some content.</p>
</body>
<section>
  <h2>About</h2>
  <p>This section is stray.</p>
</section>
</html>

Mova a <section> para dentro do <body>:

<!-- ✅ Correto: section está dentro de <body> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Some content.</p>
  <section>
    <h2>About</h2>
    <p>This section is properly placed.</p>
  </section>
</body>
</html>

Tag `</body>` extra causando fecho prematuro

Uma tag de fecho duplicada pode enganar o analisador fazendo-o terminar o body mais cedo:

<!-- ❌ Incorreto: </body> extra faz com que section se torne perdido -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <div>
    <p>Main content.</p>
<!-- tag de fecho extra acidental -->

  </div>
  <section>
    <h2>Updates</h2>
    <p>This is now stray.</p>
  </section>
</body>
</html>

Remova a tag </body> extra:

<!-- ✅ Correto: single </body> no final -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
</head>
<body>
  <div>
    <p>Main content.</p>
  </div>
  <section>
    <h2>Updates</h2>
    <p>This is correctly placed now.</p>
  </section>
</body>
</html>

Aninhamento de `<section>` dentro de um elemento `<p>`

O elemento <p> apenas aceita conteúdo de frase. Quando o analisador encontra uma <section> dentro de um <p>, fecha implicitamente o <p> primeiro, o que pode deixar a <section> numa posição inesperada:

<!-- ❌ Incorreto: section aninhado dentro de um parágrafo -->

<p>
  Introduction text.
  <section>
    <h2>Details</h2>
    <p>More info here.</p>
  </section>
</p>

Separe o parágrafo e a section em irmãos:

<!-- ✅ Correto: section é um irmão, não um filho de <p> -->

<p>Introduction text.</p>
<section>
  <h2>Details</h2>
  <p>More info here.</p>
</section>

Tag não fechada causando erros subsequentes

Um parêntesis angular de fecho em falta num elemento anterior pode corromper a visão do analisador de toda a árvore do documento:

<!-- ❌ Incorreto: > em falta no </div causa problemas de análise -->

<body>
  <div>
    <p>Content here.</p>
  </div
  <section>
    <h2>Topics</h2>
    <p>This may be flagged as stray.</p>
  </section>
</body>

Corrija a tag malformada:

<!-- ✅ Correto: </div> adequadamente fechado -->

<body>
  <div>
    <p>Content here.</p>
  </div>
  <section>
    <h2>Topics</h2>
    <p>No longer stray.</p>
  </section>
</body>

Como depurar este problema

Verifique o número de linha reportado pelo validador e observe o que vem antes da tag <section> — o problema está normalmente acima dela, não na própria <section>.
Procure tags de fecho extras como </body>, </html>, ou </div> que possam fechar prematuramente um contentor.
Verifique elementos pais — certifique-se de que <section> não está aninhado dentro de <p>, <span>, <a>, <button>, ou outros elementos que apenas aceitam conteúdo de frase.
Use indentação adequada para tornar a hierarquia do documento visualmente clara. Tags mal colocadas são muito mais fáceis de detetar em código bem formatado.
Revalide após cada correção, uma vez que corrigir um erro de tag perdida resolve frequentemente múltiplos avisos relacionados.