HTML: alt attribute
The alt attribute provides a short alternative for an image when the image cannot be seen or loaded.
What you will learn
- How to write useful alternative text
- When to use an empty
alt - How image links and buttons should describe their purpose
Informative images
<img src="chart.png" alt="Sales increased from April to June">Describe the meaning a reader needs, not every visual detail. Keep the text short and avoid starting with “image” or “picture”.
Decorative images
<img src="divider.svg" alt="">An empty alt tells assistive technology that the image is decorative and can be skipped. Do not omit the attribute when an image is meaningful.
Images that act as controls
<a href="/home.html">
<img src="logo.svg" alt="Yugien home">
</a>For an image link or button, write the action or destination. Avoid keyword stuffing and do not rely on the title attribute as a replacement for alt.
Common mistakes
- Do not repeat nearby text that already gives the same information.
- Do not use a filename such as
IMG_1234.jpgas the alternative text. - Use an empty value for decoration, not a missing
altattribute.