html tutorial - Map <map> tag in HTML - html5 - html code - html form



  • The <map> tag is used to specify a client-side image-map.
  • The required name attribute of the <map> tag is combined with the <img>'s usemap attribute and builds a link between the image and the map.
  • The <map> tag includes a number of <area> elements, which specifies the clickable areas in the image map.
  • The <map> tag belongs to flow content, phrasing content and palpable content.
  • The <map> tag supports Global Attributes and Event Attributes.

Syntax for <map> tag:

<map name = “mapname “>content</map>

Differences between HTML 4.01 and HTML5 for <map> tag:

HTML 4.01

  • The name attribute has been defined.

HTML5

  • The id attribute is also added.

Sample Coding for <map> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy map Tag</title>
    </head>
    <body>
        <h2>Wikitechy Tutorials</h2>
            <img src="area.png"  alt="usemap" border="0" usemap="#map_name"/>
            <map name="map_name">
                <area shape="rect" coords="20,19,126,53" 
                      href="http://www.wikitechy.com/step-by-step-html-tutorials/
                            html-introduction" alt="HTML Tutorial" 
                      target="_blank" />
                <area shape="rect" coords="22,83,126,125" alt="PHP Tutorial" 
                      href="http://www.wikitechy.com/step-by-step-tutorials/php/
                            php-introduction" target="_blank" />
                <area shape="circle" coords="73,168,32" alt="CSS Tutorial"
                      href="http://www.wikitechy.com/step-by-step-tutorials/css-tutorials/
                            css-introduction" target="_blank" />
            </map>
    </body>
</html>

Code Explanation for <map> tag:

code explanation for map tag

  1. usemap attribute used to define an image that will be mapped to a map.
  2. <map> tag used to define list of area to map.
  3. name attribute used to define a name to the <map> tag which is used in usemap attribute in a <img> tag.
  4. shape attribute is used to define a rectangle shaped area to be map.
  5. coords attribute is used to co-ordinates of the rectangle as x0,y0,x1,y1.
  6. href attribute is used to set a target link to the mapped area.
  7. alt attribute is used to define alternate text for the area.
  8. target attribute is used to define that page will be opened in a new tab.

Output of <map> tag:

output for map tag

  1. The rectangle HTML linked the Wikitechy HTML Tutorials.
  2. output for map tag redirected to specific link
  3. If User clicks inside any specified area that will be redirected to the specific linked document like HTML.

Attribute:

Attribute Value HTML4 HTML5 Description
name Map name Yes Yes Describes the image-map name.

Browser Support for map tag:

No No Yes No No

Related Searches to map tag in html