HTML Basic Tags
Image Tag
The <img> tag displays an image. It is an empty tag, so it has no closing tag.
Syntax:
<img src="cat.jpg" alt="A grey cat sleeping on a sofa">| Attribute | Required? | Purpose |
|---|---|---|
src | Yes | The path or URL of the image file. |
alt | Yes | Text describing the image, read by screen readers and shown if the image fails to load. |
width / height | Recommended | The size in pixels. Setting them stops the page jumping while images load. |
loading | Optional | loading="lazy" loads the image only when the user scrolls near it. |
title | Optional | Tooltip on hover. |
Image paths
<!-- same folder as the HTML file -->
<img src="logo.png" alt="TechSnow logo">
<!-- inside an images folder -->
<img src="images/team.jpg" alt="Our team">
<!-- from another website -->
<img src="https://example.com/photo.jpg" alt="Photo">Image formats
| Format | Best for |
|---|---|
| JPG | Photos |
| PNG | Graphics with transparency, screenshots |
| WebP / AVIF | Modern, much smaller files for both photos and graphics |
| SVG | Logos and icons; stays sharp at any size |
| GIF | Simple animations |
Making an image a link
<a href="https://techsnow.com">
<img src="logo.png" alt="Go to TechSnow home page" width="120" height="40">
</a>