Tag HTML <s>
A tag HTML <s> marca texto que já não é preciso ou relevante (ex.: preço antigo). Veja como difere de <del> e <strike>, com exemplos.
A tag HTML <s> marca texto que já não é preciso ou relevante — mas que não foi literalmente removido do documento. É um elemento inline e os navegadores renderizam seu conteúdo com um tachado (uma linha horizontal sobre o texto) por padrão.
Um uso clássico é exibir um preço com desconto: o preço antigo permanece visível, mas tachado, ao lado do preço atual. Isso indica ao leitor "isso era verdade antes; veja o que é verdade agora."
<s> é um elemento HTML5 válido — não está obsoleto. A tag obsoleta é <strike>, que nunca deve ser usada em páginas novas. Use <s> (semântica) ou CSS text-decoration: line-through (apenas estilo visual) em vez disso.
Sintaxe
A tag <s> vem em pares. O conteúdo fica entre as tags de abertura (<s>) e fechamento (</s>).
Exemplo — o caso de uso de preço tachado
Este é o uso mais comum e idiomático de <s>: o preço original não é mais relevante, portanto é tachado, enquanto o preço promocional é exibido como atual.
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>Resultado
<s> vs <del> vs <strike>
Essas três tags produzem uma linha sobre o texto, mas têm significados muito diferentes. Escolher a correta é o que torna seu HTML semântico em vez de apenas visualmente decorado.
| Tag | Significado | Use quando… | Status |
|---|---|---|---|
<s> | O conteúdo já não é preciso ou relevante | Um preço antigo, um detalhe desatualizado, uma recomendação que mudou — o texto original nunca foi "removido", apenas substituído. | HTML5 válido |
<del> | O conteúdo foi excluído / removido como alteração editorial | Rastreamento de edições em um documento. Combina naturalmente com <ins> para texto inserido. Suporta cite e datetime para registrar por que e quando. | HTML5 válido |
<strike> | Tachado (somente apresentação) | Nunca — use <s> ou <del> em vez disso. | Obsoleto |
Em resumo: use <s> quando o significado é "isso não é mais verdade," e use <del> quando o significado é "isso foi editado e removido." Se você precisar apenas da linha visual sem significado especial, use CSS text-decoration: line-through em um elemento simples.
Acessibilidade
Por padrão, leitores de tela não anunciam o tachado — a tecnologia assistiva lê o conteúdo de <s> da mesma forma que qualquer outro texto. Assim, um usuário com visão vê "Was $50.00" tachado, mas um usuário de leitor de tela pode ouvir apenas "Was $50.00" sem nenhuma indicação de que está desatualizado.
Para casos em que o estado tachado carrega um significado importante, adicione texto visualmente oculto que o deixe explícito:
<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;
}Atributos
A tag <s> suporta os atributos globais e os atributos de evento. Ela não possui atributos próprios.
Estilo
Os navegadores já aplicam text-decoration: line-through ao <s>, portanto você não precisa de CSS apenas para obter a linha. O estilo é uma substituição opcional — por exemplo, para colorir o texto tachado sem redeclarar a linha:
s {
color: gray;
}