HTML Entities and Symbols: Showing Special Characters Safely

Sooner or later you’ll try to put a less-than sign, a copyright symbol, or a curly arrow into a web page — and discover it doesn’t quite work the way you expected. The browser either swallows the character, shows the wrong thing, or breaks your markup entirely. That’s not a bug. It’s HTML protecting itself, and the fix is a small, old, and genuinely useful feature called HTML entities.

This article walks through what entities are, why a handful of characters simply can’t be typed raw into HTML, and how to display symbols, accented letters, and special spaces correctly. None of it is hard — it’s mostly about knowing which characters are “reserved” and what to write instead.

What an HTML entity is

An HTML entity is a short code that stands in for a character. Instead of typing the character directly, you write a little sequence that starts with an ampersand (&) and ends with a semicolon (;). The browser reads that sequence and renders the real character in its place.

The most famous example is the ampersand itself:

<p>Tom &amp; Jerry</p>

That & is an entity. The browser doesn’t print the letters a-m-p — it prints a single &. So the page shows:

Tom & Jerry

Every entity follows one of two shapes:

• A named entity, like &, ©, or   — easy to read and remember.
• A numbered entity (also called a numeric character reference), like © or © — it points to the character by its Unicode code point, in decimal (©) or hexadecimal (&#x...;).

Both © and © produce the exact same symbol: ©. Named entities are friendlier; numbered ones work for any character, even ones that don’t have a name.

Why some characters can’t be typed directly

Here’s the core idea. HTML uses a few characters as part of its own grammar. The browser needs them to figure out where tags start and end. If you type one of those characters as ordinary text, the browser gets confused about whether you meant content or markup.

There are really only a handful of these reserved characters:

The two you’ll meet most are < and >. Imagine you’re writing a tutorial and want to show the text “use the <strong> tag.” If you type it raw:

<p>Use the <strong> tag for emphasis.</p>

…the browser doesn’t show “use the <strong> tag.” It thinks you’re actually opening a strong element, so everything after it turns bold and the literal word <strong> vanishes. To display the characters themselves, you escape them:

<p>Use the &lt;strong&gt; tag for emphasis.</p>

Now the page correctly shows: Use the <strong> tag for emphasis.

The ampersand has the same problem. Because & begins every entity, a raw & in your text is ambiguous — the browser might try to read the text after it as the start of an entity. Writing & removes all doubt.

Displaying symbols and special characters

Entities aren’t only for escaping reserved characters. They’re also the classic way to show symbols that aren’t on your keyboard — currency signs, legal marks, arrows, mathematical operators, and more.

Some common ones:

<p>&copy; 2026 ACY Partner Indonesia</p>
<p>Price: 50&euro; &mdash; a great deal.</p>
<p>Rated 4.5 &starf; out of 5</p>
<p>Scroll down &darr; for more</p>
<p>5 &times; 3 = 15</p>

Those render as:

• © → © (copyright)
• € → € (euro)
• — → — (em dash, the long one)
• × → × (multiplication sign — not the letter x)
• ↓ → ↓ (down arrow)

There are hundreds of named entities. You don’t need to memorize them; you just need to know they exist so you can look one up when you need a specific symbol. A few you’ll genuinely reach for again and again: © (©), ® (®), ™ (™), … (…), — (—), and ° (° for degrees).

Accented and non-English letters

Letters with accents have named entities too — handy when you’re working in an editor that can’t type them easily, or when you want to be explicit:

<p>caf&eacute;, na&iuml;ve, jalape&ntilde;o</p>

That gives you: café, naïve, jalapeño.

In practice, though, you usually don’t need entities for accented letters at all — see the note below.

The non-breaking space and other invisible entities

A few entities don’t represent a visible symbol — they control spacing. The most useful is the non-breaking space, written  .

A normal space lets the browser wrap text to the next line wherever it likes. A non-breaking space is a space that refuses to break. Use it to glue two words together so they never get separated across lines:

<p>Call us on 0800&nbsp;123&nbsp;456 today.</p>
<p>See figure&nbsp;3 for details.</p>

Here the phone number and “figure 3” will always stay on the same line. It’s a small touch, but it stops awkward line breaks in the middle of things that should read as one unit.

Two related ones worth knowing: – (–, the en dash, used for ranges like “pages 10–20”) and — (—, the em dash, used to set off a phrase — like this). They’re typographically correct and look far more polished than a plain hyphen.

Named versus numbered: which to use

When an entity has a name, prefer the name — © is far clearer than © to anyone reading your source later. Reach for the numbered form in two situations:

• The character has no named entity (most symbols don’t). Look up its Unicode code point and write &#NNNN; or &#xHHHH;.
• You want to be absolutely explicit about an unusual character.

For example, a rightwards heavy arrow (➜) has no friendly name, so you’d write its code point:

<p>Next step &#10148; sign up</p>

Both decimal (➤) and hexadecimal (➨) point to the same character — pick whichever you find easier to read.

When you actually need entities — a quick guide

It’s easy to overthink this, so here’s the short version of when entities matter:

• Always escape <, >, and & when you want them to appear as literal text in your content. This is non-negotiable — raw versions break your markup.
• Inside attribute values, escape the quote character that wraps the value, and escape & (common in URLs).
• For symbols and accents, entities are a reliable option, but with UTF-8 you can usually type the character directly — so use whichever is clearer for your team.
• Use   to keep words together, and – / — for proper dashes — but never to fake spacing or layout.

If you’re displaying chunks of code on a page (like the snippets in this very article), every <, >, and & inside that code has to be escaped, or written by a tool that escapes it for you. That’s the single most common real-world reason developers deal with entities.

Wrapping up

HTML entities look cryptic the first time you see them, but the concept is simple: they’re stand-in codes for characters you can’t — or shouldn’t — type directly.

• An entity is a code starting with & and ending with ; that the browser renders as a single character.
• They come in named form (©) and numbered form (©); both produce the same character.
• A few reserved characters — <, >, &, and quotes — must be escaped, because HTML uses them in its own grammar.
• Entities also display symbols (©, €, ×, arrows) and accented letters, though with UTF-8 you can often just type those directly.
• The non-breaking space ( ) keeps words together; use it sparingly, and never to fake layout.

Master the three reserved characters and you’ve covered ninety percent of the cases you’ll ever hit. Everything else is a quick lookup. Next time you need a symbol, you’ll know exactly what to reach for — and why your code blocks have been quietly behaving all along.