3.6 Espacios en blanco y nuevas líneas

El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los «espacios en blanco» del texto. 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).

El siguiente ejemplo ilustra este comportamiento:

<html>

  <head>
   <title>Ejemplo de etiqueta p</title>
  </head>

  <body>
    <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>

    <p>Este segundo párrafo sí que contiene saltos
de
línea
y   otro    tipo   de   espaciado.</p>
  </body>
</html>

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

Ejemplo de comportamiento de HTML con los espacios en blanco

Los dos párrafos de la imagen anterior se ven idénticos, aunque el segundo párrafo incluye varios espacios en blanco y está escrito en varias líneas diferentes. La razón de 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.

No obstante, 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.

Insertar nuevas líneas con line break <br>

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.

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.

No utilices <br> para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad margin del CSS o el elemento <p>.

La definición formal de <br> se muestra a continuación:

Etiqueta<br>
Atributos comunesbásicos
Atributos propios
Tipo de elementoEn línea y etiqueta vacía
DescripciónFuerza al navegador a insertar una nueva línea

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta puede abrirse y cerrarse de forma consecutiva: <br></br>.

Por comodidad en HTML sólo se utiliza la etiqueta de apertura. Pero, en XHTML, es obligatorio cerrar el tag.

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

Utilizando la etiqueta <br> se puede rehacer el ejemplo anterior para que respete las líneas que forman el segundo párrafo:

<html>

  <head>
    <title>Ejemplo de etiqueta br</title>
  </head>

  <body>
    <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>

    <p>Este segundo párrafo sí que contiene saltos <br/>
       de <br/>
       línea <br/>
       y   otro   tipo   de   espaciado.</p>
  </body>

</html>

El navegador ahora sí que muestra correctamente las nuevas líneas que se querían insertar:

Ejemplo de uso de la etiqueta br

Espacios en blanco con &nbsp;

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 sustituir cada nuevo espacio en blanco por el texto &nbsp; (es importante incluir el símbolo & al principio y el símbolo ; al final).

Así, el código HTML del ejemplo anterior se debe rehacer para incluir los espacios en blanco adicionales:

<html>

  <head>
    <title>Ejemplo de entidad &nbsp;</title>
  </head>

  <body>
     <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>

     <p>Este segundo párrafo sí que contiene saltos <br/>
     de <br/>
     línea <br/>
     y &nbsp;&nbsp; otro &nbsp; tipo &nbsp; de &nbsp; espaciado.</p>
  </body>

</html>

Ahora el navegador sí que muestra correctamente los espacios en blanco (y las nuevas líneas) del segundo párrafo:

Ejemplo de uso de espacios en blanco en HTML

Cada texto &nbsp; solamente equivale a un espacio en blanco, por lo que se deben escribir tantos &nbsp; seguidos como espacios en blanco seguidos existan en el texto.

Más adelante se profundiza en el origen de &nbsp; y se comprenderá por qué es necesario incluir esa sucesión tan extraña de caracteres cada vez que se quiere incluir un espacio en blanco adicional.

Texto preformateado con la etiqueta <pre>

En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.

En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. La definición formal de la etiqueta se muestra a continuación:

Etiqueta<pre>
Atributos comunesbásicos, internacionalización y eventos
Atributos propios
Tipo de elementoBloque
DescripciónMuestra el texto que encierra tal y como está escrito (respetando los espacios en blanco)

El siguiente ejemplo muestra el uso de la etiqueta <pre>:

<html>
  <head>
    <title>Etiqueta p vs pre</title>
  </head>

  <body>
    <pre>
    A diferencia de la etiqueta p en los párrafos,
        la etiqueta pre 

   respeta los espacios 
   
   en blanco que utilizamos en nuestro código
      y


 muestra el texto
     tal y como
   está escrito
    </pre>

    <p>
        En 
        cambio
        los párrafos escritos 
        con la etiqueta
        P, se muestran
        normalizados.
     </p>

  </body>

</html>

El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias líneas) dentro de una etiqueta <pre> y dentro de una etiqueta <p>. Las diferencias visuales en un navegador son muy evidentes:

Etiqueta pre vs p

