Unidad 2. Etiquetas de Texto (IV)

2.4. Etiqueta <p>

La etiqueta <p> define un párrafo.

Ejemplo: <p>Un párrafo de texto</p>

Produce este resultado:

La etiqueta <p> es de tipo bloque, es decir, por defecto ocupa una línea completa en la página web. Además, también incluye un margen superior e inferior. Por ejemplo, si escribimos dos párrafos en la misma línea: <p>Un párrafo de texto.</p><p>Otro párrafo.</a>

Produce este resultado:

Si el contenido del párrafo no cabe en una línea será el navegador web quien lo divida en varias líneas según el ancho disponible. Por lo tanto, el número de líneas que ocupe un párrafo dependerá del ancho disponible. Si queremos incluir un salto de línea explícito dentro de un párrafo podemos utilizar la etiqueta <br />. Como ya hemos dicho, los saltos de línea que escribamos en el código html no tienen efecto al mostrar la página.

Por ejemplo, en este fragmento de código html hay dos párrafos que se pueden ver de forma diferente según el ancho del navegador.

Si el ancho es pequeño, el primer párrafo ocupa cuatro líneas.

Si el ancho es mayor, el primer párrafo ocupa tres líneas,

También podemos ver cómo la línea en blanco que aparece en el código antes de "Es útil ..." y los espacios en blanco detrás de "del tipo Hoja" no se muestran en la página web.

Observa que entre los dos párrafos se crea un salto de línea y además un margen de separación, mientras que en el salto de línea creado con la etiqueta <br /> no existe ese margen.

Dentro del párrafo se suele introducir texto pero también se pueden incluir otros elementos, como imágenes y elementos de texto (span, em, b, etc.), aunque no se pueden incluir listas y tablas.

Atributos. Hasta la aparición de la versión HTML 5, existía el atributo align para alinear el contenido del párrafo, con los valores rigth, center, left.

Ejemplo: <p align="right">Contenido alineado a la derecha</p>

 

A partir de HTML 5, se debe alinear el contenido desde la hoja de estilo con el atributo text-align y los valores rigth, center, left, justify, initial, inherit.

 

Ahora puedes probar todo esto, haz clic en este tema básico y te explicaremos varias formas para probar el código html: Probar código desde el navegador. .