References

Beginner-friendly references for web development, with live, editable examples.

The HTML alt attribute

Attribute All modern browsers Updated
Quick answer

The HTML alt attribute provides a text alternative for an image, shown if it fails to load and read by screen readers. It is used on the <img>, <area> and <input type="image"> elements.

Overview

The alt attribute provides a text alternative for an <img> — the description a screen reader announces, the text shown if the image fails to load, and a signal search engines use to understand the image. It is the most important accessibility attribute on an image.

Write alt that conveys the image's purpose in context, not a literal description of every pixel. A product photo's alt should be the product name; a chart's alt should state its key takeaway; an icon that opens a menu should describe the action ("Open menu"). Keep it concise — a phrase or short sentence — and do not start with "image of" or "picture of", since screen readers already announce that it is an image.

For purely decorative images that add no information, use an empty alt="" — this explicitly tells assistive technology to skip them. That is different from omitting alt entirely: a missing alt can make a screen reader read out the file name, which is worse than nothing.

Syntax

<img src="cat.jpg" alt="A ginger cat asleep on a sofa">

Values

Value
A short, descriptive string. Use an empty value (alt="") for purely decorative images.

Example

Live example 
<img src="https://codeshack.io/web/img/icon.png" alt="CodeShack logo" width="48" height="48">

Best practices

  • Give every <img> an alt that conveys its purpose in the surrounding context.
  • Use empty alt="" for purely decorative images so screen readers skip them.
  • Keep it concise and drop "image of" / "picture of" prefixes.
  • For complex images (charts, diagrams), summarize the takeaway in alt and provide full detail nearby.

Accessibility

alt is essential for accessibility and SEO. Describe the image's meaning or function, not its appearance. Use alt="" (empty, but present) for decorative images so screen readers skip them, and never omit the attribute entirely.

Frequently asked questions

What is alt text for?
It describes an image for screen-reader users, displays if the image fails to load, and helps search engines understand the image.
When should the alt attribute be empty?
For purely decorative images that convey no information — use alt="" so assistive technology skips them.
Should alt text start with "image of"?
No. Screen readers already announce that it is an image, so the prefix is redundant.
Does alt text help SEO?
Yes. Search engines use it to understand image content, which can help images and the page rank.
allowfullscreen as