HTML Attributes

Attributes किसी HTML element को extra information याbehavior देने के लिए इस्तेमाल होते हैं। Simply बोलें तो — “Tag तो HTML का basic structure है, Attribute उसे और smart और functional बनाता है।”

Syntax:

<tagname attribute="value">Content</tagname>

2. Common Attributes Example

Example 1:

<a href="https://codekeet.com" target="_blank" title="Visit codekeet">Code Keet</a>

href="https://www.google.com" → Link का address
target="_blank" → नए tab में open करना
title="Visit Google" → Hover पर tooltip दिखाना

Example 2:

<img src="nature.jpg" alt="Beautiful Nature" width="400" height="300">

src → Image path
alt → Alternate text जब image load न हो
width/height → Image size

Attribute की Categories

HTML attributes कई तरह के होते हैं। हम उन्हें आसानी से 4 भागों में समझ सकते हैं:

Global Attributes
Specific Attributes
Event Attributes
Data Attributes

4. Global Attributes

Global attributes किसी भी HTML element पर लागू हो सकते हैं।

Common Global Attributes:

Attribute	Description	Example
id	Unique identifier	`<p id="intro">Hello</p>`
class	Group multiple elements	`<div class="container">Content</div>`
style	Inline CSS styling	`<p style="color:red;">Red Text</p>`
title	Tooltip text	`<a title="Click Here">Link</a>`
lang	Language code	`<p lang="hi">नमस्ते</p>`
hidden	Hide element	`<div hidden>Secret</div>`

Example:

<p id="firstPara" class="text" style="color:blue;" title="Hover over me">Hello World!</p>

Specific Attributes

Some attributes are specific to certain tags.

Examples: Anchor <a> Tag:

<a href="https://youtube.com" target="_blank">YouTube</a>

Image <img> Tag:

<img src="photo.jpg" alt="My Photo" width="300">

Input <input> Tag:

<input type="text" placeholder="Enter Name" required>

6. Event Attributes

Event Attributes HTML elements में user actions को handle करने के लिए use होते हैं। Action जैसे: click, mouseover, keypress, load आदि।

Example:

<button onclick="alert('Button Clicked!')">Click Me</button>

onclick → Button click होने पर function execute
Output: Alert box दिखाई देगा

Common Event Attributes:

Attribute (एट्रिब्यूट)	Example (उदाहरण)	Description (विवरण)
onclick	`<button onclick="func()">Click</button>`	Mouse click event (माउस क्लिक इवेंट)
onmouseover	`<p onmouseover="this.style.color='red'">Hover Me</p>`	Mouse hover event (माउस होवर इवेंट)
onmouseout	`<p onmouseout="this.style.color='black'">Hover Out</p>`	Mouse leaves element (माउस तत्व से बाहर निकलता है)
onload	`<body onload="alert('Page Loaded')">`	Page load event (पेज लोड इवेंट)
onkeypress	`<input onkeypress="alert('Key pressed!')">`	Key press event (की प्रेस इवेंट)

7. Data Attributes

Data attributes custom information store करने के लिए use होते हैं। Syntax: data-*

Example:

<div id="product1" data-price="499" data-stock="20"> 
Product Name 
</div>

data-price → Product price
data-stock → Stock quantity

JS में access करना:

<script>
let product = document.getElementById("product1");
console.log(product.dataset.price); // 499
console.log(product.dataset.stock); // 20
</script>

8. Boolean Attributes

Some attributes don’t require value. Presence of attribute itself is enough.

Example:

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

checked → Checkbox automatically checked
disabled → Input field disabled

9. Attribute Combinations Example

<a href="https://codekeet.com" target="_blank" title="Go to Codekeet" id="myLink" class="link">Learn HTML</a>

Multiple attributes एक tag में combine कर सकते हैं।
ID और Class से style और JS handle करना आसान हो जाता है।

10. Practice Examples

Example 1: Image with Attributes

<img src="nature.jpg" alt="Beautiful Nature" width="500" height="300" title="Nature Image">

Example 2: Input Form

<form> 
<input type="text" placeholder="Enter Name" required> 
<input type="email" placeholder="Enter Email" required> 
<input type="submit" value="Submit"> 
</form>

Example 3: Link with Tooltip and Event

<a href="https://youtube.com" target="_blank" title="Visit YouTube" onclick="alert('Going to YouTube!')">YouTube</a>

11. Quick Tips for Attributes

Always use quotes around attribute values → <a href="url">
Use meaningful ID & class names → <div id="header">
Combine multiple attributes if needed → <input type="text" placeholder="Name" required>
For boolean attributes, just write the attribute → <input checked>
Global attributes can go on any element → <p id="para1" class="text">

12. Quick Summary (संक्षेप में)

एट्रीब्यूट प्रकार (Attribute Type)	विवरण (Description)	उदाहरण (Example)
Global	किसी भी एलिमेंट पर लागू होता है	`id`,`class`,`style`,`title`
Specific	टैग-विशिष्ट एट्रीब्यूट	`href`(<a>के लिए),`src`(<img>के लिए)
Event	यूज़र एक्शन्स को हैंडल करता है	`onclick`,`onmouseover`
Data	कस्टम डेटा स्टोरेज	`data-price="499"`
Boolean	किसी मान (value) की आवश्यकता नहीं होती	`checked`,`disabled`

Bonus Tip:

“Attributes = HTML elements के साथ superpower जोड़ने का तरीका” Attributes समझोगे तो HTML pages को interactive और meaningful बना सकते हो।