HTML Attributes क्या हैं? Types, Examples और Uses हिंदी में

जब भी हम वेब डिजाइनिंग की दुनिया में कदम रखते हैं, HTML हमारा पहला पड़ाव होता है। यह हमें वेब पेज की बुनियादी संरचना (Structure) बनाना सिखाता है—जैसे कि <h1> से हेडिंग या <p> से पैराग्राफ बनाना। लेकिन क्या सिर्फ इन्हीं टैग्स के दम पर एक पूरी तरह कार्यात्मक (Fully Functional) और आकर्षक वेबसाइट बनाई जा सकती है? जवाब है—नहीं।

टैग्स सिर्फ कच्चा माल हैं। उन्हें यह बताने के लिए कि उन्हें कैसा दिखना है, कहाँ से डेटा लाना है, या कैसे व्यवहार करना है, हमें HTML Attributes की आवश्यकता होती है। Attributes, टैग्स को अतिरिक्त जानकारी (Extra Information) और क्षमताएं प्रदान करके उन्हें 'स्मार्ट' बनाते हैं।

विषय सूची (Table of Contents)

• HTML Attributes क्या हैं?
• Common HTML Attributes
• Global HTML Attributes
• Boolean Attributes
• HTML5 के नए Attributes
• Deprecated Attributes
• Attribute vs Property
• महत्वपूर्ण प्रश्न (FAQs)

HTML Attributes क्या हैं? (What are HTML Attributes?)

HTML Attributes वे विशेष शब्द (Keywords) हैं, जो HTML Elements को अतिरिक्त जानकारी (Additional Information) देकर उन्हें और अधिक उपयोगी बनाते हैं।

सोचिए, यदि आपको अपनी वेबसाइट पर एक फोटो लगानी है, तो आप <img> टैग का उपयोग करेंगे। लेकिन वह फोटो कहाँ से आएगी? उसकी चौड़ाई (Width) कितनी होगी? यदि फोटो लोड न हो, तो क्या लिखा आना चाहिए? यह सब Attributes के माध्यम से ही संभव है।

Attributes के मुख्य नियम:

• Opening Tag: Attributes हमेशा शुरुआत वाले टैग (Start Tag) के अंदर ही लिखे जाते हैं।
• Name/Value Pair: ये आमतौर पर नाम और वैल्यू के जोड़े में होते हैं, जैसे: name="value".
• Lowercase: हालांकि HTML केस-सेंसिटिव नहीं है, लेकिन वर्ल्ड वाइड वेब कंसोर्टियम (W3C) हमेशा इन्हें छोटे अक्षरों (lowercase) में लिखने की सलाह देता है।

एक टैग में एक से अधिक Attributes का प्रयोग किया जा सकता है।

HTML Attributes का सिंटैक्स (Syntax)

इसे लिखने का तरीका बहुत ही सरल है। नीचे दिए गए प्रारूप को देखें:

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

एक वास्तविक उदाहरण:

<a href="https://www.sidskills.in">Sidskills पर जाएँ</a>

यहाँ:

• <a>: यह एक एंकर टैग है।
• href: यह एट्रिब्यूट का नाम है (Hypertext Reference)।
• "https://www.sidskills.in": यह उस एट्रिब्यूट की वैल्यू (URL) है।

Common HTML Attributes

यहाँ वे एट्रिब्यूट्स दिए गए हैं जिनका इस्तेमाल एक वेब डेवलपर को सबसे ज्यादा करना पड़ता है:

1. href Attribute

• यह <a> (Anchor) टैग के लिए इस्तेमाल होता है।
• यह बताता है कि लिंक पर क्लिक करने के बाद यूजर किस पेज या वेबसाइट पर जाएगा (Destination URL)।
• उदाहरण: <a href="https://www.google.com">गूगल पर जाएँ</a>

2. src Attribute

• यह <img>, <script> और <iframe> टैग के लिए होता है।
• यह इमेज या वीडियो का सोर्स पाथ (Path) यानी उसका पता बताता है।
• उदाहरण: <img src="my-photo.jpg">

