HTML <area> Area Tag
Tags: learnhtml
Published: 2021-02-10 07:46:59

---
title: HTML <area> Area Tag
published: true
date: 2021-02-10 06:54:18 UTC
tags: LearnHTML
canonical_url: https://sharepointanchor.com/learn-html/html-area-tag/
---

The HTML **<area> Area Tag** is used to define the clickable areas or **active areas inside the [image-map](https://en.wikipedia.org/wiki/Image_map)** that are associated with the hyperlinks. If you click on those areas, then it will perform some action such as open a new image or new web page.

The area tag is **always placed inside the <map> tag** in [HTML](https://sharepointanchor.com/category/learn-html/ "HTML"). You can insert various hyperlinks by using the multiple <area> tag within the single <map> element.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 4 minutes

## Syntax:

The basic syntax of the area tag is given in below:

```

In HTML: <area alt="text">
In XHTML: <area alt="text"> XHTML <area alt="text" />

```

Note: In **[HTML](https://sharepointanchor.com/category/learn-html/ "HTML")** the **end tag** for the <area> tag is **forbidden**. But in **XHTML** , the area tag must be **closed with a backward slash** , like this: <area/>.

## Sample of the HTML <area> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Area tag</title>
  </head>
  <body>   
<img src="https://sharepointanchor.com/wp-content/uploads/2021/02/Untitled-Document.png" usemap="#image-map">
<map name="image-map">
    <area target="" alt="HTML " title="HTML " href="https://sharepointanchor.com/wp-content/uploads/2021/02/html.png" coords="148,382,53" shape="circle">
    <area target="" alt="CSS" title="CSS" href="https://sharepointanchor.com/wp-content/uploads/2021/02/css-1.png" coords="491,384,47" shape="circle">
    <area target="" alt="Php" title="Php" href="https://sharepointanchor.com/wp-content/uploads/2021/02/php-2.png" coords="832,382,45" shape="circle">
    <area target="" alt="Java Script" title="Java Script" href="https://sharepointanchor.com/wp-content/uploads/2021/02/java-script-1.png" coords="1141,382,49" shape="circle">
    <area target="" alt="Share Point Anchor" title="Share Point Anchor" href="https://sharepointanchor.com/" coords="474,40,802,118" shape="rect">
</map>
  </body>
</html>

```

## Result:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/result-5-1024x487.png)<figcaption>Result</figcaption>

### Video Result:

<video autoplay controls loop poster="" src="https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Pbux701ijr-1.webm"></video>

## Try it Yourself:

<script async="" src="//jsfiddle.net/Share_Point_Anchor/L3pad6vk/9/embed/html,result/"></script>

## Attributes:

The following table shows the attributes that are specific to the **[HTML](https://sharepointanchor.com/category/learn-html/ "HTML")**  **area tag**.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Description |
| --- | --- | --- |
| alt | text | It specifies an **alternate text for the active area** |
| coords | | The Coords attribute **specifies the coordinates of the active area** |
| x1,y1,x2,y2 | It specified the **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 | It is used for **Polygon vertexes (shape=”poly”)** |
| download | filename | It specifies that the  **target will be downloaded ** when a user clicks on the link |
| media | media query | Specifies  **what media or device the linked document is optimized for** |
| href | URL | This attribute helps to  **open the URL**  of the linked page |
| hreflang | language\_code | It defines the ** language of the linked document** |
| nohref | value | This attribute specifies an area that does not contain a reference to another document. **Not supported in HTML5.** |
| rel | | The rel attribute specifies the  **relationship between the current document and the linked document**. |
| alternate | Helps to **link to an alternative version of the document** |
| author | It will **link to the author of the document** |
| bookmark | Used to **insert a permanent link to the document** |
| help | This value **link to a document with the help** |
| license | **Link to a page with a licensing agreement** or copyrights |
| next | This helps to **insert the Link to the next page/section** |
| nofollow | It will instruct some search engines that the **hyperlink should not influence the ranking of the link’s target** in the search engine’s index |
| noreferrer | This attribute **specifies that the browser shouldn’t pass the HTTP header if the user clicked on the link** |
| prefetch | This indicates that one should **cache the linked document** |
| prev | Helps to insert the **link to the previous page/section** |
| search | Insert the **link to the search for the document** |
| tag | This attribute **defines a tag in the current document** |
| shape | | The Shape attribute **specifies the shape of the area** |
| default | The **default area (rectangular)** |
| rect | It creates the **rectangular area** |
| circle | The area is **in the form of a circle** |
| poly | It shows the **Polygonal shape** |
| target | | The target attribute will help to **specify how the linked document should be opened** |
| \_blank | It will **open the link in a new window** |
| \_self | In the **current window** |
| \_top | It **opens the link as a full width in the window** |
| \_parent | In the **parent frame** |
| frame\_name | In the **frame**** Not supported in HTML5.** |
| type | media\_type | This attribute helps to **specify the MIME-type** (specification for transmission over the network of files of various types) of the linked document. |

## Browser Support:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <a> Anchor Tag](https://sharepointanchor.com/learn-html/html-anchor-tag/)**
- **[HTML <!DOCTYPE> Tag Declaration](https://sharepointanchor.com/learn-html/html-doctype-tag-declaration/)**

The post [HTML <code><area></code> Area Tag](https://sharepointanchor.com/learn-html/html-area-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).