Ampersand (&) in HTML
The ampersand is the character that starts every entity reference, so a bare & in HTML is ambiguous. Write & whenever you mean the character itself.
At a glance
- Character
- &
- Named entity
- &
- Decimal reference
- &
- Hex reference
- &
- Unicode code point
- U+0026
- Unicode name
- AMPERSAND
- In the entity reference
- Punctuation, and pinned in quick access
In detail
When a parser meets an ampersand in text it starts reading a character reference and keeps going until it hits a semicolon or a character that cannot belong to an entity name. If nothing matches, the parser gives up and emits the ampersand literally. That recovery is why a bare ampersand followed by a space usually looks fine in a browser, and it is also why people conclude, wrongly, that escaping is optional.
The failure that actually costs time is a query string inside an href. Write href="/p?id=1©=2" and the parser sees ©, which is one of the historical named references that browsers still resolve without a semicolon. The link silently becomes /p?id=1(c)=2 and the copy parameter never reaches your server. The same trap exists for ®, ×, ¬ and a handful of others.
Attribute values are parsed for character references too, so the rule does not change when you move from text content to an attribute. What does change is that an unescaped ampersand in an attribute is far more likely to be a real bug, because attributes are where URLs live and URLs are where ampersands cluster.
The exception is raw text elements. Inside a script or style block, character references are not expanded at all, so && in JavaScript stays && and writing && there would put four literal characters into your source. Any escaping helper you apply to page content must know to skip those blocks.
Examples
<!-- broken: © resolves even without the semicolon -->
<a href="/products?sort=price©=short">Details</a>
<!-- correct -->
<a href="/products?sort=price&copy=short">Details</a><p>Rock & roll, tea & biscuits, R&D.</p>Renders as: Rock & roll, tea & biscuits, R&D.
Things that catch people out
- Double escaping. Running an escaper twice over the same string turns & into &amp;, which renders as the literal text & on the page. This is the most common symptom of two layers of a stack both trying to be safe.
- Ampersands inside a script block must stay literal. Applying page level entity encoding to inline JavaScript breaks the code rather than protecting it.
- A bare ampersand can validate as HTML and still break XML, RSS and Atom, which have no legacy recovery rule and reject the document outright.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Less than sign (<) in HTML
A literal < starts a tag, so text containing it has to be written <. Where the parser recovers, where it does not, and why this is the core of escaping.
Greater than sign (>) in HTML
A lone > is legal in HTML text but not everywhere. The contexts that force >, the comment and CDATA rules, and why escapers emit it anyway.
Double quotation mark (") in HTML
The straight double quote ends an attribute value, so it needs " there. Where that matters, where it does not, and how JSON in a data attribute breaks.
Apostrophe (') in HTML
' is defined in HTML5 and XML but was absent from HTML 4.01. Why ' is the safer numeric form and when a single quote actually needs escaping.
Em dash (—) in HTML
The em dash at U+2014, its named, decimal and hex references, how it differs from the en dash and hyphen, and the practical reasons to prefer a comma.
En dash (–) in HTML
The en dash at U+2013 joins ranges and paired terms. Its entity forms, how wide it really is, and how to stop spreadsheets turning your ranges into dates.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues