🖼️ Mastering Image Tags in HTML (With Semantics)

Images make our websites engaging, but to make them accessible and meaningful, we need to use the right semantic HTML tags. Let’s break it down step by step.

---

🔹 1. The Basic <img> Tag

The simplest way to add an image:

<img src="sunset.jpg" alt="Sunset over the mountains">

• src → file path of the image
• alt → alternative text (important for accessibility & SEO)

---

🔹 2. Grouping Images With <figure>

Use <figure> when an image is self-contained and part of the content.

<figure>
  <img src="sunset.jpg" alt="Sunset over the mountains">
</figure>

👉 This tells the browser and screen readers: “This image is an independent piece of content.”

---

🔹 3. Adding Captions With <figcaption>

Captions explain the image. Place <figcaption> inside <figure>.

<figure>
  <img src="sunset.jpg" alt="Sunset over the mountains">
  <figcaption>A beautiful sunset view in the Himalayas.</figcaption>
</figure>

---

🔹 4. Responsive Images With <picture>

Sometimes, you want different images for mobile and desktop.

<figure>
  <picture>
    <source media="(min-width: 800px)" srcset="sunset-large.jpg">
    <source media="(min-width: 400px)" srcset="sunset-medium.jpg">
    <img src="sunset-small.jpg" alt="Sunset over the mountains">
  </picture>
  <figcaption>Sunset — shown in different sizes depending on screen.</figcaption>
</figure>

---

🔹 5. Clickable Areas With usemap

The usemap attribute allows you to define hotspots in an image that link to different places.

<figure>
  <img src="world-map.jpg" alt="World Map" usemap="#worldmap">

  <map name="worldmap">
    <!-- Rectangular area -->
    <area shape="rect" coords="50,50,200,150" href="https://en.wikipedia.org/wiki/India" alt="India">

    <!-- Circular area -->
    <area shape="circle" coords="400,200,50" href="https://en.wikipedia.org/wiki/Australia" alt="Australia">

    <!-- Polygonal area -->
    <area shape="poly" coords="600,100,650,150,700,120" href="https://en.wikipedia.org/wiki/Japan" alt="Japan">
  </map>

  <figcaption>Clickable world map — each area links to a different country.</figcaption>
</figure>

• usemap="#id" → connects <img> to a <map>
• <area> → defines clickable shapes (rect, circle, poly)
• coords → pixel coordinates for the shape
• alt → accessibility label

👉 This is useful for diagrams, maps, product images, etc.

---

🎯 Final Semantic Example

<article>
  <h2>Travel to the Himalayas</h2>
  <figure>
    <picture>
      <source srcset="himalaya.avif" type="image/avif">
      <source srcset="himalaya.webp" type="image/webp">
      <img src="himalaya.jpg" alt="Snow-covered Himalayan peaks" usemap="#himalaya-map">
    </picture>

    <map name="himalaya-map">
      <area shape="circle" coords="250,200,50" href="everest.html" alt="Mount Everest">
    </map>

    <figcaption>The Himalayan range with a clickable area linking to Everest.</figcaption>
  </figure>
</article>

---

✅ Best Practices

• Always add alt text
• Use <figure> + <figcaption> for meaning
• Use <picture> for responsive images
• Use usemap for interactive clickable regions
• Test clickable areas on different screen sizes

---