- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <area> Tag
The <area> tag specifies the areas of the image-map that can be clicked on or are active areas that are linked to by hyperlinks. It will carry out some action, such as open a new image or URL, if you click on specified regions. The <map> element is always used with this tag. Using multiple <area> elements in a single <map> element, different areas inside an image map can be hyperlinked to different destinations.
The (necessary) attributes shape and coords are used to define the <area> element. The area's shape, such as a polygon, rectangle, circle, or square, is specified by the shape attribute. The coords attribute defines the coordinates of different regions inside the image.
Syntax
Following is the syntax for HTML <area> tag −
<area shape="" coords="" href="">
Specific Attributes
The HTML <area> tag also supports the following additional attributes −
S.No. | Attribute & Description |
---|---|
1 | alt Specifies an alternate text for the area. |
2 | coords Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps. |
3 | download Specifies that the target gets downloaded when hyperlink is clicked by user. |
4 | href Specifies the URL of a page or the name of the anchor that the link goes to. |
5 | hreflang Specifies the language of the target URL. |
6 | media Specifies media/device the target URL is optimized for. |
7 | nohref Excludes an area from the image map |
8 | rel Specifies relationship between the current document and the target URL |
9 | shape Specifies the shape of the image map |
10 | target Where to open the target URL. |
11 | type Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL. |
Example
Let’s look at the following example, where we are going to use the shapes poly, rect, and circle to make the area clickable.
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
On running the above code, the output window will pop up, displaying the shapes rect, poly, and circle, along with a text indicating the link that is associated with the shapes that get uploaded on the webpage. When the user finds the clickable area and clicks it directs to the associated link.
To Continue Learning Please Login
Login with Google