HTML 9 – img, map and area elements in HTML

<img src="path/to/image" alt="description of the image" width="600" height="400">

The image element is used to add an image into a webpage
You can specify the image source with the src attribute
The src attribute can take relative or absolute URL
alt attribute provides an alternative text for the users who cannot see the image
width and height attributes specify the width and the height of the image

<img src="path/to/image" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="316,11,603,198" alt="Lesson 5" href="5.htlm">
    <area shape="rect" coords="100,280,230,555" alt="Lesson 6" href="6.htlm">
    <area shape="rect" coords="244,215,608,566" alt="Lesson 7" href="7.htlm">
</map>

map is used to create an interactive image map
Allows to users to click on specific areas within the image and navigate to different pages
usemap attribute in specifies the id of the map that will be used
map’s attribute name specifies the id/name of the map
map contains one or more area elements which represents a clickable area
shape attribute specifies the shape of the area (rect, circle and polygon)
cords attribute specifies the coordinates of the area(x1, y1, x2, y2)
href attribute specifies the URL for when the user clicks on the area

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Leave a Reply Cancel reply