Table of contents

HTML <area> Tag: Definition, Syntax, and Examples

What is HTML <area> Tag?

The HTML area tag is used to define clickable areas within an image. It works along with the map tag to create image maps. Each area tag represents a specific region of the image that users can click to open a link or perform an action.

This tag is important because it helps make images interactive and useful for navigation. It enhances user experience and improves accessibility when used with alt text. The area tag is placed inside the map tag, and the image must reference the map using the usemap attribute.

Syntax of the HTML <area> Tag

plaintext
<img src="image.jpg" usemap="#mapname">
<map name="mapname">
  <area shape="shape_type" coords="values" href="URL" alt="description">
</map>

shape specifies the clickable shape, coords define the coordinates of that shape, and href contains the link that will open when the area is clicked.

Examples of HTML <area> Tag

Example 1: Basic HTML Area Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <img src="world-map.jpg" usemap="#worldmap">
  <map name="worldmap">
    <area shape="rect" coords="50,50,150,150" href="https://www.scholar247.com/asia" alt="Asia">
  </map>

</body>
</html>

In this example, a rectangular clickable area is created on the world map image. When the user clicks that part of the image, they are taken to the Asia page.

Example 2: SEO Optimized Area Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <img src="laptop-parts.jpg" usemap="#laptopmap">
  <map name="laptopmap">
    <area shape="circle" coords= "120,110,40" href="https://www.scholar247.com/screen-repair" alt= "laptop Screen Repair Service - Scholar247"
    <area shape="poly" coords= "200,200,260,220,280,260,210,290" href="https://www.scholar247.com/keyboard-replacement" alt= Laptop keyboard replacement Cost - Scholar247">
    </map>

</body>
</html>

This example uses SEO-friendly alt text and links relevant to laptop repair services. Keywords like Laptop Screen Repair Service and Laptop Keyboard Replacement Cost help improve search visibility and user understanding.

Attributes of the HTML <area> Tag

The main attributes of the area tag are:

• shape: Defines the shape of the clickable area. (rect, circle, poly)
• coords: Specifies the coordinates of the area based on the shape.
• href: Defines the link to open when the area is clicked.
• alt: Provides alternative text for SEO and accessibility.
• target: Specifies where to open the link (example: _blank for a new tab).
• download: Allows downloading a linked file instead of opening it.
• rel: Specifies the relation between the current page and the linked URL.

Best Practices for HTML <area> Tag

• Use descriptive alt text for better accessibility and SEO.
• Ensure clickable areas are large enough and easy to tap on mobile devices.
• Use coordinates that match the correct image dimensions.
• Avoid adding too many clickable areas in one image to reduce confusion.
• Use meaningful links that match the clickable portion of the image.

FAQs About the HTML <area> Tag

Q1: What is the purpose of the HTML area tag?

The area tag defines clickable zones within an image that lead to different links or pages when clicked.

Q2: Can the area tag be used without the map tag?

No, the area tag must be placed inside a map tag, and the image must use the usemap attribute for it to work.

Q3: Does the area tag affect SEO?

Yes. Adding relevant alt text and linking to useful pages can improve SEO and user engagement.

Q4: What shapes can be used with the area tag?

The supported shapes are rect for rectangles, circle for circular regions, and poly for polygon shapes.

Q5: Is the area tag mobile-friendly?

It can be mobile-friendly, but you must test the coordinates carefully to ensure clickable areas align well on smaller screens.

HTML

Related Articles