<area>
HTML <area> Tag
The <area> tag identifies the active areas (coordinates, form, size, etc.) of the image-map, defined by the <map> tag. When you click on the active area of the image, a certain action takes place, for example, switching to a page with detailed information.
The <area> tag is always placed inside the <map> tag. Active areas can overlap, in the case of which the area that is higher in the HTML code is activated when clicked.
Syntax
Syntax （语法）
The <area> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<area>) tag must be closed (<area/>).
Example of the HTML <area> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap">
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png">
<area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png">
<area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png">
<area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3cdoc.com/">
</map>
</body>
</html>
Attributes
Attributes （属性）
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for the active area. |
| coords | Specifies the coordinates of the active area. | |
| x1,y1,x2,y2 | 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 | Polygon vertexes (shape=“poly”). | |
| download | filename | Indicates that when you click on a specific area, the file must be downloaded (the user will be prompted to save the file). |
| media | media query | Specifies for which device types the specified URL will be optimized. The value can be any media request. |
| href | URL | Specifies the reference for the transition. |
| hreflang | language_code | Defines the language of the document referenced. Used only with the href attribute. |
| nohref | value | Specifies an area that does not contain a reference to another document.Not supported in HTML5. |
| rel | Establishes a link between the current and linked documents. | |
| alternate | Link to an alternative version of the document. | |
| author | Link to an author of the document. | |
| bookmark | A permanent link to the document. | |
| help | Link to a document with help. | |
| license | Link to a page with a licensed agreement or copyrights. | |
| next | Link to the next page/section. | |
| nofollow | Instructs some search engines that the hyperlink should not influence the ranking of the link’s target in the search engine’s index. | |
| noreferrer | Specifies that the browser shouldn’t pass the HTTP header, if the user clicked on the link. | |
| prefetch | Indicates that one should cache the linked document. | |
| prev | Link to the previous page/section. | |
| search | Link to the search for the document. | |
| tag | Defines a tag in the current document. | |
| shape | Defines the shape of the area | |
| default | The default area (rectangular). | |
| rect | Rectangular area. | |
| circle | The area in the form of a circle. | |
| poly | Polygonal. | |
| target | Specifies how the linked document should be opened. | |
| _blank | In a new window. | |
| _self | In the current window. | |
| _top | Full width in the window. | |
| _parent | In the parent frame. | |
| frame_name | In the frameNot supported in HTML5. | |
| type | media_type | Specifies MIME-type (specification for transmission over the network of files of various types) of the linked document. |
The <area> tag supports also the Global attributes and the Event Attributes.