HTML इमोजी

Symbols सत्र ने कानूनी और मुद्रा चिह्नों के लिए © और € जैसे नाम वाले entity का उपयोग किया। इमोजी अलग हैं: वे Unicode वर्ण हैं — चेहरे, इशारे, वस्तुएँ, झंडे — जिन्हें ब्राउज़र सिस्टम फ़ॉन्ट और इमोजी पैलेट से बनाते हैं। आप आमतौर पर उन्हें पाठ के रूप में चिपकाते हैं, या जब चिपकाना मुश्किल हो तो संख्यात्मक वर्ण संदर्भ पर लौटते हैं। यह सत्र सीखने वाली साइटों और उत्पाद UI कॉपी के लिए एक व्यावहारिक आदत बनाता है।

HTML दस्तावेज़ में इमोजी क्या हैं

इमोजी अभी भी पाठ है। यह वह <img> नहीं जिसे आप होस्ट करें, और न ही CSS पृष्ठभूमि। जब दस्तावेज़ UTF-8 में एन्कोड हो, ब्राउज़र code point पढ़ता है और glyph बनाता है। अर्थात इमोजी आपके HTML स्रोत के साथ उसी तरह चलते हैं जैसे लैटिन अक्षर, लेकिन उनका दृश्य डिज़ाइन ऑपरेटिंग सिस्टम और फ़ॉन्ट से आता है, केवल आपकी stylesheet से नहीं।

सीधा उत्तर

हाँ — आप HTML में इमोजी उपयोग कर सकते हैं। सबसे सरल मार्ग फ़ाइल को UTF-8 के रूप में सहेजना और वर्ण को टेक्स्ट नोड में चिपकाना है, उदाहरण के लिए पैराग्राफ या शीर्षक में। वैकल्पिक रूप से, हँसते चेहरे के लिए 😀 जैसा संख्यात्मक वर्ण संदर्भ लिखें। रोज़मर्रा के लेखन के लिए UTF-8 पेस्ट को प्राथमिकता दें। जब संपादक glyph सुरक्षित रूप से न चिपका पाए तो संख्यात्मक रूप बैकअप रखें। वास्तविक अर्थ हमेशा शब्दों में रखें, क्योंकि स्क्रीन रीडर, संस्कृतियाँ और प्लेटफ़ॉर्म डिज़ाइन इमोजी को अलग तरह से व्यवहार करते हैं।

UTF-8 नींव है

आधुनिक HTML वर्कफ़्लो पहले से UTF-8 मानते हैं। आपका संपादक .html फ़ाइलें UTF-8 में सहेजे, और दस्तावेज़ charset UTF-8 घोषित करे (charset को आप बाद के सत्र में फिर देखेंगे)। यदि फ़ाइल पुरानी encoding में सहेजी जाए, इमोजी अक्सर mojibake बन जाते हैं — बिगड़ी हुई श्रृंखलाएँ जो टूटे वर्ण जैसी लगती हैं। जब इमोजी «अचानक टूटें», सामग्री फिर से लिखने से पहले encoding जाँचें।

इमोजी को सामान्य पाठ की तरह चिपकाएँ

जब UTF-8 सही हो, चिपकाना किसी भी अन्य वर्ण की तरह काम करता है। स्रोत सीधे glyph दिखा सकता है, जो फ़ाइल पढ़ने वाले मनुष्यों के लिए ठीक है।

नमूने को पढ़ना

• 👋 और ✨ टेक्स्ट नोड के अंदर हैं — कोई विशेष HTML टैग आवश्यक नहीं
• फ़ाइल UTF-8 रहनी चाहिए नहीं तो सहेजते समय ये वर्ण बिगड़ सकते हैं
• आसपास के शब्द अभी भी संदेश ले जाते हैं; इमोजी केवल स्वर जोड़ते हैं
• शीर्षकों में इमोजी हो सकते हैं, लेकिन एक जोर आइकनों की परेड से स्पष्ट है

बैकअप के रूप में संख्यात्मक वर्ण संदर्भ

संख्यात्मक वर्ण संदर्भ अंकों से code point लिखते हैं, उदाहरण 😀 या हेक्साडेसिमल रूप जैसे 😀। वे तब उपयोगी हैं जब साथी का संपादक चिपके glyph बिगाड़ दे, या जब आप स्रोत को ASCII-only रखना चाहें और ब्राउज़र में फिर भी इमोजी दिखें। इस पाठ्यक्रम के लिए बड़े Unicode चार्ट याद रखने की ज़रूरत नहीं — पैटर्न सीखें और ज़रूरत पर कोड देखें।

पेस्ट बनाम संख्यात्मक कब चुनें

