The <img> tag embeds images in a page. It is a self-closing (void) element — it has no content and no closing tag.
<img src="cat.jpg" alt="A tabby cat sitting on a windowsill" />
| Attribute | Required | Description |
|---|---|---|
src | Yes | Path or URL to the image file |
alt | Yes | Alternative text description |
width | No | Width in pixels (or CSS units) |
height | No | Height in pixels (or CSS units) |
src attributesrc can be a relative path (image in the same project) or an absolute URL:
<!-- Relative path -->
<img src="images/logo.png" alt="Company logo" />
<!-- Absolute URL -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/240px-Fronalpstock_big.jpg" alt="Mountain landscape" />
alt text mattersalt text aloud for users who cannot see the image.<!-- Good: descriptive alt text -->
<img src="sunset.jpg" alt="Orange and pink sunset over the Pacific Ocean" />
<!-- Bad: missing alt text -->
<img src="sunset.jpg" />
<!-- Correct for purely decorative images -->
<img src="divider.png" alt="" />
<img src="photo.jpg" alt="Profile photo" width="200" height="200" />
Setting width and height is a good practice — the browser can reserve the correct space before the image loads, preventing annoying layout jumps.
Wrap <img> in an <a> tag to make it a clickable link:
<a href="https://www.example.com">
<img src="banner.jpg" alt="Visit Example.com" />
</a>
<img> elements using public image URLs.alt attribute.width and height attributes to at least one <img>.<a> tag so clicking it opens a link.The <img> tag is self-closing: <img src="path/to/image.jpg" alt="description" />