Usando el salto de línea en HTML: espacios y divisiones

| Última modificación: 8 de abril de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

HTML es el lenguaje de marcado que se usa para estructurar el contenido en la web. Una de las etiquetas más polémicas, aunque muy básicas en este lenguaje es la de salto de línea en HTML: <br>. Algunos pueden decirte que es una mala práctica usarla, pero vamos a profundizar un poco en esto y verás que, aunque no siempre es la mejor opción, hay momentos en los que sí tiene sentido implementar saltos de línea en HTML.

¿Qué es <br>?

Primero, necesitamos entender exactamente qué es un salto de línea en HTML o, lo que es lo mismo, qué es la etiqueta <br>. Esta etiqueta representa un salto de línea en HTML, es decir, es como pulsar la tecla “Enter” en tu procesador de texto. Pero, a diferencia de la tecla “Enter”, la etiqueta <br> no tiene una etiqueta de cierre. Sí, has leído bien, es una de esas pocas etiquetas en HTML que se consideran vacías y no necesitan cerrarse.

Te lo mostramos con un ejemplo de código:

<p>Este es el inicio de un párrafo.<br>Y este es el inicio de la siguiente línea después del salto.</p>

Como puedes observar en esa línea de código, dentro de las etiquetas de párrafo está la etiqueta de salto de línea en HTML, que te indica dónde está el salto.

Pero ¿no está mal visto usar <br>?

En la comunidad de desarrollo web, hay ciertas voces que condenan el uso de la etiqueta de salto de línea en HTML o <br> para crear espacios en blanco. Incluso hay algunos que evitan usarla. En cierta medida, tienen razón. Si quieres crear espacio entre bloques de contenido, CSS es tu mejor aliado. El uso de margen (margin) y relleno (padding) son las herramientas más apropiadas para ello. El salto de línea en HTML no debería utilizarse para ajustes de diseño.

Un error común sería usar <br> así:

<p>Aquí va un párrafo.<br><br><br>Y aquí otro párrafo después de un montón de espacio en blanco.</p>

En este caso, la intención era usar <br> para darle espacio al texto. Eso, como hemos dicho, no es la mejor práctica. En su lugar, deberías usar CSS para crear el espacio deseado.

¿Cuándo es correcto usar <br>?

Ahora que sabemos que <br> no es una mala etiqueta, sino simplemente una herramienta mal entendida, es hora de aprender cuándo es apropiado usarla.

Usa el salto de línea en HTML o <br> cuando, como su nombre indica, necesitas un salto de línea dentro de un bloque de texto. ¿Un ejemplo? Imagina que estás citando un poema o una canción, donde los saltos de línea son esenciales para mantener la estructura y el ritmo del contenido. Puedes observar con más detalle lo que te queremos decir en este ejemplo:

<p>Oh capitán, mi capitán<br>nuestro temeroso viaje ha terminado,<br>El barco ha superado todos los obstáculos,<br>hemos ganado el premio que ansiábamos.</p>

A pesar de sus atributos globales, <br> se utiliza mejor para mantener la integridad de ciertos tipos de contenido, en lugar de manipular la presentación de tu página. Como todo es práctica, a medida que hagas uso de las diferentes etiquetas que tiene HTML te darás cuenta de cuáles son las que debes usar y en qué momentos específicos.

Ahora que conoces la verdad sobre el uso de saltos de línea en HTML, estás mejor equipado para tomar decisiones informadas sobre cuándo y cómo usar la etiqueta <br>.

Recuerda que este es solo el comienzo. El mundo del desarrollo web es enorme y está en constante cambio. Para mantener el ritmo, necesitas la formación adecuada. Por eso te invitamos a unirte al Desarrollo Web Full Stack Bootcamp de KeepCoding. Aquí no solo aprenderás sobre las etiquetas básicas de HTML, sino que te adentrarás en el fascinante mundo de CSS, JavaScript y mucho más. ¡Entra para solicitar información y cambia tu futuro!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado