Elementos HTML Menos Comuns e Como Usá-los em Seu Código

O HTML tem muitas tags que muitas pessoas usam todos os dias, como <div>, <p> e <a>. Mas também existem algumas joias escondidas que frequentemente passam despercebidas. Essas tags podem ajudar a tornar os sites mais envolventes, acessíveis e significativos sem muito esforço extra.

Neste artigo, discutiremos um grupo de elementos HTML únicos que podem aprimorar suas páginas da web. Eles oferecem funções específicas para formatar texto, melhorar a legibilidade e adicionar recursos interativos.

Sumário

1. A Tag <q>: Citações Inline Curtas

2. A Tag <s>: Texto com Linha Atingida

3. A Tag <mark>: Texto Destacado

4. A Tag <ruby>: Anotando Texto em Línguas do Leste Asiático

5. A Tag <time>: Tempo e Data Semânticos

6. A Tag <bdi>: Isolamento de Texto Bidirecional

7. A Tag <dfn>: Definindo Termos

8. A Tag <wbr>: Oportunidades de Quebra de Linha

9. A Tag <ins>: Texto Inserido

10. A Tag <del>: Texto Excluído

11. Conclusão

A Tag <q>: Citações Rápidas em Linha

A tag <q> é usada para adicionar citações curtas dentro de um parágrafo. Ajuda a destacar as citações, tornando-as mais fáceis de encontrar, sem interromper o fluxo do texto. Esta tag automaticamente adiciona aspas ao redor do conteúdo.

Descrição e Sintaxe

A estrutura básica da tag <q> é simples:

<p>She said, <q>This is amazing!</q></p>

Isto seria exibido como:
Ela disse: “Isto é incrível!”

Como Difere do Elemento <blockquote>

A tag <q> é para citações curtas dentro de uma frase. Por outro lado, o elemento <blockquote> é usado para citações mais longas que geralmente precisam de seu próprio espaço ou parágrafo.

Por exemplo:

<blockquote>
  "This is a long quote that needs its own space. It is different from a short quote."
</blockquote>

Este bloco aparecerá com recuo e é destinado a destacar um grande trecho de texto citado.

Casos de Uso: Adicionando Citações Dentro de Parágrafos

A tag <q> é perfeita para casos em que você precisa mencionar uma citação em uma frase sem separá-la muito. Por exemplo, ao citar alguém em um artigo ou post de blog:

<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>

Neste caso, a tag <q> mantém a citação pequena e dentro do mesmo parágrafo.

Compatibilidade de Navegadores e Dicas de Estilo

A maioria dos navegadores modernos adiciona automaticamente aspas ao conteúdo dentro de uma tag <q>. Mas você pode mudar a aparência usando CSS, se necessário. Veja como você pode estilizar:

q {
  quotes: "«" "»";
  font-style: italic;
}

Esse código mudará as aspas para marcas no estilo francês (« e ») e deixará a citação em itálico.

A maioria dos navegadores suporta a tag <q>, então você não precisa se preocupar com problemas de compatibilidade para usuários modernos. Mas navegadores mais antigos podem precisar de cuidados extras, então sempre teste se seu público usa versões mais antigas.

A Tag <s>: Texto com Linha Através

A tag <s> é usada para mostrar texto que não é mais correto, relevante ou foi removido. Ela coloca uma linha no meio do texto, o que chamamos de “linha através”. Essa tag é frequentemente usada para indicar algo que foi editado ou atualizado.

Explicação e Uso

A tag <s> é simples de usar. Envolva-a ao redor do texto que você deseja riscar:

<p>This product was <s>$50</s> now only $30!</p>

Isso será exibido como:
Este produto custava $50 agora apenas $30!

Casos de Uso Comuns: Indicar Conteúdo Removido ou Irrelevante

A tag <s> é ótima para mostrar alterações de preço, edições ou conteúdo que não é mais válido. Por exemplo:

Atualizações de preço:

