HTML Attributes Kya Hai? Beginners ke liye complete guide

HTML attributes वे विशेष गुण (properties) हैं जो HTML tags को अतिरिक्त जानकारी या विशेषताएं प्रदान करते हैं। ये attributes किसी भी element के व्यवहार (behavior) को नियंत्रित करते हैं या उसमें और जानकारी जोड़ते हैं। 

Attributes हमेशा start tag में उपयोग किए जाते हैं और यह नाम (attribute name) और मान (value) की जोड़ी के रूप में लिखे जाते हैं, जैसे: attribute_name="value"। उदाहरण के लिए, 

<img src="image.jpg" alt="Sample Image"> 

में img एक tag है, src और alt attributes हैं।

Attributes case-insensitive होते हैं, लेकिन HTML में lowercase लिखने की सलाह दी जाती है। एक ही element में कई attributes जोड़े जा सकते हैं, और ये हमेशा element के मतलब को स्पष्ट करने और webpage के डिज़ाइन और कार्यक्षमता को बेहतर बनाने में मदद करते हैं। जैसे, 

<a href="https://example.com" target="_blank">Link</a> 

में href और target attributes लिंक को दिशा और व्यवहार प्रदान करते हैं।

कुल Attributes 

HTML में कुल मिलाकर 100 से अधिक attributes हैं, जो अलग-अलग HTML elements के लिए उपयोग किए जाते हैं। इन attributes को उनकी उपयोगिता और कार्य के आधार पर वर्गीकृत किया जा सकता है। हालांकि, सभी attributes हर element पर लागू नहीं होते; कुछ attributes केवल विशेष tags के लिए होते हैं।

HTML Attributes के मुख्य प्रकार:

1. Global Attributes:

ये attributes लगभग हर HTML element के साथ उपयोग किए जा सकते हैं। जैसे:

id

class

style

title

data-*

2. Specific Attributes:

ये attributes कुछ विशेष tags के लिए होते हैं। जैसे:

<a> tag के लिए: href, target, rel

<img> tag के लिए: src, alt, width, height

<form> tag के लिए: action, method, enctype

3. Event Attributes:

ये attributes user के interaction पर कोई event trigger करने के लिए उपयोग किए जाते हैं। जैसे:

onclick

onmouseover

onkeydown

HTML attributes की संख्या समय के साथ बढ़ती रहती है क्योंकि HTML का विकास होता रहता है। HTML5 में कई नए attributes जोड़े गए हैं, जैसे: placeholder, autofocus, और required। इसीलिए, attributes की सटीक संख्या ब्राउज़र और HTML संस्करण पर निर्भर करती है।

Key features of html attributes

• Extra values provide करते हैं: Attributes HTML elements का meaning clear करते हैं या उनके behaviour को adjust करते हैं।
• हर element या tag के साथ available होते हैं: HTML का हर tag attributes का उपयोग कर सकता है।
• हमेशा pairs में होते हैं: Attributes हमेशा name="value" के pair में लिखे जाते हैं।
• Case-insensitive होते हैं: Attributes के नाम uppercase या lowercase में लिखे जा सकते हैं, लेकिन lowercase का उपयोग recommend किया जाता है।
• सिर्फ start tag में use होते हैं: Attributes का प्रयोग हमेशा start tag के साथ किया जाता है, end tag के साथ नहीं।
• Multiple attributes add किए जा सकते हैं: एक HTML element में कई attributes use किए जा सकते हैं, जैसे:
• <input type="text" placeholder="Enter your name" required>
• Global attributes: कुछ attributes, जैसे id, class, और style, हर HTML tag पर apply होते हैं।
• Global attributes: कुछ attributes, जैसे id, class, और style, हर HTML tag पर apply होते हैं।
• Element-specific attributes: कुछ attributes केवल specific tags के लिए होते हैं, जैसे <img> के लिए src और <a> के लिए href।
• Default behaviour modify करते हैं: Attributes tags के default behaviour को change करने में मदद करते हैं, जैसे target="_blank" link को नई tab में open करता है।
• HTML5 attributes: HTML5 ने placeholder, autofocus, और required जैसे नए attributes add किए हैं, जो user experience को बेहतर बनाते हैं।

Important html attributes 

आइए HTML के महत्वपूर्ण attributes पर एक नज़र डालते हैं।

1. href Attribute 

