HTML एट्रिब्यूट्स HTML एलिमेंट्स के लिए अतिरिक्त प्रॉपर्टी परिभाषित करते हैं। उन्हें HTML एलिमेंट के ओपनिंग टैग में निर्दिष्ट किया जाता है, और कुछ एलिमेंट्स को कार्य करने के लिए एक एट्रिब्यूट की आवश्यकता होती है।
HTML एट्रिब्यूट्स क्या हैं, और आप उनका उपयोग कैसे करते हैं? जब आप HTML सीख रहे होते हैं, तो आप एट्रिब्यूट्स शब्द का सामना कर सकते हैं। एट्रिब्यूट्स का उपयोग HTML पेज पर एक विशिष्ट एलिमेंट के बारे में अतिरिक्त जानकारी प्रदान करने के लिए किया जाता है।
एट्रिब्यूट्स को HTML डॉक्यूमेंट के ओपनिंग टैग में निर्दिष्ट किया जाता है और आमतौर पर नाम/मान जोड़ी में निर्दिष्ट किया जाता है। उदाहरण के लिए, name नामक एक एट्रिब्यूट जिसका मान value है, इस तरह दिखाई देगा: name=value।
यह ट्यूटोरियल, उदाहरणों के संदर्भ में, HTML में एट्रिब्यूट्स की मूल बातें और उनका उपयोग क्यों किया जाता है, पर चर्चा करेगा। हम कुछ सामान्य-उद्देश्य वाले एट्रिब्यूट्स पर भी चर्चा करेंगे जो HTML में अधिकांश एलिमेंट्स पर लागू होते हैं, और जिनका सामना आप कोडिंग करते समय सबसे अधिक करने की संभावना रखते हैं।
HTML एट्रिब्यूट्स क्या हैं?
HTML मार्कअप लैंग्वेज में हर एलिमेंट में एक एट्रिब्यूट हो सकता है, जिसका उपयोग उस एलिमेंट द्वारा रखी गई अतिरिक्त प्रॉपर्टी को परिभाषित करने के लिए किया जाता है।
उदाहरण के लिए, हम एक एट्रिब्यूट निर्दिष्ट करना चाह सकते हैं जो किसी इमेज की ऊंचाई या फॉर्म एलिमेंट द्वारा संग्रहीत मान को परिभाषित करता है। ये एट्रिब्यूट्स एलिमेंट के लिए विशिष्ट हैं, जिसका अर्थ है कि उनका उपयोग किसी विशेष एलिमेंट के वेब पेज पर कैसे काम करता है, इसे अनुकूलित करने के लिए किया जा सकता है।
कुछ मामलों में, किसी एलिमेंट के लिए एट्रिब्यूट्स आवश्यक होते हैं। उदाहरण के लिए, यदि आप <a> HTML टैग के साथ काम कर रहे हैं, तो आपको href एट्रिब्यूट को परिभाषित करने की आवश्यकता है ताकि टैग को पता चले कि क्लिक किए जाने पर उसे किस URL पर इंगित करना चाहिए।
HTML में एट्रिब्यूट के दो घटक होते हैं:
- नाम आपके द्वारा बनाए जा रहे एट्रिब्यूट का नाम परिभाषित करता है।
- मान एट्रिब्यूट द्वारा धारित मान को परिभाषित करता है।
मान लीजिए हम करियरकर्मा वेबसाइट के होम पेज पर इंगित करने वाला एक लिंक परिभाषित करना चाहते हैं। ऐसा करने के लिए, हम HTML में <a> टैग का उपयोग कर सकते हैं। हालांकि, अगर हम चाहते हैं कि टैग करियरकर्मा होमपेज से लिंक हो, तो हमें href एट्रिब्यूट का भी उपयोग करना होगा।
यहाँ एक <a> टैग का उदाहरण है जो करियरकर्मा होमपेज से लिंक करता है:
<a href="https://careerkarma.com/">Career Karma</a>
यह टैग href नामक एक एट्रिब्यूट का उपयोग करता है और इसे मान "https://careerkarma.com/" असाइन करता है, जो करियरकर्मा होमपेज का URL है।
HTML में एट्रिब्यूट्स केस-इनसेंसिटिव होते हैं, लेकिन एट्रिब्यूट्स आमतौर पर लोअरकेस में लिखे जाते हैं।
HTML में सिंगल और डबल कोट्स
जब आप किसी एट्रिब्यूट को मान असाइन कर रहे होते हैं, तो आप सिंगल और डबल दोनों कोट्स का उपयोग कर सकते हैं। डबल कोट्स का उपयोग करना सबसे आम दृष्टिकोण है (और यह वही है जिसका उपयोग हमने अपने पहले उदाहरण में किया था)। हालांकि, आपके द्वारा उपयोग किया जाने वाला दृष्टिकोण आपके एट्रिब्यूट की सामग्री पर निर्भर करता है।
मान लीजिए हम एक फॉर्म एलिमेंट बना रहे हैं जिसका मान John 'Rocketman' Smith है। इस मामले में, चूंकि हमारे मान में सिंगल कोट्स हैं, हमें अपने एट्रिब्यूट नाम के लिए डबल कोट्स का उपयोग करना चाहिए। यहाँ वह कोड है जिसका उपयोग हम इस एट्रिब्यूट को घोषित करने के लिए करेंगे:
<input type="text" value="John 'Rocketman' Smith">
दूसरी ओर, मान लें कि हमारे मान में डबल कोट्स थे और यह बजाय John "Rocketman" Smith था। इस मामले में, हम अपने एट्रिब्यूट को परिभाषित करने के लिए सिंगल कोट्स का उपयोग करना चाहेंगे। यहाँ वह कोड है जिसका हम उपयोग करेंगे:
<input type="text" value='John "Rocketman" Smith'>
HTML बूलियन एट्रिब्यूट्स का उपयोग कैसे करें
कुछ एट्रिब्यूट्स नाम/मान जोड़ी संरचना का उपयोग नहीं करते। हम इन्हें बूलियन एट्रिब्यूट्स के रूप में संदर्भित करते हैं। ये एट्रिब्यूट्स केवल एक ट्रू-फाल्स मान रख सकते हैं, और उनका मान ट्रू पर सेट होता है यदि वे निर्दिष्ट हैं और फाल्स यदि वे निर्दिष्ट नहीं हैं।
बूलियन एट्रिब्यूट्स आमतौर पर HTML फॉर्म्स में उपयोग किए जाते हैं। मान लीजिए हम एक फॉर्म फील्ड बना रहे हैं जो उपयोगकर्ता से उनका नाम पूछता है। हम इस फॉर्म फील्ड को डिफ़ॉल्ट रूप से अनिवार्य बनाना चाहते हैं। हम इसे पूरा करने के लिए required बूलियन एट्रिब्यूट का उपयोग कर सकते हैं:
<input type="text" value="Name" required>
इस उदाहरण में, हमने एक इनपुट टैग परिभाषित किया है जिसमें तीन एट्रिब्यूट्स हैं। पहले दो एट्रिब्यूट्स, type और value, नाम/मान संरचना का उपयोग करते हैं। तीसरा एट्रिब्यूट, required, एक बूलियन एट्रिब्यूट है। क्योंकि हमने required बूलियन एट्रिब्यूट निर्दिष्ट किया है, इसका मान ट्रू पर सेट है।
मानक HTML एट्रिब्यूट्स का उपयोग कैसे करें
कुछ HTML एट्रिब्यूट्स हैं जो HTML में हर एलिमेंट पर लागू होते हैं। इन्हें ग्लोबल एट्रिब्यूट्स कहा जाता है।
आप पूरे वेबपेज में इनका सामना करने की संभावना रखते हैं, इसलिए यह महत्वपूर्ण है कि आप जानते हों कि वे क्या हैं और वे कैसे काम करते हैं। आइए एलिमेंट्स पर लागू चार सबसे आम मानक HTML एट्रिब्यूट्स के माध्यम से चलते हैं।
HTML id एट्रिब्यूट
id एट्रिब्यूट एक एलिमेंट को एक यूनिक आइडेंटिफायर देता है। id एट्रिब्यूट स्वयं प्रभावित नहीं करता कि HTML एलिमेंट कैसे दिखाई देता है, लेकिन यह आपको CSS या जावास्क्रिप्ट के साथ काम करते समय एक विशिष्ट एलिमेंट को मैनिपुलेट करने के लिए चुनने की अनुमति देता है।
आप किसी भी दिए गए एलिमेंट को असाइन की गई id डॉक्यूमेंट में यूनिक होनी चाहिए।
यहाँ <p> टैग में उपयोग किए गए id एट्रिब्यूट का एक उदाहरण है:
<p id="secondParagraph">Hello, there! Welcome to my site.</p>
इस उदाहरण में, हमने अपने <p> टैग को secondParagraph मान के साथ एक id एट्रिब्यूट असाइन किया है।
HTML title एट्रिब्यूट
HTML title एट्रिब्यूट का उपयोग अक्सर किसी एलिमेंट या उसके कंटेंट को समझाने के लिए किया जाता है। title एट्रिब्यूट में संग्रहीत मान एक टूलटिप के रूप में प्रदर्शित होता है जो तब प्रकट होता है जब कोई उपयोगकर्ता अपने कर्सर से एलिमेंट पर होवर करता है।
मान लीजिए हमारे पास एक इनपुट फील्ड है जो उपयोगकर्ता का नाम एकत्र करता है। हम This field is required दिखाना चाहते हैं जब उपयोगकर्ता फील्ड पर होवर करता है। हम निम्न कोड का उपयोग करके इस लक्ष्य को पूरा कर सकते हैं:
<input type="text" title="This field is required">
जब हम टेक्स्ट फील्ड पर होवर करते हैं, तो निम्न टूलटिप प्रकट होता है:
HTML style एट्रिब्यूट
HTML style एट्रिब्यूट का उपयोग किसी विशेष एलिमेंट के लिए CSS स्टाइल निर्दिष्ट करने के लिए किया जाता है। एलिमेंट को स्टाइल करने के इस दृष्टिकोण को इंलाइन स्टाइल बनाना कहा जाता है।
मान लीजिए हम एक पैराग्राफ टेक्स्ट बना रहे हैं जिसे हम ग्रे में दिखाना चाहते हैं। हम अपने टेक्स्ट के रंग को निर्दिष्ट करने के लिए style एट्रिब्यूट का उपयोग कर सकते हैं। यहाँ वह कोड है जिसका उपयोग हम इस कार्य को पूरा करने के लिए कर सकते हैं:
<p style="color: gray;">Hello, there! This is my website.</p>
यहाँ हमारे कोड का आउटपुट है:
जैसा कि आप देख सकते हैं, हमारे टेक्स्ट का रंग ग्रे में बदल गया है। ऐसा इसलिए है क्योंकि हमने एक style एट्रिब्यूट निर्दिष्ट किया और color स्टाइल को gray के बराबर बदल दिया।
एलिमेंट-विशिष्ट HTML एट्रिब्यूट्स
अन्य एट्रिब्यूट्स की एक विस्तृत श्रृंखला है जिनका आप सामना कर सकते हैं जो एक एलिमेंट के लिए विशिष्ट हैं। यहाँ कुछ उदाहरण हैं:
img src
<img src="source.png">
इस उदाहरण में, हमने src एट्रिब्यूट निर्दिष्ट किया है। इस एट्रिब्यूट का उपयोग img टैग के साथ उस फ़ाइल को इंगित करने के लिए किया जाता है जिसे टैग को वेबपेज पर रेंडर करना चाहिए।
a href
<a href="https://careerkarma.com/">Career Karma homepage</a>
इस उदाहरण में href एट्रिब्यूट का उपयोग <a> टैग को यह बताने के लिए किया जाता है कि लिंक क्लिक होने पर उपयोगकर्ता को किस साइट पर निर्देशित करना है।
img alt
<img src="source.png" alt="Image of a book">
हमारे कोड में, हमने alt एट्रिब्यूट निर्दिष्ट किया है। यह एट्रिब्यूट img टैग के लिए विशिष्ट है और वैकल्पिक टेक्स्ट निर्दिष्ट करता है जिसे वेबपेज द्वारा प्रोसेस किया जाता है यदि इमेज प्रदर्शित नहीं की जा सकती।
HTML में alt एट्रिब्यूट को स्क्रीन रीडर्स द्वारा पढ़ा जा सकता है, इसलिए कोई व्यक्ति जो नेत्रहीन है और स्क्रीन रीडर्स पर निर्भर है, वह अभी भी हमारे वेबपेज को समझ सकता है।
HTML एट्रिब्यूट्स का उपयोग कैसे करें: निष्कर्ष
एट्रिब्यूट्स HTML में एक विशिष्ट एलिमेंट पर लागू अतिरिक्त प्रॉपर्टी हैं। एट्रिब्यूट्स हमेशा एलिमेंट के ओपनिंग टैग में निर्दिष्ट होते हैं और आमतौर पर नाम/मान जोड़ी का उपयोग करते हैं।
यह ट्यूटोरियल, उदाहरणों के संदर्भ में, HTML में एट्रिब्यूट्स की मूल बातें, बूलियन एट्रिब्यूट्स, कुछ मानक HTML एट्रिब्यूट्स, और कुछ एलिमेंट-विशिष्ट एट्रिब्यूट्स के माध्यम से चला गया। अब आप जानते हैं कि HTML में एट्रिब्यूट्स का उपयोग कैसे करना है।
