Articolo originale: HTML Line Break – How to Break a Line with the HTML <br> Tag
Quando scrivi in HTML, capita spesso di dover inserire un’interruzione di riga. Un'interruzione di riga è fondamentale in indirizzi, poesie o quando il testo supera la larghezza disponibile del browser. Se non inserisci manualmente i tuoi "a capo", il testo potrebbe essere formattato in modo anomalo.
In questo tutorial, ti mostrerò come inserire interruzioni di riga nel tuo codice HTML con alcuni esempi "con e senza", così potrai usarle correttamente e migliorare la formattazione del tuo testo.
Sintassi base per andare a capo in HTML
Puoi inserire un’interruzione di riga in HTML usando il tag <br>, che equivale al tasto "Invio" sulla tastiera.
Tieni presente che HTML ignora le interruzioni di riga fatte con il tasto "Invio".
<br />
Se ti stai chiedendo perché nel tag <br> a volte c’è una barra /, è perché era necessaria ai tempi di HTML4. Con HTML5 non è più obbligatorio usare la barra, ma entrambe le versioni funzionano allo stesso modo.
Se usi un formattatore di codice come prettier, vedrai che inserirà automaticamente la barra / quando salvi o incolli il codice, anche se tu non l’avevi messa.
Come inserire interruzioni di riga negli indirizzi
Quando scrivi un indirizzo in una lettera, un’interruzione di riga è importante per poterlo formattare correttamente.
Ecco un esempio di indirizzo senza interruzioni di riga
Un indirizzo senza interruzioni di riga (cioè senza i tag <br>) appare così:
<p>
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
</p>
Ho aggiunto un po’ di codice CSS per centrare il contenuto con Flexbox e ingrandire leggermente il testo:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 3rem;
max-width: 1000px;
margin: 0 auto;
}
Ecco come appare nel browser:
Ecco un indirizzo con interruzioni di riga
E così possiamo aggiungere interruzioni di riga per formattare correttamente il nostro indirizzo:
<p>
The White House <br />
1600 Pennsylvania Avenue <br />
NW Washington, DC <br />
20500 <br />
USA
</p>
Ecco come appare nel browser:
Come aggiungere interruzioni di riga nelle poesie
Di norma le poesie sono scritte in frasi brevi interrotte, per creare gerarchie visive e una formattazione gradevole.
Quindi, se vuoi scrivere una poesia nel tuo codice HTML, il tag <br> rende il processo di formattazione molto più semplice.
Una poesia senza interruzioni di riga
<p>
I dabbled around a lot when I decided to learn to code
I went from A to Z with resources
When I decided to make my own things
I discovered I've been in the old all while
So I remained a novice in coding
But then I found freeCodeCamp
I got my hands on the platform
I went from novice to ninja in coding
And now I'm a camper for life
</p>
Ecco come appare nel browser:
Puoi vedere che la poesia non ha alcuna gerarchia visiva, non è formattata correttamente, e di conseguenza risulta illeggibile come poesia.
Una poesia con interruzioni di riga
<p>
I dabbled around a lot when I decided to learn to code <br />
I went from A to Z with resources <br />
When I decided to make my own things <br />
I discovered I've been in the old all while <br />
So I remained a novice in coding <br />
But then I found freeCodeCamp <br />
I got my hands on the platform <br />
I went from novice to ninja in coding <br />
And now I'm a camper for life <br />
</p>
Ho anche modificato leggermente la dimensione del font nel CSS:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 2.5rem;
max-width: 1000px;
margin: 0 auto;
}
Ecco come appare ora nel browser:
Ora puoi vedere che la poesia è più leggibile e formattata nel modo corretto.
Un consiglio utile: non usare il tag <br> per forzare uno spazio tra elementi a livello di blocco (<p>, <h1>, <h2>, <h3>, <div>, ecc.). Per gestire gli spazi tra questi elementi, usa la proprietà CSS margin.
Forse ti starai chiedendo: dato che il tag <br> è un elemento, è possibile applicargli dello stile?
Sì, è possibile — ma non c’è una reale necessità pratica, poiché tutto ciò che fa è inserire uno spazio.
Conclusione
Spero che questo tutorial ti abbia fornito le conoscenze di base necessarie per utilizzare correttamente il tag <br>, così da migliorare l’aspetto del tuo testo in HTML.
Grazie per la lettura, e continua a programmare!