Etiqueta HTML <br>
La etiqueta HTML <br> se usa para insertar un salto de línea. Aprende su uso, cómo darle estilo con CSS y consulta ejemplos prácticos.
La etiqueta HTML <br> inserta un único salto de línea. Esta página explica cuándo un salto de línea forma parte del contenido (y <br> es la herramienta adecuada), cuándo se trata realmente de espaciado o maquetación (y CSS es la herramienta adecuada), cómo lo gestionan los lectores de pantalla y qué alternativas — como <pre> o la propiedad CSS white-space — son apropiadas para versos y texto preformateado.
Definición
La etiqueta HTML <br> define un salto de línea. A diferencia de la etiqueta <p>, que crea un salto de párrafo, la etiqueta <br> simplemente mueve el texto siguiente a la línea siguiente sin añadir espacio vertical adicional.
La regla clave: usa <br> únicamente cuando el salto de línea forma parte del propio contenido — texto que tiene una estructura de línea inherente, como una dirección postal, un poema o la letra de una canción. Si el salto inicia un nuevo pensamiento, eso es un párrafo, así que usa <p>. Si el salto tiene que ver con el espaciado o la disposición visual, eso es una tarea de presentación para CSS, no para <br>.
Sintaxis
La etiqueta <br> es un elemento vacío en HTML5, lo que significa que no requiere una etiqueta de cierre. Sin embargo, en XHTML debe cerrarse de forma autónoma (<br />).
Ejemplo de la etiqueta HTML <br>:
ejemplo de etiqueta br
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage.</h1>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Uso
Recurre a <br> solo cuando el salto de línea pertenece al contenido. Los casos clásicos son las direcciones postales, los poemas y la letra de canciones, donde la estructura de línea aporta significado.
Ejemplo: una dirección con <address> y <br>
Una dirección de calle es el uso prototípico de <br>: cada línea es genuinamente una línea separada del mismo bloque, no un párrafo independiente. El elemento <address> aporta la semántica de información de contacto, y <br> organiza las líneas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Jane Doe<br />
123 Main Street<br />
Springfield, IL 62704<br />
USA
</address>
</body>
</html>Ejemplo: poemas y letra de canciones
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br />
I hope some day you'll join us<br />
And the world will live as one.<br />
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>Cuándo no usar <br>
<br> es para la estructura de líneas, no para espaciado ni maquetación. Dos usos incorrectos frecuentes:
- Separar párrafos. Un salto entre dos pensamientos distintos es un límite de párrafo — envuelve cada bloque en
<p>. - Crear espacios verticales. Apilar varias etiquetas
<br>para empujar el contenido hacia abajo es un truco de presentación. El espaciado corresponde a CSS, mediante la propiedadmargin.
No uses <br> para separar párrafos ni para añadir espaciado. Usa elementos <p> junto con la propiedad CSS margin para controlar el espacio vertical.
Accesibilidad: por qué apilar <br><br> es perjudicial
Los lectores de pantalla anuncian cada <br> como un salto de línea. Cuando apilas varios para simular un espacio — por ejemplo <br><br><br> — el lector dice "salto de línea, salto de línea, salto de línea", lo que es ruido que no transmite ningún significado e interrumpe el flujo de lectura. Peor aún, las líneas vacías no tienen ninguna relación semántica con el texto circundante, por lo que la tecnología de asistencia no puede ayudar al usuario a entender la estructura del documento.
La solución correcta es expresar el espacio como espaciado en CSS. Sustituye esto:
<p>First paragraph.</p>
<br /><br /><br />
<p>Second paragraph.</p>por esto:
<style>
.gap-below {
margin-bottom: 3rem;
}
</style>
<p class="gap-below">First paragraph.</p>
<p>Second paragraph.</p>La versión CSS mantiene los dos párrafos como párrafos propiamente dichos y deja que margin gestione la distancia visual, de modo que los lectores de pantalla no anuncian nada extra.
Alternativas para versos y texto preformateado
Cuando un bloque entero tiene estructura de líneas, controlar los saltos con CSS o <pre> suele ser más limpio que llenar el marcado de etiquetas <br>. Un esquema de decisión rápido:
- Unos pocos saltos intencionados dentro de texto fluido (una dirección, una línea puntual en un párrafo): usa
<br>. - Un bloque donde los saltos de línea en el código fuente son los saltos que quieres, pero el espaciado debe colapsar (por ejemplo, un verso): establece
white-space: pre-lineen el contenedor para que los saltos de línea del HTML se conviertan en saltos de línea reales sin necesidad de ningún<br>. - Texto donde cada espacio y salto de línea debe preservarse exactamente (código, arte ASCII): usa el elemento
<pre>, que renderiza el contenido en una fuente monoespaciada y respeta todos los espacios en blanco.
<style>
.poem {
white-space: pre-line;
}
</style>
<p class="poem">
Roses are red
Violets are blue
</p>Aquí los saltos de línea provienen del texto fuente y white-space: pre-line los convierte en saltos visibles — sin necesidad de <br>.
Atributos
La etiqueta <br> aceptó en su momento un atributo clear para controlar cómo interactuaba el salto con los elementos flotantes. Ese atributo fue eliminado en HTML5 y no debe utilizarse.
| Atributo | Valor | Estado |
|---|---|---|
clear | all / left / right / none | Eliminado en HTML5 — no usar |
Para evitar que el contenido se envuelva junto a un elemento flotante, usa en su lugar la propiedad CSS clear:
.below-float {
clear: both;
}La etiqueta <br> admite los Atributos globales y los Atributos de eventos.