एचटीएमएल id एट्रिब्यूट

HTML id गुण, HTML एलिमेंट को अद्वितीय id निर्दिष्ट करने के लिए उपयोग किया जाता है।

एक HTML दस्तावेज़ में कई ही एक-से-एक ही id वाले एलिमेंट नहीं हो सकते।

id गुण का उपयोग करना

id गुण HTML एलिमेंट का अद्वितीय ID निर्दिष्ट करता है। id गुण का मूल्य HTML दस्तावेज़ में अद्वितीय होना चाहिए।

id गुण, शैली पट्टी में विशेष शैली घोषणा की ओर पुनःनिर्देशित करते हैं। JavaScript भी इसका उपयोग कर सकता है, ताकि विशेष ID वाले एलिमेंट को पहुँच सकता है और उसे संचालित कर सकता है।

id की व्याकरणिकी यह है: एक बारह जुड़े ( # ) को एक id नाम के साथ लिखें। फिर, खाकोबड़े ( {}) में CSS गुण परिभाषित करें।

नीचे के उदाहरण में हमें एक <h1> एलीमेंट्स, जो id नाम "myHeader" को संदर्भित करता है, इसके अनुसार एलीमेंट्स को प्रदर्शित किया जाएगा। इस <h1> एलीमेंट्स, जो head भाग में #myHeader शैली परिभाषा को शैली सेट करने के लिए इस्तेमाल किया जाता है:

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  पृष्ठभूमि रंग: हलका नीला;
  रंग: काला;
  पैडिंग: 40पिक्सल;
  लेंग्थ-आधारित आवरण:
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

स्वयं प्रयोग करें

टिप्पणी:id नाम के लिए महत्वपूर्ण है कि यह अक्षरसंग्रह के रूप में क्या है !

टिप्पणी:id को कम से कम एक अक्षर होना चाहिए और इसमें खाली अक्षर (स्पेस, टैब आदि) नहीं होनी चाहिए。

क्लास और ID के अंतर

एक ही क्लास नाम को कई HTML एलीमेंट्स द्वारा इस्तेमाल किया जा सकता है, जबकि एकल id नाम को केवल पृष्ठ में एक ही HTML एलीमेंट्स द्वारा इस्तेमाल किया जा सकता है:

उदाहरण

<style>
/* id वाले एलीमेंट्स के लिए शैली सेट करने के लिए */
#myHeader {
  पृष्ठभूमि रंग: हलका नीला;
  रंग: काला;
  पैडिंग: 40पिक्सल;
  लेंग्थ-आधारित आवरण:
}
/* क्लास नाम "city" वाले सभी एलीमेंट्स के शैली सेट करने के लिए */
.city {
  पृष्ठभूमि रंग: टमाटर;
  रंग: श्वेत;
  पैडिंग: 10पिक्सल;
}
</style>
<!-- एकल id वाले एलीमेंट्स हो सकते हैं -->
<h1 id="myHeader">My Cities</h1>
<!-- समान क्लास नाम के कई एलीमेंट्स हो सकते हैं -->
<h2 class="city">लंदन</h2>
<p>लंदन इंग्लैंड की राजधानी है。</p>
<h2 class="city">पेरिस</h2>
<p>पेरिस फ्रांस की राजधानी है。</p>
<h2 class="city">टोक्यो</h2>
<p>टोक्यो जापान की राजधानी है。</p>

स्वयं प्रयोग करें

सूचना:कृपया हमारे CSS पाठ्यक्रम में अधिक CSS ज्ञान की जानकारी प्राप्त करें。

HTML बुकमार्क को ID और लिंक के माध्यम से प्रदर्शित किया जाता है

HTML बुकमार्क, पाठकों को वेब पृष्ठ के विशिष्ट हिस्से को जाने के लिए इस्तेमाल किए जाते हैं。

यदि पृष्ठ बहुत लंबा है, तो बुकमार्क काफी उपयोगी हो सकता है。

बुकमार्क का उपयोग करने के लिए, आपको पहले इसे बनाना होगा और फिर इसके लिए लिंक जोड़ना होगा。

तब, जब लिंक पर क्लिक किया जाता है, पृष्ठ बुकमार्क वाले स्थान पर स्क्रॉल हो जाएगा。

उदाहरण

पहले, id गुण बुकमार्क बनाने के लिए

<h2 id="C4">Chapter 4</h2>

फिर, उसी पृष्ठ में, इस बुकमार्क को लिंक जोड़ें ("Jump to Chapter 4")

उदाहरण

<a href="#C4">Chapter 4 को जाएँ</a>

स्वयं प्रयोग करें

या, दूसरे पृष्ठ में, इस बुकमार्क के लिए लिंक जोड़ें ("Jump to Chapter 4")

<a href="html_demo.html#C4">Chapter 4 को जाएँ</a>

id गुण का उपयोग JavaScript में

JavaScript भी id गुण का उपयोग करके विशेष एलिमेंट के लिए कुछ कार्य कर सकता है

JavaScript इस्तेमाल कर सकता है getElementById() विशेष id वाले एलिमेंट को पहुंचाने के लिए विधि

उदाहरण

id गुण के द्वारा टेक्स्ट को JavaScript से संभालें

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

स्वयं प्रयोग करें

सूचना:कृपया एचटीएमएल जेसक्रिप्ट इस चैप्टर में या हमारे JavaScript पाठ्यक्रम JavaScript का सीखने के लिए यहाँ

इस चैप्टर का समाहार

  • id गुण का उपयोग HTML एलिमेंट को अद्वितीय id निर्दिष्ट करने के लिए किया जाता है
  • id गुण के मान को HTML दस्तावेज़ में अद्वितीय होना चाहिए
  • CSS और JavaScript इस्तेमाल कर सकते हैं id एलिमेंट को चुनने या विशेष एलिमेंट के लिए शैली निर्धारित करने के लिए गुण
  • id गुण के मान को मेजबानी देने के लिए बैग अक्षर का प्रयोग करें
  • id गुण भी HTML बुकमार्क के लिए इस्तेमाल किया जा सकता है
  • JavaScript इस्तेमाल कर सकता है getElementById() विशेष id वाले एलिमेंट को पहुंचाने के लिए विधि