📘 Lesson · Lesson 17

HTML Entities and Symbols

HTML Entities और Symbols

Why Entities Exist — the reserved-characters problem

<p>Rule: if marks < 33 then FAIL</p>      ← we WANT to show the < sign
                          
What the browser thinks:  "marks " ... then "< 33 then FAIL..."
                           starts looking like a TAG! Text after it may vanish.

Some characters are HTML's own grammar: < starts a tag, > ends it, & starts an entity, quotes delimit attribute values. To DISPLAY these characters as normal text, you must write their entity code — a stand-in the browser converts back to the symbol without treating it as grammar. Exactly like saying "the word 'and'" vs using "and" in a sentence — sometimes you mention a symbol instead of using it.

The Pattern

&name;        starts with &  →  short name  →  ends with ;
&#8377;       number form: & # code ;

&lt;   → <      (lt = less than)
&gt;   → >      (gt = greater than)
&amp;  → &      (the & itself needs an entity too!)

To literally SHOW this on a page: Hello You must WRITE: Hello

Fun fact you have already benefited from: every code example on THIS page is written with entities — that is exactly how a coding tutorial shows HTML without the browser executing it. You now know our secret.

The Table You Will Actually Use

Entity	Shows	Name / use
< >	< >	Show tags/comparisons as text
&	&	Ampersand — required in URLs inside HTML
" '	" '	Quotes inside attribute values
	(space)	Non-breaking space — next section
© ® ™	© ® ™	Footer copyright lines
₹	₹	Indian Rupee — every fee table needs it
× ÷	× ÷	Real multiplication/division signs (not x and /)
→ ←	→ ←	Arrows for steps and navigation hints
&hearts; &starf;	♥ ★	Ratings, likes

Honest modern note: with UTF-8 (our meta charset line!) you can paste ©, ₹, → directly and they work. Entities remain essential for the grammar characters (< > &) — those can NEVER be typed raw — and handy when you can't easily type a symbol.

The nbsp Special Case — a space that refuses to break

Normal space:   Dr. A. P. J. Abdul
                Kalam                    ← line broke INSIDE the name!

With nbsp:      Dr.&nbsp;A.&nbsp;P.&nbsp;J.&nbsp;Abdul&nbsp;Kalam
                                         ← the whole name wraps as ONE unit

Two jobs: (1) Gluing words that must never separate at a line break — initials, "₹ 500", "Class 10". (2) Forcing extra spaces — remember whitespace collapsing from the headings chapter? Browsers merge 10 spaces into 1, but 10   entities stay as 10. (For real layout spacing, CSS is still the right tool — nbsp is for text-level needs.)

Exam Corner

Q: How do you display as visible text? Write .

Q: Full form and use of  ? Non-breaking space — keeps two words together across line breaks and doesn't collapse like normal spaces.

Q: Entity for ©? For ₹? © and ₹.

Q: Why must & in a URL be written as &? Because a raw & starts an entity — the validator flags it and some following text can be misread.

Entities क्यों हैं — reserved characters की problem

<p>Rule: if marks < 33 then FAIL</p>      ← humein < ka nishan DIKHANA hai
                          
Browser kya samajhta hai:  "marks " ... phir "< 33 then FAIL..."
                            TAG jaisa lagne lagta hai! Aage ka text gayab ho sakta hai.

कुछ characters HTML की अपनी grammar हैं: < tag शुरू करता है, > खत्म, & entity शुरू करता है, quotes attribute values घेरते हैं. इन्हें normal text की तरह DIKHANE के लिए उनका entity code लिखना पड़ता है — एक बदली जिसे browser बिना grammar समझे वापस symbol बना देता है. बिल्कुल जैसे "'और' शब्द" कहना vs वाक्य में "और" use करना — कभी-कभी symbol को use नहीं, mention करना होता है.

Pattern

&name;        & se shuru  →  chhota naam  →  ; par khatam
&#8377;       number roop: & # code ;

&lt;   → <      (lt = less than)
&gt;   → >      (gt = greater than)
&amp;  → &      (khud & ko bhi entity chahiye!)

Page par sach me YEH dikhana ho: Hello To LIKHNA padega: Hello

मज़ेदार बात जिसका फायदा आप उठा ही चुके हैं: इस page का हर code example entities से लिखा है — coding tutorial HTML को बिना browser के चलाए ऐसे ही दिखाता है. अब आप हमारा राज़ जानते हैं.

वह Table जो सच में काम आएगी

Entity	दिखाता है	नाम / use
< >	< >	Tags/comparisons text की तरह दिखाना
&	&	Ampersand — HTML के अंदर URLs में ज़रूरी
" '	" '	Attribute values के अंदर quotes
	(space)	Non-breaking space — अगला section
© ® ™	© ® ™	Footer की copyright lines
₹	₹	Indian Rupee — हर fee table की ज़रूरत
× ÷	× ÷	असली गुणा/भाग के निशान (x और / नहीं)
→ ←	→ ←	Steps और navigation hints के arrows
&hearts; &starf;	♥ ★	Ratings, likes

ईमानदार modern note: UTF-8 के साथ (हमारी meta charset line!) ©, ₹, → सीधे paste करने पर भी चलते हैं. Entities grammar characters (< > &) के लिए अनिवार्य रहती हैं — वे raw कभी type नहीं हो सकते — और तब काम आती हैं जब symbol आसानी से type न हो.

nbsp का Special Case — वह space जो टूटने से मना करता है

Normal space:   Dr. A. P. J. Abdul
                Kalam                    ← line NAAM ke andar toot gayi!

nbsp ke saath:  Dr.&nbsp;A.&nbsp;P.&nbsp;J.&nbsp;Abdul&nbsp;Kalam
                                         ← poora naam EK unit ki tarah wrap hota hai

दो काम: (1) शब्दों को चिपकाना जो line break पर कभी अलग न हों — initials, "₹ 500", "Class 10". (2) Extra spaces ज़बरदस्ती लगाना — headings chapter का whitespace collapsing याद है? Browsers 10 spaces को 1 बना देते हैं, पर 10   entities 10 ही रहती हैं. (असली layout spacing के लिए सही tool अब भी CSS है — nbsp text-level ज़रूरतों के लिए है.)

Exam Corner

Q: को दिखते text की तरह कैसे display करें? लिखिए.

Q:   की full form और use? Non-breaking space — दो शब्दों को line breaks के पार साथ रखता है और normal spaces की तरह collapse नहीं होता.

Q: © की entity? ₹ की? © और ₹.

Q: URL के & को & क्यों लिखना चाहिए? क्योंकि raw & entity शुरू कर देता है — validator flag करता है और आगे का कुछ text गलत पढ़ा जा सकता है.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.