<br>: l'elemento 'interruzione di riga'

L' elemento HTML <br> produce un'interruzione di riga nel testo (ritorno a capo). È utile per scrivere una poesia o un discorso, dove la divisione dei versi è significativamente importante.

Nota: non utilizzare <br> per creare margini tra i paragrafi; avvolgili in elementi <p> e usa la proprietà CSS margin per controllarne le dimansioni

Attributi deprecati

clear

Indica dove iniziare la riga successiva dopo l'interruzione

CSS

L'elemento <br> ha un unico scopo ben definito: creare un'interruzione di riga in un blocco di testo. In quanto tale, non ha dimensioni o output visivo propri e c'è ben poco che puoi fare per modellarlo.

È possibile impostare margin sugli elementi <br> stessi per aumentare la spaziatura tra le righe di testo nel blocco, ma questa è una cattiva pratica: è necessario utilizzare la proprietà line-height progettata a tale scopo.

Esempio

Nell'esempio seguente utilizziamo gli elementi <br> per creare interruzioni di riga tra le diverse righe:

Or poserai per sempre,<br>
Stanco mio cor. Perì l’inganno estremo,<br>
Ch’eterno io mi credei. Perì. Ben sento,<br>
In noi di cari inganni,<br>
Non che la speme, il desiderio è spento.<br>
Posa per sempre. Assai<br>
Palpitasti. Non val cosa nessuna<br>
I moti tuoi, nè di sospiri è degna<br>
La terra. Amaro e noia<br>
La vita, altro mai nulla; e fango è il mondo.<br>
T’acqueta omai. Dispera<br>
L’ultima volta. Al gener nostro il fato<br>
Non donò che il morire. Omai disprezza<br>
Te, la natura, il brutto<br>
Poter che, ascoso, a comun danno impera,<br>
E l’infinita vanità del tutto.

Problemi di accessibilità

La creazione di paragrafi di testo separati utilizzando
non solo è una cattiva pratica, ma è problematica per le persone che navigano con l'aiuto della tecnologia di lettura dello schermo. Gli screen reader possono annunciare la presenza dell'elemento, ma non qualsiasi contenuto contenuto all'interno di <br>. Questa può essere un'esperienza confusa e frustrante per la persona che usa lo screen reader.

Usa gli elementi <p> e usa le proprietà CSS come margin per controllarne la spaziatura.