La etiqueta p en HTML explicada desde cero

El elemento <p> sirve para agregar párrafos en HTML a nuestra página web; simplemente para eso. Un párrafo es un bloque de texto compuesto por una o más líneas que se separa de otros párrafos mediante un espacio en blanco. Aunque es una etiqueta sencilla y básica de emplear, cuenta con múltiples formas de uso: tanto correctas como incorrectas.

Cuando empecé a escribir HTML —y lo digo con total sinceridad— la etiqueta <p> fue de las primeras que usé sin pensar demasiado… hasta que me di cuenta de que algunos navegadores hacían cosas "raras" cuando la utilizaba mal.

Desde entonces aprendí que este elemento, aunque básico, tiene reglas claras, buenas prácticas y pequeños detalles que te facilitan la vida si los conoces bien. Aquí te cuento todo lo que debes saber para usar <p> como un profesional.

… Y es que muy seguramente la etiqueta <p> es tu primer contacto con el desarrollo web… es tu Hola Mundo.

Qué es el elemento <p> en HTML

Definición y función del párrafo en HTML5

El elemento <p> representa un párrafo de texto: un bloque independiente dentro de un documento HTML. Es un elemento de nivel de bloque (block-level) y forma parte del flow content, lo que significa que ocupa todo el ancho disponible de su contenedor y genera un salto antes y después de sí mismo.

En la práctica, <p> sirve para agrupar ideas o fragmentos de texto relacionados, exactamente igual que harías al redactar un documento de texto normal. Esto también tiene implicaciones semánticas importantes: los motores de búsqueda y los lectores de pantalla entienden cada <p> como una unidad de contenido con sentido propio.

Cómo lo interpretan los navegadores (comportamiento por defecto)

Los navegadores aplican automáticamente las siguientes reglas al renderizar un <p>:

• Añaden un espaciado vertical antes y después del párrafo (margen superior e inferior por defecto).
• Cortan la línea automáticamente cuando el texto ya no cabe, sin partir palabras a la mitad.
• Cierran el <p> automáticamente si detectan que se abrió otro párrafo o un elemento de bloque incompatible.

Más adelante verás por qué ese cierre automático es importante y por qué puede darte sorpresas si no lo tienes en cuenta.

Sintaxis básica de la etiqueta <p>

Ejemplos simples de uso

<p>Este es un texto de ejemplo con la etiqueta p.</p>

Sencillo, claro y directo. No necesitas ningún atributo obligatorio para que funcione.

Cuando trabajaba mis primeros ejemplos, solía probar con textos largos para confirmar cómo reaccionaba el navegador, exactamente como este:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>

Ejemplos de uso correcto de la etiqueta <p>

Como indicamos anteriormente, la etiqueta <p> se usa para crear párrafos, que en esencia son bloques de contenido textual en nuestra web. A continuación verás los casos más habituales:

Etiqueta p con contenido

<p>
Este es un texto de ejemplo con la etiqueta p.
</p>

Obtendrás:

Este es un texto de ejemplo con la etiqueta p.

Salto de línea entre párrafos

Si quieres hacer un salto de línea y separar ideas, la forma correcta es usar un párrafo nuevo, no la etiqueta <br>:

<p>Este es un texto de ejemplo.</p>
<p>Y este es otro párrafo independiente.</p>

Obtendrás:

Este es un texto de ejemplo. 

Y este es otro párrafo independiente. 

Mucho texto en un párrafo

También podemos agregar mucho texto dentro de un solo <p>. Cuando el contenido ya no cabe en una línea, el navegador lo pasa automáticamente a la siguiente, sin romper las palabras a la mitad:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Obtendrás:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Párrafos consecutivos

Nada nos impide colocar múltiples etiquetas <p> consecutivas; de hecho, es lo más habitual cuando estructuramos contenido editorial:

<p>Este es el primer párrafo.</p>
<p>Y este es otro párrafo, completamente independiente.</p>

