Formato de párrafos en HTML

Cómo colocar párrafos y saltos de línea en páginas web. También vemos los encabezados como párrafos que sirven de titulo.
En los capítulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con más detalle las más ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente.

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

Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.

Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo cambiamos de línea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imágenes, las veremos más adelante. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual.

Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.

Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal. Veremos a lo largo de este manual cantidad de atributos muy útiles para todo tipo de etiquetas.

Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

El resultado seria:

Texto alineado a la izquierda


Para una justificación al centro:

<p align="center">Texto alineado al centro</p>

que daría:

Texto alineado al centro


Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>

cuyo efecto seria:

Texto alineado a la derecha


Como veis, en cada caso el atributo align toma determinados valores que son escritos 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.

Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas también funcionará en la mayoría de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros códigos y para evitar errores futuros en sistemas más quisquillosos.

El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.

Así, el código:

<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>

es equivalente a:

<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>

Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.

Ejemplo práctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podéis resolver en vuestros ordenadores. Simplemente queremos construir una página que tenga, por este orden:

2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda

No vamos a escribir en esta ocasión el código fuente del ejercicio. Podemos verlo en funcionamiento en nuestro navegador y en la ventana podemos obtener el código fuente seleccionando en el menú Ver la opción Código fuente.

Ver el ejercicio en marcha.

Encabezados

Existen otras etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezados o Header en inglés. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño.

Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.

Podemos ver cómo se presentan algunos encabezados a continuación.

<h1>Encabezado de nivel 1</h1>

Se verá de esta manera en la página:

Encabezado de nivel 1

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro.

<h2 align="center">Encabezado de nivel 2</h2>

Se verá de esta manera en la página:

Encabezado de nivel 2

Otro ejercicio interesante es construir una página web que contenga todos los encabezados posibles. Se puede ver a continuación.

<html>

<head>
<title>Todos los encabezados</title>
</head>

<body>

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

</body>

</html>

Se puede ver el ejercicio en una página aparte.

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra más grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en páginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

Pedro Marrero Gòmez

22/5/2004
Los ejemplos de los encabezados (nivel 1, nivel 2) estàn invertidos. Tambien al poner los diferentes encabezados, dejaron puesto 1, 1, 1. Me gusta vuestro sitio y no deseo que tenga errores.

Corregido, muchas gracias por tu ayuda!

Enrique

20/2/2005
Al explicar sobre la etiqueta <br>, mencionan: "para realizar un simple retorno de carro con lo que NO dejamos una línea en blanco, sino que solo cambiamos de línea."

Con esto se entiende que no habrá espacios en blanco entre párrafos. Pero cuando utilicé <br>, lo que hizo fue saltar un espacio "adicional" al espacio en blanco que de por sí deja la etiqueta <p>. O sea, los párrafos quedaron más separados.

Mi sistema operativo es WinXP. No sé si tendrá esto algo que ver.

Saludos.

RESPUESTA

Este tema no tiene nada que ver con tu sistema operativo ni con el navegador. Es que no tratábamos de decir eso, así que a ver si lo explico mejor.

Si quieres que los párrafos no estén separados por un doble espacio, no utilices la etiqueta <p> en ningún momento. Simplemente sepáralos por un <br>. En tu caso, cuando pones una etiqueta <p> y luego un <br>, tienes el doble espacio de la etiqueta <p> y a continuación el salto de línea de la etiqueta <br>, con lo que en total salen 3 saltos de línea.

Las etiquetas <p> y </p> te engloban un párrafo, pero en principio no estás obligado a utilizarlas para marcar párrafos. Puedes poner el texto directamente y poner <br> cuando quieras hacer un salto de línea.

Arturo

09/1/2007
querria saber si las etiquetas <br> pueden ser alineadas al centro o a la derecha

pongamos un ejemplo

<p>parrafo de prueba de etiquetas
<br align="center"> para alineacion de texto</p>

