How to Escape HTML Characters (And Why It Matters)

When you display user-generated content on a web page, you need to escape any HTML characters it contains. Failing to do this is one of the most common causes of cross-site scripting (XSS) vulnerabilities, and it's entirely preventable.

Here's what HTML escaping is, which characters to escape, and how to do it correctly.

What Is HTML Escaping?

HTML uses certain characters as part of its markup syntax: < opens tags, > closes them, & starts entities, and " wraps attribute values. When these characters appear in user-supplied text, a browser can mistake them for HTML syntax instead of literal content.

For example, if a user enters the name Alice <script>alert("hacked")</script> and your application displays it unescaped, the browser will execute the JavaScript inside the script tag.

Escaping replaces these special characters with their "entity" equivalents: sequences the browser renders as the literal character instead of interpreting as markup:

After escaping, <script> becomes <script>, which the browser displays as the literal text <script> instead of executing it.

When Do You Need to Escape HTML?

Any time you insert untrusted content into an HTML document. This includes:

• User-submitted text: form fields, comments, usernames, profile bios
• URL parameters: query string values that appear on the page
• Database values: content stored in a database that originated from user input
• API responses: data from third-party APIs that may contain special characters
• Code examples in documentation: showing HTML snippets as literal text

The key question to ask is: did this string come from somewhere I don't fully control? If yes, escape it.

What HTML Escaping Does NOT Protect Against

This is important to understand: HTML escaping prevents injection in HTML content contexts. It does not protect you in all situations:

• Inside <script> tags: JavaScript contexts have their own escaping rules
• In URL attributes like href: malicious javascript: URLs need URL validation, not just HTML escaping
• In CSS style attributes: CSS injection requires different handling

HTML escaping is one layer of defense. A complete XSS prevention strategy also includes a Content Security Policy (CSP), output encoding for each context (HTML, URL, JavaScript), and input validation at the server level.

Methods to Escape HTML

Method 1: Online Escape Tool

For one-off escaping (converting a snippet of text to display safely in documentation or a blog post), the HTML Escape / Unescape tool is the fastest option. Paste your text, get the escaped version instantly.

This is especially useful when you want to show HTML code examples on a web page. Rather than manually escaping every <, >, and & yourself, let the tool handle it.

Method 2: In JavaScript

Modern JavaScript frameworks like React and Vue escape HTML by default. In React, anything you render inside {} is automatically escaped:

// This is safe: React escapes the value automatically
<p>{userSuppliedContent}</p>

But dangerouslySetInnerHTML bypasses escaping, so only use it with content you've already sanitized:

// Only use this if the content has been sanitized
<div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />

For plain JavaScript, you can write a simple escape function:

function escapeHtml(str) {
  return str
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

Method 3: Server-Side Frameworks

Most server-side templating frameworks handle escaping automatically or provide utility functions:

• Jinja2 (Python): Auto-escapes HTML in templates by default
• ERB (Ruby): Use h() or html_escape() for explicit escaping
• PHP: Use htmlspecialchars() or htmlentities()
• Go html/template: Context-aware HTML escaping built in

Always check your framework's documentation, as some require you to explicitly opt in to escaping, while others escape by default.

Step-by-Step: Using the Online Tool

1. Copy the text you want to escape. This might be user content you want to display safely, or HTML code you want to show as a literal example.

2. Paste it into the tool. Open the HTML Escape / Unescape tool and paste your content.

3. Copy the escaped output. The tool instantly replaces <, >, &, ", and ' with their entity equivalents.

4. Insert into your HTML. The escaped string is safe to include directly in your HTML content.

Unescaping HTML

The reverse operation (converting entities back to their original characters) is called unescaping. This is useful when:

• You receive escaped HTML from an API and want to display it as readable text
• You're debugging a template that's double-escaping content
• You want to convert HTML entities in scraped content to plain text

The same tool handles both directions: paste escaped content to unescape it, or paste plain text to escape it.

Quick Reference

HTML escaping is a small habit that prevents a large class of security vulnerabilities. Once you get used to asking "has this been escaped?" whenever you insert dynamic content into a page, you'll catch potential issues before they become real problems.