← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 6 of 10

HTML Charsets

सोचिए आप एक विदेशी भाषा में लिखी किताब खरीदते हैं। अगर आपके पास उसे पढ़ने के लिए कोई translator या dictionary नहीं है, तो characters आपको random symbols के एक ढेर जैसे लगेंगे। HTML character sets (या charsets) वही translators हैं। Computers सभी files, जिसमें text और images भी शामिल हैं, को binary code (0s और 1s) के रूप में store करते हैं। एक character set एक code key है जो browser को बताती है कि उन binary numbers को readable text, accents, और emojis में कैसे translate करना है। सही character set declare करना आपके webpage को टूटे हुए, unreadable text characters दिखाने से रोकता है।
Syntax
markup
<meta charset="UTF-8">

Character Set क्या है?

एक character set एक standardized character-encoding system है। शुरुआती computer systems ASCII (जो सिर्फ basic English characters को support करता था) या ISO-8859-1 इस्तेमाल करते थे, जबकि modern web standards global languages को natively support करने के लिए UTF-8 इस्तेमाल करते हैं।

Note: UTF-8 वह modern, universal standard है जो लगभग सभी global languages और symbols को support करता है।
Warning: पुराने character encodings का उपयोग करने से आपके text, accents, और symbols टूटे हुए characters के रूप में render हो सकते हैं।

उदाहरण: What is a Character Set?

markup
<meta charset="UTF-8">

UTF-8 Standard

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

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

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

markup
<meta charset="UTF-8">
<p>Supports café, 日本語, and 😀</p>

head Section में Charsets Declare करना

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

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>

Character Errors को पहचानना और ठीक करना

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

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

उदाहरण: Identifying and Fixing Character Errors

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

Server Headers बनाम HTML Meta Tags

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

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

Note: अपने pages के लिए default UTF-8 charset header भेजने के लिए अपना web server (जैसे Apache या Nginx) configure करें।
Warning: अगर आपके server के HTTP headers आपके HTML meta tags से विरोधाभास करते हैं, तो 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
{# 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 10 topics to unlock

0/10 topics done

Complete these topics first:

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.