Tutorial:XHTML

Formato de párrafos en HTML

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica...

Párrafos (<p> y </p>) y saltos de línea (<br />)

Cada párrafo va definido entre las etiquetas <p> y </p>.

Para insertar un salto de línea, lo haremos con la etiqueta simple <br />.

La diferencia entre ambos es que br hace un cambio de línea mientras que p inserta una línea en blanco.

Es necesario aclarar que insertar un salto de línea cuando se esté creando el código no querrá decir que el navegador lo muestre como tal. Véase el ejemplo; supongamos que se escribe esto en el Bloc de Notas:

<p>Esto es un 
simple 
ejemplo sin saltos de línea</p>

Se vería en el navegador de la siguiente forma:

Esto es un simple ejemplo sin saltos de línea

Si quisiéramos mostrarlo con saltos de línea el código debería ser:

<p>Esto es un <br />simple<br />ejemplo CON saltos de línea</p>

Y el resultado en el navegador, ahora sí:

Esto es un 
 simple 
ejemplo con saltos de línea

Justificación de párrafos

Los párrafos pueden justificarse a la izquierda, centro o derecha. Para ello deberemos definir el atributo align dentro de la etiqueta <p> especificando dicha justificación en el interior de la etiqueta por medio de un atributo align.

Justificación a la derecha (align="right")

Ejemplo:
<p align="right">Ejemplo de justificación a la derecha</p>. El resultado en el navegador sería:

Ejemplo de justificación a la derecha

Justificación al centro (align="center")

Ejemplo:
<p align="center">Ejemplo de justificación al centro</p>. El resultado en el navegador sería:

Ejemplo de justificación al centro

Justificación a la izquierda (align="left")

Ejemplo:
<p align="left">Ejemplo de justificación a la izquierda</p>. El resultado en el navegador sería:

Ejemplo de justificación a la derecha

El valor de los atributos deberá ir entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

CASO: MúLTipLes párrafos con un mismo formato

Supongamos que queremos alinear 5 párrafos seguidos a la derecha. Tendremos dos opciones:

• Alinear cada uno de ellos con su correspondiente atributo (right)

<p align="right">Párrafo 1</p>
<p align="right">Párrafo 2</p>
<p align="right">Párrafo 3</p>
<p align="right">Párrafo 4</p>
<p align="right">Párrafo 5</p>

• Utilizar la etiqueta <div>: de esta manera conseguiremos simplificar nuestro código y evitar introducir continuamente el atributo align sobre cada una de nuestros párrafos:

<div align="right">
	<p>Párrafo 1</p>
	<p>Párrafo 2</p>
	<p>Párrafo 3</p>
	<p>Párrafo 4</p>
	<p>Párrafo 5</p>
</div>