Special characters in HTML

Three ways to write a character

Every character can reach a web page in three equivalent ways. All of these display ©:

©          the character itself (needs a UTF-8 page)
©     a named character reference (an "entity")
©     a decimal numeric reference
©     a hexadecimal numeric reference

The browser turns references into characters while it parses the page, so the reader, search engines and screen readers all see the same ©. Which form you use is a matter of convenience and readability of the source code.

The characters you must escape

Only a handful of characters have special meaning in HTML markup:

Escaping these is also a security measure. Any text that comes from users, a database or a URL must be escaped before it is inserted into a page, or it can inject markup and scripts. Template engines usually do this automatically; when you build HTML by hand, escape at the moment of output.

Named character references

HTML defines 2,125 named references (the WHATWG list also contains about a hundred legacy forms without the final semicolon). The common ones are easy to remember:  , ©, ®, ™, °, €, —, → and ♥. Our HTML entities reference lists all of them with the character each produces.

Three rules avoid surprises:

• Names are case-sensitive. é is é and É is É.
• Always include the semicolon. A few old entities work without it for backward compatibility, which can mangle URLs such as ?a=1&copy=2 if the ampersand is not escaped.
• Not every symbol has a name. ★ has ★, but ➜ has none. Use a numeric reference when there is no name.

Numeric references work for everything

A numeric reference names the code point directly, so it works for any Unicode character, including emoji and characters added in the latest version. Take the code point from any SymbolHub symbol page: the check mark is U+2713, so it can be written ✓ (hex) or ✓ (decimal). For characters built from several code points, write each one: the red heart ❤️ is ❤️.

The HTML entity converter turns any text into named, decimal or hex references, and decodes them again.

Declare UTF-8 and paste the character

If your page is saved as UTF-8 and declares it, you can paste symbols straight into the HTML. This is the modern default and makes the source far easier to read:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Temperature: 21 °C</title>
</head>

The <meta charset> element must appear within the first 1024 bytes of the file. Without it, or with a mismatched server header, pasted characters can turn into mojibake such as “°C”. Our UTF-8 guide explains what goes wrong.

References are still the better choice in a few cases: when your editor or build tool is not reliably UTF-8, when the character is invisible or easily confused (such as a non-breaking space), or when you want the source to show clearly which character is meant.

Invisible and spacing characters

Invisible characters are where references earn their keep, because you cannot see them in the source:

•   (U+00A0), a non-breaking space, keeps “10 kg” on one line.
• ­ (U+00AD), a soft hyphen, marks where a long word may break with a hyphen.
• ​ or ​, a zero width space, allows a line break with no visible gap.
•   (U+2009), a thin space, sits between a number and a unit in careful typography.

Do not use runs of   for layout. Use CSS margins and padding instead; screen readers and copy-and-paste handle real spacing much better.

Special characters in attributes and URLs

Attribute values follow the same rules as text, plus the quote character that wraps them. Titles and alternative text can contain symbols directly: alt="Rating: ★★★★☆". In URLs, characters outside ASCII are percent-encoded as their UTF-8 bytes, so a link to a page about “café” becomes caf%C3%A9. Browsers display the readable form in the address bar but send the encoded one.

Symbols and accessibility

Screen readers announce symbols by their names, which is not always what you intend. “→” is read as “right arrow” and “★★★★☆” as five separate stars. When a symbol carries meaning, give it a text equivalent: “4 out of 5” next to the stars, or aria-label on an icon-only link. When it is decoration, hide it with aria-hidden="true".