MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
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:
HTML Entities solve all of these problems easily!
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:
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!
Every HTML entity follows a strict format:
&).copy) or a Unicode decimal number (e.g. 8377).;).;)! If you write © without ;, some browsers will fail to display the symbol properly.Because HTML uses characters like < and > to build tags, you must always use entity codes when you want to display them as literal text:
| Symbol | Meaning | Entity Name Code | Entity Number Code | Example Code | What Displays |
|---|---|---|---|---|---|
< | Less-than | < | < | 5 < 10 | 5 < 10 |
> | Greater-than | > | > | 10 > 5 | 10 > 5 |
& | Ampersand | & | & | Physics & Chemistry | Physics & Chemistry |
" | Double Quotation | " | " | He said "Hello" | He said "Hello" |
' | Single Quote / Apostrophe | ' | ' | Aryan's Book | Aryan's Book |
🧲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.
do? stands for Non-Breaking Space. It does two incredible things:
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!
₹ 💰When displaying school fees, canteen prices, or book costs, you need currency symbols:
| Currency | Symbol | Entity Name / Number | Example Code | Result |
|---|---|---|---|---|
| Indian Rupee | ₹ | ₹ | Annual Lab Fee: ₹ 1,500 | Annual Lab Fee: ₹ 1,500 |
| US Dollar | $ | $ or $ | $ 20 | $ 20 |
| Euro | € | € or € | € 50 | € 50 |
| British Pound | £ | £ or £ | £ 15 | £ 15 |
| Japanese Yen | ¥ | ¥ or ¥ | ¥ 1000 | ¥ 1000 |
| Symbol | Meaning | Entity Name | Example |
|---|---|---|---|
| © | Copyright Notice | © | © 2026 MSK Institute → © 2026 MSK Institute |
| ® | Registered Trademark | ® | Android® OS → Android® OS |
| ™ | Trademark | ™ | MSK Notes™ → MSK Notes™ |
| § | Section Sign | § | Rule § 4 → Rule § 4 |
No more struggling to write science formulas on your school webpage:
| Symbol | Name | Entity Code | Formula Example |
|---|---|---|---|
| × | Multiplication Cross | × | 5 × 5 = 25 → 5 × 5 = 25 |
| ÷ | Division Symbol | ÷ | 100 ÷ 4 = 25 → 100 ÷ 4 = 25 |
| ± | Plus or Minus | ± | 5 ± 0.2 mm → 5 ± 0.2 mm |
| ° | Degree Symbol | ° | Normal Body Temp: 37°C → Normal Body Temp: 37°C |
| π | Greek letter Pi | π | Area = πr² → Area = πr² |
| ∞ | Infinity | ∞ | Focal length: ∞ → Focal length: ∞ |
| ≠ | Not Equal To | ≠ | x ≠ 0 → x ≠ 0 |
| ≤ / ≥ | Less/Greater Equal | ≤ / ≥ | Score ≥ 75% → Score ≥ 75% |
| µ | Micro | µ | 5 µF capacitor → 5 µF capacitor |
Emojis are characters in the modern Unicode standard! You can paste them directly, or use their universal decimal codes starting with &#:
<meta charset="UTF-8"> inside the <head> of your HTML document!Here is a complete, working webpage demonstrating proper use of entities, currency codes, and math formulas:
| ❌ Common Mistake | ✅ Best Practice | Why It Matters |
|---|---|---|
Typing literal < or > inside normal text (e.g. a < b). | Always write a < b or a > b. | The browser will mistake < for the opening of an unclosed HTML tag! |
Forgetting the semicolon (;) at the end of an entity code (©). | Always include the semicolon: ©. | Missing semicolon causes inconsistent rendering on mobile browsers. |
| Pressing the Spacebar 20 times to space out text. | Use CSS margins or sparingly. | HTML automatically collapses multiple consecutive spaces into a single space. |
Forgetting <meta charset="UTF-8">. | Always place <meta charset="UTF-8"> in <head>. | UTF-8 allows browsers to correctly display Indian Rupee (₹), emojis, and Hindi characters without corruption. |
& and end with a ;.< (<)> (>)& (&)" (")' (') (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 (©).× ($\times$), ÷ ($\div$), ° ($^\circ$), and π ($\pi$) help write clear scientific formulas.Test your understanding with these multiple-choice questions:
<)? stand for in HTML?₹)?Open VS Code and create a file named science-canteen-menu.html.
Create a School Canteen & Stationery Store Price List:
™ and a copyright notice with © 2026.₹) (e.g. ₹ 15).>.±.≤ and °.😀 and 🚀).Open your file in Google Chrome or Microsoft Edge to see your symbols render cleanly!
In the next lesson, we will continue your web development journey with HTML Comments (Comments).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Quotations & Citations | HTML Comments |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.