HTML Attritubes kya hai?

Table of Contents

HTML Attributes

  • Attributes किसी भी Element के बारे में Extra Information देते हैं.
  • Attributes Element का Behavior बताते हैं.
  • Attribute का Use हमेशा Start Tag के साथ किया जाता है.
  • आप एक HTML Element में कितने भी Attribute Add कर सकते हो, उनमे Only Space देने की जरूरत होती है.

Syntax –

<element attribute = “value”> Content </element>

Style Attribute with Color Property

<!DOCTYPE html>
<html>
<head>
<title> Arora Computer’s HTML </title>
</head>
<body>
<p style="color:red"> My Name is Mohit Kumar </p>
<p style="color:blue"> I am Going to Jaipur </p>
</body>
</html>

Result

style attribute with color property

Explanation

इस Program में हमने Style Attribute के साथ Color Property का Use किया है जो कि Text का Color Change कर देगा.

Style Attribute with height Property

इस Property के द्वारा हम दो Paragraphs के बीच की height Change कर सकते हैं.

Example 

<!DOCTYPE html>

<html>

<head>

<title> Arora Computer’s HTML </title>

</head>

<body>

<p style="height:40px"> By height Property, we can Change Height of two paragraphs </p>

<p style="height:40px"> By height Property, we can Change Height of two paragraphs </p>

</body>

</html>

Result

style attribute with height propertyTitle Attribute

इस Attribute का Use Tooltip / Text Hint के रूप में किया जाता है. जब User कर्सर को Text के ऊपर लेकर जाता है तो यह Attribute उस Text से Related Information Display करता है. इसका Use Paragraph Tag और Heading Tag के साथ किया जाता है.

Example

<!DOCTYPE html>

<html>

<head>

<title> Arora Computer’s HTML </title>

</head>

<body>

<h1 title="I Love Money and Money Loves me so much"> This is an Example of Title Attribute </h1>

<p title="Help Toolkit"> Move the cursor over the heading and paragraph and you will see a description as a tooltip </p>

</body>

</html>

Result

title attribute in html

HREF Attribute

Href attribute का Use <a> Tag यानि Anchor Tag के साथ किया जाता है. इसका Use Hyperlink बनाने के लिए किया जाता है. जब हम इस पर क्लिक करेंगे तो यह हमें एक दूसरे Page पर ले जायेगा.

Syntax

<a href = “link address”> Content </a>

Example –

<!DOCTYPE html>

<html>

<head>

<title> Arora Computer’s HTML </title>

</head>

<body>

<a href = "https://www.supportothers.org"> Arora Computer </a>

</body>

</html>

Result –

html program of anchor tag

SRC Attribute

SRC Attribute का Use IMG Tag के साथ किया जाता है. इस Tag और Attribute का Use Browser पर Image Display कराने के लिए किया जाता है. Image Path / Source सही होना चाहिए नहीं तो Image Display नहीं होगी.

Syntax

<img src = “image path”>

Example

<!DOCTYPE html>

<html>

<head>

<title> Arora Computer’s HTML </title>

</head>

<body>

<img src="web.jpeg">

</body>

</html>

Result

src attribute with img tag in html

Width and Height Attributes

हम SRC Attribute के साथ Height और Width Attribute का भी Use कर सकते हैं. इससे हम Browser पर Display होने वाली Image की Height और Width control कर सकते है.

Syntax

<img src="image path" height="400" width="300">

Example

<!DOCTYPE html>

<html>

<head>

<title> Arora Computer’s HTML </title>

</head>

<body>

<img src="web.jpeg" height="400" width="300">

</body>

</html>

Result

height and width attribute with img tag in html

ALT Attribute

Img Tag के साथ Alt Attribute का Use करने पर यह उस Image के बारे में Alternative Text यानि उस Image के Information बताता है यदि किसी Reason से जैसे Slow Internet Connectivity या कुछ अन्य Image Display नहीं हो पाये.

Syntax

<img src="image path" alt= “This Image is about ALT Attribute”>

Example

<!DOCTYPE html>

<html>

<head>

<title> Arora Computer’s HTML </title>

</head>

<body>

<img src="web.jpg" alt="This Image Describe about alt attributes">

</body>

</html>

Result

alt attribute with img tag in html

Lang Attribute

Lang Attribute का Use <html> Tag के अन्दर किया जाता है. यह Attribute Webpage की Language बताता है. यह Search Engine और Browser को Webpage की Language समझने में Help करता है.

<!DOCTYPE html>

<html lang = “en”>

<head>

<title> -------------------- </title>

</head>

<body>

----------------------------------

----------------------------------

</body>

<html>

हम Language के साथ Country Code भी Add कर सकते हैं. इसमें पहले दो Characters Language तथा दूसरे दो Characters Country बताते हैं.

<!DOCTYPE html>

<html lang = “en-US”>

<head>

<title> -------------------- </title>

</head>

<body>

----------------------------------

----------------------------------

</body>

<html>

Leave a Comment