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:
Figura 3.12 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.
3.5.1. Nuevas líneas
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.
La definición formal de <br> se muestra a continuación:
| Etiqueta | <br> |
|---|---|
| Atributos comunes | básicos |
| Atributos propios | - |
| 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. La particularidad de <br> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.
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:
Figura 3.13 Ejemplo de uso de la etiqueta br
3.5.2. 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 sustituir cada nuevo espacio en blanco por el texto (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 </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>Ahora el navegador sí que muestra correctamente los espacios en blanco (y las nuevas líneas) del segundo párrafo:
Figura 3.14 Ejemplo de uso de espacios en blanco en HTML
Cada texto solamente equivale a un espacio en blanco, por lo que se deben escribir tantos seguidos como espacios en blanco seguidos existan en el texto.
Más adelante se profundiza en el origen de 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.
Ejercicio 4
Determinar el código HTML que corresponde al siguiente documento:
Figura 3.15 Texto HTML con espacios en blanco y nuevas líneas
3.5.3. Texto preformateado
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 comunes | básicos, internacionalización y eventos |
| Atributos propios | - |
| Tipo de elemento | Bloque |
| Descripción | Muestra 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>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</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:
Figura 3.16 Ejemplo de uso de la etiqueta pre
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.
Figura 3.17 Ejemplo de aparición de scroll horizontal con la etiqueta pre
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 comunes | básicos, internacionalización y eventos |
| Atributos propios | - |
| Tipo de elemento | En línea |
| Descripción | Delimita 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>:
Figura 3.18 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.