HTML Academy · पाठ

lang एट्रिब्यूट और स्क्रीन रीडर

सही उच्चारण के लिए पृष्ठ और एलिमेंट की भाषा घोषित करें

पाठ 1, कुल 4 में से13 चरण

lang एट्रिब्यूट और स्क्रीन रीडर, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

lang विशेषता क्या करती है

lang विशेषता BCP-47 भाषा टैग का उपयोग करके किसी तत्व की सामग्री की भाषा घोषित करती है। स्क्रीन रीडर इसका उपयोग सही उच्चारण इंजन और आवाज़ चुनने के लिए करते हैं, जबकि खोज इंजन इसका उपयोग भाषा के आधार पर सामग्री दर्ज करने के लिए करते हैं।

html तत्व पर सेट करना

हर पृष्ठ को मूल तत्व पर अपनी प्राथमिक भाषा घोषित करनी चाहिए: अंग्रेज़ी के लिए <html lang="en">, तुर्की के लिए <html lang="tr"> और जापानी के लिए <html lang="ja">। इसके बिना स्क्रीन रीडर उपयोगकर्ता के सिस्टम की डिफ़ॉल्ट भाषा पर निर्भर करते हैं और अक्सर हर शब्द का गलत उच्चारण करते हैं।

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>

BCP-47 टैग

टैग BCP-47 का पालन करते हैं: भाषा कोड (en, tr, ja), वैकल्पिक क्षेत्र (en-US, en-GB, zh-Hant, zh-Hans) और कभी-कभी लिपि। सबसे विशिष्ट और सटीक टैग का उपयोग करें; जब क्षेत्र के अनुसार वर्तनी महत्वपूर्ण न हो, तो केवल "en" पर्याप्त है।

पृष्ठ के बीच भाषा बदलना

किसी अलग भाषा वाले खंड को अपनी lang विशेषता से चिह्नित करें: <blockquote lang="fr">Bonjour</blockquote>। स्क्रीन रीडर उस खंड के लिए आवाज़ बदल देता है, जिससे बहुभाषी पृष्ठों पर भी उच्चारण सही रहता है।

<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>

CSS भाषा चयनकर्ता

CSS :lang(en) के माध्यम से भाषा को लक्ष्य बना सकता है: blockquote:lang(fr)::before { content: "« "; }। चयनकर्ता निकटतम पूर्वज की lang विशेषता से मेल खाता है। इसका उपयोग भाषा के अनुसार बदलने वाली टाइपोग्राफ़िक परंपराओं, जैसे उद्धरण चिह्न और रिक्ति, के लिए करें।

उच्चारण के लिए इसका महत्व

अंग्रेज़ी के "लाइव" और फ़्रेंच के "लिव" का उच्चारण अलग होता है। जर्मन शब्द का उच्चारण "वीर" है, "वेयर" नहीं। अंग्रेज़ी के लिए कॉन्फ़िगर किया गया स्क्रीन रीडर आसपास के खंड को जर्मन या फ़्रेंच बताए बिना दोनों का गलत उच्चारण करेगा।

लिंक की भाषाओं के लिए hreflang

लिंक पर hreflang विशेषता (<a href="/fr/" hreflang="fr">Français</a>) खोज इंजनों और सहायक तकनीक को लिंक किए गए पृष्ठ की भाषा बताती है। अंतरराष्ट्रीय खोज-अनुकूलन की पूरी व्याप्ति के लिए इसे पूरी साइट पर लगाए गए hreflang लिंक टैग के साथ मिलाकर उपयोग करें।

उपयोगकर्ता की भाषा पहचानना

JavaScript उपयोगकर्ता की पसंदीदा भाषाएँ navigator.languages से पढ़ सकता है। इसमें प्राथमिकता के क्रम में BCP-47 टैग की एक सरणी होती है। इसका उपयोग डिफ़ॉल्ट भाषा-क्षेत्र चुनने या भाषा बदलने का सुझाव देने के लिए करें — लेकिन ब्राउज़र की डिफ़ॉल्ट भाषा के बजाय उपयोगकर्ता की स्पष्ट पसंद को हमेशा प्राथमिकता दें।

सर्वर पर पहचान

HTTP का Accept-Language अनुरोध शीर्षक ब्राउज़र के विन्यास से उपयोगकर्ता की भाषा प्राथमिकताएँ बताता है। पहले अनुरोध पर सही स्थानीयकृत HTML भेजने के लिए सर्वर पर इसका उपयोग करें, ताकि किसी भी JavaScript के चलने से पहले उपयोगकर्ता को अपनी भाषा दिखाई दे।

एक पृष्ठ पर कई भाषाएँ

विकिपीडिया लेख, भाषा सीखने वाले ऐप और शब्दकोश नियमित रूप से कई भाषाओं को मिलाते हैं। छोटे अंशों को भी अपनी lang विशेषता से चिह्नित करें। हर खंड के लिए अलग lang न होने पर स्क्रीन रीडर की आवाज़ और CSS के उद्धरण चिह्न पृष्ठ की डिफ़ॉल्ट भाषा पर लौट जाते हैं।

सामान्य गलतियाँ

<html> पर lang न लगाना (बहुत आम गलती), गलत भाषा कोड का उपयोग करना (lang="english" के बजाय lang="en"), या जहाँ केवल भाषा पर्याप्त हो वहाँ क्षेत्रीय कोड का उपयोग करना। इन्हें CI में पकड़ने के लिए W3C सत्यापनकर्ता और Lighthouse की सुलभता जाँच का उपयोग करें।

ज्ञान-जाँच

स्क्रीन रीडर उपयोगकर्ताओं के लिए <html> पर lang विशेषता विशेष रूप से महत्वपूर्ण क्यों है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

पृष्ठ की भाषा <html> पर BCP-47 टैग (en, tr, ja, zh-Hant) से घोषित करें। पृष्ठ के बीच होने वाले भाषा परिवर्तनों को span/section की lang विशेषताओं से चिह्नित करें, ताकि स्क्रीन रीडर आवाज़ बदल सकें। CSS :lang() भाषा-विशिष्ट टाइपोग्राफ़ी लागू कर सकता है। lang हमेशा सेट करें — इसमें कोई लागत नहीं आती और स्क्रीन रीडर के उच्चारण, खोज-अनुकूलन तथा CSS चयन में बहुत सुधार होता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “lang एट्रिब्यूट और स्क्रीन रीडर” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “lang एट्रिब्यूट और स्क्रीन रीडर” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“lang एट्रिब्यूट और स्क्रीन रीडर” में मैं क्या सीखूँगा?

सही उच्चारण के लिए पृष्ठ और एलिमेंट की भाषा घोषित करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“lang एट्रिब्यूट और स्क्रीन रीडर” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