alt
The text alternative for an image: read by screen readers and shown if the image fails to load.
Syntax
<img src="…" alt="What the image shows">Parameters
| Parameter | Type | Description |
|---|---|---|
| alt | text | A text replacement for the image. |
Examples
A meaningful image, an image link and a decorative one:
<img src="/media/photo-200x200.jpg" alt="A bowl of dark roasted coffee beans" width="100">
<a href="/"><img src="/no-such-logo.png" alt="The Bean — home page" height="30"></a>
<img src="/media/photo-600x200.jpg" alt="" width="200">Notes
Describe what matters in the image in this context, without words like "image" or "photo". For an image link, alt says where the link leads. Decorative images get an empty alt="" — then they are skipped. With no alt at all, a screen reader may read out the file name.
See also
- <img> — An image.
- src — The address of the embedded file for `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.
- <map>, <area> — An image map: different areas of a picture lead to different addresses.
Related recipes
In the tutorial
- Images — The img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.