HTML ID

जब हम HTML page में कई elements बनाते हैं, तो कई बार हमें किसी एक specific element को uniquely पहचानना होता है। ऐसे में काम आता है id attribute यह किसी भी element को एक unique पहचान (Unique Identifier) देता है — ताकि हम उसे CSS, JavaScript या Anchor Links से अलग-अलग target कर सकें।

HTML ID क्या होता है?

id attribute का मतलब है — Unique Identity (पहचान) यह HTML element को एक यूनिक नाम देता है ताकि उसे आसानी से access या style किया जा सके।

Rule: किसी एक page में एक ही ID बार-बार use नहीं होनी चाहिए। Syntax:

<tag id="uniqueName">Content</tag>

Example:

<p id="intro">यह एक paragraph है जिसकी ID "intro" है।</p>

CSS में ID को कैसे Target करते हैं

CSS में ID selector को target करने के लिए # (hash) symbol का use किया जाता है।

<style>
#intro {
  color: blue;
  font-size: 20px;
  background: lightyellow;
  padding: 10px;
}
</style>

<p id="intro">यह paragraph ID से styled है।</p>

Output: यह paragraph नीले रंग और हल्के पीले background में दिखेगा।

ID vs Class (मुख्य अंतर)

Feature	ID (`#`)	Class (`.`)
Symbol in CSS	#	.
Uniqueness	Unique (हर page में एक बार)	Reusable (कई बार)
Use Case	किसी एक specific element को style या control करना	एक जैसे कई elements को style करना
Example	`#header {}`	`.header {}`
Priority in CSS	High	Medium

Example:

<style>
#special { color: red; }
.note { color: blue; }
</style>

<p id="special">This uses ID</p>
<p class="note">This uses Class</p>

Output: पहला लाल रंग में, दूसरा नीले में।

एक ही Element पर Class और ID दोनों हो सकते हैं

हाँ! आप एक ही element में class और id दोनों use कर सकते हैं। Example:

<p id="para1" class="highlight">Hello World</p>

CSS:

#para1 { color: blue; }
.highlight { background: yellow; }

Output: Blue text + Yellow background

ID का इस्तेमाल Navigation Links में

ID को page के अंदर Jump Links (Anchor Links) के लिए भी use किया जाता है। जैसे “Back to Top” या “Go to Section” बटन।

<h2 id="about">About Section</h2>
<p>This is about our website.</p>

<a href="#about">Go to About Section</a>

Output: Link पर क्लिक करने से page “About Section” पर jump करेगा।

JavaScript में ID का उपयोग

JavaScript में ID का उपयोग करके किसी element को बहुत आसानी से access या modify किया जा सकता है। Example:

<p id="msg">Welcome to my website!</p>

<script>
document.getElementById("msg").style.color = "green";
document.getElementById("msg").innerHTML = "Message Updated via JS!";
</script>

Output: Text का color green होगा और message बदल जाएगा।

ID Attribute की कुछ Best Practices

हमेशा Unique ID दें।
ID नाम meaningful रखें (जैसे header, footer, main, btnLogin)
Space नहीं दें, इसके बजाय - या _ का use करें।

गलत Example:

<div id="my header"></div>  <!-- गलत -->

सही Example:

<div id="my-header"></div>

Real-Life Example — Page Sections

<style>
#header { background: #2196f3; color: white; padding: 20px; text-align: center; }
#content { background: #f5f5f5; padding: 20px; }
#footer { background: #333; color: white; text-align: center; padding: 15px; }
</style>

<div id="header">
  <h1>My Website</h1>
</div>

<div id="content">
  <h2>About Us</h2>
  <p>We provide web development tutorials in Hindi.</p>
</div>

<div id="footer">
  <p>© 2025 MyWebsite | All Rights Reserved</p>
</div>

Output: एक सुंदर webpage layout, हर section को unique ID के साथ।

Practice Task

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML ID Practice</title>
  <style>
    #title { text-align: center; color: darkblue; }
    #info { background: lightgray; padding: 15px; }
    #note { color: green; font-weight: bold; }
  </style>
</head>
<body>

<h2 id="title">HTML ID Example</h2>
<p id="info">यह paragraph "info" ID से styled है।</p>
<p id="note">यह paragraph विशेष ID "note" से styled है।</p>

</body>
</html>

Output: हर paragraph अलग style में — क्योंकि सबकी unique IDs हैं।

Summary

id किसी element की unique पहचान होती है।
CSS में इसे # से target करते हैं।
हर page में ID एक ही बार इस्तेमाल होनी चाहिए।
JavaScript में ID को access करना बहुत आसान है।
ID page navigation और link jump में भी काम आती है।