Add a small photo strip to a local walking-club page. Each image should still make sense to a visitor who cannot see it, and one should lead somewhere useful when clicked.
A walking-club photo strip with descriptive alt text, one image reserving space with dimensions, and one clickable image link.
The <img> tag puts an image on a page. It is a void element with no content or closing tag; a trailing / is optional.
<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 |
height | No | Height in pixels |
src attributesrc can be a relative path to an image in the same project or an absolute URL:
<!-- Relative path -->
<img src="images/logo.png" alt="Company logo" />
<!-- Absolute URL -->
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Fronalpstock_big.jpg?width=320" alt="Mountain landscape" />
alt text mattersalt text aloud for people 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 lets the browser reserve space before the image loads. That prevents distracting layout jumps.
Wrap an <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>
Preview the page. If remote images cannot load in the embedded preview, read their descriptive alt text and check your markup; the tests do not require a network connection. Every meaningful image should have a useful alt description; at least one should reserve visible space with width and height, and clicking one should follow its link.
<img> elements using public image URLs.alt text.width and height attributes to at least one <img>.<a href="https://..."> so it links to a useful page.Your walking-club page can now communicate with images without leaving visitors who use assistive technology behind.
The <img> tag is self-closing: <img src="path/to/image.jpg" alt="description" />
alt text is not optional — it's read aloud by screen readers and shown when the image fails to load.
Use width and height attributes to reserve space and prevent layout shifts.
For decorative images that add no meaning, use alt="" (empty string) so screen readers skip them.