13.4.10

Espacios en blanco y saltos de línea




Uno de los aspectos más interesantes del lenguaje HTML es el tratamiento especial de los "espacios en blanco" del texto, teniendo en cuenta que HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).

Veamos el siguiente ejemplo:

<p> Párrafo sin saltos de línea ni otro tipo de espaciado </p>

<p> Párrafo con saltos
de
línea
y    otro    tipo    de    espaciado </p>

El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:

Párrafo sin saltos de línea ni otro tipo de espaciado

Párrafo con saltos de línea y otro tipo de espaciado

Los espacios en blanco en ambos párrafos son idénticos y cada uno está en una sola línea, a pesar de que el segundo tiene, en el código HTML, varios espacios en blanco y está escrito en líneas diferentes. La razón para este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.

Sin embargo, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.


Saltos de línea

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.

Definición formal de la etiqueta <br>

<br> Nueva línea
Atributos comunes básicos
Atributos específicos -
Tipo de elemento En línea y etiqueta vacía
Descripción Fuerza al navegador a insertar una nueva línea

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. Su particularidad consiste en que es una etiqueta vacía, es decir, no encierra ningún texto. En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: <br/> (también se puede escribir como <br />).


Espacios en blanco

La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas. Para incluir espacios en blanco adicionales, se debe sustituír cada nuevo espacio en blanco por el siguiente texto:

&nbsp;

Volviendo al ejemplo anterior, utilizamos la etiqueta <br> para que se respeten las líneas que forman el segundo párrafo, y el texto &nbsp; (uno por espacio) para incluír espacios en blanco adicionales.

Entonces, para incluir los espacios en blanco adicionales y para que se respeten las líneas que forman el segundo párrafo, el código HTML del ejemplo se debe rehacer así :

<p> Párrafo sin saltos de línea ni otro tipo de espaciado </p>

<p> Párrafo con saltos </br>
de </br>
línea </br>
y &nbsp;&nbsp; otro &nbsp;&nbsp; tipo &nbsp;&nbsp; de &nbsp;&nbsp; espaciado <p>

Ahora el navegador sí nos mostrará correctamente los espacios en blanco y las nuevas líneas (saltos de línea) del segundo párrafo:


Párrafo sin saltos de línea ni otro tipo de espaciado

Párrafo con saltos
de
línea
y    otro    tipo    de    espaciado


Ejercicio No.2:

Determinar el código HTML que corresponde al siguiente documento:

Cambios en la temperatura de ciudades de EE.UU.,resultado del calentamiento global,(en grados Fahrenheit)

En el 2100, esta     Se sentirá como         Cambio de temp.
ciudad de EE.UU.     se siente hoy          entre 2008 y 2100

Anchorage, AK        New York, NY                 +18 
Minneapolis, MN      San Francisco, CA            +13  
Milwaukee, WI        Charlotte, NC                +13 
Albany, NY           Charlotte, NC                +13 
Boston, MA           Memphis, TN                  +12 
Detroit, MI          Memphis, TN                  +13 
Denver, CO           Memphis, TN                  +13
Chicago, IL          Los Angeles, CA              +14
Omaha, NE            Los Angeles, CA              +13
Columbus, OH         Las Vegas, NV                +13         
Solución aquí

 



Índice Formatear
Formato de párrafos HTML
Estructurar un texto
Marcado básico de texto
Texto preformateado
Espacios en blanco y saltos de línea
Marcado avanzado de texto
Marcado genérico de texto
Codificación de caracteres

9 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Estefanía #

Discúlpame:
Existe otra forma de hacer este formateo sin utilizar estas etiquetas?
soy asidua lectora de tu blog.
Hasta pronto.

Comentario escrito por Maurizio : #

¿Es tan amable informándome cuál es la diferencia entre las etiquetas < p > y < br >?
Gracias.
Saludos.

Comentario escrito por Castorlux : #

Estefanía:
En el próximo post resolveremos su pregunta.
Saludos.

Comentario escrito por Castorlux : #

Maurizio:
En el post anterior está la respuesta a su pregunta.
Cordial saludo.

Comentario escrito por Patucos : #

saludos

Como carallo hago para dejar espacios en blanco al principio de un parrafo.
---(y ahora empieza el texto)

saludos cordiales de un indigente en programaciòn...por cierto hay trabajo en esto de la programacion?.....

Comentario escrito por Pedro Pablo : #

Patucos: Para dejar espacios en blanco, inclusive al principio de un párrafo, se debe reeemplazar cada espacio por este texto: &nbsp; (incluyendo el punto y coma).
Ejemplo, para dejar tres espacios:
&nbsp;&nbsp;&nbsp;Aquí empieza el texto...

Saludos.


Saludos.

Comentario escrito por Pepe Puñales : #

Parcero de verdad muchas gracias, muy buenos todos tus post....!!! Te recomendare..!!! :D

Comentario escrito por  Pedro Pablo : #

Gracias Pepe Puñales.
Saludos.

Comentario escrito por Nicholas R. : #

@Maurizio - La diferencia es que la etiqueta < br > es para un 'salto de línea', y la etiqueta < p > es para colocar párrafos, no tienen nada que ver una con otra.

Publicar un comentario en la entrada