HTML Attributes

HTML Attributes क्या होते हैं?

HTML Attributes elements को extra information प्रदान करते हैं।
Attributes browser को बताते हैं कि किसी element को कैसे behave करना है या कैसे render करना है।

Attributes हमेशा opening tag के अंदर लिखे जाते हैं और उनका format होता है:

<tagname attribute="value">

Example:

<a href="https://example.com">Visit Site</a>

HTML Attributes क्यों जरूरी हैं?

Attributes के बिना HTML बहुत limited हो जाएगी।

Attributes का उपयोग:

  • Link destination define करने के लिए
  • Image source बताने के लिए
  • Element को identify करने के लिए
  • Styling और scripting के लिए
  • SEO और accessibility improve करने के लिए

Common HTML Attributes

कुछ attributes almost हर HTML project में use होते हैं।

1. href Attribute

href attribute <a> tag के साथ use होता है।

Example:

<a href="about.html">About Us</a>

यह attribute link का destination define करता है।

2. src Attribute

src attribute external resource का path बताता है।

Example:

<img src="image.jpg" alt="Image">

3. alt Attribute

alt attribute image का alternate text provide करता है।

Example:

<img src="logo.png" alt="Company Logo">

Importance of alt attribute:

  • SEO improvement
  • Screen readers के लिए accessibility
  • Image load न होने पर text दिखाता है

4. title Attribute

title attribute hover करने पर tooltip दिखाता है।

Example:

<p title="This is a paragraph">Text</p>

Global HTML Attributes

Global attributes वे attributes होते हैं जो almost सभी HTML elements पर apply हो सकते हैं।

1. id Attribute

  • Element को uniquely identify करता है
  • CSS और JavaScript में use होता है

Example:

<p id="intro">Introduction</p>

2. class Attribute

  • Multiple elements को same group में assign करता है

Example:

<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

3. style Attribute

Inline CSS apply करने के लिए use होता है।

Example:

<p style="color:red;">Red Text</p>

Best practice यह है कि inline style कम use किया जाए।

4. lang Attribute

lang attribute document या element की language define करता है।

Example:

<html lang="en">

यह SEO और accessibility के लिए बहुत important है।

Boolean Attributes

Boolean attributes वे होते हैं जिनकी value लिखना जरूरी नहीं होता।

Example:

<input type="checkbox" checked>
<input type="text" disabled>

Common boolean attributes:

  • checked
  • disabled
  • readonly
  • required

HTML Attributes Case Sensitivity

HTML attributes case sensitive नहीं होते, लेकिन:

Best practice:

  • Lowercase attribute names
  • Double quotes का use

Correct:

<img src="photo.jpg" alt="Photo">

Single vs Double Quotes

HTML में attributes single और double quotes दोनों में लिखे जा सकते हैं।

Example:

<p title='Text'>Hello</p>

लेकिन double quotes recommended होती हैं।

Custom Attributes (data-*)

HTML5 में custom attributes allow होते हैं।

Format:

data-custom="value"

Example:

<div data-user="admin"></div>

JavaScript में dynamic data store करने के लिए use होता है।

HTML Attributes और SEO

SEO-friendly HTML attributes:

  • alt (images)
  • title
  • lang
  • Proper id और class naming

Search engines attributes से content को better understand करते हैं।

Common Beginner Mistakes

  • Attribute value बिना quotes लिखना
  • alt attribute छोड़ देना
  • Duplicate id use करना
  • Inline style का overuse

Quick Summary

  • Attributes elements को extra information देते हैं
  • Attributes opening tag में लिखे जाते हैं
  • Global attributes हर element पर apply होते हैं
  • Boolean attributes true/false based होते हैं

Practice Questions

  1. HTML attribute क्या होता है?
  2. id और class में difference क्या है?
  3. alt attribute क्यों जरूरी है?

Share your love

Related Posts