Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Os elementos DEL e INS

Publicado em: 2006-09-20 — 14.737 visualizacoes         

Esta página integra o Compêndio sobre o uso dos elementos HTML e descreve os elementos:
DEL e INS

DEL é a abreviação para a palavra inglesa DELETE, consagrada na Internet no Brasil pelo verbo “DELETAR”, que traduzido significa: apagar, riscar, anular, cancelar.

O elemento HTML DEL destina-se a marcar conteúdos (em geral textos), que foram cancelados em um documento.

INS é a abreviação para a palavra inglesa INSERT, que traduzida significa: inserir, introduzir, intercalar.

O elemento HTML INS destina-se a marcar conteúdos (em geral textos), que foram inseridos em um documento.

Estes elementos são úteis para marcar documentos que estão em fase de produção e normalmente são usados juntos, um complementando o outro.

Exemplo

Uma ótima exemplificação para seu emprego é na fase de desenvolvimento de documentos normativos onde novas versões são lançadas à medida que o trabalho evolui. Aí se prestam, a marcar as alterações feitas na versão anterior para a versão atual.

A marcação a seguir:


<p>
Testes em laboratório, usando equipamento <del>mecânico</del> <ins>eletrônico</ins>, 
demonstraram a necessidade de adoção de um coeficiente de segurança 
<del>maior que 2 (dois)</del> <ins>igual a 2,13</ins>.
</p> 

Produz a seguinte renderização no navegador:

Testes em laboratório, usando equipamento mecânico eletrônico, demonstraram a necessidade de adoção de um coeficiente de segurança maior que 2 (dois) igual a 2,13.

Na frase acima a versão anterior das normas para determinação do coeficiente de segurança basearam-se em testes de laboratório usando equipamento que permitia ter uma noção da ordem de grandeza. Na versão atual, os testes foram realizados com equipamento mais sofisticado permitindo chegar a um valor mais confiável. Esta é a idéia geral destes elementos. Atualiza o documento, deixando à vista o que foi modificado.

Os navegadores devem renderizar estes elementos de forma diferenciada, de modo a deixar bem claro o que foi anulado e o que foi inserido. Em geral a forma adotada é a de colocar uma linha riscando o que foi anulado e sublinhar o que foi inserido.

Atributos

Estes elementos admitem os atributos ID, CLASS, LANG, TITLE, STYLE e os de eventos de mouse como onmouseover, além de CITE e DATETIME que veremos com detalhes a seguir.

O atributo CITE destina-se a fornecer o endereço para um documento contendo uma explicação detalhada sobre a alteração feita. O atributo DATETIME destina-se a marcar o dia e a hora que a alteração foi feita.
Veja o exemplo a seguir:


<p>
Testes em laboratório, usando equipamento 
<del datetime="2006-07-06T08:15:30-03:00">mecânico</del> 
<ins datetime="2006-07-06T08:15:30-03:00"
cite="http://www.endereco.com">eletrônico</ins>, 
demonstraram a necessidade de adoção de um ...
</p> 

No exemplo acima constatamos que a alteração foi feita no dia 06 de julho de 2006 às 8horas 15minutos e 30segundos em um local cuja zona horária está atrasada de 3horas em relação ao horário GMT. O autor da alteração escreveu um documento detalhando as razões da alteração, documento este que se encontra em: http://www.endereco.com

Palavras finais

É perfeitamente válido e lícito, usar estes elementos em qualquer tipo de documento que você tenha publicado e que tenha feito uma alteração, independente de tratar-se de versões ou fase de produção. Se você julgar conveniente, deixar registrado uma alteração, sem retirar o que foi alterado, vá em frente, use estes elementos.

[ « anterior ]   [ index ]    [ próximo » ]

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-09-20 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/09/20/el-del-ins/trackback no seu site.

12 comentários na matéria: “Os elementos DEL e INS”

  1. AdrianoNo Gravatar disse:

    Cara, muito bom. Nunca havia utilizado essas tags. Bastante interessante conhecer suas funcionalidades.

    Parabéns mais uma vez.

    Abraço!

  2. ErikaNo Gravatar disse:

    Oi Maurício!
    Nossa, fiquei sabendo por vc que fui uma das vencedoras do concurso da Veerle! Que legal né? Sortuda eu! 😉

    Obrigada pela dica! Na realidade esse é um dilema que eu tenho, pq não tenho muitos posts, então vivo mudando, coloco pra aparecerem 20, 5, 10…mas como vc é o famoso cara do CSS (já tinha visto seu site!), sua dica é uma ordem! rsss…coloquei 5 só…agora tá rápido? Acho que ficou melhor né?

    Tô estudando CSS por hobby pq amo web design…suas dicas no futuro serão valiosas! Qd eu estiver craque, vou fazer um novo blog, usando a minha nova licença Expression Engine e meus novos conhecimentos de CSS! 😉

  3. Otavio nogueiraNo Gravatar disse:

    Cara, muito perfeito,
    com certeza deconhecia o que foi abordado no post, porém mais uma vez… minutos de leitura para anos de aprendizado ;_)

  4. JoaresNo Gravatar disse:

    Parabéns Maujor… nem sabia que existia esse datetime…

  5. Pedro RogérioNo Gravatar disse:

    Muito bom, desconhecia o uso correto de INS

  6. KayanNo Gravatar disse:

    Show de bola,
    Eu pensava que era feito de outra forma, agora ficou bem claro como ultilizar.

    Valeu.

  7. Rodrigo AramburuNo Gravatar disse:

    Legal, volta e meia via o textos com aquele risco e não sabia o que eram, agora sei 🙂

  8. Carlos EduardoNo Gravatar disse:

    Muito legal.
    Ótimo termos artigos deste nível, dando maiores detalhes sobre alguns elementos HTML pouco utilizados.

    Parabéns!

  9. Júnior PeresNo Gravatar disse:

    Também desconhecia.

    Ótima matéria!!!

  10. Eugenio GrigolonNo Gravatar disse:

    Ótima matéria. Acho muito bom saber todos os significados dos elementos e qual o uso certo de cada uma delas. Muito bons exemplos, parabéns!

  11. Areta do BemNo Gravatar disse:

    Desconhecia também…
    Mas não vejo muita utilidade quando trabalhamos quase o tempo todo com atualizações dinâmicas, sou leiga ainda, mas vou me interar sobre essa novidade que você apresenta Maujor.

    Mais uma vez obrigada!

  12. Lucas AlvesNo Gravatar disse:

    Valeu por compartilhar isso Maujor, confesso que desconhecia sobre essas duas tags.

    Abraços

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo