HTML <meta> Tag

HTML <map> Tag

Last Updated : 12 Sep, 2024

The <map> tag in HTML is used to define an image map. It is an image with clickable areas that link to different destinations or perform specific actions. The <map> tag is typically used in combination with the <img> tag and <area> tags to create these interactive regions. Each <area> tag within a <map> defines a shape (rectangle, circle, or polygon) and specifies the coordinates for the clickable area.

Syntax

HTML

<img src="image.jpg" usemap="#mapname" alt="Descriptive Image">

<map name="mapname">
  	<area shape="rect" coords="x1,y1,x2,y2" 
        href="link1.html" alt="Rectangle Area">
  	<area shape="circle" coords="x,y,radius" 
        href="link2.html" alt="Circle Area">
  	<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." 
        href="link3.html" alt="Polygon Area">
</map>

Where -

<img> Tag: Displays the image and references the <map> using the usemap attribute.
<map> Tag: Defines the clickable areas within the image.
<area> Tag: Specifies the shape, coordinates, link, and description for each clickable area.

Example: This example demonstrates a simple image map with rectangular clickable areas.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML map Tag</title>
</head>

<body style="text-align: center;">
    <p>
        Click on Images where the 
        cursor clickable
    </p>

    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png" 
        alt="Geeks_logo"
        usemap="#gfg">

    <map name="gfg">
        <area href="https://www.geeksforgeeks.org/" 
            coords="55,76,129,76,128,126,99,126,100,103,82,104,83,125,54,125,51,104"
            shape="poly">
    </map>
</body>

</html>

Output

HTML-map-Tag

Supported Browsers

Chrome 1
Edge 12
Firefox 1
Opera 15
Safari 1

HTML <meta> Tag

S

skyridetim

Improve

Article Tags :

Similar Reads

HTML <meta> Tag

A meta tag in HTML is an element that provides metadata about the HTML document. Metadata is data that describes other data, and in this case, it helps search engines and browsers understand how to handle or display content. The <meta> tag does not appear directly on the webpage, but it provid

HTML <samp> Tag

It is a phrase tag and is used to define the sample output text from a computer program.Syntax: <samp> Contents... </samp>Example: In this example, we are using the <samp> tag to display sample output or code. Here, the text "A computer science portal for Geeks" is rendered in a mo

HTML <mark> Tag

The <mark> tag in HTML is used to define the marked text. It is used to highlight the part of the text in a paragraph. The <mark> tag is new in HTML 5.Syntax: <mark> Contents... </mark>Note: The <mark> tag also supports the Global Attributes and Event Attributes in HTML

HTML <main> Tag

The HTML <main> Tag defines a document's main content, which should be unique. It excludes content like sidebars, navigation, logos, and copyright info, ensuring unique document-specific material within.Note: The document must not contain more than one <main> element. The <main> el

The <nav> tag in HTML is used to define navigation sections on a webpage. It typically contains links to important sections of the website, such as menus, tables of contents, or indexes, and is often structured within unordered lists (<ul>) or as standalone links.How to Use the <nav

This tag is used to specify that the text content is no longer correct or accurate. This tag is similar but slightly different from the <del> tag. The <s> tag should not be used to define deleted text, rather use the <del> tag for that.The <s> tag is used to define text that

HTML <menu> Tag

HTML <menu> TagÂ defines an Unordered List of items. For creating an unordered list, we can use the <menu> tag with HTML <li> tags. The HTML <menu> tag is a semantic tag and an alternative option for the HTML <ul> tag. Syntax<menu> <li>Content... </li>

HTML <span> Tag

The HTML <span> tag is an inline container that is used to group and apply styles or scripts to specific parts of text or elements within a document. The <span> tag is inline, meaning it doesn't create a new line. It stays within the same line as the text around it.The <span> tag d

HTML <table> Tag

HTML <table> tag is utilized to create tables on a webpage. It helps in structuring and displaying data in an organized and tabular manner. It helps to render the information in rows and columns, utilizing elements like <tr>, <th>, and <td> to specify different parts of the t

The HTML <rtc> tag is used to define the explanation of the ruby annotation which is a small text, attached with the main text. Such kind of annotation is used in Japanese or chinese publications. The <rtc> tag contains the <rt> tag. Note: HTML <rtc> tag is not supported in h