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.

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>

Este es un texto de ejemplo con la etiqueta p.

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

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>

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

Etiqueta p anidada: p dentro de p

También podemos anidar o colocar una etiqueta p dentro de otra p sin ningun problema.

Este es un texto de ejemplo;

y este es un texto anidado dentro de otro.

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:

Malos usos de la etiqueta p

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.

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>

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

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

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

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.

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.

HTML

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy