0
0
HTMLmarkup~5 mins

Alt text for images in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Alt text helps describe images for people who cannot see them. It also helps search engines understand the image.

When adding images to a website to explain what the image shows.
When making your website accessible to people using screen readers.
When images fail to load, so users still know what was meant to be shown.
When improving your website's search engine ranking by describing images.
When you want to provide extra information about an image without showing it visually.
Syntax
HTML
<img src="image.jpg" alt="Description of the image">

The alt attribute must be inside the <img> tag.

Keep alt text short but descriptive, like a sentence or phrase.

Examples
This alt text describes the image clearly for someone who cannot see it.
HTML
<img src="cat.jpg" alt="A cute orange cat sitting on a windowsill">
Simple alt text for a logo image.
HTML
<img src="logo.png" alt="Company logo">
Empty alt text means the image is decorative and can be ignored by screen readers.
HTML
<img src="decorative.png" alt="">
Sample Program

This page shows a heading, an image with alt text describing the dog, and a paragraph. 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>Alt Text Example</title>
</head>
<body>
  <h1>My Favorite Animal</h1>
  <img src="https://example.com/dog.jpg" alt="A happy golden retriever dog playing in the park">
  <p>This image shows a happy dog enjoying the outdoors.</p>
</body>
</html>
OutputSuccess
Important Notes

Always add alt text to every image for better accessibility.

If the image is purely decorative, use an empty alt attribute (alt="") so screen readers skip it.

Use clear and simple language in alt text to help all users understand the image.

Summary

Alt text describes images for people who cannot see them.

It improves accessibility and helps search engines.

Always include meaningful alt text or use empty alt for decorative images.