En HTML, un párrafo siempre comienza en una nueva línea, pero ¿qué sucede si desea que el texto de un párrafo comience en una nueva línea? En ese caso, debe crear un salto de línea HTML.
Echemos un vistazo más de cerca a este elemento HTML y cómo usarlo a continuación.
¿Qué es un salto de línea en HTML?
En HTML, un 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 utilizar para mostrar líneas, letras de canciones u otras formas de contenido donde los saltos de línea son importantes para el significado o la apariencia del contenido.
Por ejemplo, suponga que escribe una publicación de blog sobre la dirección de un sobre o paquete. Desea incluir un ejemplo de cómo formatear las direcciones del remitente y el destinatario. En este caso, puede usar un salto de línea para poner los nombres, direcciones, ciudades, estados y códigos postales del remitente y el destinatario en líneas separadas.
A continuación, verá la misma dirección representada de dos maneras diferentes. El primero usa un solo elemento de párrafo y múltiples saltos de línea. El segundo usa varios elementos de párrafo y no tiene saltos de línea. Como resultado, se agregan rellenos y márgenes innecesarios entre las líneas.
ver la pluma Párrafo y elemento de salto de línea de Christina Perricone (@hubspot) en CódigoPen.
Consejo para profesionales: Si desea que una sección de contenido relacionada aparezca en diferentes líneas, como una dirección postal o un verso de línea, use elementos de salto de línea en lugar de elementos de párrafo.
Ahora que entendemos el caso de uso ideal para romper líneas, echemos un vistazo a cómo crearlas en HTML.
Cómo hacer un salto de línea en HTML
Para hacer un salto de línea en HTML, use la etiqueta
. Simplemente coloque la etiqueta en cualquier lugar donde desee forzar un salto de línea. Dado que el salto de línea HTML es un elemento vacío, no hay una etiqueta de cierre.
A continuación se muestra un archivo HTML con un elemento
y
.
porque el elemento
se usa con mayor frecuencia para mostrar líneas o direcciones, veamos un ejemplo. Digamos que quiero mostrar un «edificio de cocina» de Gwendolyn Brooks en un sitio web.
En ese caso, pondría las secciones en etiquetas.
. Entonces pondría una etiqueta HTML en una nueva línea
donde quiera que se rompan líneas en cada estrofa.
Aquí está el código 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 Línea con elemento de salto de línea de Christina Perricone (@hubspot) en CódigoPen.
Consejo para profesionales: Coloque el artículo
en cualquier lugar donde desee que se rompa una línea de texto. Es decir, el texto después de la
comenzará al principio de la siguiente línea del bloque de texto.
El salto de línea HTML no funciona
Si los saltos de línea HTML no funcionan, especialmente si está trabajando en un editor de texto CMS como WordPress, es posible que el elemento se esté utilizando incorrectamente.
El mal uso más común de una nueva etiqueta HTML es con fines de presentación. Para prácticamente todo lo relacionado con el diseño, debe usar CSS en su lugar.
Por ejemplo, suponga que desea crear más espacio entre bloques de texto u otros elementos. En lugar de usar una etiqueta
debe usar un elemento HTML semántico y una propiedad de relleno o margen CSS si es necesario.
¿Por qué? Dos razones.
- El uso de un salto de línea HTML cuando hay disponible un elemento más semántico hace que el código sea menos accesible, especialmente para los lectores que usan lectores de pantalla.
- Uso de etiquetas
forzar la interrupción de la línea solo con fines de presentación puede verse bien en su navegador, pero no en otros navegadores o dispositivos, especialmente si su sitio responde. Un sitio web receptivo cambiará automáticamente el diseño según el tamaño de la pantalla. Por lo tanto, ya envolverá el texto según sea necesario y envolverá el texto en lo que respecta a la etiqueta.
. Esto dará como resultado bloques de texto irregulares y desiguales. Veamos un ejemplo.
Por ejemplo, digamos que quiero mostrar una obra de arte Fleabag: La Santa Biblia. Debería usar un elemento de cita en bloque que agregará automáticamente márgenes a la izquierda y a la derecha del texto. Si tuviera que usar la etiqueta
para imitar la sangría de un elemento de comillas en bloque, haría un mal uso de la etiqueta de nueva línea HTML.
Aquí está el código 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.
Consejo para profesionales: Use un elemento semántico, como una cita en bloque en lugar de un elemento de salto de línea, si corresponde, para que su sitio sea más accesible para los lectores que usan un lector de pantalla.
El uso de un elemento de cita en bloque no solo es mejor en términos de accesibilidad, sino que también es mejor para el diseño web receptivo. Si cambia el tamaño de la ventana de su navegador, notará que el elemento de comillas en bloque en el Lápiz de arriba se ajusta automáticamente al tamaño de la pantalla y no tiene bordes irregulares ni líneas de texto irregulares.
Si utiliza elementos no semánticos como dígitos y saltos de línea, no se comportarán de esta manera.
Aquí está el código 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 inválido de un artículo
para mostrar un fragmento de juego de Christina Perricone (@hubspot) en CódigoPen.
Consejo para profesionales: Para forzar que el texto se muestre o se rompa de cierta manera, use un elemento HTML o CSS semánticamente significativo en lugar de un elemento de salto de línea para evitar problemas de diseño, como texto desigual y bordes irregulares.
Si cambia el tamaño de la ventana del navegador, notará que un elemento de párrafo con saltos de línea genera bordes dentados y líneas de texto irregulares.
Entonces, este ejemplo de código no solo tiene problemas de accesibilidad, también tiene problemas de diseño. Por lo tanto, es importante entender cuándo usar el elemento de salto de línea y cuándo no usarlo.
Para obtener más información sobre cómo compartir su sitio, consulte La guía definitiva para la accesibilidad web.
Agregar saltos de línea en HTML
Ya sea que desee mostrar poesía, letras de canciones o direcciones postales en sus páginas web, debe comprender lo que se debe y no se debe hacer con el elemento de salto de línea HTML. Comprender este concepto le ayudará a aprovechar su conocimiento de HTML.
Nota del editor: esta publicación se publicó originalmente en mayo de 2021 y se actualizó para que esté completa.
