Introduction to Alt Tag in HTML
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 – <img> tag
<img src="image resource" alt="text">
Syntax #2 – <area> tag
<img src="image resource" 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 – <input> tag
<input type="image" src="image resource" alt="text">
Examples to Implement Alt Tag in HTML
below are the examples mentioned:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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="3.jpg" alt="First Bird" style="width: 100%" />
</div>
<div class="column">
<img src="4.jpg" alt="Second Bird" style="width: 100%" />
</div>
<div class="column">
<img src="5.jpg" alt="Third Bird" style="width: 100%" />
</div>
</div>
</body>
</html>
Output:
If image resource is available:
If image resource is not available:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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="d2.jpg" width="146" height="127" alt="Dog" 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>
</body>
</html>
Output:
If image resource is available:
If image resource is not available:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
<form action="#">
<label for="firstName">First name:</label> <input type="text"
id="firstName" name="firstName"> <input type="image"
src="R1.jpg" alt="Submit Button" width="48" height="48">
</form>
</body>
</html>
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.
Recommended Articles
This is a guide to Alt Tag in HTML. Here we discuss an introduction to Alt Tag in HTML, how does this tag work with programming examples. You can also go through our other related articles to learn more –