The alt is the html attribute that specify the alternative text for the element that cannot be rendered. It was introduced in the HTML 2.
Suppose that you have an image element on your web page and from some technical reasons, images can not be rendered then most browsers shows a cross icon instead of the rendered image. If you use the ALT attribute with the img tag then browsers will show ALT text with the cross icon so the user can get the idea about the missed image.
The following web page code describes why we use ALT attribute:
<Html> <head><title> Use of ALT attribute</title></head> <body> <strong> Authorcode logo </strong><br><br> <IMG src="Image/authorcode.jpg"><br><br><br> <strong> Authorcode logo (image is not found)</strong><br><br> <IMG src="Image/authorco.jpg"><br><br><br> <strong> Authorcode logo (image is not found)</strong><br><br> <IMG ALT="Authorcode logo" src="Image/authorco.jpg"><br><br><br> </body> </html>
From above, IMG tag specifies a file authorco.jpg as the source file and this file not present in working directory.
If image is not found, browser displays an icon indicating unavailability of the file. But if we use the ALT attribute with IMG tag then specified text is displayed in place of error icon.