कुछ सबसे आम एट्रिब्यूट नामों और मानों को देखकर HTML एट्रिब्यूट्स का उपयोग करना सीखें।
HTML एट्रिब्यूट्स क्या हैं?
HTML में, एट्रिब्यूट्स मॉडिफायर टूल्स हैं जिनका उपयोग HTML एलिमेंट्स में अतिरिक्त जानकारी जोड़ने या उनके डिफ़ॉल्ट (आउट ऑफ द बॉक्स) व्यवहार को बदलने के लिए किया जाता है।
बिना किसी अतिरिक्त एट्रिब्यूट के एक HTML एलिमेंट इस तरह दिखता है:
<tag>Content</tag>एट्रिब्यूट्स के साथ HTML एलिमेंट्स को इस तरह परिभाषित किया जाता है:
<tag attribute="value">Content</tag>उस मॉडल को ध्यान में रखते हुए, आइए कुछ व्यावहारिक एट्रिब्यूट उदाहरण देखें।
Href एट्रिब्यूट
href एट्रिब्यूट HTML में सबसे महत्वपूर्ण एट्रिब्यूट्स में से एक है।
href URLs निर्दिष्ट करने के लिए उपयोग किया जाता है:
- हाइपरलिंक्स (जिन्हें केवल "लिंक्स" भी कहा जाता है)।
- या बाहरी संसाधनों को आयात करने के लिए, जैसे स्टाइल्स और स्क्रिप्ट्स।
href के लिए सबसे आम उपयोग का मामला एंकर एलिमेंट <a> पर लिंक URLs जोड़ना है:
<a href="url-path">Link text</a>ये लिंक्स उपयोगकर्ताओं को पेज से पेज पर क्लिक करके नेविगेट करने की अनुमति देते हैं, या तो आंतरिक रूप से (उसी वेबसाइट/डोमेन पर), या बाहरी रूप से (अन्य वेबसाइट डोमेन पर)।
आंतरिक लिंक
आंतरिक लिंक्स एक सापेक्ष पथ का उपयोग करते हैं:
<a href="/">Home</a>एक मानक के रूप में, "/" किसी भी वेबसाइट पर फ्रंट पेज पर ले जाता है, जो index.html पेज है।
यदि आपके पास About नामक एक पेज है और एक संबंधित HTML दस्तावेज़ about.html कहलाता है, तो आप इसे इस तरह आंतरिक रूप से लिंक कर सकते हैं:
<a href="/about">About</a>यह लिंक TechStacker के About पेज पर ले जाता है
बाहरी लिंक
बाहरी लिंक्स को एक निरपेक्ष पथ की आवश्यकता होती है:
<a href="https://www.youtube.com">YouTube.com पर जाएं</a>Target एट्रिब्यूट
जब हम एंकर एलिमेंट के साथ काम कर रहे हैं, तो आइए एक और महत्वपूर्ण एंकर एलिमेंट एट्रिब्यूट, target एट्रिब्यूट पर एक नज़र डालें।
target एट्रिब्यूट निर्दिष्ट करता है कहां लिंक्स खुलने चाहिए जब उपयोगकर्ता उन पर क्लिक करते हैं।
उदाहरण के लिए, यदि आप नीचे दिए गए बाहरी लिंक पर क्लिक करते हैं तो आप YouTube.com पर उसी ब्राउज़र टैब विंडो में पहुंच जाएंगे जिसमें आप अभी हैं:
<a href="https://www.youtube.com/">YouTube.com पर जाएं</a>YouTube.com पर जाएं
ऐसा इसलिए होता है क्योंकि डिफ़ॉल्ट रूप से <a> एलिमेंट्स में target एट्रिब्यूट होता है जिसका मान _self होता है — जिसका अर्थ है कि यह href लिंक मान को उसी विंडो में खोलता है जिसमें उपयोगकर्ता है।
तो यह लिंक एलिमेंट:
<a href="https://www.youtube.com/"></a>कंप्यूटर/ब्राउज़र द्वारा इस तरह पढ़ा जाता है:
<a href="https://www.youtube.com/" target="_self"></a>लेकिन क्या होगा यदि आप चाहते हैं कि लिंक्स नए ब्राउज़र टैब में खुलें?
कोई समस्या नहीं, आप डिफ़ॉल्ट _self मान को _blank मान से ओवरराइड कर सकते हैं:
<a href="https://www.youtube.com" target="_blank" rel="noopener" >YouTube.com पर जाएं (नए टैब में खुलता है)</a >अब YouTube लिंक नए ब्राउज़र टैब में खुलेगा:
YouTube.com पर जाएं (नया टैब)
मैं इस अवसर का उपयोग अपने YouTube चैनल को बढ़ावा देने के लिए करूंगा:
मेरे YouTube चैनल (TechStacker) पर लिंक।
एंकर/लिंक एलिमेंट के बारे में और पढ़ें।
मान रहित एट्रिब्यूट्स
एक एट्रिब्यूट आमतौर पर एक एट्रिब्यूट नाम और एक एट्रिब्यूट मान से मिलकर बनता है, जैसे एंकर एलिमेंट उदाहरण में।
हालांकि, कभी-कभी मान (व्यवहार) एट्रिब्यूट नाम में अंतर्निहित होता है।
उदाहरण के लिए, HTML <script> एलिमेंट को संशोधित करने के लिए defer एट्रिब्यूट:
<script defer src="app.js"></script>ध्यान दें कि defer एट्रिब्यूट में असाइनमेंट ऑपरेटर (=) या मान नहीं होता क्योंकि इसका व्यवहार अंतर्निहित है।
defer एक तथाकथित बूलियन एट्रिब्यूट है। बूलियन एक प्रकार के डेटा के लिए उपयोग किए जाते हैं जिनके केवल दो मान हो सकते हैं, true या false (या सक्षम/अक्षम)।
आइए defer एट्रिब्यूट पर करीब से नज़र डालें।
यह <script> एलिमेंट, बिना defer एट्रिब्यूट के, ब्राउज़र द्वारा लोड होते ही app.js मान से अपना src जावास्क्रिप्ट कोड निष्पादित करेगा:
<script src="app.js"></script>डिफ़ॉल्ट रूप से, HTML दस्तावेज़ों को ऊपर से नीचे तक, एक समय में एक लाइन पार्स (पढ़ा) जाता है। इसका मतलब है कि यदि आप अपने दस्तावेज़ के शीर्ष पर कोई जावास्क्रिप्ट डालते हैं, तो यह आपके दस्तावेज़ के बाकी हिस्सों के पार्स होने से पहले निष्पादित होगा।
यह स्क्रिप्ट एलिमेंट का डिफ़ॉल्ट व्यवहार है।
लेकिन जब आप <script> एलिमेंट में defer जोड़ते हैं तो आप उस डिफ़ॉल्ट व्यवहार को अक्षम कर देते हैं:
<script defer src="app.js"></script>अब, जावास्क्रिप्ट कोड तब तक निष्पादित नहीं होगा जब तक पूरा पेज लोड नहीं हो जाता।
शाब्दिक अर्थ में, defer का अर्थ है टालना/स्थगित करना/इंतजार करना।
स्पष्ट करने के लिए:
deferके बिना, जावास्क्रिप्ट लोड होते ही निष्पादित होता है।- साथ
deferजावास्क्रिप्ट पूरे HTML पेज के लोड होने तक निष्पादित होने की प्रतीक्षा करता है।
यदि एट्रिब्यूट्स आपको भ्रमित करते हैं, तो चिंता न करें, एक बार जब आप उन्हें अभ्यास में उपयोग करना शुरू करते हैं तो यह हमेशा 10 गुना अधिक समझ में आता है।
कस्टम एट्रिब्यूट्स
आप कस्टम एट्रिब्यूट्स भी बना सकते हैं, जिन्हें आप जावास्क्रिप्ट से नियंत्रित कर सकते हैं। कस्टम एट्रिब्यूट नामों के पहले data- लेबल होना आवश्यक है:
<tag data-custom-attribute-name="value">Content</tag>उदाहरण के लिए, मान लें हमारे पास "Apple" नामक एक फूड एलिमेंट है। जब कोई उपयोगकर्ता इस पर क्लिक करता है, तो हम एक पॉपअप डायलॉग बॉक्स में दिखाना चाहते हैं कि यह किस प्रकार का भोजन है।
ऐसा करने के लिए हम food-type नामक एक कस्टम एट्रिब्यूट बनाएंगे (याद रखें data- लेबल) और इसे <div> एलिमेंट में जोड़ देंगे जिसमें Apple टेक्स्ट है:
<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Apple </div>और वह जावास्क्रिप्ट जो इस सुविधा को काम करती है:
function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }यहां एक डेमो है।
HTML कोड कैसे काम करता है:
- सबसे पहले, हमने
<div>एलिमेंट में एकonclickएट्रिब्यूट जोड़ा। यह एक इवेंट एट्रिब्यूट है जो एक इवेंट लिसनर अटैच करता है जो सुनता है... आपने सही अनुमान लगाया, क्लिक! - फिर हम
onclickएट्रिब्यूट कोshowDetailsBox(this)का एट्रिब्यूट मान असाइन करते हैं। showDetailsBox()उस जावास्क्रिप्ट फ़ंक्शन का नाम है जिसे Apple टेक्स्ट एलिमेंट पर क्लिक करते ही कॉल किया जाता है।(this)काthisभाग एक आर्गुमेंट है जो उस ऑब्जेक्ट को संदर्भित करता है जिससे यह संबंधित है (this शुरुआती लोगों के लिए थोड़ा उन्नत है, अगर आप नहीं समझते तो ठीक है)।idएक बिल्ट-इन HTML एट्रिब्यूट है जिसका उपयोग HTML एलिमेंट्स के लिए एक यूनिक id निर्दिष्ट करने के लिए किया जाता है। इस मामले में, हमारा यूनिक idappleहै।
जावास्क्रिप्ट कोड कैसे काम करता है यह इस HTML ट्यूटोरियल के दायरे से बाहर है, इसलिए मैं आपको एक सरलीकृत व्याख्या दूंगा:
जब onclick इवेंट एट्रिब्यूट द्वारा showDetailsBox() फ़ंक्शन को कॉल किया जाता है, तो यह अपना कोड ब्लॉक { ... } निष्पादित करता है:
function showDetailsBox(food) { ... }कोड ब्लॉक के अंदर पहली लाइन पर, जावास्क्रिप्ट कस्टम data-food-type एट्रिब्यूट वाले किसी भी HTML एलिमेंट को चुनता है, और इसे (और इसके एट्रिब्यूट मान को) foodType नामक वेरिएबल को असाइन करता है:
function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") ... }दूसरी लाइन पर हम बिल्ट-इन alert() मेथड चलाते हैं (जो पॉपअप डायलॉग बॉक्स को संकेत देता है और उसे foodType का मान प्रदर्शित करने के लिए कहता है जो निश्चित रूप से fruit है:
function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }चिंता न करें यदि आप ऊपर दिए गए पूरे कोड उदाहरण को पूरी तरह से नहीं समझते हैं, तो पचाने के लिए बहुत कुछ है, खासकर शुरुआती के लिए। अभ्यास के साथ, यह समझ में आएगा!
HTML एट्रिब्यूट्स के बारे में अधिक विस्तृत जानकारी के लिए, मैं MDN वेब डॉक्स HTML एट्रिब्यूट रेफरेंस में खोज करने की सलाह देता हूं।
महत्वपूर्ण: महत्वपूर्ण सामग्री को डेटा एट्रिब्यूट्स के अंदर स्टोर न करें जो दृश्यमान और सुलभ होनी चाहिए, क्योंकि सहायक तकनीकें कभी-कभी उन्हें एक्सेस नहीं करती हैं। सर्च क्रॉलर भी डेटा एट्रिब्यूट मानों को इंडेक्स नहीं कर सकते — इसलिए यहां कोई महत्वपूर्ण SEO सामग्री न डालें।
