Tag HTML <ins>
A tag <ins> define uma parte do texto inserida no documento. Descrição, atributos e exemplos da tag.
A tag HTML <ins> marca um trecho de texto que foi inserido em um documento. É um elemento semântico editorial: não serve apenas para sublinhar texto, mas registra que uma adição foi feita. Os navegadores renderizam o conteúdo sublinhado por padrão, mas isso pode ser alterado com a propriedade CSS text-decoration.
<ins> é quase sempre usado em conjunto com sua contraparte, a tag <del>, que marca o texto que foi removido. Juntas, elas descrevem uma edição — o que foi retirado e o que foi adicionado em seu lugar. Essa é exatamente a informação que você deseja preservar em:
- Changelogs e notas de versão — mostrando o que foi adicionado em uma nova versão.
- Documentos legais e contratuais — registrando alterações sem perder a redação original.
- Controle de alterações / diffs de documento — a visão de "redline" que os editores conhecem dos processadores de texto.
Como <ins> é puramente para marcar uma edição, use um elemento diferente quando quiser apenas um efeito visual: use <u> para estilização de anotações não textuais, <em> ou <strong> para ênfase, e <mark> para destacar texto relevante.
Sintaxe
A tag <ins> vem em pares. O conteúdo é escrito entre as tags de abertura (<ins>) e fechamento (</ins>).
<ins>This text was added.</ins>Exemplo da tag HTML <ins>:
Tag HTML <ins>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del datetime="2023-01-01">violets</del> <ins datetime="2023-10-01">snowdrops</ins>.</p>
</body>
</html>Resultado
Usando <ins> com <del> para exibir um diff de documento
O uso mais comum de <ins> é exibir um "redline" de uma edição: o texto antigo riscado e o novo texto sublinhado, lado a lado. O conteúdo de <del> é a redação removida; o conteúdo de <ins> é o substituto.
<!DOCTYPE html>
<html>
<head>
<title>Document diff</title>
</head>
<body>
<p>
The meeting is scheduled for
<del>Monday</del>
<ins>Wednesday</ins>
at
<del>9:00 AM</del>
<ins>10:30 AM</ins>.
</p>
</body>
</html>Por padrão, as partes <del> aparecem com uma linha atravessando-as e as partes <ins> aparecem sublinhadas, para que o leitor possa ver de relance o que foi alterado.
Os atributos cite e datetime
Tanto <ins> quanto <del> aceitam dois atributos que registram por quê e quando uma edição ocorreu. Eles não têm efeito visível por si só — são metadados legíveis por máquina que ferramentas de edição e tecnologias assistivas podem expor.
cite— uma URL apontando para um documento (um problema, um ticket, uma nota de reunião) que explica o motivo da inserção.datetime— a data e, opcionalmente, a hora em que o texto foi inserido.
O valor de datetime segue o mesmo formato de <time>: YYYY-MM-DDThh:mm. A parte da data (YYYY-MM-DD) é obrigatória; a parte da hora é opcional. Se incluir uma hora, separe-a da data com a letra literal T, e você pode adicionar segundos e um deslocamento de fuso horário (por exemplo, 2023-10-01T14:30:00Z).
<p>
Price:
<del datetime="2023-09-30" cite="/changelog#price-update">$49</del>
<ins datetime="2023-10-01T09:00" cite="/changelog#price-update">$59</ins>
</p>| Valor | Significado |
|---|---|
2023-10-01 | Apenas data — 1 de outubro de 2023 |
2023-10-01T09:00 | Data e hora local — 09:00 |
2023-10-01T09:00:00Z | Data, hora e fuso horário UTC |
Envolvendo conteúdo em nível de bloco
<ins> é um conteúdo transparente: pode envolver texto inline ou blocos inteiros (conteúdo de fluxo), como parágrafos e itens de lista, desde que o contexto ao redor permita esses blocos. Isso torna possível marcar um parágrafo inteiro ou vários itens de lista como recém-inseridos.
<!DOCTYPE html>
<html>
<head>
<title>Inserted block</title>
</head>
<body>
<h2>Release 2.0 — what's new</h2>
<ins datetime="2023-10-01">
<p>Added dark mode and keyboard shortcuts.</p>
<ul>
<li>Press <kbd>?</kbd> to view all shortcuts.</li>
<li>Toggle the theme from the settings menu.</li>
</ul>
</ins>
</body>
</html>Estilização e acessibilidade
A maioria dos leitores de tela não anuncia <ins> e <del> por padrão, portanto, um usuário que depende de áudio pode não perceber que uma edição ocorreu. Adicionar um aria-label a <ins> não é uma solução confiável — aria-label não é padrão nesse elemento e o suporte é inconsistente.
A abordagem recomendada é expor a edição por meio de conteúdo gerado por CSS, usando os pseudo-elementos ::before e ::after. O rótulo inserido passa a fazer parte do texto renderizado, que os leitores de tela podem ler, e você mantém o estilo visual em um único lugar.
<!DOCTYPE html>
<html>
<head>
<title>Accessible ins styling</title>
<style>
ins {
background-color: #d4f7d4;
text-decoration: none;
border-bottom: 2px solid green;
}
ins::before {
content: " [inserted: ";
}
ins::after {
content: "] ";
}
</style>
</head>
<body>
<p>The deadline is <ins datetime="2023-10-01">next Friday</ins>.</p>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| cite | URL | Indica a URL de um documento que explica o motivo da inserção. |
| datetime | YYYY-MM-DDThh:mm | Define a data (e hora opcional) da inserção. |
A tag <ins> também suporta os Atributos Globais e os Atributos de Evento.
Tags relacionadas
<del>— marca o texto que foi removido (contraparte de<ins>).<s>— representa conteúdo que não é mais preciso ou relevante (não é uma edição).<mark>— destaca texto para referência ou relevância.<u>— estilização de sublinhado não textual, sem significado editorial.