विशेषताएं

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

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

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

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

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

गिनती किए गए एट्रिब्यूट

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

लाइट स्विच की इमेज के लिए मार्कअप यह है:

<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 JavaScript, so instead, we use onoff */
  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>

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

class

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

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

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

style

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

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

style एक ग्लोबल एट्रिब्यूट है. हालांकि, इसका इस्तेमाल करने का सुझाव नहीं दिया जाता. इसके बजाय, स्टाइल को अलग फ़ाइल या फ़ाइलों में तय करें. हालांकि, डेवलपमेंट के दौरान style एट्रिब्यूट काम आ सकता है. इससे स्टाइलिंग को तुरंत लागू किया जा सकता है. जैसे, टेस्टिंग के लिए. इसके बाद, 'solution' स्टाइल को कॉपी करें और उसे लिंक की गई 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>

role of button से, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को यह पता चलता है कि इस एलिमेंट को बटन की तरह काम करना चाहिए. JavaScript का इस्तेमाल यह पक्का करने के लिए किया जाता है कि बटन की फ़ंक्शनैलिटी से जुड़े वादे को पूरा किया गया हो. इसमें क्लिक और 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 readonly प्रॉपर्टी की वैल्यू क्वेरी करें.

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 सिलेक्टर में बदलकर देखें. डिसप्ले प्रॉपर्टी को न हटाएं. ऐसा करने पर, स्टाइल ब्लॉक गायब हो जाएगा.

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

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

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

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—और लिंक के बारे में ज़्यादा जानकारी देते समय, एलिमेंट के हिसाब से कई अन्य एट्रिब्यूट के बारे में भी जानेंगे.

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

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