Qual a diferença entre e ?

marca um texto que não é mais relevante ou correto, mas fica ali para dar contexto, como um preço riscado. marca um texto que foi apagado do documento, muitas vezes ao lado de um mostrando o que entrou no lugar, e pode ter os atributos datetime e cite.

Docs executáveis de HTML: Sublinhado

Q: Como sublinhar um texto no HTML?

Envolva o texto em , ou aplique text-decoration: underline no CSS. Use só pelo seu significado específico (como marcar uma palavra com erro de ortografia); para um sublinhado apenas visual, use CSS num ou no próprio elemento.

Q: Como riscar um texto no HTML?

Use para um texto que não está mais correto, como um preço antigo, e para um texto removido numa edição. As duas desenham uma linha sobre o texto. No CSS, text-decoration: line-through faz o mesmo visualmente.

Q: A tag está obsoleta?

Não. foi descontinuada no HTML 4, mas voltou no HTML5 com um novo significado: texto com uma anotação não textual, como um erro de ortografia ou um nome próprio num texto em chinês. Ela é válida, só raramente é a escolha certa.

Sublinhado e tachado em HTML: tags u, ins, s e del

Sublinhe texto no HTML com ou com text-decoration no CSS, e risque o texto com <s> ou <del>. Veja o que cada tag significa, como <ins> e <del> marcam edições e por que sublinhar um texto que não é link confunde o leitor.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como sublinhar texto no HTML

Existem dois jeitos: a tag  ou a propriedade CSS text-decoration: underline. Os dois desenham a mesma linha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

O problema de qualquer sublinhado é a terceira linha: o leitor espera que um texto sublinhado seja um link, e clica. Sublinhe texto comum só quando houver um motivo claro.

O que a tag u significa

 não é um botão genérico de "sublinhar". No HTML atual ela significa texto com uma anotação não articulada: uma marca que diz "tem algo especial aqui" sem dizer o quê. Os usos reais mais comuns:

marcar um erro de ortografia (como faz um editor de texto, muitas vezes com uma linha vermelha ondulada),
marcar nomes próprios num texto em chinês, que é uma convenção tipográfica de lá.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Para ênfase use  ou  (veja negrito), e para títulos de livros use <cite>. Se você só quer a aparência, use CSS.

Tachado: s e del

O HTML tem duas tags que desenham uma linha sobre o texto, e elas significam coisas diferentes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Tag	Significado	Uso típico
`<s>`	Não está mais correto ou relevante, fica para dar contexto	Preço antigo, tipo de ingresso esgotado
`<del>`	Removido do documento	Edições, changelogs, itens concluídos numa lista de tarefas

Marcando edições com ins e del

<ins> é o par de <del>: ele marca um texto que foi adicionado. Os navegadores o sublinham por padrão. Os dois aceitam datetime (quando a mudança aconteceu) e cite (uma URL que a explica):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Esse estilo vermelho e verde é a aparência conhecida de um diff. text-decoration: none em ins remove o sublinhado padrão para que ele não pareça um link.

Sublinhado e tachado com CSS

text-decoration cuida da parte visual em qualquer elemento: aceita uma cor e um estilo, e text-decoration-thickness define a espessura. Para linhas só decorativas, essa é a ferramenta certa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Como tirar o sublinhado dos links, o deslocamento do sublinhado e os outros detalhes de text-decoration estão na página de sublinhado no CSS.

Acessibilidade

O suporte dos leitores de tela a <s>, <del> e <ins> é inconsistente: alguns os anunciam como apagado ou inserido, muitos os leem como texto normal, então quem escuta pode ouvir "Preço 49 dólares 29 dólares" sem nenhuma pista de qual é o atual. Quando a diferença importa, diga também em palavras, por exemplo com um texto visualmente oculto mas lido em voz alta, ou simplesmente "Era $49, agora$ 29".

Erros comuns

Sublinhar um texto que não é link. O leitor vai tentar clicar. Para destacar, use negrito, cor ou fundo.
Usar  para dar ênfase. Use  ou .
Usar <strike>. Está obsoleta. Use <s>, <del> ou text-decoration: line-through.
Usar <s> para conteúdo apagado no histórico de um documento. Isso é <del>, que também pode registrar quando aconteceu.
Confiar só na linha para passar o significado. Muitos leitores de tela não a anunciam.

Perguntas frequentes

Como sublinhar um texto no HTML?

Envolva o texto em , ou aplique text-decoration: underline no CSS. Use  só pelo seu significado específico (como marcar uma palavra com erro de ortografia); para um sublinhado apenas visual, use CSS num  ou no próprio elemento.

Como riscar um texto no HTML?

Use <s> para um texto que não está mais correto, como um preço antigo, e <del> para um texto removido numa edição. As duas desenham uma linha sobre o texto. No CSS, text-decoration: line-through faz o mesmo visualmente.

A tag está obsoleta?

Não.  foi descontinuada no HTML 4, mas voltou no HTML5 com um novo significado: texto com uma anotação não textual, como um erro de ortografia ou um nome próprio num texto em chinês. Ela é válida, só raramente é a escolha certa.

O que aconteceu com a tag <strike>?

<strike> está obsoleta. Os navegadores ainda desenham a linha, mas não é HTML válido. Use <s> ou <del> conforme o significado, ou text-decoration: line-through.

Qual a diferença entre <s> e <del>?

<s> marca um texto que não é mais relevante ou correto, mas fica ali para dar contexto, como um preço riscado. <del> marca um texto que foi apagado do documento, muitas vezes ao lado de um <ins> mostrando o que entrou no lugar, e pode ter os atributos datetime e cite.

Conceitos relacionados