HTML Attributes

HTML Attributes क्या हैं?

HTML Attributes वे अतिरिक्त गुण (properties) हैं, जो HTML Elements को अधिक जानकारी प्रदान करते हैं। ये किसी Element के व्यवहार या उसकी उपस्थिति को नियंत्रित करते हैं। Attributes हमेशा ओपनिंग टैग में लिखे जाते हैं और इन्हें नाम-मान (name-value) के जोड़े में परिभाषित किया जाता है।

उदाहरण:

<a href="https://example.com" target="_blank">यह एक लिंक है</a>

यहां, href और target Attributes हैं, जो <a> (Anchor Tag) को अधिक जानकारी देते हैं।

HTML Attributes की संरचना

HTML Attributes को इस फॉर्मेट में लिखा जाता है:

<tagname attribute_name="attribute_value">Content</tagname>

उदाहरण:

<img src="image.jpg" alt="यह एक इमेज है">

Attribute Name: src, alt
Attribute Value: "image.jpg", "यह एक इमेज है"

HTML Attributes के प्रकार

HTML Attributes कई प्रकार के होते हैं, जिनका उपयोग HTML Elements की विशेषताओं को नियंत्रित करने के लिए किया जाता है। आइए, उनके बारे में विस्तार से समझते हैं।

1. Global Attributes

Global Attributes ऐसे Attributes हैं, जो लगभग हर HTML Element में लागू हो सकते हैं।

सामान्य Global Attributes:

id: एक एलिमेंट को यूनिक पहचान देता है। <p id="intro">यह परिचय पैराग्राफ है।</p>
class: एलिमेंट्स को समूहबद्ध करने के लिए उपयोग किया जाता है। <p class="text">यह एक क्लास वाला पैराग्राफ है।</p>
style: इनलाइन CSS जोड़ने के लिए उपयोग किया जाता है। <p style="color: blue;">यह नीले रंग का टेक्स्ट है।</p>
title: अतिरिक्त जानकारी प्रदान करता है, जो माउस होवर करने पर दिखाई देती है। <p title="यह एक सुझाव है।">माउस यहां ले जाएं।</p>

2. Specific Attributes

Specific Attributes केवल कुछ विशेष HTML Elements पर लागू होते हैं।

Anchor Tag Attributes (`<a>`):

href: लिंक का URL सेट करता है। <a href="https://example.com">यह एक लिंक है</a>
target: लिंक को नई विंडो या टैब में खोलता है। <a href="https://example.com" target="_blank">नई विंडो में खोलें</a>

Image Tag Attributes (`<img>`):

src: इमेज का स्रोत (URL) बताता है। <img src="image.jpg" alt="यह एक इमेज है">
alt: इमेज का वर्णन करता है। यह स्क्रीन रीडर और लोडिंग एरर के लिए उपयोगी है। <img src="image.jpg" alt="यह एक सुंदर तस्वीर है।">
width और height: इमेज का आकार निर्दिष्ट करते हैं। <img src="image.jpg" width="300" height="200">

Input Tag Attributes (`<input>`):

type: इनपुट फ़ील्ड का प्रकार बताता है। <input type="text">
placeholder: इनपुट फ़ील्ड के अंदर प्लेसहोल्डर टेक्स्ट दिखाता है। <input type="text" placeholder="अपना नाम दर्ज करें।">
value: इनपुट का डिफ़ॉल्ट मान सेट करता है। <input type="text" value="डिफ़ॉल्ट टेक्स्ट">
required: इनपुट को आवश्यक बनाता है। <input type="email" required>

Multiple Attributes का उपयोग

आप एक ही Element में एक से अधिक Attributes का उपयोग कर सकते हैं।
उदाहरण:

<a href="https://example.com" target="_blank" title="यह Example वेबसाइट है।">यहां क्लिक करें</a>

HTML Attributes के नियम

Attributes हमेशा ओपनिंग टैग में होते हैं।
उदाहरण: <p id="unique">यह एक पैराग्राफ है।</p>
Attributes के नाम और मान केस-सेंसिटिव नहीं होते।
उदाहरण: <IMG SRC="image.jpg" ALT="यह इमेज है।"> लेकिन अच्छी प्रैक्टिस के लिए लोअरकेस का उपयोग करें।
Attributes के मान को हमेशा क्वोटेशन मार्क्स (“”) में रखें।
उदाहरण: <a href="https://example.com">यह एक लिंक है</a>

Commonly Used Attributes का उदाहरण

नीचे HTML Attributes के कुछ व्यावहारिक उदाहरण दिए गए हैं:

Button Element Attributes

<button type="button" onclick="alert('बटन क्लिक किया गया!')">क्लिक करें</button>

Form Element Attributes

<form action="/submit" method="post">
  <label for="name">नाम:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">सबमिट करें</button>
</form>

निष्कर्ष

HTML Attributes किसी भी Element को अतिरिक्त विशेषताएं और जानकारी प्रदान करते हैं। ये Attributes आपके वेब पेज को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल बनाते हैं। इस अध्याय में आपने HTML Attributes के प्रकार, उपयोग, और उनके नियमों के बारे में सीखा। अगले अध्याय में, हम HTML Headings के बारे में विस्तार से जानेंगे।