CodeNewbie Community 🌱

Vishnubhotla Bharadwaj
Vishnubhotla Bharadwaj

Posted on • Originally published at bharadwaj.hashnode.dev on

Special symbols in HTML

#html5 #webdevelopment #100daysofcode #html

Hello friends, hope you all doing well. In this blog, I am going to write about special symbol creation using HTML. You can ask me why should we create them. Here is the reason:

There are some special symbols that cannot be typed using a keyboard. But we can add them to our website using some codes. I am going to explain them in detail using CodePen.

Here is the first example, creating a Trademark symbol

<body>
    &trade;
</body>
Enter fullscreen mode Exit fullscreen mode

In this way, we can create many special keywords. Here is the list:

Geek Symbols

Symbol -> Name -> Code

α -> Alpha -> &alpha

β -> Beta -> &beta

γ -> Gamma -> &gamma

δ -> Delta -> &delta

ε -> Epsilon -> &epsilon

θ -> Theta -> &theta

λ -> Lamda -> &lambda

μ -> Mu -> &mu

π -> Pi -> &pi

Code for Geek symbols

<body>
  <h1>Geek Symbols</h1>
  &alpha;
  &beta;
  &gamma;
  &delta;
  &epsilon;
  &theta;
  &lambda;
  &mu;
  &pi;
</body>
Enter fullscreen mode Exit fullscreen mode

Trade Symbols

Symbol -> Name -> Code

™ -> Trademark -> &trade

® -> Registered trademark -> &reg

© -> Copyright -> &copy

Code for Trade symbols

<h1>Trade Symbols</h1>
  &trade;
  &reg;
  &copy;
Enter fullscreen mode Exit fullscreen mode

Card Symbols

Symbol -> Name -> Code

♥ -> Hearts -> heartsuit

♦ -> Diamond -> heartsuit

♠ -> Spades -> spadesuit

&Clubsuit; -> Hearts -> heartsuit

Code for Card symbols

<h1>Card Symbols</h1>
&heartsuit;
  &diamondsuit;
  &clubsuit;
  &spadesuit;
Enter fullscreen mode Exit fullscreen mode

Currency Symbols

Symbol -> Name -> Code

₹ -> Indian rupee -> &#8377

€ -> Euro -> &euro

₱ -> Peso -> &#8369

₣ -> French Franc -> &#8355

₿ -> Bitcoin -> &#8383

₩ -> Won -> &#8361

₽ -> Ruble -> &#8381

₾ -> Lari -> &#8382

Code for Currency symbols

<h1>Currency Symbols</h1>
&#8377;
  &euro;
  &#8369;
  &#8355;
  &#8383;
  &#8361;
  &#8381;
  &#8382;
Enter fullscreen mode Exit fullscreen mode

Math Symbols

Symbol -> Name -> Code

÷ -> Divide -> &divide

↑ -> Up arrow -> &uarr

→ -> Right arrow -> &rarr

↓ -> Down arrow -> &darr

← -> Left arrow -> &larr

√ -> Square root -> &radic

∝ -> Proportion -> &prop

∫ -> Integral -> &int

∴ -> Therefore -> &there4

⇒ -> Implies -> &rArr

∀ -> For all -> &forall

Code for Math symbols

<h1>Math Symbols</h1>
&divide;
  &uarr;
  &rarr;
  &darr;
  &larr;
  &radic;
  &prop;
  &int;
  &there4;
  &rArr;
  &forall;
Enter fullscreen mode Exit fullscreen mode

Outputs of all the code:

Screenshot (112).png

Screenshot (113).png

The link for Code is attached here

Top comments (0)

Read next

hiredeveloper profile image

PokerStars Software Features Every Player Should Know About

Hiredeveloper -

hiredeveloper profile image

Top Features of High-Performing Slot Games

Hiredeveloper -

danish036 profile image

Brother Appliances: Leading the Way in Sustainability and Innovation

Scarlet jeo -

hinashah profile image

"How I Started My Coding Journey and What I Wish I Knew"

DKM Machinery -