🌐 The <img> Tag in HTML

The <img> tag is used to insert an image into a webpage. 👉 Important point: It is an empty tag (self-closing), which means it does not have a closing tag (</img> ❌).

Basic Syntax:

<img src="image.jpg" alt="Description of image" />

---

✅ Important Attributes of <img>

1. src (Source)

   • Stands for source.

   • Specifies the path of the image file.

   • Path can be:

     • Relative path (image is in the same folder as the HTML file)

       <img src="flower.jpg" alt="Beautiful Flower" />
       

     • Absolute path (full location on the internet or computer)

       <img src="https://example.com/flower.jpg" alt="Flower from web" />
       

---

2. alt (Alternative Text)

   • Provides a text description of the image.

   • Important when:

     • The image cannot be loaded (slow internet, broken link).
     • For screen readers (used by visually impaired users).

   • Example:

     <img src="lion.jpg" alt="A lion sitting in the jungle" />
     

   🔹 If the image doesn’t load, the browser will show:

   A lion sitting in the jungle
   

---

3. width and height

   • Used to specify the size of the image.

   • Values can be given in pixels or percentage.

   • Example:

     <img src="dog.jpg" alt="Cute Dog" width="200" height="150" />
     

   • If you give only one (say width), the browser adjusts the other automatically to keep the image proportion correct.

---

4. title

   • Shows a tooltip (small text) when the mouse pointer is placed over the image.

   • Example:

     <img src="book.jpg" alt="Book Image" title="This is a Book" />
     

---

5. border (older attribute, now replaced by CSS)

   • Adds a border around the image.

   • Example:

     <img src="pen.jpg" alt="Pen" border="2" />
     

   ⚠️ But in modern HTML, we use CSS:

   <img src="pen.jpg" alt="Pen" style="border:2px solid black;" />
   

---

6. align (older, now CSS is preferred)

   • Used to align image with text (left, right, middle).

   • Example:

     <img src="car.jpg" alt="Car" align="left" />
     

---

📘 Examples

Example 1 – Simple Image

<img src="nature.jpg" alt="Nature Image" />

Example 2 – Image with Size

<img src="bird.jpg" alt="Bird Sitting on a Branch" width="300" height="200" />

Example 3 – Image from the Internet

<img
  src="https://www.w3schools.com/images/w3schools_green.jpg"
  alt="W3Schools Logo"
  width="250"
/>

Example 4 – Image with Tooltip and Border

<img
  src="sun.jpg"
  alt="Sun Image"
  title="The Bright Sun"
  style="border:3px solid orange;"
/>

---

🌟 Key Points to Remember:

• <img> tag is empty (no closing tag).
• src and alt are mandatory attributes.
• width and height control size (don’t stretch too much, or it looks bad).
• title gives extra info on hover.
• Use CSS instead of old attributes like border and align.

---

👉 Now, here’s a quick revision table:

Attribute	Meaning	Example
src	Path of the image	<img src="pic.jpg">
alt	Alternative text	<img src="pic.jpg" alt="A picture">
width	Image width	<img src="pic.jpg" width="200">
height	Image height	<img src="pic.jpg" height="150">
title	Tooltip text	<img src="pic.jpg" title="My Photo">
border (old)	Adds border	<img src="pic.jpg" border="2">

---