Image Tags

Last Updated: 01 Nov 2025

  • The <img> tag is used to embed images in an HTML document. It helps display photos, icons, logos, and more on a webpage.
  • support various image formats, such as .jpg/.jpeg, .png, .gif,.svg,.webp etc..png or .webp are best for image optimization(speed + quality). Syntax
<img src="image.jpg" alt="Image Description" />
  • src → Source of the image (path or URL)
  • alt → Alternative text (shown if image not loaded)

Example

<img src="nature.jpg" alt="Beautiful Nature" />

<img
  src="https://raw.githubusercontent.com/itzDM/publicAssets/refs/heads/main/opengraph-image.png"
  alt="Tukka Learn"
/>

🗣 Hinglish Tip: <img> tag self-closing hota hai — iska koi closing tag (</img>) nahi hota!

Attributes of <img> Tag

  • src → Source of the image (path or URL)
  • alt → Alternative text (shown if image not loaded)
  • width → Sets the width of the image
  • height → Sets the height of the image
  • title → Adds a tooltip to the image
  • loading → Sets the loading behavior of the image

Example

<img
  src="https://raw.githubusercontent.com/itzDM/publicAssets/refs/heads/main/opengraph-image.png"
  alt="Tukka Learn"
  width="200"
  height="200"
  title="Tukka Learn"
  loading="lazy"
/>

<!-- Clickable Image -->
<a href="https://tukkalearn.vercel.app/"
  ><img
    src="https://raw.githubusercontent.com/itzDM/publicAssets/refs/heads/main/opengraph-image.png"
    alt="Tukka Learn"
/></a>

🧠 Quick Practice

← PreviousNext →