HTML के पहले कदम - पाठ 8 - टैग्स के सार्वभौमिक गुण

हम पहले ही बात कर चुके हैं कि अलग-अलग टैग्स के अपने-अपने गुण (attributes) होते हैं। अब यह जानने का समय है कि कुछ गुण ऐसे भी होते हैं जो लगभग सभी टैग्स के लिए समान होते हैं। आइए उनके सबसे लोकप्रिय उदाहरणों पर नज़र डालें।

id गुण

id गुण किसी टैग का एक अद्वितीय (unique) नाम निर्धारित करता है। यह नाम दोहराया नहीं जाना चाहिए, क्योंकि ऐसा करने से jQuery या JavaScript के साथ काम करते समय समस्याएँ हो सकती हैं। id के उपयोग के कुछ उदाहरण देखें:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">привет</li>
  <li id="item4">мир</li>
</ul>
...
<div id="header"></div>

id गुण का उपयोग CSS में किसी विशेष ब्लॉक, मेनू, मेनू आइटम या किसी अन्य टैग के लिए अलग-अलग स्टाइल लागू करने के लिए किया जा सकता है। इसके अलावा, id का उपयोग JavaScript (या jQuery) में भी अक्सर किया जाता है।

class गुण

class गुण टैग्स के समूह या श्रेणी को दर्शाता है। id की तरह, class का उपयोग भी CSS में किया जा सकता है, लेकिन यह एक साथ कई टैग्स पर एक ही स्टाइल लागू करने की अनुमति देता है। यानी जहाँ id केवल एक तत्व के लिए होता है, वहीं class एक जैसे कई तत्वों के लिए उपयोग किया जा सकता है:

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">привет</li>
  <li class="item">мир</li>
</ul>

style गुण

style गुण का उपयोग सीधे HTML टैग के अंदर CSS स्टाइल्स लिखने के लिए किया जाता है। अभी के लिए इसकी गहराई में जाने की आवश्यकता नहीं है — हम इसे विस्तार से CSS पाठ्यपुस्तक में सीखेंगे। फिलहाल कुछ बुनियादी उदाहरण देखें:

...
<div style="width: 200px; height: 100px; background: #dddddd">
ब्लॉक
</div>
...
<p style="font-size: 14px; color: #333333">
पाठ
</p>

पहले उदाहरण में 200px चौड़ाई और 100px ऊँचाई वाला ब्लॉक है, जिसकी पृष्ठभूमि #dddddd (हल्का ग्रे) है। दूसरे उदाहरण में एक पैराग्राफ है जिसका फ़ॉन्ट आकार 14px और रंग #333333 (लगभग काला) है।

title गुण

title गुण का उपयोग किसी तत्व पर माउस लाने पर दिखाई देने वाले टूलटिप (विवरण) के लिए किया जाता है:

...
<img src="./images/image.jpg" alt="photo" title="यह मैं हूँ" />
...
<a href="html2.html" title="मेरा पेज">लिंक</a>
...
<h2 title="शीर्षक">नमस्ते, दुनिया!</h2>

इसके अलावा, अन्य सार्वभौमिक गुण भी हैं जैसे: accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex। आप इन्हें बाद में देखेंगे, विशेष रूप से जब आप बहुभाषी वेबसाइटों का निर्माण करना शुरू करेंगे। फिलहाल, इन मुख्य सार्वभौमिक गुणों को जानना पर्याप्त है।