HTML Lessons

HTML Charsets

जब हम HTML पेज बनाते हैं, तो उसमें हम text, symbols, emojis, languages (जैसे हिंदी, अंग्रेजी, अरबी, जापानी आदि) का इस्तेमाल करते हैं। लेकिन क्या कभी सोचा है कि ब्राउज़र को कैसे पता चलता है कि कौन से characters कौनसे symbols या अक्षर हैं? इसका जवाब है — Character Set (Charset)

Character Set क्या होता है?

Character Set एक mapping system होता है जो यह बताता है कि कौन-सा binary code (0s और 1s) किस character या symbol को represent करता है। उदाहरण के लिए:
  • Binary 01000001 = English letter A
  • Binary 01000010 = B
अगर आपका HTML page यह नहीं बताएगा कि कौनसा charset यूज़ हो रहा है, तो ब्राउज़र गलत अक्षर (garbled text) दिखा सकता है — जैसे é की जगह é।

Common Character Sets

Charset Description (विवरण)
UTF-8 Universal encoding – हर भाषा और emoji को support करता है
ISO-8859-1 Western European languages (पुराना standard)
UTF-16 Unicode का एक और version – Asian scripts के लिए भी अच्छा
ASCII केवल 128 English characters तक सीमित (पुराना system)

HTML में Charset कैसे Set करें

HTML के <head> section में <meta> tag के द्वारा charset define किया जाता है।

Example:

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>Character Set Example</title>
</head>
<body>
  <h1>नमस्ते दुनिया!</h1>
  <p>This page uses UTF-8 encoding.</p>
</body>
</html>
Explanation:
  • <meta charset="UTF-8"> ब्राउज़र को बताता है कि यह पेज UTF-8 encoding में लिखा गया है।
  • UTF-8 हर भाषा के characters को सही तरीके से दिखाने में सक्षम है।

अगर Charset ना दिया जाए तो क्या होता है?

अगर आप <meta charset> नहीं देंगे, तो ब्राउज़र default encoding (जैसे ISO-8859-1) ले सकता है। इससे हिंदी या emoji जैसे characters गलत दिखेंगे। उदाहरण:

नमस्ते → è˙âë

(यह तब होता है जब encoding गलत हो।)

UTF-8 क्यों Best माना जाता है?

  • UTF-8 की खासियतें:
  • हर भाषा के अक्षर को support करता है (English, Hindi, Chinese आदि)।
  • Emoji और Symbols को भी दिखाता है।
  • Web का 95% हिस्सा अब UTF-8 पर चलता है।
  • Lightweight और backward compatible (ASCII compatible) है।

Example: Different Languages in UTF-8

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>UTF-8 Example</title>
</head>
<body>
  <h2>Different Languages with UTF-8</h2>
  <p>English: Hello!</p>
  <p>हिंदी: नमस्ते!</p>
  <p>العربية: مرحبًا!</p>
  <p>中文: 你好!</p>
  <p>Emoji: 😊🌍🔥</p>
</body>
</html>

यह सब सही तरीके से तभी दिखेगा जब <meta charset="UTF-8"> दिया गया हो।

HTML Charset Validation Tip

  • आप अपने पेज की encoding को verify कर सकते हैं:
  • ब्राउज़र में → View Page Source
  • <meta charset="UTF-8"> चेक करें
  • Developer Tools में → “Network → Headers → Content-Type”
  • वहाँ भी charset दिखाई देगा:
Content-Type: text/html; charset=UTF-8

Quick Summary

Topic Explanation
Charset Defines how characters are encoded and displayed
Most Common UTF-8
Set Using <meta charset="UTF-8">
Why Important Text और Emoji सही दिखाने के लिए
UTF-8 Advantage Universal, multi-language support

अगर आप चाहते हैं कि आपका HTML पेज हर भाषा, हर symbol और हर emoji को perfect तरीके से दिखाए — तो हमेशा <meta charset="UTF-8"> का इस्तेमाल करें।