HTML Encoder: Free Online Tool: Ferra

What is HTML encoding?

Paste <b> into a page and the browser doesn't show it. It obeys it, bolding everything that follows. HTML encoding prevents that by replacing the characters browsers treat as markup with entities that render as plain text: & becomes &, < becomes <, > becomes >, and the double quote becomes ". Encoded, that pasted <b> appears on the page as <b>: visible, not interpreted.

The ampersand deserves the most respect: & starts every entity, so it must be encoded wherever it appears, and encoding it a second time is the classic failure. Single quotes are usually written as ', which works in every context, and quotes matter most inside attribute values, where an unencoded one ends the attribute early. HTML encoding is also not URL encoding: percent-escapes like %20 belong in links, entities belong in page text.

Text that ships from a Ferra table to a web page or an HTML email, product names and titles, notes too, goes through exactly this step, so an & in a name never breaks the markup.

How the HTML encoder works

The encoded version keeps pace as you type. Every &, <, >, and quote is swapped for its entity; every other character passes through unchanged, so the output drops straight into an HTML page, template, or email.

Text: Paste the raw, unencoded text. If it already contains entities like &, a second pass will double-encode them: start from the plain version.

Reading the output

Feed it 5 < 10 & "quotes" and you get 5 < 10 & "quotes". Four characters changed, the less-than sign and the ampersand, plus both double quotes, while the digits, letters, and spaces rode through untouched. Put the encoded string in a page and the browser renders the original: 5 < 10 & "quotes".

Tom & Jerry is already encoded. Encode it again and the & of & gets encoded too, producing Tom &amp; Jerry, which renders on the page as Tom & Jerry, entity and all. Visible & or < on a rendered page is the fingerprint of double encoding.

When to use the HTML encoder

Text you didn't write ends up inside markup constantly. Product names and titles pulled from a spreadsheet or database, customer quotes too, routinely carry ampersands and stray angle brackets, and an ampersand followed by certain letters gets misread as an entity: &copy without a semicolon still renders as ©. Encoding keeps those names rendering literally.

Code samples need it too. A tutorial or changelog that displays <div> or a snippet of markup, docs pages most of all, must encode it, or the browser renders the example instead of showing it. Same rule for user-generated content: encoding on output is the basic defense that keeps pasted text from injecting markup into your page.

Tips for the HTML encoder

Encoding runs one way, one time: every failure below breaks one of those two rules.

Start from raw text: Encode the original, unencoded string. If & is already in it, you're about to double-encode.
Encode attribute values too: A quote inside an attribute ends it early, so anything going into a value="..." needs its quotes encoded.
Use ' for single quotes: It works in every context and every browser. ' is fine in HTML5, but ' never surprises you.
Don't mix it up with URL encoding: Percent-escapes like %20 belong in URLs, entities belong in HTML text: different problems, not interchangeable.
Spot double encoding fast: Visible & or < on a rendered page means the text was encoded twice. Remove one round and it fixes itself.