Guia completa de entidades HTML

As entidades HTML são um dois aspectos mais fundamentais mas frecuentemente mal entendidos do desenvolvimento web. São o mecanismo que permite a os navegadores mostrar caracteres que de outro modo serían interpretados como marcado HTML, e juegan um papel crucial na segurança web. Ya seja que estés codificando caracteres especiais para prevenir ataques de cross-site scripting, mostrando símbolos matemáticos o asegurando que o conteúdo se renderice correctamente em diferentes codificações, compreender as entidades HTML é esencial.

Que são as entidades HTML?

Uma entidade HTML é uma secuencia de caracteres que representa um solo carácter em HTML. As entidades começam com um ampersand (&) e terminam com um ponto e coma (;). Quando um navegador encontra uma entidade, a reemplaza com o carácter correspondiente durante o renderizado. Este mecanismo te permite incluir caracteres em HTML que de outro modo serían impossíveis o problemáticos.

<) inicia uma tag, o signo mayor que (>) a cierra, e o ampersand (&) inicia uma referencia de entidade. Se desejas mostrar estes caracteres como conteúdo visível em vez de marcado, deves codificarlos como entidades.

Entidades HTML comuns

Embora HTML define mais de 2,000 entidades nombradas, solo um punhado se utiliza com frequência no desenvolvimento web diario. Estas são as entidades que encontrarás e usarás com mais frecuencia:

Cinco entidades essenciais

Entidades de símbolos comuns

Entidades numéricas vs entidades com nombre

As entidades HTML vêm em dois formas: nombradas e numéricas. Compreender a diferença te ajuda a escolher a entidade correta para cada situação.

Entidades com nombre

As entidades nombradas utilizan palavras legíveis por humanos para identificar caracteres. Por exemplo, < representa o signo menor que, e © representa o símbolo de copyright. As entidades nombradas são mais legíveis e memoraveis, fazendo tua código fuente HTML mais mantenivel. No entanto, as entidades nombradas solo existem para um conjunto limitado de caracteres — aproximadamente 2,000 — enquanto que Unicode tem mais de 140,000 caracteres.

Entidades numéricas

As entidades numéricas fazem referencia a caracteres por seu ponto de código Unicode. Vêm em dois formas: decimal e hexadecimal. As entidades numéricas decimales utilizan o formato &#NNN;, onde NNN é o ponto de código decimal. As entidades hexadecimais utilizan o formato &#xHHH;, onde HHH é o ponto de código hexadecimal. Por exemplo, o símbolo de copyright pode escribirse como © (decimal) o © (hexadecimal).

As entidades numéricas podem representar qualquer carácter Unicode, haciéndolas essenciais para caracteres que no têm referencia de entidade nombrada. Se necessitas mostrar caracteres CJK raros, glifos de escrituras históricas o emojis que carecem de entidades nombradas, deves usar a forma numérica.

Quando usar cada uma

