Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
area
communitycreator

How to use the HTML <area> element

AKASH BAJWA

HTML’sHyperText Markup Language <area>tag defines the area inside an image map. An image map has predefined clickable areas.

This <area> tag can only be used between the <map>. Almost every latest browser (Google Chrome, Mozilla Firefox, or Safari) supports area elements in HTML.

Syntax


<area attribute1 attribute2 ...>

Attributes

The <area> tag supports both types of attributes, i.e., Global and Event Attributes in HTML.

Attributes List

Attribute

Value

Detail

href

URL

Hyperlink target for area.

alt

text

Alternate text for the area is also required when href is present.

coords

coordinates

Specifies the coordinates of area.

download

filename

Get target ready to download.

media

media query

Optimize target URL for specific device/media.

hreflang

language code

Specified the target url language.

type

media type

Media type of target URL.

shape

  1. default
  2. circle
  3. rect
  4. poly

Occupied area shape.

target

  1. blank
  2. parent
  3. self
  4. top

Destination i.e. where the target URL open.

HTML <area> coords attribute


Shape Values
circle x, y, radius
rect x1, y1, x2, y2
poly x1, y1, x2, y2, …, xn, yn

Code

Consider the following code example:

Explanation

By clicking on the coffee image, you will be redirected to the coffee’s Wikipedia page. And on clicking the phone image, you will be redirected to the smartphone’s webpage.

Lines six and seven tell us the complete use of the <Area> element in the HTML document.

RELATED TAGS

html
area
communitycreator
RELATED COURSES

View all Courses

Keep Exploring