HTML Me Image Tags Ka Use Kaise Kare?

The Image Tag (<img>)

HTML me, <img> tag ka use web page par image embed karne ke liye hota hai. Yeh ek "empty" ya "self-closing" tag hai, iska matlab hai ki iska koi closing tag (</img>) nahi hota. Image display karne ke liye src (source) aur alt (alternative text) attributes sabse zaroori hain.

<img src="image-url.jpg" alt="image description">

Core Attributes

• src (Source): Yeh attribute image file ka path ya URL specify karta hai. Iske bina image display nahi hogi.
• alt (Alternative Text): Yeh image ka text description provide karta hai. Agar image load nahi ho paati, toh yeh text display hota hai. Yeh accessibility (screen readers ke liye) aur SEO ke liye bohot important hai.

Image Size (width and height)

Aap width aur height attributes ka use karke image ka size define kar sakte hain. Yeh browser ko image ke liye space reserve karne me madad karta hai, jisse page load hote waqt layout shift (jank) nahi hota.

<img src="https://picsum.photos/seed/htmlimg/400/250" alt="Sample Image" width="400" height="250">

Image as a Link

Kisi image ko clickable link banane ke liye, aap <img> tag ko <a> (anchor) tag ke andar wrap kar sakte hain.

<a href="/topics">
  <img src="https://picsum.photos/seed/imglink/400/200" alt="Go to Topics" width="400" height="200">
</a>

Semantic Caption (<figure> and <figcaption>)

Jab aapko kisi image ke saath uska caption (title ya description) dena ho, toh use <figure> aur <figcaption> tags me wrap karna best practice hai. Yeh semantic hai aur SEO ke liye accha hai.

<figure>
  <img src="https://picsum.photos/seed/tajmahal/600/350" alt="Taj Mahal">
  <figcaption>The Taj Mahal, an ivory-white marble mausoleum.</figcaption>
</figure>

Key Takeaways

• <img> tag ka use web pages me images add karne ke liye hota hai.
• src aur alt attributes hamesha use karne chahiye.
• width aur height attributes page layout shifting ko rokne me madad karte hain.
• Image ko link banane ke liye use <a> tag ke andar rakhein.
• Image caption ke liye <figure> aur <figcaption> ka use karein.