Codificador / Descodificador de entidades HTML

As entidades HTML são códigos curtos que representam caracteres que são reservados em HTML ou difíceis de escrever. Cada um começa com um e comercial e termina com um ponto e vírgula — por exemplo &amp; é um e comercial (&), &lt; é o sinal de menor-que (<) e &copy; é o símbolo de copyright (©). Permitem que um carácter seja apresentado literalmente em vez de ser interpretado como marcação, e garantem que um símbolo é apresentado correctamente mesmo que a codificação de caracteres da página não o inclua. Encontrá-las-á constantemente ao escrever HTML manualmente ou ao sanitizar entrada de utilizador em aplicações web.

Cole o texto no painel esquerdo e mantenha o modo em Codificar. Escolha quais os caracteres a escapar — apenas os reservados (< > & " '), os reservados mais todos os caracteres não-ASCII, ou todos — e se pretende que a saída seja em nomes, decimais ou códigos hexadecimais. Por exemplo, com a opção nomeada, 'Bacalhau & batatas <3' torna-se 'Bacalhau &amp; batatas &lt;3'. O resultado aparece instantaneamente à direita. Clique em Copiar e cole directamente no seu HTML. Tudo acontece no seu browser — sem envio de ficheiro, sem conta necessária e sem limite de texto que pode codificar de uma só vez.

Mude o modo para Descodificar e cole o HTML codificado no painel esquerdo; o texto legível aparece instantaneamente à direita. Reconhece entidades nomeadas, decimais e hexadecimais, por isso &lt;div&gt; Tom &amp; Jerry &#169; descodifica para <div> Tom & Jerry ©. Use o botão Inverter para trocar os painéis se quiser re-codificar o resultado. O descodificador trata tipos de entidades mistos na mesma cadeia — nomeadas, decimais e hexadecimais podem aparecer juntas e cada uma é descodificada correctamente. O descodificador de entidades do FreeFormatter.com requer o envio de um formulário e o recarregamento da página para cada conversão; esta ferramenta actualiza em tempo real à medida que escreve.

Estas são as quatro entidades HTML mais comuns. &amp; é um e comercial (&), &lt; é o sinal de menor-que (<), &gt; é o sinal de maior-que (>), e &nbsp; é um espaço não separável — um espaço que impede o browser de quebrar a linha ou de colapsar espaços consecutivos, útil entre um valor e a sua unidade, como 10&nbsp;kg para que nunca fiquem em linhas separadas. Deve escapar & como &amp; antes de todos os outros, caso contrário o próprio &amp; pode ser interpretado como o início de uma nova entidade e causar problemas de dupla codificação.

São três formas de escrever o mesmo carácter. Uma entidade nomeada usa uma palavra-chave memorável (&amp;); uma entidade numérica decimal usa o ponto de código Unicode do carácter em base 10 (&#38;); uma entidade hexadecimal usa base 16 (&#x26;). As três produzem um e comercial. As entidades nomeadas são as mais legíveis, mas apenas cerca de 2.000 caracteres têm nomes, por isso as entidades numéricas são o recurso alternativo para todos os outros — incluindo emoji, onde a cara a sorrir 😀 é &#128512;. Na dúvida, as entidades nomeadas são as mais seguras para legibilidade. A norma 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 uma página e devem ser sempre escapados: & (&amp;), < (&lt;) e > (&gt;). Dentro de valores de atributos deve também escapar " (&quot;) e ' (&#39;). Escape o e comercial primeiro, caso contrário o próprio &amp; pode ser interpretado como o início de uma entidade e ficar duplamente escapado. A opção 'Reservados' do modo Codificar trata exactamente estes cinco caracteres e deixa o resto do texto intocado — ideal para sanitizar entradas de formulários ou saída de templates sem sobre-codificar caracteres que não necessitam disso.

As setas mais 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 — escreva '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, actualizada para a norma 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 browser é deixar o DOM descodificar por si: crie uma textarea não anexada ao documento, defina o seu innerHTML com a cadeia de entidades e leia o seu value. Por exemplo: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; depois el.value devolve '<b> & ©'. Não existe nenhuma função decodeHTMLEntities() nativa em JavaScript simples, por isso esta abordagem com o DOM — ou um pequeno auxiliar que alimenta tokens de entidades encontrados a uma textarea para que marcação errante não possa escapar — é o padrão habitual. Esta ferramenta faz exactamente isso, razão pela qual é segura de usar 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;), normalmente porque um framework escapou automaticamente uma saída que já estava escapada. Isto é comum em CMS em PHP e alguns motores de template que escapam toda a saída por defeito — Twig, Smarty e hooks mais antigos do WordPress fazem todos isso. Cole o valor em Descodificar aqui uma vez para confirmar a dupla codificação, depois certifique-se de que o seu template marca o valor como seguro ou o escapa apenas uma única vez no momento da saída.

Use &copy; para ©, &reg; para ®, &trade; para ™ e &mdash; para um travessão (—). Para um meia-risca use &ndash; (–) e para reticências use &hellip; (…). Também pode colar o símbolo directamente numa página UTF-8, mas a entidade nomeada é inequívoca e sobrevive a uma alteração de codificação. Numa página UTF-8 (o que é praticamente tudo hoje em dia), colar © directamente funciona bem. As entidades nomeadas continuam a ser a opção mais segura para e-mail em HTML onde as suposições de codificação variam entre clientes de e-mail como o Outlook, o Gmail e o Apple Mail.

É &nbsp; (numérico &#160; ou &#xA0;). Um espaço não separável mantém duas palavras, ou um valor e a sua unidade, na mesma linha e impede o browser de colapsar espaços repetidos — por exemplo Sr.&nbsp;Silva ou 5&nbsp;km. Não use em excesso para fins de layout; use margens ou preenchimento CSS para espaçamento. Um erro comum é usar múltiplas entidades &nbsp; para indentar texto ou criar colunas — esta é uma má prática e quebra quando a página é redimensionada ou apresentada num leitor de ecrã, que lê 'espaço não separável' em voz alta para cada um deles.

Sim. As entidades nomeadas são sensíveis a maiúsculas e minúsculas, por isso &amp; funciona mas &Amp; ou &AMP; pode não funcionar, e &Sigma; (Σ) é um carácter completamente diferente de &sigma; (σ). As entidades numéricas são insensíveis a maiúsculas e minúsculas apenas no x opcional de uma entidade hexadecimal — &#xA9; e &#xa9; ambas dão ©. Na dúvida, copie o código exacto da lista de referência aqui em vez de o escrever de memória. Escrever incorrectamente as maiúsculas de uma entidade nomeada faz com que o código em bruto seja apresentado em vez do símbolo, o que é uma fonte comum de erros em templates HTML escritos manualmente.

O FreeFormatter.com e o W3Schools fornecem ambos tabelas de referência de entidades HTML estáticas, mas só é possível pesquisar códigos — não se pode codificar ou descodificar o próprio texto. O codificador de entidades do FreeFormatter é a alternativa mais próxima, mas requer o envio de um formulário e o recarregamento da página para cada conversão, e a sua lista de entidades cobre apenas as entidades nomeadas do HTML 4. O W3Schools apresenta 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 descodificador em tempo real, tudo num único lugar, actualizando instantaneamente à medida que escreve.

Sim, o codificador, o descodificador e a lista de entidades funcionam totalmente em browsers móveis, incluindo o Chrome no Android e o Safari no iPhone. O layout adapta-se a ecrãs mais pequenos, pelo que os dois painéis ficam empilhados verticalmente. Uma dica para telemóvel: mantenha premida uma célula na lista de entidades para acionar a opção de cópia do browser, caso a cópia com um toque não funcione imediatamente. Não é necessário descarregar qualquer aplicação — a ferramenta funciona como uma página web normal em qualquer browser móvel moderno. Não há registo, nem conta, nem limites de utilização em nenhum dispositivo. Funciona mesmo offline depois de a página ter carregado.