HTML Attributes kya hai – HTML Attributes एक महत्वपूर्ण विषय है, जिसे हर वेब डेवलपर को जानना चाहिए। HTML Attributes HTML Tags की विशेषताओं (Characteries) को Define करने के लिये किया जाता है। सभी HTML Tags अपनी Default Value में Show होते है। इस Default Value को Change करने के लिये ही Attributes का इस्तेमाल किया जाता है।
आप अपनी जरूरत के अनुसार किसी विशेष HTML Elements की Value को विशेष Value से बदल सकते है। उदाहरण के लिए, आप एक Image Tag को एक विशेष Height और Width दे सकते है, जो उस Image का Size बदल देगा।
HTML Attributes का Syntax (लिखने का तरीका)
HTML Attributes को लिखने का एक नियम होता है, जिसे Syntax कहते है। HTML Attributes को हमेशा Open Tag में ही लिखा जाता है, और वो हमेशा Name/Value की जोड़ी में होता है। Name वो होता है, जो Attribute का नाम होता है, और Value वो होता है, जो Attribute की वैल्यू होती है।
उदाहरण के लिए, अगर हम एक Image Tag को Height और Width Attribute देना चाहते है, तो हम इस तरह से लिखेंगे:
<img src="image.jpg" height="200" width="300">
यहाँ, src, height, और width Attribute के Name है, और image.jpg, 200, और 300 Attribute के Value है।
HTML Attributes के Value को हमेशा Single (’ ‘) या Double (” “) Quotes में लिखना चाहिए। यदि आप Quotes का इस्तेमाल नहीं करते है, तो आपका HTML Code सही से काम नहीं करेगा।
HTML Attributes के प्रकार
HTML में कई तरह के Attributes होते है, जो अलग-अलग HTML Tags के साथ इस्तेमाल किये जाते है। कुछ Attributes तो ऐसे होते है, जो किसी भी HTML Tag के साथ काम करते है। इन्हें Core Attributes कहते है।
Core Attributes में ये चार होते है:
- id: यह Attribute एक HTML Element को एक Unique Identifier देता है, जिससे हम उस Element को CSS या JavaScript में Target कर सकते है।
- class: यह Attribute एक HTML Element को एक या एक से ज्यादा Class Name देता है, जिससे हम उस Element को CSS या JavaScript में Target कर सकते है।
- style: यह Attribute एक HTML Element को Inline CSS देता है, जिससे हम उस Element की Style बदल सकते है।
- title: यह Attribute एक HTML Element को एक Tooltip देता है, जो उस Element पर Mouse Hover करने पर दिखता है।
इनके अलावा, कुछ Attributes तो ऐसे होते है, जो केवल कुछ विशेष HTML Tags के साथ काम करते है। इन्हें Specific Attributes कहते है।
Specific Attributes में ये कुछ होते है:
- href: यह Attribute एक Anchor Tag (<a>) को एक Hyperlink देता है, जिससे हम उस Tag पर Click करके किसी दूसरे Web Page या Resource पर जा सकते है।
- src: यह Attribute एक Image Tag (<img>) या Script Tag (<script>) को एक Source URL देता है, जिससे हम उस Tag में किसी Image या Script को Load कर सकते है।
- alt: यह Attribute एक Image Tag (<img>) को एक Alternative Text देता है, जो उस Image का Description होता है। यह Text तब दिखता है, जब Image Load नहीं हो पाता है, या Screen Reader का इस्तेमाल करते हुए देखा जाता है।
- type: यह Attribute एक Input Tag (<input>) को एक Input Type देता है, जो उस Input का Format और Behavior निर्धारित करता है। उदाहरण के लिए, type=“text” एक Text Box बनाता है, जिसमें हम Text लिख सकते है।
इनके अलावा, और भी कई Attributes होते है, जो आपको HTML के अलग-अलग Topics में सीखने को मिलेंगे।
HTML Attributes के उदाहरण
आइये अब कुछ HTML Attributes के उदाहरण देखते है, जो आपको HTML को बेहतर समझने में मदद करेंगे।
id Attribute
id Attribute एक HTML Element को एक Unique Identifier देता है, जिससे हम उस Element को CSS या JavaScript में Target कर सकते है। उदाहरण के लिए, अगर हम एक Paragraph Tag (<p>) को id=“intro” देते है, तो हम उस Paragraph को CSS में इस तरह से Style दे सकते है:
#intro {
color: blue;
font-size: 20px;
}
या हम उस Paragraph को JavaScript में इस तरह से Access कर सकते है:
var intro = document.getElementById("intro");
intro.innerHTML = "This is the introduction paragraph.";
class Attribute
class Attribute एक HTML Element को एक या एक से ज्यादा Class Name देता है, जिससे हम उस Element को CSS या JavaScript में Target कर सकते है। उदाहरण के लिए, अगर हम एक Paragraph Tag ( ) को class=“highlight” देते है, तो हम उस Paragraph को CSS में इस तरह से Style दे सकते है:
.highlight {
background-color: yellow;
}
या हम उस Paragraph को JavaScript में इस तरह से Access कर सकते है:
var highlight = document.getElementsByClassName("highlight");
highlight[0].style.fontWeight = "bold";
href Attribute
href Attribute एक Anchor Tag (<a>) को एक Hyperlink देता है, जिससे हम उस Tag पर Click करके किसी दूसरे Web Page या Resource पर जा सकते है। उदाहरण के लिए, अगर हम एक Anchor Tag (<a>) को href=“https://www.w3schools.com” देते है, तो हम उस Tag पर Click करके W3Schools की Website पर जा सकते है:
<a href="https://www.w3schools.com">Visit W3Schools</a>
src Attribute
src Attribute एक Image Tag (<img>) या Script Tag (<script>) को एक Source URL देता है, जिससे हम उस Tag में किसी Image या Script को Load कर सकते है। उदाहरण के लिए, अगर हम एक Image Tag (<img>) को src=“logo.png” देते है, तो हम उस Tag में logo.png नाम की Image को Load कर सकते है:
<img src="logo.png" alt="Logo">
या अगर हम एक Script Tag (<script>) को src=“script.js” देते है, तो हम उस Tag में script.js नाम की Script को Load कर सकते है:
<script src="script.js"></script>
alt Attribute
alt Attribute एक Image Tag () को एक Alternative Text देता है, जो उस Image का Description होता है। यह Text तब दिखता है, जब Image Load नहीं हो पाता है, या Screen Reader का इस्तेमाल करते हुए देखा जाता है। उदाहरण के लिए, अगर हम एक Image Tag () को alt=“Logo” देते है, तो यदि Image Load नहीं हो पाती है, तो उसकी जगह Logo लिखा हुआ दिखेगा:
<img src="logo.png" alt="Logo">
type Attribute
type Attribute एक Input Tag (<input>) को एक Input Type देता है, जो उस Input का Format और Behavior निर्धारित करता है। उदाहरण के लिए, अगर हम एक Input Tag (<input>) को type=“text” देते है, तो वो एक Text Box बन जाएगा, जिसमें हम Text लिख सकते है:
<input type="text" name="name" placeholder="Enter your name">
या अगर हम एक Input Tag () को type=“checkbox” देते है, तो वो एक Checkbox बन जाएगा, जिसे हम Check या Uncheck कर सकते है:
<input type="checkbox" name="agree" value="yes"> I agree to the terms and conditions
HTML Attributes का उपयोग
HTML Attributes kya hai – HTML Attributes का उपयोग करके हम अपने HTML Elements को और भी अधिक Functional और Attractive बना सकते है। HTML Attributes हमें अपने HTML Elements को Customize करने का अवसर देते है, जिससे हम अपने Web Page को अपनी जरूरत के अनुसार Design कर सकते है।
HTML Attributes का उपयोग करने के लिए, हमें बस उन्हें उनके नाम और वैल्यू के साथ Open Tag में लिखना होता है। हम एक से ज्यादा Attributes भी एक ही HTML Element में लिख सकते है, बस उन्हें Space से Separate करना होता है।
उदाहरण के लिए, अगर हम एक Paragraph Tag (<p>) को id, class, style, और title Attribute देना चाहते है, तो हम इस तरह से लिखेंगे:
<p id="intro" class="highlight" style="color: red;" title="This is the introduction paragraph.">This is a paragraph with multiple attributes.</p>
HTML Attributes kya hai ?- FAQs
Q. HTML Attributes के नाम Case Sensitive होते है?
A. नहीं, HTML Attributes के नाम Case Sensitive नहीं होते है। आप उन्हें Lowercase, Uppercase, या Mixed Case में लिख सकते है। लेकिन, आम तौर पर, उन्हें Lowercase में लिखना अच्छा माना जाता है, क्योंकि यह उन्हें पढ़ने और समझने में आसान बनाता है।
Q. HTML Attributes के Value को Quotes में लिखना जरूरी है?
A. हां, HTML Attributes के Value को Quotes में लिखना जरूरी है। यदि आप Quotes का इस्तेमाल नहीं करते है, तो आपका HTML Code सही से काम नहीं करेगा। आप Single (‘ ‘) या Double (” “) Quotes दोनों का इस्तेमाल कर सकते है, लेकिन एक ही HTML Element में दोनों को मिलाकर नहीं लिख सकते है।
Q. HTML Attributes को कैसे सीखें?
A. HTML Attributes को सीखने का सबसे अच्छा तरीका है, कि आप उनके उदाहरण देखें और उन्हें अपने HTML Code में इस्तेमाल करके उनका Output देखें। आप इसके लिए W3Schools की Website का इस्तेमाल कर सकते है, जहाँ आपको HTML Attributes के बारे में विस्तृत जानकारी, उदाहरण, और Try It Yourself Editor मिलेगा।
Read More
HTML Attributes Kya Hai – Conclusion
HTML Attributes kya hai ?- HTML Attributes एक महत्वपूर्ण विषय है, जिसे हर वेब डेवलपर को जानना चाहिए। HTML Attributes HTML Tags की विशेषताओं को Define करने के लिये किया जाता है। HTML Attributes का उपयोग करके हम अपने HTML Elements को और भी अधिक Functional और Attractive बना सकते है।
इस ब्लॉग में, हमने HTML Attributes के बारे में जाना, उनका Syntax, प्रकार, उदाहरण, और उपयोग समझा। हमने ये भी देखा, कि HTML Attributes के नाम Case Sensitive नहीं होते है, और उनके Value को Quotes में लिखना जरूरी है। हमने ये भी बताया, कि HTML Attributes को कैसे सीखें।
आशा है, कि आपको यह ब्लॉग आर्टिकल पसंद आया होगा, और आपको HTML Attributes के बारे में कुछ नया सीखने को मिला होगा। अगर आपको इस ब्लॉग में कोई गलती या सुझाव मिलता है, तो आप हमें Comment Section में बता सकते है।