HTML area Tag: Syntax, Example, And Attributes

The HTML area tag defines the area inside an image map. An image map is an image that has clickable areas in it. It means that instead of adding one link to an image, you can add multiple links to different parts of an image. 
authorImageVarun Saharawat31 Oct, 2025
HTML area Tag: Syntax, Example, And Attributes

The <area> tag works together with the <map> tag. The <area> tag defines each clickable spot within the image, whereas the <map> tag wraps the structure of an image. If you are a developer, then with the help of href, shape, and coords attributes, you can create navigation points inside an image to provide an enhanced user experience.

Here, we will learn about the HTML area tag in detail and how you can use it for your web projects. 

What Is The HTML area Tag?

The HTML <area> tag is used inside a <map> tag for multiple clickable points in an image. There can be different areas in an image with different links that redirect users to open files, pages, etc. You can understand it just like a normal anchor tag, but only in the mapped section of the image. 
  • The HTML <area> tag is used to define the clickable areas inside an image.
  • It is always used inside a <map> element.
  • The "href" attribute is used to link destinations. (As it is used in <a> tag.
  • The shape and coords attributes are used to define the clickable regions.
  • The best part about it is that it is supported by all the major browsers like Chrome, Firefox, Safari, Edge, etc. 

Read More: HTML abbr tag: Syntax, Attribute, And Examples

HTML area Tag Syntax

The <area> tag is not just placed anywhere; you always have to remember that it is placed inside a <map> tag. Check out the basic syntax for using the HTML <area> tag inside the <map> tag below. 
<img src="image-source" usemap"#mapname"> <map name="map-name">        <area shape="shape-type" coords="coordinates" href="URL" alt="description"> </map>
Let us decode all of it and understand what is happening here. 
  • <area> - This is the area where you define your clickable areas. 
  • shape - You tell her what the shape of the hotspot, a rectangle, circle, or any other.
  • coords -  These are the coordinates that outline the clickable area on your image.
  • href - It defines the destination, where the user will be redirected. 
  • alt - It is like a short description that helps in easy accessibility.

Read More: HTML DOCTYPE Declaration: Major Highlights For Document Type Declaration 2025

How does the HTML area Tag work?

When you click on any area of an image that has a link, you will be redirected to the link provided in the href attribute. It is somewhat similar to the anchor tag, but inside the coordinates of the image. 

Example

Let's understand it with the help of a super-easy example. Suppose you draw a circle, rectangle, or any other shape on different parts of your image, and when someone clicks on it, they will be redirected to the link you added in the href attribute. 

HTML area Tag Example 

Now, let's understand the HTML area tag with an example including the attributes. Have a look below.
<img src="city-map.jpg" alt="City Map" usemap="#citymap"> <map name="citymap">   <area shape="rect" coords="30,40,200,180" href="/hospital.html" alt="Hospital">   <area shape="circle" coords="350,120,60" href="/school.html" alt="School">   <area shape="poly" coords="450,200,510,250,480,310,410,260" href="/park.html" alt="Park"> </map>
As you can see, in the above example: 
  • The rectangular area is linked to the Hospital.
  • The circular area is linked to the School.
  • The Polygon area is linked to the Park.

HTML area Tag Attributes

Let us now have a look at attributes in the HTML area tag. It includes href, shape, coords, alt, and target. Let's understand each attribute in detail, what it is, and why it is used. 
Attributes Value
href text
shape default rect circle poly
coords coordinates
alt text
target _blank _parent _self _top framename
rel alternate author bookmark help license nofollow noreferer next prev search tag

1. href

It defines the destination of the link. It is the link where the user will be redirected upon clicking.
<area href="https://example.com">

2. shape

It defines the clickable regions. The values that are accepted are as follows:
Value Meaning
rect Rectangle
circle Circle
poly Polygon
default Entire region

3. coords

It defines the coordinates based on the shape. Have a look at the example below for the rectangle shape. 
<area shape="rect" coords="10,20,180,120">

4. alt

The alt is a short descriptive text that helps in easy accessibility. It is used to specify an alternative text for the area. It can be used with the href attribute.
<area shape="rect" coords="50,50,150,150" href="https://www.example.com" alt="Example Area">

5. target 

It defines where the link opens. Check out the table below to understand it better.
Value Use
_self The link will open in the same tab.
_blank The link will be opened in a new tab.
_parent It opens the link in the parent frame.
_top It breaks all frames and loads in the full browser window.

When to Use the HTML area Tag?

The HTML area tag is used when you do not want to add a single link to the full image. Instead, you want to add multiple links in a single image, making it clickable at different points.  I've listed two sample cases where you can use the HTML area tag below. Do check them out.

1. Clickable Maps

Let's suppose, you have a world map or a map of any campus, so you make different areas on the map clickable. 

2. Infographics

If you have an infographic, then you can add various links to the details that you wish the user to see upon clicking.

Default CSS Settings for <area> Tag

The <area> tag, when used in the HTML document, will be displayed with a default CSS setting in most browsers as given below.
area { display: none; }
However, you can specify custom CSS styling for the <area> tag. 

Learn About Web Development Tools with PW Skills 

Build your knowledge and master different popular web development tools with PW Skills Full Stack Web Development Course. Become proficient in front end frameworks and backend frameworks with in-depth tutorials, practice exercises, assignments and real world capstone projects with this 6 month online course. Get industry led live sessions and recorded tutorials within this upskilling program in web development. Become a certified full stack engineer only on pwskills.com
Our Social Channels

HTML area Tag FAQs

Q1. What is the area tag in HTML?

Ans: The area tag in HTML defines the area inside an image map. An image is an image with clickable areas. With the area tag in HTML, you can make various parts of an image clickable and redirect users to different pages.

Q2. Is the HTML tag self-closing?

Ans: Yes. The HTML tag is a self closing tag.

Q3. What are the valid shapes that can be added as a value in the area tag?

Ans: You can add rect, circle, poly, or default. Rect means rectangle Poly refers to a polygon Default means the entire region.

Q4. Can the area tag work without the map tag?

Ans: No. The tag is always inside a element. It cannot work without a map tag.