html

How to add special symbols in HTML

There are numerous symbols that cannot be used directly in HTML, these are referred to as special symbols. The special symbols can be used in HTML by using the entity names, decimal values, and HEX values. This post serves the following learning outcomes:

– special symbols supported by HTML

– how to add special symbols in HTML

Special symbols in HTML

This core section presents the classification of special symbols and provides the functionality of these symbols using examples.

Mathematical symbols in HTML

The basic mathematical symbols are available on the keyboard. However, various advanced-level mathematical symbols can be used in HTML that may not be found on the keyboards. Let’s have a look at these symbols.

Symbols Description Entity Name Decimal Value HEX value
Empty set ∅
Union ∪
Intersection ∩
Proportional to ∝
Belongs to ∈
Does not belong to ∉
Nearly equals ≅
Subset of ⊂
Superset of ⊃
Subset of/equal to ⊆
Superset of/equal to ⊇
For all ∀
Square root √
Infinity ∞

The above table provides the symbols that are frequently used in HTML. Let’s go through the following examples to add the mathematical symbols in HTML.

How to add mathematical symbols in HTML

The code provided here represents the ways to add mathematical symbols in HTML.

<body>

<p> For all: &forall; </p>

<p> Empty Set: ∅ </p>

<p> Propotional to: ∝ </p>

</body>

The code is described as,

– three mathematical symbols named for all, empty set, and proportional to are added in HTML

– for all symbol is added using its entity name whereas the empty set and proportional to are added using their decimal and HEX values respectively.

A picture containing diagram Description automatically generated

Output

Background pattern Description automatically generated with low confidence

The output shows that all the symbols are presented using the various representations in HTML.

Greek symbols in HTML

The Greek symbols are also not available on the keyboard and thus cannot be added directly. The table shows the list of various Greek letters along with their entity names and entity numbers.

Symbols Description Entity Name Entity Number
Α Capital Alpha &Alpha; Α
Β Capital Beta &Beta; Β
Γ Capital Gamma &Gamma; Γ
Δ Capital Delta &Delta; Δ

Let’s practice them using an example

How to add Greek symbols in HTML

The code provided below prints the Greek letters using their entity names and entity numbers. S

<p> Alpha: &Alpha; </p>

<p> Beta: Β </p>

<p> Gamma: &Gamma;</p>

<p> Delta: Δ </p>

The above code contains four paragraphs in which Alpha, Beta, Gamma, and Delta are used. The entity name is used for Alpha and Gamma whereas the Beta and Delta are added using their entity numbers.

Text Description automatically generated

Output

Shape Description automatically generated

The relevant Greek symbols can be observed from the output.

Currency symbols in HTML

Currency symbols are also not available on the normal keyboard except the dollar sign($). However, they can also be added using the HEX value and decimal values that are provided in the following table.

Symbol Description Decimal Value HEX value
Euro (European currency)
Turkish Lira (Turkey Currency)
Bitcoin (Digital Currency)
Rupee(Pakistani Currency)
Franc (French Currency)

Let’s add them in an HTML document.

How to add currency symbols in HTML

The example provided below adds various currency signs in an HTML document.

<p> Euro: €</p>

<p> Pakistani Rupee: ₨</p>

<p> Turkish Lira: ₤</p>

<p> Bitcoin: ₿</p>

In the above code,

– four paragraphs are used that are supposed to get the symbol of Euro, Rupee, Turkish Lira, and Bitcoin.

– these currency symbols are added using the HEX and decimal values

Text Description automatically generated

Output

A picture containing background pattern Description automatically generated

Other symbols in HTML

The symbols that do not belong to the above categories are discussed here. The following table lists down these symbols with their entity names/numbers.

Symbol Description Entity Number Entity Number
® Registered ® &reg;
Trademark &trade;
© Copyright © &copy;
Left arrow &larr;
Right Arrow &rarr;
Up Arrow &uarr;
Down Arrow &darr;

How to add these symbols in HTML

The following HTML code adds the above symbols to HTML.

<p> Copyright: &copy;</p>

<p> Trademark: ™</p>

<p> Left-arrow: ←</p>

<p> Down-arrow: &darr;</p>

Four paragraphs are practiced that uses the entity names and entity numbers of copyright, trademark, left-arrow, and right-arrow. s

Text Description automatically generated

Output

Graphical user interface Description automatically generated with low confidence

The output shown above displays the copyright, trademark, let-arrow, and right-arrow.

Conclusion

The special symbols refer to those that cannot be added directly to HTML. These symbols can either be added by using the entity names, HEX values, or decimal values. This post provides possible ways to add special symbols in HTML. Firstly, we classified the special symbols into categories named, mathematical symbols, Greek symbols, currency symbols, and mixed. Furthermore, we have added an example in each category that demonstrates the addition of special symbols in HTML.

About the author

Adnan Shabbir