O elemento del no HTML é usado para marcação de um texto não mais válido. Marcação de texto que deve ser excluído pode ser útil para determinar as diferenças entre várias versões de um mesmo documento. Os navegadores normalmente formatam com uma linha riscando (tachando) o texto excluído. Para representar um texto novo que ficará no lugar do texto excluído usamos o elemento ins que por padrão aplica uma formatação de sublinhado no texto.
Usamos esses dois elementos sempre que quisermos descrever as atualizações e modificações em uma página da web. Um bom exemplo seria uma data para a realização de uma prova, caso a data fosse alterada ao invés de simplesmente apagar a antiga data e inserir uma data nova, aplicamos o elemento del na data antiga e ins na data nova. É uma boa forma de manter um histórico de alterações no documento. Todos os usuários que acessarem vão saber que o documento foi atualizado de uma data para outra. Uma boa forma de manter a integridade da informação.
Atributos cite e datetime
Os dois atributos são opcionais e podem ser usados nos elementos del e ins.
O atributo cite da à opção de você passar uma url com informações sobre o conteúdo que foi excluído. Já o atributo datetime especifica a data e a hora da exclusão do conteúdo. Deve ser escrito da seguinte forma:
- YYYY-MM-DDThh:mm:SS
- YYYY – Ano
- MM – Mês
- DD – Dia
- T – Caractere separador
- hh – Hora
- mm – Minutos
- SS – Segundos
Todos os candidatos devem realizar a prova no estado <del datetime="2013-12-23T23:31:05" cite="http://www.exemplo.com.br">de Santa Catarina</del> <ins>do Rio Grande do Sul</ins> no próximo domingo.
Os elementos podem ser utilizados para deletar elementos nível de bloco inteiros:
<del> <p> A humanidade não se divide em heróis e tiranos</p> <p> Cada dia a natureza produz o suficiente para nossa carência</p> </del> <p> não havia pobreza no mundo e ninguém morreria de fome.</p>
Abaixo você confere um exemplo para acrescentar o valor do atributo cite como conteúdo para o usuário. Perceba que o conteúdo “http://kadunew.com/blog” aparece entre parênteses logo apos o fechamento da tag ins.
ins[cite]:after,
del[cite]:after {
content: " (" attr(cite) ")";
font-size: 75%;
line-height: 0;
color: #888;
}
<ins cite="http://kadunew.com/blog">[Texto inserido…] Este texto foi adicionado para completar informações.</ins>
[Texto inserido…] Este texto foi adicionado para completar informações.
Elemento s
O elemento s, que é formatado pelos navegadores com um risco no texto, não deve ser utilizado para excluir ou eliminar um texto, como vimos devemos utilizar o elemento del. Sempre que você quiser mostrar que um conteúdo está desatualizado ou não é mais relevante use o elemento s.
O elemento strike teve seu uso descontinuado no HTML 5.
Veja um exemplo:
<s>Utilize o elemento strike</s>
Por hoje era isso, uma boa semana a todos. Abraço!