Tag HTML <del>
A tag <del> marca texto removido de um documento. Aprenda os atributos cite e datetime, o uso com <ins> e acessibilidade, com exemplos.
A tag <del> marca um trecho de texto que foi excluído de um documento. É um elemento semântico: não apenas risca o texto, mas registra que o conteúdo foi intencionalmente removido como parte de uma edição. Os navegadores o renderizam com um tachado por padrão, mas o significado está na marcação, não no estilo.
Use <del> sempre que quiser mostrar um histórico de alterações, por exemplo:
- Edições rastreadas — mantendo o texto original visível enquanto indica que foi removido (changelogs, wikis, documentos colaborativos).
- Reduções de preço — riscando o preço antigo e exibindo o novo ao lado.
- Correções — preservando um erro no registro (uma correção publicada) em vez de apagá-lo silenciosamente.
<del> quase sempre é usado em conjunto com a tag <ins>, que marca o texto recém inserido e é sublinhado por padrão. Juntos, expressam "isto foi substituído por aquilo."
Quando NÃO usar <del>
Se você deseja apenas um efeito de tachado sem o significado de "isto foi editado", <del> é a ferramenta errada:
- Para conteúdo que não é mais preciso ou relevante (mas não foi excluído em uma edição) — como um produto esgotado ou uma oferta expirada — use a tag
<s>. - Para um tachado puramente visual sem intenção semântica, use a propriedade CSS text-decoration com o valor
line-through.text-decoration: line-throughé presentacional e é ignorado por tecnologias assistivas, enquanto<del>transmite significado a elas.
Em resumo: use <del> quando o tachado significa "removido em uma edição", e use CSS quando precisar apenas da linha.
Você pode reestilizar um elemento <del> livremente com CSS — por exemplo, alterar sua cor ou substituir o tachado padrão — sem perder seu significado, pois a semântica está na tag, não no estilo.
Acessibilidade
Os leitores de tela não tratam <del> da mesma forma. Por padrão, NVDA e JAWS geralmente leem o texto excluído como qualquer outro texto e não anunciam que foi excluído, a menos que o usuário ative a configuração de verbosidade relevante — portanto, um usuário com visão vê o tachado, enquanto um usuário de leitor de tela pode não ouvir nada sobre a edição.
Quando a exclusão em si é importante para compreender o conteúdo (por exemplo, a diferença entre um preço antigo e um novo), adicione uma indicação explícita em vez de depender apenas da linha visual:
<p>
Price:
<del><span class="visually-hidden">Old price: </span>$99</del>
<ins><span class="visually-hidden">New price: </span>$79</ins>
</p>Evite tentar injetar texto "excluído" através do CSS content — o conteúdo gerado é exposto de forma inconsistente às tecnologias assistivas. Prefira texto visível, um aria-label ou aria-describedby no elemento quando for necessário contexto adicional.
Sintaxe
A tag <del> vem em pares. O conteúdo é escrito entre as tags de abertura (<del>) e fechamento (</del>).
Exemplo da tag HTML <del>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My favorite color is <del>green</del> <ins>blue</ins>!</p>
</body>
</html>Exemplo do mundo real: uma redução de preço
O uso mais comum de <del> em conjunto com <ins> é mostrar um preço antigo ao lado de um novo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Special offer: <del>$99</del> <ins>$79</ins></p>
</body>
</html>O preço antigo permanece na página (tachado) e o novo preço é marcado como inserido, de forma que tanto o resultado visual quanto a marcação contam a mesma história.
Exemplo da tag HTML <del> com o atributo cite
O atributo cite recebe uma URL apontando para um documento que explica por que o texto foi alterado — uma entrada de changelog, um diff ou um link de rastreador de problemas, não o conteúdo excluído em si:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The release date is
<del cite="https://example.com/changelog#2023-10-25">October 25</del>
<ins cite="https://example.com/changelog#2023-11-02">November 2</ins>.
</p>
</body>
</html>Exemplo da tag HTML <del> com o atributo datetime
O atributo datetime registra quando a exclusão ocorreu em formato legível por máquina:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <del datetime="2023-10-25T14:30:00Z">old text</del> was replaced with new content.</p>
</body>
</html>O formato datetime
O valor de datetime segue o formato YYYY-MM-DDThh:mm:ssTZD:
YYYY-MM-DD— a data (ano, mês, dia). Esta parte é obrigatória.T— um separador literal entre a data e a hora.hh:mm:ss— a hora. Toda a parte de hora é opcional — uma data simples é válida.TZD— o Designador de Fuso Horário:Zpara UTC, ou um deslocamento como+02:00/-05:00.
Valores válidos:
2023-10-25 <!-- date only -->
2023-10-25T14:30 <!-- date + time, no seconds -->
2023-10-25T14:30:00Z <!-- UTC -->
2023-10-25T14:30:00+02:00 <!-- with a time-zone offset -->Valores inválidos:
25-10-2023 <!-- wrong order; must be YYYY-MM-DD -->
2023/10/25 <!-- wrong separators; must use hyphens -->
2023-10-25 14:30:00 <!-- space instead of the "T" separator -->Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| cite | URL | URL de um documento (changelog, diff, issue) que explica por que o texto foi editado ou excluído. |
| datetime | YYYY-MM-DDThh:mm:ssTZD | A data (e hora opcional) em que o texto foi excluído. |
A tag <del> também utiliza os Atributos Globais e os Atributos de Evento.
Tags relacionadas
<ins>— marca texto inserido; o parceiro natural de<del>.<s>— marca texto que não é mais preciso ou relevante (não excluído em uma edição).