HTML del e ins: mostrare modifiche e relative date

HTML <del> contrassegna il contenuto eliminato da un documento, e <ins> contrassegna il contenuto inserito. Sebbene il loro aspetto predefinito sia solitamente testo barrato e testo sottolineato, il loro scopo principale è trasmettere il significato di una modifica; non gestiscono automaticamente le versioni del documento né salvano una cronologia delle modifiche.

Esempio completo: mostra insieme il contenuto eliminato e quello inserito

L'annuncio di programma seguente è un esempio pratico. Salvalo come changes.html e aprilo in un browser per vedere sia i valori vecchi sia quelli nuovi. La data e il motivo appaiono anche nel testo visibile in modo che i lettori possano comprendere la modifica anche quando colori o linee sono difficili da distinguere.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esempio di modifica dell’orario</title>
</head>
<body>
  <h1>Incontro di esercitazione: modifica dell’orario</h1>
  <p>Ora di inizio:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>L’ora di inizio precedente era 10:00; quella nuova è 11:00.</p>
  <p id="reason">Il 30 ottobre 2026 l’orario è stato modificato per consentire più tempo per la preparazione.</p>
</body>
</html>

Con gli stili predefiniti tipici, 10:00 appare barrato e 11:00 appare sottolineato. Il CSS può cambiare il loro aspetto. Applicare del non cancella il testo originale dai dati, quindi non usarlo per nascondere password, informazioni personali o altri contenuti che non devono essere pubblici.

Il ruolo degli attributi datetime e cite

L'attributo opzionale datetime registra la data, o data e ora, in cui è stata effettuata la modifica. L'esempio 2026-10-30 è una data nel formato anno-mese-giorno. Se hai bisogno di un orario preciso, puoi includere un offset di fuso orario esplicito, come in 2026-10-30T09:00:00+09:00. Aggiungere una data non programma una pubblicazione né fa cambiare automaticamente il documento in quel momento.

L'attributo cite specifica l'URL di una risorsa che spiega la modifica. L'esempio utilizza #reason per puntare a un paragrafo esplicativo nello stesso documento. L'attributo non visualizza automaticamente una spiegazione o un link cliccabile, quindi includi anche nel testo visibile eventuali motivi e date necessarie.

Distingui le modifiche al documento dalle linee decorative

Usa del e ins per rappresentare le modifiche a un documento. Per un testo barrato su informazioni non più accurate o rilevanti, considera anche il significato di <s>. Usa CSS text-decoration per linee puramente decorative. Un aspetto visivo identico non implica un significato identico.

I lettori di schermo potrebbero non annunciare ogni confine di cancellazione o inserimento con le impostazioni predefinite. Per una modifica importante, spiega i valori vecchi e nuovi in una frase, come nell'esempio. Non distinguere i due stati solo con il colore e indica chiaramente quali informazioni sono attualmente valide. I riferimenti di del su MDN e di ins su MDN descrivono gli elementi e i loro attributi.