elemento HTML vigente

<p>

Texto y contenido

Elemento de bloque que representa un párrafo: la unidad semántica de prosa en HTML.

<p> representa un párrafo: la unidad semántica fundamental de prosa en HTML. Agrupa un bloque de texto continuo que desarrolla una idea y lo separa visualmente del contenido anterior y posterior con márgenes automáticos.

No es un contenedor genérico para “cualquier texto visible” — es específicamente para prosa corrida. Si el contenido es el título de una sección, va en un encabezado. Si es un ítem de lista, en <li>. Si es una celda de tabla, en <td>. Si es código, en <pre>/<code>. <p> es para párrafos de prosa: bloques de texto que desarrollan una idea y tienen sentido como unidad independiente.

Que <p> sea un elemento semántico y no solo visual importa en la práctica: los lectores de pantalla reconocen las pausas entre párrafos, los motores de búsqueda interpretan cada <p> como una unidad de contenido, y herramientas de accesibilidad pueden saltar de párrafo en párrafo. Usar <br><br> en lugar de <p> puede verse igual en pantalla pero pierde toda esa información estructural.

sin <p> El mate es una bebida tradicional. Se prepara con yerba y agua caliente usando una bombilla. Es muy popular en Argentina Uruguay y Paraguay. Se comparte en grupo. sin <p>: todo fluye junto con <p>: bloques separados El mate es una bebida tradicional de Argentina. Se prepara con yerba y agua caliente. ↕ margen entre párrafos

Cómo funciona

El navegador renderiza cada <p> como un bloque independiente con espacio arriba y abajo (el margin-top y margin-bottom que aplica por defecto). Ese espacio visual comunica “aquí termina una idea y empieza otra”. No necesitás agregar <br> o líneas en blanco para separar párrafos — dos <p> seguidos ya se ven separados.

El <p> también tiene semántica: le dice a los lectores de pantalla, los motores de búsqueda y cualquier herramienta que procese el documento que ese bloque es una unidad de prosa independiente.

Modelo de contenido

<p> solo acepta contenido en línea (phrasing content): texto, <em>, <strong>, <a>, <abbr>, <time>, <br>, <img>, <span>, <mark>, <small>, <sub>, <sup> y similares. No puede contener elementos de bloque.

Esto tiene una consecuencia importante: si ponés un <div>, <ul>, <h2> u otro bloque dentro de un <p>, el navegador cierra el <p> automáticamente antes del bloque. El HTML queda mal formado aunque el navegador lo intente recuperar.

<!-- ❌ Mal: div adentro de p cierra el párrafo implícitamente -->
<p>Texto con un bloque adentro: <div>esto rompe el p</div></p>

<!-- ✅ Bien: el contenido de bloque va fuera del p -->
<p>Texto del párrafo.</p>
<div>Contenido de bloque aparte.</div>

Su display por defecto es block. Puede ir en cualquier lugar donde se admita contenido de flujo: <body>, <section>, <article>, <aside>, <header>, <footer>, <li>, <td>, etc.

Sintaxis

<p>El mate es una bebida tradicional de Argentina, Uruguay y Paraguay.</p>

<p>
  Se prepara con yerba mate y agua caliente, usando una calabaza
  y una bombilla como utensilios. Se comparte en grupo.
</p>

Atributos

<p> no tiene atributos propios. Acepta los atributos globales de HTML (class, id, lang, data-*, etc.).

Accesibilidad

Los lectores de pantalla reconocen <p> como una unidad de párrafo. En algunas implementaciones, hay pausas cortas entre párrafos al leer el documento completo, lo que mejora la comprensión auditiva. No hay un rol ARIA implícito especial: es simplemente contenido.

Ejemplo realista

<article>
  <h1>El mate en Argentina</h1>

  <p>El mate es mucho más que una bebida: es un ritual de hospitalidad y encuentro.</p>

  <p>
    Se prepara vertiendo agua caliente (entre 70 y 80 °C, nunca hirviendo) sobre
    la yerba mate. La temperatura importa: el agua demasiado caliente amarga la yerba.
  </p>

  <p>Ofrecerle mate a alguien es una invitación a quedarse y conversar.</p>
</article>

Cuándo usar <p> vs. alternativas

ContenidoElemento correcto
Prosa corrida, explicación, descripción<p>
Título de sección<h1>–<h6>
Ítem de lista<li>
Texto corto de una celda de tabla<td> (el <p> es opcional adentro)
Código fuente<pre><code>
Cita en bloque<blockquote>

Notas, gotchas e interacción

  • No uses <br><br> para separar párrafos. Dos saltos de línea consecutivos crean separación visual pero no semántica. Para dos párrafos distintos, usá dos <p>. El <br> es para saltos de línea dentro de un párrafo (como en poesía o direcciones postales).
  • El margen por defecto del navegador. Los navegadores aplican margin-top y margin-bottom al <p> (normalmente 1em). Los resets de CSS suelen normalizarlo o eliminarlo; controlalo con CSS si necesitás un espaciado específico.
  • El <p> de cierre es opcional en el HTML. El parser de HTML cierra el <p> automáticamente al encontrar ciertos elementos de bloque. Aunque el HTML sea técnicamente válido sin el </p>, siempre escribilo — hace el código más legible y previene comportamientos inesperados en edge cases.
  • <p> vacío. <p></p> es válido pero se usa erróneamente para agregar espacio visual. Si necesitás espacio, usá margin en CSS.

Vigente / legacy

<p> es parte del HTML original y está completamente vigente. El atributo align (<p align="center">) es legacy desde HTML5 — hoy se usa text-align en CSS.