Elementos HTML Menos Comuns e Como Utilizá-los em seu Código

O HTML possui muitas tags que muitas pessoas usam todos os dias, como <div>, <p> e <a>. Mas também existem algumas joias escondidas que muitas vezes 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 formatação de texto, melhoria da legibilidade e adição de recursos interativos.

Sumário

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

2. A Tag <s>: Texto Riscado

3. A Tag <mark>: Texto Destacado

4. A Tag <ruby>: Anotando Texto em Idioma 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 Deletado

11. Conclusão

A Tag <q>: Citações Curtas em Linha

A tag <q> é usada para adicionar citações curtas dentro de um parágrafo. Ela ajuda a fazer com que as citações pareçam diferentes e mais fáceis de identificar, sem interromper o fluxo do texto. Esta tag adiciona automaticamente 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>

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

Como se Diferencia 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 maior trecho de texto citado.

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

A tag é perfeita para os 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 postagem de blog:

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

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

Compatibilidade entre navegadores e dicas de estilo

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

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

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

A maioria dos navegadores suporta a tag , então não é preciso 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 antigas.

A tag : Texto com rasura

A tag é usada para mostrar texto que não está mais correto, relevante ou foi removido. Ela coloca uma linha no meio do texto, chamada “rasura”. Essa tag é frequentemente usada para indicar algo que foi editado ou atualizado.

Explicação e Uso

A tag é simples de usar. Coloque-a em torno do texto que deseja rasurar:

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

Isto será exibido como:
Este produto estava $50 agora apenas $30!

Casos de uso comuns: Indicar conteúdo removido ou irrelevante

A tag <s> é ótima para mostrar mudanças 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 alterações:

<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 o texto riscado aparece 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 atravessando-o, dando mais ênfase ao fato de que foi riscado.

Significado Semântico Versus Decoração Visual

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

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

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

E então aplicar em seu HTML:

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

Essa 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. Isso 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> é usada.

Propósito da Tag <mark>

A tag <mark> é ótima quando você deseja enfatizar algo importante. É frequentemente usada para mostrar resultados de pesquisa, alterações 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>

Isto será exibido como:
Este é um destaque na palavra.

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

Realçar termos-chave: Se você deseja 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 pesquisa: Ao mostrar resultados de pesquisa em uma página da web, usar a tag <mark> para realçar 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 alterações em seu conteúdo:

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

Como Estilizar Texto Realçado 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 você quiser que o texto se destaque ainda mais, pode adicionar uma borda ou mudar o estilo da fonte:

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

Isso faria com que o texto destacado parecesse mais polido e notável.

Suporte a Navegadores e Considerações de Acessibilidade

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

Usar um fundo claro com texto escuro é uma boa regra geral. 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 Línguas do Leste Asiático

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

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

Em línguas como o japonês, é comum usar um pequeno guia acima ou ao lado dos caracteres para mostrar como eles devem ser pronunciados. A tag <ruby> emparelha 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 pronúncia) para o texto principal. Ele representa “texto ruby.”

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

Isso exibirá 漢 com かん (kan) acima 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 entre parênteses, como este:
漢 (かん).

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

A tag <ruby> é uma ferramenta útil para estudantes de idiomas. Ela pode exibir a pronúncia de palavras ou caracteres desconhecidos diretamente acima ou ao lado deles. Isso torna mais fácil para os iniciantes ler e aprender 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 dele.

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 ver tanto os caracteres quanto a pronúncia correta.

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

A tag <ruby> é suportada pela maioria dos navegadores modernos, mas os mais antigos podem não renderizá-la corretamente. É aí que o elemento <rp> se torna útil, garantindo que as anotações ainda sejam 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 seja menor e de uma cor diferente para mantê-lo visualmente separado do conteúdo principal.

Usar <ruby> é uma ótima maneira de melhorar a legibilidade para aprendizes de idiomas ou leitores não familiarizados com certos scripts. Basta lembrar de verificar o suporte ao navegador e adicionar alternativas para uma melhor experiência do usuário em diferentes dispositivos.

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

A tag <time> é usada para marcar datas ou horários em um formato legível por máquina. Isso ajuda motores de busca, navegadores e outras ferramentas a reconhecerem informações relacionadas ao tempo de forma 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 Horários Legíveis por Máquina

Quando você usa a tag <time>, ela permite que você forneça datas ou horários 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 mecanismos 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 acontece.

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

