Tag HTML <br>
Il tag HTML <br> serve per andare a capo. Scopri come usarlo e come applicare lo stile con CSS. Vedi anche esempi pratici.
Il tag HTML <br> inserisce un singolo a capo. Questa pagina spiega quando un'interruzione di riga fa parte del contenuto (e <br> è lo strumento giusto), quando si tratta di spaziatura o layout (e CSS è lo strumento giusto), come i lettori di schermo lo gestiscono, e quali alternative — come <pre> o la proprietà CSS white-space — si adattano a versi e testo preformattato.
Definizione
Il tag HTML <br> definisce un'interruzione di riga. A differenza del tag <p>, che crea un'interruzione di paragrafo, il tag <br> sposta semplicemente il testo seguente alla riga successiva senza aggiungere spazio verticale extra.
La regola fondamentale: usa <br> solo quando l'interruzione di riga è parte del contenuto stesso — testo che è intrinsecamente strutturato per righe, come un indirizzo postale, una poesia o il testo di una canzone. Se un'interruzione inizia un nuovo pensiero, si tratta di un paragrafo, quindi usa <p>. Se un'interruzione riguarda la spaziatura o il layout visivo, quel lavoro spetta a CSS, non a <br>.
Sintassi
Il tag <br> è un elemento vuoto in HTML5, il che significa che non richiede un tag di chiusura. Tuttavia, in XHTML, deve essere auto-chiuso (<br />).
Esempio del tag HTML <br>:
esempio del tag br
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage.</h1>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>Utilizzo
Usa <br> solo quando l'interruzione di riga appartiene al contenuto. I casi classici sono indirizzi postali, poesie e testi di canzoni, dove la struttura delle righe porta un significato.
Esempio: un indirizzo con <address> e <br>
Un indirizzo stradale è l'uso canonico di <br>: ogni riga è genuinamente una riga separata dello stesso blocco, non un paragrafo distinto. L'elemento <address> fornisce la semantica delle informazioni di contatto, mentre <br> dispone le righe.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Jane Doe<br />
123 Main Street<br />
Springfield, IL 62704<br />
USA
</address>
</body>
</html>Esempio: poesie e testi di canzoni
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the <br> tag usage</h1>
<blockquote>
But I'm not the only one<br />
I hope some day you'll join us<br />
And the world will live as one.<br />
</blockquote>
<cite>John Lennon "imagine"</cite>
</body>
</html>Quando non usare <br>
<br> serve per la struttura delle righe, non per la spaziatura o il layout. Due usi scorretti comuni:
- Separare i paragrafi. Un'interruzione tra due pensieri distinti è un confine di paragrafo — racchiudi ogni blocco in
<p>. - Creare spazi verticali. Impilare più tag
<br>per spingere il contenuto verso il basso è un trucco di presentazione. La spaziatura appartiene a CSS, tramite la proprietàmargin.
Non usare <br> per separare paragrafi o per aggiungere spaziatura. Usa elementi <p> insieme alla proprietà CSS margin per controllare lo spazio verticale.
Accessibilità: perché impilare <br><br> è dannoso
I lettori di schermo annunciano ogni <br> come un'interruzione di riga. Quando ne impili diversi per simulare uno spazio — ad esempio <br><br><br> — il lettore legge "interruzione di riga, interruzione di riga, interruzione di riga", che è rumore privo di significato e interrompe il flusso di lettura. Peggio ancora, le righe vuote non hanno alcuna relazione semantica con il testo circostante, quindi la tecnologia assistiva non può aiutare l'utente a comprendere la struttura del documento.
La soluzione corretta è esprimere lo spazio come spaziatura in CSS. Sostituisci questo:
<p>First paragraph.</p>
<br /><br /><br />
<p>Second paragraph.</p>con questo:
<style>
.gap-below {
margin-bottom: 3rem;
}
</style>
<p class="gap-below">First paragraph.</p>
<p>Second paragraph.</p>La versione CSS mantiene i due paragrafi come paragrafi veri e lascia che margin gestisca la distanza visiva, quindi i lettori di schermo non annunciano nulla di superfluo.
Alternative per versi e testo preformattato
Quando un intero blocco è strutturato per righe, controllare le interruzioni con CSS o <pre> è spesso più pulito che disseminare il markup di tag <br>. Un rapido schema decisionale:
- Poche interruzioni intenzionali all'interno di testo scorrevole (un indirizzo, una riga isolata in un paragrafo): usa
<br>. - Un blocco in cui le interruzioni di riga nel sorgente sono le interruzioni desiderate, ma la spaziatura deve essere compressa (es. versi): imposta
white-space: pre-linesul contenitore affinché i ritorni a capo nell'HTML diventino vere interruzioni di riga senza alcun<br>. - Testo in cui ogni spazio e ogni interruzione di riga devono essere preservati esattamente (codice, arte ASCII): usa l'elemento
<pre>, che rende il contenuto con un font monospazio e rispetta tutti gli spazi bianchi.
<style>
.poem {
white-space: pre-line;
}
</style>
<p class="poem">
Roses are red
Violets are blue
</p>Qui le interruzioni di riga provengono dal testo sorgente, e white-space: pre-line le trasforma in interruzioni visibili — nessun <br> necessario.
Attributi
Il tag <br> accettava in passato un attributo clear per controllare come l'interruzione interagiva con gli elementi flottanti. Quell'attributo è stato rimosso in HTML5 e non deve essere utilizzato.
| Attributo | Valore | Stato |
|---|---|---|
clear | all / left / right / none | Rimosso in HTML5 — non utilizzare |
Per impedire al contenuto di scorrere accanto a un elemento flottante, usa invece la proprietà CSS clear:
.below-float {
clear: both;
}Il tag <br> supporta gli Attributi Globali e gli Attributi Evento.