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!