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.

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.

</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.

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.

</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.

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.

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.

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

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.