DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <area> Area Tag

The HTML Area Tag is used to define the clickable areas or active areas inside the image-map that are associated with the hyperlinks. If you click on those areas, then it will perform some action such as open a new image or new web page.

The area tag is always placed inside the tag in HTML. You can insert various hyperlinks by using the multiple tag within the single element.

Estimated reading time: 4 minutes

Syntax:

The basic syntax of the area tag is given in below:


In HTML: <area alt="text">
In XHTML: <area alt="text"> XHTML <area alt="text" />

Enter fullscreen mode Exit fullscreen mode

Note: In HTML the end tag for the tag is forbidden. But in XHTML , the area tag must be closed with a backward slash , like this: .

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>Area tag</title>
  </head>
  <body>   
<img src="https://sharepointanchor.com/wp-content/uploads/2021/02/Untitled-Document.png" usemap="#image-map">
<map name="image-map">
    <area target="" alt="HTML " title="HTML " href="https://sharepointanchor.com/wp-content/uploads/2021/02/html.png" coords="148,382,53" shape="circle">
    <area target="" alt="CSS" title="CSS" href="https://sharepointanchor.com/wp-content/uploads/2021/02/css-1.png" coords="491,384,47" shape="circle">
    <area target="" alt="Php" title="Php" href="https://sharepointanchor.com/wp-content/uploads/2021/02/php-2.png" coords="832,382,45" shape="circle">
    <area target="" alt="Java Script" title="Java Script" href="https://sharepointanchor.com/wp-content/uploads/2021/02/java-script-1.png" coords="1141,382,49" shape="circle">
    <area target="" alt="Share Point Anchor" title="Share Point Anchor" href="https://sharepointanchor.com/" coords="474,40,802,118" shape="rect">
</map>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Video Result:

Try it Yourself:

Attributes:

The following table shows the attributes that are specific to the HTML area tag.

th, td{ padding: 20px; }

Attribute Value Description
alt text It specifies an alternate text for the active area
coords The Coords attribute specifies the coordinates of the active area
x1,y1,x2,y2 It specified the upper left and lower right corner rectangle (shape=”rect”)
x,y, radius Center of a circle and radius (shape=”circle”)
x1,y1,x2,y2,…,xn,yn It is used for Polygon vertexes (shape=”poly”)
download filename It specifies that the *target will be downloaded * when a user clicks on the link
media media query Specifies what media or device the linked document is optimized for
href URL This attribute helps to open the URL of the linked page
hreflang language_code It defines the ** language of the linked document**
nohref value This attribute specifies an area that does not contain a reference to another document. Not supported in HTML5.
rel The rel attribute specifies the relationship between the current document and the linked document.
alternate Helps to link to an alternative version of the document
author It will link to the author of the document
bookmark Used to insert a permanent link to the document
help This value link to a document with the help
license Link to a page with a licensing agreement or copyrights
next This helps to insert the Link to the next page/section
nofollow It will instruct some search engines that the hyperlink should not influence the ranking of the link’s target in the search engine’s index
noreferrer This attribute specifies that the browser shouldn’t pass the HTTP header if the user clicked on the link
prefetch This indicates that one should cache the linked document
prev Helps to insert the link to the previous page/section
search Insert the link to the search for the document
tag This attribute defines a tag in the current document
shape The Shape attribute specifies the shape of the area
default The default area (rectangular)
rect It creates the rectangular area
circle The area is in the form of a circle
poly It shows the Polygonal shape
target The target attribute will help to specify how the linked document should be opened
_blank It will open the link in a new window
_self In the current window
_top It opens the link as a full width in the window
_parent In the parent frame
frame_name In the frame** Not supported in HTML5.**
type media_type This attribute helps to specify the MIME-type (specification for transmission over the network of files of various types) of the linked document.

Browser Support:

Browser Support

Related Articles:

The post HTML Area Tag appeared first on Share Point Anchor.

Top comments (0)