DEV Community

Vishnubhotla V D V Bharadwaj
Vishnubhotla V D V Bharadwaj

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

Special symbols in HTML

#html #webdev #100daysofcode

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

prince_beec5ccde00b7c6c73 profile image

Logo's designing effect in html css

Prince -

ellis22 profile image

Spec Coder: The Ultimate VS Code Extension for Smarter, Faster Coding

Ellis -

gameon_gameover_8f18dbb85 profile image

Top 45+ Active directory interview questions and answers for experienced

gameon gameover -

ngoantr profile image

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]

Ann -