सिमैंटिक एचटीएमएल

100 से ज़्यादा एचटीएमएल एलिमेंट और अपनी ज़रूरत के हिसाब से एलिमेंट बनाने की सुविधा से, आपके कॉन्टेंट को कई तरीकों से मार्कअप किया जा सकता है. हालांकि, दूसरे तरीकों से बेहतर तरीके से ये काम किए जा सकते हैं. खास तौर पर, शब्दों के हिसाब से.

सेमैंटिक का मतलब है " मतलब से जुड़ा". सिमैंटिक एचटीएमएल लिखने का मतलब है कि अपने कॉन्टेंट को हर एलिमेंट के मतलब के आधार पर स्ट्रक्चर करने के लिए, एचटीएमएल एलिमेंट का इस्तेमाल करना. यह कॉन्टेंट, उसके दिखने के तरीके के हिसाब से नहीं होता.

इस सीरीज़ में अब तक कई एचटीएमएल एलिमेंट शामिल नहीं हैं, लेकिन एचटीएमएल को जाने बिना भी, ये दो कोड स्निपेट दिखाते हैं कि सिमैंटिक मार्कअप, कॉन्टेंट के कॉन्टेक्स्ट की जानकारी कैसे दे सकता है. दोनों स्क्रोलिंग सेव करने के लिए, ipsum lorem के बजाय वर्ड काउंट का इस्तेमाल करते हैं. "तीस शब्द" को 30 शब्दों में बढ़ाने के लिए, अपनी कल्पना का इस्तेमाल करें:

पहला कोड स्निपेट <div> और <span> का इस्तेमाल करता है. ये दो एलिमेंट ऐसे एलिमेंट होते हैं जिनमें सिमैंटिक वैल्यू नहीं होती.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

क्या आपको समझ में आता है कि इन शब्दों का क्या मतलब है? दरअसल ऐसा नहीं है.

आइए इस कोड को सिमैंटिक एलिमेंट का इस्तेमाल करके दोबारा लिखते हैं:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

किस कोड ब्लॉक का मतलब बताया गया है? सिर्फ़ <div> और <span> के बिना मतलब वाले एलिमेंट का इस्तेमाल करके, यह नहीं बताया जा सकता कि पहले कोड ब्लॉक का कॉन्टेंट क्या है. दूसरे कोड के उदाहरण में सिमैंटिक एलिमेंट शामिल है. इससे, नॉन-कोडर को ज़रूरत के हिसाब से मकसद और मतलब समझने में मदद मिलती है. इसके लिए, एचटीएमएल टैग का सामना नहीं करना पड़ता. इससे डेवलपर को पेज की आउटलाइन को समझने के लिए ज़रूरी जानकारी मिल जाती है. भले ही, वह कॉन्टेंट न समझ पाए. जैसे, किसी विदेशी भाषा वाला कॉन्टेंट.

दूसरे कोड ब्लॉक में, हम कॉन्टेंट को समझे बिना भी आर्किटेक्चर को समझ सकते हैं. सिमैंटिक एलिमेंट ही मतलब और स्ट्रक्चर देते हैं. यह बताया जा सकता है कि पहला हेडर साइट का बैनर है. इसमें <h1> को साइट का नाम माना जा सकता है. फ़ुटर, साइट का फ़ुटर होता है: ये पांच शब्द, कोई कॉपीराइट स्टेटमेंट या कारोबार का पता हो सकते हैं.

सिमैंटिक मार्कअप का मकसद सिर्फ़ मार्कअप को पढ़ना आसान नहीं होता, बल्कि इसका मकसद मार्कअप को अपने-आप समझने वाले टूल के लिए आसान बनाना होता है. डेवलपर टूल से पता चलता है कि सिमैंटिक एलिमेंट, मशीन से पढ़ने लायक स्ट्रक्चर कैसे उपलब्ध कराते हैं.

सुलभता ऑब्जेक्ट मॉडल (एओएम)

