HTML Attributes kya hota hai ?

आज के इस post के जरिये हम सिखने वाले हैं की HTML Attributes kya hota hai और इसे HTML Tag में किस तरह use कर सकते हैं ?

HTML attributes, HTML elements की अतिरिक्त (additional) विशेषताएँ और properties को दर्शाता हैं | जैसे की यदि हमें किसी image की width या height बढ़ानी हो तो हम image element में width और height attributes को दर्शायेंगे |

Attributes, always start tag में ही दर्शाया जाता हैं | आमतौर पर यह Attributes “name और value” के जोड़े में HTML Elements के साथ लिखा जाता हैं | यह attributes, quotation marks चिह्नों में संलग्न होने चाहिए।

इसके आलावा कुछ HTML elements ऐसे हैं जिन में कुछ specific attributes लगाना जरुरी होता हैं | जैसे की <img> tag में src और atl attributes होने ही चाहिए |

HTML Attributes को और बहेतरीन तरीके से समझने के लिए निचे दिए गए उदाहरण को read कीजिये|

Example

<img src=”images/main-image.jpg” alt=”Main Image” width=”500px” height=”350px”>

<a herf=”www.techsamundra.com” title=”Tech Samundra”>Tech Samundra</a>

<input type=’submit’ Value=”submit”>

ऊपर दिए गए उदाहरण में <img> tag में use किया गया src, attribute हैं और image का path उस attribute की value हैं |

ठीक उसी तरह <a> tag में use किया गया href, attribute हैं और उस attribute में provide की गयी link value हैं |

Tip : हम एट्रिब्यूट की वैल्यू को दर्शाने के लिए double quote (” “) की जगह single quote (‘ ‘) का भी use कर सकते हैं | हालाकि double quote का use करना ज्यादा बहेतर हैं |

HTML5 में बहुतसे ऐसे attributes हैं जिनमे name and value के जोड़े में ना लिखकर सिर्फ name ही लिखा जाता है | ऐसे ऐट्रिब्यूट्स को हम boolean attributes कहते हैं | disabled, checked, readonly, required यह कुछ ऐसे बूलियन ऐट्रिब्यूट्स हैं जो ज्यादातर उपयोग में लिए जाते हैं |

Example

<input type="submit" value="Submit" disabled>
<input type="email" required>
<input type="text" value="Read only text" readonly>
<input type="checkbox" checked>

Id और class जैसे कुछ विशेष HTML attributes को छोड़कर, बाकी attributes की value आमतौर पर case-insensitive होती हैं | हलाकि World Wide Web Consortium (W3C) के निर्देश अनुसार ऐट्रिब्यूट्स की वैल्यू lowercse में लिखना उचित हैं |

HTML Attributes का General Purpose

कुछ attributes जैसे की ID, Class, Style, Title, etc. का उपयोग HTML Elements में ज्यादातर किया जाता हैं | निचे दिए गए section के जरिये आपको और बेहतर तरीके से समझने में help होगी |

ID Attribute

HTML document में ID Attribute का use, elemnt को unique name या pahachan देने के लिए किया जाता हैं | इससे CSS या Javascript का उपयोग करके elemnt को select करना आसान हो जाता हैं |

Example

<span id="introsection">Some content</span>
<input type="text" id="Address">
<p id="information">This is a paragraph.</p>

HTML Document में हरेक element की id unique होनी चाहिए | एक ही document में दो अलग element में same id का use नहीं किया जा सकता हैं | और हर एक element में केवल एक ही id का उपयोग किया जाता हैं |

Class Attribute

ID Attribute की तरह ही class Attribute का उपयोग element की पहचान करने के लिए किया जाता हैं | लेकिन ID Attribute के विपरीत Class Attribute, Document में unique होना जरूरी नहीं हैं | इसका मतलब हैं की, आप same class को multiple element में use कर सकते हैं | निचे दिया गया example रीड करे ताकि आप और बहेतर तरीके से समझ सके |

Example

<input type="text" class="bgcolor">
<div class="maininfo bgcolor">Some content</div>
<p class="bgcolor">This is a paragraph.</p>

Tip : चूंकि class multiple element में use किया जा सकता हैं | इसीलिए उस class में लिखे गए style rules, उस class के सभी elements में applied होगा |

Title Attribute

Title Attribute का use, element या उसके content के लिए advisory text यानी hint की तरह title देने के लिए किया जाता हैं | जब user अपने mouse cursor को element के ऊपर रखता हैं तब Title Attribute की value , tooltip की तरत element पर दिखाई देती हैं |

Example

<img src="images/techsamundra-logo.jpg" title="Tech Samundra Logo" alt="Tech Samundra">

ऊपर दिया गया example का output कुछ इस तरह आएगा |

Style Attribute

Style Attribute के जरिये हम element पर CCS की Style rules को applied कर सकते हैं | जैसे की element का background color set karna, font size बढ़ाना या घटाना, border etc.

निचे दिए गए example के जरिये हम इसे समझने की कोसिस करते हैं |

Example

<p style="color : red">My Example</p>
<div style="border : solid 1px green; width:250px">Hello, This is Example Only</div>

Output

आप HTML Styles के chapter में HTML Element को Styling करने के बारे मे और अधिक सीखेंगे |