HTML id Attribute: Unique ID, लिंक, CSS, JavaScript
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
id attribute element को एक unique नाम देता है। एक ही पेज पर दो elements की id एक जैसी नहीं होनी चाहिए। इसका इस्तेमाल तीन कामों के लिए होता है: पेज के किसी खास हिस्से से link करना, एक ही element को CSS से style करना, और JavaScript को वह element खोजकर बदलने देना।
किसी section से link करना
किसी heading को id दें — <h2 id="contact">Contact Us</h2> — और link सीधे उस तक जा सकता है: <a href="#contact">Go to Contact</a>। ऐसे ही "back to top" links और लंबे पेज का navigation काम करते हैं।
Id से styling
CSS में id को hash से चुना जाता है: #header { background: navy; }। क्योंकि id unique होती है, यह rule ठीक एक element को style करता है। लेकिन styling के लिए classes को प्राथमिकता दें — ids इतनी खास होती हैं कि बाद में उन्हें override करना मुश्किल होता है, जिससे बड़ी साइटों पर सिरदर्द होता है।
JavaScript और id
JavaScript document.getElementById("myBox") से elements को id से खोजता है। यह सबसे आम तरीका है जिससे script किसी एक खास element को पकड़कर उसका text बदलता है, उसे छिपाता है, या उससे कोई value पढ़ता है। आप यह JavaScript वाले पाठ में देखेंगे।
id="Header" और id="header" दो अलग ids हैं। भ्रम से बचने के लिए ids को lowercase और एक जैसा रखें।Id क्या है
Id पेज पर एक ही element का unique नाम है। Class से अलग, जिसे कई elements साझा कर सकते हैं, id का इस्तेमाल प्रति पेज सिर्फ एक बार हो सकता है। इसी से आप एक सटीक element की ओर इशारा करते हैं — link से, CSS से, या JavaScript से। CSS में आप इसे सामने hash लगाकर लिखते हैं, जैसे #header।
याद रखने की तरकीब: id = एक का नाम (hash # से), class = समूह का नाम (dot . से) — एक पेज पर id सिर्फ एक बार, class जितनी बार चाहें।
सिंटैक्स
<h2 id="contact">Contact Us</h2>
<!-- a link that jumps to it -->
<a href="#contact">Go to Contact</a>
<style>#contact { color: blue; }</style>
Link पर click करने से पेज सीधे id="contact" वाली heading तक scroll हो जाता है। ऐसे ही "back to top" links और पेज के menus काम करते हैं — हर section की एक id होती है, और menu उन ids से link करता है।
आम गलतियाँ
- एक पेज पर एक ही id दो बार इस्तेमाल करना — वह unique होनी चाहिए, बिना किसी अपवाद के।
- Id में space डालना, जैसे
id="my section"— id एक शब्द होती है। - Id को number से शुरू करना — वह अक्षर से शुरू होनी चाहिए।
- सब कुछ ids से style करना — ids CSS में बहुत मज़बूत होती हैं और बाद में override करना मुश्किल होता है। Classes बेहतर डिफ़ॉल्ट हैं।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Id</title>
<style>
#main-title { color: navy; }
</style>
</head>
<body>
<h1 id="main-title">Welcome</h1>
<p><a href="#contact">Jump to Contact</a></p>
<p style="height: 300px;">(scroll down…)</p>
<h2 id="contact">Contact</h2>
<p>Email: support@kamaldnp.com</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. HTML में id क्या होती है?
यह एक पेज पर किसी एक एलिमेंट का अनोखा नाम है, जिसका इस्तेमाल किसी सेक्शन से लिंक करने, एक एलिमेंट को स्टाइल करने या JavaScript से उसे खोजने में होता है।
2. क्या दो एलिमेंट की id एक जैसी हो सकती है?
नहीं, एक पेज पर id अनोखी होनी चाहिए, वरना लिंक और JavaScript पहले वाले एलिमेंट को चुन लेंगे और व्यवहार अजीब होगा।
3. id से किसी सेक्शन का लिंक कैसे बनाते हैं?
हेडिंग को id दें और फिर हैश वाले लिंक से उससे जोड़ें, जैसे contact लिंक सीधे contact हेडिंग पर ले जाता है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
