What is HTML Encoding? Complete Guide with Examples

3 min readdeveloper

HTML encoding (also called HTML escaping) converts characters that have special meaning in HTML into their corresponding character entity references. The five critical characters are: < becomes &lt;, > becomes &gt;, & becomes &amp;, " becomes &quot;, and ' becomes &#39;. This prevents browsers from interpreting these characters as HTML markup, which is essential for security (preventing XSS attacks) and for displaying code snippets on web pages.

Try It Yourself

Use our free HTML Encoder/Decoder to experiment with html encoding.

How Does HTML Encoding Work?

HTML encoding replaces reserved characters with named or numeric entity references that browsers render as the literal character rather than interpreting as markup. When a browser encounters &lt; it displays '<' instead of starting a new HTML tag. Encoding must happen when inserting dynamic content into HTML: user input, database values, API responses, or any untrusted data. Modern frameworks (React, Vue, Angular) auto-encode by default, but raw HTML insertion (dangerouslySetInnerHTML, v-html) bypasses this protection.

Key Features

  • Converts HTML-special characters to safe entity references (&lt;, &gt;, &amp;, &quot;, &#39;)
  • Named entities for common characters (&copy;, &mdash;, &nbsp;) and numeric entities for any Unicode code point
  • XSS prevention by ensuring user input is displayed as text rather than executed as HTML
  • Bidirectional encoding and decoding for converting between raw and encoded forms
  • Context-aware encoding for HTML body, attributes, JavaScript, and CSS contexts

Common Use Cases

XSS Prevention

HTML encoding user input before rendering it in web pages prevents Cross-Site Scripting (XSS) attacks. Without encoding, a user could inject <script> tags that execute malicious JavaScript in other users' browsers.

Displaying Code Snippets

When showing HTML code examples on a web page, the code must be HTML-encoded so browsers display the literal markup (<div>) rather than rendering it as actual HTML elements.

Email Template Content

Dynamic content inserted into HTML email templates must be encoded to prevent rendering issues and potential injection attacks across diverse email clients.

Frequently Asked Questions

Related Guides

Related Tools