HTML Image Alt Text -

HTML image alt text is a description added to an image using the alt attribute of the HTML <img> tag. It helps screen readers describe images to visually impaired users and provides alternative information when an image cannot be displayed.

Writing meaningful alt text is an important part of accessible web development. It also helps search engines understand the subject of an image.

What Is Alt Text in HTML?

Alt text, also called alternative text, describes the purpose or content of an image. It is written inside the alt attribute of the <img> tag.

HTML Alt Text Syntax

<img src="flower.jpg" alt="A red flower in a garden">

In this example, alt="A red flower in a garden" describes the image. If the image fails to load, the browser may display the alternative text.

Why Is Alt Text Important?

Alt text provides several benefits for websites.

Accessibility: Screen readers can communicate meaningful image descriptions to users who cannot see them.
Image understanding: Search engines can use alternative text as one signal to understand image content.
Fallback information: Alternative text can help users understand an image when it cannot be loaded.
Better user experience: Descriptive text provides context when images are unavailable.

HTML Image Alt Text Examples

The following examples show how to write alt text for different types of images.

Example of Descriptive Alt Text

<img src="dog.jpg" alt="A brown dog playing with a ball">

The alt text describes the important details of the image instead of using a generic description such as “dog image.”

Example of Alt Text for a Product

<img src="black-laptop.jpg"
     alt="Black laptop with a 15-inch display">

This description communicates the visible product details that may be useful to someone who cannot see the image.

Example of Empty Alt Text

<img src="decorative-line.png" alt="">

Use an empty alt attribute for purely decorative images that do not convey meaningful information. This allows screen readers to skip them.

HTML Alt Text vs Image Title

The alt and title attributes serve different purposes.

Attribute	Purpose	Example
`alt`	Provides alternative text for an image	`alt="Red rose"`
`title`	Provides additional information, sometimes shown as a tooltip	`title="Rose flower"`

The alt attribute is especially important for accessibility. The title attribute is not a substitute for alternative text.

How to Add Alt Text to an HTML Image

Follow this example to create a complete HTML webpage containing an image with alternative text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Image Alt Text Example</title>
</head>
<body>

    <h1>HTML Image Alt Text</h1>

    <p>Here is an example of an image with alternative text.</p>

    <img src="nature.jpg"
         alt="Green trees surrounding a mountain lake"
         width="400">

</body>
</html>

Save the file as index.html and place nature.jpg in the same folder. Open the HTML file in a browser to view the result.