विशेषताएं

एचटीएमएल की खास जानकारी में, एट्रिब्यूट के बारे में कम शब्दों में बताया गया था. अब इनके बारे में ज़्यादा जानकारी दी जाएगी.

एट्रिब्यूट की वजह से ही एचटीएमएल इतना असरदार है. एट्रिब्यूट, स्पेस से अलग किए गए नाम और नाम/वैल्यू पेयर होते हैं. ये ओपनिंग टैग में दिखते हैं और एलिमेंट के बारे में जानकारी देते हैं. साथ ही, एलिमेंट की फ़ंक्शनशीलता के बारे में भी बताते हैं.

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

अगर एट्रिब्यूट की वैल्यू में स्पेस या खास वर्ण शामिल हैं, तो वैल्यू को कोट में रखना ज़रूरी है. इस वजह से, और टेक्स्ट को बेहतर तरीके से पढ़ने के लिए, कोटेशन का इस्तेमाल करने का सुझाव हमेशा दिया जाता है.

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

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

बूलियन एट्रिब्यूट

अगर कोई बूलियन एट्रिब्यूट मौजूद है, तो वह हमेशा 'सही' होता है. बूलियन एट्रिब्यूट में autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple,, और selected शामिल हैं. अगर इनमें से एक या उससे ज़्यादा एट्रिब्यूट मौजूद हैं, तो इसका मतलब है कि एलिमेंट बंद है, ज़रूरी है, रीड-ओनली है वगैरह. अगर ये एट्रिब्यूट मौजूद नहीं हैं, तो इसका मतलब है कि एलिमेंट ऐसा नहीं है.

बूलियन वैल्यू को छोड़ा जा सकता है, खाली स्ट्रिंग पर सेट किया जा सकता है या यह एट्रिब्यूट का नाम हो सकता है. हालांकि, वैल्यू को true स्ट्रिंग पर सेट करना ज़रूरी नहीं है. true, false, और 😀 के साथ-साथ, अमान्य वैल्यू को भी सही के तौर पर सेट कर दिया जाएगा.

ये तीन टैग एक जैसे हैं:

<input required>
<input required="">
<input required="required">

अगर एट्रिब्यूट की वैल्यू 'गलत' है, तो एट्रिब्यूट को शामिल न करें. अगर एट्रिब्यूट की वैल्यू 'सही है' है, तो एट्रिब्यूट को शामिल करें, लेकिन कोई वैल्यू न दें. उदाहरण के लिए, required="required", एचटीएमएल में मान्य वैल्यू नहीं है. हालांकि, required बूलियन है, इसलिए अमान्य वैल्यू को 'सही' के तौर पर सेट कर दिया जाता है. हालांकि, गिनती के लिए तय की गई वैल्यू वाले अमान्य एट्रिब्यूट की वैल्यू, वैल्यू न देने की वैल्यू से मेल नहीं खाती. इसलिए, वैल्यू न देने की आदत डालना आसान है. इसके बजाय, यह याद रखना मुश्किल है कि कौनसे एट्रिब्यूट बूलियन हैं और कौनसे एट्रिब्यूट के लिए गिनती के लिए तय की गई वैल्यू दी जा सकती है. साथ ही, यह भी याद रखना मुश्किल है कि कौनसे एट्रिब्यूट के लिए अमान्य वैल्यू दी जा सकती है.

'सही' और 'गलत' के बीच टॉगल करते समय, वैल्यू को टॉगल करने के बजाय, JavaScript की मदद से एट्रिब्यूट को जोड़ें और हटाएं.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

ध्यान दें कि SVG जैसी एक्सएमएल भाषाओं में, सभी एट्रिब्यूट में वैल्यू शामिल होनी चाहिए. इसमें बूलियन एट्रिब्यूट भी शामिल हैं.

एनोटेट किए गए एट्रिब्यूट

एनोटेट किए गए एट्रिब्यूट को कभी-कभी बूलियन एट्रिब्यूट के साथ गलत समझा जाता है. ये एचटीएमएल एट्रिब्यूट होते हैं, जिनमें पहले से तय मान्य वैल्यू का सीमित सेट होता है. बूलियन एट्रिब्यूट की तरह ही, अगर एट्रिब्यूट मौजूद है, लेकिन उसकी वैल्यू मौजूद नहीं है, तो उसकी डिफ़ॉल्ट वैल्यू दिखती है. उदाहरण के लिए, अगर आपने <style contenteditable> शामिल किया है, तो डिफ़ॉल्ट रूप से यह <style contenteditable="true"> पर सेट हो जाता है.

हालांकि, बूलियन एट्रिब्यूट के उलट, एट्रिब्यूट को शामिल न करने का मतलब यह नहीं है कि वह गलत है. साथ ही, यह ज़रूरी नहीं है कि जिस एट्रिब्यूट की वैल्यू मौजूद न हो वह सही हो. इसके अलावा, अमान्य वैल्यू के लिए डिफ़ॉल्ट वैल्यू, शून्य वाली स्ट्रिंग के तौर पर नहीं हो सकती. उदाहरण के लिए, अगर contenteditable मौजूद नहीं है या अमान्य है, तो यह डिफ़ॉल्ट रूप से inherit पर सेट हो जाता है. साथ ही, इसे साफ़ तौर पर false पर सेट किया जा सकता है.

डिफ़ॉल्ट वैल्यू, एट्रिब्यूट पर निर्भर करती है. बूलियन वैल्यू के उलट, एट्रिब्यूट मौजूद होने पर अपने-आप "सही" नहीं होते. <style contenteditable="false"> को शामिल करने पर, एलिमेंट में बदलाव नहीं किया जा सकता. अगर वैल्यू अमान्य है, जैसे कि <style contenteditable="😀"> या <style contenteditable="contenteditable">, तो वैल्यू अमान्य होती है और डिफ़ॉल्ट रूप से inherit पर सेट हो जाती है.

ज़्यादातर मामलों में, एट्रिब्यूट की वैल्यू की सूची में मौजूद वैल्यू मौजूद न होने और अमान्य होने की स्थिति एक जैसी होती है. उदाहरण के लिए, अगर किसी <input> पर type एट्रिब्यूट मौजूद नहीं है, मौजूद है, लेकिन उसकी कोई वैल्यू नहीं है या उसकी वैल्यू अमान्य है, तो यह डिफ़ॉल्ट रूप से text पर सेट हो जाता है. ऐसा होना आम बात है, लेकिन यह कोई नियम नहीं है. इसलिए, यह जानना ज़रूरी है कि कौनसे एट्रिब्यूट बूलियन हैं और कौनसे एट्रिब्यूट एनोटेटेड हैं. अगर हो सके, तो वैल्यू शामिल न करें, ताकि आप उन्हें गलत न समझें. साथ ही, ज़रूरत के हिसाब से वैल्यू देखें.

ग्लोबल एट्रिब्यूट

ग्लोबल एट्रिब्यूट ऐसे एट्रिब्यूट होते हैं जिन्हें किसी भी एचटीएमएल एलिमेंट पर सेट किया जा सकता है. इनमें <head> में मौजूद एलिमेंट भी शामिल हैं. 30 से ज़्यादा ग्लोबल एट्रिब्यूट हैं. सिद्धांत रूप से, इन सभी एट्रिब्यूट को किसी भी एचटीएमएल एलिमेंट में जोड़ा जा सकता है. हालांकि, कुछ एलिमेंट पर सेट किए जाने पर, कुछ ग्लोबल एट्रिब्यूट का कोई असर नहीं पड़ता. उदाहरण के लिए, <meta> पर hidden सेट करने पर, मेटा कॉन्टेंट नहीं दिखता.

id

ग्लोबल एट्रिब्यूट id का इस्तेमाल, किसी एलिमेंट के लिए यूनीक आइडेंटिफ़ायर तय करने के लिए किया जाता है. इसका इस्तेमाल कई कामों के लिए किया जाता है. जैसे: - लिंक के फ़्रेगमेंट आइडेंटिफ़ायर का टारगेट. - स्क्रिप्टिंग के लिए किसी एलिमेंट की पहचान करना. - फ़ॉर्म एलिमेंट को उसके लेबल से जोड़ना. - सहायक टेक्नोलॉजी के लिए लेबल या जानकारी देना. - सीएसएस में टारगेटिंग स्टाइल (ज़्यादा सटीक या एट्रिब्यूट सिलेक्टर के तौर पर).

id वैल्यू, बिना स्पेस वाली स्ट्रिंग होती है. अगर इसमें कोई स्पेस है, तो दस्तावेज़ नहीं टूटेगा. हालांकि, आपको अपने एचटीएमएल, सीएसएस, और जेएस में एस्केप वर्ण का इस्तेमाल करके id को टारगेट करना होगा. अन्य सभी वर्ण मान्य हैं. id की वैल्यू 😀 या .class हो सकती है, लेकिन ऐसा करना अच्छा नहीं है. अपने मौजूदा और आने वाले समय के लिए प्रोग्रामिंग को आसान बनाने के लिए, id के पहले वर्ण को अक्षर बनाएं और सिर्फ़ ASCII अक्षरों, अंकों, _, और - का इस्तेमाल करें. id के नाम रखने का कोई नियम तय करना और उस पर बने रहना अच्छा होता है, क्योंकि id की वैल्यू केस-सेंसिटिव होती हैं.

दस्तावेज़ मेंid यूनीक होना चाहिए. अगर id का इस्तेमाल एक से ज़्यादा बार किया जाता है, तो हो सकता है कि आपके पेज का लेआउट न टूटे. हालांकि, हो सकता है कि आपका JavaScript, लिंक, और एलिमेंट इंटरैक्शन उम्मीद के मुताबिक काम न करें.

लिंक फ़्रैगमेंट आइडेंटिफ़ायर

नेविगेशन बार में चार लिंक होते हैं. हम लिंक एलिमेंट के बारे में बाद में बताएंगे. फ़िलहाल, यह जान लें कि लिंक सिर्फ़ एचटीटीपी पर आधारित यूआरएल तक सीमित नहीं हैं. ये मौजूदा दस्तावेज़ (या दूसरे दस्तावेज़ों) के पेज के सेक्शन के लिए फ़्रैगमेंट आइडेंटिफ़ायर हो सकते हैं.

मशीन लर्निंग वर्कशॉप की साइट पर, पेज हेडर में मौजूद नेविगेशन बार में चार लिंक शामिल हैं:

href एट्रिब्यूट, वह हाइपरलिंक उपलब्ध कराता है जिस पर क्लिक करने पर उपयोगकर्ता को भेजा जाता है. जब किसी यूआरएल में हैश मार्क (#) के बाद वर्णों की कोई स्ट्रिंग शामिल होती है, तो वह स्ट्रिंग फ़्रैगमेंट आइडेंटिफ़ायर होती है. अगर वह स्ट्रिंग, वेब पेज में मौजूद किसी एलिमेंट के id से मेल खाती है, तो फ़्रैगमेंट उस एलिमेंट का ऐंकर या बुकमार्क होता है. ब्राउज़र उस पॉइंट पर स्क्रोल करेगा जहां ऐंकर तय किया गया है.

ये चार लिंक, हमारे पेज के चार सेक्शन पर ले जाते हैं. इन सेक्शन की पहचान, उनके id एट्रिब्यूट से की जाती है. जब उपयोगकर्ता नेविगेशन बार में मौजूद किसी भी चार लिंक पर क्लिक करता है, तो फ़्रैगमेंट आइडेंटिफ़ायर से लिंक किया गया एलिमेंट, स्क्रीन पर दिखने लगता है. यह एलिमेंट, मैच करने वाले आईडी में # को घटाने के बाद का एलिमेंट होता है.

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

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

<nav> लिंक में मौजूद फ़्रैगमेंट आइडेंटिफ़ायर की तुलना करने पर, आपको पता चलेगा कि हर लिंक <main> में मौजूद <section> के id से मेल खाता है. ब्राउज़र हमें "पेज पर सबसे ऊपर" लिंक मुफ़्त में देता है. href="#top", केस-इनसेंसिटिव या सिर्फ़ href="#" सेट करने पर, उपयोगकर्ता को पेज पर सबसे ऊपर ले जाया जाएगा.

href में हैश-मार्क सेपरेटर, फ़्रैगमेंट आइडेंटिफ़ायर का हिस्सा नहीं है. फ़्रैगमेंट आइडेंटिफ़ायर, हमेशा यूआरएल का आखिरी हिस्सा होता है और इसे सर्वर पर नहीं भेजा जाता.

CSS चयनकर्ता

सीएसएस में, #feedback जैसे आईडी सिलेक्टर का इस्तेमाल करके हर सेक्शन को टारगेट किया जा सकता है. इसके अलावा, ज़्यादा सटीक नतीजे पाने के लिए, केस-सेंसिटिव एट्रिब्यूट सिलेक्टर, [id="feedback"] का इस्तेमाल किया जा सकता है.

स्क्रिप्ट तैयार करना

MLW.com पर, सिर्फ़ माउस का इस्तेमाल करने वाले लोगों के लिए एक ईस्टर एग है. लाइट स्विच पर क्लिक करने से, पेज को चालू और बंद किया जा सकता है.

लाइट स्विच की इमेज का मार्कअप यह है: html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> id एट्रिब्यूट का इस्तेमाल, getElementById() तरीके के पैरामीटर के तौर पर किया जा सकता है. साथ ही, # प्रीफ़िक्स के साथ, querySelector() और querySelectorAll() तरीकों के पैरामीटर के हिस्से के तौर पर भी किया जा सकता है.

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

हमारा एक JavaScript फ़ंक्शन, एलिमेंट को उनके id एट्रिब्यूट के हिसाब से टारगेट करने के लिए इस सुविधा का इस्तेमाल करता है:

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

एचटीएमएल <label> एलिमेंट में एक for एट्रिब्यूट होता है, जिसकी वैल्यू उस फ़ॉर्म कंट्रोल का id होता है जिसके साथ यह जुड़ा होता है. हर फ़ॉर्म कंट्रोल पर id शामिल करके और हर कंट्रोल को लेबल के for एट्रिब्यूट के साथ जोड़कर, साफ़ तौर पर लेबल बनाने से यह पक्का होता है कि हर फ़ॉर्म कंट्रोल का एक लेबल हो.

हर लेबल को सिर्फ़ एक फ़ॉर्म कंट्रोल से जोड़ा जा सकता है. हालांकि, किसी फ़ॉर्म कंट्रोल से एक से ज़्यादा लेबल जुड़े हो सकते हैं.

अगर फ़ॉर्म कंट्रोल को <label> ओपनिंग और क्लोज़िंग टैग के बीच नेस्ट किया गया है, तो for और id एट्रिब्यूट की ज़रूरत नहीं है: इसे "अनजान" लेबल कहा जाता है. लेबल की मदद से, सभी उपयोगकर्ताओं को यह पता चलता है कि हर फ़ॉर्म कंट्रोल किस काम का है.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

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

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

रेडियो बटन शामिल करते समय, हम एक जैसे नाम वाले सभी बटन को <fieldset> में शामिल करते हैं. साथ ही, <legend> पूरे सेट के लिए लेबल या सवाल होता है.

सुलभता सुविधाओं के अन्य इस्तेमाल

सुलभता और इस्तेमाल करने से जुड़ी सुविधाओं के लिए, id का इस्तेमाल सिर्फ़ लेबल में नहीं किया जाता. टेक्स्ट के बारे में जानकारी में, <section> को क्षेत्र के लैंडमार्क में बदला गया था. इसके लिए, <h2> के id को <section> के aria-labelledby की वैल्यू के तौर पर रेफ़र किया गया था, ताकि सुलभ नाम दिया जा सके:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

aria-* की 50 से ज़्यादा स्थितियां और प्रॉपर्टी हैं, जिनका इस्तेमाल करके यह पक्का किया जा सकता है कि एलिमेंट ऐक्सेस किए जा सकते हैं या नहीं. aria-labelledby, aria-describedby, aria-details, और aria-owns की वैल्यू के तौर पर, स्पेस से अलग की गई id रेफ़रंस सूची ली जाती है. aria-activedescendant, जो फ़िलहाल फ़ोकस किए गए डिसेंटेंट एलिमेंट की पहचान करता है. इसकी वैल्यू के तौर पर, एक id रेफ़रंस लिया जाता है: वह एलिमेंट जिस पर फ़ोकस है (एक बार में सिर्फ़ एक एलिमेंट पर फ़ोकस किया जा सकता है).

class

class एट्रिब्यूट, सीएसएस (और JavaScript) की मदद से एलिमेंट को टारगेट करने का एक और तरीका उपलब्ध कराता है. हालांकि, एचटीएमएल में इसका कोई और काम नहीं है. हालांकि, फ़्रेमवर्क और कॉम्पोनेंट लाइब्रेरी इसका इस्तेमाल कर सकती हैं. क्लास एट्रिब्यूट की वैल्यू के तौर पर, एलिमेंट के लिए केस-सेंसिटिव क्लास की सूची दी जाती है. इस सूची में क्लास को स्पेस से अलग किया जाता है.

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

अब तक, MLW ने किसी भी क्लास का इस्तेमाल नहीं किया है. क्या किसी साइट को किसी क्लास के नाम के बिना लॉन्च किया जा सकता है? हम देखेंगे.

style

style एट्रिब्यूट की मदद से, इनलाइन स्टाइल लागू की जा सकती हैं. ये स्टाइल, उस एक एलिमेंट पर लागू होती हैं जिस पर एट्रिब्यूट सेट किया गया है. style एट्रिब्यूट की वैल्यू के तौर पर, सीएसएस प्रॉपर्टी वैल्यू के पेयर इस्तेमाल किए जाते हैं. वैल्यू का सिंटैक्स, सीएसएस स्टाइल ब्लॉक के कॉन्टेंट जैसा ही होता है: सीएसएस की तरह ही, प्रॉपर्टी के बाद कोलन लगा होता है. साथ ही, हर एलान के आखिर में सेमीकोलन लगा होता है, जो वैल्यू के बाद आता है.

स्टाइल सिर्फ़ उस एलिमेंट पर लागू होती हैं जिस पर एट्रिब्यूट सेट होता है. साथ ही, अगर नेस्ट किए गए एलिमेंट या <style> ब्लॉक या स्टाइल शीट में मौजूद अन्य स्टाइल डिक्लेरेशन से बदलाव नहीं किया जाता है, तो स्टाइल, एलिमेंट के वंशजों को इनहेरिट की गई प्रॉपर्टी वैल्यू देती हैं. वैल्यू में, सिर्फ़ उस एलिमेंट पर लागू किए गए एक स्टाइल ब्लॉक के कॉन्टेंट के बराबर कॉन्टेंट होता है. इसलिए, इसका इस्तेमाल जनरेट किए गए कॉन्टेंट के लिए, कीफ़्रेम ऐनिमेशन बनाने या किसी अन्य at-rules को लागू करने के लिए नहीं किया जा सकता.

style ग्लोबल एट्रिब्यूट है, लेकिन इसका इस्तेमाल करने का सुझाव नहीं दिया जाता. इसके बजाय, स्टाइल को किसी अलग फ़ाइल या फ़ाइलों में तय करें. हालांकि, style एट्रिब्यूट, डेवलपमेंट के दौरान काम का साबित हो सकता है. इससे, जांच के लिए तुरंत स्टाइलिंग की जा सकती है. इसके बाद, 'समाधान' स्टाइल को लिंक की गई CSS फ़ाइल में चिपकाएं.

tabindex

tabindex एट्रिब्यूट को किसी भी एलिमेंट में जोड़ा जा सकता है, ताकि उस पर फ़ोकस किया जा सके. tabindex वैल्यू से यह तय होता है कि इसे टैब ऑर्डर में जोड़ा जाएगा या नहीं. इसके अलावा, इसे डिफ़ॉल्ट टैब ऑर्डर के बजाय किसी दूसरे ऑर्डर में भी जोड़ा जा सकता है.

tabindex एट्रिब्यूट की वैल्यू के तौर पर कोई पूर्णांक डाला जा सकता है. नेगेटिव वैल्यू (-1 का इस्तेमाल करना आम बात है) से किसी एलिमेंट को फ़ोकस पाने की सुविधा मिलती है. जैसे, JavaScript के ज़रिए. हालांकि, यह एलिमेंट को टैब करने के क्रम में नहीं जोड़ता. tabindex एट्रिब्यूट की वैल्यू 0 होने पर, एलिमेंट पर फ़ोकस किया जा सकता है और टैब करने पर उस पर पहुंचा जा सकता है. साथ ही, इसे सोर्स कोड के क्रम में पेज के डिफ़ॉल्ट टैब क्रम में जोड़ दिया जाता है. 1 या इससे ज़्यादा वैल्यू देने पर, एलिमेंट को फ़ोकस के क्रम में प्राथमिकता दी जाती है. हालांकि, ऐसा करने का सुझाव नहीं दिया जाता.

इस पेज पर, शेयर करने की सुविधा है. इसमें <share-action> कस्टम एलिमेंट का इस्तेमाल किया गया है, जो <button> के तौर पर काम करता है. कीबोर्ड के डिफ़ॉल्ट टैबिंग क्रम में कस्टम एलिमेंट जोड़ने के लिए, शून्य के tabindex को शामिल किया गया है:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

button का role, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को बताता है कि इस एलिमेंट को बटन की तरह इस्तेमाल किया जाना चाहिए. JavaScript का इस्तेमाल यह पक्का करने के लिए किया जाता है कि बटन की सुविधा सही तरीके से काम करे. इसमें click और keydown, दोनों इवेंट को हैंडल करना शामिल है. साथ ही, Enter और Space बटन को दबाने पर होने वाली कार्रवाइयों को हैंडल करना भी शामिल है.

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

अगर किसी दस्तावेज़ में tabindex के 1 या उससे ज़्यादा एलिमेंट शामिल हैं, तो उन्हें अलग टैब क्रम में शामिल किया जाता है. जैसा कि आपको codepen में दिखेगा, टैब करने पर वैल्यू का क्रम अलग होता है. सबसे छोटी वैल्यू से सबसे बड़ी वैल्यू के क्रम में वैल्यू दिखती हैं. इसके बाद, सोर्स के क्रम में वैल्यू दिखती हैं.

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

role

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

कुछ सामान्य यूज़र इंटरफ़ेस (यूआई) विजेट, जैसे कि कॉम्बोबॉक्स, मेन्यूबार, टैबलिस्ट, और ट्रीग्रिड के लिए, एचटीएमएल में कोई नेटिव विकल्प नहीं है. उदाहरण के लिए, टैब वाला डिज़ाइन पैटर्न बनाते समय, tab, tablist, और tabpanel रोल का इस्तेमाल किया जा सकता है. यूज़र इंटरफ़ेस को देखने वाले व्यक्ति को, अनुभव से पता होता है कि विजेट पर नेविगेट कैसे किया जाता है. साथ ही, उससे जुड़े टैब पर क्लिक करके, अलग-अलग पैनल कैसे दिखाए जाते हैं. अलग-अलग पैनल दिखाने के लिए बटन के ग्रुप का इस्तेमाल करने पर, <button role="tab"> के साथ tab भूमिका को शामिल करने से, स्क्रीन रीडर इस्तेमाल करने वाले व्यक्ति को यह पता चलता है कि फ़िलहाल फ़ोकस में मौजूद <button>, बटन की तरह काम करने के बजाय, मिलते-जुलते पैनल को टॉगल करके दिखा सकता है.

role एट्रिब्यूट, ब्राउज़र के काम करने के तरीके में बदलाव नहीं करता. साथ ही, कीबोर्ड या पॉइंटर डिवाइस के इंटरैक्शन में भी बदलाव नहीं करता. <span> में role="button" जोड़ने से, वह <button> नहीं बन जाता. इसलिए, हमारा सुझाव है कि सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल उनके मकसद के मुताबिक करें. हालांकि, जब सही एलिमेंट का इस्तेमाल करना संभव नहीं होता, तो role एट्रिब्यूट की मदद से, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को यह जानकारी दी जा सकती है कि किसी गैर-सेमांटिक एलिमेंट को, सेमांटिक एलिमेंट की भूमिका में फिर से इस्तेमाल किया गया है.

contenteditable

contenteditable एट्रिब्यूट को true पर सेट करने पर, एलिमेंट में बदलाव किया जा सकता है और उस पर फ़ोकस किया जा सकता है. साथ ही, उसे टैब ऑर्डर में वैसे ही जोड़ा जाता है जैसे tabindex="0" सेट किया गया हो. Contenteditable एक एनोटेटेड एट्रिब्यूट है, जिसमें true और false वैल्यू इस्तेमाल की जा सकती हैं. अगर एट्रिब्यूट मौजूद नहीं है या उसकी वैल्यू अमान्य है, तो डिफ़ॉल्ट वैल्यू inherit होगी.

ये तीन ओपनिंग टैग एक जैसे हैं:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

<style contenteditable="false"> शामिल करने पर, एलिमेंट में बदलाव नहीं किया जा सकता. हालांकि, <textarea> की तरह डिफ़ॉल्ट रूप से बदलाव किए जा सकने वाले एलिमेंट में बदलाव किया जा सकता है. अगर वैल्यू अमान्य है, जैसे कि <style contenteditable="😀"> या <style contenteditable="contenteditable">, तो वैल्यू डिफ़ॉल्ट रूप से inherit पर सेट हो जाती है.

एक से दूसरी स्थिति पर टॉगल करने के लिए, HTMLElement.isContentEditable रीड-ओनली प्रॉपर्टी की वैल्यू की क्वेरी करें.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

इसके अलावा, editor.contentEditable को true, false या inherit पर सेट करके भी इस प्रॉपर्टी की जानकारी दी जा सकती है.

ग्लोबल एट्रिब्यूट सभी एलिमेंट पर लागू किए जा सकते हैं. इनमें <style> एलिमेंट भी शामिल हैं. लाइव सीएसएस एडिटर बनाने के लिए, एट्रिब्यूट और थोड़ी सी सीएसएस का इस्तेमाल किया जा सकता है.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

style के color को inherit के बजाय, किसी अन्य पर सेट करके देखें. इसके बाद, style को p सिलेक्टर में बदलकर देखें. डिसप्ले प्रॉपर्टी को न हटाएं, नहीं तो स्टाइल ब्लॉक गायब हो जाएगा.

कस्टम विशेषताएं

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

data- प्रीफ़िक्स जोड़कर, अपनी पसंद का कोई भी कस्टम एट्रिब्यूट बनाया जा सकता है. अपने एट्रिब्यूट को data- से शुरू होने वाला कोई भी नाम दिया जा सकता है. इसके बाद, लोअरकेस में ऐसे वर्ण जोड़े जा सकते हैं जो xml से शुरू न होते हों और जिनमें कोलन (:) न हो.

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

ब्राउज़र, किसी भी data- प्रीफ़िक्स वाले एट्रिब्यूट के लिए डिफ़ॉल्ट बिहेवियर लागू नहीं करेंगे. हालांकि, आपके कस्टम एट्रिब्यूट को दोहराने के लिए, डिफ़ॉल्ट रूप से मौजूद डेटासेट एपीआई है. कस्टम प्रॉपर्टी, JavaScript की मदद से ऐप्लिकेशन से जुड़ी जानकारी को शेयर करने का बेहतरीन तरीका है. एलिमेंट में data-name के तौर पर कस्टम एट्रिब्यूट जोड़ें. साथ ही, डीओएम की मदद से इन एलिमेंट को ऐक्सेस करें. इसके लिए, एलिमेंट पर dataset[name] का इस्तेमाल करें.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

एट्रिब्यूट के पूरे नाम का इस्तेमाल करके getAttribute() का इस्तेमाल किया जा सकता है. इसके अलावा, dataset प्रॉपर्टी का इस्तेमाल करके भी getAttribute() का इस्तेमाल किया जा सकता है.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

dataset प्रॉपर्टी, हर एलिमेंट के data- एट्रिब्यूट का DOMStringMap ऑब्जेक्ट दिखाती है. <blockquote> पर कई कस्टम एट्रिब्यूट होते हैं. डेटासेट प्रॉपर्टी का मतलब है कि आपको उन कस्टम एट्रिब्यूट के नाम और वैल्यू ऐक्सेस करने के लिए, यह जानने की ज़रूरत नहीं है कि वे क्या हैं:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

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

देखें कि आपको क्या समझ आया

एट्रिब्यूट के बारे में अपनी जानकारी की जांच करें.