HTML: Espacios en blanco

HTML es un lenguaje que hace un tratamiento un tanto especial de los espacios en blanco. Si dentro de un párrafo introducimos varios espacios en blanco consecutivos (Spacebar), tabulaciones (Tab) y nuevas líneas (retorno de carro: Enter), los considerará como un único espacio en blanco, ignorando el resto.

En el siguiente ejemplo hemos añadido de forma deliberada los tres casos mencionados: varios espacios consecutivos, tabulaciones y nuevas líneas:

<p>Esto es
      un
          párrafo.</p>

HTML ignora estos espaciados, transformando los múltiples espacios consecutivos en uno solo, además de convertir tabulaciones y nuevas líneas en un espacio. El resultado del código anterior se verá así:

Esto es un párrafo.

Si por alguna razón queremos introducir espacios adicionales consecutivos podremos hacerlo con la entidad &nbsp;. De esta manera se puede incrementar el espaciado fácilmente. Tal y como se puede ver, este método es muy diferente al utilizado para introducir líneas nuevas (<hr>), ya que lo hacemos con una entidad semántica sacada del ISO 8859-1 (Latin).

Las entidades semánticas tienen una estructura muy peculiar, y se reconocen en seguida porque empiezan con el símbolo & y terminan con un punto y coma ;. Gracias a ellas se pueden introducir caracteres especiales. Veremos muchas más entidades a lo largo de este curso.

Veamos un ejemplo introduciendo cuatro espacios consecutivos:

<p>Aquí hay cuatro&nbsp;&nbsp;&nbsp;&nbsp;espacios.</p>

Y este será el resultado:

Aquí hay cuatro    espacios.

Significado de NBSP

Las siglas NBSP corresponden a «Non-Breaking SPace», es decir, que se trata de un espacio irrompible. También se le conoce como espacio duro o espacio fijo. Recordar la definición en inglés ayuda a recordar el orden de sus siglas. Otra forma de escribirlo es usando referencias numéricas del HTML: &#160; y &#xa0;, que darán como resultado el mismo espacio irrompible.

Casos de uso

El espacio duro se puede usar si queremos que dos palabras no se separen cuando se ajuste el texto al tamaño de la ventana. Puede ser el caso de palabras que formen una marca. Por ejemplo, si escribimos ¡Hola,&nbsp;mundo!, el navegador las mantendrá unidas, sin separarlas, incluso cambiando el tamaño de la ventana.

También se puede usar si queremos o necesitamos evitar que el navegador web agrupe todos los espacios en uno solo. A veces es útil para alinear o para incrementar el espaciado en algún caso concreto. Podremos utilizar la entidad &nbsp; tantas veces como sea necesario.

En ocasiones se necesita usar el espacio duro entre dos palabras o algunas cifras con el objetivo de preservar un grupo de datos o un bloque de información, sin que se rompa la unidad conceptual hasta saltar al siguiente renglón o columna.

← Artículo anterior
HTML: Enlaces
Artículo siguiente →
HTML: Preformateado