The alt attribute is a text alternative for an image — read aloud by screen readers, shown if the image fails to load, and used by search engines. It's arguably the single most important accessibility attribute in all of HTML.
Syntax
<img src="..." alt="a clear, specific description">Basic Example
<img src="/assets/images/mentor.jpg" alt="CodingNow mentor explaining a whiteboard diagram to two students">Browser output: the image renders normally; if it fails to load, the browser shows this alt text in its place. A screen reader announces the exact same text instead of the image.
How It Works
Screen readers read alt text aloud in place of the image. Search engine crawlers read it as their primary understanding of what the image depicts, since they cannot interpret pixels the way a human does.
Important Attributes
| Value | Meaning |
|---|---|
alt="description" | A meaningful image — describes what it shows or communicates |
alt="" | A purely decorative image — explicitly tells assistive technology to skip it |
| (attribute omitted entirely) | Incorrect in almost all cases — screen readers may announce the filename instead, which is rarely useful |
Real-World Example
<!-- Meaningful image: describe it -->
<img src="/assets/images/certificate.jpg" alt="CodingNow Full Stack Development course completion certificate">
<!-- Purely decorative image: empty alt -->
<img src="/assets/images/decorative-swirl.svg" alt="">Two genuinely different, both genuinely correct uses of alt — the decision hinges entirely on whether the image carries real information.
Common Mistakes
- Writing generic, unhelpful alt text like "image" or "photo1.jpg"
- Keyword-stuffing alt text purely for SEO ("html css javascript python course best coding institute delhi") instead of describing the actual image
- Adding descriptive alt text to a purely decorative image, forcing screen reader users to listen to noise that adds nothing
- Starting alt text with "Image of..." or "Picture of..." — screen readers already announce that it's an image; it's redundant
Best Practices
- Describe what the image actually shows or communicates, specifically and concisely
- Use
alt=""deliberately for decorative images, rather than omitting the attribute - Skip "image of" / "picture of" prefixes — get straight to the description
Accessibility Considerations
This entire topic is accessibility — alt text is how blind and low-vision users using screen readers understand what an image contains. It's frequently cited as the single most impactful, most commonly skipped accessibility fix on the web.
SEO Considerations
Search engines rely on alt text to index images for image search and to better understand the surrounding page's topic — but it must be genuine and descriptive, not keyword-stuffed, which can actively look like spam to search engines.
Browser & Modern HTML Notes
Support and behavior for alt is universal and unchanged across every browser and HTML version — it remains as fundamental today as it was in HTML's earliest days.
Mini Practice
- Write good alt text for a photo of a graduation ceremony on a course landing page.
- Identify which of these three images should get
alt="": a hero background pattern, a product photo, a decorative divider icon.
