How to search and convert HTML entities to prevent garbled characters

When this guide is useful

This is for users who want to find out a list of HTML entities, character references for special characters, the meaning of & and <, conversion to decimal and hexadecimal references, and HTML escapes and reverse conversions.

• Display code examples and comparison symbols in the HTML body
• Interpret references such as & retrieved from CMS and emails
• Look up character references for copyright, currency, arrows, and math symbols
• Isolate double escapes in template output

When do you need HTML entities?

• Additional information: < > & HTML
• When safely writing quotation marks and symbols in attribute values
• When returning character references copied from email or CMS to the original characters
• Additional information: Unicode

Search, conversion, and confirmation procedures

1. Search for characters, entity names, Unicodes, and categories in the list.
2. Open the target line and compare the actual characters, named references, and decimal/hexadecimal references.
3. Convert
4. Convert
5. Copy the results and check display and accessibility in real HTML context.

Escape and security precautions

The required escaping method is different for HTML body, attribute value, URL, JavaScript, and CSS. Converting to HTML entities alone does not provide protection against XSS in all contexts.

When displaying external input, prioritize safe APIs such as textContent over string concatenation or innerHTML, and do not disable the standard escaping of your framework.

Specific example: Display < and & in the code example in the HTML body

If you write the example tag as is in the HTML body, the browser will interpret it as markup. You need to convert the <, >, & that you want to display into character references.

However, if you convert the entire code repeatedly, you will end up with double escapes like &lt;, so check the state before conversion.

1. Convert
2. Targets characters that conflict with HTML syntax and converts them to named references.
3. Place the result inside the HTML code element.
4. Check the browser display and page source to ensure there are no double conversions.

Even when displaying external input to a code block, do not pass untrusted HTML as is to innerHTML.

Frequently asked questions

Are &, & and & the same characters?

Yes. Both represent an ampersand. Named references may be used for readability, and numeric references may be used for machine generation.

Need to convert all Japanese to character references?

Convert