4 formas de insertar un espacio en HTML (guía fácil)

A pesar de que HTML suele ser un lenguaje altamente intuitivo, en algunas ocasiones quienes apenas se están familiarizando con él pueden tener problemas para entender algunos de sus comportamientos. Si este es tu caso podrías preguntarte, por ejemplo, ¿cómo puedo añadir más de un espacio entre dos palabras o caracteres en HTML?

El sentido común nos diría que tenemos que presionar el espaciador dos veces ¡y listo! ¿Pero es realmente esta la manera correcta de hacerlo?

Infortunadamente, las cosas no son tan sencillas en este lenguaje de programación. Si quieres añadir muchos espacios adyacentes dentro de tu documento no bastará con presionar el espaciador en múltiples ocasiones. Por el contrario, no importa cuántos espacios introduzcas, el sistema lo reducirá siempre a uno.

Este comportamiento es conocido como colapso de espacios en blanco, o «whitespace collapse» en inglés, y consiste en que los navegadores mostrarán los espacios contiguos de tu código en HTML como uno solo y, a su vez, ignorarán los espacios que están antes y después de elementos o que se encuentran fuera de ellos.

Aunque esta regla puede parecer inconveniente, existen algunos trucos que todo programador principiante de HTMLldebe conocer para salir de este callejón. Para ayudarte a que tu contenido funcione tal como quieres, en este artículo te mostraremos cuatro métodos rápidos para poner espacios adicionales en tus documentos de HTML, así como algunos consejos para hacerlo en CSS.

Cómo insertar un espacio en HTML

HTML es el lenguaje encargado de manejar el contenido de una página web. Si tu contenido requiere espacios adicionales para tener sentido, puedes probar con alguno de los siguientes métodos.

Si, por otro lado, quieres añadir espacios por algún motivo estético o de presentación (como para separar elementos visualmente), te recomendamos usar CSS. Al final de este artículo trataremos este tema.

Espacio duro ( )

El modo más sencillo para añadir un espacio en HTML (además, por supuesto, de la tecla espaciadora) es con la instrucción de espacio duro que puedes añadir en tu texto con la entidad   o  .

Con esta simple técnica el navegador no romperá tus espacios y lograrás hacer que en tu texto final sean visibles los espacios que hayas colocado entre elementos y palabras de tu página.

Al ser renderizado en el navegador, el espacio lucirá como un espaciado normal. La única diferencia es que este espacio no se separará en una nueva línea. Por ejemplo, dos palabras o elementos separados por &nbsp siempre aparecerán en la misma línea. Esta entidad es especialmente útil si no quieres dividir dos piezas de tu texto, como en el caso de que requieras escribir «9:00 AM» o «1 000 000».

Por otro lado, puedes usar algunas entidades alternativas de HTML como   y   para añadir dos o cuatro espacios respectivamente:

Mientras que &nbsp puede ser útil en algunas situaciones, no debe utilizarse de manera excesiva, ya que evitar saltos de línea puede causar problemas en el renderizado del contenido en el navegador. Por otro lado, debes omitir el uso de instrucciones para no separar espacios por motivos visuales o de estilo; esto corresponde a CSS.

Elemento de texto preformateado (<pre>)

Otro modo para evitar que tus espacios en HTML colapsen es preformatear tu texto. Esto te ayudará a mantener todos los espacios y saltos de línea en tu texto HTML. Al ser renderizado, tu texto lucirá tal y como luce en tu documento de HTML. El preformateado es excelente para el texto que solo adquiere sentido cuando va acompañado de un elemento visual, como la poesía o el arte ASCII.

Para preformatear tu texto únicamente deberás insertarlo dentro del elemento <pre>:

En este ejemplo puedes notar que el navegador ha aplicado una única tipografía al texto que está dentro del elemento <pre>. Esto puede modificarse más adelante en tu código CSS mediante el uso de otros formatos de letras.

Elemento de salto de línea (<br>)

Como hemos revisado, si quieres evitar que una línea sea separada justo en medio de una palabra debes utilizar espacios duros. Si, por el contrario, quieres insertar un salto de línea, lo que debes hacer es utilizar el elemento <br>. En este caso no necesitarás cerrar el elemento, sino únicamente añadirlo en el lugar de la línea donde necesitas el salto.

