⚙️
Basics

Attributes

Extra Info Tags Ko Do
💡 Attribute ek ID card ke extra fields jaisa hai — tag khud batata hai "ye kya hai" (jaise <img> = "ye image hai"), attributes extra details dete hain (src = "kaunsi image", alt = "agar na dikhe to kya bolna").

Attributes opening tag ke andar likhe jaate hain: name="value" format mein — extra information dete hain tag ke baare mein. Har tag ke apne specific, commonly-used attributes hote hain (jaise <img> ka src/alt, <a> ka href).

Kuch attributes GLOBAL hain — kisi bhi tag par use ho sakte hain: id (unique identifier), class (styling/JS ke liye grouping), style (inline CSS), title (hover tooltip).

<img src="cat.jpg" alt="Ek cute billi">
<a href="https://example.com">Click here</a>

<!-- Global attributes: -->
<div id="header" class="main-nav">...</div>
<p title="Ye ek tooltip hai">Hover karo mujhpar</p>

<!-- Multiple attributes: -->
<input type="text" placeholder="Naam likho" required>
⚙️
Attribute ek ID card ke extra fields jaisa hai — tag khud batata hai "ye kya hai" (jaise <img> = "ye image hai"), attributes extra details dete hain (src = "kaunsi image", alt = "agar na dikhe to kya bolna").
1 / 2
⚡ Quick Recap
  • attribute="value" format, opening tag ke andar
  • id = unique (ek page mein ek baar), class = shared/reusable
  • Har tag ke apne specific attributes (src, href, type, etc.)
On this page (2 subtopics)

data-* attributes (jaise data-user-id="123") custom information store karne ke liye hain jo JavaScript baad mein use kar sake — standard HTML attributes na hone par bhi, ye valid aur safe way hai extra data attach karne ka.

<div data-user-id="123" data-role="admin">
  User Card
</div>

<!-- JavaScript se access: -->
<!-- element.dataset.userId  → "123" -->
<!-- element.dataset.role    → "admin" -->
💡Tip: data-* attributes bahut common hain jab HTML ko JavaScript ke saath integrate karna ho — jaise ek button par data-product-id rakhna, taaki click hone par JS use kar sake.

Kuch attributes "boolean" hote hain — sirf unki PRESENCE hi matter karti hai, koi value nahi chahiye (jaise disabled, required, checked). required="required" likhna technically valid hai, lekin sirf required likhna kaafi hai.

<input type="text" required>          <!-- required hai -->
<input type="text">                     <!-- required nahi hai -->

<button disabled>Click Nahi Kar Sakte</button>
<input type="checkbox" checked>
💡Tip: Boolean attributes ki absence (na hona) hi "false" ka matlab hai — required="false" likhna GALAT approach hai, ye still "required=true" hi treat hoga (kyunki attribute present hai). Attribute hataana hi "false" karna hai.