Guía rápida sobre el elemento p en HTML

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 que se encuentra compuesto de una o más líneas y que se separan de otros párrafos mediante un espacio en blanco; aunque es una etiqueta sencilla y básica de emplear, la misma cuenta con múltiples formas en la que la podamos emplear, tanto correctas como incorrecta.

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 prier contacto con el desarrollo de webs… 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.

En la práctica, <p> sirve para agrupar ideas o fragmentos de texto, exactamente igual que harías al escribir un documento normal.

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

Los navegadores:

• Añaden un espaciado vertical antes y después del párrafo.
• Cortan la línea automáticamente cuando el texto ya no cabe, sin partir palabras.
• 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é esto último es importante.

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.

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 la creación de párrafos, que en esencia es contenido en nuestra web; por ejemplo el siguiente texto es un ejemplo de lo anterior:

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

Si quieres hacer un salto de línea, simplemente usa otro párrafo:

<p>
Este es un texto de ejemplo; <p>y este es un texto anidado dentro de otro. </p>
</p>

Obtendrás:

Este es un texto de ejemplo; 

y este es un texto anidado dentro de otro. 

Mucho texto

También podemos agregar mucho más texto, como verás cuando ya no entra más texto en una línea, de forma automática el contenido es pasado a la siguiente línea; no se rompe la palabra como puedes darte cuenta:

<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

Por supuesto, nada nos impide que coloquemos múltiples etiquetas p consecutivas; es decir, podemos tener párrafos consecutivos como los siguientes:

<p>Este es un texto de ejemplo; <p>
<p>y este es otro párrafo.</p>

Este es un texto de ejemplo

y este es otro párrafo

Cómo puedes darte cuenta, al colocar un párrafo nuevo la primera letra NO queda en mayúscula de forma automática; para ello debemos de aplicar una regla en CSS como la siguiente:

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

Este es un texto de ejemplo

y este es otro párrafo

Como puedes ver en la regla CSS anterior, estamos indicando que la primera letra sea mayúscula y obtenemos el siguiente resultado:

Eventos, atributos y estilo

Cómo atributos tenemos el align, aunque este atributo esta deprecated o mejor dicho obsoleto en HTML5 y su uso no es recomendado en versiones modernas ya que para eso existe la regla en CSS text-align que puedes emplear en su lugar; y esto es debido a que HTML5 intenta dejar como reglas básicas que todo lo que tenga que ver con diseño sea procesado directamente por el CSS y no atributos. Como evento no tiene ninguno personalizado para esta etiqueta y las reglas CSS puedes emplear todo lo que la API de CSS soporte sin problema alguno, entonces podrás aplicar colores, tamaños de la caja (ancho y largo) del texto y todo lo demás como animaciones y transiciones como hemos mostrados en multitud de entradas en DesarrolloLibre.

Para los estilos también podemos decir, que los más comunes tienen que ver con la orientación del texto y el formato del mismo, así como la tipografía.

Alineaciones de texto con CSS

Tenemos 3 tipos de alineaciones, la central, alinear el texto a la izquierda o a la derecha y justificada:

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 aún lo mencionaban, pero hoy se considera deprecated.

Ya no se debe usar:

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

Alternativas modernas con CSS

Usa text-align:

p {
 text-align: center;
}

Como mostramos antes.

Dar estilo a los párrafos con CSS

Alineación del texto (text-align), en resumen:

• left
• right
• center
• justify

Ejemplo:

p {
 text-align: justify;
}

Grosor y tipografía (font-weight, font-family):

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

Muchas veces uso valores como 700 o 900 para dar más énfasis.

Espaciados (margin, line-height):

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

Esto mejora muchísimo la legibilidad.

Qué pasa cuando el texto es muy largo

No necesitas insertar saltos de línea porque el navegador hace todo por ti.

Si el texto no cabe en una línea, continúa automáticamente en la siguiente, respetando palabras completas.

Uso de múltiples párrafos consecutivos

Puedes colocar tantos párrafos seguidos como quieras:

<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)