Os mecanismos de busca dependem de dados estruturados para entender melhor o conteúdo. A tag <time> lhes dá uma ideia mais clara de quando eventos, publicações ou prazos ocorrem, melhorando a relevância dos resultados de busca. Por exemplo, os mecanismos de busca podem exibir melhor a data de publicação de uma postagem 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 mecanismos de busca e os crawlers da web podem então extrair esses dados e usá-los para criar trechos ricos 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 de 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: Sites de eventos podem usar a <time> tag para listar quando um evento ocorrerá:

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

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

    <p>Envie sua aplicaçã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 a Navegadores e Acessibilidade

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

A Tag <bdi>: Isolamento de Texto Bi-Direcional

A tag <bdi> significa “isolamento bi-direcional” e é usada para evitar problemas de direção do texto em sites multilíngues. Esta tag é especialmente útil ao trabalhar com conteúdo que inclui tanto idiomas 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ê deseja exibir a entrada do usuário (como um nome de usuário) ao lado de outro texto, e você não sabe em qual idioma o nome de usuário estará, você pode usar <bdi> para garantir que isso não atrapalhe o 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 lê RTL), a tag <bdi> garante que o restante da frase (que está em inglês e lê LTR) não seja interrompido. Sem a tag <bdi>, a frase pode ser exibida incorretamente devido à mistura de direções de 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 <bdi> tag garante que a formatação permaneça correta.

Exemplos de <bdi>

A <bdi> tag é comumente usada em aplicações multilíngues, plataformas de conteúdo gerado pelo usuário e websites que lidam com múltiplas línguas ao mesmo tempo. Por exemplo, websites 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 ela, tanto o nome de usuário em árabe quanto o texto em inglês são exibidos corretamente.

Compatibilidade com Navegadores

A <bdi> tag é 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 <dfn> tag é usada para marcar a primeira instância de um termo que está sendo definido dentro de uma página da web. Isso 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 <dfn> tag é simples de usar. Você a envolve em torno da palavra ou frase que deseja definir. Normalmente, o termo aparece próximo à 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 sendo definido.

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

Ao usar a tag <dfn>, certifique-se de que o termo que está definindo é seguido de perto por 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 é introduzido, 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. Isso 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 os conceitos-chave mais rapidamente.

Ao marcar definições com <dfn>, os mecanismos de busca e outras ferramentas também podem ser capazes de 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 longas ou URLs 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 de 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 indicar 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 a Quebra de Palavras e o 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 utilize em excesso, pois quebras desnecessárias podem tornar o texto mais difícil de ler.

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 irá dividi-la após “anti-” sem afetar a legibilidade.

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

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

Esse CSS garante que o texto seja quebrado de maneira adequada quando necessário, e usar <wbr> pode dar mais controle sobre onde essas quebras acontecem.

Suporte do Navegador para <wbr> e Desafios Potenciais

O tag <wbr> é suportada 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 locais 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 alterações 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 mudanças 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 em Rastrear 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 mudanças:

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

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

Em 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 Mudanças

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

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

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

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

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

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

Essas opções de estilização facilitam para os usuários identificar o que foi adicionado ou alterado, melhorando a legibilidade e transparência das edições de documentos.

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

A Tag <del>: Texto Excluído

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

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

O principal objetivo da tag <del> é mostrar visualmente que algum conteúdo foi removido. É comum em documentos, artigos ou código onde as alterações precisam ser visíveis para o leitor. O texto excluído 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) está riscado e o novo preço ($40) segue imediatamente após.

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

A tag <del> pode ser combinada com a tag <ins> 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 na escrita colaborativa, documentos legais ou qualquer situação em que as mudanças precisam ser registradas de forma clara.

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 Exibir e Estilizar Conteúdo Removido

Por padrão, a tag <del> aplica um riscado ao texto, mas você pode estilizar ainda mais com CSS para torná-lo mais perceptível ou combinar com suas necessidades de design.

Aqui está um exemplo de como personalizar a aparência do texto removido:

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

Isso faz com que o texto removido apareça em vermelho, chamando mais atenção. Você também pode combiná-lo com formatações adicionais, como desvanecer o texto:

del {
  color: gray;
  opacity: 0.7;
}

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

A tag <del> fornece uma maneira simples e eficaz de rastrear e exibir mudanças, especialmente quando combinada com a tag <ins>. É essencial para manter os documentos transparentes e claros para qualquer um que revise edições ou atualizações.

Conclusão

O uso desses elementos HTML únicos expande o que é possível na web, ajudando 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 a experiência do usuário 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 mecanismos de busca. Ao aplicar esses elementos, pense em como cada um serve tanto à apresentação visual quanto à estrutura da informação. Eles oferecem maneiras simples, mas poderosas, de tornar os sites mais ricos e fáceis de entender, beneficiando uma ampla gama de usuários.

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