HTML alt attribute

Read

The HTML alt attribute is used to provide an alternate tag that is used to show or display something if the primary attribute i.e., the <img> tag, fails to display the value assigned to it.

Supported tags:

area
image
input
<applet>

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

Example: Img alt attribute.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML img alt Attribute
    </title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML img alt Attribute</h2>
    <img
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
        alt="GeeksforGeeks logo">
</body>
 
</html>

Output:

HTML alt attribute

Example: Area alt attribute.

html

<!DOCTYPE html> 
<html> 
 
<head> 
    <title> 
        HTML area alt Attribute 
    </title> 
</head> 
 
<body style="text-align:center;"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
        alt="alt_attribute" width="300" height="119" class="aligncenter"
        usemap="#shapemap" /> 
 
    <map name="shapemap"> 
         
        <!-- area tag contained image. -->
        <area shape="poly" coords="59, 31, 28, 83, 91, 83" href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
        alt="Triangle"> 
         
        <area shape="circle" coords="155, 56, 26" href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
        alt="Circle"> 
         
        <area shape="rect" coords="224, 30, 276, 82" href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
        alt="Square"> 
    </map> 
</body> 
 
</html>

Output:

HTML area alt attribute

Example: Input alt attribute.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML Input alt Attribute
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
    <h2>HTML Input alt Attribute</h2>
    <input id="myImage"
           type="image"
           src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
           alt="Submit"
           width="48"
           height="48">
</body>
 
</html>

Output:

HTML Input alt attribute

Supported Browsers: The browsers supported by HTML | alt attribute are listed below:

Google Chrome
Internet Explorer
Firefox
Apple Safari
Opera

Learn to code easily with our course Coding for Everyone. This course is accessible and designed for everyone, even if you're new to coding. Start today and join millions on a journey to improve your skills!

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.

Last Updated : 05 Jul, 2023