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" />
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>
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:
Related Articles:
The post HTML Area Tag appeared first on Share Point Anchor.
Top comments (0)