Quando devo usare invece di ?

Usa quando l'a capo fa parte del contenuto stesso, come in un indirizzo o in una poesia. Usa elementi separati per paragrafi separati, e il margin del CSS per la spaziatura, invece di impilare tag .

Guida HTML interattiva: Andare a capo

Q: Come si va a capo in HTML?

Inserisci dove deve iniziare la nuova riga: Line one Line two. Premere Invio nel file HTML non funziona, perché i browser trattano gli a capo del codice sorgente come normali spazi.

Q: Come mantengo gli a capo di un testo senza aggiungere tag ?

Dai all'elemento white-space: pre-line in CSS. Il browser mostra allora ogni a capo del testo come un'interruzione di riga, continuando a comprimere gli spazi in più. È comodo per i commenti degli utenti e per il testo caricato con JavaScript.

Q: Come impedisco di andare a capo in HTML?

Racchiudi il testo in un elemento con white-space: nowrap, oppure unisci due parole con uno spazio indivisibile così restano sempre sulla stessa riga.

Andare a capo in HTML: il tag br e i punti di interruzione

Usa per andare a capo dentro un blocco di testo. Scopri quando è la scelta giusta e quando è meglio un paragrafo, come mantenere gli a capo del testo, come far spezzare le parole lunghe con e come impedire che una riga vada a capo.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Come andare a capo

Metti   dove vuoi che inizi la nuova riga. È un elemento vuoto, quindi non ha tag di chiusura:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

L'indirizzo va a capo esattamente a ogni  . Il secondo paragrafo resta su una sola riga anche se nel sorgente c'è un a capo: l'HTML tratta a capo, tabulazioni e sequenze di spazi come un unico spazio. Ecco perché esiste  .

 ,   e   producono tutti lo stesso elemento. Usa quello che usa il tuo progetto (JSX e XHTML richiedono la barra).

br vs p: andare a capo non è spaziare

Un   chiude una riga dentro lo stesso paragrafo. Un nuovo  inizia un nuovo paragrafo, con spazio sopra e sotto dovuto ai margini predefiniti. Impilare tag   per creare spazio funziona, ma è fragile e comunica la cosa sbagliata:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

I due riquadri sembrano simili, ma per uno screen reader il primo è un unico paragrafo, e per cambiare la spaziatura devi modificare ogni pagina. Nel secondo, lo spazio è una riga di CSS.

Buoni usi di  : indirizzi, poesie e testi di canzoni, e le righe di una firma, dove l'a capo fa parte del testo. Per tutto il resto usa paragrafi, liste o titoli.

Mantenere gli a capo del testo

Quando il testo arriva da un'altra fonte (un campo commenti, un database, uno script), contiene veri caratteri di a capo invece di tag  . La proprietà CSS white-space: pre-line fa mostrare al browser quegli a capo come interruzioni di riga:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

La stessa stringa appare su una riga nel riquadro grigio e su tre righe in quello blu. È anche più sicuro che inserire tag   nel testo degli utenti con innerHTML, che permetterebbe agli utenti di iniettare HTML. Per mantenere anche spazi e rientri, usa white-space: pre, spiegato nella pagina spazi in HTML.

Far spezzare le parole lunghe: wbr

Una parola o un URL lungo senza spazi può uscire da un riquadro stretto.  segna un punto in cui il browser può andare a capo se serve, e altrimenti non fa niente:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Il primo percorso esce dal suo riquadro; il secondo va a capo nei punti . Per il testo che non controlli, la proprietà CSS overflow-wrap: anywhere spezza invece le parole lunghe in qualsiasi punto.

Impedire che una riga vada a capo

A volte vuoi l'opposto: tenere insieme "10 km" o un numero di telefono. Hai due strumenti:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  è uno spazio in cui il browser non va a capo, quindi "10" e "km" restano insieme. white-space: nowrap tiene un intero span su una riga. Sostituisci   con uno spazio normale, o togli la classe, e a questa larghezza entrambi si dividono su due righe.

Errori comuni

Premere Invio nel sorgente e aspettarsi una nuova riga. Gli a capo in HTML sono spazi. Usa  , elementi separati o white-space: pre-line.
Impilare   per creare spazio. Usa paragrafi e margin.
Usare   per costruire una lista. Usa <ul> o <ol> con <li>, che gli screen reader annunciano come lista.
Scrivere . Non è valido. Scrivi  .
Aggiungere   al testo degli utenti con innerHTML. Imposta textContent e usa invece white-space: pre-line.

Domande frequenti

Come si va a capo in HTML?

Inserisci   dove deve iniziare la nuova riga: Line one Line two. Premere Invio nel file HTML non funziona, perché i browser trattano gli a capo del codice sorgente come normali spazi.

Devo scrivere , o ?

Funzionano tutti e tre in HTML e producono lo stesso elemento.   è la forma HTML semplice; le versioni con la barra sono accettate per compatibilità con XHTML e JSX.  da solo non è valido, anche se i browser lo leggono come un altro a capo.

Quando devo usare invece di ?

Usa   quando l'a capo fa parte del contenuto stesso, come in un indirizzo o in una poesia. Usa elementi  separati per paragrafi separati, e il margin del CSS per la spaziatura, invece di impilare tag  .

Come mantengo gli a capo di un testo senza aggiungere tag ?

Dai all'elemento white-space: pre-line in CSS. Il browser mostra allora ogni a capo del testo come un'interruzione di riga, continuando a comprimere gli spazi in più. È comodo per i commenti degli utenti e per il testo caricato con JavaScript.

Come impedisco di andare a capo in HTML?

Racchiudi il testo in un elemento con white-space: nowrap, oppure unisci due parole con uno spazio indivisibile   così restano sempre sulla stessa riga.

Concetti correlati