A Price List and a Coding Page
Karthik is a second-year engineering student. His uncle runs Annapoorna Tiffin Centre, and Karthik offered to build the restaurant’s website. The menu needs rupee prices like ₹80, a line saying “Idli & Vada”, and a copyright line at the bottom: “© 2026 Annapoorna Tiffin Centre”.
Karthik also writes a small page to teach his friends HTML. On that page he wants to show the text <p> so readers can see the tag. But when he types it, the text disappears. The browser thinks it is a real tag!
Both problems have the same solution: HTML entities. An entity is a short code that stands for one character. In this lesson you will learn when you need entities, how to write them, and when you can simply type the character.
The Problem: Some Characters Have a Special Job
In HTML, the less-than sign < means “a tag starts here”. So if you type a tag as normal text, the browser does not show it. It tries to use it. Run this example and see what happens to the tags in the sentences:
<p>To start a paragraph, type <p> and to end it, type </p>.</p>
<p>A heading uses the <h2> tag.</p>The words “<p>” and “<h2>” are missing. The sentence is broken into extra paragraphs, and the word “tag.” has turned into a big heading! Now look at the fix. Each < is written as < (less than) and each > as > (greater than):
<p>To start a paragraph, type <p> and to end it, type </p>.</p>
<p>A heading uses the <h2> tag.</p>Every entity has the same shape: it starts with an ampersand & and ends with a semicolon ;. The part in the middle is the name or number of the character.
The Ampersand: Write It as &
Because & starts every entity, it is a special character too. A lone & followed by a space usually shows correctly. But if letters come right after it, the browser may read them as an entity. The safe habit is to always write &.
<p>Idli & Vada: ₹60</p>
<p>Price list for breakfast & lunch.</p>
<p>To show a less-than sign on your page, write &lt; in your code.</p>Look at the last line. Karthik wanted his coding page to show the code < itself. To do that, he wrote &lt;: the & becomes & on screen, and lt; stays as plain text.
Named and Numeric Entities
There are two ways to write an entity:
- Named: an easy-to-remember name, like
©for ©. - Numeric: the character’s number in Unicode, the worldwide list that gives every character a number. Write it as a decimal number (
©) or as a hexadecimal number with anx(©).
All three lines below show exactly the same copyright sign:
<p>Named entity: © 2026 Annapoorna Tiffin Centre</p>
<p>Decimal number: © 2026 Annapoorna Tiffin Centre</p>
<p>Hexadecimal number: © 2026 Annapoorna Tiffin Centre</p>Named entities are easier to read. Numeric entities work for every character, even the ones that have no name.
| Character | Named entity | Numeric entity | Used for |
|---|---|---|---|
| < | < | < | Less than, showing tags as text |
| > | > | > | Greater than |
| & | & | & | Ampersand |
| " | " | " | A double quote inside an attribute value |
| (space) | |   | Non-breaking space |
| © | © | © | Copyright |
| ® | ® | ® | Registered trademark |
| ™ | ™ | ™ | Trademark |
| ₹ | (none) | ₹ | Indian rupee |
| → ← | → ← | → ← | Arrows |
| ° | ° | ° | Degree, as in 30°C |
| × | × | × | Multiplication sign |
You do not need to memorise this table. Remember <, >, & and , and look up the rest when you need them.
: Keeping Words Together
When a line is too long, the browser moves words to the next line at the spaces. Usually that is fine. But “10” at the end of one line and “km” at the start of the next looks odd, especially on a narrow phone screen.
A non-breaking space, written , looks like a normal space but the browser never breaks the line there. Run this example. The box is narrow on purpose, to act like a small phone screen, and it uses a fixed-width font so the result is the same on every device:
<div style="width: 24ch; font-family: monospace; border: 1px solid gray; padding: 8px;">
<p>Free delivery within 10 km of our shop.</p>
<p>Free delivery within 10 km of our shop.</p>
</div>In the first sentence, “10” stays at the end of one line and “km” jumps to the next. In the second sentence, “10 km” moves to the next line together. Use between a number and its unit (10 km, 500 g, 7 AM) and in names that should not split.
Do not use many in a row to push text sideways. It looks different on every screen size. Spacing and layout are jobs for CSS, which you will learn in the CSS lessons.
The Rupee Sign: Type It or Use ₹
Today you can type most characters straight into your code: ₹, é, Hindi letters like नमस्ते, and emoji. On many Indian keyboard layouts and phone keyboards, the rupee sign is available directly. If you cannot type it, use the numeric entity ₹. There is no named entity for the rupee sign, so &rupee; does not work.
<p>Typed directly: Masala dosa ₹80</p>
<p>Decimal entity: Masala dosa ₹80</p>
<p>Hexadecimal entity: Masala dosa ₹80</p>All three lines look the same. Typing ₹ directly is easiest to read in your code. The entity is useful when your keyboard has no rupee key.
Trademark, Arrows and Emoji
The same two choices apply to every other symbol: type it, or use its entity. Emoji are just characters with large Unicode numbers, so they have numeric entities too.
<p>Annapoorna Filter Coffee™ and Annapoorna®</p>
<p>Order online → pick up at the counter ← skip the queue</p>
<p>Serve hot, at about 70°C. Plates: 2 × 3 rows.</p>
<p>Emoji typed directly: Spicy 🌶 Tasty 😋</p>
<p>Emoji as entities: Meals 🍛 Tasty 😋</p>To find the number of any character, search for its name followed by “unicode”. For example, “hot pepper emoji unicode” gives you U+1F336. The U+ part means the number is hexadecimal, so you can write it as 🌶.
The Role of meta charset
A computer stores every character as numbers. The character encoding is the rule that says which numbers mean which character. UTF-8 is the encoding that covers every language and every emoji, and it is the standard on the web.
That is why every page you have built starts its head with this line:
<head>
<meta charset="UTF-8">
<title>Annapoorna Tiffin Centre</title>
</head>It tells the browser: “read this file as UTF-8”. If it is missing, and the browser guesses a different encoding, a rupee sign typed directly can turn into strange characters like ₹. So keep <meta charset="UTF-8"> near the top of the head, and save your files as UTF-8. VS Code does this by default: you can see “UTF-8” in the status bar at the bottom right.
Entities like ₹ are written using only plain English letters and numbers, so they show correctly whatever the encoding. That is one more reason they are useful.
Real-Life Example: The Annapoorna Tiffin Centre Menu
Here is the finished menu Karthik built for his uncle. It mixes typed characters (₹ and emoji) with entities (&, , ™, → and ©):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Annapoorna Tiffin Centre: Menu</title>
</head>
<body>
<h1>Annapoorna Tiffin Centre 😋</h1>
<p>South Indian breakfast & meals, since 1995.</p>
<h2>Breakfast (7 AM to 11 AM)</h2>
<ul>
<li>Idli & Vada (2 + 1): ₹60</li>
<li>Masala Dosa: ₹80</li>
<li>Pongal: ₹70</li>
<li>Annapoorna Filter Coffee™: ₹30</li>
</ul>
<h2>Meals (12 PM to 3 PM)</h2>
<ul>
<li>Full Meals 🍛: ₹150</li>
<li>Curd Rice: ₹70</li>
</ul>
<p>Free delivery within 3 km → order at the counter.</p>
<p>Orders above ₹500 get a free sweet.</p>
<footer>
<p>© 2026 Annapoorna Tiffin Centre. All prices include GST.</p>
</footer>
</body>
</html>Try these changes, one at a time, and press Run after each:
- Add a new item “Rava Dosa: ₹90”, writing the rupee sign as
₹. - Add a line “Best served at 65°C” using
°. - Change the copyright year, and add the ® sign after the restaurant name in the heading.
Common Mistakes (and How to Fix Them)
- Typing tags as text without entities. On a page that teaches code,
<p>typed directly disappears. Fix: write<p>. - Forgetting the semicolon. A few old entities still work without it, but many do not, and the rules are confusing. Fix: always end an entity with
;. - Inventing entity names.
&rupee;and&inr;do not exist, so they show up as plain text. Fix: use₹or type ₹. - Missing
<meta charset="UTF-8">. Typed symbols like ₹ or emoji may turn into strange characters. Fix: add it as the first line inside<head>. - Using rows of
for layout. Fix: use one to keep words together, and CSS for spacing.
Practice Task: Laxmi Sweets Price List
Laxmi Sweets wants a price list for Diwali. Complete the six TODO steps in the starter code:
- Add the ₹ sign before every price (typed or as
₹) - Join “500” and “g” with
- Write the ampersand in “Kaju & Badam” as
& - Add an arrow (→) after “Order now”
- Make the
<br>tag show as text on the page - Add a footer with a © copyright line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laxmi Sweets Price List</title>
</head>
<body>
<h1>Laxmi Sweets</h1>
<!-- TODO 1: Add the rupee sign before each price -->
<!-- TODO 2: Keep "500 g" together with a non-breaking space -->
<!-- TODO 3: Write the & in "Kaju & Badam" the safe way -->
<ul>
<li>Kaju Katli, 500 g: 450</li>
<li>Motichoor Ladoo, 500 g: 240</li>
<li>Kaju & Badam Mix, 500 g: 520</li>
</ul>
<!-- TODO 4: Add an arrow after "Order now" -->
<p>Order now</p>
<!-- TODO 5: Make the br tag below show as text, not as a line break -->
<p>Website tip: use the <br> tag to start a new line.</p>
<!-- TODO 6: Add a footer with a copyright line -->
</body>
</html>Show one possible answer (try it yourself first!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laxmi Sweets Price List</title>
</head>
<body>
<h1>Laxmi Sweets</h1>
<ul>
<li>Kaju Katli, 500 g: ₹450</li>
<li>Motichoor Ladoo, 500 g: ₹240</li>
<li>Kaju & Badam Mix, 500 g: ₹520</li>
</ul>
<p>Order now →</p>
<p>Website tip: use the <br> tag to start a new line.</p>
<footer>
<p>© 2026 Laxmi Sweets</p>
</footer>
</body>
</html>Key Takeaways
- An entity starts with
&and ends with;. It stands for one character. - Write
<,>and&when you want to show <, > and & as text. - Entities can be named (
©) or numeric (©). Numeric ones work for every character. keeps words like “10 km” on the same line.- Type ₹ directly, or use
₹. There is no named entity for the rupee. <meta charset="UTF-8">makes typed symbols, Indian languages and emoji display correctly.