O que são entidades HTML e quando você precisa delas?

Entidades HTML são códigos especiais que representam caracteres que de outra forma seriam interpretados como marcação, ou que são difíceis de digitar. Elas começam com & e terminam com ;.

Os caracteres que você DEVE escapar

Quatro caracteres têm significado especial em HTML e devem ser escritos como entidades quando você quer representá-los literalmente:

<   →  &lt;     (less-than — otherwise starts a tag)
>   →  &gt;     (greater-than)
&   →  &amp;    (ampersand — otherwise starts an entity)
"   →  &quot;   (inside attribute values)

<!-- ❌ the browser tries to parse <div> as a tag -->
<p>Use the <div> element</p>

<!-- ✅ shows the literal text "Use the <div> element" -->
<p>Use the &lt;div&gt; element</p>

Isso também é a base da proteção contra XSS: quando você exibe texto gerado pelo usuário, escapar <, >, & impede que o navegador execute tags <script> injetadas. Frameworks (React, Vue) escapam por padrão por essa razão.

Outras entidades úteis

    non-breaking space (keeps words together, no line break)
©   ©      ®   ®     ™  ™
—  —      – –     … …
×  ×      ÷ ÷
©   © by decimal code   © © by hex code

Nota moderna: UTF-8 reduz a necessidade

<meta charset="UTF-8" />
<p>© 2024 — café résumé 日本語</p> <!-- with UTF-8 you can type these directly -->

Com um conjunto de caracteres UTF-8 você pode escrever a maioria dos símbolos e caracteres acentuados literalmente; as entidades são então principalmente necessárias para os caracteres reservados de marcação (<, >, &, ") e  .

Por que isso importa

As entidades permitem que você exiba caracteres reservados como texto e são essenciais para prevenir XSS ao renderizar conteúdo não confiável.

Com UTF-8 você raramente precisa delas para símbolos, mas escapar <, >, & corretamente é essencial sempre que texto bruto pode ser confundido com marcação.