Codificador de entidades HTML e localizador de símbolos
Ferramenta para escapar HTML + lista pesquisável de entidades HTML | We.Inc
Escape e desfaça o escape de HTML no seu navegador e depois pesquise 100 entidades e símbolos HTML comuns. Copie a entidade nomeada, o código numérico, o valor para content do CSS ou o escape de JS com um clique.
Escapar HTML significa trocar os caracteres que o navegador lê como marcação por entidades: & vira &, < vira < e > vira >. Dentro de valores de atributos, as aspas também precisam de escape. Cole um texto abaixo para escapar ou desfazer o escape, ou pesquise a tabela de símbolos e copie qualquer entidade como nome, número ou valor CSS.
Os cinco caracteres que importam
Caractere
Entidade
Quando precisa de escape
&
Sempre no texto, quando puder iniciar uma referência
<
Sempre no conteúdo de texto
>
Boa prática em todo lugar; obrigatório em alguns contextos
"
Dentro de valores de atributos entre aspas duplas
' ou '
Dentro de valores de atributos entre aspas simples
Um conversor de mão dupla para blocos inteiros de texto, mais uma lista pesquisável dos símbolos que as pessoas realmente procuram: aspas, travessões, espaços, moedas, matemática, setas, letras gregas e emoji. Cada linha pode ser copiada de quatro formas.
Cole texto ou marcação na caixa e escolha Escapar ou Desfazer escape. O resultado se atualiza enquanto você digita.
Marque Modo atributo quando o texto for para dentro do valor de um atributo, para que as aspas também recebam escape.
Marque Codificar não ASCII se o arquivo for salvo ou enviado em uma codificação diferente de UTF-8; toda letra acentuada e todo símbolo viram uma referência numérica.
Pesquise a tabela por nome, símbolo ou grupo e clique em Nome, Número, CSS ou JS para copiar essa forma.
Faça o escape no momento em que coloca o texto no HTML, não quando o armazena. Armazenar texto já escapado leva a escape duplo, como &amp;, mais tarde.
Frameworks como o React fazem o escape do conteúdo de texto para você. Você só precisa de escape manual quando monta strings HTML na mão.
Um espaço inseparável ( ) mantém duas palavras na mesma linha, por exemplo um número e a sua unidade. Não use sequências deles para layout; use margens de CSS.
No CSS, a propriedade content recebe uma barra invertida e o código hexadecimal, então uma seta para a direita é content: "\2192". Adicione um espaço depois do código se o próximo caractere for um dígito hexadecimal.
Perguntas frequentes
Qual é a diferença entre uma entidade nomeada e uma numérica?
Ainda preciso de entidades se a minha página é UTF-8?
Só para os caracteres que têm significado na marcação: &, < e, dentro de atributos, a aspa que você usou. Com uma página UTF-8 você pode digitar símbolos como €, é ou → diretamente. Entidades para eles são opcionais e ajudam principalmente quando um editor ou sistema de e-mail estraga texto não ASCII.
' é HTML válido?
Sim, no HTML5. Ele não existia no HTML 4, e é por isso que códigos antigos usam '. Os dois funcionam em todos os navegadores atuais, e a opção de escape desta página gera ' para ter a maior compatibilidade.
Escapar HTML basta para impedir XSS?
Impede que texto injetado vire marcação no conteúdo normal de elementos e em atributos entre aspas. Não torna um valor seguro dentro de um bloco script, de um handler de evento inline, de um atributo style ou de uma URL como href, que precisam cada um da sua própria codificação ou validação. Use o escape embutido do seu framework e evite montar HTML a partir de strings sempre que puder.
O meu texto é enviado para algum lugar?
Não. O escape e o desfazer escape rodam no seu navegador, e nada do que você cola sai da página.
Por que os navegadores precisam de entidades
Um parser de HTML lê < como o início de uma tag e & como o início de uma referência de caractere. Se o nome de um produto ou um trecho de código contém esses caracteres, o navegador pode esconder parte do texto, juntá-lo com a próxima tag ou, no pior caso, executar marcação injetada. Escapá-los diz ao parser para mostrar o caractere em vez de agir sobre ele.
A regra prática: escape &, < e > no texto, e escape também a aspa dentro de valores de atributos. Todo o resto é questão de conveniência ou de codificação.
Entidades em CSS e JavaScript
Entidades HTML só funcionam no HTML. Em uma folha de estilos, um caractere é escrito como uma barra invertida seguida do seu código hexadecimal, e é por isso que a tabela traz uma coluna CSS para ícones em pseudo-elementos e marcadores personalizados. Em strings JavaScript, o equivalente é \u seguido de quatro dígitos hexadecimais, ou \u{...} para caracteres além de U+FFFF, como os emoji.
Se você define o texto com textContent em JavaScript, nunca faça o escape antes: o navegador já o trata como texto puro, e o escape faria a entidade aparecer literalmente.