विशेषताएं

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

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

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

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

एचटीएमएल केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) नहीं होता, लेकिन कुछ एट्रिब्यूट की वैल्यू को कैलकुलेट किया जाता है. एचटीएमएल स्पेसिफ़िकेशन में शामिल वैल्यू, केस-इनसेंसिटिव होती हैं. तय की गई स्ट्रिंग वैल्यू, जैसे कि क्लास और आईडी के नाम, केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होते हैं. अगर एचटीएमएल में कोई एट्रिब्यूट वैल्यू केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) है, तो सीएसएस और 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 ग्लोबल एट्रिब्यूट से ज़्यादा उपलब्ध हैं. आम तौर पर, इन सभी को किसी भी एचटीएमएल एलिमेंट में जोड़ा जा सकता है. हालांकि, कुछ एलिमेंट पर सेट किए जाने पर, कुछ ग्लोबल एट्रिब्यूट का कोई असर नहीं होता. जैसे, hidden को <meta> पर मेटा कॉन्टेंट के तौर पर सेट करने पर, कोई वैल्यू नहीं दिखती.

id

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

id वैल्यू एक ऐसी स्ट्रिंग है जिसमें खाली जगह नहीं होती. अगर इसमें स्पेस है, तो दस्तावेज़ नहीं बदलेगा. हालांकि, आपको अपने एचटीएमएल, सीएसएस, और JS में एस्केप कैरेक्टर के साथ 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> को एरिया लैंडमार्क में बदला गया:

<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 रेफ़रंस मान लेता है: वह एलिमेंट जिसमें फ़ोकस होता है (एक बार में सिर्फ़ एक एलिमेंट पर फ़ोकस किया जा सकता है).

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

class

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

ध्यान दें: एलिमेंट को उनके एलिमेंट के नाम, एट्रिब्यूट, एट्रिब्यूट की वैल्यू, डीओएम ट्री में पोज़िशन वगैरह के आधार पर, सीएसएस सिलेक्टर और DOM तरीकों का इस्तेमाल करके चुना जा सकता है. सिमैंटिक एचटीएमएल, सही हुक देता है. ऐसे में, क्लास के नाम जोड़ना अक्सर ज़रूरी नहीं होता. क्लास का नाम शामिल करने और document.getElementsByClassName() को इस्तेमाल करने और ज़्यादा मज़बूत document.querySelectorAll() के साथ एट्रिब्यूट और पेज के स्ट्रक्चर के आधार पर एलिमेंट को टारगेट करने के बीच का अंतर यह है कि पहले वाली, लाइव नोड की सूची दिखाती है और बाद वाली सूची स्टैटिक होती है.

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

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

style

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

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

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

tabindex

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

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

इस पेज पर, <button> के तौर पर काम करने वाले <share-action> कस्टम एलिमेंट का इस्तेमाल करने वाली शेयर करने की सुविधा है. शून्य के 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 का इस्तेमाल यह पक्का करने के लिए किया जाता है कि बटन की मुख्य सुविधाओं के काम करने का प्रॉमिस सुरक्षित रहे. इसमें क्लिक और कीडाउन इवेंट, दोनों को मैनेज करने के साथ-साथ Enter और Space बटन को दबाए रखना भी शामिल है.

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

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

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

role

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

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

role एट्रिब्यूट से ब्राउज़र के काम करने के तरीके में कोई बदलाव नहीं होता. इसके अलावा, कीबोर्ड या पॉइंटर डिवाइस के इंटरैक्शन में भी कोई बदलाव नहीं होता. role="button" को <span> में जोड़ने से, वह <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] का इस्तेमाल करके DOM के ज़रिए ऐक्सेस करें.

<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 प्रॉपर्टी का इस्तेमाल किया जा सकता है.

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—और लिंक से जुड़े दूसरे एलिमेंट की खास जानकारी देते हैं.

आपने जो सीखा है उसकी जांच करें

विशेषताओं के बारे में अपनी जानकारी को परखें.

दस्तावेज़ में id यूनीक होना चाहिए.

गलत

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

सही

सही जवाब!

सही तरीके से बनाई गई कस्टम एट्रिब्यूट चुनें.

data-birthday

सही जवाब

birthday

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

data:birthday

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