Ampersand in HTML: How to Encode and Display It
- Raw & in HTML breaks parsers — browsers see it as the start of an entity
- Encode it as & to display it safely in any context
- URLs in href attributes need & encoded as & too
- Free encoder converts ampersands and all other special characters instantly
Table of Contents
The ampersand (&) is one of the most common characters to cause problems in HTML. Paste it raw into your markup and browsers assume you started an entity — something like & or ©. When that entity never completes correctly, you get broken rendering or a validation error.
Encoding it as & tells the browser: show a literal ampersand here, do not parse it. Here is when that matters and how to do it.
Why a Raw Ampersand Breaks HTML
HTML parsers treat & as the start of a character entity reference. When they see &, they look ahead for a semicolon to complete the entity (like & → &). If the entity is unrecognized or malformed, behavior varies by browser — some display it literally, some silently drop it, some show garbled output.
Modern browsers are lenient about this in body text, but strict validators (HTML5, XML, RSS) will flag every unencoded & as an error. More importantly, bare ampersands in attribute values — especially href — cause real problems across all browsers.
The safe rule: encode every literal ampersand as & in HTML.
Ampersand in href and URL Attributes
This is where the ampersand problem is most common and most consequential. URLs that contain query strings use & to separate parameters:
https://example.com?name=John&color=blue&size=large
When you embed that URL in an HTML attribute, the & must be encoded:
<a href="https://example.com?name=John&color=blue&size=large">
If you leave the & raw, HTML validators reject it as malformed. Some older browsers may also fail to parse the query string correctly. This is especially important for analytics tracking URLs, affiliate links, and any URL with multiple parameters.
The exception: inside <script> blocks or JavaScript strings, you write the raw URL — encoding is only required in HTML attribute values.
Where You Need to Encode the Ampersand
- Body text — Any visible & in your page content: "H&M", "R&D", "Terms & Conditions"
- href attributes — URLs with query string parameters
- title and alt attributes — Image alt text, link titles containing &
- Meta tags — Meta descriptions and OG tags with & in the text
- RSS/Atom feeds — Feeds are XML-strict; every & must be encoded
- Email HTML — Many email clients run strict parsers; raw & in HTML emails causes rendering issues in Outlook
Where you do NOT need to encode it: inside CSS, inside JavaScript string literals, or in data attributes where the value is consumed by JavaScript rather than rendered as HTML.
How to Encode an Ampersand (And Other Special Characters)
For a single character: replace & with & manually. That is the complete ampersand entity.
For a full block of text containing multiple special characters, use the free HTML entity encoder. Paste your content — the encoder converts all special characters at once:
- & → &
- < → <
- > → >
- " → "
- ' → '
This is faster and more reliable than manually finding every & in a long text block, and it catches characters you might miss.
Common Ampersand Mistakes and How to Spot Them
Double-encoding — You encode & to &, then encode again to &amp;. Your page renders the literal text "&" instead of "&". This happens when content gets passed through multiple encoding layers. Check your raw HTML source to see if you have chained entities.
Encoding in the wrong place — Encoding & inside a JavaScript string or CSS value where HTML entities are not interpreted. The encoded string appears literally in your JS/CSS instead of resolving to &.
Not encoding in href — The most common real-world bug. Your analytics URL breaks silently; the link still works but parameters get garbled. Always check multi-parameter URLs in attributes.
Encode Ampersands and Special Characters
Paste your HTML or text. All special characters encoded instantly. Free, no signup.
Open Free HTML Entity ToolFrequently Asked Questions
What is the HTML code for the ampersand symbol?
The HTML entity for & is & — that is what you type in HTML to display a literal ampersand in the browser.
Do I need to encode & in URL parameters inside href?
Yes. Every & separating query parameters in an href attribute must be encoded as & in HTML. Leave them raw only inside JavaScript strings.
What happens if I use a raw & in HTML?
Browsers are lenient in body text but strict validators flag it as an error. In href attributes, raw & can break URL parsing. In RSS/XML, it causes a parse failure.
How do I encode multiple ampersands at once?
Paste your text into the free HTML entity encoder. It converts all special characters — &, <, >, ", and more — in one pass.
