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
<area alt="text">
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 |