Dentro de un texto, los espacios son componentes ortográficos cuya función es separar los términos utilizados. Por convención, se definen como zonas vacías o “blancas”, es decir, sin contenido, entre una palabra y la siguiente; por eso hablamos específicamente de separadores entre palabras.
Pero, ¿cómo se tratan estos elementos dentro de una página Web? Para responder a esta pregunta hay que remitirse a HTML, el lenguaje de marcado que permite definir la estructura lógica de una página de Internet.
Los Espacios y las Nuevas Líneas en el Código no se Procesan
En HTML5, el denominado “espacio normal”, correspondiente al código de caracteres Unicode U+0020, no está asociado a ningún valor lingüístico y, por tanto, se interpreta como un espacio en blanco. Cuando se inserta incluso secuencialmente en un elemento HTML, ya sea utilizando la barra espaciadora del teclado o mediante un simple copiar y pegar, se trata por defecto como un separador entre palabras.
Un separador entre palabras vacío es, por su propia naturaleza, un único elemento, de hecho, a efectos ortográficos no hay necesidad de separar dos términos con más de un espacio, esto significa que dentro del texto de una página HTML varios “espacios normales” se reducirán a uno en el momento de la renderización, los demás se colapsarán y, aunque estén presentes en el código de la página, no serán devueltos como salida por el navegador.
Las únicas excepciones son los espacios en blanco dentro del contenido entre las etiquetas <pre>..</pre>, que de hecho definen texto preformateado, y el contenido delimitado por ellas conserva tanto los espacios como los saltos de línea.
Gestión de Espacios en Blanco en HTML: 3 Maneras
Estrictamente hablando, no existe ningún elemento que nos permita definir espacios en HTML. Sin embargo, existen soluciones para añadir espacios dentro de nuestros textos, que se conservarán en la representación visual. Así, podemos:
- Utilizar la etiqueta de preformateo HTML pre;
- Utilizar entidades HTML;
- Utilizar márgenes CSS.
Espacio HTML con Etiqueta pre
Por poner un ejemplo al respecto, es posible insertar una misma cadena de texto tanto entre las etiquetas de párrafo, <p>..</p>, como entre las ya mencionadas <pre>..</pre>. En el primer caso el código:
<p>HTML: es el cimiento invisible pero poderoso que sustenta la belleza y funcionalidad de la web.</p>devolverá una salida de este tipo en la que los múltiples espacios presentes entre los dos puntos (“:”) y la letra “e” posterior se reducen a uno:
HTML: es el cimiento invisible pero poderoso que sustenta la belleza y funcionalidad de la web
En el segundo caso, sin embargo, el código:
<pre>HTML: es el cimiento invisible pero poderoso que sustenta la belleza y funcionalidad de la web.</pre>devolverá:
HTML: es el cimiento invisible pero poderoso que sustenta la belleza y funcionalidad de la web
Ten en cuenta que los espacios en blanco colocados fuera de <pre>..</pre> no impiden la generación natural de un salto de línea y la posible creación de una nueva línea durante el renderizado, la disposición de un contenido se adaptará sin embargo al tamaño de la ventana actual, al contenedor en el que se inserte, a las características de la fuente elegida y al estilo CSS aplicado.
Más sencillamente, los espacios en blanco no determinan ninguna restricción para la creación de un salto de línea a partir de un punto específico de una cadena; en su lugar, HTML requiere el uso de la etiqueta <br /> para forzar un salto de línea.
Espacios HTML con Entidad
Mientras que un espacio en blanco representa un elemento separador, por el contrario es un elemento unificador, la subcadena “nbsp” del nombre se refiere de hecho al acrónimo inglés NBSP que significa “Non Breakable SPace“, literalmente: espacio no divisible. Dicho esto, un solo constituye una forma alternativa de representar un espacio. 2 generará dos espacios visibles para el navegador, 3 generará 3 espacios visibles y así sucesivamente.
no permite la división de cadenas, no permite el salto de línea y admite la creación de secuencias compuestas por varios espacios, esto se debe a que una entidad de este tipo nunca se colapsa durante la renderización.
Un ejemplo práctico nos ayudará a comprender mejor los conceptos expuestos. Una cadena escrita de esta forma:
HTML es el cimiento invisible pero poderoso sobre el cual se construye la arquitectura de la webserá devuelto por el navegador de la siguiente manera:
HTML es el cimiento invisible pero poderoso sobre el cual se construye la arquitectura de la webNota
se interpretará entonces como 4 espacios en blanco.
y Entidades HTML Alternativas
no es la única solución que ofrece HTML para la representación de espacios, también existen entidades:
 (« en space ») genera en salida un espacio mayor que nbsp;, correspondiente aproximadamente al doble. (« em space »): genera un espacio aproximadamente el doble de grande que y cuatro veces más grande que , se utiliza generalmente para enfatizar. (« thin space »): nos permitirá crear un espacio muy fino (medio espacio).
Como puedes ver, los espacios están bien creados. Aquí sólo he utilizado una entidad entre cada carácter, pero nada te impide utilizar varias seguidas.
En general, conviene recordar que el uso de las entidades HTML descritas hasta ahora sólo es práctico para operaciones sencillas de espaciado entre elementos de contenido. Para procedimientos más complejos, es aconsejable el uso de construcciones CSS, como la propiedad text-indent para la sangría.
