Verificação HTML: Nenhum elemento "p" no âmbito, mas foi encontrada uma etiqueta de fim "p".

Sobre este problema HTML

A especificação HTML define <p> como um elemento que só pode conter conteúdo frásico — essencialmente elementos inline como <span>, <a>, <strong>, <em>, e texto. Quando o analisador encontra um elemento de nível de bloco (como <div>, <ul>, <ol>, <table>, <blockquote>, ou outro <p>) dentro de um <p>, fecha automaticamente o elemento <p> antes do elemento de nível de bloco. Este fecho implícito significa que uma etiqueta </p> que aparece após o elemento de nível de bloco não tem um <p> aberto correspondente para fechar.

Compreender este comportamento é importante porque pode levar a estruturas DOM inesperadas. Os navegadores ainda renderizarão a página, mas a árvore DOM real pode diferir do que você pretendia, potencialmente afetando o estilo CSS e a manipulação DOM do JavaScript. Também sinaliza problemas estruturais na sua marcação que podem prejudicar a acessibilidade, uma vez que as tecnologias assistivas dependem de uma árvore de documento bem formada.

Existem três causas comuns deste erro:

Etiquetas de fecho duplicadas — Um erro de digitação simples onde </p> aparece duas vezes.
Elementos de nível de bloco dentro de <p> — Aninhar um <div>, <ul>, <table>, ou elemento similar dentro de um parágrafo faz com que o navegador feche implicitamente o <p> antes do elemento de bloco, deixando o </p> explícito órfão.
Etiquetas mal combinadas ou desordenadas — Outros erros de aninhamento que deixam um </p> sem uma etiqueta de abertura correspondente.

Exemplos

Etiqueta de fecho duplicada

O caso mais simples — um </p> extra sem etiqueta de abertura correspondente:

<!-- ❌ Mau: etiqueta de fim duplicada -->

<p>Algum texto.</p></p>

<!-- ✅ Bom: etiqueta de fim única -->

<p>Algum texto.</p>

Elemento de nível de bloco aninhado dentro de um parágrafo

Esta é a causa mais comum e menos óbvia. Quando um <div> (ou outro elemento de nível de bloco) aparece dentro de um <p>, o analisador fecha o <p> implicitamente:

<!-- ❌ Mau: div dentro de p causa fecho implícito -->

<p>
  Algum texto introdutório.
  <div class="highlight">Conteúdo destacado</div>
</p>

O analisador interpreta isto como:

<p>Algum texto introdutório.</p>
<div class="highlight">Conteúdo destacado</div>
</p>  ← etiqueta de fim órfã, desencadeia o erro

Para corrigir isto, substitua o <p> exterior por um <div>, ou substitua o <div> interior por um <span>:

<!-- ✅ Bom: usar div como contentor exterior -->

<div>
  <p>Algum texto introdutório.</p>
  <div class="highlight">Conteúdo destacado</div>
</div>

<!-- ✅ Bom: usar span em vez de div para estilo inline -->

<p>
  Algum texto introdutório.
  <span class="highlight">Conteúdo destacado</span>
</p>

Lista aninhada dentro de um parágrafo

As listas são elementos de nível de bloco e não podem ser aninhadas dentro de <p>:

<!-- ❌ Mau: ul dentro de p -->

<p>
  Escolha uma das seguintes:
  <ul>
    <li>Opção A</li>
    <li>Opção B</li>
  </ul>
</p>

<!-- ✅ Bom: separar o parágrafo e a lista -->

<p>Escolha uma das seguintes:</p>
<ul>
  <li>Opção A</li>
  <li>Opção B</li>
</ul>

Etiqueta de fim órfã de uma etiqueta de abertura eliminada

Às vezes durante a edição, o <p> de abertura é acidentalmente removido:

<!-- ❌ Mau: etiqueta de abertura em falta -->

<div>
  Algum texto que perdeu a sua etiqueta de abertura.
</p>
</div>

<!-- ✅ Bom: restaurar a etiqueta de abertura ou remover a etiqueta de fecho -->

<div>
  <p>Algum texto com a sua etiqueta de abertura restaurada.</p>
</div>

Ao depurar este erro, observe o número da linha reportado pelo validador e trace para trás. Se você vir um </p> nessa linha, verifique se existe um <p> de abertura válido para ele, e verifique que nenhum elemento de nível de bloco entre as etiquetas de abertura e fecho poderia ter causado um fecho implícito.