HTML 9 💻 img, map and area elements in HTML - KandZ

Images make web pages visually appealing and engaging. The <img>, <map>, and <area> elements work together to display images and create interactive clickable regions within them.

The Image Element `<img>`

The <img> element is used to embed images into a webpage.

Basic Syntax:

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

Attributes:

Attribute	Purpose	Example
`src`	Specifies the image source URL	`src="images/photo.jpg"`
`alt`	Provides alternative text (accessibility)	`alt="A beautiful sunset"`
`width`	Specifies image width in pixels	`width="600"`
`height`	Specifies image height in pixels	`height="400"`

Key Points:

The src attribute can take absolute or relative URLs
The alt attribute is essential for accessibility (screen readers use it)
alt text appears if the image fails to load
width and height help prevent layout shifting while the image loads
The <img> element is self-closing (no closing tag needed)

Examples:

<!-- Image from external URL -->
<img src="https://example.com/logo.png" alt="Company Logo">

<!-- Image from local folder -->
<img src="images/profile.jpg" alt="Profile photo of John">

<!-- Image with specific dimensions -->
<img src="banner.jpg" alt="Website banner" width="800" height="300">

<!-- Image with proper alt text for accessibility -->
<img src="chart.png" alt="Bar chart showing sales growth from 2020 to 2024">

The Map and Area Elements `<map>` & `<area>`

These elements work together to create image maps — images with clickable regions that link to different URLs.

Basic Syntax:

<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.html">
  <area shape="rect" coords="100,280,230,555" alt="Lesson 6" href="6.html">
  <area shape="rect" coords="244,215,608,566" alt="Lesson 7" href="7.html">
</map>

How It Works:

The <img> uses the usemap attribute to reference the map
The <map> uses the name attribute to identify itself
Each <area> defines a clickable region on the image

The Area Element `<area>`

The <area> element defines a clickable region within an image map.

Attributes:

Attribute	Purpose	Example
`shape`	Defines the shape of the clickable area	`shape="rect"`
`coords`	Specifies the coordinates of the shape	`coords="x1,y1,x2,y2"`
`href`	URL to navigate to when clicked	`href="page.html"`
`alt`	Alternative text for accessibility	`alt="Link to page"`
`target`	Where to open the link	`target="_blank"`

Shape Types and Coordinates:

Shape	Description	Coordinates Format	Example
`rect`	Rectangle	`coords="x1,y1,x2,y2"` (top-left, bottom-right)	`coords="0,0,100,50"`
`circle`	Circle	`coords="x,y,r"` (center x, center y, radius)	`coords="50,50,30"`
`polygon`	Polygon	`coords="x1,y1,x2,y2,x3,y3,..."` (multiple points)	`coords="0,0,100,0,50,100"`
`default`	Entire image	No coordinates needed	`shape="default"`

Image Map Examples

1. Rectangular Areas:

<img src="menu.png" usemap="#menu-map" alt="Navigation menu">

<map name="menu-map">
  <!-- Rectangle area -->
  <area shape="rect" coords="10,10,100,50" alt="Home" href="index.html">
  <area shape="rect" coords="120,10,210,50" alt="About" href="about.html">
  <area shape="rect" coords="230,10,350,50" alt="Contact" href="contact.html">
</map>

2. Circular Areas:

<img src="planets.png" usemap="#planet-map" alt="Solar system">

<map name="planet-map">
  <!-- Circle area: center at (100,100) with radius 30 -->
  <area shape="circle" coords="100,100,30" alt="Sun" href="sun.html">
  <area shape="circle" coords="250,80,15" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="350,100,25" alt="Venus" href="venus.html">
</map>

3. Polygon Areas:

<img src="map.png" usemap="#country-map" alt="World map">

<map name="country-map">
  <!-- Polygon area for irregular shapes -->
  <area shape="polygon" coords="100,50,200,80,180,150,90,130" 
        alt="Country A" href="country-a.html">
  <area shape="polygon" coords="300,70,400,60,420,140,320,160" 
        alt="Country B" href="country-b.html">
