HTML Entities

Imagine you are writing a tutorial about HTML, and you want to show your readers the paragraph tag on the page. You type this:

<p>Use the <p> tag to create a paragraph.</p>

...and the browser shows "Use the tag to create a paragraph." The <p> in the middle vanished! The browser thought you were starting a new paragraph element, not trying to display the characters themselves.

This is exactly the problem HTML entities solve. They let you display characters that either have a special meaning in HTML, or that are hard to type on a keyboard, in a completely safe way.

Quick definition

An HTML entity (also called a character reference) is a special code that starts with an ampersand (&) and ends with a semicolon (;). The browser replaces it with the character it represents, for example © becomes the copyright symbol.

Anatomy of an Entity

Every entity follows the same simple pattern:

There are two ways to write an entity, and both give the same result.

📛 Named entity

A named entity uses a short, memorable name:

<p>&copy; 2026 CodeHarborHub</p>

The name copy is easy to remember, which makes named entities the most readable option.

🔢 Decimal number

A decimal numeric reference uses a # followed by the character's Unicode number:

<p>&#169; 2026 CodeHarborHub</p>

The number 169 is the Unicode code point for the copyright symbol.

🔣 Hexadecimal number

A hexadecimal numeric reference uses #x followed by the code point in hex:

<p>&#xA9; 2026 CodeHarborHub</p>

A9 in hexadecimal is 169 in decimal, so this is the same character again.

All three of those paragraphs display the same thing:

http://127.0.0.1:5500/index.html

© 2026 CodeHarborHub

© 2026 CodeHarborHub

© 2026 CodeHarborHub

Which style should you use?

Use named entities whenever one exists, because they are readable. Fall back to numeric references for characters that do not have a memorable name.

The Five Reserved Characters

Some characters have a special job in HTML syntax. If you want to show them as ordinary text, you must escape them with an entity. Otherwise, the browser will misread your code.

Character	Entity name	Numeric	Why it is reserved
<	&lt;	&#60;	Starts a tag
>	&gt;	&#62;	Ends a tag
&	&amp;	&#38;	Starts an entity
"	&quot;	&#34;	Wraps attribute values
'	&apos;	&#39;	Wraps attribute values

Remember the names

lt means less than, gt means greater than, and amp is short for ampersand. Once you know that, the entities are easy to recall.

Fixing our opening problem

Now we can display the paragraph tag properly by escaping the angle brackets:

<p>Use the &lt;p&gt; tag to create a paragraph.</p>

http://127.0.0.1:5500/index.html

Use the <p> tag to create a paragraph.

The browser now displays the characters instead of trying to interpret them as a tag.

Which reserved characters really need escaping?

You do not always have to escape all five. Here is the practical guide:

Character	In normal text	Inside an attribute value
<	Always escape	Best to escape
&	Always escape	Always escape
>	Optional, but recommended	Optional
"	Safe to type directly	Escape when the value uses double quotes
'	Safe to type directly	Escape when the value uses single quotes

<!-- Quotes inside an attribute value need escaping -->
<p title="She said &quot;hello&quot; to me">Hover over this text</p>

The Non-Breaking Space

Probably the most famous entity of all is  , the non-breaking space. You met it briefly in the Whitespace lesson. It creates a space that:

• Is never collapsed with neighboring spaces.
• Prevents a line break between the two words it joins.

Regular spaces

<p>Hello          World</p>

Ten spaces collapse into one, so the result is Hello World.

With nbsp

<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World</p>

Each   survives, so the gap is visibly wider.

http://127.0.0.1:5500/index.html

Hello World

Hello     World

The right use of non-breaking spaces

Rather than using   to push things around, use it to keep two pieces of text together on the same line:

<p>The distance was 10&nbsp;km.</p>
<p>Call Dr.&nbsp;Sharma tomorrow.</p>
<p>Buy it for $5&nbsp;USD.</p>

This stops a number from being separated from its unit at the end of a line, which looks sloppy and can be confusing.

Not a layout tool

Using long chains of   to indent text or align columns is a common beginner habit. It is fragile and hurts accessibility. Use CSS padding and margin for layout instead.

A Handy Reference of Common Entities

You do not need to memorize these. Bookmark this section and come back whenever you need a symbol.

✍️ Text and Legal

Character	Entity	Description
©	©	Copyright
®	®	Registered trademark
™	™	Trademark
§	§	Section sign
¶	¶	Paragraph sign
…	…	Horizontal ellipsis
–	–	En dash
—	—	Em dash

💰 Currency

Character	Entity	Description
€	€	Euro
£	£	Pound sterling
¥	¥	Yen
¢	¢	Cent
₹	₹	Indian rupee (numeric only)

➗ Math

Character	Entity	Description
×	×	Multiplication
÷	÷	Division
±	±	Plus or minus
≠	≠	Not equal
≤	≤	Less than or equal
≥	≥	Greater than or equal
°	°	Degree

➡️ Arrows and Shapes

Character	Entity	Description
←	←	Left arrow
→	→	Right arrow
↑	↑	Up arrow
↓	↓	Down arrow
♥	♥	Heart
★	★	Black star (numeric only)

Here is a quick preview of several entities working together on a page:

http://127.0.0.1:5500/index.html

© 2026 CodeHarborHub — All rights reserved™

Price: £25 – £40

Temperature: 24°C

5 × 4 = 20, and 20 ÷ 4 = 5

Next → ♥ ★

Entities and UTF-8: Do You Still Need Them?

In the earlier days of the web, developers had to use entities for nearly every accented letter or symbol, because character encodings were limited. Today, things are much easier.

If your page declares <meta charset="UTF-8" /> (which every page in this tutorial does), you can type most characters directly into your HTML file:

<p>© 2026 — Café, naïve, and 日本語 all work fine.</p>

So when do you still need entities?

Situation	Entity needed?
Showing <, > or & as visible text	Yes, always
A non-breaking space	Yes
Invisible or easily confused characters	Recommended, for clarity
Accented letters like é and ü in a UTF-8 file	No, type directly
Symbols like © and € in a UTF-8 file	Optional, either works

You will learn how encoding works in the Character Encoding lesson.

Entities for Emoji and Rare Symbols

Any Unicode character can be written as a numeric reference, even ones without a named entity, such as emoji.

<p>Decimal: &#128512;</p>
<p>Hex: &#x1F600;</p>

http://127.0.0.1:5500/index.html

Decimal: 😀

Hex: 😀

Finding a character's code

Search for the character on a Unicode reference site, or open your browser's DevTools console and type "😀".codePointAt(0) to get its decimal number. Add .toString(16) to convert it to hexadecimal.

Why Entities Matter for Security

Entities are not just about convenience. They play a key role in protecting websites from a serious attack called Cross-Site Scripting (XSS).

Imagine a comment box where a visitor types this:

<script>stealPasswords()</script>

If a website inserts that text directly into a page without escaping it, the browser would treat it as a real <script> element and run it. But if the site converts the special characters into entities first:

<script>stealPasswords()</script>

...the browser just displays it harmlessly as text.

A rule for the future

Whenever you display text that a user typed, always escape it first. Modern frameworks and templating tools usually do this automatically, but understanding why is what keeps you safe when they do not.

Common Entity Mistakes

1. Forgetting the semicolon

<!-- ❌ Risky: some browsers guess, others do not -->
<p>&copy 2026</p>

<!-- ✅ Correct -->
<p>&copy; 2026</p>

Browsers forgive some missing semicolons for older entities, but the behavior is inconsistent. Always include it.

2. Getting the capitalization wrong

Entity names are case-sensitive. © works, but &Copy; does not display the copyright symbol, and & behaves differently from & in some contexts. Use the exact lowercase name unless the reference says otherwise.

3. Leaving a bare ampersand in text or URLs

<!-- ❌ Bare ampersand -->
<p>Salt & Pepper</p>
<a href="/search?q=html&lang=en">Search</a>

<!-- ✅ Escaped -->
<p>Salt &amp; Pepper</p>
<a href="/search?q=html&amp;lang=en">Search</a>

Browsers usually cope, but an unescaped ampersand followed by letters can be misread as the start of an entity. Escape it every time.

4. Using nbsp to fake spacing

Stacking many non-breaking spaces to indent or align content breaks on different screens and confuses assistive technology. Use CSS instead.

5. Double-escaping

<!-- ❌ Shows the text "&lt;" literally on the page -->
<p>&amp;lt;p&amp;gt;</p>

<!-- ✅ Shows "<p>" on the page -->
<p>&lt;p&gt;</p>

Escaping something that is already escaped displays the entity code instead of the character.

Try It Yourself

This snippet is supposed to show a line of HTML code and a price, but the browser mangles it. Can you fix it?

broken-entities.html

<p>To make text bold, write <b>bold</b> in your HTML.</p>
<p>Fish & Chips costs £5 ~ £8</p>
<p>Copyright 2026 CodeHarborHub</p>

👀 Click to reveal the solution

fixed-entities.html

<p>To make text bold, write &lt;b&gt;bold&lt;/b&gt; in your HTML.</p>
<p>Fish &amp; Chips costs &pound;5 &ndash; &pound;8</p>
<p>&copy; 2026 CodeHarborHub</p>

1. The angle brackets around b had to be escaped, or the browser would turn "bold" into actual bold text and hide the tags.
2. The bare & became &.
3. The pound signs and the range dash can be entities, and the copyright symbol got its proper © entity.

Quick Recap

• An entity starts with & and ends with ;, and the browser replaces it with a character.
• Entities come as named (©), decimal (©), or hexadecimal (©) forms.
• The reserved characters <, >, &, ", and ' must be escaped when you want to show them as text.
•   is a non-breaking space, best used to keep related words together on one line.
• With UTF-8, most symbols and accented letters can be typed directly, but reserved characters still need entities.
• Escaping user-provided text with entities helps protect your site against XSS attacks.
• Always include the semicolon, and beware of double-escaping.

Frequently Asked Questions

What is an HTML entity?

An HTML entity is a code beginning with an ampersand and ending with a semicolon, such as < or ©, that the browser replaces with the character it represents. Entities let you display reserved or hard-to-type characters safely.

How do I display the less-than and greater-than signs in HTML?

Use < for the less-than sign and > for the greater-than sign. Typing the raw characters can cause the browser to think you are starting or ending a tag.

How do I write an ampersand in HTML?

Use &. This applies in normal text and also inside URLs in attributes, such as href="/page?a=1&b=2".

What is the difference between a named and a numeric entity?

A named entity uses a memorable name, like ©. A numeric entity uses the character's Unicode number, like © (decimal) or © (hexadecimal). Both produce the same character.

Do I still need entities if my page uses UTF-8?

Only for reserved characters like <, >, and &, and for the non-breaking space. Most other symbols and accented letters can be typed directly into a UTF-8 file.

Are HTML entities case-sensitive?

Yes. Use the exact capitalization from a reference list. For most common entities, that means lowercase, such as & and  .

Test Your Understanding

1. What two characters do all HTML entities start and end with?
2. Which entity would you use to display a less-than sign as visible text?
3. What is the difference between © and ©?
4. When is   a good choice, and when is it a poor one?
5. How do entities help protect a website from XSS attacks?