HTML entities encoder

What HTML entities are

An HTML entity is a way to write a character using a code instead of the character itself. They exist for several reasons. First, some characters are reserved: the browser reads < as the start of a tag, so to display a literal less-than sign on the page you have to write it as <. Second, in old or misconfigured encodings accents and non-Latin letters would break, and writing them as é or ñ guaranteed they showed up correctly anywhere. Third, many symbols like ©, € or ™ are not on the keyboard and are easier to type by name. They are used to display code in a blog, to build HTML emails that render the same in old clients, to prevent XSS when inserting user content, and in any CMS that encodes the text you paste.

Named, decimal and hexadecimal

Every entity starts with an ampersand and ends with a semicolon. In between there can be a name (© for copyright), a decimal number preceded by a hash (©), or a hexadecimal number with #x (©). All three forms above represent the same character. Named entities are readable but only exist for a limited set; numeric entities work for any Unicode character, including emoji. That is why, when you encode with names, anything without a name automatically falls back to numeric.

Encoding and decoding safely

Encoding means going from <café> to <café> (specials only) or to <café> (all non-ASCII). Decoding is the reverse path: from é you get back é, from ñ you get ñ, from & you get &. Many converters decode by putting the text into innerHTML, which can run hidden scripts. Not here: we use an explicit map of names and String.fromCodePoint for the numeric ones, all as pure text, and the result goes into a textarea value. We never touch innerHTML, so decoding is safe even with malicious content.

Reference table of common entities

What this encoder is for

• Display HTML code snippets in a blog without rendering them.
• Build HTML emails that look the same in old clients, with symbols and accents encoded.
• Prevent XSS by encoding user input before putting it in the DOM.
• Clean up text that arrived with entities from an RSS feed, an API or a database export.
• Insert symbols that are not on the keyboard (©, €, ™, arrows) by name.