HTML Entities

HTML Entities ऐसे कोड (codes) होते हैं जो हमें Special Characters (जैसे <, >, ©, ₹, &, ") को HTML में सही तरीके से दिखाने में मदद करते हैं। क्यों? क्योंकि HTML कुछ symbols को खुद के syntax के लिए इस्तेमाल करता है। जैसे:

<p>2 < 5</p>

ऊपर वाला कोड Browser को समझ नहीं आता, क्योंकि < को वह HTML Tag की शुरुआत मानता है।

✅ सही तरीका:

<p>2 &lt; 5</p>

यहाँ < एक HTML Entity है, जिसका मतलब है less than (<)।

HTML Entity का Basic Structure

हर entity इस तरह होती है

&entity_name;
या
&#entity_number;

उदाहरण:

&lt;   → <
&gt;   → >
&amp;  → &
&quot; → "
&apos; → '

Commonly Used HTML Entities (सबसे ज़्यादा इस्तेमाल होने वाले)

Symbol	Entity Name	Description
`<`	`<`	Less than
`>`	`>`	Greater than
`&`	`&`	Ampersand
`"`	`"`	Double quote
`'`	`'`	Single quote
`©`	`©`	Copyright
`®`	`®`	Registered trademark
`₹`	`₹`	Indian Rupee symbol
`€`	`€`	Euro symbol
`£`	`£`	Pound symbol
`¥`	`¥`	Yen symbol
`™`	`™`	Trademark symbol
`°`	`°`	Degree symbol
`½`	`½`	One-half fraction
`→`	`→`	Right arrow
`←`	`←`	Left arrow
`•`	`•`	Bullet point
	` `	Non-breaking space

Example: HTML Entities का प्रयोग

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>HTML Entities Example</title>
</head>
<body>

  <h2>HTML Entities Examples</h2>

  <p>1. Less than: 2 &lt; 5</p>
  <p>2. Greater than: 10 &gt; 2</p>
  <p>3. Ampersand: AT&amp;T</p>
  <p>4. Quote: &quot;HTML सीखना आसान है&quot;</p>
  <p>5. Rupee Symbol: &#8377;500</p>
  <p>6. Copyright: &copy; 2025 CodeKeet</p>
  <p>7. Registered: &reg; Brand</p>
  <p>8. Degree Symbol: 40&deg;C</p>
  <p>9. Arrow: Learn HTML &rarr; CSS &rarr; JavaScript</p>
  <p>10. Non-breaking space: Hello&nbsp;World</p>

</body>
</html>

Browser में Output:

1. Less than: 2 < 5
2. Greater than: 10 > 2
3. Ampersand: AT&T
4. Quote: "HTML सीखना आसान है"
5. Rupee Symbol: ₹500
6. Copyright: © 2025 CodeKeet
7. Registered: ® Brand
8. Degree Symbol: 40°C
9. Arrow: Learn HTML → CSS → JavaScript
10. Non-breaking space: Hello World

Non-breaking Space ( ) क्या है?

HTML में normally extra spaces ignore हो जाते हैं। उदाहरण:

<p>Hello     World</p>

Browser में दिखेगा: Hello World लेकिन अगर आप एक fixed space चाहते हैं:

<p>Hello&nbsp;&nbsp;World</p>

Browser में दिखेगा: Hello World (दो space दिखाई देंगे)

Numeric Entities (Alternative Representation)

हर entity को आप Unicode number से भी लिख सकते हैं।

Symbol	Unicode	Example
`©`	`©`	`©` → ©
`₹`	`₹`	`₹` → ₹
`®`	`®`	`®` → ®
`°`	`°`	`°` → °
`→`	`→`	`→` → →

HTML Entities और SEO

Entities HTML के अंदर Special Characters को सुरक्षित रखते हैं।
इससे Search Engines को कोड पढ़ने में कोई गड़बड़ नहीं होती।
यह आपकी साइट की rendering और accessibility को बेहतर बनाता है।

HTML Entity कहाँ जरूरी होती है

जब <, > जैसे symbols HTML टैग से टकरा सकते हैं।
जब किसी legal या currency symbol की जरूरत हो।
जब आप quotes (") को attribute के अंदर दिखाना चाहें।
जब space control करना हो ( )।

Practice Task

एक HTML Page बनाए जिसमें:
<, >, &, ", ' के लिए entities इस्तेमाल हों
Currency symbols ₹, €, $, £, ¥ दिखें
Temperature और Arrow symbols हों
बीच में कुछ words के बीच fixed spaces हों

Quick Reference Table

Symbol	Entity	Description
`<`	`<`	Less than
`>`	`>`	Greater than
`&`	`&`	Ampersand
`"`	`"`	Double Quote
`'`	`'`	Single Quote
`©`	`©`	Copyright
`®`	`®`	Registered
`™`	`™`	Trademark
`₹`	`₹`	Indian Rupee
`°`	`°`	Degree
`→`	`→`	Right Arrow
`←`	`←`	Left Arrow
`•`	`•`	Bullet
	` `	Non-breaking Space

Summary

पॉइंट	मतलब
HTML Entities = Special Characters दिखाने का तरीका	जैसे `<`, `>`, `&`
शुरू `&` से और खत्म `;` से	जैसे `<`, `>`
Non-breaking space: ` `	Extra space दिखाने के लिए
Unicode Code भी यूज़ कर सकते हैं	जैसे `₹`
SEO और rendering के लिए ज़रूरी	कोड सुरक्षित बनाता है

HTML Entities से आप कोड को clean, readable और browser-safe रख सकते हैं। यह छोटे लगते हैं, पर असल में यह आपके webpage को error-free और professional बनाते हैं।