How to set an alternate text for area in HTML5 ?
Last Updated :
14 Apr, 2021
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=
width="100" height="100"
alt="square" usemap="#square">
<img src=
width="100" height="100"
alt="circle" usemap="#circle">
<h2>Invalid paths to the images</h2>
<img src=
width="100" height="100"
alt="square" usemap="#square2">
<img src=
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...