← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 3 of 20

HTML कैरेक्टर सेट्स

फ़र्ज़ करें आप standard letters इस्तेमाल करके किसी दोस्त को email लिख रहे हैं। लेकिन जब वे उसे खोलते हैं, तो हर space किसी अजीब symbol से replace हो जाता है, और accented letters garbled characters के रूप में दिखते हैं (जैसे café की जगह 'café')। इस समस्या को mojibake कहा जाता है। Computers सिर्फ binary code (0s और 1s) समझते हैं। एक character set एक standardized key है जो browser को बताती है कि उन binary numbers को readable text, accents, और emojis में कैसे translate करना है। सही character set डिक्लेयर करने से आपके webpage पर टूटे-फूटे, unreadable text characters दिखने से बचते हैं।

In this page:

  1. कैरेक्टर एनकोडिंग्स का विकास
  2. यूनिवर्सल UTF-8 स्टैंडर्ड
  3. head Section में Charsets डिक्लेयर करना
  4. Mojibake एरर्स का ट्रबलशूटिंग
  5. सर्वर हेडर्स बनाम HTML मेटा टैग्स

कैरेक्टर एनकोडिंग्स का विकास

कंप्यूटिंग के शुरुआती दिनों में, अलग-अलग systems अलग-अलग character encoding keys इस्तेमाल करते थे।

ASCII सिर्फ basic English characters को support करता था, जबकि ISO-8859-1 ने Western European accents के लिए support जोड़ा, जिससे जैसे-जैसे web globally फैला, layout conflicts बनते गए।

Note: आधुनिक web projects में legacy, region-specific character encodings इस्तेमाल करने से बचें।
Warning: outdated character encodings इस्तेमाल करने से आपका text, accents, और symbols टूटे-फूटे characters के रूप में render हो सकते हैं।

उदाहरण: Evolution of Character Encodings

markup 
<!-- ASCII: basic English only. ISO-8859-1: adds Western European accents -->
<meta charset="ISO-8859-1">

यूनिवर्सल UTF-8 स्टैंडर्ड

UTF-8 एक highly efficient, variable-width character encoding standard है जो mathematical symbols, global alphabets, और emojis सहित दस लाख से ज़्यादा unique characters को represent कर सकता है।

Note: character errors से बचने के लिए अपने code editor में हमेशा अपनी HTML source files को UTF-8 encoding में save करें।
Warning: अगर आपका file editor एक format में save करने के लिए set है लेकिन आपका HTML कोई दूसरा format डिक्लेयर करता है, तो browser टूटे-फूटे symbols render करेगा।

उदाहरण: The Universal UTF-8 Standard

markup 
<meta charset="UTF-8">

head Section में Charsets डिक्लेयर करना

यह सुनिश्चित करने के लिए कि आपका webpage सही तरीके से render हो, आपको character set meta tag अपने document के head section के अंदर रखना होगा। इसे file के पहले 1024 bytes के अंदर रखना ज़रूरी है ताकि browser इसे आपका text लोड करने से पहले पढ़ ले।

Note: अपने meta charset tag को अपने head tag के अंदर सबसे पहली लाइन के रूप में रखें।
Warning: charset declaration को किसी heavy script tag के नीचे रखने से character decoding में देरी हो सकती है और page load times धीमे हो सकते हैं।

उदाहरण: Declaring Charsets in the head Section

markup 
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

Mojibake एरर्स का ट्रबलशूटिंग

अगर किसी webpage पर character set declaration missing या गलत है, तो curly quotes, dashes, और accented letters जैसे special characters टूटे-फूटे, गड़बड़ symbols (जैसे é) के रूप में render होंगे। इस समस्या को mojibake कहा जाता है।

Note: अगर आपको अपने page पर अजीब symbols दिखें, तो पहले अपने meta charset tag की spelling चेक करें।
Warning: सिर्फ meta tag जोड़ देने से समस्या ठीक नहीं होगी अगर आपका code editor आपकी files को legacy format में save कर रहा है।

उदाहरण: Troubleshooting Mojibake Errors

markup 
<!-- Missing charset can cause: café to render as café -->
<meta charset="UTF-8">

सर्वर हेडर्स बनाम HTML मेटा टैग्स

जब कोई visitor आपका webpage लोड करता है, तो आपका web server एक HTTP header भेजता है जो content type और character set बताता है।

हालांकि server के HTTP header की priority आपके HTML meta tag से ज़्यादा होती है, फिर भी अपने HTML में meta charset tag शामिल करना ज़रूरी है ताकि page locally लोड होने पर भी सही तरीके से render हो।

Note: अपने pages के लिए default UTF-8 charset header भेजने के लिए अपना web server (जैसे Apache या Nginx) configure करें।
Warning: अगर आपके server के HTTP headers आपके HTML meta tags से contradict करते हैं, तो browser server settings को प्राथमिकता देगा, जिससे rendering bugs हो सकते हैं।

उदाहरण: Server Headers vs. HTML Meta Tags

markup 
<!-- HTTP header: Content-Type: text/html; charset=UTF-8 -->
<meta charset="UTF-8">
Live Example
Related Topics

HTML ब्राउज़र सपोर्ट · HTML डॉकटाइप्स · HTML कीबोर्ड शॉर्टकट्स · HTML ऑडियो/वीडियो रेफरेंस

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Browser Support Next Lesson → HTML Doctypes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.