Blog

HTML Me Image Tags Ka Use Kaise Kare – Image Tags Kya Hote Hain

HTML mein Image Kaise Dalain

Jab bhi hum kisi webpage ko visually appealing banana chahte hain, tab images ka use karna bahut zaroori hota hai. Images ek webpage ko aur bhi attractive aur engaging banati hain, jo users ka attention grab karne mein madad karti hain. HTML mein images insert karne ke liye <img> tag ka use hota hai. Yeh ek self-closing tag hota hai, jo bina kisi closing tag ke kaam karta hai.

Is post mein hum sikhenge ki HTML mein image kaise insert karte hain. Image ko apne web page par display karna simple hai, bas aapko kuch basic HTML tags aur attributes ka istemal karna padta hai.

Basic Syntax

HTML mein image ko dalne ke liye <img> tag ka use kiya jata hai. Iske liye aapko image ka source (URL) dena padta hai, jisse browser ko pata chale ki image kaha se load karni hai.

<img src="image_url" alt="image_description">

Yahan:

  • src: Yeh attribute image ka source specify karta hai (ya to local file path ya online URL).
  • alt: Yeh attribute image ka alternative text provide karta hai. Agar image load nahi hoti, toh yeh text show hota hai.

1: Local Source Image

Agar aapki image aapke computer ya website ke server par ho, toh aap uska relative path src attribute mein daal sakte hain. Jaise:

<img src="images/my_image.jpg" alt="My Image">

Yahan images/my_image.jpg image ka relative path hai. Aapko apni file structure ke hisaab se path adjust karna hoga.

2: External Image URL

Agar image kisi external website par stored hai, toh aap directly image ka URL use kar sakte hain. Jaise:

<img src="https://www.example.com/images/my_image.jpg" alt="My Image">

Isme src mein diya gaya URL image ke online location ko specify karta hai.

3: Image with Specified Size

Agar aap image ka size control karna chahte hain, toh aap width aur height attributes ka use kar sakte hain. Jaise:

<img src="images/my_image.jpg" alt="My Image" width="500" height="300">

Isme image ki width 500px aur height 300px set ki gayi hai. Aapko apne design ke hisaab se size adjust karna hoga.

4: Image as a Link

Agar aap chahte hain ki image par click karne par koi link open ho, toh aap <a> tag ka use karke image ko link bana sakte hain. Jaise:

<a href="https://www.example.com">
    <img src="images/my_image.jpg" alt="My Image">
</a>

Yahan <a> tag ke andar image ko wrap kiya gaya hai. Jab user image par click karega, toh woh https://www.example.com link par redirect ho jayega.

Responsive Images in HTML

Jab hum ek responsive website banate hain, toh humein ensure karna hota hai ki images har screen size par achhi lagein aur jaldi load ho. Iske liye HTML mein srcset attribute aur <picture> tag ka use hota hai. Yeh dono techniques allow karti hain ki browser best-fit image ko select kare, based on device screen size aur resolution.

srcset Attribute

srcset ka use hum <img> tag ke saath karte hain, jisse browser different screen sizes ke liye different images load kar sake.

<img src="small.jpg" 
srcset="medium.jpg 600w, large.jpg 1200w" 
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px" 
alt="Responsive Image">

Explanation:

  • src – Agar browser srcset ko support nahi karta, toh yeh fallback image load karega.
  • srcset – Yeh different images aur unka size specify karta hai (e.g., 600w means 600 pixels wide image).
  • sizes – Yeh batata hai ki browser kis condition mein kaunsi image load karega.

<picture> Tag

Agar humein completely different images load karni hain (e.g., landscape image for desktop & portrait for mobile), toh <picture> tag ka use karte hain.

<picture>
    <source srcset="mobile.jpg" media="(max-width: 600px)">
    <source srcset="tablet.jpg" media="(max-width: 1024px)">
    <img src="default.jpg" alt="Responsive Image">
</picture>

Explanation:

  • <source>: tags alag-alag images specify karte hain different screen sizes ke liye.
  • media: attribute screen width ke basis par image selection decide karta hai.
  • Agar koi condition match nahi hoti, toh <img> tag wala default image load hota hai.

Key Insides:

HTML mein image ko insert karna bahut simple hai. Aap <img> tag ke saath src aur alt attributes ka use kar ke easily images apne website mein include kar sakte hain. Agar aapko image ka size change karna ho ya special formatting karni ho, toh CSS ka bhi use kiya ja sakta hai.

Agar aapko is post ke baare mein koi questions hain, toh comments mein zaroor likhein. Happy Coding!

Quiz: Test Your Knowledge on Image HTML Tags

Bonus: Practical Application!

Try Adding Image HTML Tags to Your Webpage Today!

Use tags like <img>, src, alt, and width to display images on your webpage effectively. Structure your content by incorporating images and enhancing the user experience.

Leave a Reply