91 109 05 02 info@impactoseo.com

Vamos a descubrir cómo dejar  espacio en HTML. Según la clase de espacio en blanco que quieras insertar tendrás que utilizar la etiqueta “ » para un espacio simple o
para un salto de línea. Internet no sería tal y como lo conocemos sin la aparición del lenguaje HTML, sin ninguna duda el lenguaje más importante en el desarrollo de la World Wide Web. Un estándar compartido por millones y millones de páginas web y custodiado por la World Wide Web Consortium, responsable de la estandarización de las tecnologías web con el objetivo de facilitar la conectividad de la red. En uno de nuestros artículos anteriores ya os hablamos de cómo hacer tablas en HTML. Hoy vamos a descubrir cómo insertar espacios en blanco en este mismo lenguaje.

 

Código HTML

En la estructura html los elementos que insertamos forman parte de un código que será descifrado por el navegador y expuesto al usuario. Esto quiere decir que no lo veremos como será mostrado o como lo verán los usuarios. Nosotros en html vemos simplemente el código, compuesto por una serie de etiquetas que tienen diferentes significados. Por lo tanto, para dejar espacio en html, tendremos que insertar su etiqueta correspondiente y después podremos comprobar el resultado estético desde la web en activo. El contenido de un documento html es el body html y solo puede haber uno por documento. Dentro del body incluiremos todas estas etiquetas y el contenido que queremos que aparezca en la web.

Espacio HTML

Imagina que quieres insertar espacios entre caracteres. Solo tienes que clicar en la barra espaciadora de tu teclado y todos tus deseos se hacen realidad. Crearás espacio entre palabras de manera automática Fácil, ¿verdad? Pero ahora imagina que quieres añadir más de un espacio. No importa si es entre palabras, entre párrafos u entre otros elementos. No importa porque el navegador solo interpretará todos esos espacios como un único espacio. Recuerda que el código HTML es un código texto que los navegadores interpretan y devuelven al usuario. Son ellos quienes muestran la web en base al código y su manera de leer. Por lo tanto, aunque introduzcamos varios espacios con la barra espaciadora en el código, en el exterior solo se vera un espacio. 

Espacio en blanco

Cualquier cadena de texto que se componga únicamente por espacios o por tabulaciones o saltos de línea será un espacio en blanco. En el código html los espacios en blancos son ignorados en gran medida. Aunque añadamos 20 espacios con nuestra barra espaciadora, desde el exterior solo veremos un espacio. La verdad es que para el código se tratan simplemente como un carácter ¿Qué quiere decir esto? Que si yo decido escribir en el código el siguiente encabezado :

 

espacios en blanco en html

El usuario que acceda a mi web desde el exterior lo que vera será el encabezado de esta forma:

hola mundo sin espacio

 

Efectivamente, aunque en el código haya añadido más espacio, desde el exterior mis usuarios solo verán un espacio equivalente a un carácter. Además, esto no solamente se aplica a los espacios creados con la barra espaciadora, lo cierto es que html tampoco tiene en cuenta ni las tabulaciones ni los saltos de línea. Esto quiere decir que todos los espacios generados gracias a las teclas «Tab» o «Enter» serán obviados en el código y , por lo tanto, no serán visibles desde fuera. En su lugar, el código html interpretara todos estos saltos como un simple espacio en blanco. Esto puede ser útil, en cierta manera, para ayudar a organizar el código. Sin embargo, es inútil si lo que queremos es conseguir un contenido estético y legible de cara a los usuarios. Pero entonces ¿Qué debo hacer si quiero que hayan más espacios en mi contenido? ¿es imposible hacerlo en html? Si no fuera posible crear estos espacios en el cogido la mayoría de las páginas webs presentarían un estado realmente lamentable de cara a sus usuarios. Claro que puedes crear espacios y separar tu contenido de manera estética, pero debes utilizar las etiquetas correspondientes para cada clase de espacio en blanco, según el que te interese dejar en cada momento.

 

Código espacio en blanco HTML

Sin embargo, cuando hablamos de dejar un espacio en blanco, lo primero que debernos decidir es que clase de espacio en blanco estamos buscando. Es decir, existen diferentes tipos de espacios en blanco. Puede que , como en el ejemplo anterior, nos interese dejar solamente más espacios entre varias palabras. Sin embargo, en otras ocasiones podemos estar buscando separar un párrafo, ya sea para destacarlo o para diferenciarlo de los otros bloques de texto que lo rodean. De la misma forma, podemos querer añadir un salto de línea. Por último, podríamos querer crear un espacio tabulado, es decir, varios espacios agrupados, normalmente un espacio equivalente a 8 caracteres. De esta forma, según la clase de espacio que queramos añadir en nuestro código tendremos que incluir una clase de etiqueta u otra. Por lo tanto, cada clase de espacio en blanco tiene un método diferente de ser insertado en la web. A fin de cuentas, como hemos visto, el código html ignora en cierta medida los espacios, por lo que no te bastará con dar a intro o pulsar más veces tu barra espaciadora.

 

Insertar varios espacios en blanco en html

Por tanto, si los navegadores son incapaces de detectar que más de un espacio implica más de un espacio, y todo cuanto hacen es añadir un único espacio HTML, tendremos que implementar alguna acción especial con la meta de que los usuarios vean todos esos espacios que queremos mostrar. ¿Cómo? Pues mediante la incorporación al documento HTML de una etiqueta muy concreta. La entidad  .  El funcionamiento es muy sencillo. Si deseas agregar dos espacios en blanco tendrás que añadir dos  . Si deseas agregar tres espacios en blanco tendrás que añadir tres  . Y si deseas agregar catorce espacios lo que tendrás que hacer es añadir catorce  . Puras matemáticas. Nada que no podamos entender y realizar con suma sencillez. Por ejemplo, para incluir dos espacios en blanco HTML en “Somos ImpactoSEO” tendremos que escribir lo siguiente: “Somos     ImpactoSEO”

 

 

Salto de línea HTML

Lo mismo ocurre con los párrafos. Aunque nosotros añadamos un espacio mediante la barra espaciadora, todos los navegadores mostrarán las líneas de manera consecutiva y sin espacio. Es decir, carecerán del salto de línea que deseamos. ¿Cómo evitamos esto? Pues mediante el empleo de otra etiqueta HTML llamada etiqueta línea BR, más conocida como elemento break. Su forma código sería
. Este código de espacio en HTML lo incorporamos al final de una línea para que visualmente salte a la siguiente. Es decir, la etiqueta
sirve para realizar un salto de línea en html
. Esta etiqueta puede ser introducida tanto como
como por
y se interpretará de la misma forma. Esto es así porque no es una etiqueta html que sea necesario abrir y cerrar, sino que simplemente con incluirla el navegador sabrá interpretarla.

Espacio entre párrafos

Si lo que queremos es indicarle al navegador la existencia de párrafos tenemos que utilizan otra etiqueta HTML de espacio. En este caso, la etiqueta de apertura

y su etiqueta de cierre

. Poniendo un texto entre estas dos etiquetas le indicamos al navegador que se trata de un párrafo diferenciado del resto de contenido, lo que le lleva al navegador a situar un espacio en blanco por encima de este párrafo y un espacio en blanco por debajo. Una manera de estructurar nuestra información en bloques. De esta forma, al añadir al principio de un párrafo la etiqueta

y al final del mismo

, conseguiremos que el párrafo tenga un espacio al principio y al final del mismo.

 

Espacios tabulados

En html no existe un código o una etiqueta que sea equivalente a «Tab». Sin embargo, si necesitas introducir un texto tabulado hay formas con las que poder conseguir el mismo efecto visual fácilmente desde html. Por ejemplo, puedes utilizar varios espacios en blanco incluidos juntos para agregar el espacio que correspondería a la tabulación. De esta forma podrás simularla siempre que necesites. Deberías incluir, por tanto, en la zona del contenido que te interese la tabulación lo siguiente:      Como ya hemos visto, cada   equivale a un espacio en blanco, por lo que si añadimos 3 o 4 y usamos siempre el mismo número al comienzo de cada párrafo o frase que queramos tabular, conseguiremos el mismo efecto desde el exterior.

Etiqueta pre

La etiqueta pre o texto preformateado html es la favorita de muchos, ya que indica al código que queremos que el contenido introducido se muestre exactamente como lo introducimos en el código. Esto implica que su formato y características sean fijas y determinadas. De esta forma, podemos insertar exactamente cómo queremos que se muestre. Es decir, podremos añadir espacios directamente sin la necesidad de añadir más etiquetas , ya que se mostrará exactamente como lo introduzcamos.

Códigos en la web

Como ves, existen muchas herramientas HTML a través de las cuales puedes aplicar espacios visuales a la web. Lo importante es conocerlas todas para conseguir los efectos deseados. Recuerda que, sin dichos códigos en tu web, el navegador obviará los espacios y mostrará el contenido sin ellos. Un error, por supuesto, ya que afectaría a la estética de la web, a la usabilidad de la web y a la credibilidad de la web. Así que, aunque no seas un experto en Javascript, ahora que sabes cómo hacerlo, no olvides incluir espacio en blanco HTML en tus páginas.