• पठनीय स्रोत और तेज़ संपादन के लिए UTF-8 में पेस्ट को प्राथमिकता दें
• जब पेस्ट विफल हो, पाइपलाइन non-ASCII हटाए, या ASCII-सुरक्षित diff चाहें तो संख्यात्मक संदर्भ चुनें
• बिना टिप्पणी के दर्जनों अस्पष्ट संख्यात्मक कोड न मिलाएँ — भविष्य का आप उन्हें याद नहीं रखेगा
• © जैसे नाम वाले entity सामान्य प्रतीकों के लिए हैं; अधिकांश इमोजी के छोटे रोज़मर्रा के HTML नाम नहीं होते, इसलिए पेस्ट या संख्यात्मक संदर्भ प्रमुख हैं

प्लेटफ़ॉर्म पर रूप और अनुभव

उसी इमोजी code point एक फ़ोन पर मित्रवत और दूसरे लैपटॉप पर थोड़ा अलग दिख सकता है। विक्रेता समय के साथ इमोजी फिर से बनाते हैं। यह अपेक्षित है। पहले शब्दों में अर्थ डिज़ाइन करें। इमोजी को वैकल्पिक सजावट मानें जो प्लेटफ़ॉर्म पर दृश्य रूप से बदल सकती है, ठीक जैसे फ़ॉन्ट।

पहुँच और स्पष्टता

स्क्रीन रीडर इमोजी को लंबे नामों से घोषित कर सकते हैं, असंगत रूप से छोड़ सकते हैं, या वाक्य प्रवाह तोड़ सकते हैं। अन्य संस्कृतियों के पाठक कोई इशारा अलग समझ सकते हैं। महत्वपूर्ण निर्देश — «फ़ॉर्म जमा करें», «आवश्यक फ़ील्ड», «त्रुटि» — इमोजी के बिना भी पठनीय रहें। स्टेटस लाइन दृष्टि वाले उपयोगकर्ताओं के लिए चेक मार्क रख सकती है, लेकिन शब्दों को अभी भी बताना चाहिए क्या हुआ।

सीखने वाले पृष्ठों के लिए डिज़ाइन आदत

• मित्रवत स्वागत के पास एक इमोजी आमंत्रित कर सकता है
• हर बुलेट को अलग इमोजी से बदलना आमतौर पर शोर बढ़ाता है
• कभी पासवर्ड, त्रुटि कोड, या अद्वितीय ID को इमोजी श्रृंखला के रूप में एन्कोड न करें
• यदि पृष्ठ केवल-पाठ संदर्भ में काम करे, अकेले शब्द अभी भी विचार सिखाएँ

इमोजी लेआउट सिस्टम नहीं हैं

लंबी इमोजी श्रृंखलाओं को स्पेसर, विभाजक, या नेविगेशन के नकली आइकन के रूप में उपयोग करने से बचें। लेआउट के लिए वास्तविक HTML संरचना (nav, सूची, शीर्षक) और CSS का उपयोग करें। इमोजी कॉपी में तब हैं जब वे स्वर में मदद करें — डिज़ाइन घटकों के विकल्प के रूप में नहीं।

अपने संपादक में अभ्यास

1. पुष्टि करें कि फ़ाइल UTF-8 के रूप में सहेजती है।
2. एक चिपका हुआ इमोजी और स्पष्ट शब्दों वाला छोटा स्वागत पैराग्राफ जोड़ें।
3. दूसरा पैराग्राफ जोड़ें जो दो अलग इमोजी के लिए केवल संख्यात्मक संदर्भ उपयोग करे।
4. ऐसी स्टेटस लाइन लिखें जहाँ वाक्य इमोजी हटाने पर भी सही रहे।
5. यदि संभव हो तो पृष्ठ दो ब्राउज़र या डिवाइस में खोलें और दृश्य अंतर नोट करें — वह भिन्नता सामान्य है।

आसान गलतियाँ

• HTML को पुरानी encoding में सहेजना ताकि इमोजी mojibake बन जाएँ
• चेतावनी, सफलता, या नेविगेशन लेबल के लिए केवल इमोजी पर निर्भर रहना
• हर शीर्षक को कई इमोजी से भरना जब तक स्कैन कठिन हो जाए
• इमोजी को होस्ट की गई छवियाँ मानना जिन्हें सर्वर पर अपलोड करना हो
• मान लेना कि हर संस्कृति किसी इशारे को आपके जैसे ही पढ़ती है

सारांश

• इमोजी Unicode पाठ वर्ण हैं, होस्ट की गई छवियाँ नहीं
• UTF-8 पेस्ट रोज़मर्रा का मार्ग है; संख्यात्मक संदर्भ ठोस बैकअप हैं
• रूप ऑपरेटिंग सिस्टम और फ़ॉन्ट के अनुसार भिन्न हो सकता है
• अर्थ वास्तविक शब्दों में रखें; स्वर के लिए इमोजी संयम से उपयोग करें
• encoding गलतियाँ, न कि «टूटे HTML टैग», बिगड़े इमोजी का आम कारण हैं