Etiqueta p en HTML: cómo crear párrafos correctamente

La etiqueta <p> representa un párrafo de texto y contenido de frase, como enlaces o palabras con énfasis. Sirve para separar unidades de texto relacionadas: úsala para la introducción de una lección, una explicación o cada párrafo de una noticia. El significado de párrafo permanece aunque cambies su apariencia con CSS.

Ejemplo mínimo: crear dos párrafos

<p>HTML describe la estructura de una página.</p>
<p>CSS define su presentación.</p>

Se forman dos párrafos. Normalmente aparecen como bloques separados; el margen predeterminado depende de los estilos del navegador y del sitio. El salto de línea escrito entre las etiquetas organiza el código, pero las dos unidades de párrafo las crean los elementos <p>.

Para probarlo, copia el fragmento dentro del <body> del documento completo del ejemplo práctico, sustituyendo su contenido. Si retiras ambas parejas de etiquetas y dejas un espacio entre las frases, ya no habrá elementos de párrafo y el texto podrá aparecer seguido.

Sintaxis y contexto válido

La apertura <p> inicia el elemento y </p> lo termina. Escríbelas explícitamente para que se vea dónde empieza y acaba cada párrafo. <p> no es un elemento vacío: <p /> no lo autocierra en HTML.

Puedes colocarlo donde se admita contenido de flujo, por ejemplo dentro de <body>, <main>, <article>, <section> o <li>. No directamente dentro de <ul>: allí los elementos de la lista deben ser <li>. El estándar también permite <p> como hijo de <hgroup>.

En ciertos contextos, HTML permite omitir </p>, por ejemplo cuando sigue inmediatamente otro <p> o un <div>. Esa posibilidad tiene condiciones; no equivale a dejar abierto cualquier elemento. La definición normativa de <p> recoge su contexto, contenido y reglas de omisión. En ejemplos de aprendizaje conviene conservar los cierres.

Qué puede ir dentro de p

Su contenido debe ser contenido de frase: texto y elementos que forman parte de esa unidad. Un enlace y una indicación importante son válidos:

<p>Consulta <a href="#ejercicio">el ejercicio</a> y <strong>guarda tu archivo</strong>.</p>
<h2 id="ejercicio">Ejercicio</h2>

También puedes usar <em>, <span> o <code> respetando sus propias restricciones. Una lista, un encabezado, otro <p> o un <div> no caben dentro de <p>; deben quedar fuera. Las categorías de contenido del estándar permiten comprobar esas diferencias.

Este fragmento es un error deliberado, no un modelo que copiar:

<p>Antes<div>Aviso</div>Después</p>

Al analizarlo como HTML dentro del cuerpo, el navegador cierra el párrafo antes del <div>. El texto «Después» queda fuera y el </p> final provoca un párrafo vacío. La estructura resultante equivale a:

<p>Antes</p>
<div>Aviso</div>
Después
<p></p>

Es el comportamiento de las reglas del analizador HTML en el cuerpo. Que el navegador repare el código no convierte la anidación en válida. Si «Después» es otro párrafo, escribe:

<p>Antes</p>
<div>Aviso</div>
<p>Después</p>

Párrafos, saltos de línea y espacio visual

Usa un <p> para cada unidad de prosa. Reserva la etiqueta <br> para saltos significativos dentro de una misma unidad, como los versos o las líneas de una dirección. Los márgenes CSS ajustan la distancia entre párrafos.

Esta alternativa puede dejar un hueco, pero contiene un solo párrafo:

<p>Aprenderás a estructurar una lección.<br><br>Después practicarás con texto.</p>

Los dos <br> no expresan dos párrafos. Tampoco añadas <p></p> para fabricar espacio: añade contenido cuando haya un párrafo real y controla la presentación con CSS.

Caso práctico: introducción de una lección

