Introduction to HTML Attributes
जितने भी HTML tags होते है उन सबमें attributes define किये जाते है। Attributes के द्वारा आप tags के अंदर के content को अपने अनुसार configure कर सकते है।
Attributes advanced configuration के लिए यूज़ किये जाते है। Attributes के द्वारा interpreter को additional commands दी जाती है जो उसे बताती है की किसी element के content को किस प्रकार show करना है।
उदाहरण के लिए आप default page background नहीं चाहते तो उसको अपने according change कर सकते है। ऐसे ही यदि आप default text color नहीं चाहते है तो उसे भी अपने अनुसार change कर सकते है।
Syntax HTML Attributes
HTML में attributes define करने का general syntax नीचे दिया जा रहा है।
| <tagName attrName=”value”>
some content here. </tagName> |
जैसा की आप ऊपर दिए गए syntax में देख सकते है attributes को हमेशा starting tag में define किया जाता है। ये name और value के pair में लिखे जाते है।
Read Also : HTML Tags in Hindi
Example of HTML Attributes
Attributes को यूज़ करना बहुत ही simple है। बस आपको पता होना चाहिए की कौनसा attribute किस जगह यूज़ करना है। आइये attributes के इस्तेमाल को एक उदाहरण से समझने का प्रयास करते है।
| <html>
<head> <title>myPage</title> </head> <body bgcolor=”black”> <h1 style=”color:pink”> Heading </h1> <p style=”color:yellow”> This is a paragraph. And you are learning html in Hindi. </p> </body> </html> |
उपर दिए हुए उदाहरण में 3 जगह attributes यूज़ किये गए है। सबसे पहले <body> tag में bgcolor attribute यूज़ करते हुए page का background color define किया गया है। जब आप कोई background color define नहीं करते है तो by default background color white रहता है।
लेकिन जैसा की मैने आपको बताया की आप attributes के द्वारा elements को अपने according configure कर सकते है इसलिए आप जो background color अपने page का रखना चाहते है वो रख सकते है। जैसे की मैने example में black दिया है।
दूसरा attribute heading tag में यूज़ किया गया है। ये style attribute है। इस attribute के द्वारा आप tag पर CSS (Cascading Style Sheet) apply कर सकते है। CSS के द्वारा advanced configuration किया जाता है, जिसके बारे में आप आगे पड़ेंगे। यँहा पर style attribute द्वारा heading का color change किया गया है।
तीसरा attribute paragraph tag में use किया गया है जो की heading tag की ही तरह paragraph का color change कर रहा है।
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
Scope of HTML Attributes
Attributes का scope उनके tags के according होता है। जिस tag के साथ आप जो attribute apply करते है उस attribute का effect उसी tag तक सिमित रहता है।
उदाहरण के लिए आपने body tag में style attribute को यूज़ करते हुए text color red define किया है। Body tag पुरे page के लिए होता है इसलिए ये attribute पुरे page के text को red में show करेगा।
लेकिन ऐसा तब तक ही होगा जब तक की कोई body tag से छोटा tag text को दूसरे color में define नहीं करता है। यदि कोई sub tag वापस उसी attribute को define करता है तो ऐसी situation में उसकी value parent tag में define किये गए attribute की value को override कर देगी।
उदाहरण के लिए किसी paragraph tag का color green define करते है तो ये color body tag के color को override करेगा और आपका paragraph green text में show होगा।
HTML में attributes के scope को निचे उदाहरण द्वारा समझाया जा रहा है।
| <html>
<head> <title> myPage </title> </head> <body style=”color:red”> Learn html in Hindi <br> Lean html in Hindi in 2 days. <br> Learn html in Hindi pdf. <p Style=”color:green”> This is some text here </p> </body> </html> |
उपर दिए हुए उदाहरण में आप देख सकते है की paragraph का text color अलग से define किया गया है। ये body के text color को override करता है। इस script को run करने पर निचे दिया गया output show होगा।
Guidelines For Using HTML Attributes
HTML attributes को यूज़ करने की कुछ guide line होती है। जिनको follow करके आप attributes का बेहतर इस्तेमाल कर सकते है। इनके बारे में नीचे दिया जा रहा है।
- हमेशा attributes को lower case में define करे।
- हमेशा attributes की values quotation mark में ही define करे।
HTML Global Attributes
HTML में global attributes वे attributes होते है जो सभी HTML tags के साथ commonly use किए जाते है। इनकी list निचे दी जा रही है।
id
किसी tag की unique id define करने के लिए id attribute use किया जाता है। इस attribute में define की गयी value से उस tag पर separate styles apply की जा सकती है।
| <tagName id=”id-here”>other content</tagName> |
class
Class attribute भी id attribute की तरह ही होता है। किसी tag की id unique होती है और उसे दूसरे tag के लिए नहीं define किया जा सकता है। लेकिन कई elements same class define कर सकते है। ऐसा multiple tags पर same styles apply करने के लिए use किया जाता है।
| <tagName1 class=”myClass”>other content </tagName1>
<tagName2 class=”myClass”>other content </tagName2> |
style
Style attribute किसी element पर CSS rules apply करने के लिए use किया जाता है। इस attribute द्वारा apply की गयी CSS inline CSS कहलाती है।
| <tagName style=”rule:value;”>content</tagName> |
title
Title attribute द्वारा आप किसी element का नाम specify कर सकते है या फिर उसके बारे में अधिक जानकारी दे सकते है।
| <tagName title=”name”>content</tagName> |
accesskey
इस attribute द्वारा आप किसी tag पर focus create करने के लिए एक shortcut key define कर सकते है।
| <tagName accesskey=””>content</tagName> |
dir
इस attribute द्वारा tag के अंदर define किये गए content का direction define किया जाता है। इस attribute की rtl, ltr और auto तीन values define की जा सकती है।
| <tagName dir=”value”>content</tagName> |
lang
इस attribute द्वारा tag के अंदर insert किये गए content की language define करने के लिए use किया जाता है।
| <tagName lang=”EN”>content</tagName> |
HTML5 में और भी नए global attributes define किये गए जिनके बारे में आप सम्बंधित tutorial पढ़ कर जान सकते है।