RESPUESTA

Es que <br> es un salto de línea, no un párrafo... es decir, un salto de línea se hace y punto, es como un enter. Pero es que entonces un salto de línea no representa nada, así que no se puede decir que se pueda alinear a nungún lado. Espero que se me pueda entender.
Es que

juan luis

20/12/2007
pues la verdad que yo lo hice asi

<brp>ropa</br>
<brp>vestidos</br>
<brp>perfumes</br>
<brp>joyas</br>

y me salio de maravillas sin dejar espacio alguno ,la verdad no se si es la manera correcta pero en el navegador de mozilla salio muy biem sin dejar espacio alguno

nadia

19/4/2009
felicitaciones
esta muy bonita tu pagina

Vicente Martinez

22/6/2009
aclracion respecto al uso de
No me quedó claro el concepto de cuando debemos usar <h1> o no. Dice el articulo q no es recomenable usarlo para formatear el texto. Pero si yo quiero q salga un titulo más grande q el resto del contenido, un parrafo por ejemplo, q deberia hacer si no uso <h1>? Agradeceria q me aclaraseis ese concepto.

hugo__ramirez_torres

10/7/2009
Felicitaciones
Felicidades, el tutorial esta muy completo y muy entendible, que me a ayudado a entender mucho de lo que captaba.

Gracias.

prestifilippoar

02/9/2009
es muy bueno
Realmente es muy sencillo de entender el desarrollo del manual.

CHRISTIAN

24/9/2009
SUPER
QUE ESTA ECELENTE FELICITACIONES¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡

guadalupe

08/10/2009
MMMMMMMMMMMMMMMMMMMMM
YO NO PEDIE ESO YO PEDI TIPOS DE PARAFO

vincenet

09/10/2009
felicitaciones
gracias a udts aprendi ha hacer mi pequeña pagina web. porq a decir verdad no sabia como se hacia gracias a utds

saludos para todos y gracias

yohansito

27/10/2009
gracias pero falta....
hola muy bueno el material pero quisiera saber el codigo para dar formato a dos parrafos en paralelo que no me deje linea en blanaco se lo agradeceria muixo....

jami

20/11/2009
zaber qomo poner fondos en los frames
hola me gustari saber como poner imagenes de fondo en los frames con codigos html

Alberto

21/12/2009
codigos html
quisiera saber como puedo colocar una imagen en la parte superior izquierda o derecha

diana garcia

18/4/2010
buenisimo
excelentes explicaciones muchas gracias por todo este documento; una pregunta en un windows mas actualizado los cambios van ciendo muy ceveros??.

Gracias

vcbvbvcb

24/4/2010
cvbcvbcvb
cbbbbbbbbbbbbbbbbbbbbbcbcv

Carlos

10/7/2010
Editar encabezados
Leo que los encabezados sirve para que los navegadores detecten titular y que formatean el texto a mayor tamaño y negrita. Sin embargo, veo que se puede editar la configuración de los encabezados eligiendo el tamaño y tipo de letra... ¿no se puede eliminar la negrita?

Saludos y enhorabuena por los artículos. Hace tiempo que están en mis favoritos.

Ani

22/7/2010
No entiendo qué está mal
Hola
He intentado seguir el pequeño ejercicio del principio y lo he escrito de esta manera y no entiendo qué está mal:
<html>
<head>
<title> mi primer ejemplo desarrolloo web </title>
</head>
<body>
<div align=''center''>
<p>parrafo 1 centrado</p>
<p>parrafo 2 centrado</p>
</div>
<div align=''right''>
<p>parrafo 1 derecha</p>
<p>parrafo 2 derecha</p>
<p>parrafo 3 derecha
</p>
</div>
<br>
<br>
<br>
<p align=''left''>parrafo 1 izquierda</p>
</body>
</html>



Gracias por la ayuda

gif

25/7/2010
A ver si entendy
<html>