जब ब्राउज़र, मिले कॉन्टेंट को पार्स करता है, तब दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) और सीएसएस ऑब्जेक्ट मॉडल (CSSOM) बनाता है. इसके बाद, यह सुलभता ट्री भी बनाता है. स्क्रीन रीडर जैसे सहायक डिवाइस, कॉन्टेंट को पार्स करने और समझने के लिए एओएम का इस्तेमाल करते हैं. डीओएम, दस्तावेज़ के सभी नोड का ट्री होता है. एओएम, डीओएम के सिमैंटिक वर्शन की तरह होता है.

आइए, तुलना करते हैं कि Firefox के सुलभता पैनल में, ये दोनों दस्तावेज़ स्ट्रक्चर कैसे रेंडर होते हैं:

पहला कोड स्निपेट.

दूसरा कोड स्निपेट.

दूसरे स्क्रीन शॉट में, दूसरे कोड ब्लॉक में चार लैंडमार्क भूमिकाएं दिखाई गई हैं. यह "नेविगेशन" के लिए <header>, <main>, <footer>, और <nav> नाम के सिमैंटिक लैंडमार्क का आसानी से इस्तेमाल करता है. लैंडमार्क, वेब कॉन्टेंट का स्ट्रक्चर मुहैया कराते हैं. इनसे यह पक्का होता है कि स्क्रीन रीडर का इस्तेमाल करने वाले लोग, कॉन्टेंट के अहम सेक्शन के कीबोर्ड पर आसानी से जा सकते हैं.

ध्यान दें कि <header> और <footer> लैंडमार्क होते हैं और banner और contentinfo की भूमिका तब बनती है, जब उन्हें अन्य लैंडमार्क में नेस्ट नहीं किया गया हो. Chrome का एओएम इसे इस तरह दिखाता है:

पहला कोड स्निपेट.

दूसरा कोड स्निपेट.

Chrome डेवलपर टूल को देखकर, आपको पता चलेगा कि सिमैंटिक एलिमेंट का इस्तेमाल करते समय सुलभता ऑब्जेक्ट मॉडल के बीच अंतर देखने को मिलता है. इसका मतलब है कि इस्तेमाल न किए जाने पर.

यह बिलकुल साफ़ है कि सिमैंटिक एलिमेंट का इस्तेमाल करने से सुलभता बेहतर होती है. साथ ही, नॉन-सिमैंटिक एलिमेंट का इस्तेमाल करने से सुलभता कम होती है. डिफ़ॉल्ट रूप से, एचटीएमएल को आसानी से ऐक्सेस किया जा सकता है. डेवलपर के रूप में हमारा काम, एचटीएमएल के डिफ़ॉल्ट तौर पर ऐक्सेस किए जा सकने वाले डेटा को सुरक्षित रखना और यह पक्का करना होता है कि हम सुलभता सुविधाओं को ज़्यादा से ज़्यादा लोगों तक पहुंचाएं. डेवलपर टूल में एओएम की जांच की जा सकती है.

role एट्रिब्यूट

role एट्रिब्यूट, दस्तावेज़ के कॉन्टेक्स्ट में किसी एलिमेंट की भूमिका के बारे में बताता है. role एट्रिब्यूट एक ग्लोबल एट्रिब्यूट है. इसका मतलब है कि यह सभी एलिमेंट के लिए मान्य है, जिसे WhatWG एचटीएमएल स्पेसिफ़िकेशन के बजाय, ARIA स्पेसिफ़िकेशन के तहत मान्य है. इस एट्रिब्यूट में, इस सीरीज़ की बाकी सभी चीज़ों के बारे में बताया गया है.

