Symbols, Emojis and Charsets in HTML

Deeksha
Last Updated: May 13, 2022

HTML Symbols

Suppose you are designing an HTML page and want to use symbols that are not there on your keyboard, like copyright symbol or Euro symbol, then how will you add these symbols? 

Here is the answer:

These symbols that are absent on your keyboard can be added using entity name or entity number i.e, using a decimal or hexadecimal reference of that symbol. The entity name and number must always be preceded by & symbol and end with ;.

Let’ see some example :

<!DOCTYPE html>

<html>

<body>

<!--&#8721; will print summation symbol-->

<!--Using &rarr; entity name for symbol of right arrow-->

<p> &#8721;CodingNinjasBlogs &rarr; Success</p>

</body>

</html>

Output: 

∑CodingNinjasBlogs → Success

 

So you can see how easy it is to use HTML symbols. Now let’s see what are the different types of symbols that are supported by HTML :

Mathematical Symbols In HTML

Char

Number

Entity

Description

&#8704;

&forall;

FOR ALL

&#8706;

&part;

PARTIAL DIFFERENTIAL

&#8707;

&exist;

THERE EXISTS

&#8719;

&prod;

N-ARY PRODUCT

&#8712;

&isin;

ELEMENT OF

&#8709;

&empty;

EMPTY SETS

&#8721;

&sum;

SUMMATION

 

Greek Letters in HTML

Char

Number

Entity

Description

A&#913;&Alpha;ALPHA
B&#914;&Beta;BETA 
Δ&#916;&Delta;DELTA
Ε&#917;&Epsilon;EPSILON

 

Other Symbols in HTML

Char

Number

Entity

Description

©&#169;&copy;COPYRIGHT SIGN
®&#174;&reg;REGISTERED SIGN

&#8592;

 

&larr;LEFTWARDS ARROW
&#8594;&rarr;RIGHTWARDS ARROW
&#9829;&hearts;BLACK HEART SUIT
&#8482;&trade;TRADEMARK

 

So these are the symbols we can use in HTML for making our frontend part more awesome.

HTML Charsets

HTML Charsets are the same as HTML Encoding or HTML Character sets.It is mandatory to tell the browser which HTML character set it has to use so that your browser can render your HTML pages correctly.

Types of HTML Character Encoding

There are various types of character encoding in HTML. Let’s discuss them one by one:

ASCII Character Set

The first encoding standard that was adopted for HTML was ASCII. It stands for American Standard Code for Information Interchange. We have 128 characters defined under the ASCII character set which are: 

  • Numbers (0-9)
  • English letters (A-Z)
  • Special characters like! $ + - ( ) @.

 

ANSI Character Set

ANSI Character Set is an extended version of the ASCII character set. It has 256 characters under it.ANSI stands for American National Standard Institute.ANSI also came to be known as Windows-1252 and up to Windows 95, it was the default character set.

UTF-8 Character Set

A variable-width encoding that covered almost all the symbols in the world came to be known as UTF-8 Character Set.UTF-8 is the default encoding character set for HTML-5.

Now the question that must be in your head is how to specify which character set we are using on our HTML page. The answer is a Meta tag. Let’s see it in the below example:

<!--Meta tag-->

<meta charset="UTF-8">

 

HTML Emojis

These days everyone loves to use emojis. Generally, people think that emojis are images but this is not true. Emojis are the characters present in UTF-8 encoding. These emojis can be displayed and sized like every other character in HTML. We can display emojis just like we displayed HTML symbols. Let’s try to display them in an example:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h1>Blogs on coding ninjas are awesome &#128151;</h1>

</body>

</html>

 

Output: 

 

You can also set width and height for your emojis in HTML as you do for other elements in HTML. Let’s see an example for it: 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h1>Code Studio is a super Awesome Platform</h1>

<p style="font-size:50px">

&#128525; &#128151;

</p>

</body>

</html>

 

Let me share codes for some more emojis so that you can make awesome web pages.

Emoji

Value

😂

&#128514;

😃

&#128515;

🗼

&#128508;

🌟

&#127775;

👀

&#128064;

&#9193;

&#10004;

🎉

&#127881;

👋

&#128075;

😎

&#128526;

🙆

&#128582;

 

Frequently Asked Questions

Q1. How can I insert symbols in HTML?

Ans. We can insert symbols in HTML by using &# followed by the code of that particular symbol.

 

Q2. What is &amp in HTML?

Ans. & is HTML for "Start of a character reference". &amp is the character reference for "An ampersand".

 

Q3. What is an entity in HTML?

Ans. An entity in HTML is a piece of text that begins with an ampersand ( & ) and ends with a semicolon ( ; ).

 

Q4. Why do we use entities in HTML?

Ans. We can display reserved characters (which would otherwise be interpreted as HTML code)  and invisible characters (like non-breaking spaces) using entities in HTML.

 

Q5. What is the full form of UTF-8?

Ans. UTF-8 stands for Universal Coded Character Set.

Key Takeaways

In this blog, we discussed HTML charsets, and we learned how to insert various symbols and images in our web pages. These concepts are beneficial for the front-end part of your website. Do not worry about learning the code, the most useful ones will come on your tips with practice.

If you want to learn concepts that can help you do some cool projects, check out this course on coding ninjas. If this blog has added some value to your knowledge, then please share it with your friends.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think