Home » All Lessons » HTML Entities: Special Characters

LESSON 2.7

HTML Entities: Special Characters

Display symbols your keyboard can't type

Learn how to use HTML entities to show copyright symbols, em dashes, angle brackets, and other special characters that browsers would otherwise misread.

💡 The Concept

What Are HTML Entities?

HTML special characters — symbols like copyright marks, em dashes, and accented letters — cannot simply be typed directly into your HTML. There are two main reasons you’ll reach for HTML entities:

Reserved characters. Characters that HTML uses for its own syntax, like <, >, and &. You need entities to display these literally on a page.
Special characters. Symbols that aren’t on a standard keyboard, like ©, ™, £, or —. Using entities ensures they display correctly across all browsers and character encodings.

&copy;   → ©  (copyright)
&trade;  → ™  (trademark)

The Most Common HTML Entities

Here’s a handy reference table for the entities you’ll use most often:

Character	Named Entity	Description
&	`&`	Ampersand
<	`<`	Less-than sign
>	`>`	Greater-than sign
©	`©`	Copyright symbol
®	`®`	Registered trademark
™	`™`	Trademark symbol
	` `	Non-breaking space
—	`—`	Em dash
–	`–`	En dash

No need to memorize any of these. When you need the HTML Entity, simply use a search engine to find the HTML entity code you need with a query like this: “HTML entity for copyright symbol”.

Practical Examples

Adding a Copyright Notice

A copyright notice in the footer of a page is one of the most common uses of HTML entities:

<footer>
  <small>&copy; 2024 My Awesome Website. All rights reserved.</small>
</footer>

Using a Non-Breaking Space

A regular space in HTML can be collapsed or ignored. A non-breaking space ( ) forces the browser to keep a space and prevents a line break between two words:

<p>Call us:&nbsp;555-1234</p>
<p>10&nbsp;kg</p>

This is useful when you don’t want a phone number or measurement to wrap onto two lines awkwardly.

Curly Quotes for Polished Typography

Instead of straight “dumb” quotes, use curly quotes for a more professional look:

<blockquote>
  <p>&ldquo;The best way to learn web development is to build things.&rdquo;</p>
</blockquote>

Result: “The best way to learn web development is to build things.”

🎬 Video Demonstration

This video demonstrates how to add a copyright symbol and other special characters to a web page using HTML entities.

Exercise: Try It Yourself

💡 If you are making a website template: Add the © copyright entity to the footer of your website template. See the full website template guide for reference.

Step 2: If you are working in your template, place it inside your <footer> element and wrap it in <small> tags.

Step 3: Save and view the result in your browser, or click Run in JSFiddle.

Your code should look like this, but with your name and the correct year.

Summary

HTML entities are short codes that let you display special characters safely in your web pages. They start with an ampersand (&) and end with a semicolon (;). You’ll use them to:

Display reserved HTML characters like &, <, and > as visible text
Add symbols like ©, ™, and — that aren’t on a standard keyboard
Control spacing with

Named entities like © are readable and easy to remember. No need to memorize them all — when you need one, a quick search for something like “HTML entity for copyright symbol” will get you the answer in seconds.

❓ Frequently Asked Questions

Why do I need an entity to display a less-than or greater-than sign?

The less-than and greater-than signs are part of HTML syntax. When a browser sees a less-than sign, it assumes the start of a tag. If you type one directly into your content, the browser may misread everything that follows as a tag name and hide it from the page. Using < and > tells the browser to display the character as visible text rather than treating it as markup.

Why does typing an ampersand directly sometimes cause problems?

The ampersand is the character that signals the start of an HTML entity. When a browser sees &, it expects an entity name or number to follow, ending with a semicolon. If you type & directly and it is not followed by a valid entity, some browsers will display it incorrectly or flag it as an error. Using & ensures the ampersand always displays as the visible character you intend.

What is a non-breaking space and when would I use one?

HTML collapses any number of spaces in your code down to a single space on the page. A non-breaking space ( ) is a special space character that the browser will not collapse and will not use as a line-break point. Use it when you want two words to stay together on the same line, like a phone number, a measurement, or a name where breaking across lines would look awkward.

What is the difference between an em dash and an en dash?

An em dash is the longer of the two. It is used as a strong pause or interruption in a sentence, similar to how a colon or parentheses might be used. An en dash is shorter and is typically used for ranges, such as page numbers (10-20) or years (2020-2025). The names come from typography: an em dash is roughly the width of the letter M, and an en dash is roughly the width of the letter N.

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

With UTF-8 declared in your head element, your browser can display most special characters even if you type them directly in your editor. However, HTML entities are still necessary for reserved characters like the ampersand and the less-than sign, since those are part of HTML syntax itself. For symbols like the copyright sign, using the named entity is a reliable habit that ensures correct display regardless of how the file is saved or transferred.

★ Key Takeaways

Some characters cannot be typed directly into HTML without causing problems. This lesson introduced HTML entities, which are codes you use for symbols like copyright signs, arrows, and accented letters. Next, you will learn about the anchor tag, which is how you create links in HTML. Links are what connects the whole web together.

Next Lesson: HTML Links: Mastering the Anchor Tag

← Back to HTML Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.