Cabe notar que al colocar un párrafo nuevo la primera letra no queda en mayúscula de forma automática. Si necesitas ese efecto tipográfico —muy usado en estilos editoriales— puedes aplicar la siguiente regla CSS:

p:first-letter {
    text-transform: uppercase;
}

Este es un texto de ejemplo.

y este es otro párrafo con la primera letra en mayúscula gracias a p:first-letter.

Como puedes ver, la regla CSS :first-letter junto con text-transform: uppercase eleva automáticamente la primera letra del párrafo, sin necesidad de modificar el HTML.

Eventos, atributos y estilo

Como atributo específico, <p> contaba históricamente con align; sin embargo, este atributo está deprecated (obsoleto) en HTML5 y su uso no es recomendado en versiones modernas. La razón es que HTML5 establece como principio que todo lo relacionado con el diseño visual sea gestionado por CSS, no por atributos HTML. En su lugar, debes usar la propiedad text-align de CSS.

En cuanto a eventos JavaScript, <p> no tiene ninguno personalizado propio; hereda los eventos globales del DOM como onclick, onmouseover, etc. Y en cuanto a estilos, puedes aplicar cualquier cosa que la API de CSS soporte: colores, tamaños de caja, tipografías, animaciones y transiciones, como hemos mostrado en multitud de entradas en DesarrolloLibre.

Los estilos más comunes aplicados a <p> tienen que ver con la alineación del texto, el formato tipográfico y el espaciado.

Alineaciones de texto con CSS

Tenemos cuatro tipos de alineación disponibles mediante la propiedad text-align: centrado, izquierda, derecha y justificado:

p {
    text-align: center;
}

p {
    text-align: left;
}

p {
    text-align: right;
}

p {
    text-align: justify;
}

Aquí tenemos los ejemplos para cada caso:

<style>
p {
    text-align: left;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<style>
p {
    text-align: center;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<style>
p {
    text-align: right;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<style>
p {
    text-align: justify;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ejemplos resumen: párrafo bien estructurado vs mal estructurado

Párrafos correctamente estructurados:

<p>Este es un párrafo con <strong>énfasis</strong> y un <a href="#">enlace</a>.</p>
<p>Segundo párrafo totalmente independiente.</p>

Malas prácticas corregidas:

❌ Incorrecto:

<p>Texto <div>Bloque interno</div></p>

✔️ Correcto:

<p>Texto</p>
<div>Bloque interno</div>

Por qué align está obsoleto en HTML5

Muchas guías antiguas aún lo mencionaban, pero hoy align se considera deprecated y no deberías usarlo en ningún proyecto moderno.

Ya no se debe usar:

<p align="center">Texto centrado (incorrecto en HTML5)</p>

La alternativa moderna es CSS. Usa text-align:

p {
    text-align: center;
}

Como ya mostramos en los ejemplos anteriores, este enfoque es más mantenible, reutilizable y respeta la separación entre estructura (HTML) y presentación (CSS).

Dar estilo a los párrafos con CSS

Alineación del texto con text-align. Los valores disponibles son:

• left
• right
• center
• justify

Ejemplo:

p {
    text-align: justify;
}

Grosor y tipografía con font-weight y font-family:

p {
    font-weight: 400;
    font-family: Arial, sans-serif;
}

Muchas veces uso valores como 700 o 900 en font-weight para dar más peso visual y énfasis tipográfico al texto.

Espaciados con margin y line-height:

p {
    margin-bottom: 1rem;
    line-height: 1.5;
}

Esto mejora muchísimo la legibilidad, especialmente en textos largos. Un line-height de entre 1.4 y 1.6 es el rango más recomendado para cuerpo de texto en web.

Qué pasa cuando el texto es muy largo

No necesitas insertar saltos de línea con <br> porque el navegador gestiona el flujo del texto por ti. Si el texto no cabe en una línea, continúa automáticamente en la siguiente, respetando siempre las palabras completas. Esto se conoce como word wrap o ajuste de línea, y es el comportamiento por defecto de cualquier elemento de bloque en HTML.

Y puedes colocar tantos párrafos seguidos como necesites:

<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>

Como vimos en el apartado de ejemplos anterior.

Si quieres que la primera letra sea mayúscula de forma automática, puedes usar esta regla que suelo aplicar cuando quiero un estilo más editorial:

p:first-letter {
    text-transform: uppercase;
}

Qué contenido puede ir dentro de <p> (y qué no)

Como todo en el desarrollo web, las etiquetas deben usarse para lo que fueron diseñadas. Incluso una etiqueta tan simple como <p> debe emplearse correctamente para evitar comportamientos o visualizaciones inesperadas en algunos navegadores. En concreto, no deberías incluir elementos de bloque dentro de un párrafo; por ejemplo, anidar dentro de <p> etiquetas como <h1>, <div>, <address> o <blockquote> es una mala práctica que puede romper el HTML.

Contenido permitido (phrasing content)

Dentro de <p> pueden ir únicamente elementos de tipo phrasing content:

• Texto normal.
• Etiquetas inline: <span>, <strong>, <em>, <a>, <img>, <code>, etc.
• Cualquier elemento que forme parte del phrasing content según la especificación HTML5.

Elementos prohibidos o que generan cierre automático

Esto es crucial y es uno de los errores más frecuentes entre quienes aprenden HTML. Los siguientes elementos no pueden ir dentro de <p>:

<div>
<h1> a <h6>
<ul> / <ol> / <li>
<blockquote>
<section> / <article>

Si intentas incluirlos, el navegador cerrará automáticamente el <p> antes de insertar ese elemento, provocando estructuras inesperadas que pueden ser muy difíciles de depurar.

¿Se puede anidar un <p> dentro de otro <p>?

Cuando comencé, pensé que sí porque visualmente parecía funcionar. Pero no se puede: HTML cierra automáticamente el primer párrafo en cuanto encuentra el inicio del segundo.

Si escribes esto:

<p>Texto 1 <p>Texto 2</p></p>

El navegador lo interpreta realmente como:

<p>Texto 1 </p>
<p>Texto 2</p>

Este comportamiento puede crear diferencias visuales sutiles, pero el DOM resultante no es el que escribiste, y eso sí puede causar problemas en selectores CSS o en manipulaciones con JavaScript.

Texto en negrita con CSS

Otra propiedad muy común es font-weight, que permite controlar el grosor del texto. Los valores más usados son:

p.normal  { font-weight: normal; }
p.thick   { font-weight: bold; }
p.thicker { font-weight: 900; }

Por ejemplo, para indicar que un texto sea bold (negrita) aplicamos el valor bold o su equivalente numérico 700:

Texto en bold:

Tipografía del texto

Por último, para cambiar la tipografía de los párrafos puedes usar la propiedad font-family. En este artículo hablamos un poco sobre ello:

Y estas serían las reglas CSS más comunes que puedes aplicar sobre tus párrafos.

Buenas prácticas modernas con la etiqueta <p>

Una pregunta habitual es cuándo usar <p>, <div> o <span>, ya que los tres pueden contener texto. La diferencia es semántica:

• <p>: texto estructurado en párrafos con significado editorial.
• <div>: contenedor genérico sin significado semántico, útil para agrupar secciones.
• <span>: contenedor inline para marcar partes específicas de un texto.

Si tu contenido es un párrafo de texto, usa <p>; si solo estás agrupando secciones sin significado semántico propio, usa <div>.

Cuándo usar un párrafo y cuándo no

Usa <p> cuando:

• Hay una idea completa que quieres expresar como bloque de texto.
• Existe una intención semántica clara: es un párrafo de contenido editorial.
• Estás escribiendo texto largo o contenido de artículo, documentación o blog.

No lo uses cuando:

• El contenido es una lista: usa <ul>, <ol> o <dl>.
• Quieres posicionar imágenes independientes: usa <figure> o un <div> contenedor.
• Quieres separar elementos solo con espacio visual: úsalo con margin en CSS directamente.

Accesibilidad básica aplicada a párrafos

Los lectores de pantalla interpretan <p> como una pausa natural entre ideas, lo cual ayuda a que el contenido sea comprensible para personas que usan tecnologías de asistencia. Por eso es importante no abusar de <br> como sustituto de un párrafo: un <br> solo genera un salto visual, pero no comunica ninguna separación semántica real al lector de pantalla.

Atributos del elemento <p>

El elemento <p> soporta todos los atributos globales de HTML. Los más comunes que encontrarás en el día a día son:

• class: para aplicar estilos CSS.
• id: para identificar el elemento de forma única.
• style: para estilos en línea (aunque se prefiere CSS externo).
• title: para añadir un tooltip descriptivo al pasar el cursor.
• lang: para indicar el idioma del contenido del párrafo.
• Atributos ARIA como aria-label o aria-hidden para mejorar la accesibilidad.

Errores comunes al usar <p>

Insertar elementos de bloque dentro de <p> es uno de los errores más clásicos. Error típico:

<p>Lista de cosas:
 <ul>...</ul>
</p>

• El resultado es HTML inválido: el navegador cierra automáticamente el <p> antes de insertar la lista, generando una estructura que no corresponde a lo que escribiste.
• Abusar de <p> para envolver imágenes, listas o títulos. A veces veo este patrón en código heredado o en editores WYSIWYG: no lo hagas, perjudica la semántica, la accesibilidad y el SEO.
• No entender el cierre automático del navegador. Si abres un <p> y justo después otro, el primero se cierra de forma implícita. Esta fue una de las primeras cosas que descubrí trasteando con código y observando comportamientos inesperados en el DOM.

Preguntas frecuentes sobre <p>

• ¿Qué diferencia hay entre <p> y <br>?
  • <p> crea un párrafo semántico con márgenes automáticos; <br> solo genera un salto de línea visual sin ningún significado semántico.
    Nunca uses <br> como sustituto de un párrafo real.
• ¿Cómo crear párrafos responsivos?
  • Basta con usar unidades relativas como em o rem para tamaños de fuente y un buen valor de line-height. Así el texto se adapta al tamaño del contenedor sin necesidad de media queries específicas para el texto.
• ¿Por qué un párrafo se ve distinto en cada navegador?
  • Cada navegador aplica su propio user agent stylesheet con márgenes y tamaños de fuente ligeramente diferentes.
    Por eso muchos desarrolladores aplicamos un reset CSS (como normalize.css o un reset personalizado) para homogeneizar los estilos base antes de empezar a diseñar.
• ¿Cuántos caracteres debería tener un párrafo?
  • No hay un límite técnico, pero desde el punto de vista de legibilidad y UX, se recomienda mantener las líneas entre 60 y 80 caracteres de ancho. Para conseguirlo puedes usar la propiedad CSS max-width con la unidad ch (por ejemplo, max-width: 70ch).

Conclusiones

En esta entrada aprendimos multitud de cosas sobre la etiqueta <p>: vimos que las posibilidades de estilado con CSS son prácticamente ilimitadas, revisamos qué elementos sí pueden anidarse dentro de ella y cuáles no, y exploramos ejemplos prácticos de alineación, tipografía y espaciado. Recuerda que puedes aplicar cualquier propiedad CSS sobre tus párrafos, incluyendo animaciones y transiciones, que son temas que tratamos con profundidad en el blog.

Aunque <p> parece una etiqueta trivial, en realidad define la estructura básica del texto y tiene reglas importantes: qué contenido acepta, qué elementos provocan su cierre automático, cómo trabajar con estilos y cómo evitar errores comunes que pueden afectar tanto al HTML como al SEO y la accesibilidad.

Después de haber escrito muchísimos ejemplos en proyectos reales, créeme: dominar este elemento te evita sorpresas y hace que tu HTML sea más limpio, semántico y accesible. No lo infravalores; es la base sobre la que descansa todo el contenido textual de la web.

Aprende ahora sobre la etiqueta <br> en HTML