HTML - Symbols

Quiz

In HTML, you can embed the symbols and special characters that are not available on the keyboard using the HTML entities.

What are HTML Symbols?

HTML symbols are some characters that hold a special meaning and are difficult to type directly on the keyboard. They are often termed as "symbols." For example, other than the dollar symbol, we can’t find any currency symbols like rupees and euros on normal keyboards. However, HTML provides other ways to insert these symbols into webpages. In this tutorial, we are going to learn how to use special characters or symbols in an HTML document.

Inserting 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 the 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 on 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 executes the above code, it will produce four different symbols, namely copyright, trademark, registered trademark, and left arrow.

HTML Currency Symbols

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: Inserting Currency Symbols in HTML

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>

HTML Mathematical Symbols

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: Inserting Mathematical Symbols in HTML

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>

HTML Arrow Symbols

The following table shows arrows symbols and their corresponding entities −

Symbol	Entity Name	Entity Number	Description & Example
←	←	←	Left Arrow: ←
↑	↑	↑	Up Arrow: ↑
→	→	→	Right Arrow: →
↓	↓	↓	Down Arrow: ↓
↔	↔	↔	Left-Right Arrow: ↔

Example: Inserting Arrow Symbols in HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Arrow Symbols</title>
</head>
<body>
    <h2>HTML Arrow Symbols</h2>
    <p>Left Arrow: ← (&larr; or ←)</p>
    <p>Up Arrow: ↑ (&uarr; or ↑)</p>
    <p>Right Arrow: → (&rarr; or →)</p>
    <p>Down Arrow: ↓ (&darr; or ↓)</p>
    <p>Left-Right Arrow: ↔ (&harr; or ↔)</p>
</body>
</html>

HTML Miscellaneous Symbols

The following table shows miscellaneous symbols and their corresponding entities −

Symbol	Entity Name	Entity Number	Description & Example
©	©	©	Copyright: ©
®	®	®	Registered Trademark: ®
™	™	™	Trademark: ™
§	§	§	Section: §
¶	¶	¶	Paragraph: ¶

Example: Inserting Miscellaneous Symbols in HTML

In this example, we will miscellaneous how to insert arrow symbols into an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Miscellaneous Symbols</title>
</head>
<body>
    <h2>HTML Miscellaneous Symbols</h2>
    <p>Copyright Symbol: © (&copy; or ©)</p>
    <p>Registered Trademark: ® (&reg; or ®)</p>
    <p>Trademark Symbol: ™ (&trade; or ™)</p>
    <p>Section Symbol: § (&sect; or §)</p>
    <p>Paragraph Symbol: ¶ (&para; or ¶)</p>
</body>
</html>

Print Page