Este elemento es útil cuando se necesita un salto de línea para entender el contenido, y cuando no quieres usar un elemento de párrafo. Un buen ejemplo de esto son las direcciones postales:

El elemento de salto de línea está diseñado para saltos simples y no para realizar más de un salto a la vez. Si quieres añadir espacios adicionales entre piezas del texto, deberás emplear márgenes de CSS. Esto ayudará a mantener tu código más limpio. Otra alternativa es usar el elemento <p>. Veamos cómo funciona.

Elemento párrafo (<p>)

El elemento párrafo es uno de los primeros que deben dominar los programadores por una buena razón: este elemento denota un párrafo en HTML, por lo que aparece en todos lados.

<p> es un elemento que funciona en bloques. Esto significa que (1) su tamaño predefinido es el ancho de una página entera y (2) que hay un salto de línea antes y después del elemento párrafo. Con esta instrucción los navegadores añaden espacios adicionales para hacer que los párrafos consecutivos se lean más fácilmente; por lo que puede utilizarse en cualquier momento, si tienes bloques de texto que requieren una separación.

El elemento párrafo tiene la ventaja de ser un elemento semántico de HTML. Esto significa que por sí mismo el elemento indica qué hace (o sea, que el elemento párrafo denota un párrafo del texto). Esto permite que tu contenido sea más accesible para tecnologías de asistencia y ayuda a que los motores de búsqueda encuentren tu sitio web.

Cómo insertar un espacio en CSS

Para añadir espacios que tienen más que ver con el estilo y presentación del contenido de una página y no tanto con el contenido, lo mejor es utilizar hojas de estilo en cascadas (o CSS, por sus siglas en inglés). Con este lenguaje puedes modificar el espacio de tu página y aplicar reglas de estilo con simples instrucciones en lugar de cambiar cada elemento de tu texto en HTML. Solo deberás asegurarte de añadir CSS externamente.

Continúa leyendo para descubrir algunos consejos para añadir espacios en tus documentos con CSS.

Sangría de texto

Para añadir sangrías en tu documento lo único que tienes que hacer es añadir una indentación antes del elemento párrafo. Esto lo puedes hacer con la instrucción text-indent, seguida del número de espacios que quieras añadir. Por ejemplo, si quieres 4 espacios, deberás escribir text-indent: 4em; a tu elemento. Puedes también utilizar unidades en px o cm (o incluso designar un porcentaje de sangría respecto al ancho de la página).

Al usar esta técnica puedes alargar o acortar todas tus sangrías de forma rápida y sencilla. Solamente deberás cambiar el valor del espacio deseado. Esto es mucho más fácil que añadir o remover elementos para cada párrafo con sangría en HTML.

Alineación de texto

En lugar de usar espacios en HTML para alinear tu texto de cierta manera, puedes emplear una solución más limpia y sencilla, como la propiedad de alineación de texto de CSS. Con ella puedes alinear el texto dentro de un bloque a la izquierda o a la derecha, y darle un formato centrado o justificado.

Márgenes y rellenos

Con CSS puedes añadir márgenes (margins) y relleno (padding) a todos tus elementos de HTML, como puedes ver en el siguiente modelo:

Para añadir espacios fuera de los bordes de un elemento bastará con ajustar el valor del margen en CSS. Para dar espacios dentro de los bordes, podemos alterar el valor de relleno para obtener un resultado similar. En el siguiente ejemplo puedes ver las diferencias del uso de estas herramientas:

Añadir espacios adicionales en HTML

El colapso de espacios en blanco puede ser frustrante. Por fortuna, existen diferentes trucos que puedes utilizar para no limitar tu creatividad. Ahora que conoces los elementos básicos para llevar a cabo esta tarea, puedes comenzar a construir desde cero tus propios sitios web.

Como recordatorio, asegúrate de utilizar los elementos diseñados para HTML siempre que quieras jugar con los espacios de tu contenido y emplea las herramientas de CSS solamente para darle estilo.