3. alt Attribute

• इसका इस्तेमाल मुख्य रूप से <img> टैग के साथ होता है।
• अगर किसी वजह से इमेज लोड नहीं हो पाती, तो उसकी जगह यह टेक्स्ट दिखाई देता है। यह SEO और दृष्टिबाधित लोगों (Screen Readers) के लिए बहुत जरूरी है।
• उदाहरण: <img src="logo.png" alt="कंपनी का लोगो">

4. width और height Attribute

• इमेज (<img>) और वीडियो (<video>) टैग में।
• यह पिक्सेल (pixels) में इमेज या वीडियो की चौड़ाई और ऊँचाई तय करता है।
• उदाहरण: <img src="banner.jpg" width="300" height="150">

5. style Attribute

• इसे किसी भी HTML टैग के साथ इस्तेमाल किया जा सकता है।
• इसका उपयोग 'Inline CSS' के लिए किया जाता है, जैसे कि टेक्स्ट का रंग बदलना, बैकग्राउंड बदलना या फॉन्ट साइज सेट करना।
• उदाहरण: <p style="color: blue; font-size: 20px;">यह एक नीला पैराग्राफ है।</p>

6. title Attribute

• लगभग सभी टैग्स के साथ।
• जब यूजर उस एलिमेंट पर माउस ले जाता है (Hover करता है), तो एक छोटा सा सूचना बॉक्स (Tooltip) दिखाई देता है।
• उदाहरण: <button title="सबमिट करने के लिए यहाँ क्लिक करें">सबमिट</button>

Global HTML Attributes

Global Attributes वे होते हैं, जिनका उपयोग आप लगभग किसी भी HTML टैग के साथ कर सकते हैं। ग्लोबल एट्रिब्यूट्स वेब पेज के स्ट्रक्चर और उसकी फंक्शनलिटी को कंट्रोल करने में बहुत मदद करते हैं:

1. id Attribute

• यह एक यूनिक (Unique) पहचान है।
• पूरे HTML पेज में एक ID नाम केवल एक ही बार इस्तेमाल किया जा सकता है। इसका मुख्य उपयोग JavaScript में किसी खास एलिमेंट को चुनने या CSS में विशेष स्टाइल देने के लिए होता है।
• उदाहरण: <div id="main-header">...</div>

2. class Attribute

• यह ग्रुपिंग के लिए है।
• एक ही क्लास का नाम आप कई अलग-अलग टैग्स को दे सकते हैं। जब आपको बहुत सारे एलिमेंट्स पर एक जैसा डिज़ाइन (CSS) लागू करना हो, तब क्लास सबसे ज्यादा काम आती है।
• उदाहरण: <p class="red-text">...</p> और <h2 class="red-text">...</h2>

3. style Attribute

• यह इनलाइन स्टाइलिंग के लिए है।
• अगर आप बिना किसी बाहरी CSS फाइल के सीधे किसी टैग का रंग, बॉर्डर या फॉन्ट बदलना चाहते हैं, तो इसका इस्तेमाल करें। हालांकि, बड़े प्रोजेक्ट्स में इसे कम इस्तेमाल करने की सलाह दी जाती है।
• उदाहरण: <span style="font-weight: bold;">जरूरी सूचना</span>

4. title Attribute

• यह अतिरिक्त जानकारी (Tooltip) देता है।
• जब कोई यूजर उस एलिमेंट पर कर्सर (Mouse Cursor) ले जाता है, तो उसे एक छोटा सा टेक्स्ट पॉप-अप दिखाई देता है। यह यूजर को यह समझाने में मदद करता है कि वह बटन या लिंक किस बारे में है।
• उदाहरण: <a href="#" title="हमारे बारे में और जानें">About Us</a>

5. lang Attribute

