Tag HTML <strike>
A tag obsoleta <strike> do HTML exibia texto tachado. Saiba por que foi removida e como substituí-la por <s>, <del> ou CSS.
A tag <strike> era usada para renderizar texto com uma linha horizontal no meio (texto tachado).
O elemento <strike> é uma tag HTML obsoleta e está descontinuado no HTML5. Não o utilize em novos documentos. Use <del>, <s> ou CSS em seu lugar.
Esta página explica o que a <strike> fazia, por que foi removida e — mais importante — exatamente o que usar em seu lugar. Se você deve optar por <del>, <s> ou CSS puro depende do significado do texto tachado, por isso cada substituição é apresentada com um exemplo funcional abaixo.
Por que a <strike> foi removida
O HTML5 eliminou a <strike> porque ela descrevia apenas como o texto deveria parecer, e não o que ele significa. O HTML moderno separa o significado (marcação) da aparência (CSS). Uma linha sobre um texto pode ter significados muito diferentes:
- O texto foi excluído em uma edição → use
<del>(frequentemente combinada com<ins>para indicar a substituição). - O texto não é mais preciso ou relevante, mas é mantido para contexto → use
<s>. - A linha é puramente visual sem significado semântico → use a propriedade CSS
text-decoration: line-through.
Escolher o elemento correto também ajuda tecnologias assistivas e mecanismos de busca a entenderem o seu conteúdo, algo que a genérica <strike> nunca fez.
Como a antiga <strike> era usada
A tag <strike> vinha em pares, com o conteúdo entre as tags de abertura (<strike>) e fechamento (</strike>). Os navegadores ainda a renderizam por compatibilidade com código legado, mas você não deve escrever código novo assim:
<!-- Obsolete — do not use in new documents -->
<p><strike>I am studying at the school.</strike></p>
<p>I am studying at the university.</p>
Migrando da <strike>
Substitua cada <strike> com base no significado do texto tachado.
Opção 1: <del> para conteúdo excluído (com <ins>)
Use <del> quando um texto foi removido durante uma edição. Combine-a com <ins> para mostrar a substituição — um exemplo clássico é um preço com desconto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Price: <del>$50.00</del> <ins>$39.99</ins></p>
</body>
</html>O preço antigo é marcado como excluído e o novo como inserido — a relação entre eles agora é semântica, não apenas visual.
Opção 2: <s> para conteúdo que não é mais relevante
Use <s> para conteúdo que não é mais preciso ou relevante, mas é mantido na página para contexto — por exemplo, um item concluído ou indisponível em uma lista. Não deve ser usada para edições em documentos; use <del> nesses casos.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li><s>Buy milk</s> (already done)</li>
<li>Buy bread</li>
<li>Buy eggs</li>
</ul>
</body>
</html>Opção 3: CSS line-through para tachado puramente visual
Se a linha não tem significado semântico, use a propriedade CSS text-decoration em um elemento não semântico, como um <span> ou <p>. Nunca estilize o elemento obsoleto strike — aplique a regra a uma marcação válida.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.struck {
text-decoration: line-through;
}
</style>
</head>
<body>
<p><span class="struck">I am studying at the school.</span></p>
<p>I am studying at the university.</p>
</body>
</html>