HTML Attributes — Beginner Guide
Gujlish reference: class, id, aur bijja common attributes
1. Attribute su chhe?
Attribute etle tag ne extra information aapva mate — tag na opening tag ma j lakhay chhe. Pattern:
attribute="value"
<img src="[Link]" alt="Company Logo" width="200">
Attribute Kaam
src source (image/script/link no path)
alt image na load na thay to backup text (accessibility mate pan jaruri)
width / height size define kare
href link nu destination (<a> tag ma)
title hover karta tooltip batave
placeholder input box ma hint text
disabled element ne disable / click-unable banave
required form field required banave
target="_blank" link ne new tab ma khole
2. class Attribute
CSS styling ane JS targeting mate use thay. Same class multiple elements ne aapi shakay (reusable). Ek
element ma multiple classes space thi separate kari shakay.
<p class="text-red bold">Warning message</p>
<p class="text-red">Another warning</p>
.text-red { color: red; }
.bold { font-weight: bold; }
Kyare use karvu: Jyare same style/behavior multiple elements ne joiye (buttons, cards, list items).
3. id Attribute
Ek page par ek j vaar unique hovu joie (duplicate na hovu joie). Ek specific element ne target karva mate
use thay — CSS, JS, ke anchor link (#id) mate.
<div id="header">...</div>
<a href="#header">Go to header</a>
#header { background: black; }
[Link]("header")
Kyare use karvu: Jyare ek j specific element ne uniquely identify/target karvu hoy — jem ke ek particular
section, modal, ke form.
class vs id — Quick Difference
class id
Reusable? Ha, multiple elements ma Na, ek page par ek j vaar
CSS selector .classname #idname
Priority (specificity) Lower Higher
Best use Common styling Unique element target, JS hook, anchor link
4. Global Attributes (kai pan tag par lagavi shakay)
<div class="card" id="main-card" title="Info card" style="color:blue"
data-user-id="101" hidden></div>
Attribute Kaam
style inline CSS
data-* custom data store karva mate (data-user-id="101") — JS ma easily access thay
hidden element ne hide kare
tabindex keyboard navigation order set kare
contenteditable element ne editable banave
draggable drag-and-drop enable kare
lang content ni language define kare
5. Form-specific Attributes
<input type="email" name="email" id="email" placeholder="Enter email" required
maxlength="50">
Attribute Kaam
type input no type (text, email, password, number, checkbox...)
name form submit thay tyare backend key
value default/current value
maxlength / minlength character limit
checked checkbox/radio pre-selected
readonly edit na thay pan value submit thay
autofocus page load thata j field ma focus
6. Yaad Rakhva Jevu (Quick Tips)
1. Attribute values hammesha quotes (" ") ma lakho — best practice.
2. class = reusable styling/grouping. id = unique targeting.
3. Ek element ma multiple classes chalse, pan id ek j apay.
4. alt attribute images mate skip na karvu — accessibility + SEO mate important.
5. data-* attributes React/JS projects ma khub kaam ave chhe (jem VegBazar jeva dynamic apps ma).