🛡️ Entidades HTML

O que é uma entidade HTML

Uma entidade HTML é uma sequência de caracteres que representa outro caractere dentro de um documento HTML. Toda entidade começa com um e comercial (&) e termina com ponto e vírgula (;), e existem duas formas de escrevê-la. A forma nomeada usa um nome mnemônico, como < para o sinal de menor que. A forma numérica usa o ponto de código Unicode do caractere, em decimal, como <, ou em hexadecimal, precedido por um "x", como <. As três formas, <, < e <, produzem exatamente o mesmo resultado visual: o caractere <.

Entidades existem porque alguns caracteres têm significado especial dentro da própria sintaxe do HTML e, por isso, não podem aparecer "crus" no corpo de um documento sem confundir o interpretador do navegador. Também servem para representar caracteres invisíveis, como o espaço não separável, ou caracteres tipográficos que não têm tecla dedicada no teclado, como o símbolo de copyright ou o travessão longo usado em pontuação editorial.

Quais caracteres precisam ser escapados e por quê

O parser HTML atribui significado estrutural a um punhado específico de caracteres. Assim que encontra um < no meio do texto, interpreta isso como o início de uma tag, não como o símbolo matemático de "menor que". Assim que encontra um &, passa a procurar um ponto e vírgula logo à frente, esperando que aquilo seja o começo de uma referência de entidade. Por isso, cinco caracteres exigem atenção redobrada sempre que aparecem como texto literal dentro de um documento:

• < (menor que): inicia uma tag.
• > (maior que): fecha uma tag.
• & (e comercial): inicia uma referência de entidade.
• " (aspas duplas): fecha o valor de um atributo delimitado por aspas duplas.
• ' (apóstrofo): fecha o valor de um atributo delimitado por aspas simples.

Para ver o problema na prática, imagine escrever um tutorial que ensina a usar a tag <div> e colar o texto <div> diretamente, sem escapar, dentro de um parágrafo do seu HTML. O navegador não exibe o texto na tela como as duas palavras "menor, div, maior": ele abre uma divisão de verdade, invisível, que pode quebrar o layout do restante da página ou simplesmente não aparecer em lugar nenhum, porque uma tag vazia não renderiza conteúdo por si só. A única forma de exibir literalmente aquele texto é escapando os dois sinais de comparação, escrevendo <div> no código-fonte.

Entidades nomeadas versus numéricas

A forma nomeada, como © ou &, tem a vantagem de ser legível diretamente no código-fonte: qualquer pessoa lendo o HTML bruto reconhece de imediato que © vai virar um símbolo de copyright, sem precisar consultar tabela nenhuma. A limitação é que existe apenas um conjunto relativamente pequeno de nomes definidos pela especificação HTML, algumas centenas, cobrindo os caracteres mais comuns, mas longe de cobrir todo o Unicode.

A forma numérica, como ™ ou sua equivalente hexadecimal ™, ambas para o símbolo de marca registrada, funciona para qualquer ponto de código Unicode existente, o que a torna o método universal de fallback. Se você precisa representar um caractere obscuro que não tem nome de entidade definido, um símbolo raro ou um caractere de um alfabeto específico, a referência numérica sempre funciona, enquanto a referência nomeada pode simplesmente não existir para aquele caractere.

Na prática, prefira nomes quando eles existirem e o caractere for comum, o que deixa o código-fonte mais legível para quem for lê-lo depois, e recorra à forma numérica para qualquer coisa fora do conjunto nomeado padrão, ou quando estiver gerando HTML de forma programática e for mais simples calcular o ponto de código do que manter uma tabela de nomes.

As cinco entidades predefinidas do XML

Embora o HTML defina centenas de entidades nomeadas, o XML, e por extensão o XHTML, que segue regras de XML, reconhece apenas cinco, sem exceção:

A diferença prática entre os dois padrões está na rigidez. Um documento XML ou XHTML bem formado exige as cinco entidades sempre que o caractere correspondente aparece fora do seu papel estrutural, sem exceções, porque um parser XML rejeita o documento inteiro diante de um & solto. O HTML5, por outro lado, é mais tolerante: um apóstrofo dentro do texto do corpo do documento, fora de um atributo, geralmente não precisa ser escapado para o navegador exibir a página corretamente, porque o parser HTML5 não trata o apóstrofo como caractere estrutural fora desse contexto específico. Ainda assim, escapar todos os cinco por hábito continua sendo a prática mais segura, porque evita ambiguidade e mantém o código-fonte consistente entre contextos diferentes.

Espaços não separáveis e caracteres tipográficos

Além dos cinco caracteres estruturais, existe um segundo grupo de entidades que aparece por conveniência tipográfica: representam caracteres sem tecla própria no teclado, ou que precisam de um comportamento especial de renderização. Alguns dos mais usados:

•  : espaço não separável. Impede que o navegador quebre a linha exatamente naquele ponto, útil para manter expressões como "10 MB" ou "Sr. Silva" sempre na mesma linha.
• ©: símbolo de copyright, ©.
• ™: símbolo de marca registrada, ™.
• …: reticências tipográficas, …, um único caractere em vez de três pontos finais digitados manualmente.
• —: o travessão longo usado em pontuação editorial para marcar uma pausa ou um aposto.
• –: o traço médio, comumente usado para indicar intervalos, como em "páginas 10 a 20".

Vale notar que estas entidades tipográficas não são obrigatórias, no sentido de que o navegador não deixa de renderizar a página se você digitar o caractere Unicode diretamente no arquivo-fonte, já que a maioria dos editores modernos salva em UTF-8 sem qualquer problema. Elas continuam úteis, porém, quando o arquivo precisa se manter em ASCII puro por alguma restrição de sistema legado, ou quando você quer deixar explícito, no próprio código-fonte, exatamente qual caractere está sendo usado, sem depender da codificação com que o arquivo foi salvo.

Escapando atributos versus texto do corpo

As regras de escape mudam dependendo de onde o texto é inserido no documento. Dentro do corpo de um elemento, como o conteúdo de um parágrafo, os dois caracteres que exigem atenção são < e &, porque são eles que o parser interpreta como início de tag ou início de entidade. Já dentro do valor de um atributo delimitado por aspas duplas, como title="..." ou alt="...", o caractere crítico passa a ser a própria aspa dupla, porque é ela que sinaliza ao parser onde o valor do atributo termina.

Veja a diferença com um exemplo concreto. Suponha que o texto alternativo de uma imagem precise conter uma citação com aspas: o título da imagem é Diga "Olá" ao mundo. Inserido cru dentro de um atributo alt, isso quebra o HTML:

<img src="foto.png" alt="Diga "Olá" ao mundo">

O parser lê o valor do atributo alt como terminando logo depois de "Diga ", porque encontrou ali a segunda aspa dupla, e o restante do texto vira conteúdo solto dentro da tag, quebrando a interpretação do elemento inteiro. A forma correta escapa a aspa interna:

<img src="foto.png" alt="Diga &quot;Olá&quot; ao mundo">

Esse mesmo texto, se estivesse no corpo de um parágrafo em vez de dentro de um atributo, não precisaria escapar as aspas duplas, já que elas não têm significado estrutural fora de um atributo, mas ainda precisaria escapar qualquer < ou & literal que aparecesse ali.

A dimensão de segurança: prevenção de XSS

Escapar texto fornecido por um usuário antes de inseri-lo em uma página é a defesa mais básica contra ataques de Cross-Site Scripting, conhecidos como XSS. Pense no cenário clássico: um campo de comentários em um blog aceita texto livre e o exibe depois na página, sem tratamento algum. Se um visitante malicioso envia como comentário um trecho contendo uma tag <script> que redireciona o visitante ou lê os cookies da sessão, e o servidor simplesmente insere esse texto cru no HTML da página, todo visitante que carregar aquela página de comentários executa o script automaticamente. Isso pode expor dados de sessão, redirecionar o usuário para outro endereço ou alterar o conteúdo visível da página sem autorização de ninguém.

Se o mesmo comentário passar por um processo de escape antes de ser inserido no HTML, convertendo < em < e > em >, o navegador exibe o texto exatamente como uma string visível de código, incluindo a tag por extenso, em vez de interpretá-la como uma instrução executável. O comentário continua visível na página, mas deixa de representar qualquer perigo.

Vale reforçar que escapar entidades HTML é apenas uma camada de defesa entre várias possíveis. Validação de entrada, políticas de segurança de conteúdo e sanitização específica de contexto continuam relevantes em cenários mais complexos. Ainda assim, é a camada mais fundamental: qualquer texto de origem não confiável que vai ser renderizado como HTML precisa, no mínimo, ter seus caracteres estruturais escapados primeiro, antes de qualquer outra medida entrar em cena.

Perguntas Frequentes

Ferramentas de Desenvolvimento Relacionadas

🔒 100% Privado e Seguro

Toda a codificação e decodificação de HTML acontece <strong>inteiramente no seu navegador</strong>. Nenhum texto ou código é enviado a servidor algum. Seus trechos permanecem no seu dispositivo o tempo todo.