Images

What you'll learn

How to show an image, why alt text matters, and how to control its size.

Why it matters

Pictures make pages friendlier, but they also have to work for people who cannot see them, and for slow connections where they fail to load.

Explanation

The <img> tag shows an image. It is a void element: no content, no closing tag. Two attributes are essential:

• src: where the image file lives (a URL or a file path).
• alt: a short text description used by screen readers and shown if the image fails to load.

You can set width and height in pixels so the browser reserves space before the image loads, which stops the page from jumping around.

If an image is purely decoration, use an empty alt: alt="". Screen readers then skip it.

Example

Step-by-step walkthrough

1. <img starts the tag. There is no closing tag.
2. src points to the file. Here it is an online placeholder image.
3. alt describes the picture in words.
4. width and height tell the browser the size before download.

Try it yourself

Change the text in the src address (after text=) and update the alt to match.

Show an imageHTML / CSS

Editable code<img src="https://placehold.co/300x160/png?text=Hello" alt="A grey box with the word Hello" width="300" height="160" > <p>Images need internet access in this preview.</p>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Leaving out alt. Always include it, even if empty for decoration.
• Alt text that says "image of". Screen readers already announce that it is an image.
• Stretching with mismatched width and height, which distorts the picture.
• Wrong file path. A broken src shows the alt text instead. That is a good clue to check the path.

Quick quiz

Summary

• <img src="..." alt="..."> shows a picture.
• Always write meaningful alt text, or alt="" for decoration.
• Set width and height to avoid layout jumps.

Next: lists.

<img
  src="https://placehold.co/300x160/png?text=Hello"
  alt="A grey box with the word Hello"
  width="300"
  height="160"
>