La etiqueta BR

La etiqueta BR se utiliza para crear un salto de línea en un documento HTML.

La etiqueta <br> (break = "salto de línea") se utiliza para crear un salto de línea en un documento HTML. Es útil en situaciones donde la estructura del texto requiere divisiones específicas sin cambiar de bloque.

Sintaxis básica

Texto antes del salto<br>
Texto después del salto

  • Es un elemento vacío (no necesita etiqueta de cierre).

  • En XHTML se escribe <br />, pero en HTML5 basta con <br>.

Casos de uso comunes

Direcciones o información con formato específico

<p>
  Calle Falsa 123<br>
  Ciudad Ejemplo<br>
  País Imaginario
</p>

Poemas, letras o textos con estructura de versos

<pre>
  Rosas son rojas,<br>
  Violetas son azules,<br>
  Este poema es simple,<br>
  Pero ilustra el uso de &lt;br&gt;.
</pre>

Separar elementos en línea

<label>Nombre:</label><br>
<input type="text"><br>
<label>Correo:</label><br>
<input type="email">

Buenas prácticas y advertencias

Usos recomendados

  • Cuando el formato del contenido requiere saltos de línea significativos (ej: direcciones, poemas).

  • En textos donde los espacios en blanco no se preservan (HTML colapsa múltiples espacios y saltos de línea).

Malas prácticas

  • No usar para espaciado visual entre elementos de bloque (mejor usar CSS margin o padding):
<!-- Incorrecto -->
<h1>Título</h1>
<br><br>
<p>Texto</p>

<!-- Correcto -->
<h1 style="margin-bottom: 2rem;">Título</h1>
<p style="margin-top: 1rem;">Texto</p>
  • Evitar múltiples <br> consecutivos para crear espacios grandes.

Accesibilidad

  • Los lectores de pantalla ignoran los saltos de línea si se usan incorrectamente.

  • Alternativas accesibles:

    • Usar <p> para párrafos.

    • Emplear listas (<ul>, <ol>) para elementos separados.

    • Utilizar CSS (white-space: pre-line) para preservar saltos de línea en texto.

Control con CSS

En muchos casos, es mejor usar CSS en lugar de <br>:

Espaciado entre elementos

.espaciado {
  margin-bottom: 20px;
}

Preservar saltos de línea en texto

<p style="white-space: pre-line">
  Este texto
  mostrará los saltos
  de línea naturales.
</p>

Ejemplos prácticos

Ejemplo 1: Dirección con saltos de línea

<address>
  Oficina Principal<br>
  Avenida Digital 456<br>
  Piso 8, Oficina 802<br>
  TechCity
</address>

Ejemplo 2: Evitar múltiples <br>

<!-- Incorrecto -->
<p>
  Primer párrafo<br><br><br>
  Segundo párrafo
</p>

<!-- Correcto -->
<p style="margin-bottom: 3em;">Primer párrafo</p>
<p>Segundo párrafo</p>

Comparación: <br> vs <p>

Característica <br> <p>
Tipo de elemento En línea Bloque
Uso Salto de línea dentro de texto Separación de párrafos
Espaciado predeterminado Ninguno Margen superior e inferior
Semántica Neutral Define un párrafo

Errores frecuentes

Usar <br> como separador de secciones:

<!-- Incorrecto -->
<section>Contenido 1</section>
<br><br>
<section>Contenido 2</section>

<!-- Correcto -->
<section style="margin-bottom: 40px;">Contenido 1</section>
<section>Contenido 2</section>

Olvidar que HTML colapsa espacios:

<!-- Resultado: "Hola Mundo" en una línea -->
Hola   Mundo<br>

<!-- Solución -->
Hola&nbsp;&nbsp;Mundo<br>

Conclusión:

La etiqueta <br> es una herramienta útil para saltos de línea específicos en contenido textual, pero debe usarse con moderación. Siempre prioriza el uso de elementos semánticos y CSS para el diseño general de tu página. ¡Menos es más!