<p><s>$75</s> $50 (Limited Offer!)</p>

Correções ou mudanças:

<p><s>Old website address</s> New website address</p>

Conteúdo que não é mais relevante:

<p>This feature is <s>no longer available</s>.</p>

Possibilidades de Estilização Com CSS

Você pode personalizar como a linha riscada parece usando CSS. Por exemplo, você pode mudar a cor da linha ou do texto:

s {
  text-decoration: line-through;
  color: red;
}

Neste caso, o texto terá uma linha vermelha sobre ele, dando mais ênfase ao fato de que foi riscado.

Significado Semântico Versus Decoração Visual

A tag <s> tem algum significado semântico. Geralmente representa conteúdo que era válido mas agora está incorreto ou desatualizado. É mais do que apenas uma mudança de estilo. Por exemplo, é perfeito para mostrar alterações em documentos legais, correções em postagens de blog, ou atualizações de preços.

Por outro lado, se você está usando o riscado apenas para decoração visual sem significar que o texto está errado, é melhor usar CSS diretamente, como este:

span.strike {
  text-decoration: line-through;
}

E então aplicá-lo em seu HTML:

<p>This text is <span class="strike">crossed out</span> just for fun!</p>

Esta abordagem é puramente para estilização e não carrega o mesmo significado que a tag <s>.

A Tag <mark>: Texto Destacado

A tag <mark> é usada para destacar texto. Ela ajuda a chamar a atenção para certas partes do seu conteúdo, fazendo com que se destaquem. Por padrão, os navegadores destacam o texto com um fundo amarelo quando a tag <mark> é utilizada.

Propósito da Tag <mark>

A tag <mark> é ótima quando você quer enfatizar algo importante. Ela é frequentemente usada para mostrar resultados de busca, mudanças recentes ou qualquer texto que precise de atenção especial.

Aqui está um exemplo de como funciona:

<p>This is a <mark>highlighted</mark> word.</p>

Isso será exibido como:
Este é um termo destacado palavra.

Melhores Práticas para Usar <mark> para Ênfase ou Resultados de Busca

Destaque de termos chave: Se você quiser enfatizar palavras ou frases importantes em um artigo ou postagem de blog, a tag <mark> é uma maneira simples de fazer isso:

<p>The most important concept here is <mark>efficiency</mark>.</p>

Resultados de busca: Ao mostrar resultados de busca em uma página da web, usar a tag <mark> para destacar os termos correspondentes facilita para os usuários encontrarem o que estão procurando:

<p>Your search for <mark>HTML</mark> found these results:</p>

Atualizações recentes: Você também pode usar a tag <mark> para mostrar novas atualizações ou mudanças em seu conteúdo:

<p>We have recently added the <mark>new feature</mark> to the app.</p>

Como Estilizar Texto Destacado de Forma Eficaz

Embora a cor padrão para <mark> seja amarela, você pode alterá-la com CSS para combinar com o design do seu site. Aqui está um exemplo de como personalizar o texto destacado:

mark {
  background-color: lightblue;
  color: black;
  padding: 2px;
}

Isso dará ao texto um fundo azul claro com texto preto.

Se desejar que o texto se destaque ainda mais, você pode adicionar uma borda ou alterar o estilo da fonte:

mark {
  background-color: yellow;
  color: black;
  font-weight: bold;
  border-radius: 4px;
}

Isso fará com que o texto destacado pareça mais polido e perceptível.

Suporte do Navegador e Considerações de Acessibilidade

A tag <mark> é suportada em todos os navegadores modernos, então você não enfrentará problemas de compatibilidade. Apenas certifique-se de que a cor de fundo escolhida forneça contraste suficiente para legibilidade, especialmente para usuários com deficiências visuais.

Usar um fundo claro com texto escuro é uma boa regra. Testar o contraste de cores garante que o conteúdo destacado permaneça acessível a todos, incluindo aqueles que usam leitores de tela.

