<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

Gli attributi di questo elemento includono gli attributi globali.

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 fli elementi <p> e usa le proprietà CSS come margin per controllarne la spaziatura.

Liste utili