Validación HTML: No hay un elemento "p" en el ámbito pero se encuentra una etiqueta de cierre "p".

Acerca de este problema HTML

La especificación HTML define <p> como un elemento que solo puede contener contenido de fraseo — esencialmente elementos inline como <span>, <a>, <strong>, <em>, y texto. Cuando el analizador encuentra un elemento de nivel de bloque (como <div>, <ul>, <ol>, <table>, <blockquote>, u otro <p>) dentro de un <p>, automáticamente cierra el elemento <p> antes del elemento de nivel de bloque. Este cierre implícito significa que una etiqueta </p> que aparece después del elemento de nivel de bloque no tiene un <p> de apertura correspondiente para cerrar.

Entender este comportamiento es importante porque puede llevar a estructuras DOM inesperadas. Los navegadores seguirán renderizando la página, pero el árbol DOM real puede diferir de lo que pretendías, afectando potencialmente el estilado CSS y la manipulación DOM de JavaScript. También señala problemas estructurales en tu marcado que pueden dañar la accesibilidad, ya que las tecnologías asistivas dependen de un árbol de documento bien formado.

Hay tres causas comunes de este error:

Etiquetas de cierre duplicadas — Un simple error tipográfico donde </p> aparece dos veces.
Elementos de nivel de bloque dentro de <p> — Anidar un <div>, <ul>, <table>, o elemento similar dentro de un párrafo hace que el navegador cierre implícitamente el <p> antes del elemento de bloque, dejando huérfano el </p> explícito.
Etiquetas desemparejadas o mal ordenadas — Otros errores de anidación que dejan un </p> sin la correspondiente etiqueta de apertura.

Ejemplos

Etiqueta de cierre duplicada

El caso más simple — un </p> extra sin etiqueta de apertura correspondiente:

<!-- ❌ Malo: etiqueta de fin duplicada -->

<p>Algo de texto.</p></p>

<!-- ✅ Bueno: etiqueta de fin única -->

<p>Algo de texto.</p>

Elemento de nivel de bloque anidado dentro de un párrafo

Esta es la causa más común y menos obvia. Cuando un <div> (u otro elemento de nivel de bloque) aparece dentro de un <p>, el analizador cierra el <p> implícitamente:

<!-- ❌ Malo: div dentro de p causa cierre implícito -->

<p>
  Algo de texto introductorio.
  <div class="highlight">Contenido resaltado</div>
</p>

El analizador interpreta esto como:

<p>Algo de texto introductorio.</p>
<div class="highlight">Contenido resaltado</div>
</p>  ← etiqueta de fin huérfana, dispara el error

Para arreglar esto, o reemplaza el <p> externo con un <div>, o reemplaza el <div> interno con un <span>:

<!-- ✅ Bueno: usar div como contenedor externo -->

<div>
  <p>Algo de texto introductorio.</p>
  <div class="highlight">Contenido resaltado</div>
</div>

<!-- ✅ Bueno: usar span en lugar de div para estilado inline -->

<p>
  Algo de texto introductorio.
  <span class="highlight">Contenido resaltado</span>
</p>

Lista anidada dentro de un párrafo

Las listas son elementos de nivel de bloque y no pueden ser anidadas dentro de <p>:

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

<p>
  Elige una de las siguientes:
  <ul>
    <li>Opción A</li>
    <li>Opción B</li>
  </ul>
</p>

<!-- ✅ Bueno: separar el párrafo y la lista -->

<p>Elige una de las siguientes:</p>
<ul>
  <li>Opción A</li>
  <li>Opción B</li>
</ul>

Etiqueta de fin huérfana por una etiqueta de apertura eliminada

A veces durante la edición, el <p> de apertura se elimina accidentalmente:

<!-- ❌ Malo: etiqueta de apertura faltante -->

<div>
  Algo de texto que perdió su etiqueta de apertura.
</p>
</div>

<!-- ✅ Bueno: restaurar la etiqueta de apertura o eliminar la de cierre -->

<div>
  <p>Algo de texto con su etiqueta de apertura restaurada.</p>
</div>

Cuando depures este error, mira el número de línea reportado por el validador y rastrea hacia atrás. Si ves un </p> en esa línea, verifica si hay un <p> de apertura válido para él, y verifica que no haya elementos de nivel de bloque entre las etiquetas de apertura y cierre que pudieran haber causado un cierre implícito.