A Tag <ruby>: Anotando Texto em Idiomas do Leste Asiático

A tag <ruby> é usada para adicionar pequenas anotações ao texto, frequentemente vistas em idiomas do Leste Asiático como japonês ou chinês. Essas anotações ajudam os leitores com pronúncia ou significado, especialmente quando os caracteres são complexos ou desconhecidos.

Definição e Casos de Uso para <ruby>

Em idiomas como o japonês, é comum usar um pequeno guia acima ou ao lado dos caracteres para mostrar como devem ser pronunciados. A tag <ruby> combina o texto principal com uma pequena anotação, geralmente em um script mais simples.

Aqui está um exemplo básico:

<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>

Isso mostra os caracteres kanji japoneses 漢字 com sua pronúncia (furigana) exibida acima ou ao lado deles como かんじ (kanji).

A Importância dos Subelementos <rp> e <rt>

O elemento <rt> é usado dentro da tag <ruby> para definir a anotação (como a pronúncia) para o texto principal. Ele significa “texto ruby”.

<ruby>漢 <rt>かん</rt></ruby>

Isso exibirá 漢 com かん (kan) acima dele como a anotação.

O elemento <rp>, abreviação de “parêntese ruby”, é usado como uma alternativa para navegadores que não suportam a tag <ruby>. Ele envolve caracteres extras, como parênteses, ao redor do texto ruby para mostrar que é uma anotação:

<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>

Se o navegador não suportar anotações ruby, ele exibirá a pronúncia dentro de parênteses, assim:
漢 (かん).

Exemplos Práticos: Anotações Ruby para Aprendizado de Idiomas

A tag <ruby> é uma ferramenta útil para aprendizes de idiomas. Ela pode exibir a pronúncia de palavras ou caracteres desconhecidos diretamente acima ou ao lado deles. Isso facilita para os iniciantes lerem e aprenderem novo vocabulário.

Por exemplo, digamos que você queira ajudar alguém a aprender a palavra chinesa para “pessoa”:

<ruby>人 <rt>rén</rt></ruby>

Isso mostraria 人 com a pronúncia rén acima dela.

Para frases mais longas:

<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>

Isso ajuda os alunos a verem tanto os caracteres quanto a pronúncia correta.

Compatibilidade entre Navegadores e Considerações de Renderização

O <ruby> é suportado pela maioria dos navegadores modernos, mas versões mais antigas podem não renderizá-lo corretamente. É aí que o elemento <rp> se torna útil, garantindo que as anotações sejam ainda legíveis caso o navegador não suporte texto ruby.

Para acessibilidade, certifique-se de que as anotações tenham espaço suficiente ao redor para que sejam fáceis de ler. Você também pode usar CSS para ajustar a aparência das anotações:

ruby rt {
  font-size: 0.75em;
  color: gray;
}

Isso fará com que o texto ruby fique menor e em uma cor diferente para mantê-lo visualmente separado do conteúdo principal.

Usar <ruby> é uma ótima maneira de melhorar a legibilidade para aprendizes de línguas ou leitores não familiares com certos scripts. Apenas lembre-se de verificar o suporte do navegador e adicionar alternativas para uma melhor experiência do usuário em diferentes dispositivos.

O <time> Tag: Tempo e Data Semântica

A tag <time> é usada para marcar datas ou horas em um formato legível por máquina. Ela ajuda os motores de busca, navegadores e outras ferramentas a reconhecer informações relacionadas ao tempo de maneira mais clara, o que é útil para melhorar a visibilidade nos resultados de busca ou para uma melhor análise de dados.

Usando a Tag <time> para Datas e Horas Legíveis por Máquina

Quando você usa a tag <time>, isso permite que você forneça datas ou horas que são fáceis de ler tanto para pessoas quanto para computadores. Isso é especialmente útil em blogs, artigos de notícias ou páginas de eventos.

Aqui está um exemplo:

<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>

