Etiqueta HTML <p>
La etiqueta <p> define un párrafo de texto. Descripción, atributos y ejemplos de uso de la etiqueta.
La etiqueta HTML <p> es un elemento de bloque que define un párrafo de texto en una página web. Como elemento de bloque, comienza en una nueva línea y ocupa todo el ancho de su contenedor padre.
Esta página explica cómo escribir párrafos, el espaciado predeterminado que los navegadores les aplican, cuándo no se debe usar <p>, y cómo dar estilo a los párrafos con CSS.
Esta etiqueta semántica se usa habitualmente para estructurar contenido de texto, como artículos, publicaciones de blog o descripciones de productos. Se pueden colocar etiquetas en línea como <strong> o <em> dentro de un <p> para enfatizar o dar formato a palabras o frases específicas dentro del párrafo.
Estructurar correctamente el contenido de texto con la etiqueta <p> es importante para la accesibilidad y la usabilidad. Los lectores de pantalla y otras tecnologías de asistencia dependen de etiquetas semánticas como <p> para interpretar y presentar el contenido a los usuarios de forma precisa.
Sintaxis
La etiqueta <p> viene en pares. El contenido se escribe entre las etiquetas de apertura (<p>) y cierre (</p>). Si se omite la etiqueta de cierre, se considera que el fin del párrafo coincide con el inicio del siguiente elemento de bloque.
Los espacios entre la etiqueta de apertura <p> y su contenido son ignorados por el navegador. Para establecer una sangría, utiliza la propiedad CSS text-indent .
La etiqueta <p> no puede contener tablas ni otros elementos de bloque.
Ejemplo de la etiqueta HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Espaciado predeterminado de párrafos (el modelo de caja)
Los navegadores no renderizan los párrafos pegados entre sí. De forma predeterminada, aplican un margen superior e inferior de aproximadamente 1em a cada elemento <p>, que es lo que crea el espacio visible entre párrafos. El estilo predeterminado del agente de usuario es aproximadamente:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}Por eso dos párrafos adyacentes tienen separación incluso cuando no escribes ningún CSS. Si deseas que los párrafos estén más juntos (o eliminar el espacio por completo), restablece el margen tú mismo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin-top: 0;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<p>This paragraph has a smaller gap below it.</p>
<p>And this one sits closer to the paragraph above.</p>
</body>
</html>Un restablecimiento común es margin: 0 en p, y luego añadir el espaciado de nuevo solo con margin-bottom. Esto evita que el primer párrafo empuje hacia abajo su contenedor con un margen superior no deseado.
Cuándo NO usar <p>
Un elemento <p> solo puede contener contenido de fraseo — texto y elementos en línea como <strong>, <em>, <a>, <span> o <img>. No puede contener elementos de bloque.
Si anidas un elemento de bloque dentro de un <p>, el navegador cierra automáticamente el párrafo de forma silenciosa antes de ese elemento. Este es uno de los errores más comunes entre principiantes, porque la página sigue renderizándose pero el DOM no es lo que escribiste. Evita poner esto dentro de un <p>:
<div>(usa la etiqueta<div>como contenedor alrededor de los párrafos)- Listas como
<ul>,<ol>,<li> - Encabezados (
<h1>–<h6>) - Tablas (
<table>) - Otro
<p>(los párrafos no pueden anidarse)
<!-- WRONG: the <p> is auto-closed before the <div>,
so the second sentence ends up outside the paragraph -->
<p>
First sentence.
<div>Block content</div>
Second sentence.
</p>Para agrupar contenido de bloque, envuelve los párrafos en un <div> y no al revés. Para agrupar contenido en línea, usa la etiqueta <span>.
Uso de CSS
Para alinear texto en un párrafo, en lugar del atributo align obsoleto, usa la propiedad CSS text-align.
Ejemplo de la etiqueta HTML <p> usada con la propiedad CSS text-align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.paragraph {
text-align: center;
}
</style>
</head>
<body>
<h1>Title of the document</h1>
<div class="paragraph">
<p>The text alignment to the center is set with CSS property text-align</p>
</div>
</body>
</html>Saltos de línea dentro de un párrafo
Para romper una línea dentro de un párrafo sin comenzar uno nuevo, usa la etiqueta <br>. A diferencia de un nuevo <p>, un <br> no añade el margen de párrafo predeterminado — simplemente mueve el texto siguiente a la siguiente línea.
Ejemplo de la etiqueta HTML <p> usada con la etiqueta <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br /> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left, right, center, justify | Define la alineación del texto. Obsoleto — no está soportado en HTML5; usa la propiedad CSS text-align en su lugar |
La etiqueta <p> también admite los Atributos Globales y los Atributos de Evento.
Cómo dar estilo a una etiqueta HTML <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: blue;
font-size: 18px;
text-align: justify;
}
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
</body>
</html>