HTML Entities, Symbols & Emojis (Typing Special Characters) 🪙

Welcome to Topic 3.3 in Chapter 3: Text Formatting!

Have you ever tried typing a math formula like:

...inside an HTML paragraph, only to discover that the browser hides your text or gets completely confused?

Why does that happen? Because the browser sees the less-than sign (<) and thinks: "Oh! The student is trying to start a new HTML tag like <p> or <div>!" When it can't find a tag name, your page layout breaks!

What if you want to:

• Type the official Indian Rupee symbol (₹)?
• Add a Copyright symbol (©) in your website footer?
• Put three spaces between words without HTML collapsing them into one space?
• Type math symbols like degree (°C), multiplication (×), or division (÷)?

HTML Entities solve all of these problems easily!

The Real-Life School Analogy: The Teacher's Chalkboard Stencil 📐

Think about your Mathematics & Science blackboard:

When your math teacher writes equations on the board, standard English letters (A, B, C) aren't enough. The teacher draws:

• The square root radical sign $\sqrt{x}$
• The Greek letter Pi ($\pi = 3.14$)
• The plus-or-minus sign ($\pm 5$)
• The degree circle ($100^\circ\text{C}$)

Your keyboard doesn't have a single key for "Pi" or "Plus-Minus" or "Copyright".

An HTML Entity is like a secret digital stencil code. You type a short code starting with an ampersand (&) and ending with a semicolon (;), and the browser stamps the beautiful special character right onto your webpage!

1. Anatomy of an HTML Entity 🔬

Every HTML entity follows a strict format:

1. 1
   Begins with: An ampersand (&).
2. 2
   Body: Either a friendly word name (e.g. copy) or a Unicode decimal number (e.g. 8377).
3. 3
   Ends with: A mandatory semicolon (;).

2. The 5 Essential Reserved Characters 🔒

Because HTML uses characters like < and > to build tags, you must always use entity codes when you want to display them as literal text:

3. The Super-Power of Non-Breaking Space:   🧲

Have you noticed what happens when you press the Spacebar 10 times in HTML?

The browser ignores 9 of those spaces and displays: Aryan Sharma. This is called whitespace collapse.

What does   do?

  stands for Non-Breaking Space. It does two incredible things:

1. 1
   Forces Extra Visible Spaces:

1. 1
   Acts as Digital Fevicol (Prevents Ugly Line Breaks!):

Imagine you write 10 km or Class 10 near the right edge of a phone screen. Sometimes 10 stays on line 1, and km drops alone to line 2! That looks untidy and awkward.

If you write:

The browser promises never to split 10 and km across two different lines — they will always stay glued together!

4. Currency Symbols: The Indian Rupee ₹ 💰

When displaying school fees, canteen prices, or book costs, you need currency symbols:

5. Common Legal & Commercial Symbols 📜

6. Mathematics & Science Symbols 🧪

No more struggling to write science formulas on your school webpage:

7. Fun with Modern Emojis in HTML 😄

Emojis are characters in the modern Unicode standard! You can paste them directly, or use their universal decimal codes starting with &#:

Complete Real-World Project: School Fee & Science Formula Sheet 🏫

Here is a complete, working webpage demonstrating proper use of entities, currency codes, and math formulas:

Common Beginner Mistakes & Best Practices ⚠️

Quick Summary (Revision Notes) 🧠

• HTML Entities display reserved characters, math symbols, and currencies that are not easily typed on keyboards.
• Entities begin with an & and end with a ;.
• The Big Five Reserved Characters:
• < (<)
• > (>)
• & (&)
• " (")
• ' (')
•   (Non-Breaking Space) forces extra spaces and prevents words/numbers from breaking awkwardly across lines.
• ₹ displays the official Indian Rupee symbol (₹).
• © displays the Copyright symbol (&copy;).
• Math symbols like × ($\times$), ÷ ($\div$), ° ($^\circ$), and π ($\pi$) help write clear scientific formulas.

Practice Quiz

Test your understanding with these multiple-choice questions:

1. Which HTML entity correctly represents the less-than sign (<)?

A. &less; B. < C. &#less; D. &l; Answer: B Explanation: < stands for "less than" and prevents browsers from mistaking the symbol for an HTML opening tag.

2. What does   stand for in HTML?

A. New Blank Section Paragraph B. Non-Breaking Space C. Number Between System Positions D. Native Browser Special Page Answer: B Explanation:   stands for Non-Breaking Space. It creates a space that prevents the browser from breaking the line at that position.

3. Which code displays the official Indian Rupee currency symbol (₹)?

A. &rupee; B. ₹ C. &inr; D. d Answer: B Explanation: ₹ is the official Unicode decimal entity code for the Indian Rupee symbol (₹).

4. What character must ALWAYS be placed at the very end of an HTML entity?

A. A colon (:) B. A period (.) C. A semicolon (;) D. An exclamation mark (!) Answer: C Explanation: All HTML entities must terminate with a semicolon (;), such as in © or &.

5. Which entity code displays the mathematical degree symbol (&deg;) for writing temperatures like 37&deg;C?

A. &degree; B. ° C. &#temp; D. &circle; Answer: B Explanation: ° is the standard HTML entity for the degree symbol (&deg;).

Hands-on Practice Challenge 🎯

Open VS Code and create a file named science-canteen-menu.html.

Your Challenge:

Create a School Canteen & Stationery Store Price List:

1. 1
   School Header: Include your school name with ™ and a copyright notice with © 2026.
2. 2
   Canteen Menu Table:

• Display at least 4 food items (e.g. Samosa, Veg Sandwich, Mango Juice, Fruit Salad).
• Display their prices using the Indian Rupee symbol (₹) (e.g. ₹ 15).

1. 1
   Stationery Discount Rules:

• Write a sentence: "Buy &gt; 5 notebooks to get a 10% discount!" using >.
• Write: "Calculators: Error margin &plusmn;&nbsp;0.01" using ±.

1. 1
   Chemistry Tip:

• Write: "Store chemical reagents at temperature &le;&nbsp;25&deg;C" using ≤ and °.

1. 1
   Add Emojis: Add celebration emojis using Unicode decimal codes (like 😀 and 🚀).

Open your file in Google Chrome or Microsoft Edge to see your symbols render cleanly!