HTML entities are special codes that represent characters that would otherwise be interpreted as markup, or that are hard to type. They start with & and end with ;.
Four characters have special meaning in HTML and must be written as entities when you mean them literally:
< → < (less-than — otherwise starts a tag)
> → > (greater-than)
& → & (ampersand — otherwise starts an entity)
" → " (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 <div> element</p>
This is also the foundation of XSS protection: when you display user-generated text, escaping <, >, & prevents the browser from executing injected <script> tags. Frameworks (React, Vue) escape by default for this reason.
non-breaking space (keeps words together, no line break)
© © ® ® ™ ™
— — – – … …
× × ÷ ÷
© © by decimal code © © by hex code
<meta charset="UTF-8" />
<p>© 2024 — café résumé 日本語</p> <!-- with UTF-8 you can type these directly -->
With a UTF-8 charset you can write most symbols and accented characters literally; entities are then mainly needed for the reserved markup characters (<, >, &, ") and .
Entities let you display reserved characters as text and are central to preventing XSS when rendering untrusted content.
With UTF-8 you rarely need them for symbols, but escaping <, >, & correctly is essential whenever raw text could be mistaken for markup.