HtmlHow-ToBeginner · 3 min read

How to Add Ampersand in HTML: Simple Guide

To add an ampersand in HTML, use the character entity &. Writing & in your HTML code will display a visible ampersand (&) in the browser.

📐

Syntax

In HTML, the ampersand character is a special symbol used to start character entities. To display a real ampersand, you must use its character entity &.

& starts the entity.
amp is the name for ampersand.
; ends the entity.

html

&amp;

Output

💻

Example

This example shows how to write an ampersand in a sentence inside HTML so it appears correctly in the browser.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ampersand Example</title>
</head>
<body>
  <p>Tom &amp; Jerry is a famous cartoon.</p>
</body>
</html>

Output

Tom & Jerry is a famous cartoon.

⚠️

Common Pitfalls

Many beginners try to write the ampersand directly as & in HTML. This causes errors or unexpected results because the browser thinks it starts a special code.

Always use & to show an ampersand. Forgetting the semicolon ; can also cause problems.

html

<!-- Wrong way -->
<p>Tom & Jerry</p>

<!-- Right way -->
<p>Tom &amp; Jerry</p>

Output

Tom & Jerry

📊

Quick Reference

Use this quick guide to remember how to write ampersands and other common HTML entities:

Character	HTML Entity	Description
&	&	Ampersand
<	<	Less than
>	>	Greater than
"	"	Double quote
'	'	Single quote

✅

Key Takeaways

Always use & to display an ampersand in HTML.

Writing & directly can cause errors or unexpected display.

Don’t forget the semicolon ; at the end of the entity.

Use character entities for other special symbols too.

Test your HTML in a browser to confirm correct display.