HTML एट्रिब्यूट्स
आज हम HTML attributes देखते हैं — opening tag के अंदर name="value" वाली डिटेल, जो browser को element के बारे में और बताती है, जैसे लिंक कहाँ जाए।
- 1
Attribute क्या होता है
पिछले लेसन में हमने पूरा टुकड़ा बनाया था, जिसे element कहते हैं। Opening tag टुकड़े को शुरू करता है, लेकिन कभी-कभी अकेला tag काफ़ी नहीं होता। लिंक को destination चाहिए। बटन को बाद में ढूँढने के लिए एक नाम चाहिए। ये अतिरिक्त बातें attributes कहलाती हैं।
Attribute opening tag के अंदर लिखा
name="value"जोड़ा है। नीचे वाले उदाहरण मेंhref="https://codexcider.com"एक attribute है। नामhrefहै। Value वह URL है। - 2
अकेले Tags अधूरे क्यों हैं: Elements को संदर्भ और दिशा देना
मान लो तुमने
<a>Visit CodeX Cider</a>लिखा। Browser जानता है कि यह लिंक है, लेकिन क्लिक कहाँ जाए, यह नहीं जानता। Destination के बिना लिंक लगभग बेकार है।इसलिए HTML opening tag पर छोटी labelled बातें लगाने देता है। पता
hrefमें रखो, यूनिक नामidसे दो, ग्रुप के लिएclassलगाओ, या होवर टेक्स्टtitleसे जोड़ो। Tag वही रहता है। Attributes डिटेल बदलते हैं। - 3
Browser Opening Tag में Key-Value जोड़े कैसे पढ़ता है
Browser attributes को opening tag पढ़ते समय पढ़ता है। Closing tag में इन्हें मत ढूँढो।
href,id,class, औरtitleको<a ...>पर लिखो, फिर लिंक का टेक्स्ट, फिर</a>से बंद करो।आगे CSS और JavaScript के लिए दो नाम ज़रूरी हैं।
idपेज पर एक ही element को पकड़ता है।classकई elements share कर सकते हैं। इसलिए एक पेज पर एक हीidदो बार मत लगाओ। - 4
आज की प्रैक्टिस: एक लिंक पर कई Attributes की परख
नीचे एक लिंक है, चार attributes के साथ। कोड एक बार पढ़ो, फिर browser pane देखो। लिंक पर माउस रखकर
titleवाला tooltip देखो। - 5
अहम नियम: Attributes हमेशा Opening Tag में ही लिखे जाते हैं
HTML में ग्रुप वाला attribute
classलिखा जाता है,classNameनहीं।classNameReact का है। अगर attributes closing tag पर लगा दोगे, या कोई ऐसा नाम लिखोगे जो browser नहीं जानता, तो वह डिटेल काम नहीं करेगी या पेज अजीब व्यवहार करेगा।
पूरे HTML पेज में यह मान 100% यूनिक होना चाहिए। कभी भी एक ही ID दो अलग elements को मत दो। JavaScript और पेज-जंप लिंक्स के लिए उत्तम है।
एक ही class पेज पर दर्जनों elements को दी जा सकती है। इससे बटनों, कार्डों और हेडिंग्स पर एक जैसा स्टाइल लगाना बेहद आसान हो जाता है।
आप क्या सीखेंगे
- 1Attributes opening tag पर name="value" जोड़े हैं
- 2अकेले <a> को असली लिंक बनने के लिए href क्यों चाहिए
- 3Browser attributes को opening tag के साथ कैसे पढ़ता है
- 4id यूनिक है; class share हो सकता है
- 5title होवर पर tooltip दिखाता है
लाइन-बाय-लाइन
id="main-cta"पेज पर इसी एक element का यूनिक नाम। बाद में CSS में
#main-cta, या JavaScript में। यही id दोबारा मत लगाओ।class="btn"दोबारा इस्तेमाल होने वाला ग्रुप नाम। कई लिंक या बटन
class="btn"share कर सकते हैं। HTML में नामclassहै,classNameनहीं।href="https://codexcider.com"Destination URL।
hrefके बिना<a>असली काम का लिंक नहीं बनता।title="Go to CodeX Cider"अतिरिक्त टेक्स्ट जो माउस रखने पर दिखता है। यह छोटा tip है, मुख्य लेबल नहीं।
खुद ट्राई करो
https://www.google.com का एक लिंक बनाओ जिसमें id="search-link", class="btn", और title="Open Google" हो। हर attribute opening <a> tag में लगाओ।
हिंट: Opening tag में attributes, फिर लिंक टेक्स्ट, फिर </a>।
गलती कहाँ होती है
- 1.HTML फ़ाइल में
classNameलिखना। वह React का नाम है। HTML में attributeclassहै। - 2.एक पेज पर एक ही
idदो बार लगाना। Id यूनिक होना चाहिए। ग्रुप के लिएclassइस्तेमाल करो।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: HTML attribute क्या है और इसका प्रारूप क्या होता है?↓
Attribute एक element के बारे में अतिरिक्त जानकारी या व्यवहार प्रदान करता है। यह opening tag के अंदर name="value" के रूप में लिखा जाता है (जैसे href="https://codexcider.com")।
Q: id और class में क्या बुनियादी फ़र्क है?↓
id पूरे पेज पर केवल एक ही element को दिया जा सकता है (unique identifier)। जबकि class एक साझा समूह है जो एक साथ कई elements को दिया जा सकता है ताकि उनपर एक समान CSS स्टाइल लागू हो सके।
Q: क्या attributes को closing tag पर लिखा जा सकता है?↓
बिलकुल नहीं। Attributes हमेशा सिर्फ़ opening tag में लिखे जाते हैं। Closing tag (जैसे </a>) में कोई attribute मान्य नहीं होता और browser उसे पूरी तरह नज़रअंदाज़ कर देता है।