HTML Entity Encoder and Decoder

Escaping for HTML is a smaller job than it looks, and the mistake is almost never escaping too little of the exotic — it is escaping the wrong four characters in the wrong place. The serialisation algorithm in the HTML Standard replaces an ampersand, a no-break space and both angle brackets everywhere, and adds the double quote only when the text is going into an attribute value. Nothing else has to change: a UTF-8 page carries an accented letter or an emoji perfectly well as itself. This page shows both cases as you type and reads entities back the other way.

How it is calculated

& → &amp; U+00A0 → &nbsp; < → &lt; > → &gt; and in an attribute, " → &quot;

The order matters: the ampersand is replaced first, otherwise the ampersands introduced by the later replacements would be escaped a second time. The apostrophe is deliberately not on the list, which is why an attribute value produced this way must be wrapped in double quotes rather than single ones.

Source: WHATWG HTML Standard section 13.3 — serializing HTML fragments, the "escaping a string" steps and their attribute mode

Questions people ask

Why is the double quote escaped only in the attribute case?

Because in a text node it cannot end anything. Inside a double-quoted attribute value it closes the value, so it has to become &quot; or the rest of your text turns into markup. Escaping it in a text node is harmless but noisy, which is why the algorithm distinguishes the two.

What about the apostrophe?

The algorithm leaves it alone, and that is a deliberate pairing: the serialiser writes attribute values in double quotes, so a single quote inside one is just a character. If you write your attributes with single quotes you have to escape it yourself, as &apos; or &#39;.

Do I need to escape accented letters and emoji?

Not on a UTF-8 page, which is every page you are likely to write. The toggle exists for the cases where the text has to survive a pipeline that mangles anything above ASCII — some mail templates, some older content systems. When it is on, a character with a well-known name gets that name and everything else gets a hexadecimal reference.

Why does a raw ampersand sometimes work anyway?

Because a browser only treats one as the start of a reference when what follows looks like one. The specification has a name for the dangerous middle case, the ambiguous ampersand: an ampersand followed by letters or digits and then a semicolon that matches no known name. "AT&T" is fine and "AT&copy;" is not, which is exactly why guessing is a bad plan.

Does the decoder know every named entity?

No, and it says so. It resolves every numeric reference, decimal or hexadecimal, and the common names people actually type. The full HTML list runs to more than two thousand names, most of them mathematical; a name outside the table is left exactly as it was found rather than silently dropped.

Related tools