Contenidos

    alt

    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.

    Artículos Relacionados
    OK google configuracion 05/06/2020 OK Google, La nueva novedad de tu dispositivo

    "Ok Google" Es la nueva novedad de tu dispositivo que te permite usar el buscador Google utilizando la voz...

    Chat Social 05/06/2020 ¿Qué es el Chat Social? ¿Para que se usan?

    Muchos no habréis vivido la época del social chat y os preguntareis, ¿Qué es el chat social?...

    cambiar contraseña gmail 29/05/2020 ¿Cómo cambiar la contraseña de Gmail? Restablecer cuenta Google

    ¿Necesitas cambiar la contraseña de tu cuenta de Gmail? El proceso es fácil y sencillo, te cuento cómo hacerlo...

    22/07/2019 El http error 404: qué es, solución y de qué manera afecta al SEO

    Uno de los mayores temores de los webmasters es, sin duda, que aparezca algún error en el servicio de...

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    1. Avatar Carlos dice:

      Siempre es bueno recordar conceptos de html