Skip to content
Related Articles

Related Articles

How to set an alternate text for area in HTML5 ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • 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.


<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.


<!DOCTYPE html>
<body style="text-align:center;">
    <h1 style="color:green;">
        How to specify an alternate
        text for the area in HTML5?
    <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 name="circle">
        <area shape="circle" 
            coords="100,60,5" alt="circle">
    <map name="square2">
        <area shape="square" 
            coords="0,0,90,130" alt="square2">
    <map name="circle2">
        <area shape="circle" 
            coords="100,60,5" alt="circle2">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!