What is the use of alternative text in image mapping in HTML ?

Last Updated : 21 Nov, 2021

In this article, we will see how alternative text can be useful to provide metadata related to the images in the case when the image can’t load properly. The reason for being not loading properly may arise due to slow internet connectivity, images get removed from the web page, the absolute path for the image has not given, or maybe some technical issues in the site so on. The alternative text, sometimes also known as alt attribute in HTML, provides the metadata regarding that specific image. The alt attribute can be used with input> tag, <area> tag & <img> tag. This alt text appears when the image loading is failed. This gives the idea about that specific image.

Syntax:

<img src="url" alt="text"/>

Attribute Value: It contains single value text which is used to specify the alternative text for the supported element if an image is not displaying.

Example 1: In this example, the image path contains the image along with alt text, so it will display the image.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Alternative Text</title>
</head>
 
<body>
     
<p>Image loaded</p>
 
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210825232132/gfg.png"
        alt="Must Do Coding Questions for 
        Companies like Amazon, Microsoft, Adobe" />
</body>
 
</html>

Output:

Example 2: In this example, we will see when the alt text is missing and the image failed to load.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Alternative Text</title>
</head>
 
<body>
     
<p>Image failed to load and alt text is missing</p>
 
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210825232132/gfg.png" />
</body>
 
</html>

Output: Here, we haven’t provided the correct absolute path link for the image & also not provided any info related to the image.

Example 3: In this example, we will see when alt text is added & Image failed to load.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Alternative Text</title>
</head>
 
<body>
     
<p>Image failed to load having alt text</p>
 
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/2021082523213/gfg.png"
        alt="Must Do Coding Questions for Companies 
        like Amazon, Microsoft, Adobe" />
</body>
 
</html>

Output: Here, we haven’t provide the correct absolute path link for the image but provided the alt text.

Uses of Alternative Text:

The first and most basic use of alternative text is to provide the metadata ie., an image description. If an image is not loading or taking time to load, then this text will appear to the user.
For search engines, such as Google, Bing, there is a separate tab of images and they are crawling every web page to find the relevant images for every keyword. So instead of reading images from every web page which is difficult for them, they use alternative text to understand what the image is showing. Hence because of alternative text, it is easy to search engines for better crawling and ranking your website.
There are some peoples who are visually impaired and can’t read web pages. Hence they use a screen reader, screen readers read out all the content except images. So for images, the alternative text helps screen-reading tools describe images, and people can get an idea about that specific image.