What is the alt attribute in HTML?

We use the alt attribute in HTML for describing an image in case the user can't view it.

Example

The following example shows the use of the alt attribute on the <img> tag.

Explanation

• Line 5: We provide a correct image source to display the image.
• Line 6: We provide an incorrect image source. Since logo.png doesn't exist, the alt text is displayed instead.

The alt text refers to the string following the alt attribute. Each alt text gives a meaningful description of its image.

The alt attribute is used with the following HTML tags:

• <img>
• <area>
• <input type="image">

Note: The input type must be an image.

Usage

We use the alt attribute in the following scenarios:

• An image may fail to load due to a slow connection or an incorrect source. We use the alt attribute to convey the image's information despite the failure.
• The alt attribute is required by screen readers used by the visually impaired. Since readers can't display images, they read out the alt text for the image.
• The alt attribute improves SEOSearch Engine Optimization. Search engines can not understand the content of images like we do. The alt text helps them read and index images.

The alt text should only contain a description of the image. The best practice is to describe the image as accurately and concisely as possible.

If the image is a hyperlink, the alt text should be the destination page.

An image can also be used as a button. For example, by using <input type="image">. In this case, the alt text should be the action performed (login, signup, and so on).