How to add HTML <area> alt Attribute

Use the alt attribute to specify an alternate text for each area in the image map.

Definition and Usage

The alt attribute specifies an alternate text for an area, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The alt attribute is required if the href attribute is present.

Browser Support

Syntax

Attribute Values

Value	Description
text	Specifies the alternate text for the area, if the image cannot be displayed

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The area alt attribute</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/learn/630/what-is-html-area-tag">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/learn/630/what-is-html-area-tag">
  <area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/learn/630/what-is-html-area-tag">
</map>

</body>
</html>

Output should be:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin