-->

Introduction to HTML Attributes

Attributes are defined in all the HTML tags. By attributes, you can configure the contents of tags accordingly.

Attributes are used for advanced configuration. Attributes are given additional commands by the interpreter, which tells them how to show the content of an element.

For example if you do not want a default page background, you can change it accordingly. Similarly, if you do not want a default text color, you can also change it accordingly.

Syntax HTML Attributes

The general syntax for defining attributes in HTML is given below.

<tagName attrName = "value"> Some content here. </ tagName>

As you can see in the syntax above, the attributes are always defined in the start tag. These are written in pairs of name and value.

Example of HTML Attributes

It is very easy to use attributes. All you need to know is to use which attribute to use. Let's try to understand the use of attributes with an example

<!DOCTYPE html>

<html>

                             <head>

                                    <title>HTML Attribute</title>

                             </head>

                             <body bgcolor="gray" >

                                    <h1 style="color:white;" > This is test heading. </h1>

                                    <p style="color:yellow;" > This is test paragraph.</p>

                             </body>

</html>              

In the above example, attributes have been used in 3 places. The background color of the page is defined by using bgcolor attribute in the first <body> tag. When you do not define a background color, by default background color is white.

But as I told you that you can configure the elements according to your attributes, so you can keep the background color you want to keep your page on. Like I have black in the example

The second attribute is used in the heading tag. This is the style attribute. With this attribute, you can apply CSS (Cascading Style Sheet) to tags. Advanced configuration is done through CSS, which will be forwarded to you. Here the color of heading has been changed by the style attribute.

The third attribute is used in the paragraph tag, which is changing the color of the paragraph, just like the heading tag.

The above example produces the below given output.

Scope of HTML Attributes

The scope of attributes is according to their tags. The effect of the attribute that you apply with the tag remains limited to the same tag.

For example, you have defined text color red while using the style attribute in the body tag. The body tag is for the entire page so this attribute will show the entire text of the page in red.

But it will only happen until a body tag defines the small tag text in the second color. If a sub tag defines the same attribute then its value in the condition will override the value of the attribute defined in the parent tag.

For example, to color green define a paragraph tag, this color will override the color of the body tag and your paragraph will show in green text.

The scope of attributes in HTML is being explained by the following example.

<!DOCTYPE html>

<html>

            <head>

                        <title>HTML Attribute</title>

            </head>

            <body bgcolor="pinkstyle="color:red" >          

                        <h1>This is in red color. Color defined in body.</h1>

                        <h4>This is also in red color. Color defined in body.</h4>

                        <p style="color:green" > This is in green color defined in paragraph. </p >

            </body>

</html>

In the above example, you can see that the text color of the paragraph is define separately. It overrides the body's text color. Running this script will show the output given below.

Guidelines For Using HTML Attributes

There are some guide lines for using HTML attributes. By following which you can make better use of attributes. These are being given below.

Always define attributes in lower case.

Always define the attributes of values ​​in the quotation mark.

HTML Global Attributes

In HTML, global attributes are attributes that are commonly used with all HTML tags. Their list is given below

id

Id attribute is used to define the unique id of a tag. Different styles can be applied to that tag from the value defined in this attribute.

<tagName id = "id-here"> other content </ tagName>

class

Class attribute is also similar to id attribute. The id of a tag is unique and cannot be define for the second tag. But many elements can define the same class. This is used to apply the same styles to multiple tags.

<tagName1 class = "myClass"> other content </ tagName1>

<tagName2 class = "myClass"> other content </ tagName2>

style

Style attribute is used to apply CSS rules to an element. The CSS that is applied by this attribute is called inline CSS.

<tagName style = "rule: value;" > content </ tagName>

title

With the title attribute you can specify the name of an element or give more information about it.

<tagName title = "name"> content </ tagName>

accesskey

With this attribute you can define a shortcut key to create a focus on a tag.

<tagName accesskey = ""> content </ tagName>

dir

This attribute defines the direction of the content defined in the tag inside the tag. This attribute can be defined by rtl, ltr and auto three values.

<tagName dir = "value"> content </ tagName>

lang

This attribute is used to define the language of content inserted inside the tag.

<tagName lang = "EN"> content </ tagName>

There are more new global attributes defined in HTML5, which you can learn by reading related tutorials.

 


 

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 में लिखे जाते है।

Example of HTML Attributes

Attributes को यूज़ करना बहुत ही simple है। बस आपको पता होना चाहिए की कौनसा attribute किस जगह यूज़ करना है। आइये attributes के इस्तेमाल को एक उदाहरण से समझने का प्रयास करते है।

<!DOCTYPE html>

<html>

            <head>

            </head>

            <body bgcolor="gray" >

                        <h1 style="color:white;" >  मेरा परीक्षण शीर्षक। </h1>

                        <p style="color:white;" >  मेरा परीक्षण अनुछेद </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 को निचे उदाहरण द्वारा समझाया जा रहा है। 

<!DOCTYPE html>

<html>

            <head>

                        <title>HTML Attribute</title>

            </head>

            <body bgcolor="pinkstyle="color:red" >          

                        <h1>यह लाल रंग में है body में परिभाषित रंग । </h1>

                        <h4>यह लाल भी रंग में है body में परिभाषित रंग । </h4>

                        <p style="color:green" > यह पैराग्राफ में परिभाषित हरे रंग में है। </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 पढ़ कर जान सकते है।

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h