• Usa entidades nombradas para os cinco caracteres requeridos (&, <, >, ", ') e símbolos comuns como ©, ®, ™. São mais legíveis e autodocumentadas.
• Usa entidades numéricas quando necesites um carácter que no tem entidade nombrada, o quando estés generando HTML programáticamente e necesites um método de codificação consistente e universal.
• Usa entidades numéricas hexadecimais quando trabajes com pontos de código Unicode, já que hexadecimal é a notação estándar na documentação e tablas de caracteres de Unicode.

Quando usar entidades HTML

Saber quando usar entidades é tão importante como saber como usarlas. Aquí estão os principais escenarios onde as entidades são necessárias o beneficiosas:

1. Mostrar caracteres reservados

< desnudo, o navegador intentará analizarlo como o inicio de uma tag HTML, lo que poderia romper o design de tua página o criar vulnerabilidades de segurança.

2. Prevenir ambigüedade de ampersands

Um ampersand seguido de letras e um ponto e coma siempre se interpreta como uma referencia de entidade. Se tua conteúdo inclui um ampersand que no é parte de uma entidade (por exemplo, em "Tom & Jerry"), deves codificarlo como &. Um ampersand no codificado seguido de texto que coincida com um nombre de entidade será decodificado incorretamente. Por exemplo, "AT&T" no codificado poderia convertirse em "AT&T" se "T" coincidiera com uma entidade.

3. Incluir caracteres que no estão no teclado

Caracteres como guiones largos, símbolos de copyright e operadores matemáticos podem ser difíciles de escrever em um teclado estándar. As entidades proporcionam uma forma confiável de incluir estes caracteres sem depender do método de entrada o mapa de caracteres de tua editor. Por exemplo, — suele ser mais fácil de escrever que buscar o carácter do guión largo no teclado.

4. Espaço de no separação

A entidade   crea um espaço no separavel que evita que o navegador rompa a linha em essa posição. Isto é crucial para manter palavras relacionadas em a mesma linha, como "10 kg", "Capítulo 3" o nombres de marca que no deveriam dividirse entre linhas. Também se usa comumente para criar espaçamento visual em designs onde CSS no é apropriado.

Implicaciones de segurança: Protecção XSS

A codificação de entidades HTML é uma das linhas de defensa mais importantes contra os ataques de cross-site scripting (XSS). O XSS ocurre quando um atacante pode inyectar código ejecutavel em uma página web vista por outros usuarios. A codificação de entidades previne isto convertendo caracteres peligrosos em suas equivalentes de entidade seguros.

Como a codificação de entidades previne XSS

Considera uma página de búsqueda que muestra a consulta do usuário no título de resultados. Se um usuario busca <script>alert("xss")</script> e a página lo renderiza sem codificar, o navegador ejecutará esse script. No entanto, se a salida está codificada como entidade, se converte em &lt;script&gt;alert("xss")&lt;/script&gt;, e o navegador lo muestra como texto literal em vez de executar código.

Regras de codificação específicas do contexto

A codificação de entidades funciona em contextos de conteúdo e atributos HTML, mas diferentes contextos requerem diferentes estrategias de codificação:

• Contexto de conteúdo HTML: Codifica <, >, & como entidades. Isto previne a inyecção de novas tags HTML.
• Contexto de atributo HTML: Codifica <, >, &, ", ' como entidades. As comillas devem codificarse para prevenir a rutura dois valores de atributo.
• Contexto de JavaScript: As entidades HTML no funcionam dentro de tags <script>. Usa escape de cadenas de JavaScript (escape com barra invertida) em seu lugar, o usa JSON.stringify() para a inyecção de datos.
• Contexto de CSS: As entidades HTML no funcionam dentro de tags <style>. Usa escape CSS (barra invertida seguida de código hexadecimal) para valores dinámicos.
• Contexto de URL: Usa codificação de URL (encodeURIComponent) para parámetros de consulta, no entidades HTML.

Codificação de entidades em diferentes contextos

Em atributos HTML

Os valores de atributo requerem uma codificação mais estricta que o conteúdo HTML porque os atributos usam comillas como delimitadores. Os valores de atributo com comillas doveis devem codificar os caracteres de comillas doveis, e os valores com comillas simples devem codificar as comillas simples. Os ampersands e os corchetes angulares também devem codificarse.

<!-- Correct: entity-encoded attribute value -->
<a title="5 &gt; 3 is true">Example</a>

<!-- Incorrect: unencoded special characters -->
<a title="5 > 3 is true">Example</a>

No exemplo incorrecto, o > dentro de um valor de atributo pode causar problemas de análisis em ciertos contextos, inclusive se a maioria dois navegadores lo manejan com gracia. O HTML válido requer codificar estes caracteres nos atributos.

Em JavaScript

As entidades HTML no se procesan dentro das tags <script>. Se necessitas incluir caracteres especiais em código JavaScript incrustado em HTML, deves usar as secuencias de escape próprias de JavaScript:

<!-- Wrong: entities don't work in script tags -->
<script>
  var msg = "5 &gt; 3"; // This is literal "&gt;", not ">"
</script>

<!-- Correct: use JavaScript escapes -->
<script>
  var msg = "5 \u003E 3"; // Unicode escape
  var msg2 = "5 > 3";     // Or just use the character directly
</script>

Ao inyectar datos desde o servidor em JavaScript online, o abordagem mais seguro é usar JSON.stringify() no lado do servidor e colocar o resultado dentro do script. Isto maneja automaticamente todo o escape necessário, incluyendo comillas, barras invertidas e caracteres de control.

Em CSS

De maneira similar, as entidades HTML no se procesan dentro das tags <style>. CSS tem seu próprio mecanismo de escape usando uma barra invertida seguida do ponto de código Unicode hexadecimal do carácter:

<!-- Wrong: entities don't work in style tags -->
<style>
  .quote::before { content: "&ldquo;"; }
</style>

<!-- Correct: use CSS Unicode escapes -->
<style>
  .quote::before { content: "\201C"; }
</style>

As secuencias de escape CSS usam uma barra invertida seguida de um a seis dígitos hexadecimais. Se se usam menos de seis dígitos e o seguinte carácter poderia interpretarse como um dígito hexadecimal, adiciona um espaço depois de a secuencia de escape.

Compatibilidade de navegadores

O soporte de entidades HTML é excelente em todos os navegadores modernos. As cinco entidades requeridas (&, <, >, ", ') han sido soportadas desde os primeros navegadores. As entidades nombradas para símbolos comuns como ©, ® e ™ também têm soporte universal.

Os principais problemas de compatibilidade involucran entidades nombradas menos comuns introducidas em HTML5 e especificações posteriores. Alguns navegadores mais antiguos podem no reconhecer entidades como + o ∉. Para máxima compatibilidade, usa entidades numéricas para caracteres pouco comuns, já que o soporte de entidades numéricas depende solo do soporte de Unicode, que é universal nos navegadores modernos.

Uma nota especial: a entidade ' no era parte de HTML 4 e solo se definió em XHTML. Embora todos os navegadores modernos a soportan, se necessitas compatibilidade com navegadores muito antiguos, usa ' para a codificação de comillas simples.

Dicas práticos para usar entidades

• Codifica siempre o ampersand primero: Ao construir um codificador de entidades, codifica o ampersand antes que outros caracteres. Se codificas os corchetes angulares primero, o &lt; resultante contém um ampersand que logo seria doblemente codificado.
• Usa uma estrategia de codificação consistente: Decide se tua projeto usará entidades nombradas quando estén disponiveis o exclusivamente entidades numéricas, e mantén essa escolha. Os estilos misturados fazem que o código fuente seja mais difícil de ler.
• Deixa que o motor de plantillas maneje a codificação: Os motores de plantillas modernos como React JSX, plantillas de Vue e Twig codifican automaticamente a salida por defecto. Confia em estes mecanismos em vez de codificar manualmente todo.
• No codifiques doblemente: Se o conteúdo ya está codificado como entidade, codificarlo nuevamente producirá referencias de entidade visíveis na salida (por exemplo, &amp;lt; se muestra como &lt; em vez de <). Este é um error comum ao aplicar múltiples capas de codificação.
• Experimenta com caracteres especiais: Siempre experimenta tua lógica de codificação com cadenas que contengan comillas, corchetes angulares, ampersands e caracteres no ASCII para verificar o comportamento correto.