HTML Entity Encoder/Decoder

Encode and decode special HTML entities.

HTML Entities: What they are and when to use them

HTML entities are special codes used to represent reserved characters or characters not available on a standard keyboard. In HTML, characters like <, >, &, and " have special meaning (they define tags and attributes), so to display them as visible text you need to use their corresponding entities.

Beyond reserved characters, HTML entities allow you to represent mathematical symbols, currency, arrows, typographic symbols, and thousands of Unicode characters not found on standard keyboards.

Practical use cases

Displaying HTML code: To write tutorials or documentation that shows HTML tags as visible text, you need to encode the < and > characters as entities.

XSS prevention: Encoding HTML entities is the first line of defense against Cross-Site Scripting attacks. Any user input displayed on the page should be encoded.

HTML emails: Email clients have limited CSS and special character support. Using HTML entities ensures symbols display correctly across all clients.

Common HTML entities

&lt; → < &gt; → > &amp; → & &quot; → " &nbsp; → space &copy; → ©

Frequently asked questions

Which characters MUST I always encode?

The 5 characters that must always be encoded in HTML are: & (as &amp;), < (as &lt;), > (as &gt;), " (as &quot;) and ' (as &#39;). In attributes, quotes are especially critical.

Named entity or numeric code?

Named entities (&copy;) are more readable but limited. Numeric codes (&#169; decimal or &#xA9; hex) can represent any Unicode character. Prefer named entities for common ones.

Does UTF-8 eliminate the need for entities?

With UTF-8 you can directly type characters like n, e, or the euro symbol. However, the 5 reserved characters (<, >, &, ", ') MUST always be encoded as entities, regardless of the document encoding.

How do I encode entities in JavaScript?

There's no complete native function. For basic ones, use a DOM element: el.textContent = text; return el.innerHTML; For a complete solution, use libraries like he (HTML Entities) or lodash.escape().