HTML Symbols: How They Work [+ Reference Guide]
When writing HTML, there might be times when you want to insert a character that you can’t simply type. Many common symbols, including currency symbols, mathematical operators, and legal symbols (like © and ®) aren’t included on a standard keyboard.
There’s also an issue if you want to put a character on your page that already has a use in HTML. For example, HTML will interpret angle brackets (< and >) as the start and end of a tag, so you can’t write one in HTML as you would a letter or number character. It won’t display and may cause problems with the page.
The solution to both of these issues is to use HTML entities. In this post, you’ll learn how to use HTML entities to insert special characters on your page. We’ll also list some common symbols and their entities so you can easily place them in your document.
Nội Dung Chính
How to Write HTML Symbols
To add symbols in HTML, developers use HTML entities. An HTML entity is a special string (a series of characters) that starts with an ampersand (&), ends with a semicolon (;), and contains either the entity name or entity number for a particular symbol. Many symbols have reserved HTML entities.
For example, to insert the copyright symbol (©) in HTML, we can use the entity © (the entity name) or © (the entity number). Notice how an additional hash symbol (#) is placed before the entity number.
Using either one of these entities causes the symbol to render correctly on the page:
See the Pen HTML symbols: copyright by HubSpot (@hubspot) on CodePen.
Characters that have a double use as both a display character and a functional HTML character also have their own entities — for example, angle brackets, ampersand, and quotation marks:
See the Pen HTML symbols: more examples by HubSpot (@hubspot) on CodePen.
To place entities, you can type them in or paste them from a list (like the one below). For entities that have names, it’s easy to remember and type them in. However, some older browsers may not process the entity name. Use the entity number to guarantee that your entity displays properly on all browsers.
HTML Symbols List
Sometimes, you can remember an HTML entity from its name. Other times, you’ll have to look it up. To help you out, here’s a list of common symbols along with their HTML entities in name and number formats:
Punctuation and Grammatical Symbols
Symbol
Entity Name
Entity Number
Known As
 
non-breaking space
&
&
&
ampersand
‘
'
'
apostrophe/single quotation mark
”
"
"
double quotation mark
“
“
“
left double quotation mark
”
”
”
right double quotation mark
‘
‘
‘
left single quotation mark
’
;‘
’
right single quotation mark
–
–
–
en dash
—
—
—
em dash
~
˜
~
tilde
¿
¿
¿
inverted question mark
¡
¡
¡
inverted exclamation mark
Currency Symbols
Symbol
Entity Name
Entity Number
Known As
€
€
€
euro
£
£
£
pund sterling (British pound)
¥
¥
¥
yen
¢
¢
¢
cent
₤
₤
lira
₣
₣
franc
Mathematical Symbols
Symbol
Entity Name
Entity Number
Known As
×
×
×
multiplication
÷
÷
÷
division
±
±
±
plus or minus
<
<
<
less than
>
>
>
greater than
≤
≤
≤
less than or equal to
≥
≥
≥
greater than or equal to
√
√
√
square root
∑
∑
∑
sum
∞
∞
∞
infinity
ƒ
ƒ
ƒ
function
∫
∫
∫
integral
∆
∆
increment
∂
∂
∂
partial differential
∏
∏
∏
n-ary product
∙
∙
bullet operator
∀
∀
∀
for all
∃
∃
∃
there exists
∈
∈
∈
is an element of the set
∉
∉
∉
is not an element of the set
∅
∅
∅
empty set
∋
∋
∋
under the condition that
Other Common Symbols
Symbol
Entity Name
Entity Number
Known As
®
®
®
registered trademark
©
©
©
copyright
™
™
™
trademark
†
†
†
dagger
‡
‡
‡
double dagger
←
←
left arrow
→
→
right arrow
↑
↑
up arrow
↓
↓
down arrow
★
★
black star
☆
☆
white star
⚑
⚑
black flag
⚐
⚐
white flag
♠
♠
♠
black spade
♣
♣
♣
black club
♥
♥
♥
black heart
♦
♦
♦
black diamond
♧
♧
white club
♤
♤
white spade
♡
♡
white heart
♢
♡
white diamond
☐
☐
empty ballot box
☑
☑
ballot box with a checkmark
☒
☒
ballot box with an X
☻
☻
black smiling face
☺
☺
white smiling face
☹
☹
frowning face
☮
☮
peace symbol
♲
♲
recycling symbol
Add symbols to your HTML.
Most of the time, you should be able to write blocks of text without an issue. On occasion, however, it helps to know how HTML entities work and how to work them into your pages. It’s another handy tool for web developers and content creators, and knowing it will get you one step closer to HTML mastery.
