HTML - Symbols

What are HTML Symbols?

In HTML, there are some characters that holds a special meaning and are difficult to type directly by the keyboard. They are often termed as Symbols. For example, other than dollar symbol we can’t find any currency symbols like Rupees and Euro in normal keyboards. However, HTML provide other ways to insert these symbols into webpages. In this tutorial, we are going to learn how to use special characters or symbols in HTML document.

How to insert Symbols in HTML document?

To insert symbols into an HTML document, we use entities. If no entity name exists then we are allowed to use entity number which is a decimal or a hexadecimal reference. An HTML entity is a piece of text that begins with an ampersand (&) and ends with a semicolon (;). They are used to represent characters and symbols that are either reserved in HTML, or not directly available in keyboards for use on the web page.

There are two types of HTML entities − named entities and numeric entities. The Named entities use a descriptive name to refer to a character or symbol, such as © for the copyright symbol. Numeric entities use a number to refer to a character or symbol, such as © for the same symbol.

Example

The following example shows how to insert the most commonly used symbols into an HTML document.

<!DOCTYPE html>
<html>
<head>
   <title> Symbols in HTML </title>
</head>
<body>
   <h1>Common HTML Symbols</h1>
   <p>Registered trademark Symbol : &reg; </p>
   <p>Trademark Symbol : &trade; </p>
   <p>Copyright Symbol : &copy; </p>
   <p>Left Arrow Symbol : &larr; </p>
</body>
</html>

When a user will execute the above code, it will produce four different symbols namely copyright, trade mark, registered trademark and left arrow.

Inserting Currency Symbols into HTML

The following table shows currency symbols and their corresponding entities −

Symbols	Description	Entity Name	Entity Number
₹	Indian Rupee Symbol	NA	₹
€	Euro Symbol	€	€
₿	Bitcoin Symbol	NA	₿
¥	Japanese Yen Symbol	¥	¥
₽	Ruble Symbol	NA	₽

Example

In the following example, we are going to display a few currency symbols using their corresponding entities −

<!DOCTYPE html>
<html>
<head>
   <title> Symbols in HTML </title>
</head>
<body>
   <h1>Common Currency Symbols</h1>
   <p>Indian Rupee Symbol : &#8377; </p>
   <p>Euro Symbol : &euro; </p>
   <p>Bitcoin Symbol : &#8383; </p>
   <p>Japanese Yen Symbol : &yen; </p>
</body>
</html>

Inserting Mathematical Symbols into HTML

The following table shows Mathematical symbols and their corresponding entities −

Symbols	Description	Entity Name	Entity Number
∀	For all symbol	∀	∀
∅	Empty sets symbol	∅	∅
∇	Nabla symbol	∇	∇
∑	Summation symbol	∑	∑
∈	Element of	∈	∈

Example

In this example, we will demonstrate how to insert mathematical symbols into an HTML document.

<!DOCTYPE html>
<html>
<head>
   <title> Symbols in HTML </title>
</head>
<body>
   <h1>Common Mathematical Symbols</h1>
   <p>For all symbol : &#8704; </p>
   <p>Nabla symbol : &nabla; </p>
   <p>Empty sets symbol : &empty; </p>
   <p>Summation symbol : &sum; </p>
</body>
</html>