HTML img tag contains alt attribute. This attribute specifies the information about the image like image name, image link, image author, image specification, etc. The main purpose of this attribute is when the internet connection is slow, the image may not load but is loaded without any problem. So instead of the user go back from them, if the user moved his cursor from the page, it would display some text regarding the image; therefore, he can understand that there is some content on this page and wait for some time until the page is loaded.

Real-Time Scenario: While we are displaying any image on the web, it is not fair to the end-user without knowing what the image is about. So we have to specify some content to the image by using the alt attribute.

How does Alt Attribute work in HTML?

Alt Attribute provides alternative information for the image to recognize what the image is meant for. This attribute allows only text. This attribute available in tags:

This 3 tags alt attribute is only for showing text on top of the image.

Syntax #1 – tag

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text">

Syntax #2 – tag

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="text">
</map>
<input> tag

Syntax #3 – tag

<input type="image" alt="text">

Examples to Implement Alt Tag in HTML

below are the examples mentioned:

Example #1

Code:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

Output:

If image resource is available:

If image resource is not available:

Example #2

Code:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with area tag and alt attribute</h1>
<img src="/static/imghw/default1.png" data-src="d2.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Alt Tag in HTML" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

Output:

If image resource is available:

If image resource is not available:

Example #3

Code:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1>Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1>Images with input tag and alt attribute</h1>

Output:

If image resource is available:

If image resource is not available:

Conclusion

Alt is an attribute available in area, img and input tags. This alt attribute is used to provide information about images like what is an image or image coordinates, image author, etc.

The above is the detailed content of Alt Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!