How to Add Special Characters in HTML

Use HTML entities when you need to display characters that are reserved in HTML or are not easy to type directly from your keyboard. This works well for symbols like <, >, copyright marks, currency signs, and accented characters.

What you’ll build or solve

You’ll learn how to add special characters in HTML using entity codes. You’ll also know when to use named entities versus numeric codes.

When this approach works best

This approach is the right choice when a character would otherwise be treated as HTML code or may not display consistently.

Common real-world scenarios include:

• Showing < and > in code examples
• Displaying copyright and trademark symbols
• Adding currency symbols like euro, pound, or dollar
• Showing accented characters in names
• Displaying ampersands in company names

This is a bad idea when the character already works normally as plain text and readability is better without the entity.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Replace the special character with its HTML entity

Use the correct entity code in the exact spot where the character should appear.

<p>5 &lt; 10</p>
<p>Use &amp; for an ampersand</p>

For symbols and accented characters, use the matching entity name or numeric code.

<p>&copy; 2026 Mimo</p>
<p>Price: &pound;19</p>
<p>Fran&ccedil;ois</p>

What to look for:

• Use < for <
• Use > for >
• Use & for &
• Use entities for symbols like ©, ™, and £
• Every entity starts with & and ends with ;

Examples you can copy

Code comparison

<p>3 &lt; 7 and 9 &gt; 4</p>

Copyright footer

<footer>&copy; 2026 Code Academy USA</footer>

French name with accent

<p>Fran&ccedil;ois Dubois</p>

Common mistakes and how to fix them

Mistake 1: Typing < directly in visible text

What the reader might do:

<p>5 < 10</p>

Why it breaks: the browser may treat < 10 as the start of a broken HTML tag.

Corrected approach:

<p>5 &lt; 10</p>

Mistake 2: Forgetting the semicolon

What the reader might do:

<p>&copy 2026</p>

Why it breaks: some browsers may still render it, but the entity is incomplete and less reliable.

Corrected approach:

<p>&copy; 2026</p>

Mistake 3: Using plain & in company names

What the reader might do:

<p>Johnson & Johnson</p>

Why it breaks: the browser may expect an entity after &.

Corrected approach:

<p>Johnson &amp; Johnson</p>

Troubleshooting

If the symbol does not appear, check that the entity starts with & and ends with ;.

If the page HTML looks broken, replace raw < or > characters with < and >.

If the wrong accent appears, verify the correct named entity or use the numeric code instead.

If the symbol still fails, confirm the page uses UTF-8 encoding.

Quick recap

• Use HTML entities for reserved or special characters
• Start with & and end with ;
• Use common entities like <, >, and &
• Use named entities for symbols like © and £
• Replace raw < and & characters when they should display as text