O texto “1 de outubro de 2024” é o que os usuários verão, mas o atributo datetime fornece uma versão legível por máquina da data. Os motores de busca agora podem interpretar facilmente essa data.

Você também pode usar a tag <time> para exibir horários:

<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>

Isso deixa claro tanto para os usuários quanto para as máquinas quando o evento ocorre.

Como <time> Melhora o SEO e a Análise de Dados para Detalhes de Eventos

Os motores de busca dependem de dados estruturados para entender melhor o conteúdo. A tag <time> fornece uma ideia mais clara de quando eventos, publicações ou prazos ocorrem, melhorando a relevância dos resultados de busca. Por exemplo, os motores de busca podem exibir melhor a data de publicação de um post de blog ou o horário de um evento.

Para uma página de evento, o seguinte exemplo fornece informações de horário que são amigáveis tanto para humanos quanto para máquinas:

<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>

Os motores de busca e os crawlers da web podem então extrair esses dados e usá-los para criar rich snippets nos resultados de busca, ajudando o evento a ser notado.

Exemplos de Uso em Artigos, Blogs e Páginas de Eventos

Aqui estão alguns exemplos práticos de como você pode usar a tag <time>:

1. Postagens do blog: Você pode exibir quando um artigo foi publicado ou atualizado pela última vez:

    <p>Última atualização em <time datetime="2024-09-28">28 de setembro de 2024</time>.</p>
   

2. Listagens de eventos: Os sites de eventos podem usar a tag <time> para listar quando um evento irá ocorrer:

    <p>Nosso próximo encontro será em <time datetime="2024-11-10">10 de novembro de 2024</time> às <time datetime="18:00">6:00 PM</time>.</p>
   

3. Prazos: Ao apresentar prazos importantes, use a tag <time> para maior clareza:

    <p>Envie sua inscrição antes de <time datetime="2024-10-30T23:59">30 de outubro de 2024, 23:59</time>.</p>
   

Em todos esses exemplos, o atributo datetime garante que os computadores possam ler as informações de tempo corretamente, enquanto os usuários veem uma versão mais legível.

Suporte do Navegador e Acessibilidade

A tag <time> é amplamente suportada pelos navegadores modernos. Ela também melhora a acessibilidade, pois os leitores de tela podem interpretar a data e hora com mais precisão, proporcionando uma melhor experiência para os usuários com deficiências.

A Tag <bdi>: Isolamento de Texto Bidirecional

A tag <bdi> significa “isolamento bidirecional” e é usada para evitar problemas de direção do texto em sites multilíngues. Essa tag é especialmente útil ao trabalhar com conteúdo que inclui idiomas de direção de texto tanto da esquerda para a direita (LTR) quanto da direita para a esquerda (RTL).

A Função da Tag <bdi> em Sites Multilíngues

Ao misturar idiomas com diferentes direções de texto, como inglês (LTR) e árabe (RTL), o fluxo natural do texto pode, às vezes, ficar confuso. A tag <bdi> ajuda a manter o layout do texto limpo, garantindo que cada parte do texto seja exibida corretamente, independentemente da direção do idioma.

Por exemplo, se você quiser exibir a entrada do usuário (como um nome de usuário) ao lado de outro texto, e não souber em que idioma o nome de usuário estará, você pode usar <bdi> para garantir que isso não interfira no fluxo.

Como Usar <bdi> para Prevenir Problemas de Direção do Texto

A tag <bdi> envolve a parte do texto que você deseja isolar e impede que a direção do texto seja afetada pelo conteúdo ao redor.

Aqui está um exemplo simples:

<p>User <bdi>اسم</bdi> has logged in.</p>

Se o nome de usuário estiver em árabe (que é lido RTL), a tag <bdi> garante que o resto da frase (que está em inglês e é lido LTR) não seja interrompido. Sem a tag <bdi>, a frase pode ser exibida incorretamente devido à mistura das direções do texto.

Outro exemplo com números:

<p>Invoice number: <bdi>#1234</bdi></p>

Se o número da fatura incluir texto ou números em direções diferentes, a tag <bdi> garante que a formatação permaneça correta.

Exemplos de <bdi>

A tag <bdi> é comumente usada em aplicações multilíngues, plataformas de conteúdo gerado pelo usuário e sites que lidam com múltiplas línguas ao mesmo tempo. Por exemplo, sites que permitem que os usuários insiram dados, como nomes ou endereços, podem usar <bdi> para garantir um alinhamento de texto adequado.

Aqui está um exemplo em um fórum:

<p><bdi>مستخدم</bdi> liked your post!</p>

Sem <bdi>, o texto pode ser exibido de forma estranha, mas com ele, tanto o nome de usuário em árabe quanto o texto em inglês são exibidos corretamente.

Compatibilidade com Navegadores

A tag <bdi> é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. É uma solução leve, não requer estilização especial e ajuda a manter o layout do seu conteúdo organizado ao lidar com texto multilíngue.

A Tag <dfn>: Definindo Termos

A tag <dfn> é usada para marcar a primeira instância de um termo que está sendo definido dentro de uma página da web. Ela ajuda os leitores a reconhecer rapidamente que uma palavra ou frase específica é uma definição, melhorando a clareza do seu conteúdo, especialmente na escrita técnica.

Como Usar <dfn> para Marcar Definições

A tag <dfn> é simples de usar. Você a envolve em torno da palavra ou frase que deseja definir. Normalmente, o termo aparece perto da explicação de seu significado.

Exemplo:

<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>

Aqui, a tag <dfn> destaca que “DOM” é o termo que está sendo definido.

Melhores Práticas para Fornecer Explicações em Artigos

Ao usar a tag <dfn>, certifique-se de que o termo que você está definindo seja seguido de perto pela sua explicação. Isso mantém as coisas claras e ajuda os leitores a conectar o termo com seu significado imediatamente.

Também é uma boa ideia usar <dfn> apenas na primeira vez que um termo é apresentado, pois repeti-lo várias vezes pode confundir o leitor.

Por exemplo, em um artigo técnico sobre HTML:

<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>

Neste caso, “API” é definido quando é mencionado pela primeira vez, e usos posteriores de “API” não precisam mais da tag <dfn>.

Como <dfn> Melhora a Clareza do Conteúdo Técnico

Usar a tag <dfn> na escrita técnica é uma ótima maneira de tornar o conteúdo mais fácil de seguir. Ela sinaliza claramente aos leitores quando você está introduzindo um novo termo, o que é especialmente útil ao explicar ideias complexas. Isso ajuda a melhorar a legibilidade e permite que os usuários compreendam conceitos-chave mais rapidamente.

Ao marcar definições com <dfn>, mecanismos de busca e outras ferramentas também podem interpretar melhor seu conteúdo, tornando-o mais acessível. Por exemplo, glossários técnicos ou sites educacionais podem usar <dfn> para destacar seus termos.

Exemplo de <dfn>

<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>

Nesta frase, o leitor é apresentado ao termo “URL”, seguido de uma explicação clara. Esse método de introduzir termos com a tag <dfn> ajuda a tornar o conteúdo técnico muito mais fácil de ler e entender, especialmente para aqueles que não estão familiarizados com o tópico.

A Tag <wbr>: Oportunidades de Quebra de Linha

A tag <wbr> é usada para sugerir onde uma palavra ou URL pode ser dividida para criar uma quebra de linha, se necessário. Isso é útil ao lidar com palavras longas, URLs ou qualquer texto que possa quebrar o layout de uma página da web.

O que é a Tag <wbr> e por que é essencial para Palavras ou URLs Longas

Às vezes, palavras ou URLs longas podem bagunçar o design de uma página da web, causando rolagem horizontal ou quebrando o layout. A tag <wbr> dá ao navegador uma dica sobre onde quebrar a palavra, mas apenas se necessário. Isso ajuda a manter o texto legível e previne o transbordamento.