</map>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images and Image Maps</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 { color: #333; }
        .image-container {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <h1>Images and Image Maps</h1>

    <!-- ====== SECTION 1: BASIC IMAGES ====== -->
    <h2>1. Basic Image</h2>

    <div class="image-container">
        <img src="https://via.placeholder.com/600x200/007bff/ffffff?text=Welcome+to+My+Website" 
             alt="Welcome banner" 
             width="600" 
             height="200">
    </div>

    <h3>Image with Caption:</h3>
    <figure>
        <img src="https://via.placeholder.com/400x200/28a745/ffffff?text=Beautiful+Sunset" 
             alt="A beautiful sunset over the ocean" 
             width="400" 
             height="200">
        <figcaption>Figure 1: Beautiful sunset over the ocean</figcaption>
    </figure>

    <hr>

    <!-- ====== SECTION 2: IMAGE MAPS ====== -->
    <h2>2. Image Maps - Clickable Regions</h2>

    <h3>Example 1: Navigation Menu with Rectangles</h3>
    <div class="image-container">
        <img src="https://via.placeholder.com/600x100/343a40/ffffff?text=Home++|++About++|++Services++|++Contact" 
             alt="Navigation menu" 
             usemap="#nav-map"
             width="600" 
             height="100">

        <map name="nav-map">
            <!-- Each navigation item is a rectangular area -->
            <area shape="rect" coords="0,0,150,100" alt="Home" href="#home" title="Go to Home">
            <area shape="rect" coords="150,0,300,100" alt="About" href="#about" title="Learn About Us">
            <area shape="rect" coords="300,0,450,100" alt="Services" href="#services" title="Our Services">
            <area shape="rect" coords="450,0,600,100" alt="Contact" href="#contact" title="Contact Us">
        </map>
    </div>

    <h3>Example 2: Interactive Map with Circles</h3>
    <div class="image-container">
        <img src="https://via.placeholder.com/500x300/6c757d/ffffff?text=Click+on+a+circle" 
             alt="Interactive map with clickable circles" 
             usemap="#circle-map"
             width="500" 
             height="300">

        <map name="circle-map">
            <!-- Three clickable circles -->
            <area shape="circle" coords="100,150,50" alt="Circle 1" href="#circle1" title="Click Circle 1">
            <area shape="circle" coords="250,150,50" alt="Circle 2" href="#circle2" title="Click Circle 2">
            <area shape="circle" coords="400,150,50" alt="Circle 3" href="#circle3" title="Click Circle 3">
        </map>
    </div>

    <h3>Example 3: Complex Image Map</h3>
    <div class="image-container">
        <img src="https://via.placeholder.com/600x400/ffc107/343a40?text=Clickable+Areas" 
             alt="Image with multiple clickable areas" 
             usemap="#complex-map"
             width="600" 
             height="400">

        <map name="complex-map">
            <!-- Rectangle -->
            <area shape="rect" coords="20,20,180,180" alt="Rectangle Area" href="#rect" title="Rectangle Clicked">

            <!-- Circle -->
            <area shape="circle" coords="380,100,80" alt="Circle Area" href="#circle" title="Circle Clicked">

            <!-- Polygon (triangle) -->
            <area shape="polygon" coords="50,350,200,250,200,350" alt="Polygon Area" href="#polygon" title="Polygon Clicked">

            <!-- Default (entire image) -->
            <area shape="default" alt="Default Area" href="#default" title="Click anywhere else">
        </map>
    </div>

    <hr>

    <!-- ====== SECTION 3: RESPONSIVE IMAGES ====== -->
    <h2>3. Responsive Images</h2>

    <div class="image-container">
        <img src="https://via.placeholder.com/800x300/17a2b8/ffffff?text=Responsive+Image" 
             alt="Responsive image example" 
             style="max-width: 100%; height: auto;">
    </div>

    <hr>

    <!-- ====== SECTION 4: IMAGE WITH CAPTION ====== -->
    <h2>4. Image with Figure and Figcaption</h2>

    <figure>
        <img src="https://via.placeholder.com/500x250/dc3545/ffffff?text=Figure+Example" 
             alt="Example image with caption" 
             width="500" 
             height="250">
        <figcaption>
            <strong>Figure 2:</strong> This is an example of an image with a caption using 
            the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements.
        </figcaption>
    </figure>

</body>
</html>

Quick Reference

Element/Attribute	Purpose	Example
`<img>`	Embed image	`<img src="photo.jpg" alt="Description">`
`src`	Image source URL	`src="images/logo.png"`
`alt`	Alternative text	`alt="Company logo"`
`width` / `height`	Image dimensions	`width="600" height="400"`
`usemap`	Reference to image map	`usemap="#map-name"`
`<map>`	Defines clickable regions	`<map name="map-name">`
`<area>`	Individual clickable region	`<area shape="rect" coords="...">`
`shape="rect"`	Rectangle area	`shape="rect"`
`shape="circle"`	Circle area	`shape="circle"`
`shape="polygon"`	Polygon area	`shape="polygon"`
`shape="default"`	Entire image area	`shape="default"`

Best Practices

✅ Do This:

<!-- Always include alt text -->
<img src="chart.png" alt="Sales data chart for 2024">

<!-- Use descriptive filenames -->
<img src="profile-photo-john-doe.jpg" alt="Profile photo of John Doe">

<!-- Specify width and height to prevent layout shift -->
<img src="banner.jpg" alt="Website banner" width="1200" height="400">

<!-- Make images responsive -->
<img src="photo.jpg" alt="Description" style="max-width: 100%; height: auto;">

❌ Don’t Do This:

<!-- Don't skip alt text -->
<img src="photo.jpg">

<!-- Don't use generic alt text -->
<img src="chart.png" alt="Chart">

<!-- Don't use images as backgrounds unnecessarily -->
<!-- Use CSS background images instead -->

<!-- Don't use large images without optimizing -->
<!-- Compress and resize images before adding to your site -->

Accessibility Tips

Always use descriptive alt text for meaningful images
Use empty alt text (alt="") for decorative images
Provide detailed alt text for complex images (charts, infographics)
Consider using aria-label for image maps to provide additional context

<!-- Decorative image -->
<img src="divider.png" alt="">

<!-- Complex image with detailed alt text -->
<img src="infographic.png" alt="Infographic showing website traffic growth from 2020 to 2024, with peaks during holiday seasons">

<!-- Accessible image map -->
<map name="accessible-map">
  <area shape="rect" coords="0,0,100,50" alt="Go to Home Page" href="index.html">
  <area shape="rect" coords="120,0,200,50" alt="Go to Contact Page" href="contact.html">
</map>

Pro Tip: Always optimize your images before using them on a website. Large image files slow down page loading times. Use tools like ImageOptim, TinyPNG, or modern formats like WebP to reduce file sizes while maintaining quality. Also, consider using the loading="lazy" attribute to lazy-load images off-screen.

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!

The Image Element <img>

Basic Syntax:

Attributes:

The Map and Area Elements <map> & <area>

Basic Syntax:

How It Works:

The Area Element <area>

Attributes:

Shape Types and Coordinates:

Image Map Examples

1. Rectangular Areas:

2. Circular Areas:

3. Polygon Areas:

Complete Example

Quick Reference

Best Practices

Accessibility Tips

Ads Blocker Detected!!!

The Image Element `<img>`

The Map and Area Elements `<map>` & `<area>`

The Area Element `<area>`