HTML Graphics tags: map tag, picture tag, and figure tag

Let's explore the <map>, <picture>, and <figure> tags, their usage, attributes, and examples.

1. <map> Tag (Image Mapping)

The <map> 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

<map name="mapName">
   <area shape="rect" coords="34,44,270,350" href="page1.html" alt="First Area">
   <area shape="circle" coords="337,300,44" href="page2.html" alt="Second Area">
</map>
<img src="image.jpg" usemap="#mapName" alt="Clickable Image">

Attributes

name: Provides a name to the map (linked to usemap).
usemap: Links the image to the map using #mapName.

<area> Tag Attributes

Attribute	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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Map tag Example</title>
</head>
<body>
 <div>   
 <img src="https://www.mindstick.com/Images/businessImages/business-help.jpg" usemap="#worldmap" width="500" height="300">
 <map name="worldmap">
     <area shape="rect" coords="50,50,150,150" href="https://www.google.com" alt="Google">
     <area shape="circle" coords="300,100,50" href="https://www.wikipedia.org" alt="Wikipedia">
 </map>
 </div>
</body>
</html>

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. <picture> Tag (Responsive Images)

The <picture> tag allows you to define multiple versions of an image for different screen sizes or formats.

Syntax

<picture>
   <source srcset="small.jpg" media="(max-width: 600px)">
   <source srcset="medium.jpg" media="(max-width: 1000px)">
   <img src="large.jpg" alt="Responsive Image">
</picture>

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Responsive Image Example</title>
</head>
<body>
 <div>   
  <h3>Image will change automatically based on screen size</h3>
 <picture>
     <source srcset="https://www.mindstick.com/Images/mindstick-logo.png" media="(max-width: 600px)">
     <source srcset="https://www.mindstick.com/Images/businessImages/drive-traffic.jpg" media="(max-width: 1200px)">
     <img src="https://www.mindstick.com/Images/businessImages/business-help.jpg" alt="Responsive image">
 </picture>
 </div>
</body>
</html>

Note:
The first matching source is displayed.
The img tag serves as a fallback.
Improves performance by providing smaller images for mobile users.

3. <figure> Tag (Captioned Content)

The <figure> tag is used to group images, illustrations, videos, or diagrams with captions.

Syntax

<figure>
   <img src="nature.jpg" alt="A Beautiful Nature Scene">
   <figcaption>A beautiful sunset in the mountains.</figcaption>
</figure>

Elements

Elements	Description
`<figure>`	Groups media content (images, videos, etc.).
`<figcaption>`	Provides a caption for the content.

Example: Image with Caption

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Figure tag Example</title>
</head>
<body>
 <div>   
  <figure>
     <img src="https://www.mindstick.com/Images/businessImages/drive-traffic.jpg" alt="drive-traffic">
     <figcaption>Sunset view at the beach</figcaption>
 </figure>
 </div>
</body>
</html>

Example: Video with Caption

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Figure tag Example</title>
</head>
<body>
 <div>   
  <figure>
     <video controls>
         <source src="https://cdn.pixabay.com/video/2022/09/03/130062-746154306_tiny.mp4" type="video/mp4">
     </video>
     <figcaption>Beautiful ocean waves in slow motion.</figcaption>
 </figure>
 </div>
</body>
</html>

Notes:

<figcaption> is optional, but improves accessibility.
It helps group related media elements in an article or blog.

Also, read: HTML Graphics using HTML

articles

HTML Graphics tags: map tag, picture tag, and figure tag

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By