HTML में <a> tag का उपयोग hyperlink बनाने के लिए किया जाता है। इस tag में href attribute यह निर्धारित करता है कि लिंक किस URL या वेबपेज पर ले जाएगा। इसे "Hypertext Reference" कहा जाता है और यह attribute लिंक का path या destination तय करता है।

href Attribute के भाग:
href attribute दो मुख्य भागों से मिलकर बना होता है:

• URL (Uniform Resource Locator): यह लिंक का वास्तविक पता होता है, जैसे https://example.com।
• Anchor Text (Clickable Text): यह वह पाठ या टेक्स्ट है जिसे क्लिक करके यूज़र लिंक पर जाता है, जैसे "Click Here"।

उदाहरण:

<a href="https://example.com">Visit Example</a>

ऊपर दिए गए उदाहरण में, href="https://example.com" लिंक का पता है, और "Visit Example" वह टेक्स्ट है जिसे क्लिक किया जा सकता है। जब यूज़र इस टेक्स्ट पर क्लिक करेगा, तो वह "example.com" वेबसाइट पर पहुंच जाएगा। href attribute के बिना लिंक काम नहीं करेगा।

2. src Attribute 

HTML में <img> tag का उपयोग webpage में image जोड़ने के लिए किया जाता है। इस tag में src attribute का उपयोग image के path (address) को बताने के लिए किया जाता है। यह path उस image का location होता है जिसे webpage पर दिखाना है। src attribute के अंदर image का URL या file का नाम डबल कोट्स ("") में लिखा जाता है।

 src Attribute का Syntax:

<img src="image-path" alt="alternate-text">

उदाहरण:

External Image का उपयोग:

<img src="https://example.com/image.jpg" alt="Example Image">

इस कोड में image का URL

https://example.com/image.jpg है, और यह webpage पर दिखाई देगा। अगर image लोड नहीं हो पाती, तो "Example Image" alternate text के रूप में दिखेगा।

Local Image का उपयोग:

<img src="images/photo.jpg" alt="Local Photo">

इस उदाहरण में images/photo.jpg उस image का path है जो आपकी local directory में मौजूद है।

src attribute के बिना <img> tag image को लोड नहीं कर सकता। यह attribute image के स्रोत (source) को बताने का सबसे महत्वपूर्ण हिस्सा है।

3. Width and Height Attributes

HTML में <img> tag के साथ width और height attributes का उपयोग image के आकार (size) को निर्धारित करने के लिए किया जाता है। इन attributes के माध्यम से हम image की चौड़ाई (width) और ऊंचाई (height) को pixels में सेट कर सकते हैं। यह image को webpage पर सही आकार में दिखाने में मदद करता है।

Syntax:

<img src="image-path" width="value" height="value" alt="text">

उदाहरण:

Width और Height के साथ Image:

<img src="https://example.com/image.jpg" width="300" height="200" alt="Example Image">

इस कोड में image की चौड़ाई 300 pixels और ऊंचाई 200 pixels निर्धारित की गई है।

सिर्फ Width सेट करना:

<img src="images/photo.jpg" width="400" alt="Local Photo">

यहां image की चौड़ाई 400 pixels होगी, और ऊंचाई स्वतः (auto) उसी अनुपात में adjust होगी।

Note:

width और height का उपयोग करने से image की default size को control किया जा सकता है।

हमेशा सही अनुपात (aspect ratio) बनाए रखने की कोशिश करें ताकि image distorted न दिखे।

4. alt Attribute 

HTML में <img> tag के साथ alt attribute का उपयोग image के लिए वैकल्पिक (alternative) टेक्स्ट प्रदान करने के लिए किया जाता है। अगर किसी कारणवश image वेबसाइट पर लोड नहीं हो पाती (जैसे slow internet connection या file not found), तो यह टेक्स्ट यूज़र को दिखाया जाता है। इसके अलावा, यह attribute screen readers के लिए उपयोगी है, जिससे visually impaired लोग image की जानकारी प्राप्त कर सकते हैं।

Syntax:

<img src="image-path" alt="alternative-text">

उदाहरण:

Image के साथ alt Attribute:

<img src="https://example.com/image.jpg" alt="A beautiful sunset over the mountains">

अगर image लोड नहीं होती, तो "A beautiful sunset over the mountains" टेक्स्ट यूज़र को दिखेगा।

Local Image के साथ:

<img src="images/photo.jpg" alt="A family photo">

यहां "A family photo" alt टेक्स्ट के रूप में दिखाई देगा, अगर image file उपलब्ध नहीं हो।