हर सिमैंटिक एलिमेंट की अपनी भूमिका होती है. कुछ एलिमेंट, कॉन्टेक्स्ट पर निर्भर करते हैं. जैसा कि हमने Firefox के सुलभता डेवलपर टूल के स्क्रीनशॉट में देखा, टॉप लेवल <header>, <main>, <footer>, और <nav> सभी लैंडमार्क थे, जबकि <main> में नेस्ट किया गया <header> एक सेक्शन था. Chrome के स्क्रीनशॉट में इन एलिमेंट की ARIA भूमिकाएं दी गई हैं: <main> main है, <nav> navigation है, और <footer> है, क्योंकि यह दस्तावेज़ का फ़ुटर था और contentinfo है. जब <header>, दस्तावेज़ का हेडर होता है, तो डिफ़ॉल्ट भूमिका banner होती है. यह सेक्शन को, ग्लोबल साइट के हेडर के तौर पर बताता है. जब किसी <header> या <footer> को सेक्शनिंग एलिमेंट में नेस्ट किया जाता है, तो यह एक लैंडमार्क भूमिका नहीं होती है. डेवलपर टूल के दोनों स्क्रीनशॉट में यह जानकारी दिखती है.

एओएम बनाने के लिए, एलिमेंट की भूमिका के नाम ज़रूरी हैं. सहायक टेक्नोलॉजी और कुछ मामलों में, सर्च इंजन के लिए एलिमेंट या 'भूमिका' के सिमेंटिक्स ज़रूरी होते हैं. सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोग, आगे बढ़ने और कॉन्टेंट का मतलब समझने के लिए सिमेंटिक्स पर भरोसा करते हैं. एलिमेंट की भूमिका की मदद से, उपयोगकर्ता उस कॉन्टेंट को तुरंत ऐक्सेस कर सकते हैं जिसे वे खोज रहे हैं. सबसे अहम बात यह है कि भूमिका, स्क्रीन रीडर के उपयोगकर्ता को फ़ोकस करने के बाद इंटरैक्टिव एलिमेंट से इंटरैक्ट करने का तरीका बताती है.

बटन, लिंक, रेंज, और चेकबॉक्स जैसे इंटरैक्टिव एलिमेंट में इंप्लिसिट रोल होते हैं. ये सभी एलिमेंट, कीबोर्ड टैब के क्रम में अपने-आप जुड़ जाते हैं. साथ ही, इन सभी एलिमेंट में, उपयोगकर्ता की कार्रवाई के लिए डिफ़ॉल्ट रूप से काम करने की सुविधा होती है. इंप्लिसिट रोल या साफ़ तौर पर बताई गई role वैल्यू से, उपयोगकर्ता को एलिमेंट के हिसाब से डिफ़ॉल्ट उपयोगकर्ता इंटरैक्शन की उम्मीद के बारे में पता चलता है.

role एट्रिब्यूट का इस्तेमाल करके, किसी भी एलिमेंट को एक भूमिका दी जा सकती है. इसमें, टैग में बताई गई भूमिका से अलग भूमिका भी शामिल करें. उदाहरण के लिए, <button> का इंप्लिसिट रोल button है. role="button" की मदद से, किसी भी एलिमेंट को सिमैंटिक रूप से बटन में बदला जा सकता है: <p role="button">Click Me</p>.

role="button" को किसी एलिमेंट में जोड़ने पर, स्क्रीन रीडर को यह जानकारी मिलेगी कि एलिमेंट एक बटन है. हालांकि, इससे एलिमेंट के दिखने या काम करने के तरीके में कोई बदलाव नहीं होता. button एलिमेंट में कई सुविधाएं होती हैं. इसके लिए, आपको कोई काम नहीं करना पड़ता. button एलिमेंट, दस्तावेज़ के टैब क्रम में अपने-आप जुड़ जाता है. इसका मतलब है कि कीबोर्ड पर डिफ़ॉल्ट रूप से फ़ोकस किया जा सकता है. Enter और Space, दोनों बटन को चालू करते हैं. बटन में वे सभी तरीके और प्रॉपर्टी भी होती हैं जो उन्हें HTMLButtonElement इंटरफ़ेस से मिलती हैं. अगर बटन के लिए सिमैंटिक बटन का इस्तेमाल नहीं किया जाता है, तो आपको उन सभी सुविधाओं को फिर से प्रोग्राम करना होगा. <button> का इस्तेमाल करना बहुत आसान है.

नॉन-सिमैंटिक कोड ब्लॉक के लिए, एओएम के स्क्रीनशॉट पर वापस जाएं. ध्यान दें कि नॉन-सिमैंटिक एलिमेंट में इंप्लिसिट रोल नहीं होते हैं. हम हर एलिमेंट को कोई भूमिका असाइन करके, नॉन-सिमैंटिक वर्शन को सिमैंटिक बना सकते हैं:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

हालांकि, role एट्रिब्यूट का इस्तेमाल, किसी भी एलिमेंट में सिमेंटिक्स जोड़ने के लिए किया जा सकता है. हालांकि, आपको इंप्लिसिट रोल वाले एलिमेंट का इस्तेमाल करना चाहिए.

सिमैंटिक एलिमेंट

खुद से पूछें कि "कौनसा एलिमेंट मार्कअप के इस सेक्शन के फ़ंक्शन को सबसे अच्छी तरह से दिखाता है?" की मदद से, इस काम के लिए सबसे अच्छा एलिमेंट चुना जा सकता है. टैग का सिमैंटिक मतलब होने पर, चुना गया एलिमेंट और इस्तेमाल किए जा रहे टैग, दिखाई जा रही कॉन्टेंट के हिसाब से होने चाहिए.

एचटीएमएल का इस्तेमाल कॉन्टेंट को स्ट्रक्चर करने के लिए किया जाना चाहिए, न कि कॉन्टेंट के दिखने के तरीके को तय करने के लिए. ऐसा लगता है कि यह सीएसएस, सीएसएस की दुनिया है. कुछ एलिमेंट, खास तरह से दिखने के लिए तय किए जाते हैं, लेकिन किसी एलिमेंट का इस्तेमाल इस आधार पर न करें कि उपयोगकर्ता एजेंट स्टाइलशीट, एलिमेंट को डिफ़ॉल्ट रूप से कैसे दिखाती है. इसके बजाय, एलिमेंट के सिमैंटिक मतलब और फ़ंक्शन के आधार पर हर एलिमेंट को चुनें. लॉजिकल, सिमैंटिक, और बेहतर तरीके से एचटीएमएल को कोड करने से, यह पक्का करने में मदद मिलती है कि सीएसएस सही तरीके से लागू की गई है.

कोड के तौर पर काम के लिए सही एलिमेंट चुनने का मतलब है कि आपको अपने एचटीएमएल को रीफ़ैक्टर करने या उस पर टिप्पणी करने की ज़रूरत नहीं पड़ेगी. अगर आप जॉब के लिए सही एलिमेंट का इस्तेमाल करना चाहते हैं, तो अक्सर काम के लिए सही एलिमेंट चुना जाता है. अगर ऐसा नहीं किया है, तो हो सकता है कि ऐसा न हो. जब आपको पता हो कि हर एलिमेंट का सिमेंटिक क्या है और आपको पता है कि सही एलिमेंट चुनना क्यों ज़रूरी है, तो आम तौर पर बिना ज़्यादा मेहनत किए सही एलिमेंट चुना जा सकता है.

अगले सेक्शन में, अपना दस्तावेज़ स्ट्रक्चर बनाने के लिए सिमैंटिक एलिमेंट का इस्तेमाल किया जाएगा.

जांचें कि आपको कितना समझ आया

सिमैंटिक एचटीएमएल के बारे में अपनी जानकारी को परखें.

आपको हमेशा <button> एलिमेंट में role="button" जोड़ना चाहिए.

गलत.

सही जवाब! <button> एलिमेंट के पास यह भूमिका पहले से मौजूद है.

सही.

फिर से कोशिश करें.