HTML <area> Tag

The <area> tag identifies the active areas (coordinates, form, size etc.) of the image-map, defined by the <map> tag. When you click on the active area of the image, a certain action takes place, for example, switching to a page with detailed information.

The <area> tag is always placed inside the <map> tag. Active areas can overlap, in which case when clicked, the area that is higher in the HTML code is activated.

Syntax

The <area> tag comes in pairs, which means that the closing tag is required.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo item to watch it closer:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap">
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png">
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png">
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png">
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/">
    </map>
  </body>
</html>

Attributes

Attribute Value Description
alt text Specifies alternate text for the active area.
coords Specifies the coordinates of the active area.
x1,y1,x2,y2 Upper left and lower right corner rectangle (shape="rect").
x,y, radius Center of a circle and radius (shape="circle").
x1,y1,x2,y2,...,xn,yn Polygon vertexes (shape="poly").
download filename Indicates that when you click on a specific area, the file must be downloaded (the user will be prompted to save the file).
media media query Specifies for which device types the specified URL will be optimized. The value can be any media request.
href URL Specifies the reference for the transition.
hreflang language_code Defines the language of the document referenced. Used only with the href attribute.
nohref value Specifies an area that does not contain a reference to another document.
Not supported in HTML5.
rel Establishes a link between the current and linked documents.
alternate Link to an alternative version of the document.
author Link to an author of the document.
bookmark A permanent link to the document.
help Link to a document with help.
license Link to a page with a licensed agreement or copyrights.
next Link to the next page/section.
nofollow Instructs some search engines that the hyperlink should not influence the ranking of the link's target in the search engine's index.
noreferrer Specifies that the browser shouldn’t pass the HTTP header, if the user clicked on the link.
prefetch Indicates that one should cache the linked document.
prev Link to the previous page/section.
search Link to the search for the document.
tag Defines a tag in the current document.
shape Defines the shape of the area
default The default area (rectangular).
rect Rectangular area.
circle The area in the form of a circle.
poly Polygonal.
target Specifies how the linked document should be opened.
_blank In a new window.
_self In the current window.
_top Full width in the window.
_parent In the parent frame.
frame_name In the frame
Not supported in HTML5.
type media_type Specifies MIME-type (specification for transmission over the network of files of various types) of the linked document.

The <area> tag supports also the Global attributes and the Event Attributes.

Browser support