Para la mayoría de los mortales darle formato al texto es una de las tareas más aburridas en la publicación de un post. Por suerte los editores de texto que integran CMS como WordPress facilitan mucho las cosas y el usuario promedio no necesita saber nada de HTML para llevar su blog. Aún así, siempre viene bien conocer algo de HTML, por el mismo motivo que es bueno aprender a multiplicar a pesar de que siempre uses la calculadora: nunca sabes cuando te va a hacer falta. En esta ocasión quiero enseñarte los códigos espacio en blanco en HTML y salto de linea en HTML.

No se a ti, pero a mi me ha pasado alguna vez que el editor de WordPress no respetaba los espacios que dejaba entre parrafos y los tenia que meter yo a mano en el codigo. Así que puedo decir que estos códigos me han salvado la vida alguna que otra vez.

Cómo poner espacios en blanco y saltos de linea en HTML

Tipos de espacios en blanco en HTML

En el lenguaje HTML se consideran espacios en blanco estos cuatro casos:

  • Espacios entre palabras
  • Tabulador
  • Retorno de carro
  • Salto de línea

Por defecto, el HTML ignora los espacios en blanco “sobrantes”, que en este caso son todos los que no son el espacio en blanco que separa las palabras. Para que lo entiendas, te pongo un ejemplo. Si escribes el siguiente texto en HTML:

Hola,

me llamo

William Penguin

Cuando se publique en una web se va a ver así:

Hola, me llamo William Penguin

¿Lo ves? Aparece todo junto porque el HTML no reconoce esos saltos de línea. Para que lo haga es necesario usar alguna de las etiquetas que te presento a continuación:

Etiqueta <br> para saltos de linea HTML

La etiqueta <br> es una etiqueta vacía, es decir, no hace falta poner una etiqueta de apertura y otra de cierre. El equivalente a esta etiqueta es pulsar el Intro (o Enter) al estar escribiendo, se inserta un salto de línea.

De este modo, el texto anterior quedaría como:

Hola, <br>

me llamo <br>

William Penguin

Etiquetas <p></p> para saltos de linea

Otra forma de meter saltos de línea, quizás más elegante, es encerrar el párrafo entre las etiquetas <p> y </p>. Tendríamos algo así:

<p>Este es un ejemplo de párrafo que usa la etiqueta que acabamos de presentar.</p>

<p>Este párrafo quedaría separado del anterior por un salto de linea.</p>

¿Cuál de las dos etiquetas anteriores conviene usar? Puedes optar por la que más te guste. Yo suelo usar <br> cuando solo tengo que meter un salto de linea aislado y <p> cuando todo el texto aparece sin saltos de linea.

Etiqueta &nbsp para espacios HTML en una misma linea

Pero, ¿qué pasa cuando quieres meter espacios adicionales entre palabras dentro de una misma línea? Por ejemplo, poner algo como esto:

Hola,   me   llamo   William   Penguin.

Pues para eso también hay un código especial: &nbsp;

Este código equivale a un solo espacio en blanco. Empleando este fragmento de código, la frase anterior quedaría como:

Hola, &nbsp; &nbsp; &nbsp; me &nbsp; &nbsp; &nbsp; llamo &nbsp; &nbsp; &nbsp; William &nbsp; &nbsp; &nbsp; Penguin.

Etiqueta <pre></pre> para respetar el formato de espacios en blanco en HTML

En otras ocasiones puede ser cansado maquetar un texto en HTML y quieres que el texto que introduces en la web mantenga el formato de espacios en blanco con el que lo has escrito. Para eso están las etiquetas <pre> y </pre>.

Solo tienes que introducir el texto entre esas dos etiquetas parra que el formato se respete. Ejemplo:

<pre>

Hola,

me llamo

William                 Penguin

</pre>

Espero que conocer los códigos HTML para espacios en blanco y saltos de línea te sirvan de ayuda.

Te deSEO un buen día,

William Penguin.