{"id":2849,"date":"2013-12-23T13:40:48","date_gmt":"2013-12-23T15:40:48","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2849"},"modified":"2013-12-23T13:40:48","modified_gmt":"2013-12-23T15:40:48","slug":"como-usar-os-elementos-ins-del-e-s-no-html","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html","title":{"rendered":"Como usar os elementos ins, del e s no HTML"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg\" alt=\"html sem\u00e2ntico\" title=\"html sem\u00e2ntico\" width=\"520\" height=\"214\" class=\"aligncenter size-full wp-image-1520\"><\/p>\n<p>O elemento <code>del<\/code> no HTML \u00e9 usado para marca\u00e7\u00e3o de um texto n\u00e3o mais v\u00e1lido. Marca\u00e7\u00e3o de texto que deve ser exclu\u00eddo pode ser \u00fatil para determinar as diferen\u00e7as entre v\u00e1rias vers\u00f5es de um mesmo documento. Os navegadores normalmente formatam com uma linha riscando (tachando) o texto exclu\u00eddo. Para representar um texto novo que ficar\u00e1 no lugar do texto exclu\u00eddo usamos o elemento <code>ins<\/code> que por padr\u00e3o aplica uma formata\u00e7\u00e3o de sublinhado no texto.<br \/>\n<!--more--><br \/>\n<strong>Usamos esses dois elementos sempre que quisermos descrever as atualiza\u00e7\u00f5es e modifica\u00e7\u00f5es em uma p\u00e1gina da web<\/strong>. Um bom exemplo seria uma data para a realiza\u00e7\u00e3o de uma prova, caso a data fosse alterada ao inv\u00e9s de simplesmente apagar a antiga data e inserir uma data nova, aplicamos o elemento <code>del<\/code> na data antiga e <code>ins<\/code> na data nova. <strong>\u00c9 uma boa forma de manter um hist\u00f3rico de altera\u00e7\u00f5es no documento<\/strong>. Todos os usu\u00e1rios que acessarem v\u00e3o saber que o documento foi atualizado de uma data para outra. Uma boa forma de manter a integridade da informa\u00e7\u00e3o.<\/p>\n<h2>Atributos cite e datetime<\/h2>\n<p>Os dois atributos s\u00e3o opcionais e podem ser usados nos elementos <code>del<\/code> e <code>ins<\/code>.<\/p>\n<p>O atributo <code>cite<\/code> da \u00e0 op\u00e7\u00e3o de voc\u00ea passar uma url com informa\u00e7\u00f5es sobre o conte\u00fado  que foi exclu\u00eddo. J\u00e1 o atributo <code>datetime<\/code> especifica a data e a hora da exclus\u00e3o do conte\u00fado. Deve ser escrito da seguinte forma:<\/p>\n<ul>\n<li><strong>YYYY-MM-DDThh:mm:SS<\/strong><\/li>\n<li>YYYY \u2013 Ano<\/li>\n<li>MM \u2013 M\u00eas<\/li>\n<li>DD \u2013 Dia<\/li>\n<li>T \u2013 Caractere separador<\/li>\n<li>hh \u2013 Hora<\/li>\n<li>mm \u2013 Minutos<\/li>\n<li>SS \u2013 Segundos<\/li>\n<\/ul>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nTodos os candidatos devem realizar a prova no estado &lt;del datetime=&quot;2013-12-23T23:31:05&quot; cite=&quot;http:\/\/www.exemplo.com.br&quot;&gt;de Santa Catarina&lt;\/del&gt; &lt;ins&gt;do Rio Grande do Sul&lt;\/ins&gt; no pr\u00f3ximo domingo.\r\n<\/pre>\n<div class=\"obs\">\nTodos 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\u00f3ximo domingo.\n<\/div>\n<p>Os elementos podem ser utilizados para deletar elementos n\u00edvel de bloco inteiros:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;del&gt;\r\n&lt;p&gt; A humanidade n\u00e3o se divide em her\u00f3is e tiranos&lt;\/p&gt;\r\n&lt;p&gt; Cada dia a natureza produz o suficiente para nossa car\u00eancia&lt;\/p&gt;\r\n&lt;\/del&gt;\r\n&lt;p&gt; n\u00e3o havia pobreza no mundo e ningu\u00e9m morreria de fome.&lt;\/p&gt;\r\n<\/pre>\n<p>Abaixo voc\u00ea confere um exemplo para acrescentar o valor do atributo <code>cite<\/code> como conte\u00fado para o usu\u00e1rio. Perceba que o conte\u00fado &#8220;http:\/\/kadunew.com\/blog&#8221; aparece entre par\u00eanteses logo apos o fechamento da tag <code>ins<\/code>.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nins&#x5B;cite]:after,\r\ndel&#x5B;cite]:after {\r\n  content: &quot; (&quot; attr(cite) &quot;)&quot;;\r\n  font-size: 75%;\r\n  line-height: 0;\r\n  color: #888;\r\n}\r\n<\/pre>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;ins cite=&quot;http:\/\/kadunew.com\/blog&quot;&gt;&#x5B;Texto inserido\u2026] Este texto foi adicionado para completar informa\u00e7\u00f5es.&lt;\/ins&gt;\r\n<\/pre>\n<p><ins cite=\"http:\/\/kadunew.com\/blog\">[Texto inserido\u2026] Este texto foi adicionado para completar informa\u00e7\u00f5es.<\/ins><\/p>\n<h2>Elemento s<\/h2>\n<p>O elemento <code>s<\/code>, que \u00e9 formatado pelos navegadores com um risco no texto, n\u00e3o deve ser utilizado para excluir ou eliminar um texto, como vimos devemos utilizar o elemento <code>del<\/code>. Sempre que voc\u00ea quiser mostrar que um conte\u00fado est\u00e1 desatualizado ou n\u00e3o \u00e9 mais relevante use o elemento <code>s<\/code>.<\/p>\n<p>O elemento strike teve seu uso descontinuado no HTML 5.<\/p>\n<p>Veja um exemplo:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;s&gt;Utilize o elemento strike&lt;\/s&gt;\r\n<\/pre>\n<p>Por hoje era isso, uma boa semana a todos. Abra\u00e7o!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O elemento del no HTML \u00e9 usado para marca\u00e7\u00e3o de um texto n\u00e3o mais v\u00e1lido. Marca\u00e7\u00e3o de texto que deve ser exclu\u00eddo pode ser \u00fatil para determinar as diferen\u00e7as entre v\u00e1rias vers\u00f5es de um mesmo documento. Os navegadores normalmente formatam com uma linha riscando (tachando) o texto exclu\u00eddo. Para representar um texto novo que ficar\u00e1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[],"class_list":["post-2849","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como usar os elementos ins, del e s no HTML<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como usar os elementos ins, del e s no HTML\" \/>\n<meta property=\"og:description\" content=\"O elemento del no HTML \u00e9 usado para marca\u00e7\u00e3o de um texto n\u00e3o mais v\u00e1lido. Marca\u00e7\u00e3o de texto que deve ser exclu\u00eddo pode ser \u00fatil para determinar as diferen\u00e7as entre v\u00e1rias vers\u00f5es de um mesmo documento. Os navegadores normalmente formatam com uma linha riscando (tachando) o texto exclu\u00eddo. Para representar um texto novo que ficar\u00e1 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2013-12-23T15:40:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"476\" \/>\n\t<meta property=\"og:image:height\" content=\"214\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html\",\"url\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html\",\"name\":\"Como usar os elementos ins, del e s no HTML\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg\",\"datePublished\":\"2013-12-23T15:40:48+00:00\",\"dateModified\":\"2013-12-23T15:40:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg\",\"width\":\"476\",\"height\":\"214\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como usar os elementos ins, del e s no HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como usar os elementos ins, del e s no HTML","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html","og_locale":"pt_BR","og_type":"article","og_title":"Como usar os elementos ins, del e s no HTML","og_description":"O elemento del no HTML \u00e9 usado para marca\u00e7\u00e3o de um texto n\u00e3o mais v\u00e1lido. Marca\u00e7\u00e3o de texto que deve ser exclu\u00eddo pode ser \u00fatil para determinar as diferen\u00e7as entre v\u00e1rias vers\u00f5es de um mesmo documento. Os navegadores normalmente formatam com uma linha riscando (tachando) o texto exclu\u00eddo. Para representar um texto novo que ficar\u00e1 [&hellip;]","og_url":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html","og_site_name":"KADUNEW","article_published_time":"2013-12-23T15:40:48+00:00","og_image":[{"width":476,"height":214,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg","type":"image\/jpeg"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html","url":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html","name":"Como usar os elementos ins, del e s no HTML","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg","datePublished":"2013-12-23T15:40:48+00:00","dateModified":"2013-12-23T15:40:48+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg","width":"476","height":"214"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/html\/como-usar-os-elementos-ins-del-e-s-no-html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/www.kadunew.com\/blog\/category\/html"},{"@type":"ListItem","position":3,"name":"Como usar os elementos ins, del e s no HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2849"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2849"}],"version-history":[{"count":25,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2849\/revisions"}],"predecessor-version":[{"id":2891,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2849\/revisions\/2891"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}