HTML br: interruzioni di riga e differenze da p, wbr e pre

HTML <br> inserisce un'interruzione di riga in un punto specifico all'interno del testo. Usalo quando la divisione della linea stessa è importante, come nella poesia o in un indirizzo postale. Separa i paragrafi distinti con p e controlla lo spazio con il CSS.

Sintassi br e interruzioni di riga nel codice sorgente

br è un elemento vuoto senza contenuto o tag di chiusura. Scrivi <br> in HTML, senza </br>. HTML accetta anche <br />, ma la barra non è ciò che provoca l'interruzione di riga.

Con stili predefiniti ordinari, le interruzioni di riga e gli spazi consecutivi nel sorgente vengono compressi. Un br specifica un'interruzione all'interno del contenuto indipendentemente dal formato del sorgente. Questo è anche diverso dal ritorno a capo naturale del testo man mano che lo schermo diventa più stretto.

Esempio completo: confronta le interruzioni di riga nel sorgente, br e paragrafi

Salva il seguente documento come line-breaks.html e aprilo in un browser. Presenta lo stesso testo breve con strutture diverse in modo da poter confrontare i risultati.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confronto tra interruzioni di riga e paragrafi</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>Confronto tra interruzioni di riga</h1>
  <h2>Interruzione solo nel codice sorgente</h2>
  <p id="source-only">Prima riga
    Seconda riga</p>
  <h2>Interruzione di riga con br</h2>
  <p id="with-br">Prima riga<br>Seconda riga</p>
  <h2>Paragrafi distinti</h2>
  <p class="message">Un paragrafo sul primo argomento.</p>
  <p class="message">Un paragrafo sul secondo argomento.</p>
</body>
</html>

La prima sezione scorre tutta insieme come Prima riga Seconda riga; la seconda va a capo dopo br. Le ultime due frasi sono paragrafi separati con uno spazio CSS di 1rem. Una finestra molto stretta può anche far andare a capo la prima sezione, ma non si tratta di un'interruzione specificata da br.

Scegli tra br, p, wbr e pre

Inserire br dopo ogni frase per forzare una lunghezza visivamente gradevole può causare ritorni a capo poco naturali su schermi piccoli o con testo grande. Lascia che il testo vada a capo naturalmente. Se hai bisogno di preservare spazi e divisioni di riga create dall'autore, consulta la guida guida HTML pre a spazi e interruzioni di riga.

Usa CSS per lo spazio vuoto e la spaziatura dei paragrafi

L'uso ripetuto di elementi br per creare spazio vuoto può fondere paragrafi semanticamente distinti in uno solo e rendere più difficile la navigazione dei paragrafi con screen reader. Usa p per un nuovo paragrafo e margin per lo spazio. Controlla l'altezza della riga all'interno di un paragrafo con line-height.

Non usare l'attributo obsoleto clear o i margini su br stesso come strumenti di layout. Gestisci le divisioni significative delle righe separatamente dal layout visivo in modo che il testo resti leggibile su diverse larghezze dello schermo e dimensioni dei caratteri. Il riferimento riferimento MDN per br spiega la sintassi e l'accessibilità.