HTML special characters (entities)
adding non-alpha/numeric text
// updated 2025-04-30 14:07
Introduction
At least two kinds of special characters exist in HTML:
- Entities
- characters which do not appear on all keyboards; or
- characters that would interfere with HTML code such as
<and>
- Emoji
- icons no longer need to be image files stored on some server
- ...as they can now use these "text-like" characters 😁
Entities
There are two ways to encode entities:
1< <!-- "less than" - encoding by "name" -->1< <!-- "less than" - encoding by "#number" -->Common entities include:
| Appearance | Meaning | By name | By number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | more than | > | > |
| & | ampersand | & | & |
| ¢ | cent | ¢ | ¢ |
| € | euro | € | € |
| £ | pound | £ | £ |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
| ™ | trademark | ™ | ™ |
Remember that HTML entities by name are case sensitive:
- i.e.
€will work but not&Euro;
Emoji
Emoji (note: plural is also emoji) are just symbols like $ or ¢ and we can simply input them using:
- an emoji keyboard
- something almost everyone who uses emoji would use
- on Mac :
control + command + spaceorfn + E - on Windows :
Windows + .(period)
- on Mac :
- something almost everyone who uses emoji would use
- HTML entity code (such as
😄for 😄)- a much, much less commonly used method
We also need to ensure that the <head> contains the following reference to Unicode (UTF-8) for emoji to appear on the page:
1<head>
2 ...
3 <meta charset="UTF-8">
4 ...
5</head>Fun fact: the resemblance of the word "emoji" to "emotion" is actually a complete coincidence!