Importance:

Accessibility: यह visually impaired लोगों के लिए image का विवरण प्रदान करता है।

SEO (Search Engine Optimization): Search engines alt attribute का उपयोग image content को समझने और indexing करने के लिए करते हैं।

Fallback: Image न लोड होने पर यह यूज़र को जानकारी प्रदान करता है।

alt attribute का उपयोग सही और सटीक image description देने के लिए हमेशा किया जाना चाहिए।

5. style Attribute 

HTML में style attribute का उपयोग किसी element की styling (जैसे font, size, color, background आदि) को directly define करने के लिए किया जाता है। यह attribute inline CSS प्रदान करता है, जिससे आप किसी specific element के लिए styling सेट कर सकते हैं।

Syntax:

<element style="property: value;">

उदाहरण:

Text का Color बदलना:

<p style="color: blue;">यह टेक्स्ट नीले रंग में दिखेगा।</p>

Font Size और Background Color सेट करना:

<h1 style="font-size: 24px; background-color: yellow;">यह हेडिंग का आकार बड़ा और बैकग्राउंड पीला है।</h1>

Border और Padding जोड़ना:

<div style="border: 2px solid black; padding: 10px;">यह बॉक्स में टेक्स्ट है।</div>

Importance:

style attribute का उपयोग छोटे और specific styling के लिए किया जाता है।

हालांकि, बड़े और जटिल डिज़ाइन के लिए external CSS या internal CSS का उपयोग बेहतर होता है।

यह attribute आपको HTML और CSS को एक साथ जोड़ने की flexibility देता है, लेकिन कोड को clean और maintainable रखने के लिए इसे कम उपयोग करना चाहिए।

6. lang Attribute

HTML में lang attribute यह बताने के लिए उपयोग किया जाता है कि वेबपेज किस भाषा में लिखा गया है। यह attribute मुख्य रूप से <html> tag के अंदर उपयोग किया जाता है। यह attribute search engines और browsers को webpage की भाषा पहचानने में मदद करता है, जिससे accessibility और SEO (Search Engine Optimization) बेहतर हो जाता है।

Syntax:

<html lang="language-code">

Language और Country Codes का उपयोग:

lang attribute में पहले दो अक्षर भाषा को दर्शाते हैं (जैसे, en - English, hi - Hindi)।

Language और Country Codes का उपयोग:

lang attribute में पहले दो अक्षर भाषा को दर्शाते हैं (जैसे, en - English, hi - Hindi)।

अगर देश को भी specify करना हो, तो आखिरी दो अक्षर देश को दर्शाते हैं (जैसे, en-US - English (United States), en-AU - English (Australia))।

उदाहरण:

English Language के लिए:

<!DOCTYPE html>

<html lang="en">

<body>

This webpage is in English.

</body>

</html>

Hindi Language के लिए:

<!DOCTYPE html>

<html lang="hi">

<body>

यह वेबपेज हिंदी में है।

</body>

</html>

English (Australia) Specify करना:

<!DOCTYPE html>

<html lang="en-AU">

<body>

This webpage is in Australian English.

</body>

</html>

Importance:

• Accessibility: Screen readers के लिए यह attribute उपयोगी है ताकि वे सही उच्चारण कर सकें।
• SEO: Search engines को webpage की भाषा समझने में मदद मिलती है।
• Multi-language Websites: अलग-अलग भाषाओं के लिए सही content दिखाने में मदद करता है।

lang attribute का उपयोग हमेशा <html> tag में करना चाहिए ताकि browsers और search engines को webpage की भाषा स्पष्ट रूप से समझ में आ सके।

7. title Attribute:

HTML में title attribute का उपयोग किसी element के बारे में अतिरिक्त जानकारी (extra information) प्रदान करने के लिए किया जाता है। जब यूज़र अपने mouse pointer को उस element पर ले जाता है, तो यह जानकारी tooltip के रूप में दिखाई देती है। यह attribute लगभग सभी HTML elements के साथ उपयोग किया जा सकता है।

Syntax:

<element title="text">

उदाहरण:

Paragraph Tag के साथ:

<p title="यह एक पैराग्राफ टैग है।">Title attribute का उदाहरण</p>

जब आप इस पैराग्राफ पर mouse ले जाएंगे, तो "यह एक पैराग्राफ टैग है।" टेक्स्ट tooltip के रूप में दिखेगा।

Link के साथ

<a href="https://example.com" title="Example Website">Visit Example</a>

