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   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:
Este código equivale a un solo espacio en blanco. Empleando este fragmento de código, la frase anterior quedaría como:
Hola, me llamo William 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.