HTML <area> Tag
In this tutorial, we will learn about area tag in HTML with the help of examples.
<area> Tag
Area tag <area> defines an clickable area in a image map.
Area tag are always nested inside a <map> tag.
Syntax
<area shape = "" coords = "" alt = ""/>
Example
<!DOCTYPE html>
<html>
<head>
<title>Area Tag</title>
</head>
<body>
<img src = "boat.png" width = "500" height = "500" alt = "Image not found" usemap = "#tutorial">
<map name = "tutorial">
<area shape = "poly" coords = "70,0,112,28,99,70,50,70,39,25" href = "www.algbly.com" target = "_blank" />
<area shape = "rect" coords = "500,580,125,120" href = "www.algbly.com" target = "_blank" />
</map>
</body>
</html>Output
In the above example, polygon shaped <area> tag is present in top-left corner of the image and rectangle shaped <area> tag is present in area where boats are present in image.
Specific Attribute
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies alterate text for the area |
| coords | For rectangular shape coords are left, top, right, bottom For circular shape coords are centerx, centery, radius For polygon shape coords are x1, y1, x2, y2, x3, y3...............xn, yn |
Specifies the coordinates to define image map i.e. clickable region for hyperlink |
| download | filename | This downloads the target when user clicks on the hyperlink |
| href | URL | Specifies the URL of a page or the name of the anchor we want to hyperlink the document |
| hreflang | language_code | Language code of the destination URL |
| media | media_query | Specifies the type of media linked to the document |
| nohref | true/false | Excludes an area for the image map |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Describes the relation between the current document and the destination URL |
| rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark |
Specifies the relation between the target URL and the current document |
| shape | rect rectangle circ circle poly polygon |
Specifies the shape of the image map |
| target | _blank _parent _self _top |
Specifies where to open the target URL _blank = the target URL will open in a new window. _self = the target URL will open in the same frame as it was clicked. _parent = the target URL will open in the parent frameset. _top = the target URL will open in the full body of the window |
| type | mime_type | Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL |
Global Attribute
Area Tag support all the global attributes of HTML.
Event Attribute
Area Tag support all the event attributes of HTML.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Address tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Article Tag.