सोचिए आप किसी friend को कोई exciting news share करने के लिए text message भेज रहे हैं, लेकिन आप सिर्फ words का उपयोग कर सकते हैं। यह थोड़ा dry महसूस हो सकता है। एक quick smiley face या thumbs-up emoji जोड़ने से आपका message तुरंत warm, friendly, और expressive लगने लगता है।
HTML emojis image files नहीं हैं। ये Unicode नाम के एक बड़े international system के अंदर mapped actual text characters हैं, यानी ये आपके webpage की loading speed को धीमा किए बिना किसी भी size में साफ-साफ scale होंगे।
आप अपने page पर emojis को उनके unique numerical codes सीधे अपने HTML code में लिखकर आसानी से display कर सकते हैं।
Emojis असल में
universal Unicode standard के अंदर mapped text characters होते हैं। Browsers इन codes को पढ़ते हैं और अपने-आप उन्हें रंगीन icons के रूप में render करते हैं।
Note:
चूंकि emojis text की तरह behave करते हैं, आप CSS की font-size property इस्तेमाल करके उनका size बदल सकते हैं।
Warning:
अलग-अलग operating systems (जैसे Apple iOS या Google Android) emojis को थोड़े अलग designs के साथ render करते हैं।
उदाहरण: What is an Emoji in HTML?
markup
<p style="font-size: 48px;">😀</p>
Decimal Code Mappings इस्तेमाल करना
HTML में emojis लिखने का सबसे आम तरीका decimal codes है। हर emoji code
एक ampersand और hash symbol (&#) से शुरू होकर एक semicolon (;) पर खत्म होता है।
Note:
अपने pages में expressive icons जोड़ने के लिए आप online emoji decimal codes की व्यापक lists ढूंढ सकते हैं।
Warning:
सुनिश्चित करें कि आप अपने decimal code में hash symbol (#) शामिल करें, वरना browser इसे plain text के रूप में display करेगा।
उदाहरण: Using Decimal Code Mappings
markup
<p>😀</p>
Hexadecimal Code Mappings इस्तेमाल करना
आप hexadecimal codes इस्तेमाल करके भी
emojis लिख सकते हैं। Hexadecimal emoji codes एक ampersand, hash, और x character (&#x) से शुरू होकर एक semicolon (;) पर खत्म होते हैं।
Note:
कई development platforms emojis को hexadecimal format में list करते हैं, जिन्हें आप सीधे अपने HTML कोड में इस्तेमाल कर सकते हैं।
Warning:
अपने hexadecimal emoji codes में जरूरी x character लिखना न भूलें, क्योंकि यह browser को बताता है कि code को hexadecimal के रूप में parse करना है।
उदाहरण: Using Hexadecimal Code Mappings
markup
<p>😀</p>
Character Set Compatibility सुनिश्चित करना
अपने page पर emojis को सही तरीके से दिखाने के लिए,
आपको अपने head tag के अंदर UTF-8 को अपने document के character set के रूप में declare करना होगा। अगर आप यह declaration छोड़ देते हैं, तो browser आपके emojis को टूटे-फूटे, गड़बड़ symbols के रूप में दिखा सकता है।
Note:
charset declaration को हमेशा अपने head section के सबसे ऊपर रखें।
Warning:
UTF-8 specify न करने से character rendering errors हो सकती हैं, खासकर पुराने systems पर।
उदाहरण: Ensuring Character Set Compatibility
markup
<head>
<meta charset="UTF-8">
</head>
<p>😀</p>
Screen Readers के लिए Accessible Emojis
Screen readers को emojis
समझने में मुश्किल हो सकती है। दृष्टिबाधित users के लिए अपने emojis को accessible बनाने के लिए, अपने emojis को role="img" attribute और icon बताने वाले aria-label के साथ एक span tag में wrap करें।
Note:
अपनी site को accessible रखने के लिए decorative emojis के लिए हमेशा description labels दें।
Warning:
description labels न जोड़ने से screen readers raw emoji code पढ़ सकते हैं, जो बेकार साबित होता है।
{# 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. #}