• यह भाषा (Language) निर्धारित करता है।
• यह ब्राउज़र और सर्च इंजन (Google) को बताता है कि उस टैग के अंदर का कंटेंट किस भाषा में लिखा गया है। यह SEO और स्क्रीन रीडर्स के लिए बहुत महत्वपूर्ण है।
• उदाहरण: <p lang="hi">नमस्ते, आप कैसे हैं?</p> (हिंदी के लिए "hi", अंग्रेजी के लिए "en")

ID और Class के बीच मुख्य अंतर (Quick Summary)

चूंकि बिगिनर्स अक्सर इन दोनों में उलझ जाते हैं, इसलिए इसे ध्यान रखें:

ID	Class
एक आधार कार्ड की तरह है (एक व्यक्ति के लिए एक ही)	एक स्कूल यूनिफॉर्म की तरह है (एक जैसी यूनिफॉर्म कई छात्र पहन सकते हैं)
पेज में एक बार ही इस्तेमाल होता है	कई बार इस्तेमाल किया जा सकता है
JavaScript में unique element select करने के लिए	CSS में group styling के लिए

Boolean HTML Attributes

Boolean Attributes की सबसे बड़ी खासियत यह है कि इन्हें किसी वैल्यू (जैसे name="value") की जरूरत नहीं होती। अगर आपने इन्हें टैग में लिख दिया, तो ब्राउज़र मान लेता है कि इनका मान "True" है।

1. disabled

• यह किसी बटन या इनपुट बॉक्स को निष्क्रिय (Inactive) कर देता है। यूजर उस पर क्लिक नहीं कर सकता और न ही उसमें कुछ टाइप कर सकता है। इसका रंग अक्सर धुंधला (Greyed out) हो जाता है।
• उदाहरण: <button disabled>अभी क्लिक नहीं कर सकते</button>

2. readonly

• यह इनपुट फील्ड को 'सिर्फ पढ़ने के लिए' बना देता है। यूजर उसमें लिखे टेक्स्ट को देख सकता है, उसे कॉपी कर सकता है, लेकिन उसे बदल या मिटा नहीं सकता।
• उदाहरण: <input type="text" value="इसे आप बदल नहीं सकते" readonly>

3. checked

• यह मुख्य रूप से Checkboxes और Radio Buttons के लिए इस्तेमाल होता है। इसका उपयोग करने से पेज लोड होते ही वह बॉक्स पहले से ही 'टिक' (Select) किया हुआ दिखाई देता है।
• उदाहरण: <input type="checkbox" checked> मुझे नियम मंजूर हैं

4. required

• यह फॉर्म भरने के लिए अनिवार्य शर्त लगा देता है। अगर यूजर ने उस बॉक्स को खाली छोड़ा और फॉर्म सबमिट करने की कोशिश की, तो ब्राउज़र उसे एक एरर मैसेज दिखाएगा।
• उदाहरण: <input type="email" required> (ईमेल भरना जरूरी है)

याद रखने वाली बात (Developer Note): हालाँकि आप इन्हें disabled="disabled" की तरह भी लिख सकते हैं, लेकिन मॉडर्न कोडिंग (HTML5) में सिर्फ disabled लिखना ही काफी है और इसे ही सबसे अच्छा तरीका माना जाता है।

HTML5 के नए और आधुनिक Attributes

ये एट्रिब्यूट्स यूजर एक्सपीरियंस (User Experience) को बेहतर बनाने के लिए बहुत खास हैं:

1. placeholder

• यह इनपुट फील्ड के अंदर एक हल्का सा संकेत (Hint) दिखाता है। जैसे ही यूजर बॉक्स में कुछ टाइप करना शुरू करता है, यह गायब हो जाता है।
• इससे यूजर को पता चलता है कि उसे बॉक्स में क्या जानकारी भरनी है।
• उदाहरण: <input type="text" placeholder="अपना नाम यहाँ लिखें">

2. autofocus

