Etiqueta HTML <p>
La etiqueta HTML <p> es un elemento de bloque que se utiliza para definir un párrafo de texto en una página web. Crea una nueva línea antes y después del elemento, ocupando todo el ancho de su contenedor padre.
Esta etiqueta semántica se utiliza comúnmente para estructurar el contenido de texto en una página web, como artículos, entradas de blog o descripciones de productos. Puedes agregar otras etiquetas HTML, como <strong> o <em>, dentro de la etiqueta <p> para dar énfasis o formato a palabras o frases específicas dentro del párrafo.
Estructurar correctamente tu contenido de texto con la etiqueta <p> es importante, ya que puede ayudar a mejorar la accesibilidad y la usabilidad de tu página web. Los lectores de pantalla y otras tecnologías de asistencia dependen de etiquetas semánticas como <p> para interpretar y presentar el contenido con precisión a los usuarios.
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 final del párrafo coincide con el inicio del siguiente elemento de bloque.
éxito
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.
peligro
La etiqueta
<p>no puede contener tablas ni otros elementos de bloque.
Ejemplo de la etiqueta HTML <p>:
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>Resultado
Uso de CSS
Para alinear el texto en un párrafo, en lugar del atributo obsoleto align, utiliza la propiedad CSS text-align.
Ejemplo de la etiqueta HTML <p> utilizada con la propiedad CSS text-align:
Etiqueta HTML <p> 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>Ejemplo de la etiqueta HTML <p> utilizada con la etiqueta <br>:
Ejemplo de la etiqueta HTML <p> con la etiqueta HTML <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 | right left justify | Define la alineación del texto. No es compatible con HTML5 |
La etiqueta <p> también es compatible con los Atributos Globales y los Atributos de Eventos.
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>Práctica
¿Cuál es el propósito de la etiqueta HTML <p>?