Lo que se debe y no se debe hacer al agregar un salto de línea HTML

En HTML, un párrafo siempre comienza en una nueva línea, pero ¿qué sucede si desea que el texto dentro de un párrafo comience en una nueva línea? En ese caso, deberá crear un salto de línea.

Echemos un vistazo más de cerca a este elemento HTML y cómo usarlo.

¿Qué es un salto de línea en HTML?

Un salto de línea es el punto en el que se dividen dos líneas de texto. En HTML, el elemento
crea un salto de línea. Puede agregarlo donde desee que el texto termine en la línea actual y se reanude en la siguiente.

El elemento de salto de línea HTML se puede usar para mostrar poemas, letras de canciones u otras formas de contenido en las que la división de líneas es importante.

Por ejemplo, supongamos que está escribiendo una publicación de blog sobre cómo colocar la dirección en un sobre o paquete. Desea incluir un ejemplo de cómo dar formato a las direcciones del remitente y del destinatario. En ese caso, puede usar el elemento de salto de línea para colocar los nombres, direcciones de calles, ciudades, estados y códigos postales del remitente y del destinatario, todo en líneas separadas.

A continuación, verá la misma dirección representada de dos maneras diferentes. El primero usa un elemento de párrafo y varios saltos de línea. El segundo utiliza múltiples elementos de párrafo y sin saltos de línea. Como resultado, los márgenes están apagados.

ver la pluma Párrafo vs Elemento de salto de línea de Christina Perricone (@hubspot) en CódigoPen.

Ahora que entendemos el caso de uso ideal de los saltos de línea, veamos cómo crearlos en HTML.

Cómo hacer un salto de línea en HTML

Para hacer un salto de línea en HTML, use el
etiqueta. Simplemente coloque la etiqueta donde quiera forzar un salto de línea. Dado que un salto de línea HTML es un elemento vacío, no hay una etiqueta de cierre.

Supongamos que quiero mostrar «construcción de cocinas pequeñas» de Gwendolyn Brooks en una página web. En ese caso, envolvería las estrofas en etiquetas

. Luego colocaría la etiqueta
donde quiera que se rompan las líneas en cada estrofa.

Aquí está el HTML:

 
<h2>kitchenette building</h2>
<p>We are things of dry hours and the involuntary plan,<br>
Grayed in, and gray. “Dream” makes a giddy sound, not strong<br>
Like “rent,” “feeding a wife,” “satisfying a man.”</p>
<p>But could a dream send up through onion fumes<br>
Its white and violet, fight with fried potatoes<br>
And yesterday’s garbage ripening in the hall,<br>
Flutter, or sing an aria down these rooms</p>
<p>Even if we were willing to let it in,<br>
Had time to warm it, keep it very clean,<br>
Anticipate a message, let it begin?</p>
<p>We wonder. But not well! not for a minute!<br>
Since Number Five is out of the bathroom now,<br>
We think of lukewarm water, hope to get in it.</p>

<p><em>-Gwendolyn Brooks</em></p>

Aquí está el resultado:

ver la pluma Poema con elemento de salto de línea de Christina Perricone (@hubspot) en CódigoPen.

El salto de línea HTML no funciona

Si el salto de línea HTML no funciona, especialmente si está trabajando en el editor de texto de un CMS como WordPress, es posible que esté utilizando el elemento incorrectamente.

El mal uso más común del elemento de salto de línea HTML es usarlo con fines de presentación. Para prácticamente cualquier cosa relacionada con el diseño, debe usar CSS en su lugar.

Por ejemplo, digamos que desea crear más espacio entre bloques de texto u otros elementos. En lugar de usar la etiqueta
, debe usar un elemento HTML semántico y el margen CSS o las propiedades de relleno si es necesario.

¿Por qué? Dos razones. Primero, usar el elemento de salto de línea HTML cuando hay disponible un elemento más semántico hace que su código sea menos accesible, especialmente para los lectores que usan lectores de pantalla.

En segundo lugar, usar la etiqueta
para forzar un salto de línea con fines puramente de presentación puede verse bien en su navegador, pero no en otros navegadores o dispositivos, especialmente si su sitio responde. Un sitio receptivo cambiará automáticamente el diseño según el tamaño de la pantalla. Por lo tanto, ya ajustará el texto según sea necesario y ajustará el texto cuando se trate de una etiqueta
. Esto dará como resultado bloques de texto entrecortados y desiguales. Veamos un ejemplo.

Por ejemplo, supongamos que me gustaría mostrar un extracto de la obra Fleabag: Las Escrituras. Debería usar el elemento blockquote, que agregará automáticamente márgenes en el lado izquierdo y derecho del texto. Si tuviera que usar la etiqueta
para imitar la sangría del elemento blockquote, estaría abusando del elemento HTML.

Aquí está el HTML correcto:

 
<figure>
<blockquote>
<p>Love is awful! It’s awful. It’s painful. It’s frightening, it makes you doubt yourself, judge yourself, distance yourself from other people in your life. Makes you selfish. Makes you creepy. It makes you obsessed with your hair. Makes you cruel. Makes you say and do things you never thought you would do...</p>
</blockquote>
<figcaption>—PRIEST, <cite>Fleabag: The Scriptures</cite></figcaption>
</figure>

Aquí está el resultado:

ver la pluma YzZpaRG de Christina Perricone (@hubspot) en CódigoPen.

Si cambia el tamaño de la ventana de su navegador, notará que la cita en bloque se ajusta automáticamente al tamaño de la pantalla y no tiene bordes irregulares ni líneas de texto irregulares.

Aquí está el HTML incorrecto:

 
<figure>
<p>Love is awful! It’s awful. It’s painful. It’s frightening, it makes you doubt yourself, judge<br>
yourself, distance yourself from other people in your life. Makes you selfish. Makes you creepy.<br> 
It makes you obsessed with your hair. Makes you cruel. Makes you say and do things you never<br> 
thought you would do.
<figcaption>—PRIEST, <cite>Fleabag: The Scriptures</cite></figcaption>
</figure>

Aquí está el resultado:

ver la pluma Uso incorrecto del elemento
para mostrar un extracto del juego de Christina Perricone (@hubspot) en CódigoPen.

Si cambia el tamaño de la ventana de su navegador, notará que el elemento de párrafo con elementos de salto de línea da como resultado bordes irregulares y líneas de texto irregulares. Entonces, este ejemplo de código no solo tiene problemas de accesibilidad, sino que también tiene problemas de diseño. Por eso es importante entender cuándo usar el elemento de salto de línea y cuándo no.

Para obtener más información sobre cómo hacer que su sitio web sea accesible, consulte La guía definitiva para la accesibilidad web.

Adición de saltos de línea en HTML

Ya sea que desee mostrar poesía, letras de canciones o direcciones de correo en sus páginas web, deberá comprender lo que se debe y no se debe hacer con el elemento de salto de línea HTML. Comprender este concepto lo ayudará a aprovechar su experiencia en HTML.