🌐 HTML Encoder / Decoder

HTML entities all begin with an ampersand and end with a semicolon, in either a named form such as the less-than entity or a numeric form built from a character code. Encoding means replacing a literal character with the entity that represents it, so the browser treats it as content rather than as markup.

Order matters more than anything else here. The ampersand must be escaped before every other character, because if it is escaped afterwards it will attack the entities the earlier steps just produced. Escape less-than first and you get a string containing an ampersand that a later ampersand pass would turn into a double-escaped mess, displaying the entity itself rather than the character. This tool handles the ampersand first for that reason, then the angle brackets and double quotes.

The optional toggles cover cases that depend on context. Apostrophes matter when you are building single-quoted HTML attributes. Forward slashes are sometimes escaped as a defensive measure against injection through closing tags. Non-breaking spaces are a formatting choice rather than a safety one: they prevent a line breaking at that point, which is useful between a number and its unit but damaging if applied to ordinary prose.

Paste the fragment that opens a div with a class attribute of note, contains the words Tom and Jerry joined by an ampersand, and closes the div. In encode mode with only the default characters handled, the less-than signs become the less-than entity, the greater-than signs become the greater-than entity, the double quotes around note become quote entities, and the ampersand between the two names becomes the ampersand entity.

The output is noticeably longer than the input, which is expected: each escaped character grows from one character to four, five or six. The character counters above each pane make that visible, and the entity tally below lists each substitution with the number of times it occurred, so in this example you would see two less-than replacements, two greater-than replacements, two quote replacements and one ampersand replacement.

Switch on the quote-encoding toggle and any apostrophe in the text, for instance in the word it's, is replaced with the numeric reference for a single quotation mark. Switching to decode mode and pasting the encoded string back returns the original fragment exactly, and the preview button renders it as an actual div rather than as visible markup.

Encode any text that will be inserted into an HTML page but should not be interpreted as markup: user comments, search terms echoed back on a results page, code samples in an article, and content pulled from an external feed. Leaving those unescaped is the mechanism behind cross-site scripting, and it is also why a perfectly innocent sentence containing a less-than sign can silently swallow the rest of a paragraph.

The most common mistake is encoding something that was already encoded. If a string arrives with an ampersand entity in it and you run it through encoding again, the ampersand of that entity is itself escaped and readers see the entity text on the page instead of the character. If your output shows literal entity codes, decode once and check whether the source was already safe before re-encoding.

Note that the numeric apostrophe reference is used rather than the named one, because the named apostrophe entity is valid in HTML5 and XML but was not part of HTML 4 and can misbehave in older parsers. Non-breaking spaces should be applied deliberately, not to whole paragraphs, since they block normal line wrapping.