Open In App

HTML alt attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The alt attribute in HTML provides alternative text for images, aiding accessibility and providing context for screen readers.

Syntax:

<img src=" " alt=" " >

Supported tags: 

Name

Description

area

<area>’s alt provides alternative text for image map areas.

image

<img> alt offers alternative text for image accessibility.

input

specify the alternative text for an image when the image attribute is not displayed.

<applet>

used to specify the alternate text for an applet element.

Attribute Values:

value

Description

text

is used to specify the alternative text for the supported element if the image is not displaying.

Example: In This example we includes an image with the alt attribute providing alternative text (“GeeksforGeeks logo”) for accessibility.

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-image-alt-attribute

HTML image alt attribute

Example 2: In this example we are using an image with an image map created using <area> tags. Each <area> tag includes an alt attribute for accessibility, providing alternative text for the clickable areas.

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: 

alt2.gif

HTML area alt attribute

Example 3: In this example we are showing an input field of type image with the alt attribute providing alternative text (“Submit”) for accessibility. 

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-alt-attribute

HTML alt attribute example

Supported Browsers

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


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads