What is alt attribute in html

HtmlConceptBeginner · 3 min read

What is the alt attribute in HTML and Why It Matters

The alt attribute in HTML provides alternative text for images. It describes the image content for screen readers and shows text if the image fails to load.

⚙️

How It Works

The alt attribute works like a label or description for an image on a webpage. Imagine you have a photo in a book, but someone can't see it. The alt text tells them what the photo is about using words.

When a browser loads a page, if the image cannot be displayed due to slow internet or an error, the alt text appears instead. Also, screen readers for people with vision impairments read this text aloud, helping them understand the page content.

So, the alt attribute acts like a helpful note that explains images when they can't be seen.

💻

Example

This example shows an image with an alt attribute describing it. If the image doesn't load, the 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>Alt Attribute Example</title>
</head>
<body>
  <img src="https://example.com/dog.jpg" alt="A happy golden retriever dog sitting on grass">
</body>
</html>

Output

Displays a golden retriever dog image if loaded; otherwise, shows the text: 'A happy golden retriever dog sitting on grass'.

🎯

When to Use

Use the alt attribute every time you add an image to a webpage. It is important for:

Accessibility: Helps people using screen readers understand images.
SEO: Search engines read alt text to understand image content, improving search rankings.
Fallback: Shows descriptive text if images fail to load.

For decorative images that add no meaning, use an empty alt="" to tell screen readers to skip them.

✅

Key Points

The alt attribute describes images with text.
It improves accessibility for visually impaired users.
It provides fallback text if images don’t load.
It helps search engines understand image content.
Use empty alt for purely decorative images.

✅

Key Takeaways

Always include the alt attribute to describe images for accessibility.

Alt text appears if an image fails to load, providing useful fallback information.

Use clear, concise descriptions that explain the image content.

Empty alt attributes should be used for decorative images to avoid confusion.

Alt text helps search engines understand and index images better.