Cómo todo en la vida, las cosas deben ser empleadas para lo que fueron hechas, e incluso etiquetas tan simples como la p debe ser empleadas correctamente para que tu sitio no tenga comportamientos o visualizaciones extrañas en algunos navegadores; no deberíamos incluir o embeber ciertas etiquetas dentro de otras; por ejemplo, incluir en las etiquetas span la etiquetas como p, h1, a, etc porque es una mala práctica, lo mismo sucede con la etiqueta p, no deberías incluir etiquetas como la de address o blockquote.

Contenido permitido (phrasing content)

Dentro de <p> pueden ir:

• Texto normal
• Etiquetas inline: <span>, <strong>, <em>, <a>, <img>, <code>, etc.
• Cualquier elemento que forme parte de phrasing content.

Elementos prohibidos o que generan cierre automático

Esto es crucial.

Elementos como:

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

NO pueden ir dentro de <p>.

Si lo haces, el navegador cerrará automáticamente el <p> antes de insertar ese elemento, provocando estructuras inesperadas.

¿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 antes del segundo.

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

Se interpreta realmente como:

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

Texto en bold con CSS

Otra propiedad que es común emplear es la que permite indicar el grosor del texto:

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

Por ejemplo, para indicar que un texto sea bold, que es un texto en negrita, tendríamos lo siguiente:

Texto en bold:

Tipografía del texto

Por último tenemos para cambiar la tipografía que en este artículo hablamos un poco de esto:

Y esto serían las reglas más comunes que podemos aplicar sobre nuestro texto.

Buenas prácticas modernas con la etiqueta <p>

<p> vs <div> vs <span>

• <p>: texto estructurado en párrafos.
• <div>: contenedor genérico sin significado semántico.
• <span>: contenedor inline para marcar partes de texto.

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

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

Usa <p> cuando:

• Hay una idea completa.
• Existe intención semántica.
• Estás escribiendo texto largo o contenido editorial.

No lo uses cuando:

• El contenido es una lista.
• Quieres posicionar imágenes independientes.
• Quieres separar elementos solo con estilo (usa margin).

Accesibilidad básica aplicada a párrafos

Los lectores de pantalla interpretan <p> como una pausa natural entre ideas, por eso es importante no usar <br> como sustituto de un párrafo.

Atributos del elemento <p>

Atributos globales más comunes

Puedes usar:

• class
• id
• style
• title
• lang
• Atributos ARIA

Errores comunes al usar <p>

Insertar elementos de bloque dentro de <p>

Error típico:

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

• Resultado: HTML inválido y cierre automático del <p>.
  • Abusar de <p> cuando debería usarse otro elemento
• A veces veo <p> alrededor de imágenes, listas o incluso títulos.
  • No lo hagas. Perjudica la semántica y la accesibilidad.
• Entender el cierre automático del navegador
  • Si abres un <p> y luego otro, el primero se cerrará automáticamente.
    Esta fue una de las cosas que descubrí trasteando con código y viendo comportamientos inesperados.

Preguntas frecuentes sobre <p>

• ¿Qué diferencia hay entre <p> y <br>?
  • <p> crea un párrafo; <br> solo genera un salto de línea.
    Nunca uses <br> como sustituto de un párrafo real.
• ¿Cómo crear párrafos responsivos?
  • Basta con usar unidades relativas (em, rem) y un buen line-height.
• ¿Por qué un párrafo se ve distinto en cada navegador?
  • Cada navegador aplica un user agent stylesheet distinto.
    Por eso muchos desarrolladores aplicamos un reset o normalizamos estilos.

Conclusiones

En esta entrada aprendimos multitud de cosas sobre la etiqueta p que como puedes concluir el cielo es el límite; podemos anidar etiquetas p dentro de sí misma, también vimos que etiquetas no podemos anidar dentro de la etiqueta p en la sección de malos usos, y vimos algunos ejemplos de estilo que podemos aplicar a la etiqueta p pero recuerda que puedes aplicar cualquier cosa que sea soportada por la API de CSS como las animaciones y transiciones que son temas fundamentales en nuestro 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 cierran el párrafo automáticamente, cómo se trabaja con estilos y cómo evitar errores comunes.

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.