HTML del e ins: mostrar alterações e suas datas

HTML <del> marca conteúdo deletado de um documento, e <ins> marca conteúdo inserido. Embora sua aparência padrão geralmente seja um tachado e um sublinhado, seu principal objetivo é transmitir o significado de uma alteração; eles não gerenciam automaticamente versões do documento nem salvam um histórico de edição.

Exemplo completo: mostrar conteúdo excluído e inserido juntos

O seguinte anúncio de cronograma é um exemplo de prática. Salve-o como changes.html e abra-o em um navegador para ver tanto os valores antigos quanto os novos. A data e o motivo também aparecem em texto visível para que os leitores possam entender a mudança mesmo quando cores ou linhas são difíceis de distinguir.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemplo de alteração de horário</title>
</head>
<body>
  <h1>Encontro de prática: alteração de horário</h1>
  <p>Horário de início:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>O horário de início anterior era 10:00; o novo horário é 11:00.</p>
  <p id="reason">Em 30 de outubro de 2026, o horário foi alterado para permitir mais tempo de preparação.</p>
</body>
</html>

Com estilos padrão típicos, 10:00 tem um risco no meio e 11:00 tem um sublinhado. O CSS pode alterar sua aparência. Aplicar del não apaga o texto original dos dados, então não o use para ocultar senhas, informações pessoais ou outro conteúdo que não deva ser público.

Função dos atributos datetime e cite

O atributo opcional datetime registra a data, ou data e hora, em que a alteração foi feita. O 2026-10-30 do exemplo é uma data no formato ano-mês-dia. Se você precisar de um horário preciso, pode incluir um deslocamento de fuso horário explícito, como em 2026-10-30T09:00:00+09:00. Adicionar uma data não agenda uma publicação nem faz a alteração do documento ocorrer automaticamente naquele momento.

O atributo cite especifica o URL de um recurso que explica a alteração. O exemplo usa #reason para apontar para um parágrafo explicativo no mesmo documento. O atributo não exibe automaticamente uma explicação ou um link clicável, portanto, inclua qualquer motivo e data necessários também no texto visível.

Diferencie edições de documento de linhas decorativas

Use del e ins para representar edições em um documento. Para um risco em informações que não são mais precisas ou relevantes, também considere o significado de <s>. Use CSS text-decoration para linhas puramente decorativas. Uma aparência visual idêntica não implica significado idêntico.

Leitores de tela podem não anunciar todos os limites de exclusão ou inserção com suas configurações padrão. Para uma mudança importante, explique os valores antigos e novos em uma frase, como no exemplo. Não distinga os dois estados apenas pela cor, e indique claramente qual informação é atualmente válida. As referências de del na MDN e de ins na MDN descrevem os elementos e seus atributos.