¿Cómo inserto un salto de línea o una línea horizontal?

Para insertar saltos de línea y líneas horizontales en tus documentos HTML, dispones de dos etiquetas específicas. Ambas son lo que se conoce como etiquetas «vacías» o «auto-cerradas» en HTML5, lo que significa que no requieren una etiqueta de cierre explícita como </br> (aunque en sintaxis XHTML se escribirían como <br /> o <hr />).

1. Salto de Línea (<br>)

La etiqueta <br> (proveniente de «break» o ruptura) se utiliza para forzar un salto de línea en un punto específico dentro de un bloque de texto, como un párrafo. El texto que sigue a un <br> comenzará en la línea inmediatamente inferior.

Es útil para casos donde la división de líneas es semánticamente importante, como en direcciones postales, poemas o fragmentos de código que deben mantener un formato específico.

Ejemplo de uso de <br>:

<p>Mi dirección es:<br>
Calle Mayor, Número 123<br>
Piso 4, Puerta A<br>
28001, Madrid</p>

<p>El poema dice así:<br>
En un lugar de la Mancha,<br>
de cuyo nombre no quiero acordarme...</p>
Lenguaje del código: HTML, XML (xml)

Importante: No deberías usar múltiples etiquetas <br> seguidas para crear espacio vertical entre párrafos u otros elementos. Para eso, es mucho más apropiado y semántico utilizar propiedades de CSS como margin o padding.

2. Línea Horizontal (<hr>)

La etiqueta <hr> (proveniente de «horizontal rule» o regla horizontal) se utiliza para representar una ruptura temática o una separación entre párrafos o secciones de contenido a nivel de bloque. Visualmente, los navegadores la renderizan por defecto como una línea horizontal que ocupa el ancho disponible.

En HTML5, <hr> tiene un significado semántico; no es simplemente una línea decorativa. Indica un cambio de tema o una transición dentro del flujo del contenido.

Ejemplo de uso de <hr>:

<h2>Capítulo 1: El Comienzo</h2>
<p>Este capítulo introduce los personajes principales y el escenario donde se desarrollará la historia inicial.</p>
<hr>
<h2>Capítulo 2: El Conflicto</h2>
<p>Aquí, la trama se complica y surgen los primeros desafíos para nuestros protagonistas.</p>
Lenguaje del código: HTML, XML (xml)

Si quieres modificar la apariencia de la línea (grosor, color, estilo), puedes hacerlo utilizando CSS.