🌟 Importance of Alternate Text (alt attribute) in <img>

The alt attribute gives a text description of the image. It might look simple, but it plays a big role in accessibility, usability, and SEO.

---

✅ 1. Accessibility for Visually Impaired Users

• Many people use screen readers (software that reads out the text on the screen).

• If there is an image, the screen reader reads the alt text aloud.

• Example:

  <img src="lion.jpg" alt="A lion sitting in the jungle" />
  

  The screen reader will say: “A lion sitting in the jungle”. → This makes the webpage inclusive.

---

✅ 2. Fallback When Image Doesn’t Load

• If the image file is missing, broken, or takes too long to load, the alt text is shown instead.

• Example:

  <img src="unknown.jpg" alt="Beautiful flower in garden" />
  

  If unknown.jpg is not found, the browser shows: Beautiful flower in garden

---

✅ 3. Better User Experience

• Users still understand what the image is about even if it is not visible.
• This prevents confusion and keeps the meaning of the page clear.

---

✅ 4. Search Engine Optimization (SEO)

• Search engines (like Google) cannot “see” images.
• They use the alt text to understand what the image is about.
• This helps the page appear in Google Images search results. Example: If you set alt="Chocolate Cake Recipe", your page might show up when someone searches for “chocolate cake image”.

---

✅ 5. Helps in Printing or Text-Only Browsers

• Some browsers (like older text-only browsers) don’t display images.
• Instead, they display the alt text.
• Useful in cases where the page is printed without images.

---

📌 Example:

<img src="tajmahal.jpg" alt="The Taj Mahal in Agra, India" width="300" />

👉 If the image loads: You see the Taj Mahal. 👉 If it doesn’t: You see text “The Taj Mahal in Agra, India”.

---

🔑 In short:

The alt attribute is important because:

1. Helps visually impaired users.
2. Provides fallback text if the image is missing.
3. Improves user experience.
4. Improves SEO.
5. Works in text-only browsers/printing.

---

✨ Quick exam line: The alt attribute in <img> provides alternative text for an image, useful when the image cannot be displayed, for accessibility (screen readers), and for search engines to understand the image.

---