इस लिंक पर mouse ले जाने पर "Example Website" टेक्स्ट दिखाई देगा।

Image के साथ:

<img src="image.jpg" title="यह एक छवि है" alt="Image">

जब आप image पर mouse ले जाएंगे, तो "यह एक छवि है" टेक्स्ट दिखाई देगा।

Importance:

Accessibility: यह उपयोगकर्ता को element के बारे में अतिरिक्त जानकारी देता है।

User Experience: Tooltip के रूप में जानकारी प्रदर्शित करके उपयोगकर्ता के अनुभव को बेहतर बनाता है।

title attribute का उपयोग सरल और प्रभावी है, लेकिन इसे तभी उपयोग करना चाहिए जब अतिरिक्त जानकारी की वास्तव में आवश्यकता हो।

Tag और Attribute में difference 

नीचे दिए गए उदाहरण से आप HTML Tag और Attribute का अंतर समझ सकते हैं।

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Tag और Attribute का उदाहरण</title>

</head>

<body>

    <!-- केवल Tag का उपयोग -->

    <h1>यह एक Heading Tag है</h1>

    <p>यह एक Paragraph Tag है।</p>

    <!-- Tag के साथ Attribute का उपयोग -->

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

    <img src="image.jpg" alt="यह एक छवि है" width="300" height="200">

</body>

</html>

Tag का use (Structure)

<h1>यह एक Heading Tag है</h1>

<p>यह एक Paragraph Tag है।</p>

ये tags content को structure प्रदान करते हैं।

इसमें कोई additional properties नहीं हैं।

Tag + Attribute का use (Functionalities):

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

<img src="image.jpg" alt="यह एक छवि है" width="300" height="200">

<a> tag में href और title attributes जोड़े गए हैं:

href लिंक का address बताता है।

title लिंक पर mouse hover करने पर tooltip दिखाता है।

<img> tag में src, alt, width, और height attributes जोड़े गए हैं:

src image का path बताता है।

alt image का वैकल्पिक टेक्स्ट प्रदान करता है।

width और height image का आकार सेट करते हैं।

इस प्रकार, tags content का structure बनाते हैं, और attributes उन tags को additional functionalities देते हैं।

Attributes case-insensitive का क्या मतलब है?

Attributes case-insensitive का मतलब है कि HTML attributes के नाम uppercase (बड़े अक्षरों) या lowercase (छोटे अक्षरों) में लिखे जा सकते हैं, और यह दोनों ही तरीके से एक जैसे काम करते हैं। उदाहरण के लिए, HREF, href, और Href तीनों को ब्राउज़र एक ही तरीके से समझेगा।

हालांकि, W3C की सिफारिश के अनुसार, HTML attributes को lowercase में लिखना सबसे अच्छा अभ्यास (best practice) माना जाता है। यह कोड को साफ-सुथरा और पढ़ने में आसान बनाता है। उदाहरण -- 

<a href="https://example.com">Click Here</a>

और

<a HREF="https://example.com">Click Here</a>

दोनों ही ब्राउज़र में एक जैसा काम करेंगे।

HTML Attributes Kya Hai? Beginners ke liye Complete Guide

HTML attributes किसी भी HTML element की अतिरिक्त जानकारी या विशेषताएं प्रदान करते हैं, जो उनके behavior और appearance को नियंत्रित करती हैं। 

ये attributes webpage को अधिक functional और interactive बनाते हैं। चाहे वह link का destination हो, image का size, या text का color – attributes इन सभी को define करने में मदद करते हैं।

इस गाइड में, आपने सीखा कि attributes कैसे HTML tags के साथ जोड़े जाते हैं, उनके मुख्य प्रकार क्या हैं (जैसे href, src, alt, style आदि), और उन्हें किस प्रकार effectively उपयोग किया जा सकता है। प्रत्येक attribute की सही understanding और उपयोग आपके webpages को अधिक professional और user-friendly बना सकता है।

अंत में, HTML attributes को समझने और सही ढंग से implement करने से आप बेहतर डिज़ाइन और functionality वाले webpages बना पाएंगे। Practice करते रहें, और HTML के इस महत्वपूर्ण हिस्से में mastery हासिल करें।

Read Also:

HTML Kya Hai ? Main Elements of HTML in Hindi

Best HTML Editors Website बनाने के लिए

HTML Basic Guide for Beginners in Hindi

HTML में Style Attribute का उपयोग कैसे करें