What is the alt Attribute in HTML Tag? Explained with Examples

The <img> tag in HTML is used to display images on a web page. But what happens if the image doesn’t load?

That’s where the alt attribute (alternative text) comes in.

The alt attribute provides a text description of the image, which is useful for:

  • Accessibility (screen readers for visually impaired users).
  • SEO (search engines understand the image).
  • Fallback (when an image fails to load).

Syntax

<img src="image.jpg" alt="Description of the image">

  • src → Path to the image file.

  • alt → Text shown when the image cannot be displayed.

Example

<img src="logo.png" alt="BigDrop Academy Logo">

If the image loads → You see the logo.
If it fails → You see the text: BigDrop Academy Logo.

Why is alt Important?

  • Accessibility: Screen readers read the alt text to visually impaired users.
  • SEO: Search engines use alt text to understand image content.
  • Fallback: Provides context if the image is missing or slow to load.
  • Best Practice: Required by W3C HTML standards for valid HTML.

Bad vs Good alt Text

ExampleBad Usage ❌Good Usage ✅
Logo<img src="logo.png" alt="image"><img src="logo.png" alt="BigDrop Academy Logo">
Product<img src="car.jpg" alt=""><img src="car.jpg" alt="Red sports car with black roof">
Decorative<img src="line.png" alt="line"><img src="line.png" alt=""> (empty alt for purely decorative images)

Decorative Images

If an image is purely decorative and adds no meaning, you should use an empty alt="".

 
<img src="decor.png" alt="">

👉 This way, screen readers skip it and don’t distract users.

SEO Best Practices

  • Use descriptive but concise text.

  • Avoid stuffing keywords unnaturally.

  • Don’t repeat the same alt text for all images.

  • Use empty alt="" for decorative images.

FAQs

Q1. Is alt attribute required in HTML?
Yes. It is required for valid HTML, even if you leave it empty (alt="").

Q2. What happens if I don’t use alt?

  • Screen readers won’t describe the image.

  • Your website may fail accessibility standards.

  • Search engines won’t fully understand the image.

Q3. Should I put long descriptions in alt?
No. Keep it short and meaningful. For long descriptions, use the <figure> and <figcaption> elements.

Q4. Does alt help in Google ranking?
Yes. It improves image search visibility and overall page SEO.

Q5. What’s the difference between alt and title?

  • alt → Alternative text for accessibility and SEO.

  • title → Tooltip text shown when hovering over the image.