Tag HTML <del>
Il tag <del> segna il testo rimosso da un documento. Scopri gli attributi cite e datetime, l'abbinamento con <ins> e l'accessibilità, con esempi.
Il tag <del> segna una porzione di testo che è stata eliminata da un documento. È un elemento semantico: non si limita a barrare il testo, ma registra che il contenuto è stato rimosso intenzionalmente come parte di una modifica. I browser lo visualizzano con un testo barrato per impostazione predefinita, ma il significato risiede nel markup, non nello stile.
Utilizza <del> ogni volta che vuoi mostrare una cronologia delle modifiche, ad esempio:
- Modifiche tracciate — mantenere visibile il testo originale mostrando che è stato rimosso (changelog, wiki, documenti collaborativi).
- Riduzioni di prezzo — barrare il vecchio prezzo e mostrare quello nuovo accanto ad esso.
- Correzioni — conservare un errore a registro (una correzione pubblicata) invece di eliminarlo silenziosamente.
<del> è quasi sempre abbinato al tag <ins>, che segna il testo inserito di recente ed è sottolineato per impostazione predefinita. Insieme esprimono "questo è stato sostituito da quello."
Quando NON usare <del>
Se desideri solo un effetto di testo barrato senza il significato di "questo è stato modificato," <del> è lo strumento sbagliato:
- Per contenuti che non sono più accurati o rilevanti (ma non sono stati eliminati durante una modifica) — come un prodotto esaurito o un'offerta scaduta — usa il tag
<s>. - Per un testo barrato puramente visivo senza intento semantico, usa la proprietà CSS text-decoration con il valore
line-through.text-decoration: line-throughè di tipo presentazionale e viene ignorato dalle tecnologie assistive, mentre<del>trasmette significato ad esse.
In sintesi: usa <del> quando il testo barrato significa "rimosso in una modifica," e usa CSS quando hai solo bisogno della linea.
Puoi ridefinire liberamente lo stile di un elemento <del> con CSS — ad esempio cambiarne il colore o sostituire il testo barrato predefinito — senza perderne il significato, perché la semantica risiede nel tag, non nello stile.
Accessibilità
Non tutti gli screen reader trattano <del> allo stesso modo. Per impostazione predefinita, NVDA e JAWS di solito leggono il testo eliminato in linea come qualsiasi altro testo e non annunciano che era stato eliminato, a meno che l'utente non abiliti l'impostazione di verbosità pertinente — quindi un utente vedente vede il testo barrato mentre un utente di screen reader potrebbe non sentire nulla riguardo alla modifica.
Quando l'eliminazione stessa è importante per comprendere il contenuto (ad esempio, la differenza tra un vecchio e un nuovo prezzo), aggiungi un segnale esplicito anziché fare affidamento sulla linea visiva:
<p>
Price:
<del><span class="visually-hidden">Old price: </span>$99</del>
<ins><span class="visually-hidden">New price: </span>$79</ins>
</p>Evita di iniettare testo "eliminato" tramite CSS content — il contenuto generato viene esposto in modo incoerente alle tecnologie assistive. Preferisci testo visibile, un aria-label, o aria-describedby sull'elemento quando è necessario un contesto aggiuntivo.
Sintassi
Il tag <del> viene utilizzato in coppia. Il contenuto è scritto tra il tag di apertura (<del>) e quello di chiusura (</del>).
Esempio del tag HTML <del>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
</body>
</html>Esempio pratico: una riduzione di prezzo
L'uso più comune di <del> abbinato a <ins> è mostrare un vecchio prezzo accanto a uno nuovo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Special offer: <del>$99</del> <ins>$79</ins></p>
</body>
</html>Il vecchio prezzo rimane sulla pagina (barrato) e il nuovo prezzo è contrassegnato come inserito, così sia il risultato visivo che il markup raccontano la stessa storia.
Esempio del tag HTML <del> con l'attributo cite
L'attributo cite contiene un URL che punta a un documento che spiega perché il testo è stato modificato — una voce di changelog, un diff o un link al sistema di tracciamento dei problemi, non il contenuto eliminato in sé:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The release date is
<del cite="https://example.com/changelog#2023-10-25">October 25</del>
<ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
</p>
</body>
</html>Esempio del tag HTML <del> con l'attributo datetime
L'attributo datetime registra quando è avvenuta l'eliminazione in forma leggibile dalla macchina:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
</body>
</html>Il formato datetime
Il valore di datetime segue il formato YYYY-MM-DDThh:mm:ssTZD:
YYYY-MM-DD— la data (anno, mese, giorno). Questa parte è obbligatoria.T— un separatore letterale tra la data e l'orario.hh:mm:ss— l'orario. L'intera parte dell'orario è facoltativa — una sola data è valida.TZD— il designatore del fuso orario:Zper UTC, oppure un offset come+02:00/-05:00.
Valori validi:
2023-10-25 <!-- date only -->
2023-10-25T14:30 <!-- date + time, no seconds -->
2023-10-25T14:30:00Z <!-- UTC -->
2023-10-25T14:30:00+02:00 <!-- with a time-zone offset -->Valori non validi:
25-10-2023 <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25 <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00 <!-- space instead of the "T" separator -->Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| cite | URL | URL di un documento (changelog, diff, issue) che spiega perché il testo è stato modificato o eliminato. |
| datetime | YYYY-MM-DDThh:mm:ssTZD | La data (e l'orario facoltativo) in cui il testo è stato eliminato. |
Il tag <del> utilizza anche gli Attributi Globali e gli Attributi Evento.
Tag correlati
<ins>— segna il testo inserito; il partner naturale di<del>.<s>— segna il testo che non è più accurato o rilevante (non eliminato durante una modifica).