Do you think IIT Guwahati certified course can help you in your career?
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>
<!--∑ will print summation symbol-->
<!--Using → entity name for symbol of right arrow-->
<p> ∑CodingNinjasBlogs → 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 :
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 💗</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">
😍 💗
</p>
</body>
</html>
Let me share codes for some more emojis so that you can make awesome web pages.
Emoji
Value
😂
😂
😃
😃
🗼
🗼
🌟
🌟
👀
👀
⏩
⏩
✔
✔
🎉
🎉
👋
👋
😎
😎
🙆
🙆
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 & in HTML?
Ans. & is HTML for "Start of a character reference". & 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.
Live masterclass
Switch to top management roles with Online MBA
by Coding Ninjas
20 Jan, 2025
11:30 AM
Transition to SDE Career with Online PG Certification by IIT
by Coding Ninjas
20 Jan, 2025
03:30 PM
Transition to data career with Online PG Certification by IIT
by Coding Ninjas
21 Jan, 2025
01:30 PM
Switch to top management roles with Online MBA
by Coding Ninjas
20 Jan, 2025
11:30 AM
Transition to SDE Career with Online PG Certification by IIT
84+ registered 