Espacios en blanco en HTML

Hoy toca de hablar de los espacios en blanco en documentos HTML.

Lo cierto es que, aunque este tema puede parecer algo trivial, estoy seguro de que más de uno no tiene 100% claro cómo funcionan exactamente este tema (incluido yo).

Lo primero que hay que aclarar es que HTML tratará de igual forma una serie de caracteres que para él son todos lo mismo, es decir, tanto un espacio en blanco como un tabulador, un retorno de carro o una nueva línea, todos ellos tienen el mismo tratamiento… son ignorados!

El comportamiento predeterminado de HTML es ignorar cualquiera de esos caracteres, es decir, no trabaja con los espacios sobrantes (lógicamente queda fuera de ese tratamiento el espacio en blanco que separa palabras).

De este modo, podemos escribir un código HTML como el siguiente (donde hay espacios, tabuladores, nuevas líneas, etc.) y observar como se ve en el navegador

El resultado no hace sino afirmar que HTML ignora los espacios en blanco.

Si lo queremos es solucionar el problema de nuevas líneas, HTML nos ofrece la etiqueta <br> (<br /> en XHTML). Esta etiqueta fuerza al navegador a insertar una nueva línea, pero fíjate como esto sigue sin afectar a los tabuladores y espacios en blanco.

Para los espacios en blanco sobrantes, de nuevo HTML nos da una solución. Esta vez tendremos que utilizar la entidad HTML &nbsp;. Esta entidad fuerza al navegador a mostrar un espacio en blanco (fíjate que para separar palabras no es necesario porque ese es el único espacio en blanco que HTML trata de forma automática). Por ejemplo:

Como curiosidad te puedo decir que &nbsp; significa NonBreakingSpace y que además de forzar al navegador a mostrar espacios en blanco, tiene otro efecto no tan obvio y es que fuerza al navegador “a no partir los textos”. Es decir, si yo escribo en HTML “Sergio”, jamás veré “Ser” en una línea y “gio” en otra (esto de cajón, ¿Quién se cree HTML para partir mí nombre?).

Pues bien, si escribo “Sergio&nbsp;León” pasará exactamente lo mismo, siempre veré Sergio seguido de León. Un momento… ¡Entonces esto significa que nunca mi apellido se mostrará en una nueva línea! ¿Era esto lo que quería? Lo cuento así porque lo que intento evitar es la “sobredosis de &nbsp;” (que te juro existe y puede ser un dolor de cabeza). De hecho, si lo que quieres es que no se parta el texto, lo que debería utilizar es la propiedad white-space y el valor nowrap.

Finalmente, la conclusión a la que llegamos es que da igual como luzca nuestro código  HTML (en lo relativo a espacios en blanco), porque después el navegador lo interpretará como es menester. Y que además tenemos que tener cuidado con &nbsp; porque recuerda: “es un espacio en blanco no divisible”.

Un saludo!