HTML Entities: Special Characters in Your Content

When you first start writing HTML, you quickly run into a problem: how do you show special characters like ©, <, > or emojis without breaking your page?

That’s where HTML entities come in. In this article, you’ll learn what HTML entities are, why they matter, and how to use them to safely display special characters in your web content.

By the end, you’ll be able to:

Show symbols (like ©, ®, €, ™) correctly
Display characters that normally belong to HTML (like < and >)
Avoid weird bugs caused by invisible characters

What is an HTML Entity?

An HTML entity is a special code that represents a character in your HTML page.

It usually looks like this:

&amp;something;

It always:

Starts with &
Ends with ;

There are two main types:

Named entities – easy to read, like & or ©
Numeric entities – use numbers, like © or 😀

Both types display the same character on the page; they’re just written differently in your code.

Why Do We Need HTML Entities?

HTML uses some characters for its own structure. For example:

< starts a tag
> ends a tag
& starts an entity

If you just type these characters normally, the browser might think you’re writing HTML, not text.

For example, this HTML:

<p>2 < 5</p>

might confuse the browser, because it thinks < 5 could be part of a tag.

To fix this, we write:

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

Now the browser knows you want to show the < symbol, not use it as HTML.

The Basic Must-Know HTML Entities

Here are some of the most commonly used entities you’ll see all the time:

Character	Named Entity	Numeric Entity	Description
`&`	`&`	`&`	Ampersand
`<`	`<`	`<`	Less-than sign
`>`	`>`	`>`	Greater-than sign
`"`	`"`	`"`	Double quote
`'`	`'`	`'`	Apostrophe/quote

You’ll use these a lot when writing text that includes symbols, code examples, or quotes inside attributes.

Example 1: Showing HTML Code as Text

Let’s say you want to teach someone HTML and show <p>Hello</p> on your page, as text, not as a real paragraph.

If you write this:

<p><p>Hello</p></p>

The browser will actually see nested paragraph tags, not text.

Correct version with entities

<!-- Example 1: Showing HTML code as text -->
<p>Here is a paragraph tag: &lt;p&gt;Hello&lt;/p&gt;</p>

What’s happening?

< becomes <
> becomes >

What you’ll see in the browser:

Here is a paragraph tag: <p>Hello</p>

The code remains visible as text instead of being treated as real HTML.

Try it yourself:

Change Hello to your name
Add another example like <h1>Title</h1>

Example 2: Adding Symbols and Copyright Notices

Web pages often use symbols like © (copyright) or ® (registered trademark). These might work if you copy-paste them, but using entities is safer and more reliable.

Here’s how to add a simple footer with a copyright symbol.

<!-- Example 2: Using © and ™ in a footer -->
<footer>
  <p>&copy; 2025 My Awesome Site &ndash; All rights reserved &trade;</p>
</footer>

What’s happening?

© → © (copyright)
– → – (short dash, called an "en dash")
™ → ™ (trademark)

What you’ll see in the browser:

© 2025 My Awesome Site – All rights reserved ™

Try it yourself:

Change the year
Replace ™ with ® to get ®

Here are a few more handy entities:

Symbol	Entity	Meaning
©	`©`	Copyright
®	`®`	Registered mark
™	`™`	Trademark
€	`€`	Euro currency
£	`£`	Pound sterling
¥	`¥`	Yen symbol

Example 3: Using Entities Inside Attributes

HTML attributes often use quotes. For example:

<a href="#">Click "here"</a>

This usually works, but sometimes you need to escape quotes to avoid confusing the browser, especially in more complex situations.

Here’s a safe way using " for double quotes.

<!-- Example 3: Escaping quotes inside an attribute -->
<a href="#" title="Click &quot;here&quot; to learn more">
  Hover over this link
</a>

What’s happening?

The title attribute is wrapped in double quotes: "..."
Inside it, we want to show actual double quotes around the word here
" turns into " in the browser

What you’ll see when you hover:

Click "here" to learn more

Try it yourself:

Change the word here to another word
Add an apostrophe too, using ' if needed

Example 4: Emojis and Numeric Entities

You can also use HTML entities to show emojis using numeric codes.

Here’s a fun example:

<!-- Example 4: Using numeric entities for emojis -->
<p>Welcome to my site! &#128512;</p>   <!-- 😀 grinning face -->
<p>We love HTML entities &#10084;&#65039;</p> <!-- ❤️ red heart -->

What’s happening?

😀 displays 😀
❤️ together display ❤️

Numeric entities are useful when:

There is no simple named entity
You’re copying character codes from a reference table

Try it yourself:

Search for "emoji HTML code" online
Replace the numbers with codes for your favorite emojis

Named vs Numeric: Which Should You Use?

For most beginners, named entities are easier to remember:

€ is more readable than €

However, numeric entities are helpful when:

No named version exists for a character
You’re using many emojis or rare symbols

You can safely mix both types in the same page.

Common Gotchas and How to Avoid Them

1. Don’t double-escape characters

If you write:

<p>Use &amp;lt; and &amp;gt; to show angle brackets.</p>

You’ll actually see this:

Use < and > to show angle brackets.

Why? Because &lt; becomes <, not <.

You usually only want one level of entity, like this:

<p>Use &lt; and &gt; to show angle brackets.</p>

2. Always escape `<`, `>`, and `&` in code examples

Any time you show HTML as text on a page, remember to:

Replace < with <
Replace > with >
Replace & with &

This keeps your examples safe and visible.

Try It Yourself: Mini Practice Exercise

Create a simple HTML file and add the following:

A heading that says: Learning & Loving HTML (make sure the & shows correctly)
A paragraph that shows this exact text: <div>Not really a div</div>
A footer that says: Made with ♥ in 2025 using an entity for the heart

You might end up with something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML Entities Practice</title>
</head>
<body>
  <h1>Learning &amp; Loving HTML</h1>

  <p>Here is fake HTML: &lt;div&gt;Not really a div&lt;/div&gt;</p>

  <footer>
    <p>Made with &#10084; in 2025</p>
  </footer>
</body>
</html>

Open this file in your browser and check that everything looks right. If it does, that’s a big win—you’re successfully using HTML entities.

Quick Recap and What’s Next

Here’s what you learned:

HTML entities let you safely show special characters in your content.
They always start with & and end with ;.
Use entities for characters HTML uses itself: <, >, &, quotes.
Use numeric entities when there’s no named version or for emojis.

Learning this may feel a bit strange at first, but you’ve just unlocked a powerful tool for writing clean, reliable HTML.

From here, you can:

Explore more entities on reference sites like MDN or W3Schools
Practice by adding symbols, emojis, and code examples to your own pages

Every time your special characters show up correctly, that’s proof you’re thinking like a web developer. Keep experimenting and building!

Mudzinga