• यह एट्रिब्यूट पेज लोड होते ही कर्सर को अपने आप उस खास इनपुट बॉक्स में पहुंचा देता है।
• यूजर को मैन्युअल रूप से बॉक्स पर क्लिक करने की जरूरत नहीं पड़ती। यह सर्च बार या लॉगिन पेज के लिए बहुत उपयोगी है।
• उदाहरण: <input type="search" autofocus>

3. autocomplete

• यह ब्राउज़र को यह बताता है कि क्या उसे यूजर की पिछली जानकारी के आधार पर सुझाव (Suggestions) देने चाहिए या नहीं।
• इसे on (चालू) या off (बंद) किया जा सकता है।
• उदाहरण: <input type="text" autocomplete="on">

4. download

• जब हम किसी फाइल का लिंक देते हैं, तो ब्राउज़र उसे खोलने की कोशिश करता है। लेकिन download एट्रिब्यूट ब्राउज़र को निर्देश देता है कि फाइल को खोलने के बजाय सीधे डाउनलोड किया जाए।
• उदाहरण: <a href="notes.pdf" download>नोट्स डाउनलोड करें</a>

5. data- Attributes (कस्टम डेटा)

• यह बहुत ही एडवांस फीचर है। इसके जरिए डेवलपर अपनी जरूरत के हिसाब से अपना खुद का एट्रिब्यूट बना सकता है। data- के बाद आप कोई भी नाम रख सकते हैं।
• इसका उपयोग बाद में JavaScript के जरिए डेटा को पढ़ने के लिए किया जाता है।
• उदाहरण: <div data-user-id="101" data-role="admin">यूजर प्रोफाइल</div>

Deprecated HTML Attributes

डेप्रिसिएटेड (Deprecated) का मतलब है—"नापसंद किया गया" या "अब मान्य नहीं"। जब HTML के किसी एट्रिब्यूट को Deprecated घोषित किया जाता है, तो इसका आशय यह होता है कि यह एट्रिब्यूट HTML के पुराने वर्जन (जैसे HTML4 या XHTML) में तो सही था, लेकिन अब HTML5 में इससे बेहतर विकल्प मौजूद हैं।

1. align

• पहले क्या था: इसका उपयोग टेक्स्ट या इमेज को बाएं (left), दाएं (right) या बीच (center) में करने के लिए होता था।
• अब क्या करें: इसकी जगह CSS की text-align या float प्रॉपर्टी का उपयोग करें।
• पुराना तरीका: <p align="center">...</p>
• नया तरीका: <p style="text-align: center;">...</p>

2. bgcolor

• पहले क्या था: इसका उपयोग किसी टेबल या पूरे पेज का बैकग्राउंड कलर बदलने के लिए किया जाता था।
• अब क्या करें: अब CSS की background-color प्रॉपर्टी का इस्तेमाल करें।
• पुराना तरीका: <body bgcolor="red">
• नया तरीका: <body style="background-color: red;">

3. border

• पहले क्या था: इमेज या टेबल के चारों ओर बॉर्डर लगाने के लिए इसका इस्तेमाल होता था।
• अब क्या करें: अब CSS की border प्रॉपर्टी का उपयोग करें। (नोट: टेबल में अभी भी कभी-कभी इसका उपयोग किया जाता है, लेकिन CSS बेहतर विकल्प है)।
• पुराना तरीका: <img src="pic.jpg" border="5">
• नया तरीका: <img src="pic.jpg" style="border: 5px solid black;">

4. font (Tag and Attributes)

• पहले क्या था: <font> टैग के साथ color, face, और size जैसे एट्रिब्यूट्स का उपयोग अक्षरों को सजाने के लिए होता था।
• अब क्या करें: अब पूरी तरह से CSS (font-family, font-size, color) का उपयोग करें। यह टैग अब HTML5 में पूरी तरह से हटा दिया गया है।

नोट: आधुनिक कोडिंग में इन एट्रिब्यूट्स के स्थान पर हमेशा CSS का ही प्रयोग करें ताकि आपकी वेबसाइट SEO-Friendly रहे।

Attribute vs Property (इनके बीच का अंतर)

