0
0
HTMLmarkup~5 mins

Image source and alt attribute in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Images make websites look nice and interesting. The src attribute tells the browser where to find the image. The alt attribute gives a description of the image for people who cannot see it.

When you want to show a picture on a webpage.
When you want to help people who use screen readers understand the image.
When the image cannot load, so the description shows instead.
When you want to improve your website's accessibility and SEO.
When you want to add meaningful descriptions to images for better user experience.
Syntax
HTML
<img src="image-url.jpg" alt="Description of the image">

The src attribute must have the path or URL of the image.

The alt attribute should describe what the image shows in simple words.

Examples
This shows a cat picture with a description for screen readers.
HTML
<img src="cat.jpg" alt="A cute orange cat sitting on a chair">
This loads an image from the internet and describes it as a company logo.
HTML
<img src="https://example.com/logo.png" alt="Company logo">
An empty alt means the image is decorative and screen readers will skip it.
HTML
<img src="flower.png" alt="">
Sample Program

This webpage shows a heading, an image of a cat with a clear description, and a short paragraph below it.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Example</title>
</head>
<body>
  <h1>My Favorite Animal</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/320px-Cat03.jpg" alt="A fluffy gray cat lying on a wooden floor" width="320" height="240">
  <p>This is a picture of a cat.</p>
</body>
</html>
OutputSuccess
Important Notes

Always include the alt attribute for accessibility.

Use meaningful descriptions in alt to help users who cannot see images.

If the image is purely decorative, use an empty alt="" to avoid confusion.

Summary

The src attribute tells the browser where to find the image.

The alt attribute describes the image for people who cannot see it.

Using both helps make websites better for everyone.