Image Elements

HTML Image Element (<img>)

A website without images can feel dull. The <img> element lets you add pictures to your webpage.

📌 Basic Syntax

<img src="url" />

• src → Stands for source. It tells the browser where to find the image.

• This tag is self-closing (no separate closing tag), also called a void element.

---

🎯 Example

<img src="https://picsum.photos/200/200" />

This loads a 200x200px random image from picsum.photos (a placeholder image service — like Lorem Ipsum, but for photos).

---

📝 The alt Attribute

<img src="dog.gif" alt="A puppy digging in the sand" />

• alt → Alternative text description.

• Helps visually impaired users using screen readers.

• If the image doesn’t load, the alt text appears instead.

Accessibility Tip: Always use alt text unless the image is purely decorative (then it can be left empty).

---

🌟 Image Types

• JPEG / PNG → Still images.

• GIF → Animated images (work the same way in <img>).

---

✅ Key Points to Remember

1. <img> is a void element → no closing tag.

2. src = image location.

3. alt = accessibility & fallback text.

4. You can use online URLs or local file paths.

5. Placeholder services like picsum.photos are useful during design.