How to set an alternate text for area in HTML5 ?

Read

Discuss

In this article, we will learn how to specify an alternate text for an area in HTML5. This alternate text is displayed due to various reasons like the use of a screen reader, incorrect or non-existing image path in the src attribute, or a slow internet connection.

Approach: We will use the alt attribute of the area element. It provides alternate information about an element like an image or a link, when the element itself cannot be displayed. There may be various reasons for not being able to view the element like the path of the resource may have been changed, non-availability of the resource, or a slow internet connection.

Syntax:

<area alt="alternate text">

The below example demonstrates the above approach.

Example: In this example, both correct and incorrect paths to the images are provided, so that the alternate text of the area is visible when the incorrect path is specified.

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to specify an alternate 
        text for the area in HTML5? 
    </h3> 
  
    <h2>Valid paths to the images</h2> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210409233625/square.png"
        width="100" height="100"
        alt="square" usemap="#square"> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210409233624/circle.png" 
        width="100" height="100"
        alt="circle" usemap="#circle"> 
  
    <h2>Invalid paths to the images</h2> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/invalid/square1.png" 
        width="100" height="100"
        alt="square" usemap="#square2"> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/invalid/circle1.png"
        width="100" height="100"
        alt="circle" usemap="#circle2"> 
  
    <map name="square"> 
        <area shape="square" 
            coords="0,0,90,130" alt="square"> 
    </map> 
  
    <map name="circle"> 
        <area shape="circle" 
            coords="100,60,5" alt="circle"> 
    </map> 
  
    <map name="square2"> 
        <area shape="square" 
            coords="0,0,90,130" alt="square2"> 
    </map> 
  
    <map name="circle2"> 
        <area shape="circle" 
            coords="100,60,5" alt="circle2"> 
    </map> 
</body> 
  
</html> 

Output:

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!

Last Updated : 14 Apr, 2021