Some characters have a special job in HTML. If you type <p> in your text, the browser thinks it's a tag and doesn't display it. Character entities are short codes that let you show these characters, along with many symbols that aren't on your keyboard.
You'll need entities most often when writing about code, as this site does on every page, and for a few everyday symbols such as © and the non-breaking space. Once you know the pattern, they're easy to remember.
Reserved characters you must escape
| Show | Write | Name |
|---|---|---|
| < | < | less than |
| > | > | greater than |
| & | & | ampersand |
| " | " | double quote (inside attributes) |
| ' | ' | apostrophe |
Every entity starts with & and ends with ;. Writing <p> displays <p> on the page instead of creating a paragraph.
The ampersand needs special care because it starts every entity. In text like "Fish & Chips" browsers usually cope, but writing & is always correct and avoids surprises in links and attributes.
Useful symbols and their entities
| Symbol | Entity | Symbol | Entity | |
|---|---|---|---|---|
| © | © | € | € | |
| ® | ® | £ | £ | |
| ™ | ™ | → | → | |
| ° | ° | ← | ← | |
| × | × | ♥ | ♥ | |
| · | · | … | … |
You can also use numbers instead of names: ★ displays ★. Every character has a number, so numeric entities work even for symbols that don't have a name.
The non-breaking space
is a space that won't break onto a new line. Use it to keep two things together, such as 10 km or Mr Smith, so a number is never left alone at the start of the next line.
Don't use lots of non-breaking spaces to push content around the page. Spacing and alignment are CSS's job, and a row of breaks as soon as the screen size changes.
Emoji and accented letters
With <meta charset="UTF-8"> in the head, you can type emoji and accented letters directly into your HTML: é, ñ, ü, 🍕. Entities are only required for the reserved characters. For everything else, typing the character itself keeps your code easier to read.
Entities in attributes and links
Entities work inside attribute values too, which matters when a value contains quotes or ampersands:
<img src="sign.jpg" alt="A sign saying "Back in 5 minutes"">
<a href="/search?q=salt&pepper">Salt & pepper grinders</a>- Inside a double-quoted attribute, write a double quote as
", or switch to single quotes around the value. - An
&in a URL insidehrefshould be written as&in the HTML. The browser turns it back into&when following the link, and validators stop warning about it. - In JavaScript, setting
textContentnever needs entities: the browser treats everything as plain text. Entities are only for text written directly in HTML or inserted withinnerHTML.
Named, decimal and hex references
Every character can be written three ways. The copyright sign, for example, is © (named), © (decimal) and © (hexadecimal). Named entities are the easiest to read, but only some characters have names; numeric references work for every Unicode character. With UTF-8 declared, typing the character itself, ©, is usually the clearest choice, and entities remain essential only for <, >, & and quotes in attributes.
HTML Entities Syntax
Entity syntax
&name; <!-- e.g. © -->
&#number; <!-- e.g. © -->HTML Entities Summary
- Entities start with
&and end with;. - Use
<,>and&to display <, > and & as text. - Symbols such as © and € have named entities; any character can use a numeric one.
keeps two words on the same line but shouldn't be used for layout.- With UTF-8, you can type emoji and accented letters directly.
HTML Entities Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Showing code in a lesson
How do you write about HTML on a web page? With entities!
<p>To make a paragraph, write <p>Hello</p>.</p>
<p>Fish & chips costs £8.50.</p>
<p>© 2026 Sprout Kitchen™</p>Line-by-line explanation
- Line 1
<and>show the angle brackets instead of creating a real paragraph tag. - Line 2
&shows an ampersand;£the pound sign. - Line 3Copyright and trademark symbols.
Symbols, arrows and emoji
<p>Today: 21°C · sunny ☀️</p>
<p>Next step → Checkout</p>
<p>Rating: ★★★★☆</p>
<p>Distance: 5 km (these two never split)</p>
<p>Made with ♥ and 🌱</p>Line-by-line explanation
- Line 1
°for degrees,·for a small dot separator, plus an emoji typed directly. - Line 3Numeric entities for filled ★ and empty ☆ stars.
- Line 4
glues "5" and "km" together.
Common HTML Entities Mistakes
Writing raw tags as text
<p>Use the <br> tag for line breaks.</p><p>Use the <br> tag for line breaks.</p>The first version actually inserts a line break instead of showing the text "<br>".
Forgetting the semicolon
<p>Tom & Jerry © 2026</p><p>Tom & Jerry © 2026</p>Some entities work without ; by luck, many don't. Always finish with a semicolon.
HTML Entities in Real Projects
Entities you'll actually use
Footers use ©. Prices use currency symbols. Tutorials (like this one!) use < and > constantly to show code. And when you insert user-written text into a page with JavaScript, turning < into < (called escaping) is what stops people from injecting malicious HTML.
HTML Entities Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Show the text <h1> on the page instead of creating a heading.
<p>The biggest heading is h1.</p>< and > display angle brackets as text.Which entity shows an ampersand (&)?
& is the ampersand.What does do?
The footer should show the text <footer> and a copyright symbol, but the code is wrong. Fix it.
<p>This text lives in a <footer> element.</p>
<p>(c) 2026 Bloom Studio</p>- The first paragraph shows "<footer>" as text
- No real footer element was created
- The copyright symbol is shown
HTML Entities Quiz
3 questions to check what you learned.
Every named entity starts with which character?
- #
- &
- <
- $
With
<meta charset="UTF-8">, can you type emoji directly in HTML?- No, you must use entities
- Only in headings
- Yes
- Only in comments
What is
©?- An error
- A colour code
- A comment
- A numeric entity (it's ©)
HTML Entities Challenge
Price tag
Write one paragraph that shows exactly: Burgers & fries → €12 © Diner
Use entities for &, →, € and ©.
<p></p>- Shows the full text correctly
&, →, €, ©