HTML - Symbols



HTML symbols allow us to embed symbols that are not presents in keyboard using special codes called entities. Entities start with ampersand(`&`) and end with semi column(`;`).

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.

Example

The following example shows how to insert 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>

Currency Symbols in HTML

The following table shows currency symbols and their corresponding entities:

Symbols Description Entity Name Entity Number
Indian Rupee Symbol NA &#8377;
Euro Symbol &euro; &#8364;
Bitcoin Symbol NA &#8383;
¥ Japanese Yen Symbol &yen; &#165;
Ruble Symbol NA &#8381;

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>

Mathematical Symbols in HTML

The following table shows Mathematical symbols and their corresponding entities:

Symbols Description Entity Name Entity Number
For all symbol &forall; &#8704;
Empty sets symbol &empty; &#8709;
Nabla symbol &nabla; &#8711;
Summation symbol &sum; &#8721;
Element of &isin; &#8712;

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>

To learn all the symbols in HTML, you can visit our entities tutorial.

Advertisements