HTML Entities and Special Characters Explained

Introduction

HTML pages often include characters that need special handling.

For example, you may want to display a copyright symbol, an ampersand, angle brackets, quotation marks, currency symbols, or a space that should not break across two lines.

HTML entities are one way to write these special characters safely in your HTML code.

For example:

1©

displays as:

1©

Another example:

1&

displays as:

1&

HTML entities are useful when a character has special meaning in HTML, when a symbol is difficult to type, or when you need more control over spacing.

What Is an HTML Entity?

An HTML entity is a special code that represents a character.

Most named entities start with an ampersand:

1&

and end with a semicolon:

1;

For example:

1©

This is the HTML entity for the copyright symbol.

When the browser reads this code, it displays:

1©

The entity is what you write in the HTML.

The character is what the browser displays.

Why HTML Entities Are Useful

HTML entities are useful for several reasons.

Some characters have special meaning in HTML.

For example, the less-than sign is used to start HTML tags:

1<

If you want to display a less-than sign as text, you should write:

1<

Some characters may be hard to type on a keyboard.

For example, the copyright symbol can be written as:

1©

Some spacing needs special control.

For example, a non-breaking space can be written as:

1 

HTML entities help the browser understand whether a character is part of the HTML code or something that should be displayed to the user.

The Copyright Entity: ©

The copyright entity is:

1©

It displays as:

1©

This is often used in website footers.

For example:

1<footer>2  <p>© 2026 Bright Web Studio. All rights reserved.</p>3</footer>

The browser displays:

1© 2026 Bright Web Studio. All rights reserved.

You can also type the copyright symbol directly:

1<p>© 2026 Bright Web Studio</p>

Both can work. However, using © is common in HTML because it is easy to recognise and reliable in code.

The Ampersand Entity: &

The ampersand entity is:

1&

It displays as:

1&

This is important because the ampersand is used to start HTML entities.

For example, this entity:

1©

starts with an ampersand.

If you want to display a normal ampersand in text, it is safest to write:

1&

For example:

1<p>Design & Development</p>

The browser displays:

1Design & Development

Why Ampersands Need Care

In many cases, a browser may still display a plain ampersand correctly.

For example:

1<p>Design & Development</p>

may display as expected.

However, it is better practice to write:

1<p>Design & Development</p>

This avoids confusion because the ampersand has a special role in HTML.

This is especially important in URLs or text that contains query strings.

For example:

1<a href=”search.html?category=html&level=intro”>Search HTML lessons</a>

In the browser, the URL still works with an ampersand between the parameters.

In the HTML source code, & makes the ampersand safe and clear.

The Less-Than Entity: <

The less-than entity is:

1<

It displays as:

1<

This is very useful when writing tutorials about HTML.

For example, if you want to show the <p> tag as text, you should not write this directly inside a paragraph:

1<p>The <p> tag creates a paragraph.</p>

The browser may treat the second <p> as a real HTML tag.

Instead, write:

1<p>The <p> tag creates a paragraph.</p>

The browser displays:

1The <p> tag creates a paragraph.

The Greater-Than Entity: >

The greater-than entity is:

1>

It displays as:

1>

It is often used with < when displaying HTML tags as text.

For example:

1<p>Use <h1> for the main heading of a page.</p>

The browser displays:

1Use <h1> for the main heading of a page.

The less-than sign starts the displayed tag.

The greater-than sign ends the displayed tag.

Together, < and > allow you to show HTML code without the browser treating it as real markup.

Displaying HTML Code as Text

HTML entities are especially useful when displaying code examples.

For example, to show this code to the user:

1<p>This is a paragraph.</p>

you need to write it like this in your HTML:

1<pre><code><p>This is a paragraph.</p></code></pre>

The browser then displays the code instead of turning it into a real paragraph.

This is common in HTML tutorials, documentation, and learning resources.

Non-Breaking Spaces:  

The non-breaking space entity is:

1 

It displays as a space, but it prevents a line break at that point.

A normal space allows text to break across lines.

A non-breaking space keeps two pieces of text together.

For example:

1<p>Price: £10 per month</p>

This helps keep parts of the phrase together instead of allowing awkward line breaks.

Another example:

1<p>Chapter 1</p>

This keeps “Chapter” and “1” together on the same line.

When to Use a Non-Breaking Space

Use   when two pieces of text should stay together.

Common examples include:

1names and initials2numbers and units3short labels and values4currency amounts5dates or references

For example:

1<p>Dr Smith</p>

1<p>10 kg</p>

1<p>£25 per hour</p>

1<p>Section 4</p>

In each example, the non-breaking space helps prevent an awkward line break.

Do Not Use   for Layout Spacing

A common mistake is using lots of non-breaking spaces to push content across the page.

Avoid this:

1<p>Home     About     Contact</p>

This is not a good way to create layout spacing.

Use proper HTML and CSS instead:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</nav>

1nav {2  display: flex;3  gap: 24px;4}

Use   for non-breaking text, not visual layout.

Common Symbol Entities

HTML includes many named entities for symbols.

For example:

1©

displays:

1©

1®

displays:

1®

1™

displays:

1™

1£

displays:

1£

1€

displays:

1€

1—

displays:

1—

1–

displays:

1–

These entities can be useful when you need symbols that are not always easy to type.

Common Entity Reference Table

Here are some useful HTML entities:

1Entity      Displays as     Meaning2©      ©               copyright3&       &               ampersand4<        <               less-than sign5>        >               greater-than sign6       space           non-breaking space7®       ®               registered trademark8™     ™               trademark9£     £               pound sign10€      €               euro sign11—     —               em dash12–     –               en dash13"      ”               quotation mark14&apos;      ‘               apostrophe

The most important ones for many HTML learners are:

1&

1<

1>

1 

and:

1©

These appear often in real HTML code.

Named Entities and Numeric Entities

Many characters can be written as named entities or numeric entities.

A named entity uses a readable name.

For example:

1©

A numeric entity uses a number.

For example:

1©

Both display:

1©

Another example:

1£

and:

1£

both display:

1£

Named entities are often easier to read when they are available.

Numeric entities are useful when a named entity is not available or when you are working with a specific character code.

Using Symbols Directly

Modern HTML pages commonly use UTF-8 character encoding.

That means many symbols can be typed directly into the HTML file.

For example:

1<p>© 2026 Bright Web Studio</p>

1<p>Price: £25</p>

1<p>Temperature: 20°C</p>

These can work correctly when the page uses UTF-8.

A typical HTML document includes:

1<meta charset=”UTF-8″>

inside the <head>:

1<head>2  <meta charset=”UTF-8″>3  <title>My Page</title>4</head>

Using UTF-8 makes it easier to display a wide range of characters and symbols.

Entities vs Direct Characters

In modern HTML, both of these can work:

1<p>© 2026 Bright Web Studio</p>

and:

1<p>© 2026 Bright Web Studio</p>

Both display:

1© 2026 Bright Web Studio

So when should you use an entity?

Use entities when the character has special meaning in HTML, such as:

1&

1<

1>

Use entities when they make the code clearer or easier to type, such as:

1©

Use direct characters when they are easy to type, readable, and your document uses UTF-8.

Entities Must End with a Semicolon

HTML entities should end with a semicolon.

Correct:

1©

Incorrect:

1&copy

Correct:

1&

Incorrect:

1&amp

Some browsers may still understand some entities without the semicolon, but you should not rely on that.

Always include the semicolon.

It makes the code clearer and avoids parsing problems.

Entities Are Case-Sensitive

Many named entities are case-sensitive.

That means uppercase and lowercase letters can matter.

For example:

1©

is the standard named entity for the copyright symbol.

Writing the wrong case may not work as expected.

As a habit, copy entity names carefully and keep them consistent.

Using Entities in Attributes

HTML entities can also appear inside attribute values.

For example:

1<img src=”images/logo.png” alt=”Bright Web Studio & Design logo”>

The alt text will be understood as:

1Bright Web Studio & Design logo

Another example:

1<a href=”search.html?topic=html&level=intro”>HTML introduction search</a>

The href value uses & to represent the ampersand safely.

Entities are not only for visible text between tags. They can also be useful inside attributes.

A Complete Example

Here is a complete HTML page using several entities and special characters:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>HTML Entities Example</title>6</head>7<body>8 9  <h1>HTML Entities</h1>10 11  <p>© 2026 Bright Web Studio. All rights reserved.</p>12 13  <p>Design & Development services for small businesses.</p>14 15  <p>The <p> element creates a paragraph.</p>16 17  <p>Use <img> to add an image to a page.</p>18 19  <p>Price: £25 per hour.</p>20 21  <p>Registered trademark symbol: ®</p>22 23</body>24</html>

This example uses:

1©

for the copyright symbol,

1&

for the ampersand,

1<

and:

1>

to display HTML tags,

1 

to keep text together,

and:

1®

for the registered trademark symbol.

Common Mistake: Forgetting to Escape Angle Brackets

If you are trying to display HTML code, do not write the tags directly.

Incorrect:

1<p>The <img> element adds an image.</p>

Better:

1<p>The <img> element adds an image.</p>

The first example may be interpreted as actual HTML.

The second example displays the tag as text.

Common Mistake: Forgetting &

Ampersands should usually be escaped as & in HTML text and attributes.

Less careful:

1<p>Design & Development</p>

Better:

1<p>Design & Development</p>

This is clearer because & starts HTML entities.

It is especially important in URLs:

1<a href=”search.html?topic=html&level=intro”>Search</a>

Common Mistake: Using   for Indentation

Do not use non-breaking spaces to indent text or create columns.

Avoid:

1<p>    Indented text</p>

Better:

1<p class=”indented-text”>Indented text</p>

1.indented-text {2  margin-left: 2rem;3}

Use CSS for visual spacing.

Use   only when text should not break across lines.

Common Mistake: Missing the Semicolon

Incorrect:

1&copy

Correct:

1©

Incorrect:

1&lt

Correct:

1<

The semicolon is part of the entity syntax.

Always include it.

Common Mistake: Overusing Entities

You do not need to replace every symbol with an entity.

For example, if your page uses UTF-8, this is usually fine:

1<p>Price: £25</p>

You could also write:

1<p>Price: £25</p>

Both can work.

The most important entities to remember are the ones that prevent HTML confusion:

1&

1<

1>

and the ones you use often, such as:

1©

and:

1 

Best Practices

Use © for the copyright symbol when writing website footers.

Use & when you need to display an ampersand safely.

Use < and > when displaying HTML tags as text.

Use   only when text should stay together on one line.

Do not use   for layout spacing or indentation.

Always include the semicolon at the end of an entity.

Use UTF-8 for modern HTML pages.

Use direct symbols when they are readable, easy to type, and safe.

Use entities when the character has special meaning in HTML or improves clarity.

Summary

HTML entities are special codes used to display characters safely in HTML.

For example:

1©

displays:

1©

1&

displays:

1&

1<

displays:

1<

1>

displays:

1>

1 

creates a non-breaking space.

Use entities when characters have special meaning in HTML, when symbols are hard to type, or when you need to control whether text can break across lines.

For modern HTML, make sure your page uses UTF-8:

1<meta charset=”UTF-8″>

Once you understand entities, it becomes easier to display symbols, write clear code examples, and avoid confusing the browser with characters that have special meaning in HTML.