Tag HTML <s>
Il tag HTML <s> segna testo non più accurato o rilevante (es. un vecchio prezzo). Differenze con <del> e <strike>, con esempi.
Il tag HTML <s> segna testo che non è più accurato o rilevante — ma non è stato letteralmente eliminato dal documento. È un elemento inline e i browser ne renderizzano il contenuto con uno strikethrough (una riga orizzontale attraverso il testo) per impostazione predefinita.
Un uso classico è mostrare un prezzo scontato: il vecchio prezzo rimane visibile ma barrato, accanto al prezzo di vendita attuale. Questo comunica al lettore "questo era vero in precedenza; ecco cosa è vero adesso."
<s> è un elemento HTML5 valido — non è deprecato. Il tag deprecato è <strike>, che non dovresti mai usare nelle nuove pagine. Usa <s> (semantica) o CSS text-decoration: line-through (solo stile visivo) al suo posto.
Sintassi
Il tag <s> viene usato in coppia. Il contenuto va tra il tag di apertura (<s>) e quello di chiusura (</s>).
Esempio — il caso d'uso del prezzo barrato
Questo è l'uso più comune e idiomatico di <s>: il prezzo originale non è più rilevante, quindi viene barrato, mentre il prezzo scontato viene mostrato come quello attuale.
Tag HTML <s>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
Hurry, sale ends soon!
<s>Was $50.00</s>
<strong>Now $29.99</strong>
</p>
</body>
</html>Risultato
<s> vs <del> vs <strike>
Questi tre tag producono tutti una riga attraverso il testo, ma hanno significati molto diversi. Scegliere quello giusto è ciò che rende il tuo HTML semantico anziché solo decorato visivamente.
| Tag | Significato | Usalo quando… | Stato |
|---|---|---|---|
<s> | Il contenuto non è più accurato o rilevante | Un vecchio prezzo, un dettaglio obsoleto, una raccomandazione che è cambiata — il testo originale non è mai stato "rimosso", è semplicemente superato. | HTML5 valido |
<del> | Il contenuto è stato eliminato / rimosso come modifica editoriale | Tenere traccia delle modifiche a un documento. Si abbina naturalmente a <ins> per il testo inserito. Supporta cite e datetime per registrare perché e quando. | HTML5 valido |
<strike> | Strikethrough (solo presentazione) | Mai — usa <s> o <del> al suo posto. | Deprecato |
In breve: usa <s> quando il significato è "questo non è più il caso," e usa <del> quando il significato è "questo è stato modificato e rimosso." Se hai bisogno solo della riga visiva senza un significato speciale, usa CSS text-decoration: line-through su un elemento generico.
Accessibilità
Per impostazione predefinita, gli screen reader non annunciano lo strikethrough — la tecnologia assistiva legge il contenuto di <s> come qualsiasi altro testo. Quindi un utente vedente vede "Was $50.00" barrato, ma un utente con screen reader potrebbe sentire semplicemente "Was $50.00" senza alcun indizio che sia obsoleto.
Per i casi in cui lo stato barrato porta un significato importante, aggiungi testo nascosto visivamente che lo espliciti:
<p>
<s><span class="visually-hidden">Old price: </span>Was $50.00</s>
<strong>Now $29.99</strong>
</p>.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}Attributi
Il tag <s> supporta gli attributi globali e gli attributi evento. Non ha attributi propri.
Stile
I browser applicano già text-decoration: line-through a <s>, quindi non è necessario CSS solo per ottenere la riga. Lo stile è una sovrascrittura opzionale — ad esempio, per colorare il testo barrato senza ridichiarare la riga:
s {
color: gray;
}