Codificador / Decodificador de entidades HTML

Entidades HTML são códigos curtos que representam caracteres reservados no HTML ou difíceis de digitar. Cada um começa com um e comercial e termina com ponto e vírgula — por exemplo &amp; é um e comercial (&), &lt; é um sinal de menor que (<) e &copy; é o símbolo de copyright (©). Elas fazem um caractere ser exibido literalmente em vez de ser tratado como marcação, e garantem que um símbolo seja renderizado corretamente mesmo que a codificação de caracteres da página não o inclua. Você as encontrará constantemente ao escrever HTML manualmente ou ao sanitizar entradas de usuário em aplicações web.

Cole seu texto no painel esquerdo e mantenha o modo em Codificar. Escolha quais caracteres escapar — apenas os reservados (< > & " '), os reservados mais todo caractere não ASCII, ou todos — e se quer saída com entidades nomeadas, decimais ou hexadecimais. Por exemplo, com a opção nomeada, 'Peixe & batata <3' se torna 'Peixe &amp; batata &lt;3'. O resultado aparece instantaneamente à direita. Clique em Copiar e cole diretamente no seu HTML. Tudo acontece no seu navegador — sem upload de arquivo, sem conta necessária e sem limite de quanto texto você pode codificar de uma vez.

Mude o modo para Decodificar e cole o HTML codificado no painel esquerdo; o texto legível aparece instantaneamente à direita. A ferramenta entende entidades nomeadas, decimais e hexadecimais, então &lt;div&gt; Tom &amp; Jerry &#169; decodifica para <div> Tom & Jerry ©. Use o botão Trocar para inverter os painéis caso queira recodificar o resultado. O decodificador lida com tipos mistos de entidades na mesma string — nomeadas, decimais e hexadecimais podem aparecer juntas e cada uma decodifica corretamente. O decodificador de entidades do FreeFormatter.com exige envio de formulário e recarga de página para cada conversão; esta ferramenta atualiza em tempo real enquanto você digita.

Essas são as quatro entidades HTML mais comuns. &amp; é um e comercial (&), &lt; é um sinal de menor que (<), &gt; é um sinal de maior que (>) e &nbsp; é um espaço não quebrável — um espaço que impede o navegador de quebrar a linha ou recolhê-lo, útil entre um valor e sua unidade como 10&nbsp;kg para que nunca sejam separados em duas linhas. Você deve escapar & como &amp; antes de qualquer outro, caso contrário o próprio &amp; pode ser interpretado como início de uma nova entidade e causar problemas de dupla codificação.

São três formas de escrever o mesmo caractere. Uma entidade nomeada usa uma palavra-chave memorável (&amp;); uma entidade numérica decimal usa o ponto de código Unicode do caractere em base 10 (&#38;); uma entidade hexadecimal usa base 16 (&#x26;). As três produzem um e comercial. Entidades nomeadas ficam mais legíveis, mas apenas cerca de 2.000 caracteres têm nomes, então entidades numéricas são o fallback para todo o resto — incluindo emojis, onde a carinha sorridente 😀 é &#128512;. Na dúvida, entidades nomeadas são mais seguras para legibilidade. O padrão HTML5 expandiu significativamente a lista de entidades nomeadas além do HTML4; esta ferramenta cobre o conjunto completo do HTML5 com mais de 2.200 referências de caracteres nomeados.

Três caracteres têm significado especial no conteúdo de páginas e devem sempre ser escapados: & (&amp;), < (&lt;) e > (&gt;). Dentro de valores de atributos você também deve escapar " (&quot;) e ' (&#39;). Escape o e comercial primeiro, caso contrário o próprio &amp; pode ser interpretado como início de uma entidade e ser duplamente escapado. A opção 'Reservados' do modo Codificar lida exatamente com esses cinco caracteres e deixa o restante do texto intocado — ideal para sanitizar entradas de formulário ou saída de template sem sobre-codificar caracteres que não precisam.

As setas comuns são &larr; (←), &rarr; (→), &uarr; (↑), &darr; (↓) e &harr; (↔), com versões de linha dupla &lArr;, &rArr; e &hArr; (⇐ ⇒ ⇔). Para qualquer outro símbolo, use a lista pesquisável abaixo — digite 'arrow', 'heart' ou 'euro', depois clique no código nomeado, decimal ou hexadecimal para copiá-lo. A lista completa cobre pontuação, símbolos matemáticos, letras gregas, símbolos de moeda e centenas de caracteres especiais, atualizada para o padrão de referência de caracteres nomeados do HTML5. O W3Schools lista apenas cerca de 255 entidades; esta ferramenta tem mais de 2.200.

O truque clássico no navegador é deixar o DOM decodificar por você: crie um textarea desanexado, defina seu innerHTML para a string de entidade e leia seu value. Por exemplo: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; então el.value retorna '<b> & ©'. Não existe um decodeHTMLEntities() nativo em JavaScript puro, então essa abordagem com DOM — ou um pequeno helper que alimenta tokens de entidade correspondentes a um textarea para que marcação solta não escape — é o padrão. Esta ferramenta faz exatamente isso, por isso é seguro usá-la com marcação não confiável sem risco de XSS.

Isso é dupla codificação. O texto foi escapado uma vez (transformando & em &amp;) e depois escapado novamente (transformando o & de &amp; em &amp;amp;), geralmente porque um framework auto-escapou uma saída que já estava escapada. Isso é comum em CMSes PHP e alguns motores de template que escapam toda saída por padrão — Twig, Smarty e hooks mais antigos do WordPress fazem isso. Cole o valor em Decodificar aqui uma vez para confirmar a dupla codificação, depois certifique-se de que seu template marca o valor como seguro ou o escapa apenas uma única vez no ponto de saída.

Use &copy; para ©, &reg; para ®, &trade; para ™ e &mdash; para travessão (—). Para meia-risca use &ndash; (–) e para reticências use &hellip; (…). Você também pode colar o símbolo diretamente em uma página UTF-8, mas a entidade nomeada é inequívoca e sobrevive a uma mudança de codificação. Em uma página UTF-8 (que é virtualmente tudo hoje em dia), colar © diretamente funciona bem. Entidades nomeadas continuam sendo a escolha mais segura para e-mails HTML, onde as suposições de codificação variam entre clientes de e-mail como Outlook, Gmail e Apple Mail.

É &nbsp; (numérico &#160; ou &#xA0;). Um espaço não quebrável mantém duas palavras, ou um valor e sua unidade, na mesma linha e impede o navegador de recolher espaços repetidos — por exemplo Sr.&nbsp;Silva ou 5&nbsp;km. Não abuse dele para layout, porém; use margens ou padding do CSS para espaçamento. Um erro comum é usar múltiplas entidades &nbsp; para indentar texto ou criar colunas — isso é má prática e quebra quando a página é redimensionada ou renderizada por um leitor de tela, que lê 'espaço não quebrável' em voz alta para cada um.

Sim. Entidades nomeadas diferenciam maiúsculas de minúsculas, então &amp; funciona mas &Amp; ou &AMP; podem não funcionar, e &Sigma; (Σ) é um caractere completamente diferente de &sigma; (σ). Entidades numéricas diferenciam maiúsculas apenas no x opcional de uma entidade hex — &#xA9; e &#xa9; produzem © igualmente. Na dúvida, copie o código exato da lista de referência aqui em vez de digitá-lo de memória. Errar a capitalização em uma entidade nomeada faz o código bruto aparecer em vez do símbolo, o que é uma fonte comum de bugs em templates HTML escritos à mão.

O FreeFormatter.com e o W3Schools oferecem tabelas estáticas de referência de entidades HTML, mas você só pode consultar códigos — não dá para codificar ou decodificar seu próprio texto. O codificador de entidades do FreeFormatter é a alternativa mais próxima, mas exige envio de formulário e recarga de página para cada conversão, e sua lista de entidades cobre apenas entidades nomeadas do HTML4. O W3Schools mostra cerca de 255 entidades nomeadas. Esta ferramenta cobre o conjunto completo de referências de caracteres nomeados do HTML5 — mais de 2.200 entradas — e combina a referência pesquisável com um codificador e decodificador ao vivo em um só lugar, atualizando em tempo real enquanto você digita.

Sim, o codificador, decodificador e a lista de entidades funcionam completamente em navegadores mobile, incluindo Chrome no Android e Safari no iPhone. O layout se adapta a telas menores, com os dois painéis empilhados verticalmente. Uma dica para mobile: toque e segure uma célula na lista de entidades para acionar a opção de cópia do navegador se o clique de um toque não funcionar imediatamente. Não é preciso baixar nenhum aplicativo — a ferramenta roda como uma página web padrão em qualquer navegador mobile moderno. Não há cadastro, conta ou limite de uso em nenhum dispositivo. Funciona até offline depois que a página foi carregada.