It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

HTML Symbols: Get Familiar With HTML Special Character Codes

Reading time 3 min
Published Jun 23, 2017
Updated Oct 2, 2019

TL;DR – HTML symbols can be added to the text using their entity names or character codes.

Adding HTML Special Characters

To be comfortable to use, a computer keyboard has to be rather compact. However, this also means it can contain a limited amount of symbols. That is why a lot of HTML special characters cannot be simply typed in.

The easiest way to include special characters in HTML documents is by writing their entity names. An entity name always starts with an ampersand (&) and ends with a semicolon (;):

&entityname;

There is no need to use tags, attributes, properties, or values. When writing text in your website, include the entity name when needed:

Example
<!–– Use &mdash; or &#8212; to add — ––> 
<h2>Learn to add the beautiful em dash &mdash; it is so easy!</h2>

However, not all HTML symbols have entity names. In that case, you should write HTML special character codes - entity numbers, decimal or hexadecimal references:

Example
<p>This is the trademark symbol - &trade;</p>
<p>This is the trademark symbol - &#8482;</p>
<p>This is the trademark symbol - &#x2122;</p>

HTML Entities List

In the following section, we will introduce you to the most commonly used HTML special characters and ways to add them to your documents. However, the whole selection of them is much wider – you can check it out in this page created by the World Web Consortium.

Most Common Entities

Char Entity Number Definition
& &amp; &#38; Ampersand
* &ast; &#42; Asterisk
@ &commat; &#64; At symbol
% &percnt; &#37; Percent
® &reg; &#174; Registered sign
© &copy; &#169; Copyright sign
&trade; &#8482; Trademark
  &nbsp; &#160; Non-breaking space
° &deg; &#176 Degree
&#8451; Celsius degree
&#8457 Farenheit degree

Currency Symbols

Char Entity Number Definition
$ &dollar; &#36; Dollar
¢ &cent; &#162; Cent
&euro; &#8364; Euro
£ &pound; &#163; Pound
¥ &yen; &#165; Yen
&#8377; Rupee

Mathematical Symbols

Char Entity Number Definition
+ &plus &#43; Plus
&minus; &#8722; Minus
× &times; &#215; Multiplication
÷ &divide; &#247; Division
= &equals; &#61; Equal
&ne; &#8800; Not equal
± &plusmn; &#177; Plus or minus
&forall; &#8704; For all
&exist; &#8707; There exists
&part; &#8706; Partial differential
&nabla; &#8711; Nabla
&empty; &#8709; Empty sets
&notin; &#8713; Not an element of
&isin; &#8712; Element of
&ni; &#8715; Contains as a member
&sum; &#8721; N-ary summation
&prod; &#8719; N-ary product

Greek Letters

Char Entity Number Definition
Β &Beta; &#914; Greek capital letter beta
A &Alpha; &#913; Greek capital letter alpha
Δ &Delta; &#916; Greek capital letter delta
Γ &Gamma; &#915; Greek capital letter gamma
Ζ &Zeta; &#918; Greek capital letter zeta
E &Epsilon; &#917; Greek capital letter epsilon

Other Symbols

Char Entity Number Definition
&uarr; &#8593; Upwards arrow
&larr; &#8592; Leftwards arrow
&darr; &#8595; Downwards arrow
&rarr; &#8594; Rightwards arrow
&clubs; &#9827; Black club suit
&spades; &#9824; Black spade suit
&diams; &#9830; Black diamond suit
&hearts; &#9829; Black heart suit

HTML Symbols: Useful Tips

  • To prevent your web page from failing to display HTML special characters, define the charset as UTF-8 in the <meta> tag of your HTML document.
  • If you need to include East Asian characters in your web page, consider adding ruby annotations to help the user with their pronunciation.
  • With HTML symbol codes, you can also include emojis: try adding &#9996; or &#9752; to your page!