<head<b>> <title> alineacion de parrafos</title></b> </head>
<br>

<body>

<div aling="right">
<p><h1> hola estoy programando</h1></p>
<p><h2> hola estoy programando</h2></p>
</div>
</body>

</html>

creo que es algo asi

sebalost

15/9/2010
crear pagina!!!!
como puedo hacer, para que los usuarios de mi pagina suban vídeos. muchas gracias!!!!!

andy

20/10/2010
nu c no me gustan los plagios
http://www.superhosting.cl/manuales/formato-de-parrafos-en-html.html

erica

27/11/2010
Párafos
Hola, estuve siguiendo vuestra charla sobre <br> y no encontré respuesta, espero alguien me pueda ayudar, necesito manejar la distancia entre <p>. Por ejemplo puedo menejar el alto entre líneas (line-height), pero necesito lo mismo entre párrafos.
Gracias
Erica

diego pozo

15/2/2011
Felicitaciones
Los felicito xk es un manual de lujo el que an subido les doy 1,000,000 sigan asi excelente

Jairo G.

08/8/2011
lenguaje
Practico, sencillo, facil de digerir. Gracias.

robbieturis

17/8/2011
felicitaciones
muy bueno el manual, me ha ayudado mucho
saludos

lUiz0n

14/9/2011
AYUDA URGENTEEE
YA SOY MIEMBRO, PERO NO PUEDO DESCARGAR ESTE MANUAL Y EL LINK NO INICIA LA DESCARGA, YA SOLICITE ASISTENCIA Y NO M HAN RESUELTO NADA.... Q PUEDO HACER???

Alexander

01/11/2011
para quitar espacios
buenas y saludos, como hago para que el espacio entre parrafos no sean muy separadas, hice lo que vi en tu sintaxis y los espacios son muy notorios y no como tu trabajo que te salio que queria, como podrias ayudarme?
<html>

<head>hola mi amor, esto solo es una practica
</head>

<body> <div align="center">
<p>empezemos.
</p>
<p> y terminemo
s</p>
</div>
<br/>
<div align="right">
<p>ojala todo salga bien
</p>
<p>nunca es tarde para empezar
</p>

Marco

28/3/2012
Parrafos html
Parrafo de 10 palabras y te ponen lo basico cuando te toca hacer de 10 lineas ya te liaste

karelysh

28/3/2012
hola, quisiera q me aclararan una dudita con respecto a los parrafos alineados y saltos de linea
bueno es sencilla mi pregunta estoy creando la ayuda de como llenar un formulario paso a paso para mi sistemas de informacion web y lo estoy explicando por procedimiento para ello utilizo la etiqueta <p> para justificar el parrafo pero como tiene una secuencia de pasos, es decir paso 1, paso 2...utilizo el salto de linea <br>..¿quisiera saber como hago para q todas las lineas terminen iguales es decir aplicando el salto de linea pero q esten justificadas?

espero entiendan mi pregunta y me ayuden xfaaa...

Andrei

11/4/2014
Muy bueno.
Gracias por las explicaciones tan elaboradas.

yes

30/6/2014
duda div
hola queria saber si solo se puede utilizar un div, ya que escribí mi codigo asi:
<html>

<head>
<title>diseño de paginas web</title>
</head>

<body>
<div align= "center">
<p>En esta pagina</p>
<p>podras ver tus videos favoritos</p>
</div>
<div align= "rigth">
<p>podras enviarnos tu propio video</p>
<p>dejarlo en nuestras manos</p>
<p>y compartirlo con el mundo</p>
</div>
<br>
<br>
<br>
<p> deja volar tu imaginación, no la delimites</p>
</body>
</html>


y en el segundo div no toma el atributo aling "rigth"..... lo deja por defecto a la izquierda

Noelia

24/7/2014
Bien explicado
Hola, dar las gracias a esta web, porque sin tener ni idea de html puedo hacer algunas cosillas en mi web.