HTML Entity Encoder
Convert special characters to HTML entities and back. Encode and decode HTML entities instantly in your browser.
Bidirectional
Encode plain text to HTML entities or decode entities back to readable text.
Real-time Mode
Enable real-time conversion to see changes as you type.
100% Private
All encoding happens in your browser. No data sent to servers.
Understanding HTML Entities
HTML entities are special codes used to display reserved characters in HTML. Characters like <, >, and & have special meaning in HTML, so they must be encoded as entities to display correctly. This prevents browsers from interpreting them as HTML code and ensures your content displays exactly as intended.
Common HTML Entities
- < - Less than sign (<)
- > - Greater than sign (>)
- & - Ampersand (&)
- " - Double quotation mark (")
- ' or ' - Single quotation mark (')
- - Non-breaking space
When to Use HTML Entities
Use HTML entities when displaying code snippets on web pages (preventing code from executing), showing special characters that aren't on standard keyboards, preventing XSS (Cross-Site Scripting) attacks by encoding user input, ensuring compatibility across different browsers and character sets, and displaying mathematical symbols, currency signs, or copyright symbols.
Entity Types
- Named entities: Human-readable names like < for <
- Numeric entities: Decimal format like < for <
- Hex entities: Hexadecimal format like < for <
FAQ
HTML entities are special character sequences that start with an ampersand (&) and end with a semicolon (;). They're used to display reserved characters, special symbols, or characters not available on standard keyboards in HTML documents.
Encoding is necessary to prevent browsers from interpreting special characters as HTML code. For example, if you want to display "<html>" as text, you must encode it as "<html>" or the browser will treat it as an actual HTML tag. It's also crucial for security to prevent XSS attacks.
" represents a double quotation mark ("), while ' represents a single quotation mark ('). Both are commonly used in HTML attributes to avoid conflicts with the quote marks that define attribute values.
While encoding user input is an important part of XSS prevention, it should be part of a comprehensive security strategy. Always validate and sanitize user input on the server side, use Content Security Policy headers, and follow security best practices for your specific framework.
Not all special characters require encoding. You must encode <, >, &, and quotes in HTML attributes. Other characters like copyright (©) or trademark (™) symbols can be typed directly with UTF-8 encoding, though entities like © and ™ work too.
Named entities use descriptive names like for non-breaking space or © for copyright symbol. Numeric entities use character codes like   or ©. Named entities are more readable but limited in number. Numeric entities can represent any Unicode character, making them more versatile for international characters and special symbols.
Encode user input before inserting it into the DOM with innerHTML or similar methods. For example, if you're displaying user comments, search queries, or form data on a page, encode special characters to prevent malicious script injection. Modern frameworks like React automatically escape values, but vanilla JavaScript requires manual encoding for security.
HTML entities have negligible performance impact. Browsers decode them extremely quickly during page rendering. The slight size increase in your HTML (using © instead of ©) is minimal and outweighed by security and compatibility benefits. For modern web applications, entity encoding/decoding doesn't create performance bottlenecks.
Yes! Email HTML requires even more careful encoding than web HTML because email clients have inconsistent rendering engines. Encode special characters in email templates to ensure they display correctly across Gmail, Outlook, Apple Mail, and other clients. Pay special attention to quotes in attributes and ampersands in links.
Unencoded user input creates XSS (Cross-Site Scripting) vulnerabilities. Attackers can inject malicious scripts that steal cookies, redirect users, or deface your site. For example, if a user submits "<script>alert('hacked')</script>" and you display it without encoding, that script executes. Always encode untrusted content before rendering it.
URLs use percent-encoding (like %20 for space), not HTML entities. However, when displaying URLs in HTML attributes (like href or src), you may need to encode ampersands in query strings. For example, "page.html?name=value&other=data" should be "page.html?name=value&other=data" in HTML to validate correctly.
Common HTML Entity Reference
These are the most frequently used HTML entities you'll encounter in web development. Memorizing common ones speeds up your workflow.
| Character | Named Entity | Numeric Entity | Description |
|---|---|---|---|
| < | < | < | Less than sign |
| > | > | > | Greater than sign |
| & | & | & | Ampersand |
| " | " | " | Double quotation mark |
| ' | ' or ' | ' | Single quotation mark |
| |   | Non-breaking space | |
| © | © | © | Copyright symbol |
| ® | ® | ® | Registered trademark |
| ™ | ™ | ™ | Trademark symbol |
| € | € | € | Euro currency |
| £ | £ | £ | Pound sterling |
| ¥ | ¥ | ¥ | Yen/Yuan currency |
Security Best Practices
Context-Aware Encoding
Different contexts require different encoding strategies. HTML content needs HTML entity encoding. JavaScript strings need JavaScript escaping. URLs need percent-encoding. CSS values need CSS escaping. Using the wrong encoding method creates vulnerabilities. Always match your encoding method to where the data appears in your document.
Server-Side Validation
Never rely solely on client-side encoding. Attackers can bypass client-side JavaScript, so always validate and encode user input on your server. Client-side encoding improves user experience, but server-side security prevents actual attacks. Implement defense in depth - encode on both client and server for maximum protection.
Content Security Policy
HTML encoding prevents XSS attacks but works best alongside Content Security Policy (CSP) headers. CSP restricts where scripts can load from, providing another security layer even if encoding fails. Modern web applications should use both entity encoding and CSP headers for comprehensive XSS protection.
Using HTML Entities in Different Contexts
HTML Content
When displaying user-generated content between HTML tags, encode <, >, and & to prevent tag injection. For example, showing a code snippet on your page requires encoding all angle brackets so the browser renders them as text rather than interpreting them as HTML tags. This is the most common use case for HTML entities.
HTML Attributes
Attribute values require encoding quotes to prevent attribute injection. If you're building a link with user input in the title attribute, encode quotation marks so attackers can't break out of the attribute and inject new attributes. For example: title="User said: "Hello"" properly encodes quotes in the user's message.
JavaScript Strings
When inserting HTML into JavaScript strings (like with innerHTML), use HTML entity encoding for the HTML content. However, the JavaScript string itself needs JavaScript escaping (backslashes for quotes and special characters). This double-encoding scenario requires careful attention - encode for HTML first, then escape for JavaScript context.
Common Mistakes to Avoid
Double encoding: Encoding already-encoded entities creates display errors. If text contains "<" and you encode it again, it becomes "&lt;" which displays as "<" instead of "<". Check if content is already encoded before applying additional encoding.
Encoding in wrong direction: Encoding content before storing in databases (except for specific security requirements) creates problems. Store raw content in databases, then encode during display. This prevents issues when exporting to different formats (JSON, XML, CSV) that need different encoding.
Forgetting numeric entities: Named entities work for common characters, but thousands of Unicode characters exist. Numeric entities let you represent any character. International names, mathematical symbols, emoji - these often require numeric rather than named entities.
Inconsistent encoding: Mixing encoded and unencoded content creates unpredictable results. Either encode all user content or encode none (if your framework handles it). Partial encoding leaves security gaps and causes display inconsistencies.