El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. El segundo texto se ve como un párrafo normal, ya que HTML ha eliminado todos los espacios en blanco sobrantes.

Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas:

  • Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas líneas)
  • Muestra el texto con un tipo de letra especial, denominado «de ancho fijo», ya que todas sus letras son de la misma anchura
  • No se ajusta la longitud de las líneas (las líneas largas producen un scroll horizontal en la ventana del navegador)

Esta última característica diferencia por completo a los párrafos de los elementos <pre>. Como se ha visto, los navegadores ajustan la anchura de los párrafos de texto para que ocupen todo el tamaño de la ventana. Sin embargo, los elementos <pre> se muestran tal y como son originalmente, por lo que una línea muy larga dentro de un elemento <pre> provoca que la anchura de la página sea superior a la anchura de la ventana del navegador.

Si en el ejemplo anterior se añade más texto al final de la segunda línea (para producir una línea larga), el navegador muestra un scroll horizontal ya que el texto completo no cabe en el tamaño de la ventana y las líneas de los elementos <pre> nunca se ajustan.

<html>
  <head>
    <title>Etiqueta p vs pre</title>
  </head>

  <body>
    <pre>
    A diferencia de la etiqueta p en los párrafos,
        la etiqueta pre 

   respeta los espacios 
   
   en blanco que utilizamos en nuestro código
      y


 muestra el texto
     tal y como
   está escrito
                                   Pero ahora le agregamos un scroll. ¡Yay!                                 
    </pre>

    <p>
        En 
        cambio
        los párrafos escritos 
        con la etiqueta
        P, se muestran
        normalizados.
    </p>

  </body>

</html>

Así se vería en el navegador:

Ejemplo de aparición de scroll horizontal con la etiqueta pre

Etiqueta que muestra el texto con el código fuente del lenguaje <code>

Otra etiqueta relacionada con <pre> es la etiqueta <code>, que se utiliza para mostrar código fuente de cualquier lenguaje de programación. La definición formal de <code> es la siguiente:

Etiqueta<code>
Atributos comunesbásicos, internacionalización y eventos
Atributos propios
Tipo de elementoEn línea
DescripciónDelimita el texto considerado un fragmento de código fuente

En la mayoría de páginas web, no tiene sentido utilizar la etiqueta <code>. Sin embargo, en muchas páginas web técnicas que incluyen listados de programas, trozos de código o etiquetas HTML, lo correcto es emplear la etiqueta <code>.

Ejemplo:

<html>
<head><title>Ejemplo de etiqueta code</title></head>

<body>

<code>
        La etiqueta code
   no respeta los espacios en blanco
</code>

<p>La etiqueta <code>code</code> es similar a la
etiqueta <code>pre</code>, sobre todo en el formato
del texto.</p>

</body>
</html>

El navegador muestra claramente el comportamiento de <code> y sus diferencias con <pre>:

Ejemplo de uso de la etiqueta code

Al igual que sucede con los elementos <pre>, el texto encerrado por la etiqueta <code> se muestra con un tipo de letra especial de ancho fijo. Por el contrario, el elemento <code> no respeta los espacios en blanco ni las líneas, por lo que su comportamiento es similar a la etiqueta <p>. La última diferencia es que <code> es un elemento en línea, mientras que <pre> es un elemento de bloque.


Ejercicio con <pre>

Determinar el código HTML que corresponde al siguiente documento, la información la pueden sacar de este artículo de Wikipedia ↗:

Respuesta

<body>

  <h2>Estadísticas de Messi con el Barcelona</h2>

    <pre>

Temporada        Partidos          Goles          Asistencias
-----------------------------------------------------------------
2004-05             9                1                 0 
2005-06             25               8                 3 
2006-07             36               17                3 
2007-08             40               16                13
2008-09             51	             38                17
2009-10             53	             49	               11
2010-11             55	             54	               23
2011-12             60	             78	               29
2012-13             50	             64	               15
2013-14             46	             46	               14
2014-15             57	             66	               27
2015-16             49	             43	               23
2016-17	            57	             87                33
2017-18             57	             53	               18
2018-19             50	             59	               19
2019-20             44	             34	               25
2020-21             47	             43	               12

  </pre>

</body>
Realiza tus consultas en el foro sobre el curso de HTML
Realiza tus consultas en el foro sobre el curso de HTML
error: Content is protected !!
Ir arriba