Images
<img src="path" alt="description"> image dikhata hai. src image ka path hai (local file ya URL). alt image ka text description hai — TEEN reasons se zaroori hai: image load na ho to fallback text dikhta hai, screen readers (blind users ke liye) ise padhte hain, aur SEO ke liye search engines isse use karte hain.
width/height attributes image ka display size set karte hain (aur browser ko batate hain kitni jagah reserve karni hai, "layout shift" avoid karne ke liye jab tak image load ho rahi ho).
<img src="cat.jpg" alt="Ek orange billi so rahi hai" width="400" height="300">
<!-- Bina alt (BAD practice): -->
<!-- <img src="cat.jpg"> -->
<!-- Decorative image (purely visual, no info) — empty alt theek hai: -->
<img src="divider.png" alt="">- src = image ka path, alt = text description (accessibility + SEO)
- width/height = layout shift avoid karta hai
- Decorative images ke liye alt="" (empty), missing alt kabhi nahi
srcset attribute browser ko multiple image versions deta hai (alag resolutions ke liye) — browser khud decide karta hai device ke hisaab se sahi wali download kare, bandwidth bachane aur sharpness dono ke liye.
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Responsive photo">Alag formats alag use-cases ke liye: JPG (photos, lossy compression, chhota size), PNG (transparency chahiye, sharp edges/logos), SVG (vector graphics, icons — kisi bhi size par sharp), WebP (modern, JPG/PNG dono se chhota, best performance).
<img src="photo.jpg" alt="Photo"> <!-- photos ke liye -->
<img src="logo.png" alt="Logo"> <!-- transparency chahiye -->
<img src="icon.svg" alt="Icon"> <!-- vector, sharp at any size -->
<img src="photo.webp" alt="Photo"> <!-- modern, best compression -->