Tag HTML <ins>
Il tag <ins> definisce una parte di testo inserita nel documento. Descrizione, attributi ed esempi.
Il tag HTML <ins> contrassegna un tratto di testo che è stato inserito in un documento. È un elemento semantico ed editoriale: non si limita a sottolineare il testo, ma registra che è stata effettuata un'aggiunta. I browser visualizzano il contenuto sottolineato per impostazione predefinita, ma è possibile modificarlo con la proprietà CSS text-decoration.
<ins> è quasi sempre abbinato al suo corrispettivo, il tag <del>, che contrassegna il testo che è stato rimosso. Insieme descrivono una modifica — cosa è stato eliminato e cosa è stato aggiunto al suo posto. È esattamente il tipo di informazione da conservare in:
- Changelog e note di rilascio — per mostrare cosa è stato aggiunto in una nuova versione.
- Documenti legali e contrattuali — per registrare gli emendamenti senza perdere la formulazione originale.
- Revisioni tracciate / diff di documenti — la vista "redline" a cui gli editor sono abituati dai word processor.
Poiché <ins> riguarda esclusivamente la marcatura di una modifica, è opportuno usare un elemento diverso quando si desidera solo un effetto visivo: usare <u> per la sottolineatura decorativa non testuale, <em> o <strong> per l'enfasi, e <mark> per evidenziare testo rilevante.
Sintassi
Il tag <ins> funziona in coppia. Il contenuto viene scritto tra il tag di apertura (<ins>) e quello di chiusura (</ins>).
<ins>This text was added.</ins>Esempio del tag HTML <ins>:
Tag HTML <ins>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del datetime="2023-01-01">violets</del> <ins datetime="2023-10-01">snowdrops</ins>.</p>
</body>
</html>Risultato
Abbinare <ins> a <del> per mostrare un diff di documento
L'uso più comune di <ins> è visualizzare una "redline" di una modifica: il vecchio testo barrato e il nuovo testo sottolineato, uno accanto all'altro. Il contenuto di <del> è la formulazione rimossa; il contenuto di <ins> è la sostituzione.
<!DOCTYPE html>
<html>
<head>
<title>Document diff</title>
</head>
<body>
<p>
The meeting is scheduled for
<del>Monday</del>
<ins>Wednesday</ins>
at
<del>9:00 AM</del>
<ins>10:30 AM</ins>.
</p>
</body>
</html>Per impostazione predefinita le parti <del> appaiono con una linea che le attraversa e le parti <ins> appaiono sottolineate, così il lettore può vedere a colpo d'occhio cosa è cambiato.
Gli attributi cite e datetime
Sia <ins> che <del> accettano due attributi che registrano perché e quando è avvenuta una modifica. Non producono alcun effetto visibile di per sé — sono metadati leggibili dalle macchine che gli strumenti di editing e le tecnologie assistive possono esporre.
cite— un URL che punta a un documento (un issue, un ticket, una nota di riunione) che spiega il motivo dell'inserimento.datetime— la data, e facoltativamente l'ora, in cui il testo è stato inserito.
Il valore di datetime segue lo stesso formato di <time>: YYYY-MM-DDThh:mm. La parte della data (YYYY-MM-DD) è obbligatoria; la parte dell'ora è facoltativa. Se si include un orario, separarlo dalla data con la lettera letterale T, e si possono aggiungere secondi e un offset di fuso orario (ad esempio 2023-10-01T14:30:00Z).
<p>
Price:
<del datetime="2023-09-30" cite="/changelog#price-update">$49</del>
<ins datetime="2023-10-01T09:00" cite="/changelog#price-update">$59</ins>
</p>| Valore | Significato |
|---|---|
2023-10-01 | Solo data — 1° ottobre 2023 |
2023-10-01T09:00 | Data e ora locale — 09:00 |
2023-10-01T09:00:00Z | Data, ora e fuso orario UTC |
Racchiudere contenuto block-level
<ins> è un contenuto trasparente: può racchiudere testo inline oppure interi blocchi (contenuto di flusso) come paragrafi ed elementi di lista, purché il contesto circostante permetta quei blocchi. Questo rende possibile contrassegnare un intero paragrafo o più voci di lista come appena inseriti.
<!DOCTYPE html>
<html>
<head>
<title>Inserted block</title>
</head>
<body>
<h2>Release 2.0 — what's new</h2>
<ins datetime="2023-10-01">
<p>Added dark mode and keyboard shortcuts.</p>
<ul>
<li>Press <kbd>?</kbd> to view all shortcuts.</li>
<li>Toggle the theme from the settings menu.</li>
</ul>
</ins>
</body>
</html>Stile e accessibilità
La maggior parte dei lettori di schermo non annuncia <ins> e <del> per impostazione predefinita, quindi un utente che si affida all'audio potrebbe non accorgersi che è avvenuta una modifica. L'aggiunta di un aria-label a <ins> non è una soluzione affidabile — aria-label non è standard su questo elemento e il supporto è inconsistente.
L'approccio consigliato è esporre la modifica attraverso il contenuto generato da CSS, usando gli pseudo-elementi ::before e ::after. L'etichetta inserita diventa parte del testo visualizzato, che i lettori di schermo possono leggere, e si mantiene lo stile visivo in un unico punto.
<!DOCTYPE html>
<html>
<head>
<title>Accessible ins styling</title>
<style>
ins {
background-color: #d4f7d4;
text-decoration: none;
border-bottom: 2px solid green;
}
ins::before {
content: " [inserted: ";
}
ins::after {
content: "] ";
}
</style>
</head>
<body>
<p>The deadline is <ins datetime="2023-10-01">next Friday</ins>.</p>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| cite | URL | Indica l'URL di un documento che spiega il motivo dell'inserimento. |
| datetime | YYYY-MM-DDThh:mm | Definisce la data (e l'ora facoltativa) dell'inserimento. |
Il tag <ins> supporta anche gli Attributi Globali e gli Attributi Evento.
Tag correlati
<del>— contrassegna il testo che è stato rimosso (il corrispettivo di<ins>).<s>— rappresenta contenuto che non è più accurato o rilevante (non una modifica editoriale).<mark>— evidenzia il testo per riferimento o rilevanza.<u>— sottolineatura decorativa non testuale, senza significato editoriale.