HTML Basics
HTML Images
Images make pages come alive. The img element embeds pictures, and getting its attributes right is important for speed, accessibility, and SEO.
The Image Tag
The img element is an empty tag. Its two most important attributes are src (the image location) and alt (a text description).
<img src="dog.jpg" alt="A brown dog running in a park">Key Attributes
| Attribute | Purpose |
|---|---|
| src | The path or URL to the image file (required) |
| alt | Text shown if the image fails and read by screen readers |
| width / height | Reserve space to prevent layout jumps while loading |
| loading="lazy" | Defers offscreen images to speed up page load |
Images with Captions
<figure>
<img src="chart.png" alt="Sales chart for 2026" width="400">
<figcaption>Figure 1: Sales grew 30% in 2026.</figcaption>
</figure>⚠️
Never skip the alt attribute. It is essential for visually impaired users, helps SEO, and shows when an image fails to load. For decorative images, use an empty alt="".