Che differenza c'è tra e ?

segna un testo non più rilevante o corretto ma conservato come contesto, come un prezzo barrato. segna un testo eliminato dal documento, spesso accanto a un che mostra cosa lo ha sostituito, e può avere gli attributi datetime e cite.

Guida HTML interattiva: Sottolineato e barrato

Q: Come sottolineo un testo in HTML?

Racchiudilo in , oppure applica text-decoration: underline nel CSS. Usa solo per il suo significato specifico (per esempio segnare una parola scritta male); per una sottolineatura puramente visiva usa il CSS su uno o sull'elemento stesso.

Q: Come barro un testo in HTML?

Usa per un testo che non è più corretto, come un prezzo vecchio, e per un testo rimosso durante una modifica. Entrambi tracciano una linea sul testo. In CSS, text-decoration: line-through fa lo stesso a livello visivo.

Q: Il tag è deprecato?

No. era deprecato in HTML 4 ma è tornato in HTML5 con un nuovo significato: testo con un'annotazione non testuale, come un errore di ortografia o un nome proprio in un testo cinese. È valido, solo che raramente è la scelta giusta.

Sottolineato e barrato in HTML: i tag u, ins, s e del

Sottolinea il testo in HTML con o con text-decoration di CSS, e barralo con <s> o <del>. Scopri cosa significa ogni tag, come <ins> e <del> segnano le modifiche e perché sottolineare un testo che non è un link confonde chi legge.

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

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Come sottolineare un testo in HTML

Ci sono due modi: il tag  oppure la proprietà CSS text-decoration: underline. Entrambi tracciano la stessa linea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

Il problema di qualsiasi sottolineatura è la terza riga: chi legge si aspetta che un testo sottolineato sia un link, e ci clicca sopra. Sottolinea il testo normale solo quando c'è un motivo chiaro.

Cosa significa il tag u

 non è un pulsante generico per "sottolineare". Nell'HTML attuale indica un testo con un'annotazione non esplicitata: un segno che dice "qui c'è qualcosa di particolare" senza dire cosa. Gli usi reali più comuni:

segnare un errore di ortografia (come fa un programma di videoscrittura, spesso con una linea rossa ondulata),
segnare i nomi propri nei testi cinesi, dove è una convenzione tipografica.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Per dare enfasi usa  o  (vedi grassetto), e per i titoli dei libri usa <cite>. Se ti interessa solo l'aspetto, usa il CSS.

Barrato: s e del

HTML ha due tag che tracciano una linea sul testo, e hanno significati diversi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Tag	Significato	Uso tipico
`<s>`	Non più corretto o rilevante, conservato come contesto	Prezzo vecchio, tipo di biglietto esaurito
`<del>`	Rimosso dal documento	Modifiche, changelog, attività completate in una lista di cose da fare

Segnare le modifiche con ins e del

<ins> è il compagno di <del>: segna un testo che è stato aggiunto. I browser lo sottolineano di default. Entrambi accettano datetime (quando è avvenuta la modifica) e cite (un URL che la spiega):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Questo stile rosso e verde è l'aspetto familiare di un diff. text-decoration: none su ins toglie la sottolineatura predefinita, così non sembra un link.

Sottolineato e barrato con il CSS

text-decoration si occupa della parte visiva su qualsiasi elemento: accetta un colore e uno stile, e text-decoration-thickness imposta lo spessore. Per le linee puramente decorative è lo strumento giusto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Come togliere la sottolineatura dai link, la distanza della sottolineatura e gli altri dettagli di text-decoration si trovano nella pagina sulla sottolineatura in CSS.

Accessibilità

Il supporto degli screen reader per <s>, <del> e <ins> è incostante: alcuni li annunciano come eliminati o inseriti, molti li leggono come testo normale, quindi chi ascolta può sentire "Prezzo 49 dollari 29 dollari" senza alcun indizio su quale sia quello attuale. Quando la differenza conta, dillo anche a parole, per esempio con un testo nascosto alla vista ma letto ad alta voce, o semplicemente "Prima 49 $, ora 29$ ".

Errori comuni

Sottolineare un testo che non è un link. Chi legge proverà a cliccarci. Per evidenziare usa il grassetto, un colore o uno sfondo.
Usare  per dare enfasi. Usa  o .
Usare <strike>. È obsoleto. Usa <s>, <del> o text-decoration: line-through.
Usare <s> per contenuti eliminati nella cronologia di un documento. Quello è <del>, che può anche registrare quando è successo.
Affidare il significato solo alla linea. Molti screen reader non la annunciano.

Domande frequenti

Come sottolineo un testo in HTML?

Racchiudilo in , oppure applica text-decoration: underline nel CSS. Usa  solo per il suo significato specifico (per esempio segnare una parola scritta male); per una sottolineatura puramente visiva usa il CSS su uno  o sull'elemento stesso.

Come barro un testo in HTML?

Usa <s> per un testo che non è più corretto, come un prezzo vecchio, e <del> per un testo rimosso durante una modifica. Entrambi tracciano una linea sul testo. In CSS, text-decoration: line-through fa lo stesso a livello visivo.

Il tag è deprecato?

No.  era deprecato in HTML 4 ma è tornato in HTML5 con un nuovo significato: testo con un'annotazione non testuale, come un errore di ortografia o un nome proprio in un testo cinese. È valido, solo che raramente è la scelta giusta.

Che fine ha fatto il tag <strike>?

<strike> è obsoleto. I browser lo mostrano ancora barrato, ma non è HTML valido. Usa <s> o <del> a seconda del significato, oppure text-decoration: line-through.

Che differenza c'è tra <s> e <del>?

<s> segna un testo non più rilevante o corretto ma conservato come contesto, come un prezzo barrato. <del> segna un testo eliminato dal documento, spesso accanto a un <ins> che mostra cosa lo ha sostituito, e può avere gli attributi datetime e cite.

Concetti correlati