The HTML alt attribute (alternative text) provides a textual description of an image for screen readers and when the image cannot be displayed for some reason.
Definition and Usage
➔ This is a requirement for all meaningful <img> elements to ensure accessibility and improve search engine optimization (SEO).
➔ Its main purpose is to help visually impaired users who use screen readers read the alternate text aloud, so that the user gets an idea of the content or functionality of the image.
➔ Search engines use alt text to understand the content of images, which helps with indexing and ranking in image search results.
➔ Provide an accurate description of the image or leave it blank, but don't just provide keywords without a description, as this can hurt SEO.
Example
<!-- Example of an empty value for the alt attribute -->
<img src="sample.gif" alt="">
Example
<!-- Example of a good description for the alt attribute -->
<img src="rose.png" alt="This is a beautiful red rose with green leaves">
➔ alt attribute in <area> tag.
Example
<map name="image-map">
<area target="_blank" alt="Laptop" title="Laptop" href="#" coords="180,0,394,161" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="#" coords="69,8,63,10,59,14,56,21,53,
26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,
122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6" shape="poly">
<area target="_blank" alt="Note" title="Note" href="#" coords="3,111,138,85,170,247,30,276" shape="poly">
</map>
➔ alt attribute in <input> tag type="image".
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML alt Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="image"] {
width: 50px;
height: 50px;
border: 1px solid black;
padding: 0px 50px;
border-radius: 5px;
margin-left: 50px;
}
input[type="image"]:hover {
background-color: #fff;
border: 2px solid black;
}
input[type="text"] {
width: 230px;
height: 30px;
background-color: #fff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover {
background-color: #c9d9e9;
color: #000;
}
</style>
</head>
<body>
<h2>HTML alt Attribute Example</h2>
<form action="#">
Name: <input type="text" name="name"><br>
Email: <input type="text" name="email"><br>
<input type="image" src="./resources/images/button_tick_gif.gif" alt="A gif tick button icon">
</form>
</body>
</html>
Click on the "copy" button and try this example in your project.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML alt attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>Example: HTML alt attribute example</h3>
<div>
<img src="./resources/images/workplace2.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Laptop" title="Laptop" href="basic/html-iFrame.jsp" coords="180,0,394,161"
shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="images/html-background-image.jsp"
coords="69,8,63,10,59,14,56,21,53,26,50,33,50,40,53,47,57,53,62,59,68,62,75,64,83,65,90,64,98,60,105,56,111,52,118,48,132,55,137,49,122,42,122,34,122,26,119,19,112,11,105,6,96,4,86,5,77,6"
shape="poly">
<area target="_blank" alt="Note" title="Note" href="basic/html-emojis.jsp"
coords="3,111,138,85,170,247,30,276" shape="poly">
</map>
</div>
</body>
</html>
Click on the "copy" button and try this example in your project.