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
    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...

    Compras online vía móvil 14/06/2019 Compras online vía móvil, el futuro del comercio electrónico

    Las compras online vía móvil han experimentado un ascenso espectacular en los últimos años. El tráfico a través de...

    como enviar un correo electronico por gmail 19/11/2018 Cómo enviar un correo electrónico por Gmail paso a paso

    Todavía hay gente que no sabe como mandar un correo electrónico y no le pregunta a nadie por miedo a quedar...

    poner un hipervinculo en word 26/10/2018 Cómo crear un hipervínculo en Word paso a paso

    Para el post de hoy vamos con algo sencillito pero que, por lo visto, mucha gente aún no sabe...

    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