अक्सर छात्र Attribute और Property के बीच भ्रमित हो जाते हैं। इसे ऐसे समझें:

1. Attribute

Attribute वह जानकारी है जो HTML टैग के अंदर लिखी जाती है और ब्राउज़र को अतिरिक्त सूचना देती है। यह हमेशा Opening Tag में लिखा जाता है। यह पेज लोड होने से पहले तय हो जाता है।

<input type="text" value="Sid">

ऊपर दिए गए कोड में:
type → Attribute
value → Attribute

2. Property

यह DOM (Document Object Model) का हिस्सा है। जब जावास्क्रिप्ट (JavaScript) का उपयोग करके हम किसी वैल्यू को लाइव बदलते हैं, तो वह Property कहलाती है। यह ब्राउज़र के अंदर रनटाइम पर काम करती है।

document.querySelector("input").value = "Rahul";

यहाँ value एक Property है।

📌 HTML सीखने के लिए यह भी पढ़ें

▸ HTML Basic Page Structure क्या है? – HTML पेज की संरचना को विस्तार से समझें
▸ HTML Editor, Web Browser और File Extension क्या हैं? – पूरी गाइड हिंदी में

HTML Attributes - Exam Oriented FAQs

▶ क्या एक HTML टैग में एक से अधिक Attributes हो सकते हैं?

हाँ, आप एक ही टैग में अपनी आवश्यकतानुसार जितने चाहें उतने एट्रिब्यूट्स जोड़ सकते हैं। बस ध्यान रखें कि प्रत्येक एट्रिब्यूट को एक स्पेस (Space) से अलग करना अनिवार्य है।

▶ HTML Attributes का उपयोग क्यों जरूरी (Important) है?

एट्रिब्यूट्स के बिना वेब पेज की कार्यक्षमता सीमित हो जाती है। इनके बिना हम इमेज (src) नहीं जोड़ सकते, हाइपरलिंक्स (href) नहीं बना सकते और न ही फॉर्म्स को सही ढंग से नियंत्रित कर सकते हैं। ये टैग्स को अतिरिक्त निर्देश देते हैं।

▶ क्या हम खुद के Custom Attributes बना सकते हैं?

हाँ, HTML5 हमें data-* प्रीफिक्स का उपयोग करके कस्टम एट्रिब्यूट्स बनाने की अनुमति देता है। उदाहरण के लिए: data-price="500" या data-user-id="123"। इसका उपयोग अक्सर JavaScript में डेटा पास करने के लिए किया जाता है।

▶ ID और Class में मुख्य अंतर क्या है?

मुख्य अंतर यूनिकनेस (Uniqueness) का है। ID पूरे पेज पर केवल एक ही एलिमेंट के लिए यूनिक होनी चाहिए, जबकि एक ही Class नाम को आप कई अलग-अलग एलिमेंट्स (Group Styling) पर लागू कर सकते हैं।

▶ क्या Attribute Value के लिए हमेशा Quotes (" ") अनिवार्य हैं?

HTML5 में कुछ सरल वैल्यूज के लिए कोट्स हटाना तकनीकी रूप से संभव है, लेकिन Best Coding Practice और एरर से बचने के लिए हमेशा डबल कोट्स (" ") का उपयोग करना ही सबसे सुरक्षित और सही तरीका है।

▶ क्या Deprecated (पुराने) Attributes अभी भी काम करते हैं?

हाँ, अधिकांश आधुनिक ब्राउज़र Backward Compatibility के कारण उन्हें सपोर्ट करते हैं। हालांकि, भविष्य में सपोर्ट खत्म होने और बेहतर परफॉरमेंस के लिए इनका उपयोग नहीं करना चाहिए; इनके स्थान पर CSS का उपयोग करना बेहतर अभ्यास है।

🎥 Watch Our YouTube Videos

▶ Visit Our YouTube Channel

📝 HTML Attributes Online Test & MCQs

✍️ Start MCQ Quiz Now