Introduction of HTML Attribute – Html Attribute क्या है? (Lesson 5)

HTML language सीखने का हमारा purpose यही होता है, कि हम एक awesome web page create कर पाए। अब चूंकि, HTML tags एक web page को simple Structure देते है। इसीलिये उसके additional improvement के लिए हमे इन element के attributes की knowledge होना बहुत जरूरी है।

HTML Attribute Kya Hai - HTML Attributes in Hindi

इस पोस्ट HTML ATTRIBUTES IN HINDI में आप जानेगें HTML Attribute क्या है? और इनका उपयोग Html में कैसे किया जाता है। तो चलिए let’s Start-

HTML Attribute क्या है (What is HTML Attribute in Hindi)

अभी तक आप HTML document बनाते वक्त किसी HTML element का उपयोग कैसे करते है? जाहिर है, उसके सरल रूप में। For example अगर आप किसी Web page में Image Add करते है, तो आप उसे <image> इस तरह से लिखेंगे। परन्तु अगर आपको उस image की height, width, URL, alt text, etc. set करना हो तो आप क्या करेंगे।

यहां पर काम आते है, Html element के यह attributes. कुल मिलाकर अगर देखा जाए तो Html attribute एक Html element (tag) को extra configure या कहे उस element के बारे में additional information provide करता है।

अच्छे से समझे तो Html element की विशेषताओं को define करने के लिए एक attribute का उपयोग किया जाता है। इन attributes को Html tag के opening tag के भीतर रखा जाता है।

Example-:

<img src="set-img-path" alt="alt-text" height="11" width="11"> </img>

All attributes दो parts से मिलकर बनते है । a) name and b) value.

  • name एक property है, जिसे आप set करना चाहते है। for example – image को extra configure करने के लिए src attribute का use किया जाता है। तो यहां पर image tag के attribute का name src है। जिसका उपयोग हम image को extra configure करने के लिए करेंगे।
  • value वह है, जो आप property के द्वारा उस element में Set करना चाहते है। value को हमेशा quotation (” “) के भीतर लिखा जाता है। उप्पर उदाहरण में image attribute की value URL है, जहाँ पर image का URL set करने पर web page में image show होने लगती है।

All HTML tags के Attribute name व value को हमेशा small latter में ही लिखा जाता है।

Example-:

<! DOCTYPE html>
<html>

<head>
<title> image attribute example </titel>

</head>

<body>

<img> src= "set_mg_url" alt="set_alt_text" width="set_img_width" height="set_img_height"

</body>

</html>

अब तक तो शायद आपको समझ आ गया होगा की HTML attribute क्या होता है? और इसका उपयोग हम Html element को additional information provide करने के लिए कैसे कर सकते है। तो चलिये अब Html में अधिकांश उपयोग होने वाले कुछ Html attribute के बारे में जानते है।

HTML Attribute List in Hindi

वैसे तो Html attribute list बहुत लंबी है, जिसे example के साथ एक पोस्ट में बता पाना मुश्किल है। लेकिन कुछ ऐसे HTML attribute है, जिनका उपयोग Html में सबसे ज्यादा होता है। इसीलिए उन्हें नीचे उदाहरण के साथ बताया गया है।

1. src attribute

Html में image insert करने के लिए <img> tag का use किया जाता है। src img tag का attribute है।  image का source address set करने के लिए src attribute use किया जाता है। HTML में img का source address set करने के दो तरीके है।

अगर image आपके computer में same location पर save है। जहाँ आपने document file save की है, तो आप सिर्फ उसका नाम देकर image set कर सकते है। परन्तु अगर image computer पर different location में save है, तो फिर आपको उसका complete path देना होगा।

Example-:

<img src="set_img_path"> </img>

2. Width and height Attribute

Html में image का आकार set करने के लिए size attribute का इस्तेमाल होता है। size attribute की help से image की height और width set की जाती है।

Example-:

<! DOCTYPE html>

<html>
<head>
<title> example of height and width attribute </title>
</head>
<body>
<img src="set-img-path" width="20" height="20"> html attribute </img>

</body>
</html>

3. Alt Attribute

Alternative text specify करने के लिए alt attribute का use किया जाता है। Alt attribute किसी image के लिए alternative information provide करता है। अगर किसी कारण वश image web page पर show नही होती है, तो इससे user अपना mouse चित्र के ऊपर ले जा कर वह image किस बारे में है। यह पता कर सकता है।

Example-:

<! DOCTYPE html>

<html>
<head>
<title> alt attribute example </title>
</head>
<body>
<img src="set-img-path" alt="set-img-alt-text"> html attribute </img>

</body>
</html>

4. href Attribute

Html Link को <a> से define किया जाता है। <a> tag में link को specified करने के लिए href attribute का use होता है।

Example-:

<!DOCTYPE html>

<html>
<head>
<title> href attribute example </title >
</head>

<body>
<a href="nayaseekhon.com"> html attribute </a>

</body>
</html>

5. lang Attribute

एक document की language को Html tag में lang attribute की help से declared किया जाता है। Accessibility applications और Search engine के लिए HTML document की language set करना अनिवार्य है।

Example-:

<! DOCTYPE html>

<html lang="hi-ind">

<head>
<title> lang attribute example </title>

</head>
<body>
....

</body>
</html>

6. Style Attribute

Style attribute का उपयोग किसी element के Style ( Color, Font, Size, etc.) को specify करने के लिए किया जाता है।

Example-:

<! DOCTYPE html>

<html>
<head>
<title> Style attribute example </title>
</head>

<body>
<p style=colour:blue> paragraph </p>

</body>
</html>

7. title Attribute

Title Attribute किसी element के बारे में extra information provide करता है। जब mouse उस element के ऊपर ले जाया जाता है, जिसमे title attribute use हुआ है, तो set की गयी जानकारी tool-tip text के रूप में show होती है।

Example-:

<! DOCTYPE html>

<html>
<head>
<title> title Attribute example </title>

<body>
<p title="html attribute"> this is title attribute </p>

</body>
</html>

Summary -:

1. HTML attribute एक Html element को additional information provide करते है।

2. सभी Html element के attribute होते है।

3. HTML attribute name व value से define किये जाते है।

4. HTML attribute की value को double quote (” “) के भीतर लिखा जाता है।

5. HTML Attribute हमेशा element के Starting tag के भीतर ही लिखे जाते है।

इन्हे भी पढ़ें-

6 thoughts on “Introduction of HTML Attribute – Html Attribute क्या है? (Lesson 5)”

  1. Sir jaisa ki hum ne previous article me pda tha ki tag ko close nhi kar sakte,,
    ………………………lekin ap me to tag ko close kar diya…..Sir doubt ho rha hai,,,,,,,

    Reply
    • Vivek, इसके लिए हम माफ़ी चाहेंगे 🙏। क्या आप मुझे बता सकते है कहाँ आपको गलती लग रही है, ताकि हम आपकी मदद कर सके।

      Reply

Leave a Comment