HTML escape

HTML escape is a crucial text encoding utility that replaces reserved characters like ampersands, less-than signs, greater-than signs, and quotes with their corresponding HTML entities. By encoding these characters, you guarantee that a string can safely be embedded into HTML text without being mistakenly interpreted as markup or executable code. While it is not a full-document sanitizer and does not parse tags, it is highly effective when you need to display user-generated text safely within a web page. Most importantly, all conversion processing happens strictly locally in your browser—your data is never uploaded to any external server, ensuring complete data privacy and security.

In the W3C HTML5 Specification, certain characters have syntactical significance:

• < and > define element tags.
• & initiates character reference entities.
• " and ' encapsulate HTML attribute values.

When dynamic, user-generated, or untrusted text containing these characters is inserted directly into an HTML document without escaping, the browser’s DOM parser interprets them as markup syntax. This can cause rendering defects or severe Cross-Site Scripting (XSS) vulnerabilities (OWASP Top 10 A03:2021).

The Five core entity replacements

Our HTML escape tool processes the five core HTML/XML special characters. Note the precise order of escaping—the ampersand (&) must always be escaped first to prevent double-escaping subsequent entities (e.g., turning < into <).

Note: The single quote is represented as the numeric entity ' rather than ' to guarantee maximum backward compatibility across legacy browsers and various HTML/XML parser implementations.

• Displaying Code Snippets in Web Tutorials: Securely rendering raw HTML, XML, or JSX code blocks inside <pre><code> elements without triggering browser execution.
• Safe Form Value Echoing: Injecting user input safely into form <input value="..."> attributes to prevent attribute breakout.
• Email Template Generation: Escaping dynamic text fields before merging them into transactional HTML email templates to maintain layout integrity.
• RSS & XML Feed Generation: Preparing text content for XML elements (like <title> and <description>) to ensure strict XML parser compliance and prevent feed validation errors.

While HTML escaping is a fundamental security practice, developers must understand its boundaries. HTML entity escaping primarily protects text nodes (content between tags) and safely quoted attribute values from tag injection.

However, it does not protect against all forms of XSS attacks. For example, escaping does not sanitize dangerous URI schemes (like href="javascript:..."), nor does it protect unquoted attribute contexts. Comprehensive defense-in-depth requires context-aware sanitization, Content Security Policies (CSP), and avoiding unsafe sinks in modern JavaScript frameworks.

1. Escape at the last possible moment: Apply HTML escaping directly at the presentation layer (e.g., right before rendering output) rather than storing escaped data in your database. This maintains data purity and prevents double-escaping issues later.
2. Use context-aware escaping libraries: If your framework does not automatically escape variables (like React or Vue do by default), use proven libraries that adjust escaping logic based on where the data is being injected (CSS, JavaScript, HTML body, or attributes).
3. Always quote attributes: HTML escaping is only fully reliable for attributes if the attribute values are wrapped in quotes.

JavaScript / TypeScript

function escapeHtml(text: string): string {
  const map: Record<string, string> = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;",
  };
  // It is essential to escape the ampersand first.
  return text.replace(/[&<>"']/g, (char) => map[char]);
}

Python 3

import html

def escape_html(text: str) -> str:
    # quote=True ensures both double and single quotes are translated
    return html.escape(text, quote=True)