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

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</div>
    <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 का AOM इसे इस तरह दिखाता है:

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 एट्रिब्यूट का इस्तेमाल किया जा सकता है. इसके बजाय, आपको ऐसे एलिमेंट का इस्तेमाल करना चाहिए जिनमें आपकी ज़रूरत के हिसाब से भूमिका हो.

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

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

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

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

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

देखें कि आपको कितना समझ आया है

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