html
  1. html-area-tag
PreviousNext

HTML <area> Tag

  • The <area> tag is used within an <map> element to define clickable areas in an image map.
  • It is commonly used with the <img> tag to create interactive images.

Syntax

<area shape="rect|circle|poly|default" coords="x,y,w,h|coords" href="URL" alt="description">
  • shape: Specifies the shape of the clickable area. It can be "rect" (rectangle), "circle" (circle), "poly" (polygon), or "default" (entire area).
  • coords: Defines the coordinates of the clickable area. The format depends on the shape.
  • href: Specifies the URL to navigate to when the area is clicked.
  • alt: Provides a text description for the area.

Example

    <img src="https://static.additionalsheet.com/images//html/area.png" alt="" width="300" height="119"
        usemap="#shapemap" />

    <map name="shapemap">
        <!-- area tag contained image. -->
        <area shape="poly" coords="59,31,28,83,91,83"
            href="https://static.additionalsheet.com/images//html/triangle.png" alt="Triangle">

        <area shape="circle" coords="155,56,26" href="https://static.additionalsheet.com/images//html/circle.png"
            alt="Circle">

        <area shape="rect" coords="224,30,276,82" href="https://static.additionalsheet.com/images//html/square.png"
            alt="Square">
    </map>
Try Playground

Explanation

  • The <img> tag includes the image with the specified src attribute and an alt attribute for accessibility.
  • The <map> tag contains <area> tags defining clickable regions within the image.
  • Each <area> tag has attributes like shape (specifying the shape of the area), coords (defining the coordinates), href (the link to navigate to), and alt (a text description).

Use

The <area> tag is used when you want to create an image map, allowing different regions of an image to act as separate links.

Important Points

  • The <area> tag is always used within a <map> element.
  • The alt attribute is crucial for accessibility, providing a text description for each clickable area.

Summary

In summary, the <area> tag is an essential element for creating interactive image maps in HTML. It allows developers to define specific clickable regions within an image, each with its own destination URL and description. When used in conjunction with the <map> and <img> tags, it provides a versatile way to create engaging and interactive content on web pages.

<address> Tag<article> Tag
Published on: