How to Show an Ampersand in HTML

To show an ampersand (&) in HTML, type & in your code. This is the HTML entity for the ampersand character, and it ensures the browser displays & correctly instead of interpreting it as the start of an entity or character reference.

Why the Ampersand Needs Special Handling

In HTML, the ampersand (&) has a reserved role: it signals the beginning of an entity, such as   (non-breaking space) or © (©). When a browser encounters an ampersand followed by letters, it tries to parse that sequence as a named character reference. If you write a bare & in your content, the browser may still display it correctly in most modern browsers, but it can also cause validation errors and, in certain edge cases, render incorrectly—especially if the ampersand is followed by text that resembles an entity name. Using & is the standards-compliant way to guarantee the character appears as intended.

The Correct Entity: &

The entity & is the HTML named character reference for the ampersand. When the browser parses this, it outputs a single & character in the rendered page. This works in all HTML versions and in XHTML. For example:

Source code: <p>Tom & Jerry</p>
Rendered output: Tom & Jerry

You can also use the numeric character reference & (decimal) or & (hexadecimal), which represent the Unicode code point for the ampersand (U+0026). Both are valid, but & is more readable and commonly used.

When You Must Use &

While modern browsers often tolerate a raw & in text content, there are specific situations where you should always use the entity:

Inside attribute values: If an attribute value contains an ampersand, such as a URL (?a=1&b=2), you must write & to avoid breaking the attribute. For example: <a href="?a=1&b=2">link</a>.
When followed by text that could be an entity: If the ampersand is followed by letters and a semicolon, like &copy, the browser might interpret it as the copyright symbol. Writing &copy prevents this.
In XHTML or XML: These stricter languages require the entity; a raw & is a syntax error.
For validation: If you want your HTML to pass W3C validation, every ampersand in content and attributes must be escaped.

Common Mistakes and Misconceptions

A frequent mistake is using &amp; when you actually want to display the text “&”. This happens when you double-escape by mistake. If you want the literal string “&” to appear on the page, you need to write &amp; in the source. Another misconception is that you must escape all ampersands in URLs. In HTML, you only need to escape them in the source code; the browser will decode the entity to the actual ampersand when sending the request. For example, href="search?q=fish&cat" sends the URL search?q=fish&cat to the server.

Alternatives to &

Besides the named entity, you can use:

& – decimal numeric reference
& – hexadecimal numeric reference

All three produce the same result. In practice, & is the most readable and widely recommended. Some developers use the numeric references when they want to avoid confusion with named entities, but it is not necessary.

How to Type the Ampersand Directly

If you are using a code editor with HTML support, you can often type a bare & and the editor will auto-complete it to & when you save or format. However, relying on auto-formatting is not a substitute for writing the entity yourself, especially in content management systems that store raw HTML. In a CMS like WordPress, the visual editor may convert & to & automatically, but if you switch to the text editor, you should ensure the entity is present.

Frequently Asked Questions

Do I need to escape ampersands in HTML5?

Yes, even in HTML5, the ampersand is a reserved character. The HTML5 spec requires that a bare ampersand be followed by a valid entity name or a space; otherwise, it is a parse error. While browsers may still render it correctly, using & is the correct and safe approach.

What happens if I forget to escape an ampersand?

In most browsers, a lone ampersand in text is displayed as-is. However, if the ampersand is followed by characters that form a valid entity (like  ), the browser will render the entity instead of the literal ampersand. This can lead to unexpected characters appearing on your page.

Can I use & in a URL attribute?

Yes, you must use & in the HTML source for a URL that contains ampersands. The browser will decode it to the actual & when it requests the URL. For example, <a href="page.php?id=1&name=test"> works correctly.

Is there a difference between & and &?

No, both render the same character. & is a named entity, while & is a numeric reference. They are interchangeable, but & is more readable in code.

Why does my ampersand show as “&” on the page?

If you see the literal text “&” on your page, it means your source code contains &amp; (double-escaped). To fix it, replace &amp; with & in your HTML source.

Do I need to escape ampersands in JavaScript or CSS?

No, ampersands have no special meaning in JavaScript or CSS. However, if you are embedding JavaScript or CSS inside an HTML attribute (like onclick or style), you still need to escape them for HTML parsing.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →

Why the Ampersand Needs Special Handling

The Correct Entity: &amp;

When You Must Use &amp;