HtmlHow-ToBeginner · 3 min read

How to Add Alt Text to Image in HTML: Simple Guide

To add alt text to an image in HTML, use the alt attribute inside the <img> tag. The alt attribute provides a text description of the image that helps screen readers and shows if the image fails to load.

📐

Syntax

The <img> tag is used to add images in HTML. The alt attribute inside this tag holds the alternative text describing the image.

src: The path or URL of the image file.
alt: The text description of the image.

This text appears if the image cannot load or is read aloud by screen readers for accessibility.

html

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

💻

Example

This example shows an image with alt text describing a sunset scene. If the image does not load, the alt text will appear instead.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image with Alt Text</title>
</head>
<body>
  <img src="https://via.placeholder.com/300x150.png?text=Sunset" alt="A beautiful sunset over the mountains">
</body>
</html>

Output

A 300x150 pixel placeholder image showing the text 'Sunset' with alt text 'A beautiful sunset over the mountains'. If the image fails to load, the alt text is displayed.

⚠️

Common Pitfalls

Common mistakes when adding alt text include:

Leaving the alt attribute empty or missing, which hurts accessibility.
Using generic text like "image" or "photo" that doesn't describe the content.
Adding too long or keyword-stuffed alt text that confuses screen readers.

Always write clear, concise descriptions that explain the image's purpose.

html

<!-- Wrong way: missing alt attribute -->
<img src="logo.png">

<!-- Wrong way: unhelpful alt text -->
<img src="logo.png" alt="image">

<!-- Right way: descriptive alt text -->
<img src="logo.png" alt="Company logo with blue and white colors">

📊

Quick Reference

Attribute	Description	Example
src	URL or path to the image file
alt	Text description of the image for accessibility

✅

Key Takeaways

Always include the alt attribute in your tags for accessibility.

Write clear and concise alt text that describes the image content.

Avoid leaving alt text empty or using vague descriptions like 'image'.

Alt text helps screen readers and shows when images fail to load.