← Back to HTML Course | Chapter 3: Page Structure | Lesson 3 of 12

HTML आईडी

सोचिए किसी बड़े international flight terminal पर check-in का दिन है। हर किसी का एक boarding group होता है, जैसे 'Group Economy' या 'Group Business' (जो HTML classes की तरह व्यवहार करते हैं)। लेकिन जब security agents आपका passport scan करते हैं, तो वे आपके unique passport number को देखते हैं। पूरे airport में सिर्फ एक ही व्यक्ति के पास वह exact passport number हो सकता है। HTML ID भी बिल्कुल यही है। एक ID एक unique name tag है जिसे आप webpage के किसी एक element पर लगाते हैं। उस page पर कोई भी दूसरा element वह नाम share नहीं कर सकता। jump links, precise styling, या custom scripting के लिए किसी खास element को पहचानने का यह सबसे सही tool है।

In this page:

  1. id Attribute क्या है?
  2. CSS में IDs से Styling करना
  3. Anchor IDs से Jump Links बनाना
  4. JavaScript में IDs को Target करना
  5. Class बनाम ID - किसका इस्तेमाल कब करें
Syntax
markup 
<tagname id="idname">content</tagname>

<style>
  #idname {
    property: value;
  }
</style>

id Attribute क्या है?

id attribute किसी HTML element के लिए एक पूरी तरह unique identifier तय करता है। classes के विपरीत, एक ID किसी HTML page पर सिर्फ एक ही element को दिया जा सकता है।

Note: हर ID आपके पूरे HTML page structure में पूरी तरह unique होनी चाहिए।
Warning: एक ही page पर कई elements को same ID देना invalid HTML है और आपके JavaScript selectors को तोड़ देगा।

उदाहरण: What is the id Attribute?

markup 
<p id="intro">This paragraph has a unique id</p>

CSS में IDs से Styling करना

अपनी stylesheet के अंदर किसी ID को target और style करने के लिए, आप एक hash symbol (#) के बाद exact ID name लिखते हैं। ID selectors की specificity बहुत ज्यादा होती है, यानी ये standard class और element styling rules को override कर देते हैं।

Note: सामान्य styling के लिए class selectors इस्तेमाल करें, और IDs को unique layout sections के लिए बचाकर रखें।
Warning: चूंकि ID selectors की specificity बहुत ज्यादा होती है, इसलिए आपकी CSS sheet में styles को override करना मुश्किल हो सकता है।

उदाहरण: Styling with IDs in CSS

markup 
<style>
  #intro {
    font-weight: bold;
  }
</style>
<p id="intro">Styled by id</p>

Anchor IDs से Jump Links बनाना

आप IDs का इस्तेमाल करके ऐसे links बना सकते हैं जो किसी लंबे webpage पर सीधे किसी खास section पर jump कर जाएं। किसी anchor link के href को किसी element की ID (एक hash # के साथ) से match कराकर, browser क्लिक करते ही अपने-आप उस element तक scroll कर जाता है।

Note: बेहतर user experience के लिए jump links को CSS की smooth scrolling के साथ जोड़ें।
Warning: सुनिश्चित करें कि link का href element की ID से case-sensitivity में बिल्कुल match करे, ताकि links टूटने से बचें।

उदाहरण: Creating Jump Links with Anchor IDs

markup 
<a href="#section1">Jump to Section 1</a>
<h2 id="section1">Section 1</h2>

JavaScript में IDs को Target करना

JavaScript किसी खास element को dynamically locate और manipulate करने के लिए काफी हद तक IDs पर निर्भर रहता है। document.getElementById method आपके scripts में किसी खास element को capture करने के सबसे तेज़ और भरोसेमंद तरीकों में से एक है।

Note: अपने scripts में हमेशा ID की spelling जांचें, क्योंकि एक भी typo null return करके आपका कोड तोड़ सकता है।
Warning: अपने ID names की शुरुआत numbers से न करें, क्योंकि इससे आपके scripts में selector errors आ सकती हैं।

उदाहरण: Targeting IDs in JavaScript

markup 
<script>
  document.getElementById('intro');
</script>
<p id="intro">Targeted by script</p>

Class बनाम ID - किसका इस्तेमाल कब करें

classes और IDs में से चुनना तब आसान हो जाता है जब आप यह नियम याद रखें: उन styles के लिए classes इस्तेमाल करें जिन्हें आप कई elements में दोहराना चाहते हैं, और page पर किसी एक, unique element को पहचानने के लिए IDs इस्तेमाल करें।

Note: styling के लिए class attributes लगाएं, और ID attributes को anchors और scripting के लिए बचाकर रखें।
Warning: IDs को अपने primary CSS styling selectors के रूप में उपयोग करने से बचें, क्योंकि इससे आपकी stylesheets को reuse करना मुश्किल हो जाता है।

उदाहरण: Class vs. ID - When to Use Which

markup 
<p class="highlight">Repeated style via class</p>
<p id="main-title">Unique element via id</p>
Live Example
Related Topics

HTML क्लासेस · HTML आइफ्रेम्स · HTML प्रोजेक्ट · एचटीएमएल जावास्क्रिप्ट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. एक ही HTML page में कई elements पर same ID attribute इस्तेमाल करना।
  2. HTML id attribute के अंदर ही hash symbol (#) लिखना।
  3. अपने jump links या scripts में uppercase और lowercase letters की spelling गलत करना या mismatch करना।
चैप्टर सारांश
  • id attribute किसी webpage पर एक single HTML element को पूरी तरह unique identifier देता है।
  • CSS के अंदर hash prefix और उसके बाद exact ID name इस्तेमाल करके individual IDs को style करें।
  • convenient on-page jump links बनाने और JavaScript से specific elements को जल्दी target करने के लिए IDs इस्तेमाल करें।
ब्राउज़र सपोर्ट

id attribute सभी modern और legacy web browsers में natively पूरी तरह supported है।

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Classes Next Lesson → HTML Iframes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.