Por exemplo, se você tiver uma URL longa, pode colocar a tag <wbr> para informar ao navegador onde ele pode quebrar o texto:

<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>

Se o navegador precisar quebrar a URL, ele o fará após o <wbr>, garantindo que o design permaneça intacto.

Melhores Práticas para Controlar Quebra de Palavras e Transbordamento de Texto

A tag <wbr> deve ser usada em locais onde o texto pode causar problemas de transbordamento, como termos técnicos longos, endereços de e-mail ou URLs. Mas não a use em excesso, pois quebras desnecessárias podem dificultar a leitura do texto.

Aqui está outro exemplo com uma palavra longa:

<p>This word is too long: anti<wbr>disestablishmentarianism.</p>

Se a palavra ficar muito longa para a linha, o navegador a dividirá após “anti-” sem afetar a legibilidade.

Em combinação com CSS, você também pode controlar a quebra de palavras e o transbordamento de texto para melhores resultados:

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

Este CSS garante que o texto será quebrado de forma organizada quando necessário, e usar <wbr> pode dar mais controle sobre onde essas quebras acontecem.

Suporte do Navegador para <wr> e Desafios Potenciais

O tag <wbr> é suportado em todos os principais navegadores, incluindo Chrome, Firefox, Safari e Edge. É leve e não precisa de nenhum estilo especial para funcionar.

Mas uma coisa a se observar é que o uso excessivo da tag pode fazer com que as quebras de texto pareçam artificiais se o conteúdo for redimensionado ou visualizado em diferentes tamanhos de tela.

Por exemplo:

<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>

Neste caso, você pode evitar que endereços de e-mail longos causem problemas de layout, mas o e-mail pode parecer quebrado em diferentes lugares dependendo da largura da tela.

Use <wbr> quando você antecipar longas sequências de texto que podem não quebrar naturalmente, mantendo seu design limpo e funcional em diferentes dispositivos.

A Tag <ins>: Texto Inserido

A tag <ins> é usada para mostrar texto que foi adicionado a um documento. Isso é frequentemente útil ao rastrear edições, atualizações ou mudanças em documentos. Ela também vem com um sublinhado padrão para destacar o novo conteúdo.

O que é a tag <ins> e como ela se compara à tag <s>?

A tag <ins> é projetada para marcar conteúdo inserido, enquanto a tag <s> é usada para texto que foi removido ou não é mais relevante. Ambas as tags são úteis quando você precisa mostrar alterações em um documento, como atualizações ou revisões.

Exemplo:

<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>

Aqui, a tag <ins> destaca o que foi adicionado, e a tag <s> mostra o que foi riscado como desatualizado.

Uso no Rastreamento de Edições de Documentos ou Versionamento

A tag <ins> é comumente usada ao gerenciar documentos que precisam de controle de versão ou onde as edições devem ser visíveis. Por exemplo, você pode usá-la em plataformas de escrita colaborativa ou documentos legais para mostrar quais partes foram adicionadas.

Exemplo de um documento com alterações:

<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>

Isso torna claro para o leitor que a seção sobre “privacidade de dados” foi recentemente adicionada.

No desenvolvimento de software ou gerenciamento de conteúdo, você pode usar a tag <ins> para mostrar texto que foi introduzido recentemente em arquivos controlados por versão, facilitando o rastreamento de edições e revisões ao longo do tempo.

Opções de Estilo para Enfatizar Alterações

A aparência padrão da tag <ins> é sublinhada, mas você pode personalizá-la usando CSS para uma melhor ênfase, especialmente se deseja que as alterações se destaquem mais.

Aqui está como você pode estilizar a tag <ins> com diferentes efeitos visuais:

ins {
  background-color: #d4edda;
  color: green;
  text-decoration: none; /* Remove o sublinhado padrão */
}

Isso dará ao texto inserido uma cor verde e um fundo verde claro, tornando-o mais notável.

