--- title: "HTML Graphics tags: map tag, picture tag, and figure tag" description: "Let's explore the map tag, picture tag, and figure tags and their usage, attributes, and examples." author: "Ashutosh Patel" published: 2025-03-25 updated: 2025-03-25 canonical: https://www.mindstick.com/articles/338869/html-graphics-tags-map-tag-picture-tag-and-figure-tag category: "html" tags: ["html", "html tags", "html graphics"] reading_time: 3 minutes --- # HTML Graphics tags: map tag, picture tag, and figure tag Let's explore the ``, ``, and `
` tags, their usage, [attributes](https://www.mindstick.com/interview/34453/what-are-attributes-in-dot-net), and examples. **1.** `` **Tag (Image Mapping)** The `` tag is used to create an **image map**, which allows users to click on different parts of an image and navigate to different links. ## Syntax ```html First Area Second Area Clickable Image ``` ## Attributes - `name`: Provides a name to the map (linked to `usemap`). - `usemap`: Links the image to the map using `#mapName`. `` **Tag Attributes** | **[Attribute](https://www.mindstick.com/interview/1137/what-is-attributes-and-reflection-in-c-sharp)** | **Description** | | --- | --- | | `shape` | Defines clickable shape (`rect`, `circle`, `poly`). | | `coords` | Specifies coordinates of the area. | | `href` | Link to a destination. | | `alt` | Alternate text for accessibility. | **Example:** Clickable Areas on an Image ```html HTML Map tag Example
Google Wikipedia
``` ## Note: - `rect` (**rectangle**) requires four coordinates (x1, y1, x2, y2). - `circle` requires three (x, y, radius). - `poly` (**polygon**) requires many (x1, y1, x2, y2, x3, y3, ...). **2.** `` **Tag ([Responsive Images](https://answers.mindstick.com/qa/112151/how-do-i-implement-responsive-images-to-cater-to-different-screen-sizes))** The `` tag allows you to define [multiple](https://www.mindstick.com/forum/33991/how-to-use-multiple-ng-app-in-a-single-page) [versions](https://answers.mindstick.com/qa/49863/list-the-versions-of-mac-os-x) of an image for different screen sizes or formats. ## Syntax ```html Responsive Image ``` ## Attributes - `srcset`: It defines the image file to be used. - `media`: It specifies the conditions under which the image is displayed. **Example:** Responsive Image with Different Sizes ```html Responsive Image Example

Image will change automatically based on screen size

Responsive image
``` - **Note:**\ The first matching `source` is displayed. - The `img` tag serves as a fallback. - Improves performance by providing smaller images for [mobile users](https://answers.mindstick.com/qa/105139/how-to-optimize-business-websites-for-mobile-users). **3.** `
` **Tag (Captioned Content)** The `
` tag is used to group images, illustrations, videos, or diagrams with captions. ## Syntax ```html
A Beautiful Nature Scene
A beautiful sunset in the mountains.
``` ## [Elements](https://yourviews.mindstick.com/story/1372/the-5-elements-of-nature) | **Elements** | **Description** | | --- | --- | | `
` | Groups [media content](https://www.mindstick.com/forum/156239/what-type-of-social-media-content-converts-best) (images, videos, etc.). | | `
` | Provides a **caption** for the content. | **Example:** Image with Caption ```html HTML Figure tag Example
drive-traffic
Sunset view at the beach
``` **Example:** Video with Caption ```html HTML Figure tag Example
Beautiful ocean waves in slow motion.
``` ## Notes: - `
` is [optional](https://www.mindstick.com/interview/22851/main-difference-between-optional-and-required-keywords), but improves accessibility. - It helps group related media elements in an article or blog. Also, read: [HTML Graphics using HTML](https://www.mindstick.com/articles/336067/html-graphics-using-html) --- Original Source: https://www.mindstick.com/articles/338869/html-graphics-tags-map-tag-picture-tag-and-figure-tag Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.