HTML & CSS Course
HTML & CSS
/
Beginner

Images

Definition

The `<img>` tag is used to embed an image in an HTML page. It is a 'void' element, meaning it does not have a closing tag.

Explain Like I'm New

The `<img>` tag doesn't actually insert an image; it creates a holding space. The `src` attribute tells the browser to go download the image from a URL and display it in that space.

Real World Example

Adding a profile picture to a dashboard or displaying products on an e-commerce site.

Common Use Cases

  • •Displaying JPEGs, PNGs, GIFs, and SVGs

Interactive Example

Interview Questions

basic

  • What are the two absolutely required attributes for every `<img>` tag?

intermediate

  • Why is the `alt` attribute so important?

Flash Cards

Question

Required attributes?

Click to reveal answer
Answer

`src` (where the image is) and `alt` (what the image is).

Question

Why is 'alt' important?

Click to reveal answer
Answer

Three reasons: 1. Screen readers read this text out loud to blind users. 2. If the image link breaks, the browser displays this text instead. 3. Search engines (Google Images) read it to figure out what the picture is.