Guarda este documento como leccion.html con codificación UTF-8 y ábrelo en un navegador. Incluye todo el HTML y CSS; no necesita JavaScript, servidor ni archivos adicionales.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Primera lección de HTML</title>
    <style>
      body {
        max-width: 40rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.6;
      }

      .introduccion p {
        margin: 0;
      }

      .introduccion p + p {
        margin-top: 1.25rem;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Primera lección de HTML</h1>
      <div class="introduccion">
        <p>Hoy crearás una página con <em>tus propias palabras</em>.</p>
        <p>Antes de empezar, <strong>guarda el archivo como HTML</strong>.
          Después abre <a href="#primer-ejercicio">el primer ejercicio</a>.</p>
      </div>

      <h2 id="primer-ejercicio">Primer ejercicio</h2>
      <ol>
        <li>Escribe dos párrafos sobre un tema que conozcas.</li>
        <li>Abre el archivo y comprueba que sean dos unidades distintas.</li>
      </ol>
    </main>
  </body>
</html>

La introducción tiene dos párrafos. <em> enfatiza una parte de la primera frase y <strong> marca la importancia de guardar el archivo; normalmente se ven en cursiva y negrita. El enlace lleva al encabezado «Primer ejercicio», que existe en el mismo documento.

La primera regla elimina los márgenes propios de esos párrafos. El selector .introduccion p + p aplica margin-top al párrafo que sigue a otro: aquí, el segundo. Así queda una separación de 1.25rem entre sus cajas. line-height controla la altura de las líneas dentro del texto; los márgenes CSS controlan su separación exterior.

Prueba estos cambios por separado:

1. Cambia margin-top: 1.25rem a margin-top: 2rem: aumenta el espacio sin añadir párrafos.
2. Retira el <style>: siguen existiendo dos párrafos, con la presentación predeterminada del navegador.
3. Sustituye las dos parejas de <p> por <div>: seguirán siendo bloques por defecto, pero ya no tendrán significado de párrafo y esas reglas CSS no los seleccionarán.
4. Pulsa Tab hasta el enlace y Enter para seguirlo. Reduce el ancho de la ventana: el texto se ajusta sin introducir <br> manualmente.

Atributos y accesibilidad

<p> no tiene atributos específicos vigentes. Admite atributos globales: class permite seleccionarlo con CSS; id identifica un elemento para enlaces como href="#resumen", siempre que exista ese ID y sea único en el documento. lang puede indicar el idioma de un párrafo que difiere del resto.

style es un atributo global; margin y text-align son propiedades CSS. Una propiedad DOM de JavaScript, como textContent, pertenece a la interfaz del elemento y no es un atributo específico de <p>.

El antiguo atributo align es obsoleto. Para centrar un párrafo con class="aviso", utiliza .aviso { text-align: center; } en tu CSS.

Los párrafos reales ayudan a organizar la lectura y permiten navegación por párrafos en tecnologías de asistencia que la ofrecen. Los párrafos vacíos pueden añadir paradas o anuncios sin contenido. MDN explica esta consecuencia de accesibilidad; la experiencia concreta depende del navegador y del lector de pantalla. Un párrafo ordinario no necesita un rol ARIA ni entrar en el recorrido de Tab.

Preguntas y errores frecuentes

¿Puedo meter un div en p?

No. El analizador cierra el párrafo antes del <div> en el caso mostrado. Separa los elementos o usa un <span> si solo necesitas agrupar un fragmento de frase sin significado adicional. Tampoco anides párrafos ni pongas una lista dentro de ellos.

¿Cómo cambio el espacio entre párrafos?

Con margin en CSS, como en el ejemplo práctico. Si el cambio no se ve, inspecciona los estilos calculados: comprueba que el selector coincida y que otra regla no lo sobrescriba. Los márgenes verticales de bloques pueden colapsar; no siempre se suman. El ejemplo pone a cero ambos márgenes y asigna solo el superior del segundo párrafo.

¿Cuándo elijo p, div, span o strong?

Elige <p> para un párrafo, la etiqueta <div> para un contenedor genérico de varios bloques y la etiqueta <span> para agrupar una parte de una frase. La etiqueta <strong> marca importancia dentro del texto y puede ir en un párrafo; no sustituye su estructura. Para un título, utiliza un encabezado, no un <p> al que solo aumentas el tamaño.

Compatibilidad y fuentes

Consultado el 3 de octubre de 2026: <p> tiene soporte en los motores actuales de Chrome, Edge, Firefox y Safari, según la referencia de compatibilidad de MDN y los datos enlazados desde el estándar. Los ejemplos usan HTML y CSS básicos y mantienen su contenido y enlace sin JavaScript.

La fuente normativa para significado, contenido y sintaxis es el HTML Living Standard sobre <p>. La referencia de MDN sobre <p> complementa las reglas con recomendaciones de presentación y accesibilidad.