ToolBoxOnline
Developer

HTML Entities: Why & Shows Up on Your Page and How to Fix Special Characters

Ever seen & in your webpage text? That is an HTML entity double-encoding bug. Here is what entities actually are, the ones you will use, and how to encode and decode them correctly.

html entitieshtml escapespecial charactersampersand encodinghtml character codes

You write a blog post with an ampersand in the title. It renders on your page as &amp; instead of &. Or you paste a code snippet into an HTML page and the <div> tags disappear entirely — because the browser interpreted them as actual HTML elements instead of displaying them as text. Both are HTML entity problems, and a free HTML entities converter fixes them in seconds.

What HTML entities actually are and why they exist

HTML entities are special character sequences that represent characters which would otherwise break your HTML. They all start with & and end with ;. The five you will see most often:

  • &lt; → < (the less-than sign that opens every HTML tag)
  • &gt; → > (the greater-than sign that closes every HTML tag)
  • &amp; → & (the ampersand character itself — the one that starts all entities)
  • &quot; → " (double quote, which would break HTML attributes)
  • &#39; → ' (single quote or apostrophe)

Without entities, typing <div> in your blog post would create an actual HTML div element on the page instead of displaying the text "<div>". Entities tell the browser "show this character as text — do not interpret it as code."

The double-encoding trap that creates &amp;

This is the most common HTML entity bug: you encode & to &amp;. Then some other system — your CMS, a template engine, a JavaScript framework — encodes it again, producing &amp;amp;. Your page now shows &amp; instead of &. This happens whenever data passes through multiple encoding layers: database → backend → template → frontend. Each layer tries to be helpful by encoding, and the result is a mess.

The fix: encode once, at the last possible moment before rendering to HTML. Store raw text in your database. Encode only when outputting to the page. If you already have double-encoded text, the HTML entities converter has a decode mode — use it to undo the extra layer of encoding and get back to the original text.

The entities you will actually use in real content

&nbsp; — the non-breaking space. Keeps two words glued together on the same line. Use it between a number and its unit: 10&nbsp;km prevents "10" from sitting at the end of one line and "km" at the start of the next. Also useful in navigation menus where you do not want a brand name to break across lines.

&copy; ©, &reg; ®, &trade; ™ — copyright, registered trademark, and trademark symbols. Much easier than memorizing their Unicode code points or copying them from another page every time.

&mdash; — and &ndash; – — em dash and en dash. An em dash separates clauses within a sentence — like this — while an en dash indicates ranges: pages 10–20, Monday–Friday. Most people just type a hyphen for everything, but proper dashes make text look professionally typeset.

Numeric entities — any Unicode character can be written as &#NNNN; where NNNN is its decimal code point. &#10003; is ✓, &#9829; is ♥. Useful when your text editor or CMS does not support the character directly but you need it in the output.

When encoding saves you from security problems

If your site renders user-submitted content as HTML without encoding entities, a malicious user can submit <script>alert('hacked')</script> and it will execute in every visitor's browser. Encoding converts those angle brackets to &lt; and &gt;, turning the script tag into harmless displayed text. This is called output escaping and it is the most fundamental web security practice — and the most commonly forgotten one.

For URL-specific encoding where spaces become %20 and question marks become %3F, use our URL encoder instead — it handles a completely different set of reserved characters. And if you are working with binary data that needs to become text-safe, the Base64 converter is the right tool for that job.

Bookmark the HTML entities tool for the next time you see weird characters appearing in your page output. For more developer tool guides, see our curated list of essential browser-based developer tools.

Tools mentioned in this article

Compartir esta herramienta