HTML area tag

By | February 27, 2020

HTML <area> Tag:-

In this chapter, we will learn about not <area> tag of HTML.This tag describes the area inside the map inside the web page.<area> tag of HTML is always inside <map> tags.This tag describes the active clickable area inside the map.Which are linked by hyperlinks.Clicking on these locations results in a new response, such as URL opening or an image opening.

We can include many <area> tags within <map> tag.

Browser Support:-

All modern browsers support <area> tag of HTML.

Example:-

<!DOCTYPE html>
<head>
	<title>HTML area Tag</title>
</head>
<body>
	
	<img src="image.gif" width="140" height="120" alt="image" usemap="#thismap">

<map name="thismap">
	<area shape="rect" coords="0,0,82,126" href="test1.htm" alt="test1">
	<area shape="circle" coords="90,58,3" href="test2.htm" alt="test2">
	<area shape="circle" coords="124,58,8" href="test3.htm" alt="test3">
</map>

</body>
</html>
<!DOCTYPE html>
<head>
	<title>HTML area Tag</title>
</head>
<body>
	
<img src="testimage" usemap="#test">


<map name="test">  
<area shape="rect" coords="66,117,131,168" href="https://learnhtmlcoding.com/html-tutorial">  
<area shape="rect" coords="199,36,277,85" href="https://learnhtmlcoding.com/css-tutorial">  
<area shape="rect" coords="330,107,406,159" href="https://learnhtmlcoding.com/bootstrap-tutorial">  
<area shape="rect" coords="199,185,267,236" href="https://learnhtmlcoding.com/javascript-tutorial">  
 </map>  

</body>
</html>

attributes:-

Value Attribute Description
coordinates coords Specifies the coordinates of the area
text alt Specifies an alternate text for the area. Required if the href attribute is present
filename download Specifies that the target will be downloaded when a user clicks on the hyperlink
URL href Specifies the hyperlink target for the area
language_code hreflang Specifies the language of the target URL
media query media Specifies what media/device the target URL is optimized for
value nohref
Not supported in HTML5.
Specifies that an area has no associated link
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
rel Specifies the relationship between the current document and the target URL
default
rect
circle
poly
shape Specifies the shape of the area
_blank
_parent
_self
_top
framename
target Specifies where to open the target URL
media_type type Specifies the media type of the target URL
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *