Cómo insertar espacios en HTML

Cómo insertar espacios en HTML

El lenguaje HTML, utilizado para la creación y el desarrollo de páginas web, permite insertar espacios en blanco, tabulaciones y saltos de línea. Para ello, es necesario el uso de las llamadas "etiquetas" (tags) , en este artículo te enseñamos cómo utilizar las etiquetas para no tener problemas cuando el navegador interprete tú código.

¿Cómo crear párrafos en HTML?

Para crear un párrafo, con sus respectivos espacios de separación encima y debajo del texto, se debe emplear la etiqueta p y su correspondiente etiqueta de cierre /p. Veámoslo con un ejemplo:

<html>
 <body>
  <h3>Crear párrafo HTML</h3>
  <p>Bienvenidos a mi sitio web dedicado a la tecnología.</p>
  <p>Espero servirles de gran ayuda.</p>
 </body>
</html>

Este código provocará un salto de línea y añadirá una línea adicional después de Bienvenidos a mi sitio web dedicado a la tecnología, como vemos a continuación:

¿Cómo agregar saltos de línea en HTML?

Ahora vamos a hablar de la etiqueta br. Su uso es sencillo, se trata de introducir este tag tantas veces como saltos de línea quieras insertar. En este caso no es necesario utilizar la etiqueta de cierre. Por ejemplo, el siguiente código agrega dos saltos de línea antes de ¡Hola Mundo!:

<html>
 <body>
  <h3>Saltos de línea en HTML</h3>
  <br><br>¡Hola Mundo!
 </body>
</html>

Podemos observar el resultado a continuación:

¿Cómo agregar más de un espacio o espacios en blanco en HTML?

Para agregar un espacio entre caracteres o más de un espacio entre palabras, debemos insertar la entidad de carácter. ¿Cómo? Incluyéndola tantas veces como espacios en blanco desees mostrar. Veamos un ejemplo:

<html>
 <body>
  <h3>Espacios en blanco HTML</h3>
  <br><br>¡Hola  Mundo!
 </body>
</html>

Este código mostrará dos espacios (el primero lo realiza por defecto) después de ¡Hola, en la frase ¡Hola Mundo!:

¿Cómo insertar un tabulador en HTML?

Una manera sencilla de realizar la tabulación en HTML es con la entidad mencionada anteriormente. Se trata de introducirla 4 o 5 veces seguidas en el lugar donde se desea aplicar la tabulación:

<html>
 <body>
  <h3>Tabulación en HTML</h3>
  <p>    ¡Hola Mundo!</p>
 </body>
</html>

Y el resultado obtenido es:

¿Cómo insertar un bloque de texto pre-formateado en HTML?

Existe una etiqueta de gran utilidad que permite interpretar el texto tal y como está escrito. A continuación mostramos el correcto uso del tag pre, el cual siempre debe ir acompañado por correspondiente etiqueta de cierre /pre:

<html>
 <body>
  <h3>Texto preformateado en HTML</h3>
  <pre>Bienvenidos a mi sitio web sobre tecnología.
 

Espero servirles de gran ayuda.</pre>
 </body>
</html>

El resultado de este HTML es:

Alrededor del mismo tema

Lenguajes