Você também pode adicionar diferentes estilos, como uma fonte em negrito ou uma borda:

ins {
  font-weight: bold;
  border-bottom: 2px solid green;
}

Essas opções de estilo facilitam para os usuários identificarem o que foi adicionado ou alterado, melhorando a legibilidade e a transparência das edições do documento.

No geral, a <ins> tag é uma maneira simples, mas eficaz, de rastrear conteúdo inserido, tornando-a muito útil tanto para documentos técnicos quanto para plataformas colaborativas onde as revisões precisam ser claramente visíveis.

A <del> Tag: Texto Deletado

A <del> tag é usada para mostrar texto que foi deletado ou removido de um documento. Esta tag risca o texto por padrão, facilitando a identificação do que foi removido. É especialmente útil em situações onde é necessário rastrear alterações ou revisões.

Propósito e Uso da <del> Tag para Texto Riscado

O principal objetivo da <del> tag é mostrar visualmente que algum conteúdo foi removido. É comum em documentos, artigos ou códigos onde as mudanças precisam ser visíveis para o leitor. O texto deletado geralmente terá um risco, indicando que não é mais relevante ou válido.

Exemplo:

<p>This product costs <del>$50</del> $40 now.</p>

Neste exemplo, a mudança de preço é clara. O preço antigo ($50) é riscado, e o novo preço ($40) vem logo em seguida.

Como Pode Ser Combinado Com <ins> para Rastrear Revisões

A tag pode ser combinada com a tag para mostrar tanto o conteúdo removido quanto o recém adicionado, tornando-a perfeita para rastrear edições ou revisões. Isso é muito útil em escrita colaborativa, documentos legais ou em qualquer situação em que as mudanças devem ser registradas com clareza.

Exemplo de rastreamento de revisões:

<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>

Aqui, é fácil ver que “Segunda-feira” foi substituída por “Terça-feira” e o leitor sabe exatamente o que mudou.

Melhores práticas para exibição e estilização de conteúdo deletado

Por padrão, a tag aplica um risco sobre o texto, mas você pode estilizá-lo ainda mais com CSS para torná-lo mais notável ou adequá-lo às necessidades do seu design.

Aqui está um exemplo de personalização da aparência do texto deletado:

del {
  color: red;
  text-decoration: line-through;
}

Isso faz com que o texto deletado apareça em vermelho, chamando mais atenção para ele. Você também pode combiná-lo com formatação adicional, como desbotar o texto:

del {
  color: gray;
  opacity: 0.7;
}

Este estilo reduz a ênfase no conteúdo deletado, tornando-o menos distrativo, mas ainda visível para os leitores.

A tag fornece uma maneira simples e eficaz de rastrear e exibir mudanças, especialmente quando combinada com a tag . É essencial para manter documentos transparentes e claros para quem estiver revisando edições ou atualizações.

Conclusão

A utilização desses elementos HTML únicos amplia o que é possível na web, o que ajuda a criar conteúdo mais significativo e acessível. Tags como <q>, <s>, <mark>, <ruby>, <time>, <bdi>, <dfn>, <wbr>, <ins> e <del> trazem suas próprias vantagens para tarefas específicas. Esses elementos fazem mais do que apenas estilizar o texto; eles adicionam contexto, melhoram as experiências dos usuários e aprimoram a estrutura do documento.

Usar essas tags corretamente não apenas torna suas páginas da web mais claras, mas também aumenta a compatibilidade entre dispositivos e motores de busca. Ao aplicar esses elementos, pense em como cada um deles serve tanto à apresentação visual quanto à estrutura da informação. Eles oferecem maneiras simples, mas poderosas, de tornar os sites mais ricos e mais fáceis de entender, beneficiando uma ampla gama de usuários.

Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para entrar em contato no LinkedIn. Se você gostou deste conteúdo, considere me comprar um café para apoiar a criação de mais conteúdos voltados para desenvolvedores.