How to create an area inside an image-map using HTML? Last Updated : 24 Jun, 2024 Comments Improve Suggest changes Like Article Like Report To define clickable regions within an image map in an HTML document, use the <area> tag. This tag directs users to different links when they click on specific areas of the mapped image. It is nested within the <map> tag as a child element. In HTML, <area> is self-closing. Syntax:<area> Contents </area> Example: The example below shows how to create an area inside an image-map using HTML5. html <!DOCTYPE html> <html> <body style="text-align: center"> <h2> An area inside an image-map </h2> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" alt="" width="300" height="119" class="aligncenter size-medium wp-image-910965" usemap="#shapemap" /> <map name="shapemap"> <!-- Area tag contained image. --> <area shape="poly" coords="59, 31, 28, 83, 91, 83" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png" alt="Triangle"> <area shape="circle" coords="155, 56, 26" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png" alt="Circle"> <area shape="rect" coords="224, 30, 276, 82" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png" alt="Square"> </map> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create an area inside an image-map using HTML? M manaschhabra2 Follow Improve Article Tags : Web Technologies HTML HTML-Misc HTML-Questions Similar Reads How to Create an Image Map in HTML ? An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp 2 min read How to Create Image Maps in HTML? Image maps in HTML5 allow you to make certain areas of an image clickable, leading users to different links or triggering specific actions. The clickable areas (also known as hotspots) are defined using the <area> tag, while the <map> tag is used to specify the map itself.What Is an Imag 1 min read How to create an image acting as a submit button using HTML5 ? In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of <input> type attribute is text. Here, we use a simple approach to complete the task. Syntax 2 min read How to create a client-side image-map in HTML5 ? In this article, we will create a client-side image map by using an <img> tag. The <img> tag is used to add images on a webpage. This tag is an empty tag which means it can contain only a list of attributes and it has no closing tag. Syntax: <img src="url" alt="some_text" usemap="#map 1 min read How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im 1 min read Like