Introduction
HTML entities are special codes used to display reserved characters, symbols, and spaces in a webpage. For example, you can display <, >, &, copyright symbols, trademarks, emojis, and multiple spaces using HTML entities. In this chapter, you’ll practice the most commonly used HTML entities with simple solved examples.
Question 1
Problem Statement
Display the less than (<) and greater than (>) symbols on a webpage.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Less Than and Greater Than</title>
</head>
<body>
<h1>Comparison Symbols</h1>
<p>5 < 10</p>
<p>10 > 5</p>
</body>
</html>
Output
Comparison Symbols
5 < 10
10 > 5
Step-by-Step Explanation
<displays the<symbol.>displays the>symbol.- These entities prevent the browser from treating the symbols as HTML tags.
Question 2
Problem Statement
Display an ampersand (&) symbol.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Ampersand</title>
</head>
<body>
<h1>Company Name</h1>
<p>Design & Development</p>
</body>
</html>
Output
Company Name
Design & Development
Step-by-Step Explanation
&displays the&symbol.- It is commonly used in company names and text containing ampersands.
Question 3
Problem Statement
Display double quotation marks using HTML entities.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Quotation Marks</title>
</head>
<body>
<h1>HTML Quotes</h1>
<p>"Practice makes perfect."</p>
</body>
</html>
Output
HTML Quotes
"Practice makes perfect."
Step-by-Step Explanation
"displays a double quotation mark.- It is useful when quotation marks need to appear as text.
Question 4
Problem Statement
Display a copyright symbol.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Copyright Symbol</title>
</head>
<body>
<footer>
<p>© 2026 CodeMantra. All Rights Reserved.</p>
</footer>
</body>
</html>
Output
© 2026 CodeMantra. All Rights Reserved.
Step-by-Step Explanation
©displays the copyright symbol.- It is commonly used in website footers.
Question 5
Problem Statement
Display the trademark symbol.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Trademark Symbol</title>
</head>
<body>
<h1>My Brand™</h1>
</body>
</html>
Output
My Brand™
Step-by-Step Explanation
™displays the trademark symbol.- It is often used with brand and product names.
Question 6
Problem Statement
Display multiple spaces between two words using a non-breaking space.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Non-Breaking Space</title>
</head>
<body>
<h1>Student Details</h1>
<p>Name: Rohit Kumar</p>
</body>
</html>
Output
Student Details
Name: Rohit Kumar
Step-by-Step Explanation
creates a non-breaking space.- Browsers normally combine multiple spaces into one.
- Use
when you need extra spaces in the displayed text.
Question 7
Problem Statement
Display the registered trademark symbol.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Registered Symbol</title>
</head>
<body>
<h1>CodeMantra®</h1>
</body>
</html>
Output
CodeMantra®
Step-by-Step Explanation
®displays the registered trademark symbol.- It is commonly used for officially registered brands.
Question 8
Problem Statement
Display different currency symbols using HTML entities.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Currency Symbols</title>
</head>
<body>
<h1>Product Prices</h1>
<p>Dollar: $100</p>
<p>Euro: €90</p>
<p>Pound: £80</p>
<p>Rupee: ₹500</p>
</body>
</html>
Output
Product Prices
Dollar: $100
Euro: €90
Pound: £80
Rupee: ₹500
Step-by-Step Explanation
$displays the dollar symbol.€displays the euro symbol.£displays the pound symbol.₹displays the Indian Rupee symbol.
Question 9
Problem Statement
Display emojis using HTML entity numbers.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Emojis</title>
</head>
<body>
<h1>Today's Mood</h1>
<p>😀 Happy</p>
<p>😍 Love</p>
<p>🚀 Rocket</p>
</body>
</html>
Output
Today's Mood
😀 Happy
😍 Love
🚀 Rocket
Step-by-Step Explanation
- Emojis can be displayed using numeric HTML entities.
😀displays 😀.😍displays 😍.🚀displays 🚀.
Question 10
Problem Statement
Create a webpage that uses multiple HTML entities together.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Entities Example</title>
</head>
<body>
<h1>CodeMantra™</h1>
<p>© 2026 CodeMantra. All Rights Reserved.</p>
<p>Course Fee: ₹2,999</p>
<p>HTML & CSS Complete Course</p>
<p>5 < 10 and 10 > 5</p>
<p>Best of Luck! 🚀</p>
</body>
</html>
Output
CodeMantra™
© 2026 CodeMantra. All Rights Reserved.
Course Fee: ₹2,999
HTML & CSS Complete Course
5 < 10 and 10 > 5
Best of Luck! 🚀
Step-by-Step Explanation
™displays ™.©displays ©.₹displays ₹.&displays &.<displays <.>displays >.🚀displays the rocket emoji 🚀.
Key Takeaways
- HTML entities display reserved characters and special symbols.
<displays<.>displays>.&displays&."displays double quotation marks.©displays the copyright symbol.™displays the trademark symbol.®displays the registered trademark symbol. creates a non-breaking space.- Numeric entities can display emojis and many Unicode characters.
Frequently Asked Questions (FAQs)
1. What are HTML entities?
HTML entities are special codes used to display reserved characters, symbols, and Unicode characters in HTML.
2. Why are HTML entities used?
They allow reserved characters and special symbols to appear as text instead of being interpreted as HTML.
3. How do you display the < symbol?
Use:
<
4. How do you display the > symbol?
Use:
>
5. How do you display an ampersand (&)?
Use:
&
6. What does do?
It creates a non-breaking space that prevents the browser from collapsing it with surrounding spaces.
7. How do you display the copyright symbol?
Use:
©
8. How do you display the registered trademark symbol?
Use:
®
9. Can HTML entities display emojis?
Yes. Many emojis can be displayed using numeric HTML entities such as 😀.
10. Are HTML entities supported in all modern browsers?
Yes. Standard HTML entities are supported by all modern web browsers.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
