Loading...
HTML <area> Tag

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

Image not found

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.

- Related Topics